1405/02/09-change style in configuration page

src/pages/menuPages/configuration/index.vue

@@ -1,24 +1,69 @@
 <template>
   <div>
     <BasicShowContent title="تنظیمات">
-      <BasicTags :items="items" color="green" @add="add" @edit="edit" :key="refresh" :loading="loading"
-                 :closable="false" />
+      <BaseButton class="mb-10" @click="add" type="primary" icon="vuesax-linear:add">
+        افزودن
+      </BaseButton>
+      <template v-if="items && hasAnyItems">
+        <div v-if="groupedItems.switch.length > 0" class="mb-4">
+          <div class="grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
+            <SwitchConfigs v-for="item in groupedItems.switch" :key="item.id" :item="item"/>
+          </div>
+        </div>
+
+        <div v-if="groupedItems.text.length > 0" class="mb-4">
+          <div class="h-1px bg-gray-300 my-4"></div>
+          <div class="grid lg:grid-cols-2 xl:grid-cols-3 gap-2">
+            <TextConfigs v-for="item in groupedItems.text" :key="item.id" :item="item"/>
+          </div>
+        </div>
+
+        <div v-if="groupedItems.longtext.length > 0">
+          <div class="h-1px bg-gray-300 my-4"></div>
+          <div class="gap-2">
+            <LongtextConfigs
+                v-for="item in groupedItems.longtext"
+                :key="item.id"
+                :item="item"
+                @set-val="(val) => (item.value = val)"
+            />
+          </div>
+        </div>
+      </template>
     </BasicShowContent>
-    <BasicModal v-model:visible="addConfigVisible" :title="editId ? `ویرایش` : 'افزودن'"
-                @close="addConfigVisible = false" @ok="ok" :loading="loading">
+
+    <BasicModal
+        v-model:visible="addConfigVisible"
+        title="افزودن"
+        @close="addConfigVisible = false"
+        @ok="ok"
+        :loading="loading"
+    >
       <a-form ref="formRef" :model="form" autocomplete="off">
         <a-form-item name="is_active">
           <span class="ml-2">وضعیت :</span>
           <a-checkbox v-model:checked="form.is_active">{{ !form.is_active ? 'غیرفعال' : 'فعال' }}</a-checkbox>
         </a-form-item>
-        <a-form-item v-if="!editId" name="key" label="کلید" >
+        <a-form-item name="title_fa" label="عنوان">
+          <BasicInput v-model:value="form.title_fa" :placeHolder="form.title_fa" />
+        </a-form-item>
+        <a-form-item name="key" label="کلید">
           <BasicInput v-model:value="form.key" :placeHolder="form.key" />
         </a-form-item>
-        <a-form-item name="value" :label="!editId ? 'مقدار' : form.key">
+        <a-form-item name="type" label="نوع">
+          <BasicSelect
+              allowClear
+              v-model:value="form.type"
+              :items="typeItems"
+              valueName="value"
+              keyName="key"
+          />
+        </a-form-item>
+        <a-form-item name="value" label="مقدار">
           <BasicInput v-model:value="form.value" :placeHolder="form.value" />
         </a-form-item>
-        <a-form-item name="description" :label="'توضیحات'">
-          <BasicInput v-model:value="form.description" :placeHolder="form.description" />
+        <a-form-item name="description" label="توضیحات">
+          <BasicTextArea v-model:value="form.description" :placeHolder="form.description" />
         </a-form-item>
       </a-form>
     </BasicModal>
@@ -28,106 +73,252 @@
 <script setup lang="ts">
 import BasicShowContent from '@/components/BasicShowContext.vue'
 import BasicModal from '@/components/BasicModal.vue'
-import BasicTags from '@/components/BasicTags/index.vue'
 import type { FormInstance } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { Const } from '@/model/const'
-import type { TagItem } from '@/components/BasicTags/model'
 import BasicInput from '@/components/BasicInput.vue'
+import BasicTextArea from '@/components/BasicTextArea.vue'
+import TextConfigs from '@/pages/menuPages/configuration/components/TextConfigs.vue'
+import LongtextConfigs from '@/pages/menuPages/configuration/components/LongtextConfigs.vue'
 import { loading } from '@/utils'
 import { getConfiguration, setConfiguration } from '@/api/configuration'
 
-//radio button
-const checked = ref(false)
-
 //data Arrays
-const items = ref<Array<TagItem>>()
+const items = ref<Array<any>>()
 const baseData = ref<Array<Const>>()
 
-//nature modal
-const addConfigVisible = ref<boolean>()
-
-//refresh
-let refresh = 0
+//modal
+const addConfigVisible = ref<boolean>(false)
 
 const form = ref<Const>({
   key: '',
-  value: ''
+  value: '',
+  title_fa:'',
+  type: 'text',
+  description: '',
+  is_active: true
 })
 const formRef = ref<FormInstance>()
 
-//get nature
+const typeItems = [
+  {
+    value: 'متنی کوتاه',
+    key: 'text'
+  },
+  {
+    value: 'متنی بلند',
+    key: 'longtext'
+  },
+  {
+    value: 'سوییچی',
+    key: 'switch'
+  }
+]
+
 onMounted(() => {
   initConfig()
 })
