add customer-actions in mobile &...

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="content-center">فعال سازی محصولات:</div>
-      <div class="ml-2 content-center mt-1 md:mt-unset md:mr-4">زمان شروع</div>
-      <div>
-        <TimePicker
-          v-model:value="startTime"
-          :locale="customLocale"
-          placeholder="انتخاب زمان"
-          :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
-        />
-      </div>
-      <div class="md:mr-4 ml-2 mt-2 md:mt-unset content-center">زمان پایان</div>
-      <div>
-        <TimePicker
-          v-model:value="endTime"
-          :locale="customLocale"
-          placeholder="انتخاب زمان"
-          :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
-        />
-      </div>
-      <BaseButton class="mt-2 md:mt-unset md:mr-2" @click="setTimeActive(startTime, endTime)">ثبت</BaseButton>
+    <div class="shrink-0">
+      <Collapse
+        class="product-activation-collapse"
+        :activeKey="activationActiveKey"
+        @update:activeKey="activationActiveKey = $event as (string | number)[]"
+      >
+        <BaseCollapse title="فعال سازی محصولات" active-key="activation" :actives="activationActiveKey">
+          <template #content>
+            <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>
+                <TimePicker
+                  v-model:value="startTime"
+                  :locale="customLocale"
+                  placeholder="انتخاب زمان"
+                  :defaultValue="dayjs('00:00:00', 'HH:mm:ss')"
+                />
+              </div>
+              <div class="content-center md:mr-4">زمان پایان</div>
+              <div>
+                <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>