change configuration & add talabBedehi

src/pages/menuPages/configuration/components/LongtextConfigs.vue

@@ -1,59 +1,80 @@
 <template>
-  <div class="flex mb-2">
-    <div class="flex flex-col justify-between ">
-      <div class=" font-bold">{{ item.name }}</div>
-      <div class=" text-xs ">کلید: {{ item.key }}</div>
+  <div class="mb-2 border-1 border-gray-300 border-solid rounded-lg p-3">
+    <div>
+      <div class="flex justify-between">
+        <div class="flex items-center font-bold">
+          <div>{{ item.title_fa ?? item.name ?? '-' }}</div>
+          <BaseIcon
+            @click="ok()"
+            icon="vuesax-linear:tick-circle"
+            class="mr-2 items-center cursor-pointer"
+            color="green"
+            size="24"
+          />
+        </div>
+        <a-switch
+          checked-children="فعال"
+          un-checked-children="غیرفعال"
+          v-model:checked="isActive"
+          @change="ok"
+        />
+      </div>
     </div>
-    <BaseIcon
-        @click="ok()"
-        icon="vuesax-linear:tick-circle"
-        class="mr-2 items-center"
-        color="green"
-        size="24"
-    />
-  </div>
-  <QuillEditor
+    <div class="flex justify-between items-center mt-2">
+      <div class="text-xs">کلید: {{ item.key }}</div>
+      <a-switch
+        checked-children="نمایش"
+        un-checked-children="عدم نمایش"
+        v-model:checked="isVisible"
+        @change="ok"
+      />
+    </div>
+    <QuillEditor
       placeholder="متن"
       v-model:content="content"
       toolbar="full"
       theme="snow"
       content-type="html"
-      class="editor-box"
-  />
+      class="editor-box mt-2"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import {loading} from '@/utils'
-import {QuillEditor} from '@vueup/vue-quill'
+import { loading } from '@/utils'
+import { QuillEditor } from '@vueup/vue-quill'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
-import {getConfiguration, setConfiguration} from '@/api/configuration'
-import {message} from 'ant-design-vue'
-import type { TagItem } from '@/components/BasicTags/model'
-import BasicTextArea from "@/components/BasicTextArea.vue";
+import { setConfiguration } from '@/api/configuration'
+import { message } from 'ant-design-vue'
+import type { itemConfig } from '@/model/configuration'
 
 interface Prop {
-  item: TagItem
+  item: itemConfig
 }
 
 const props = defineProps<Prop>()
-
 const emits = defineEmits(['setVal'])
 
