todo: form tooltip

11 months ago · 7c85e61f78
parent 0601729c92
commit 7c85e61f78
5 changed files with 60 additions and 18 deletions
--- a/public/locales/en/products.json
+++ b/public/locales/en/products.json
@ -116,5 +116,26 @@
    "Weekdays": "Weekdays"
  },

+  "FormTooltip": {
+    "Type": "Product Type",
+    "Title": "Title",
+    "Code": "Code",
+    "City": "City",
+    "Dept": "Department",
+    "Duration": "Duration",
+    "RecommendsRate": "RecommendsRate",
+    "OpenHours": "Open Hours",
+    "OpenWeekdays": "Open Weekdays",
+    "DisplayToC": "Display Type",
+    "KM": "KM",
+    "Description": "Description",
+    "Remarks": "Remarks"
+  },
+
+  "LgcModal": {
+    "title": "Add language",
+    "placeholder": "Pick a language"
+  },
+
  "#": "Product"
 }
--- a/public/locales/zh/products.json
+++ b/public/locales/zh/products.json
@ -104,5 +104,25 @@
    "Weekdays": "周末",
    "Operation": "Operation"
  },
+  "FormTooltop": {
+    "Type": "Product Type",
+    "Title": "Title",
+    "Code": "Code",
+    "City": "City",
+    "dept": "Department",
+    "Duration": "Duration",
+    "RecommendsRate": "RecommendsRate",
+    "OpenHours": "Open Hours",
+    "OpenWeekdays": "Open Weekdays",
+    "DisplayToC": "Display Type",
+    "KM": "KM",
+    "Description": "Description",
+    "Remarks": "Remarks"
+  },
+
+  "LgcModal": {
+    "title": "添加语种",
+    "placeholder": "选择语种"
+  },
  "#": "产品"
 }
--- a/src/views/products/Detail/NewProductModal.jsx
+++ b/src/views/products/Detail/NewProductModal.jsx
@ -10,7 +10,7 @@ import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
 import dayjs from 'dayjs'

 export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('products');
  const [form] = Form.useForm();

  useEffect(() => {
@ -21,10 +21,10 @@ export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }

  return (
    <Form layout='horizontal' form={form} name='new_product_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
-      <Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]}>
+      <Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]} tooltip={t('FormTooltip.Type')}>
        <ProductsTypesSelector maxTagCount={1} mode={null} placeholder={t('All')} />
      </Form.Item>
-      <Form.Item name={`title`} label={t('products:Title')} rules={[{ required: true }]} >
+      <Form.Item name={`title`} label={t('products:Title')} rules={[{ required: true }]} tooltip={t('FormTooltip.Title')}>
        <Input />
      </Form.Item>
    </Form>
