1405/02/09-change style in configuration page

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

@@ -0,0 +1,83 @@
+<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>
+    <BaseIcon
+        @click="ok()"
+        icon="vuesax-linear:tick-circle"
+        class="mr-2 items-center"
+        color="green"
+        size="24"
+    />
+  </div>
+  <BasicTextArea v-model:value="content"  />
+
+<!--  <QuillEditor-->
+<!--      placeholder="متن قانون"-->
+<!--      v-model:content="content"-->
+<!--      toolbar="full"-->
+<!--      theme="snow"-->
+<!--      content-type="html"-->
+<!--      class="editor-box"-->
+<!--  />-->
+</template>
+
+<script setup lang="ts">
+import {loading} from '@/utils'
+// 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";
+
+interface Prop {
+  item: TagItem
+}
+
+const props = defineProps<Prop>()
+
+const emits = defineEmits(['setVal'])
+
+async function ok() {
+  let obj = {
+    id: props.item.id,
+    key: props.item.key,
+    value: content.value,
+    description: props.item.description
+  }
+  try {
+    loading.value = true
+    await setConfiguration(obj)
+    await getConfiguration()
+    message.success('تغییر با موفقیت انجام شد')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const content = computed({
+  get: () => props.item.value,
+  set: (val) => {
+    emits('setVal', val)
+  }
+})
+</script>
+<style>
+.editor-box {
+  max-height: 40vh;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.editor-box .ql-editor {
+  min-height: 10vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,52 @@
+<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>
+
+    <div class="flex">
+      <a-switch
+        checked-children="فعال"
+        un-checked-children="غیرفعال"
+        v-model:checked="value"
+        @change="ok"
+      />
+    </div>
+  </div>
+</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 { onMounted } from 'vue'
+
+interface Prop {
+  item: Order
+}
+
+const props = defineProps<Prop>()
+const value = ref<string>('false')
+
+async function ok() {
+  let obj = {
+    id: props.item.id,
+    key: props.item.key,
+    value: value.value,
+    description: props.item.description
+  }
+  try {
+    loading.value = true
+    await setConfiguration(obj)
+    message.success('تغییر با موفقیت انجام شد')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => (value.value = props.item.value === 'true'))
+</script>

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

@@ -0,0 +1,80 @@
+<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 " >
+        <BaseIcon
+          icon="vuesax-linear:tick-circle"
+          class="mr-2 items-center cursor-pointer"
+          color="green"
+          size="24"
+          @click="ok()"
+        />
+        <BaseIcon
+            icon="vuesax-linear:close-circle"
+            class="mr-2 items-center cursor-pointer"
+            color="red"
+            @click="canselFn"
+            size="24"
+        />
+      </div>
+    </div>
+  </div>
+</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";
+
+interface Prop {
+  item: itemConfig
+}
+
+const props = defineProps<Prop>()
+const value = ref<string>('')
+const isChanged=ref<boolean>(false)
+const itemListLocal = computed(() => {
+  if (!props.item.list) return []
+  return props.item.list.map((x) => ({
+    lable: x,
+    value: x
+  }))
+})
+const canselFn=()=>{
+  value.value = props.item.value
+  isChanged.value=false
+
+}
+async function ok() {
+  let obj = {
+    id: props.item.id,
+    key: props.item.key,
+    value: value.value,
+    description: props.item.description
+  }
+  try {
+    loading.value = true
+    await setConfiguration(obj)
+    message.success('تغییر با موفقیت انجام شد')
+    isChanged.value=false
+
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  console.log(props.item)
+   return  value.value = props.item.value
+})
+
+</script>