+const isActive = ref<boolean>(false)
+const isVisible = ref<boolean>(false)
+
+function isTruthyFlag(val?: string) {
+  return val === 'true' || val === '1'
+}
+
 async function ok() {
-  let obj = {
+  const obj = {
     id: props.item.id,
     key: props.item.key,
     value: content.value,
-    title_fa:props.item.name,
-    type:props.item.type,
-    description: props.item.description,
-    is_active: props.item.is_active
-
+    title_fa: props.item.title_fa ?? props.item.name,
+    type: props.item.type,
+    description: isVisible.value ? 'true' : 'false',
+    is_active: isActive.value
   }
   try {
     loading.value = true
     await setConfiguration(obj)
-    await getConfiguration()
     message.success('تغییر با موفقیت انجام شد')
   } catch (e) {
     console.error(e)
@@ -68,7 +89,13 @@ const content = computed({
     emits('setVal', val)
   }
 })
+
+onMounted(() => {
+  isActive.value = props.item.is_active === true
+  isVisible.value = isTruthyFlag(props.item.description) || props.item.description == null
+})
 </script>
+
 <style>
 .editor-box {
   max-height: 40vh;

src/pages/menuPages/configuration/components/SwitchConfigs.vue

@@ -1,44 +1,57 @@
 <template>
-  <div class="flex-wrap mb-2 flex justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
-    <div class="flex flex-col justify-between ">
-      <div class=" font-bold">{{ item.name }}</div>
-      <div class=" text-xs ">کلید: {{ item.key }}</div>
+  <div class="mb-2 justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
+    <div>
+      <div class="flex justify-between">
+        <div>{{ item.title_fa ?? item.name ?? '-' }}</div>
+        <div>
+          <a-switch
+            checked-children="فعال"
+            un-checked-children="غیرفعال"
+            v-model:checked="isActive"
+            @change="ok"
+          />
+        </div>
+      </div>
     </div>
-
-    <div class="flex">
-      <a-switch
-          checked-children="فعال"
-          un-checked-children="غیرفعال"
+    <div class="flex justify-between items-center mt-2">
+      <div class="text-xs items-center">کلید: {{ item.key }}</div>
+      <div class="flex">
+        <a-switch
+          checked-children="نمایش"
+          un-checked-children="عدم نمایش"
           v-model:checked="value"
           @change="ok"
-      />
+        />
+      </div>
     </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import {loading} from '@/utils'
-import {setConfiguration} from '@/api/configuration'
-import {message} from 'ant-design-vue'
-import {onMounted} from 'vue'
-import type {TagItem} from "@/components/BasicTags/model";
+import { loading } from '@/utils'
+import { setConfiguration } from '@/api/configuration'
+import { message } from 'ant-design-vue'
+import { onMounted } from 'vue'
+import type { TagItem } from '@/components/BasicTags/model'
 
 interface Prop {
   item: TagItem
 }
 
 const props = defineProps<Prop>()
-const value = ref<string>('false')
+const value = ref<boolean>(false)
+const isActive = ref<boolean>(false)
 
 async function ok() {
   let obj = {
     id: props.item.id,
     key: props.item.key,
-    value: `${value.value}`,
-    type:props.item.type,
-    title_fa:props.item.name,
+    value: value.value ? 'true' : 'false',
+    type: props.item.type,
+    title_fa: props.item.title_fa ?? props.item.name,
     description: props.item.description,
-    is_active: props.item.is_active,
+    is_active: isActive.value
   }
   try {
     loading.value = true
@@ -53,5 +66,6 @@ async function ok() {
 
 onMounted(() => {
   value.value = props.item.value === 'true'
+  isActive.value = props.item.is_active === true
 })
 </script>

src/pages/menuPages/configuration/components/TextConfigs.vue

@@ -1,12 +1,49 @@
 <template>
-  <div class="mb-2 justify-between border-1 border-gray-300 border-solid rounded-lg p-3">
-    <div class="flex mb-2 flex-col justify-between ">
-      <div class=" font-bold">{{ item.name }}</div>
-      <div class=" text-xs ">کلید: {{ item.key }}</div>
-    </div>    <div class="flex justify-between gap-1">
-      <BasicSelect class="w-full" v-if="item.list && item.list.length > 0" @change="ok" value-name="value" key-name="lable" v-model:value="value" :items="itemListLocal"/>
-      <BasicInput v-else class="flex-1" type="text" place-holder="مقدار" v-model:value="value" @input="isChanged=true" />
-      <div v-if="item.list && item.list.length==0 && isChanged" class="flex items-center " >
+  <div class="mb-2 justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
+    <div>
+      <div class="flex justify-between">
+        <div>{{ item.title_fa ?? item.name ?? '-' }}</div>
+        <div>
+          <a-switch
+            checked-children="فعال"
+            un-checked-children="غیرفعال"
+            v-model:checked="isActive"
+            @change="ok"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!item.list?.length" class="flex justify-between items-center mt-2">
+      <div class="text-xs">کلید: {{ item.key }}</div>
+      <div class="flex">
+        <a-switch
+          checked-children="نمایش"
+          un-checked-children="عدم نمایش"
+          v-model:checked="isVisible"
+          @change="ok"
+        />
+      </div>
+    </div>
+    <div v-else class="text-xs mt-2">کلید: {{ item.key }}</div>
+    <div class="flex justify-between gap-1 mt-2">
+      <BasicSelect
+        v-if="item.list && item.list.length > 0"
+        class="w-full"
+        value-name="value"
+        key-name="lable"
+        v-model:value="configValue"
+        :items="itemListLocal"
+        @change="ok"
+      />
+      <BasicInput
+        v-else
+        class="flex-1"
+        type="text"
+        place-holder="مقدار"
+        v-model:value="configValue"
+        @input="isChanged = true"
+      />
+      <div v-if="item.list && item.list.length === 0 && isChanged" class="flex items-center">
         <BaseIcon
           icon="vuesax-linear:tick-circle"
           class="mr-2 items-center cursor-pointer"
@@ -15,11 +52,11 @@
           @click="ok()"
         />
         <BaseIcon
-            icon="vuesax-linear:close-circle"
-            class="mr-2 items-center cursor-pointer"
-            color="red"
-            @click="canselFn"
-            size="24"
+          icon="vuesax-linear:close-circle"
+          class="mr-2 items-center cursor-pointer"
+          color="red"
+          @click="cancelFn"
+          size="24"
         />
       </div>
     </div>
@@ -27,19 +64,21 @@
 </template>
 
 <script setup lang="ts">
-import type { Order } from '@/model/order'
 import { loading } from '@/utils'
 import { setConfiguration } from '@/api/configuration'
 import { message } from 'ant-design-vue'
-import type {itemConfig} from "@/model/configuration";
+import type { itemConfig } from '@/model/configuration'
 
 interface Prop {
   item: itemConfig
 }
 
 const props = defineProps<Prop>()
-const value = ref<string>('')
-const isChanged=ref<boolean>(false)
+const configValue = ref<string>('')
+const isActive = ref<boolean>(false)
+const isVisible = ref<boolean>(false)
+const isChanged = ref<boolean>(false)
+
 const itemListLocal = computed(() => {
   if (!props.item.list) return []
   return props.item.list.map((x) => ({
@@ -47,27 +86,39 @@ const itemListLocal = computed(() => {
     value: x
   }))
 })
-const canselFn=()=>{
-  value.value = props.item.value
-  isChanged.value=false
 
+function isTruthyFlag(val?: string) {
+  return val === 'true' || val === '1'
 }
-async function ok() {
-  let obj = {
+
+function cancelFn() {
+  configValue.value = props.item.value
+  isChanged.value = false
+}
+
+function buildPayload() {
+  const hasSelectOptions = props.item.list && props.item.list.length > 0
+  return {
     id: props.item.id,
     key: props.item.key,
-    value: value.value,
-    title_fa:props.item.name,
-    type:props.item.type,
-    description: props.item.description,
-    is_active: props.item.is_active
+    value: configValue.value,
+    title_fa: props.item.title_fa ?? props.item.name,
+    type: props.item.type,
+    description: hasSelectOptions
+      ? props.item.description
+      : isVisible.value
+        ? 'true'
+        : 'false',
+    is_active: isActive.value
   }
+}
+
+async function ok() {
   try {
     loading.value = true
-    await setConfiguration(obj)
+    await setConfiguration(buildPayload())
     message.success('تغییر با موفقیت انجام شد')
-    isChanged.value=false
-
+    isChanged.value = false
   } catch (e) {
     console.error(e)
   } finally {
@@ -76,8 +127,8 @@ async function ok() {
 }
 
 onMounted(() => {
-  console.log(props.item)
-   return  value.value = props.item.value
+  configValue.value = props.item.value
+  isActive.value = props.item.is_active === true
+  isVisible.value = isTruthyFlag(props.item.description) || props.item.description == null
 })
-
 </script>