--- a/src/views/products/Detail/ProductInfoForm.jsx
+++ b/src/views/products/Detail/ProductInfoForm.jsx
@ -176,7 +176,7 @@ function getFields(props) {
    item(
      'title',
      99,
-      <Form.Item name='title' label={t('Title')} {...fieldProps.title} rules={[{ required: true }]}>
+      <Form.Item name='title' label={t('Title')} {...fieldProps.title} rules={[{ required: true }]} tooltip={t('FormTooltip.Title')}>
        <Input allowClear {...fieldComProps.title} {...styleProps} {...editableProps('title')} />
      </Form.Item>,
      fieldProps?.title?.col || midCol
@ -184,7 +184,7 @@ function getFields(props) {
    item(
      'code',
      99,
-      <Form.Item name='code' label={t('Code')} {...fieldProps.code} rules={[{ required: true }]}>
+      <Form.Item name='code' label={t('Code')} {...fieldProps.code} rules={[{ required: true }]} tooltip={t('FormTooltip.Code')}>
        <Input allowClear {...fieldComProps.code} {...styleProps} {...editableProps('code')} />
      </Form.Item>,
      fieldProps?.code?.col || midCol
@ -192,7 +192,7 @@ function getFields(props) {
    item(
      'city',
      99,
-      <Form.Item name='city' label={t('City')} {...fieldProps.city}>
+      <Form.Item name='city' label={t('City')} {...fieldProps.city} tooltip={t('FormTooltip.City')}>
        <CitySelector {...styleProps} {...editableProps('city_id')} />
      </Form.Item>,
      fieldProps?.city?.col || midCol
@ -208,7 +208,7 @@ function getFields(props) {
    item(
      'duration',
      99,
-      <Form.Item name='duration' label={t('Duration')} {...fieldProps.duration}>
+      <Form.Item name='duration' label={t('Duration')} {...fieldProps.duration} tooltip={t('FormTooltip.Duration')}>
        <InputNumber suffix={'H'} max={24} {...styleProps} {...editableProps('duration')} />
        {/* <Input allowClear {...fieldComProps.duration} suffix={'H'} /> */}
      </Form.Item>,
@ -217,7 +217,7 @@ function getFields(props) {
    item(
      'km',
      99,
-      <Form.Item name='km' label={t('KM')} {...fieldProps.km}>
+      <Form.Item name='km' label={t('KM')} {...fieldProps.km} tooltip={t('FormTooltip.KM')}>
        <InputNumber suffix={'KM'} min={0.1} {...styleProps} {...editableProps('km')} />
      </Form.Item>,
      fieldProps?.km?.col || midCol
@ -225,7 +225,7 @@ function getFields(props) {
    item(
      'recommends_rate',
      99,
-      <Form.Item name='recommends_rate' label={t('RecommendsRate')} {...fieldProps.recommends_rate}>
+      <Form.Item name='recommends_rate' label={t('RecommendsRate')} {...fieldProps.recommends_rate} tooltip={t('FormTooltip.RecommendsRate')}>
        {/* <Input placeholder={t('RecommendsRate')} allowClear /> */}
        <Select
          {...styleProps}
@ -250,6 +250,7 @@ function getFields(props) {
        name='display_to_c'
        label={t('DisplayToC')}
        {...fieldProps.display_to_c}
+        tooltip={t('FormTooltip.DisplayToC')}
        // rules={[
        //   () => ({
        //     validator(_, value) {
@ -283,7 +284,7 @@ function getFields(props) {
    item(
      'open_weekdays',
      99,
-      <Form.Item name='open_weekdays' label={t('OpenWeekdays')} {...fieldProps.open_weekdays}>
+      <Form.Item name='open_weekdays' label={t('OpenWeekdays')} {...fieldProps.open_weekdays} tooltip={t('FormTooltip.OpenWeekdays')}>
        <Checkbox.Group options={dataSets.weekdays} {...styleProps} {...editableProps('open_weekdays')} />
      </Form.Item>,
      fieldProps?.open_weekdays?.col || 24
@ -291,7 +292,7 @@ function getFields(props) {
    item(
      'remarks',
      99,
-      <Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks}>
+      <Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks} tooltip={t('FormTooltip.Remarks')}>
        <Input.TextArea allowClear rows={2} maxLength={2000} {...fieldComProps.remarks} {...styleProps} {...editableProps('remarks')} />
      </Form.Item>,
      fieldProps?.remarks?.col || 24
--- a/src/views/products/Detail/ProductInfoLgc.jsx
+++ b/src/views/products/Detail/ProductInfoLgc.jsx
@ -7,7 +7,7 @@ import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
 import { cloneDeep, isEmpty, isNotEmpty } from '@/utils/commons';

 const ProductInfoLgc = ({ editable, formInstance, ...props }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('products');
  const { language: languageHT } = useDefaultLgc();
  const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
  const allLgcOptions = useHTLanguageSets();
@ -25,7 +25,7 @@ const ProductInfoLgc = ({ editable, formInstance, ...props }) => {
      forceRender: true,
      children: (
        <Form.Item noStyle>
-          <Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'title']} label={t('products:Title')} initialValue={ele.title} rules={[{ required: true }]}>
+          <Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'title']} label={t('products:Title')} initialValue={ele.title} rules={[{ required: true }]} tooltip={t('FormTooltip.Title')}>
            <Input
              className={' !text-slate-600'}
              allowClear
@ -35,7 +35,7 @@ const ProductInfoLgc = ({ editable, formInstance, ...props }) => {
              disabled={!editable}
            />
          </Form.Item>
-          <Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'description']} label={t('products:Description')} initialValue={ele.descriptions}>
+          <Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'description']} label={t('products:Description')} initialValue={ele.descriptions} tooltip={t('FormTooltip.Description')}>
            <Input.TextArea
              className={'!text-slate-600'}
              rows={3}
@ -86,10 +86,10 @@ const ProductInfoLgc = ({ editable, formInstance, ...props }) => {
      key: lgcItem.value,
      children: (
        <Form.Item noStyle>
-          <Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'title']} preserve={false} label={t('products:Title')} rules={[{ required: true }]}>
+          <Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'title']} preserve={false} label={t('products:Title')} rules={[{ required: true }]} tooltip={t('FormTooltip.Title')}>
            <Input allowClear />
          </Form.Item>
-          <Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'description']} preserve={false} label={t('products:Description')}>
+          <Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'description']} preserve={false} label={t('products:Description')} tooltip={t('FormTooltip.Description')}>
            <Input.TextArea rows={3} allowClear />
          </Form.Item>
          <Form.Item hidden name={['lgc_details_mapped', `${lgcItem.value}`, 'lgc']} preserve={false} initialValue={lgcItem.value}>
@ -159,12 +159,12 @@ const ProductInfoLgc = ({ editable, formInstance, ...props }) => {
        hideAdd={isEmpty(lgcOptions) || !editable}
        tabPosition='top'
      />
-      <Modal title={'选择语言'} open={newLgcModalVisible} onOk={handleOk} onCancel={() => setNewLgcModalVisible(false)}>
+      <Modal title={t('LgcModal.title')} open={newLgcModalVisible} onOk={handleOk} onCancel={() => setNewLgcModalVisible(false)} destroyOnClose>
        <Select
          showSearch
          labelInValue
          style={{ width: '80%' }}
-          placeholder='选择语言'
+          placeholder={t('LgcModal.placeholder')}
          optionFilterProp='children'
          options={lgcOptions}
          onChange={onSelectNewLgc}