@mythpe/quasar-ui-qui 0.3.90 → 0.3.91

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -100,6 +100,8 @@ type Props = {
   noWrapBtn?: boolean;
   lockValue?: MDatatableProps['lockValue'];
   align?: MDatatableProps['align'];
+  importBtn?: MDatatableProps['importBtn'];
+  noExampleBtn?: MDatatableProps['noExampleBtn'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -176,7 +178,9 @@ const props = withDefaults(defineProps<Props>(), {
   subtitleClass: undefined,
   noWrapBtn: undefined,
   lockValue: undefined,
-  align: 'left'
+  align: 'left',
+  importBtn: undefined,
+  noExampleBtn: undefined
 })
 
 interface Emits {
@@ -294,7 +298,13 @@ const {
   onCloneItem,
   imageDialog,
   openImageDialog,
-  closeImageDialog
+  closeImageDialog,
+
+  importDialogModel,
+  onOpenImportDialog,
+  onCloseImportDialog,
+  downloadingExample,
+  onDownloadExample
 } = useDtHelpers(() => props)
 
 // Prevent user from back
@@ -554,12 +564,13 @@ defineExpose({
 
 <template>
   <div
-    :class="{
-      'm-datatable-component': !0,
-      'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
-      'm-datatable-component__too_small': $q.screen.height < 900,
-      'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
-    }"
+    :class="[
+      'm-datatable-component',
+      {
+        'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions?.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
+        'm-datatable-component__too_small': $q.screen.height < 900,
+        'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
+      }]"
   >
     <!-- Context Menu -->
     <MModalMenu
@@ -840,6 +851,22 @@ defineExpose({
                               </div>
                             </slot>
                           </MCol>
+
+                          <!--Import Btn-->
+                          <MCol
+                            v-if="!!importBtn"
+                            auto
+                          >
+                            <MDtBtn
+                              color="green"
+                              icon="far fa-file-excel"
+                              label="labels.import"
+                              no-caps
+                              text-color="white"
+                              @click="onOpenImportDialog()"
+                            />
+                          </MCol>
+
                           <!-- Add Btn -->
                           <MCol
                             v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
@@ -1532,6 +1559,68 @@ defineExpose({
       />
     </q-pull-to-refresh>
 
+    <!--Import Dialog-->
+    <MDialog
+      v-model="importDialogModel"
+      allow-focus-outside
+      full-width
+      no-backdrop-dismiss
+      no-esc-dismiss
+      no-shake
+      position="top"
+      transition-hide="slide-up"
+      transition-show="slide-down"
+      v-bind="pluginOptions.dt?.formDialogProps"
+    >
+      <q-card class="q-dialog-plugin">
+        <q-card-section>
+          <MContainer>
+            <MRow class="justify-between items-start">
+              <div>
+                <div class="text-h6">
+                  {{ __('replace.import', { name: title ? __(title) : __('data') }) }}
+                </div>
+                <div
+                  v-if="!noExampleBtn"
+                  class="q-mt-lg"
+                >
+                  <MBtn
+                    :disable="loading"
+                    :loading="downloadingExample"
+                    icon="far fa-file-excel"
+                    label="labels.download_example_file"
+                    outline
+                    text-color="green"
+                    @click="onDownloadExample()"
+                  />
+                </div>
+              </div>
+              <q-btn
+                flat
+                icon="close"
+                padding="3px"
+                text-color="body"
+                @click="onCloseImportDialog()"
+              >
+                <q-tooltip class="m-dt-btn-tooltip">
+                  {{ __('myth.titles.close') }}
+                </q-tooltip>
+              </q-btn>
+            </MRow>
+          </MContainer>
+        </q-card-section>
+        <q-separator />
+        <slot
+          :close="onCloseImportDialog"
+          :download-example="onDownloadExample"
+          :downloading="downloadingExample"
+          :dt="datatableItemsScope"
+          :open="onOpenImportDialog"
+          name="import"
+        />
+      </q-card>
+    </MDialog>
+
     <!-- Form Dialog -->
     <MDialog
       v-model="formDialogModel"

package/src/composable/useDtHelpers.ts

@@ -1,6 +1,7 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { computed, nextTick, reactive, ref, toRef, toValue, useSlots } from 'vue'
 import type {
+  ApiInterface,
   ApiServiceParams,
   FetchRowsArgs,
   MDatatableFilterForm,
@@ -51,7 +52,8 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     api,
     alertError,
     alertSuccess,
-    confirmMessage
+    confirmMessage,
+    openWindow
   } = useMyth()
   const props = toValue(options)
   const getRows = ref<MDtItem[]>([])
@@ -917,7 +919,41 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     }
   }
 
+  const importDialogModel = ref<boolean>(!1)
+  const onOpenImportDialog = () => {
+    importDialogModel.value = !0
+  }
+  const onCloseImportDialog = () => {
+    importDialogModel.value = !1
+  }
+  const downloadingExample = ref<boolean>(false)
+  const onDownloadExample = async (config?: AxiosRequestConfig) => {
+    downloadingExample.value = true
+    return await getMythApiServicesSchema().exampleUrl(config)
+      .then((result: ApiInterface) => {
+        const { _data } = result
+        if (_data.url) {
+          openWindow(_data.url)
+        }
+        return result
+      })
+      .catch((error: ApiInterface) => {
+        const { _message } = error
+        alertError(_message)
+        return error
+      })
+      .finally(() => {
+        downloadingExample.value = false
+      })
+  }
+
   return {
+    importDialogModel,
+    onOpenImportDialog,
+    onCloseImportDialog,
+    downloadingExample,
+    onDownloadExample,
+
     imageDialog,
     onRowContextmenu,
     getRowsPerPageOptions,

package/src/types/m-datatable.d.ts

@@ -6,7 +6,7 @@
  * Github: https://github.com/mythpe
  */
 
-import type { AxiosResponse } from 'axios'
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
 import type { NamedColor, QAvatarProps, QAvatarSlots, QTableProps, QTableSlots, VueClassProp } from 'quasar'
 import type { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref, UnwrapNestedRefs, UnwrapRef, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
@@ -190,6 +190,14 @@ type MDatatableMainScope = {
 
 type MDatatableSlotFn<T = any> = (scope: T) => VNode[];
 
+interface ImportScopes {
+  dt: MDatatableScope;
+  open: () => void;
+  close: () => void;
+  downloading: Ref<boolean>;
+  download: (config?: AxiosRequestConfig) => Promise<ApiInterface>;
+}
+
 export interface MDatatableSlots extends Omit<QTableSlots, 'top'> {
   tools: MDatatableSlotFn<{ dt: MDatatableScope }>;
   selection: MDatatableSlotFn<MDatatableMainScope>;
@@ -205,6 +213,7 @@ export interface MDatatableSlots extends Omit<QTableSlots, 'top'> {
   'form-title': MDatatableSlotFn<MDatatableMainScope>;
   'form-title-left': MDatatableSlotFn<MDatatableMainScope>;
   'form-title-right': MDatatableSlotFn<MDatatableMainScope>;
+  import: MDatatableSlotFn<ImportScopes>;
 
   [key: `body-cell-${string}`]: MDatatableSlotFn<
     Parameters<QTableSlots['body-cell']>[0] & MDatatableMainScope
@@ -234,6 +243,8 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   pdf?: boolean;
   excel?: boolean;
   exportUrl?: MDtExportOptions | boolean;
+  importBtn?: boolean;
+  noExampleBtn?: boolean;
   hideSearch?: boolean;
   hideTitle?: boolean;
   searchDebounce?: string | number;