@mythpe/quasar-ui-qui 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -390,9 +390,9 @@ const hasFilterDialog = computed<boolean>(() => !!slots.filter)
 
 const isUpdateMode = ref<boolean>(!1)
 const formMode = computed<'update' | 'store'>(() => isUpdateMode.value ? 'update' : 'store')
-const isSingleSelectedItem = computed<boolean>(() => tableOptions.selected.length === 1)
-const firstSelectedItem = computed(() => tableOptions.selected[0] as MDtItem)
-const hasSelectedItem = computed<boolean>(() => tableOptions.selected.length > 0)
+const isSingleSelectedItem = computed<boolean>(() => selected.value.length === 1)
+const firstSelectedItem = computed(() => selected.value[0] as MDtItem)
+const hasSelectedItem = computed<boolean>(() => selected.value.length > 0)
 
 /* Titles */
 const getShowTitle = computed(() => {
@@ -403,8 +403,9 @@ const getShowTitle = computed(() => {
   return __('show_details')
 })
 const getFormTitle = computed(() => {
-  const name = serviceName.value && typeof serviceName.value !== 'function' ? __(`choice.${pascalCase(pluralize(serviceName.value.split(
-    '/').pop()))}`, 1) : ''
+  const name = serviceName.value && typeof serviceName.value !== 'function' ? __(`choice.${pascalCase(pluralize(
+    serviceName.value.split(
+      '/').pop()))}`, 1) : ''
   return __(`replace.${formMode.value}`, { name })
 })
 const isGrid = computed(() => {
@@ -426,8 +427,8 @@ const getMythApiServicesSchema = (): MDtMythApiServicesSchema => {
   }
   return c
 }
-const updateSelectedItems = (selected: MDtItem[]) => {
-  tableOptions.selected = selected
+const updateSelectedItems = (items: MDtItem[]) => {
+  selected.value = items as any
 }
 const onScroll = ({ index, to }: any) => {
   if (index && to && index === to) {
@@ -438,10 +439,10 @@ const loadMore = () => {
   nextTick(() => {
     fetchDatatableItems({
       pagination: {
-        ...tableOptions.pagination,
-        page: (tableOptions.pagination.page ?? 0) + 1
+        ...pagination.value,
+        page: (pagination.value.page ?? 0) + 1
       },
-      filter: tableOptions.search
+      filter: search.value
     })
   })
 }
@@ -456,7 +457,7 @@ const refreshNoUpdate = (done?: () => void) => {
   nextTick(() => {
     fetchDatatableItems({
       pagination: pagination.value,
-      filter: tableOptions.search
+      filter: search.value
     })
     if (done) {
       done()
@@ -505,8 +506,8 @@ const getDatatableParams = ({
   if (filter) {
     params.search = filter
   }
-  if (Object.keys(tableOptions.filter).length > 0) {
-    const TempFilter = { ...tableOptions.filter } as any
+  if (Object.keys(filterForm.value).length > 0) {
+    const TempFilter = { ...filterForm.value } as any
     for (const fKey in TempFilter) {
       if (lodash.isArray(TempFilter[fKey])) {
         TempFilter[fKey] = TempFilter[fKey].map((elm: any) => {
@@ -525,8 +526,8 @@ const getDatatableParams = ({
         }
       }
     }
-    // console.log(JSON.stringify(tableOptions.filter))
-    // params.filter = tableOptions.filter
+    // console.log(JSON.stringify(filterForm.value))
+    // params.filter = filterForm.value
     // console.log(TempFilter)
     params.filter = TempFilter
   }
@@ -546,12 +547,12 @@ const getDatatableParams = ({
   return { ...params, ...merge }
 }
 const fetchDatatableItems = (opts: FetchRowsArgs = {}) => {
-  if (props.endReach && tableOptions.meta.last_page && tableOptions.pagination.page >= tableOptions.meta.last_page) {
+  if (props.endReach && meta.value.last_page && pagination.value.page >= meta.value.last_page) {
     return
   }
-  if (tableOptions.loading || !serviceName.value) return
-  tableOptions.loading = !0
-  tableOptions.selected = []
+  if (loading.value || !serviceName.value) return
+  loading.value = !0
+  selected.value = []
   nextTick(() => {
     const params = getDatatableParams(opts)
     const requestWith = getRequestWith('withIndex')
@@ -589,7 +590,7 @@ const fetchDatatableItems = (opts: FetchRowsArgs = {}) => {
         }
       })
       .finally(() => {
-        tableOptions.loading = !1
+        loading.value = !1
       })
   })
 }
@@ -602,16 +603,16 @@ const exportData = (type: MDtExportOptions) => {
     const toBLob = exportToBlob.value === !0 || exportToBlob.value === type
     const headerItems = getHeaders.value.filter(e => e?.field !== props.controlKey && visibleHeaders.value.indexOf(e.name) !== -1)
     const data = getDatatableParams({
-      pagination: tableOptions.pagination,
-      filter: tableOptions.search
+      pagination: pagination.value,
+      filter: search.value
     }, {
       indexType: type,
       fdt: 'e',
       toUrl: toBLob === !0 ? !1 : exportToBlob.value !== type,
       headerItems
     })
-    if (tableOptions.selected.length > 0) {
-      data.ids = tableOptions.selected.map((e: any) => e.id)
+    if (selected.value.length > 0) {
+      data.ids = selected.value.map((e: any) => e.id)
     }
     // console.log(3)
     const config: AxiosRequestConfig = {}
@@ -644,7 +645,7 @@ const exportData = (type: MDtExportOptions) => {
         loading.value = !1
       })
   }
-  if (!tableOptions.selected.length) {
+  if (!selected.value.length) {
     confirmMessage(__('messages.export_all')).onOk(() => ex())
   } else {
     ex()
@@ -659,17 +660,17 @@ const openDialogTimeout = 100
 const openFilterDialog = () => {
   resetDialogForm({ values: {}, errors: {} }, { force: !0 })
   nextTick(() => {
-    tempFilterForm.value = { ...tableOptions.filter }
+    tempFilterForm.value = { ...filterForm.value }
     dialogs.filter = !0
   })
 }
 const saveFilterDialog = () => {
   dialogs.filter = !1
-  nextTick(() => (filterForm.value = { ...tableOptions.tempFilter }))
+  nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
 }
 const closeFilterDialog = () => {
   dialogs.filter = !1
-  tempFilterForm.value = { ...tableOptions.filter }
+  tempFilterForm.value = { ...filterForm.value }
 }
 const onRemoveFilter = (key: string | number) => {
   const filter = filterForm.value
@@ -683,7 +684,7 @@ const onRemoveFilter = (key: string | number) => {
 }
 const updateFilterOptions = (data: Record<string, any>) => {
   filterForm.value = {
-    ...tableOptions.filter,
+    ...filterForm.value,
     ...data
   }
 }
@@ -844,6 +845,7 @@ const updateDatatableItem = (i: MDtItem, index?: MDtItemIndex) => {
         getRows.value[findIndex] = item
       }
     }
+    selected.value.length === 1 && updateSelectedItems([item])
   }
 }
 const removeDtItem = (i: MDtItem | number) => {
@@ -897,13 +899,17 @@ const onSuccess: SubmissionHandler = async (form) => {
       requestWith: getRequestWith(isUpdateMode.value ? 'withUpdate' : 'withStore') || undefined
     }
   }
-  const method = async () => isUpdateMode.value ? await apiServices.update(dialogs.item?.id || '', form, _conf) : await apiServices.store(form, _conf)
+  const method = async () => isUpdateMode.value ? await apiServices.update(dialogs.item?.id || '',
+    form,
+    _conf) : await apiServices.store(form, _conf)
   try {
     const { _data, _message, _success }: any = await method()
     _message && alertSuccess(_message)
     if (_success) {
       if (isUpdateMode.value) {
-        _data && updateDatatableItem(_data, dialogs.index)
+        if (_data) {
+          updateDatatableItem(_data, dialogs.index)
+        }
       } else {
         setTimeout(() => refresh(), openDialogTimeout)
       }
@@ -937,7 +943,7 @@ const onDeleteItem = (i: MDtItem, index: number) => {
   if (loading.value || !item.value?.id) {
     return
   }
-  tableOptions.hasAction = !0
+  hasAction.value = !0
   confirmMessage(__('messages.confirm_delete')).onOk(async () => {
     loading.value = !0
     try {
@@ -946,8 +952,8 @@ const onDeleteItem = (i: MDtItem, index: number) => {
         _message && alertSuccess(_message)
       }
       if (_success) {
-        if (tableOptions.pagination.rowsNumber !== undefined) {
-          --tableOptions.pagination.rowsNumber
+        if (pagination.value.rowsNumber !== undefined) {
+          --pagination.value.rowsNumber
           selected.value = []
         }
         removeDtItem(index)
@@ -958,30 +964,30 @@ const onDeleteItem = (i: MDtItem, index: number) => {
       loading.value = !1
     }
   }).onDismiss(() => {
-    tableOptions.hasAction = !1
+    hasAction.value = !1
   })
 }
 const deleteSelectionItem = () => {
-  if (!tableOptions.selected.length) return
-  if (loading.value || !tableOptions.selected.length) {
+  if (!selected.value.length) return
+  if (loading.value || !selected.value.length) {
     return
   }
-  if (tableOptions.selected.length === 1) {
-    const dtItem = tableOptions.selected[0] as MDtItem
+  if (selected.value.length === 1) {
+    const dtItem = selected.value[0] as MDtItem
     const index = getRows.value.findIndex((e: any) => parseInt(e.id) === parseInt(dtItem?.id?.toString() || ''))
     return onDeleteItem(dtItem, index)
   }
   if (!props.multiDestroy) {
     return
   }
-  tableOptions.hasAction = !0
+  hasAction.value = !0
   confirmMessage(__('messages.confirm_delete')).onOk(async () => {
     loading.value = !0
     try {
       const {
         _message,
         _success
-      } = await getMythApiServicesSchema().destroyAll(tableOptions.selected.map((e: MDtItem) => e.id))
+      } = await getMythApiServicesSchema().destroyAll(selected.value.map((e: MDtItem) => e.id))
       if (!hideAutoMessage.value && _success && _message) {
         _message && alertSuccess(_message)
       }
@@ -996,7 +1002,7 @@ const deleteSelectionItem = () => {
       selected.value = []
     }
   }).onDismiss(() => {
-    tableOptions.hasAction = !1
+    hasAction.value = !1
   })
 }
 const logoutDatatable = () => {
@@ -1128,7 +1134,7 @@ watch(loading, v => {
       $q.loading.hide()
     }
   }
-  tableOptions.hasAction = v
+  hasAction.value = v
 })
 watch([filterForm, () => $q.lang.nativeName], () => refreshNoUpdate(), { deep: !0 })
 watch(formDialogModel, (v) => {
@@ -1218,6 +1224,17 @@ const getSlots = computed(() => {
   const keys = Object.keys(componentSlots || {})
   return keys.filter(e => !skipSlots.includes(e))
 })
+
+const onClickTopMenu = (item: any) => {
+  if (item.multiClick && selected.value.length > 1) {
+    item.multiClick(selected.value)
+    return
+  }
+
+  if (item.click) {
+    item.click(selected.value[0], 0)
+  }
+}
 defineOptions({
   name: 'MDatatable',
   inheritAttrs: !1
@@ -1273,15 +1290,15 @@ defineOptions({
     >
       <q-table
         ref="table"
-        v-model:fullscreen="tableOptions.fullscreen"
+        v-model:fullscreen="fullscreen"
         v-model:pagination="pagination"
         v-model:selected="selected"
         :class="`m--datatable ` + ($q.screen.lt.md ? 'm--datatable-grid' : '')"
         :columns="getHeaders"
-        :filter="tableOptions.search"
+        :filter="search"
         :grid="isGrid"
         :hide-pagination="endReach"
-        :loading="tableOptions.loading"
+        :loading="loading"
         :rows="getRows"
         :rows-per-page-options="getRowsPerPageOptions"
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
@@ -1492,7 +1509,7 @@ defineOptions({
                 />
                 <MInput
                   v-if="!hideSearch && !dialogs.form"
-                  v-model="tableOptions.search"
+                  v-model="search"
                   :debounce="searchDebounce"
                   :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
                   :placeholder="searchPlaceholder"
@@ -1505,7 +1522,7 @@ defineOptions({
                 >
                   <template #prepend>
                     <q-icon
-                      v-if="!tableOptions.search"
+                      v-if="!search"
                       name="ion-ios-search"
                     >
                       <q-tooltip class="m--dt-btn-tooltip">
@@ -1516,7 +1533,7 @@ defineOptions({
                       v-else
                       class="cursor-pointer"
                       name="ion-ios-close"
-                      @click="tableOptions.search = ''"
+                      @click="search = ''"
                     >
                       <q-tooltip class="m--dt-btn-tooltip">
                         {{ __('myth.datatable.searchInputClear') }}
@@ -1573,7 +1590,7 @@ defineOptions({
                             no-caps
                             style="min-width: 68px"
                             unelevated
-                            @click="tableOptions.search ? refresh() : undefined"
+                            @click="search ? refresh() : undefined"
                           />
                         </MRow>
                       </MModalMenu>
@@ -1654,7 +1671,7 @@ defineOptions({
                             >
                               <slot
                                 :dt="datatableItemsScope"
-                                :filter="tableOptions.tempFilter"
+                                :filter="tempFilterForm"
                                 :form="useFormContext"
                                 :index="dialogItemIndex"
                                 :item="dialogItem"
@@ -1695,7 +1712,7 @@ defineOptions({
                 <MDtBtn
                   v-if="!noRefreshBtn"
                   key="refresh-selection-btn"
-                  :disable="tableOptions.loading"
+                  :disable="loading"
                   icon="ion-ios-refresh"
                   tooltip="myth.datatable.hints.refresh"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh}"
@@ -1706,44 +1723,44 @@ defineOptions({
                 <MDtBtn
                   v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
                   key="fullscreen-selection-btn"
-                  :disable="tableOptions.loading"
-                  :icon="tableOptions.fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
-                  :tooltip="`myth.datatable.${tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
+                  :disable="loading"
+                  :icon="fullscreen ? 'ion-ios-contract' : 'ion-ios-desktop'"
+                  :tooltip="`myth.datatable.${fullscreen ? 'exitFullscreen' : 'fullscreen'}`"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen}"
-                  @click="tableOptions.fullscreen = !tableOptions.fullscreen"
+                  @click="fullscreen = !fullscreen"
                 />
                 <template v-if="hasSelectedItem">
                   <MDtBtn
                     v-if="hasUpdateBtn && isSingleSelectedItem"
                     key="update-dt-selection-btn"
-                    :disable="tableOptions.loading"
+                    :disable="loading"
                     icon="ion-ios-create"
                     update
                     v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
-                    @click="openUpdateDialogNoIndex(tableOptions.selected[0] as any)"
+                    @click="openUpdateDialogNoIndex(selected[0] as any)"
                   />
                   <MDtBtn
                     v-if="hasCloneBtn && isSingleSelectedItem"
                     key="clone-dt-selection-btn"
-                    :disable="tableOptions.loading"
+                    :disable="loading"
                     clone
                     tooltip="labels.clone"
                     v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
-                    @click="onCloneItem(tableOptions.selected[0] as any)"
+                    @click="onCloneItem(selected[0] as any)"
                   />
                   <MDtBtn
                     v-if="hasShowBtn && isSingleSelectedItem"
                     key="show-dt-selection-btn"
-                    :disable="tableOptions.loading"
+                    :disable="loading"
                     icon="ion-ios-eye"
                     show
                     v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
-                    @click="openShowDialogNoIndex(tableOptions.selected[0] as any)"
+                    @click="openShowDialogNoIndex(selected[0] as any)"
                   />
                   <MDtBtn
-                    v-if="tableOptions.selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
+                    v-if="selected.length > 1 ? (hasDestroyBtn && multiDestroy) : hasDestroyBtn"
                     key="destroy-dt-selection-btn"
-                    :disable="!hasSelectedItem || tableOptions.loading"
+                    :disable="!hasSelectedItem || loading"
                     color="negative"
                     destroy
                     icon="ion-ios-trash"
@@ -1755,12 +1772,10 @@ defineOptions({
                     :key="`top-s-${i}`"
                   >
                     <MDtBtn
-                      v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(tableOptions.selected[0],0) : contextBtn.showIf) && ( (contextBtn.click && isSingleSelectedItem) || (contextBtn.multiClick && !isSingleSelectedItem) )"
+                      v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(selected[0],0) : contextBtn.showIf) && ( (contextBtn.click && isSingleSelectedItem) || (contextBtn.multiClick && !isSingleSelectedItem) )"
                       :tooltip="contextBtn.tooltip?__(contextBtn.tooltip):(contextBtn.label?__(`labels.${contextBtn.label}`):undefined)"
                       v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn,...contextBtn,...contextBtn.attr}"
-                      @click="contextBtn.multiClick && tableOptions.selected.length > 1 ? contextBtn.multiClick(tableOptions.selected) : (
-                        contextBtn.click ? contextBtn.click(tableOptions.selected[0],0) : undefined
-                      )"
+                      @click="onClickTopMenu(contextBtn)"
                     />
                   </template>
                 </template>
@@ -1802,14 +1817,14 @@ defineOptions({
 
               <!-- Filter Row -->
               <MRow
-                v-if="Object.values(tableOptions.filter).filter(e => e !== undefined && e !== null).length > 0"
+                v-if="Object.values(filterForm).filter(e => e !== undefined && e !== null).length > 0"
                 class="items-center"
               >
                 <MCol col="auto">
                   <span class="text-subtitle1 q-mr-sm">{{ __('myth.datatable.filteredBy') }}</span>
                 </MCol>
                 <template
-                  v-for="(filterValue,filterKey) in tableOptions.filter"
+                  v-for="(filterValue,filterKey) in filterForm"
                   :key="`filter-${filterKey}`"
                 >
                   <MCol
@@ -1828,7 +1843,9 @@ defineOptions({
                       <span>
                         {{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}
                       </span>
-                      <span v-if="typeof filterValue === 'boolean'">: {{ __(`labels.${filterValue ? 'yes' : 'no'}`) }}</span>
+                      <span v-if="typeof filterValue === 'boolean'">: {{
+                        __(`labels.${filterValue ? 'yes' : 'no'}`)
+                      }}</span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
                       <span
                         v-else-if="lodash.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
@@ -2049,7 +2066,7 @@ defineOptions({
                   name="form-title"
                 >
                   <q-toolbar-title>
-                    <template v-if="tableOptions.loading && !dialogs.item">
+                    <template v-if="loading && !dialogs.item">
                       <q-skeleton width="200px" />
                     </template>
                     <template v-else>
@@ -2083,11 +2100,11 @@ defineOptions({
               class="scroll m--datatable__dialog-form-container"
             >
               <MContainer
-                v-if="tableOptions.loading && !dialogs.item"
+                v-if="loading && !dialogs.item"
                 :fluid="!1"
               >
                 <MRow
-                  v-if="tableOptions.loading"
+                  v-if="loading"
                   col
                 >
                   <template
@@ -2127,7 +2144,7 @@ defineOptions({
                 <MBtn
                   :class="{'full-width': $q.screen.lt.sm}"
                   :label="__('myth.titles.' + (isUpdateMode ? 'save' : 'store'))"
-                  :loading="tableOptions.loading"
+                  :loading="loading"
                   color="positive"
                   no-caps
                   type="submit"
@@ -2136,7 +2153,7 @@ defineOptions({
               </slot>
               <MBtn
                 v-if="$q.screen.gt.sm"
-                :disable="tableOptions.loading"
+                :disable="loading"
                 :label="__('myth.titles.close')"
                 color="negative"
                 no-caps