add customer-actions in mobile &...

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     _index: typeof import('./src/core/components/_sample/_index.vue')['default']
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    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']
@@ -30,6 +31,7 @@ declare module '@vue/runtime-core' {
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
@@ -37,7 +39,9 @@ declare module '@vue/runtime-core' {
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']

src/components/BasicActionSheet.vue

@@ -50,6 +50,7 @@
     :closable="false"
     :destroy-on-close="true"
     :height="drawerHeight"
+    :z-index="ACTION_SHEET_Z_INDEX"
     class="basic-action-sheet"
   >
     <div class="basic-action-sheet__container">
@@ -95,6 +96,7 @@ import { computed } from 'vue'
 
 import BasicModal from '@/components/BasicModal.vue'
 import { ACTION_SHEET_HEIGHT } from '@/constants/actionSheet'
+import { ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
 import { isMobile } from '@core/utils/is'
 
 interface Props {

src/components/BasicModal.vue

@@ -3,6 +3,7 @@
     <a-modal
       v-model:visible="localValue"
       :title="props.title"
+      :z-index="props.zIndex"
       centered
       @ok="emits('ok')"
       @cancel="emits('close')"
@@ -26,6 +27,8 @@
 </template>
 
 <script setup lang="ts">
+import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
+
 //define emit
 const emits = defineEmits(['ok', 'close', 'update:visible'])
 
@@ -40,6 +43,7 @@ interface Prop {
   confirmLoading?: boolean
   loading?: boolean
   wrapClassName?: string
+  zIndex?: number
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -49,7 +53,8 @@ const props = withDefaults(defineProps<Prop>(), {
   customFooter: false,
   confirmLoading: false,
   loading: false,
-  wrapClassName: ''
+  wrapClassName: '',
+  zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX
 })
 
 const localValue = computed({

src/components/mobile/MobileSheetHeader.vue

@@ -4,6 +4,9 @@
       <div v-if="showTitle" class="text-lg font-700 text-gray-900">
         <slot name="title">{{ title }}</slot>
       </div>
+      <div v-if="$slots.actions" class="flex flex-wrap items-center justify-end gap-2 pt-1">
+        <slot name="actions" />
+      </div>
       <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
         <slot name="subtitle">{{ subtitle }}</slot>
       </div>

src/constants/overlayZIndex.ts

@@ -0,0 +1,5 @@
+/** z-index برای bottom action sheet (Ant Drawer پیش‌فرض: 1000) */
+export const ACTION_SHEET_Z_INDEX = 1000
+
+/** z-index برای مودال‌ها و دیالوگ‌هایی که باید روی action sheet باشند */
+export const MODAL_ABOVE_ACTION_SHEET_Z_INDEX = 1100

src/core/assets/css/ant-override.less

@@ -74,6 +74,11 @@
   @apply px-1 py-3;
 }
 
+// مودال‌ها و Modal.confirm بالای bottom action sheet (drawer: 1000)
+.ant-modal-wrap {
+  z-index: 1100 !important;
+}
+
 
 
 

src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue

@@ -3,22 +3,23 @@
     <template #default="{ item: row }">
       <MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
         <template #actions>
-          <MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="$emit('archive', row)" />
+          <MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="closeAndEmit('archive', row)" />
           <MobileIconButton
             plain
             :icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
             :color="row.active ? '#54AD06' : '#ad0627'"
             :size="22"
-            @click="$emit('toggleActive', row)"
+            @click="confirmToggleActive(row)"
           />
-          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="$emit('chargeMoney', row)" />
+          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="closeAndEmit('chargeMoney', row)" />
-          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="$emit('chargeGold', row)" />
+          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="closeAndEmit('chargeGold', row)" />
+          <MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="closeAndEmit('info', row)" />
           <MobileIconButton
             plain
             :icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
             :color="row.trade_active ? '#54AD06' : '#ad0627'"
             :size="22"
-            @click="$emit('toggleTrade', row)"
+            @click="confirmToggleTrade(row)"
           />
           <MobileIconButton
             v-if="!(row as any).is_legal"
@@ -26,7 +27,7 @@
             icon="vuesax-linear:user-search"
             color="#0d9488"
             :size="22"
-            @click="$emit('confirmUser', row)"
+            @click="closeAndEmit('confirmUser', row)"
           />
         </template>
       </MobileSheetHeader>
@@ -72,7 +73,9 @@
 </template>
 
 <script setup lang="ts">
+import { Modal } from 'ant-design-vue'
 import type { Customer } from '@/model/customer'
+import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
 import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
 import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
 import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
@@ -116,4 +119,40 @@ function goldBalance(row: Customer) {
 function lastSeen(row: Customer) {
   return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
 }
+
+type SheetEmit =
+  | 'archive'
+  | 'chargeMoney'
+  | 'chargeGold'
+  | 'info'
+  | 'confirmUser'
+
+function closeAndEmit(event: SheetEmit, row: Customer) {
+  visibleProxy.value = false
+  emit(event, row)
+}
+
+function confirmToggleActive(row: Customer) {
+  Modal.confirm({
+    title: row.active ? 'آیا حساب کاربری را غیرفعال می‌کنید؟' : 'آیا حساب کاربری را فعال می‌کنید؟',
+    okText: 'تایید',
+    cancelText: 'رد',
+    centered: true,
+    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
+    onOk: () => emit('toggleActive', row)
+  })
+}
+
+function confirmToggleTrade(row: Customer) {
+  Modal.confirm({
+    title: row.trade_active
+      ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟'
+      : 'آیا سفارش دهی را مجاز می‌کنید؟',
+    okText: 'تایید',
+    cancelText: 'رد',
+    centered: true,
+    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
+    onOk: () => emit('toggleTrade', row)
+  })
+}
 </script>

src/pages/menuPages/products/base/components/table.vue

@@ -1,26 +1,37 @@
 <template>
   <div class="flex h-full min-h-0 min-w-0 max-w-full flex-col overflow-hidden">
-    <div class="shrink-0 pr-3 md:flex">
+    <div class="shrink-0">
-      <div class="content-center">فعال سازی محصولات:</div>
+      <Collapse
-      <div class="ml-2 content-center mt-1 md:mt-unset md:mr-4">زمان شروع</div>
+        class="product-activation-collapse"
-      <div>
+        :activeKey="activationActiveKey"
-        <TimePicker
+        @update:activeKey="activationActiveKey = $event as (string | number)[]"
-          v-model:value="startTime"
+      >
-          :locale="customLocale"
+        <BaseCollapse title="فعال سازی محصولات" active-key="activation" :actives="activationActiveKey">
-          placeholder="انتخاب زمان"
+          <template #content>
-          :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
+            <div class="flex flex-col gap-2 md:flex-row md:flex-wrap md:items-center">
-        />
+              <div class="content-center md:mr-4">زمان شروع</div>
-      </div>
+              <div>
-      <div class="md:mr-4 ml-2 mt-2 md:mt-unset content-center">زمان پایان</div>
+                <TimePicker
-      <div>
+                  v-model:value="startTime"
-        <TimePicker
+                  :locale="customLocale"
-          v-model:value="endTime"
+                  placeholder="انتخاب زمان"
-          :locale="customLocale"
+                  :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
-          placeholder="انتخاب زمان"
+                />
-          :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
+              </div>
-        />
+              <div class="content-center md:mr-4">زمان پایان</div>
-      </div>
+              <div>
-      <BaseButton class="mt-2 md:mt-unset md:mr-2" @click="setTimeActive(startTime, endTime)">ثبت</BaseButton>
+                <TimePicker
+                  v-model:value="endTime"
+                  :locale="customLocale"
+                  placeholder="انتخاب زمان"
+                  :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
+                />
+              </div>
+              <BaseButton class="md:mr-2" @click="setTimeActive(startTime, endTime)">ثبت</BaseButton>
+            </div>
+          </template>
+        </BaseCollapse>
+      </Collapse>
     </div>
 
     <BasicShowContext title="لیست محصولات" class="min-h-0 flex-1">
@@ -97,7 +108,8 @@
 </template>
 
 <script setup lang="ts">
-import { message, Modal, TimePicker } from 'ant-design-vue'
+import { Collapse, message, Modal, TimePicker } from 'ant-design-vue'
+import BaseCollapse from '@/components/BaseCollapse.vue'
 import locale from 'ant-design-vue/es/date-picker/locale/fa_IR'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
@@ -122,6 +134,7 @@ const [submit, reload] = useBaseTable()
 const emits = defineEmits(['edit', 'add'])
 
 const mobileListRef = ref<null | { fetch: () => Promise<void> }>(null)
+const activationActiveKey = ref<(string | number)[]>(isMobile.value ? [] : ['activation'])
 const startTime = ref(dayjs('00:00:00', 'HH:mm:ss'))
 const endTime = ref(dayjs('00:00:00', 'HH:mm:ss'))
 
@@ -195,4 +208,18 @@ async function setTimeActive(start: dayjs.Dayjs | string, end: dayjs.Dayjs | str
 .ant-tooltip {
   z-index: 1001 !important;
 }
+
+.product-activation-collapse.ant-collapse {
+  :deep(> .ant-collapse-item > .ant-collapse-header) {
+    padding: 0 !important;
+  }
+
+  :deep(.ant-collapse-content-box) {
+    padding: 0 !important;
+  }
+
+  :deep(.ant-collapse-header .mb-3) {
+    margin-bottom: 0 !important;
+  }
+}
 </style>