handle mobile user

src/components/BasicActionSheet.vue

@@ -51,9 +51,9 @@
     :destroy-on-close="true"
     :height="drawerHeight"
     :z-index="ACTION_SHEET_Z_INDEX"
-    class="basic-action-sheet"
+    :class="['basic-action-sheet', { 'basic-action-sheet--compact': compact }]"
   >
-    <div class="basic-action-sheet__container">
+    <div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
       <div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
         <span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
       </div>
@@ -105,6 +105,7 @@ interface Props {
   modalWidth?: string
   loading?: boolean
   drawerHeight?: string
+  compact?: boolean
   cancelText?: string
   showButton?: boolean
   showCancel?: boolean
@@ -118,6 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
   modalWidth: '36rem',
   loading: false,
   drawerHeight: ACTION_SHEET_HEIGHT,
+  compact: false,
   cancelText: 'بازگشت',
   showButton: false,
   showCancel: true,
@@ -177,6 +179,29 @@ function handleCancel() {
   padding: 0 16px 12px;
 }
 
+.basic-action-sheet--compact {
+  .ant-drawer-content-wrapper {
+    height: auto !important;
+    max-height: 88vh;
+  }
+
+  .ant-drawer-content {
+    height: auto !important;
+    max-height: 88vh;
+  }
+}
+
+.basic-action-sheet__container--compact {
+  height: auto;
+  min-height: 0;
+  max-height: 88vh;
+}
+
+.basic-action-sheet__container--compact .basic-action-sheet__content {
+  flex: 0 1 auto;
+  max-height: calc(88vh - 40px);
+}
+
 .basic-action-sheet__footer {
   position: sticky;
   bottom: 0;

src/components/mobile/MobileDetailSheet.vue

@@ -1,8 +1,9 @@
 <template>
   <BasicActionSheet
     v-model:visible="visibleModel"
-    :title="title"
+    :title="''"
     :showButton="false"
+    :compact="true"
     :drawerHeight="drawerHeight"
   >
     <div v-if="item" class="space-y-3 pb-2">

src/components/mobile/MobileSheetHeader.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="space-y-3">
-    <div class="min-w-0 space-y-1">
+    <div class="flex items-start justify-between gap-2">
-      <div v-if="showTitle" class="text-lg font-700 text-gray-900">
+      <div class="min-w-0 flex-1 space-y-1">
-        <slot name="title">{{ title }}</slot>
+        <div v-if="showTitle" class="text-lg font-700 text-gray-900">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </div>
       </div>
-      <div v-if="$slots.actions" class="flex flex-wrap items-center justify-end gap-2 pt-1">
+      <div
+        v-if="$slots.actions"
+        class="flex shrink-0 flex-wrap items-center justify-end gap-1"
+      >
         <slot name="actions" />
       </div>
-      <div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
-        <slot name="subtitle">{{ subtitle }}</slot>
-      </div>
     </div>
   </div>
 </template>

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

@@ -21,13 +21,14 @@
   <CustomerMobileDetailSheet
     v-model:visible="sheetVisible"
     :item="selectedItem"
-    @info="$emit('info', $event)"
+    @info="forwardAndClose('info', $event)"
-    @archive="$emit('archive', $event)"
+    @edit="forwardAndClose('edit', $event)"
-    @toggleActive="$emit('toggleActive', $event)"
+    @archive="forwardAndClose('archive', $event)"
-    @chargeMoney="$emit('chargeMoney', $event)"
+    @toggleActive="forward('toggleActive', $event)"
-    @chargeGold="$emit('chargeGold', $event)"
+    @chargeMoney="forwardAndClose('chargeMoney', $event)"
-    @toggleTrade="$emit('toggleTrade', $event)"
+    @chargeGold="forwardAndClose('chargeGold', $event)"
-    @confirmUser="$emit('confirmUser', $event)"
+    @toggleTrade="forward('toggleTrade', $event)"
+    @confirmUser="forwardAndClose('confirmUser', $event)"
   />
 </template>
 
@@ -40,7 +41,7 @@ import { useMobileTableList } from '@/components/mobile/composables/useMobileTab
 import CustomerMobileListItem from './CustomerMobileListItem.vue'
 import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'info', item: Customer): void
   (e: 'edit', item: Customer): void
   (e: 'archive', item: Customer): void
@@ -53,6 +54,25 @@ defineEmits<{
 
 const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
 
+type SheetAction =
+  | 'info'
+  | 'edit'
+  | 'archive'
+  | 'toggleActive'
+  | 'chargeMoney'
+  | 'chargeGold'
+  | 'toggleTrade'
+  | 'confirmUser'
+
+function forward(action: SheetAction, item: Customer) {
+  emit(action, item)
+}
+
+function forwardAndClose(action: SheetAction, item: Customer) {
+  sheetVisible.value = false
+  emit(action, item)
+}
+
 const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
   fetchApi: getCustomerTable,
   onFetched: (rows) => syncSelectedItem(rows)

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

@@ -1,36 +1,54 @@
 <template>
-  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
+  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
     <template #default="{ item: row }">
-      <MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
+      <h2 class="text-base font-700 leading-relaxed text-gray-900">{{ row.name || '-' }}</h2>
-        <template #actions>
+      <p v-if="row.mobile" class="text-sm text-gray-500" dir="ltr">{{ row.mobile }}</p>
-          <MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="closeAndEmit('archive', row)" />
+
-          <MobileIconButton
+      <div class="grid grid-cols-2 gap-2">
-            plain
+        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-add" @click="closeAndEmit('chargeMoney', row)">
-            :icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
+          شارژ ریالی
-            :color="row.active ? '#54AD06' : '#ad0627'"
+        </BaseButton>
-            :size="22"
+        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-money" @click="closeAndEmit('chargeGold', row)">
-            @click="confirmToggleActive(row)"
+          شارژ طلایی
-          />
+        </BaseButton>
-          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="closeAndEmit('chargeMoney', row)" />
+        <BaseButton
-          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="closeAndEmit('chargeGold', row)" />
+          v-if="!row.is_legal"
-          <MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="closeAndEmit('info', row)" />
+          class="w-full"
-          <MobileIconButton
+          size="middle"
-            plain
+          type="default"
-            :icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
+          icon="vuesax-linear:user-search"
-            :color="row.trade_active ? '#54AD06' : '#ad0627'"
+          @click="closeAndEmit('confirmUser', row)"
-            :size="22"
+        >
-            @click="confirmToggleTrade(row)"
+          تایید کاربر
-          />
+        </BaseButton>
-          <MobileIconButton
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:stickynote" @click="closeAndEmit('info', row)">
-            v-if="!(row as any).is_legal"
+          مشخصات کامل
-            plain
+        </BaseButton>
-            icon="vuesax-linear:user-search"
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:edit" @click="closeAndEmit('edit', row)">
-            color="#0d9488"
+          ویرایش
-            :size="22"
+        </BaseButton>
-            @click="closeAndEmit('confirmUser', row)"
+        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:archive-tick" @click="closeAndEmit('archive', row)">
-          />
+          بایگانی
-        </template>
+        </BaseButton>
-      </MobileSheetHeader>
+        <BaseButton
+          class="w-full"
+          size="middle"
+          :type="row.active ? 'default' : 'primary'"
+          :icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
+          @click="confirmToggleActive(row)"
+        >
+          {{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
+        </BaseButton>
+        <BaseButton
+          class="w-full"
+          size="middle"
+          :type="row.trade_active === 1 ? 'default' : 'primary'"
+          :icon="row.trade_active === 1 ? 'vuesax-linear:box-remove' : 'vuesax-linear:box-tick'"
+          @click="confirmToggleTrade(row)"
+        >
+          {{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
+        </BaseButton>
+      </div>
 
       <div class="space-y-2">
         <MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
@@ -57,9 +75,9 @@
         <MobileDetailRow
           label="وضعیت سفارش دهی"
           full-width
-          :value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
+          :value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
         >
-          {{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
+          {{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
         </MobileDetailRow>
         <MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
         <MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
@@ -79,11 +97,8 @@ 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'
-import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
 import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
-import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
 import { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
-import { isMobile } from '@core/utils/is'
 import { toJalali } from '@core/utils/useDataTime'
 import { usePrice } from '@core/utils/usePrice'
 
@@ -95,6 +110,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void
   (e: 'info', item: Customer): void
+  (e: 'edit', item: Customer): void
   (e: 'archive', item: Customer): void
   (e: 'toggleActive', item: Customer): void
   (e: 'chargeMoney', item: Customer): void
@@ -108,24 +124,7 @@ const visibleProxy = computed({
   set: (value: boolean) => emit('update:visible', value)
 })
 
-function cashBalance(row: Customer) {
+type SheetEmit = 'archive' | 'chargeMoney' | 'chargeGold' | 'info' | 'confirmUser' | 'edit'
-  return getCashBalance(row.wallet)
-}
-
-function goldBalance(row: Customer) {
-  return getGoldBalance(row.wallet)
-}
-
-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
@@ -145,9 +144,7 @@ function confirmToggleActive(row: Customer) {
 
 function confirmToggleTrade(row: Customer) {
   Modal.confirm({
-    title: row.trade_active
+    title: row.trade_active === 1 ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟' : 'آیا سفارش دهی را مجاز می‌کنید؟',
-      ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟'
-      : 'آیا سفارش دهی را مجاز می‌کنید؟',
     okText: 'تایید',
     cancelText: 'رد',
     centered: true,
@@ -155,4 +152,16 @@ function confirmToggleTrade(row: Customer) {
     onOk: () => emit('toggleTrade', row)
   })
 }
+
+function cashBalance(row: Customer) {
+  return getCashBalance(row.wallet)
+}
+
+function goldBalance(row: Customer) {
+  return getGoldBalance(row.wallet)
+}
+
+function lastSeen(row: Customer) {
+  return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
+}
 </script>

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

@@ -1,25 +1,54 @@
 <template>
   <MobileCard clickable @click="$emit('open', item)">
-    <div class="flex items-center gap-3">
+    <div class="flex items-start gap-3">
-      <div class="flex min-w-0 flex-1 items-center gap-2">
+      <div
+        class="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
+      >
         <BaseIcon icon="vuesax-linear:user" size="20" color="#6b7280" />
-        <button
-          type="button"
-          class="truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900 cursor-pointer"
-          @click.stop="$emit('info', item)"
-        >
-          {{ item.name || '-' }}
-        </button>
       </div>
 
-      <div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
+      <div class="min-w-0 flex-1 space-y-1.5">
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="min-w-0 flex-1 truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900"
+            @click.stop="$emit('info', item)"
+          >
+            {{ item.name || '-' }}
+          </button>
+          <span
+            class="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+            :class="item.active ? 'bg-green-500' : 'bg-red-500'"
+          />
+        </div>
 
-      <div class="flex shrink-0 items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2 text-xs text-gray-600">
-        <span class="whitespace-nowrap rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass">
+          <span dir="ltr" class="font-mono">{{ item.mobile || '-' }}</span>
-          {{ item.type_str || 'کاربر' }}
+          <span class="whitespace-nowrap rounded-lg border px-2 py-0.5 font-600" :class="typeTagClass">
-        </span>
+            {{ item.type_str || 'کاربر' }}
-        <MobileIconButton icon="vuesax-linear:edit" color="#4572E9" :size="20" @click="$emit('edit', item)" />
+          </span>
-        <span class="inline-block h-2.5 w-2.5 rounded-full" :class="item.active ? 'bg-green-500' : 'bg-red-500'" />
+        </div>
+      </div>
+
+      <div class="flex shrink-0 flex-col items-stretch gap-1">
+        <BaseButton
+          type="primary"
+          size="small"
+          class="min-w-[4.5rem]"
+          icon="vuesax-linear:setting-4"
+          @click.stop="$emit('open', item)"
+        >
+          عملیات
+        </BaseButton>
+        <BaseButton
+          type="default"
+          size="small"
+          class="min-w-[4.5rem]"
+          icon="vuesax-linear:edit"
+          @click.stop="$emit('edit', item)"
+        >
+          ویرایش
+        </BaseButton>
       </div>
     </div>
   </MobileCard>
@@ -28,7 +57,6 @@
 <script setup lang="ts">
 import type { Customer } from '@/model/customer'
 import MobileCard from '@/components/mobile/MobileCard.vue'
-import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
 
 const props = defineProps<{
   item: Customer

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

@@ -105,7 +105,7 @@
 
       <BasicModal
         v-model:visible="confirmVisible"
-        width="50vw"
+        :width="isMobile ? '92vw' : '50vw'"
         title="تایید مشتری"
         @ok="confirmUserFunction"
         ok-text="تایید"
@@ -147,6 +147,7 @@ import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
 import type { TableInput } from '@core/type/baseTable'
 import { toJalaliNoTime } from '@core/utils/useDataTime'
 import type { Customer } from '@/model/customer'
+import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
 import { isMobile } from '@core/utils/is'
 
 const [submit, reload] = useBaseTable()
@@ -192,6 +193,7 @@ function handleArchive(customer: Customer) {
     okText: 'تایید',
     cancelText: 'رد',
     centered: true,
+    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
     onOk: () => archiveFunction(customer.id)
   })
 }

src/pages/menuPages/customers/base/index.vue

@@ -215,7 +215,37 @@
         </a-tab-pane>
       </a-tabs>
     </BasicActionSheet>
+    <BasicActionSheet
+      v-if="isMobile"
+      v-model:visible="showMoneyWalletCharge"
+      title="شارژ کیف پول ریالی"
+      modal-width="24rem"
+      :loading="loading"
+      :show-button="true"
+      :show-cancel="true"
+      :show-ok="true"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="chargeMoneyWallet"
+      @close="showMoneyWalletCharge = false"
+    >
+      <a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
+        <a-form-item name="talabBedehi">
+          <a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
+        </a-form-item>
+        <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
+          <BasicInput addon-before="ریال" v-model:value="formCharge.value" type="price" />
+          <div v-show="formCharge.value > 10">
+            معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
+          </div>
+        </a-form-item>
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
+          <BasicInput v-model:value="formCharge.note" />
+        </a-form-item>
+      </a-form>
+    </BasicActionSheet>
     <BasicModal
+      v-else
       v-model:visible="showMoneyWalletCharge"
       width="20rem"
       title="شارژ کیف پول ریالی"
@@ -233,13 +263,40 @@
             معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
           </div>
         </a-form-item>
-        <a-form-item label="علت شارژ " name="value" :rules="inputRules()">
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
           <BasicInput v-model:value="formCharge.note" />
         </a-form-item>
       </a-form>
     </BasicModal>
 
+    <BasicActionSheet
+      v-if="isMobile"
+      v-model:visible="showGoldWalletCharge"
+      title="شارژ کیف پول طلایی"
+      modal-width="24rem"
+      :loading="loading"
+      :show-button="true"
+      :show-cancel="true"
+      :show-ok="true"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="chargeGoldWallet"
+      @close="showGoldWalletCharge = false"
+    >
+      <a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
+        <a-form-item name="talabBedehi">
+          <a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
+        </a-form-item>
+        <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
+          <BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
+        </a-form-item>
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
+          <BasicInput v-model:value="formCharge.note" />
+        </a-form-item>
+      </a-form>
+    </BasicActionSheet>
     <BasicModal
+      v-else
       v-model:visible="showGoldWalletCharge"
       width="20rem"
       title="شارژ کیف پول طلایی"
@@ -254,7 +311,7 @@
         <a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
           <BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
         </a-form-item>
-        <a-form-item label="علت شارژ " name="value" :rules="inputRules()">
+        <a-form-item label="علت شارژ " name="note" :rules="inputRules()">
           <BasicInput v-model:value="formCharge.note" />
         </a-form-item>
       </a-form>