+const settingsConfig = {
+  // اطلاعات پایه
+  'name_fa': {
+    title: 'نام فارسی',
+    list: []
+  },
+  'name_en': {
+    title: 'نام انگلیسی',
+    list: []
+  },
+  'app_url': {
+    title: 'آدرس اپلیکیشن',
+    list: []
+  },
+  'bace_url': {
+    title: 'آدرس پایه',
+    list: []
+  },
+  'admin_url': {
+    title: 'آدرس پنل ادمین',
+    list: []
+  },
+  'server_url': {
+    title: 'آدرس سرور',
+    list: []
+  },
 
+  // ته‌حساب
+  'tahesab_token': {
+    title: 'توکن ته‌حساب',
+    list: []
+  },
+  'tahesab_db': {
+    title: 'دیتابیس ته‌حساب',
+    list: []
+  },
+  'send_to_tahesab': {
+    title: 'ارسال اسناد به ته حساب',
+    list: ['true', 'false']
+  },
+
+  // تنظیمات صفحه‌ها
+  'has_page_earn_money': {
+    title: 'صفحه کسب درآمد',
+    list: ['true', 'false']
+  },
+  'has_page_fund': {
+    title: 'صفحه سرمایه‌گذاری',
+    list: ['true', 'false']
+  },
+  'has_page_permission': {
+    title: 'صفحه دسترسی‌ها',
+    list: ['true', 'false']
+  },
+  'has_page_price_trigger': {
+    title: 'صفحه هشدار قیمت',
+    list: ['true', 'false']
+  },
+  'has_page_physical_gold': {
+    title: 'صفحه طلای فیزیکی',
+    list: ['true', 'false']
+  },
+
+  // رنگ‌ها
+  'color_primary': {
+    title: 'رنگ اصلی',
+    list: []
+  },
+  'color_secondary': {
+    title: 'رنگ ثانویه',
+    list: []
+  },
+
+  // کارمزدها
+  'fee_service_charge_percentage': {
+    title: 'کارمزد درصدی',
+    list: []
+  },
+  'fee_cash': {
+    title: 'کارمزد ریالی',
+    list: []
+  },
+  'fee_single': {
+    title: 'اختلاف با قیمت واقعی',
+    list: []
+  },
+  'fee_free': {
+    title: 'تعداد سفارش اول بدون کارمزد',
+    list: []
+  },
+
+  // تنظیمات عمومی
+  'has_chat': {
+    title: 'فعال بودن چت',
+    list: ['true', 'false']
+  },
+  'is_requaire_referral': {
+    title: 'نیازمند معرف',
+    list: ['true', 'false']
+  },
+  'auto_active_customer': {
+    title: 'فعالسازی خودکار حساب کاربران',
+    list: ['true', 'false']
+  },
+  'open_register': {
+    title: 'فعالسازی ثبت ‌نام',
+    list: ['true', 'false']
+  },
+  'charge_notif': {
+    title: 'ارسال پیام موقع شارژ از سمت ادمین',
+    list: ['true', 'false']
+  },
+  'display_montzar': {
+    title: 'نمایش منتظر',
+    list: ['true', 'false']
+  },
+
+  // توکن‌ها
+  'liman_token': {
+    title: 'توکن لیمان',
+    list: []
+  },
+  'key': {
+    title: 'کلید',
+    list: []
+  },
+
+  // متفرقه
+  'logo_login': {
+    title: 'لوگو صفحه ورود',
+    list: []
+  },
+  'logo_register': {
+    title: 'لوگو صفحه ثبت‌نام',
+    list: []
+  }
+}
 async function initConfig() {
   try {
     loading.value = true
     baseData.value = await getConfiguration()
     items.value = baseData.value?.map((x: Const) => {
-      // Truncate x.value if it's longer than 40 characters
-      const truncatedValue = x?.value?.length > 40 ? x?.value?.substring(0, 40) + '...' : x.value
+      const title = x?.title_fa ?? (settingsConfig[x.key]?.title ?? x?.key)
 
       return {
         id: x.id,
-        name: `${x.key ?? ''} : ${truncatedValue}`
-      };
-    });
-    refresh++;
+        name: `${title}`,
+        value: x.value,
+        key: x.key,
+        type: x.type || 'text',
+        description: x.description,
+        is_active: x.is_active,
+        list: settingsConfig[x.key]?.list ?? []
+
+      }
+    })
   } catch (e) {
-    console.error(e);
+    console.error(e)
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
-//edit nature
-let editId: number | undefined = undefined
+const groupedItems = computed(() => {
+  const result = { switch: [], text: [], longtext: [] } as Record<string, any[]>
+  items.value?.forEach((item) => {
+    const type = item.type && result[item.type] ? item.type : 'text'
+    result[type].push(item)
+  })
+  return result
+})
 
-function edit(id: number) {
-  form.value = baseData.value?.find((x: Const) => x.id === id) ?? ({} as Const)
-  addConfigVisible.value = true
-  editId = id
-}
+const hasAnyItems = computed(() =>
+    Object.values(groupedItems.value).some((list) => list.length > 0)
+)
 
-//resetData
 async function resetData() {
-  await getConfiguration()
   formRef.value?.resetFields()
   form.value = {
     key: '',
-    value: ''
+    value: '',
+    title_fa:'',
+    type: 'text',
+    description: '',
+    is_active: true
   }
   await initConfig()
 }
 
-//add
-
 async function add() {
-  editId = undefined
   await resetData()
   addConfigVisible.value = true
 }
 
-//submit
-
 async function ok() {
-  let obj = {
-    id: editId,
-    key: form.value.key,
-    value: form.value.value,
-    description: form.value.description,
-    is_active: form.value.is_active
-  }
   formRef.value?.validateFields().then(async () => {
     try {
       loading.value = true
-      if (editId) {
-        await setConfiguration(obj)
-      } else {
-        await setConfiguration(form.value)
-      }
+      debugger
+      console.log(form.value)
+      await setConfiguration(form.value)
       await resetData()
       message.success('عملیات با موفقیت انجام شد')
     } catch (e) {