add setting Page

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
@@ -45,6 +46,7 @@ declare module '@vue/runtime-core' {
     ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     AUpload: typeof import('ant-design-vue/es')['Upload']

src/api/configuration.ts

@@ -0,0 +1,7 @@
+import type { Const } from '@/model/const'
+import useAxios from '@core/utils/useAxios'
+
+export const setConfiguration = async (obj: Const) => await useAxios.post<Const>(`/admin/get_settings`, obj)
+
+export const getConfiguration = async () =>
+    await useAxios.get<Array<Const>>(`/admin/get_settings`)

src/model/const.ts

@@ -3,4 +3,7 @@ export interface Const {
   const_id?: number | undefined
   title_fa?: string | undefined
   value?: string | undefined
+  is_active: boolean
+  description: string
+  id: number
 }

src/pages/menuPages/configuration/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <BasicShowContent title="تنظیمات">
+      <BasicTags :items="items" color="green" @add="add" @edit="edit" :key="refresh" :loading="loading"
+                 :closable="false" />
+    </BasicShowContent>
+    <BasicModal v-model:visible="addConfigVisible" :title="editId ? `ویرایش` : 'افزودن'"
+                @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="کلید" >
+          <BasicInput v-model:value="form.key" :placeHolder="form.key" />
+        </a-form-item>
+        <a-form-item name="value" :label="!editId ? 'مقدار' : form.key">
+          <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>
+      </a-form>
+    </BasicModal>
+  </div>
+</template>
+
+<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 { loading } from '@/utils'
+import { getConfiguration, setConfiguration } from '@/api/configuration'
+
+//radio button
+const checked = ref(false)
+
+//data Arrays
+const items = ref<Array<TagItem>>()
+const baseData = ref<Array<Const>>()
+
+//nature modal
+const addConfigVisible = ref<boolean>()
+
+//refresh
+let refresh = 0
+
+const form = ref<Const>({
+  key: '',
+  value: ''
+})
+const formRef = ref<FormInstance>()
+
+//get nature
+onMounted(() => {
+  initConfig()
+})
+
+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
+
+      return {
+        id: x.id,
+        name: `${x.key ?? ''} : ${truncatedValue}`
+      };
+    });
+    refresh++;
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+//edit nature
+let editId: number | undefined = undefined
+
+function edit(id: number) {
+  form.value = baseData.value?.find((x: Const) => x.id === id) ?? ({} as Const)
+  addConfigVisible.value = true
+  editId = id
+}
+
+//resetData
+async function resetData() {
+  await getConfiguration()
+  formRef.value?.resetFields()
+  form.value = {
+    key: '',
+    value: ''
+  }
+  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)
+      }
+      await resetData()
+      message.success('عملیات با موفقیت انجام شد')
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loading.value = false
+      addConfigVisible.value = false
+    }
+  })
+}
+</script>
+
+<style lang="less"></style>

src/router/routes/setting.ts

@@ -60,7 +60,17 @@ const Setting: RouteRecordRaw = {
             icon: 'vuesax-linear:notification-bing',
             title: 'هشدار قیمت'
           }
+        },
+        {
+          name: 'configuration',
+          path: 'configuration',
+          component: () => import('@/pages/menuPages/configuration/index.vue'),
+          meta: {
+            icon: 'vuesax-linear:setting-2',
+            title: 'تنظیمات'
+            //hideChildren: false
           }
+        },
       ]
     }
   ]