@mythpe/quasar-ui-qui 0.1.8 → 0.1.10

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -48,54 +48,55 @@ const initMetaServer: MDatatableMetaServer = {
   total: null
 }
 
-interface Props {
+type Props = {
   controlKey?: MDatatableProps['controlKey'];
   defaultItem?: MDatatableProps['defaultItem'];
   contextItems?: MDatatableProps['contextItems'];
   contextItemsLength?: MDatatableProps['contextItemsLength'];
-  hideAutoMessage?: MDatatableProps['hideAutoMessage'];
+  hideAutoMessage?: boolean;
   headers: MDatatableProps['headers'];
   serviceName?: MDatatableProps['serviceName'];
   requestParams?: MDatatableProps['requestParams'];
-  pdf?: MDatatableProps['pdf'];
-  excel?: MDatatableProps['excel'];
+  pdf?: boolean;
+  excel?: boolean;
   exportUrl?: MDatatableProps['exportUrl'];
-  hideSearch?: MDatatableProps['hideSearch'];
+  hideSearch?: boolean;
   searchDebounce?: MDatatableProps['searchDebounce'];
   withIndex?: MDatatableProps['withIndex'];
   withStore?: MDatatableProps['withStore'];
   withShow?: MDatatableProps['withShow'];
   withUpdate?: MDatatableProps['withUpdate'];
-  hideAddBtn?: MDatatableProps['hideAddBtn'];
-  hideUpdateBtn?: MDatatableProps['hideUpdateBtn'];
-  hideShowBtn?: MDatatableProps['hideShowBtn'];
-  hideDestroyBtn?: MDatatableProps['hideDestroyBtn'];
+  hideAddBtn?: boolean;
+  hideUpdateBtn?: boolean;
+  cloneBtn?: boolean;
+  hideShowBtn?: boolean;
+  hideDestroyBtn?: boolean;
   storeRoute?: MDatatableProps['storeRoute'];
-  storeQueryParams?: MDatatableProps['storeQueryParams'];
+  storeQueryParams?: boolean;
   updateRoute?: MDatatableProps['updateRoute'];
-  updateQueryParams?: MDatatableProps['updateQueryParams'];
+  updateQueryParams?: boolean;
   showRoute?: MDatatableProps['showRoute'];
-  showQueryParams?: MDatatableProps['showQueryParams'];
-  mouse?: MDatatableProps['mouse'];
-  noRefreshBtn?: MDatatableProps['noRefreshBtn'];
-  endReach?: MDatatableProps['endReach'];
-  showSelection?: MDatatableProps['showSelection'];
-  hideSelection?: MDatatableProps['hideSelection'];
-  multiSelection?: MDatatableProps['multiSelection'];
-  multiDestroy?: MDatatableProps['multiDestroy'];
+  showQueryParams?: boolean;
+  mouse?: boolean;
+  noRefreshBtn?: boolean;
+  endReach?: boolean;
+  showSelection?: boolean;
+  hideSelection?: boolean;
+  multiSelection?: boolean;
+  multiDestroy?: boolean;
   rowsPerPageOptions?: MDatatableProps['rowsPerPageOptions'];
   ignoreKeys?: MDatatableProps['ignoreKeys'];
   grid?: MDatatableProps['grid'];
   title?: MDatatableProps['title'];
-  manageColumns?: MDatatableProps['manageColumns'];
+  manageColumns?: boolean;
   visibleColumns?: MDatatableProps['visibleColumns'];
   searchColumns?: MDatatableProps['searchColumns'];
-  addTopBtn?: MDatatableProps['addTopBtn'];
-  addListBtn?: MDatatableProps['addListBtn'];
-  addFabBtn?: MDatatableProps['addFabBtn'];
-  fullscreenBtn?: MDatatableProps['fullscreenBtn'];
-  noBodyControl?: MDatatableProps['noBodyControl'];
-  showCardControlHeader?: MDatatableProps['showCardControlHeader'];
+  addTopBtn?: boolean;
+  addListBtn?: boolean;
+  addFabBtn?: boolean;
+  fullscreenBtn?: boolean;
+  noBodyControl?: boolean;
+  showCardControlHeader?: boolean;
   dense?: MDatatableProps['dense'];
   bordered?: MDatatableProps['bordered'];
   flat?: MDatatableProps['flat'];
@@ -119,29 +120,30 @@ const props = withDefaults(defineProps<Props>(), {
   pdf: undefined,
   excel: undefined,
   exportUrl: undefined,
-  hideSearch: undefined,
+  hideSearch: !1,
   searchDebounce: () => 600,
   withIndex: undefined,
   withStore: undefined,
   withShow: undefined,
   withUpdate: undefined,
-  hideAddBtn: undefined,
-  hideUpdateBtn: undefined,
-  hideShowBtn: undefined,
-  hideDestroyBtn: undefined,
+  hideAddBtn: !1,
+  hideUpdateBtn: !1,
+  cloneBtn: !1,
+  hideShowBtn: !1,
+  hideDestroyBtn: !1,
   storeRoute: undefined,
-  storeQueryParams: undefined,
+  storeQueryParams: !1,
   updateRoute: undefined,
-  updateQueryParams: undefined,
+  updateQueryParams: !1,
   showRoute: undefined,
-  showQueryParams: undefined,
-  mouse: undefined,
-  noRefreshBtn: undefined,
-  endReach: undefined,
-  showSelection: undefined,
-  hideSelection: undefined,
-  multiSelection: undefined,
-  multiDestroy: undefined,
+  showQueryParams: !1,
+  mouse: !1,
+  noRefreshBtn: !1,
+  endReach: !1,
+  showSelection: !1,
+  hideSelection: !1,
+  multiSelection: !1,
+  multiDestroy: !1,
   rowsPerPageOptions: () => [50, 250, 500, 0],
   ignoreKeys: undefined,
   grid: undefined,
@@ -351,19 +353,20 @@ const hasUpdateBtn = computed<boolean>(() => {
   if (props.hideUpdateBtn) {
     return !1
   }
-  return !!slots.form || !!props.updateRoute || !!props.updateQueryParams
+  return !!slots.form || !!props.updateRoute || props.updateQueryParams
 })
+const hasCloneBtn = computed<boolean>(() => Boolean(props.cloneBtn))
 const hasShowBtn = computed<boolean>(() => {
   if (props.hideShowBtn) {
     return !1
   }
-  return !!slots.show || !!props.showRoute || !!props.showQueryParams
+  return !!slots.show || !!props.showRoute || props.showQueryParams
 })
 const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
 const hasFilterDialog = computed<boolean>(() => !!slots.filter)
 const hasMenu = computed<boolean>(() => {
-  const pdf = !!props.pdf && getRows.value.length > 0
-  const excel = !!props.excel && getRows.value.length > 0
+  const pdf = props.pdf && getRows.value.length > 0
+  const excel = props.excel && getRows.value.length > 0
   if (pdf || excel) {
     return !0
   }
@@ -1014,7 +1017,6 @@ const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | u
 }
 const contextmenuItemsProp = computed(() => props.contextItems)
 const contextmenuItems = computed<any>(() => ([
-  ...(contextmenuItemsProp.value || []),
   {
     name: 'show',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
@@ -1024,6 +1026,13 @@ const contextmenuItems = computed<any>(() => ([
     showIf: hasShowBtn.value,
     order: 100
   },
+  {
+    name: 'clone',
+    label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.clone' : undefined,
+    click: onCloneItem,
+    showIf: hasCloneBtn.value,
+    order: 200
+  },
   {
     name: 'update',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.update' : undefined,
@@ -1031,7 +1040,7 @@ const contextmenuItems = computed<any>(() => ([
       openUpdateDialog(item, index)
     },
     showIf: hasUpdateBtn.value,
-    order: 200
+    order: 300
   },
   {
     name: 'destroy',
@@ -1044,9 +1053,28 @@ const contextmenuItems = computed<any>(() => ([
     attr: {
       color: 'negative'
     },
-    order: 300
-  }
+    order: 400
+  },
+  ...(contextmenuItemsProp.value || [])
 ].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))))
+const onCloneItem = (item: MDtItem) => {
+  item = toValue(item)
+  confirmMessage()
+    .onOk(() => {
+      $q.loading.show()
+      getMythApiServicesSchema().clone(item.id)
+        .then(({ _message }) => {
+          _message && alertSuccess(_message)
+          refreshNoUpdate()
+        })
+        .catch(({ _message }) => {
+          _message && alertError(_message)
+        })
+        .finally(() => {
+          $q.loading.hide()
+        })
+    })
+}
 const endReach = computed<boolean>(() => Boolean(props.endReach))
 const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
 const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
@@ -1774,6 +1802,15 @@ defineOptions({
                     v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
                     @click="openUpdateDialogNoIndex(tableOptions.selected[0] as any)"
                   />
+                  <MDtBtn
+                    v-if="hasCloneBtn && isSingleSelectedItem"
+                    key="clone-dt-selection-btn"
+                    :disable="tableOptions.loading"
+                    clone
+                    tooltip="labels.clone"
+                    v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn}"
+                    @click="onCloneItem(tableOptions.selected[0] as any)"
+                  />
                   <MDtBtn
                     v-if="hasShowBtn && isSingleSelectedItem"
                     key="show-dt-selection-btn"
@@ -1926,7 +1963,7 @@ defineOptions({
             <q-td :props="noBodyProps">
               <!--Control-->
               <q-btn-dropdown
-                v-if="contextmenuItems.length>contextItemsLength"
+                v-if="contextmenuItems.length > contextItemsLength"
                 v-close-popup
                 :menu-offset="[0,10]"
                 color="primary"
@@ -1934,24 +1971,16 @@ defineOptions({
                 outline
                 v-bind="pluginOptions.dt?.controlDropdown"
               >
-                <q-list>
+                <q-list
+                  :dense="getProp('dense')"
+                  separator
+                >
                   <MDtContextmenuItems
                     :index="noBodyProps.rowIndex"
                     :item="noBodyProps.row"
                     :items="contextmenuItems"
                     display-mode="item"
                   />
-                  <!--<q-item-->
-                  <!--  v-for="contextmenuItem in contextmenuItems"-->
-                  <!--  :key="`dt-r${contextmenuItem.name}`"-->
-                  <!--  v-close-popup-->
-                  <!--  clickable-->
-                  <!--&gt;-->
-                  <!--  <pre>{{ contextmenuItem }}</pre>-->
-                  <!--  <q-item-section>-->
-                  <!--    <q-item-label>{{ contextmenuItem.label }}</q-item-label>-->
-                  <!--  </q-item-section>-->
-                  <!--</q-item>-->
                 </q-list>
               </q-btn-dropdown>
               <MRow

package/src/components/datatable/MDtBtn.vue

@@ -18,6 +18,7 @@ interface Props {
   show?: boolean | undefined;
   update?: boolean | undefined;
   destroy?: boolean | undefined;
+  clone?: boolean | undefined;
   tooltip?: string | null | undefined;
   color?: string | undefined;
   icon?: string | undefined;
@@ -32,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   show: undefined,
   update: undefined,
   destroy: undefined,
+  clone: undefined,
   color: undefined,
   icon: undefined,
   tooltip: undefined,
@@ -46,7 +48,7 @@ type Events = {
 }
 const emit = defineEmits<Events>()
 
-const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy)
+const hasTooltip = computed(() => !!props.tooltip || !!props.show || !!props.update || !!props.destroy || !!props.clone)
 const { __, props: pluginOptions } = useMyth()
 const getTooltip = computed(() => {
   if (props.tooltip !== undefined) {
@@ -57,6 +59,8 @@ const getTooltip = computed(() => {
     return __('labels.update')
   } else if (props.destroy) {
     return __('labels.destroy')
+  } else if (props.clone) {
+    return __('labels.clone')
   }
   return props.tooltip
 })
@@ -67,6 +71,8 @@ const getIcon = computed(() => {
     return 'ion-ios-create'
   } else if (props.destroy) {
     return 'ion-ios-trash'
+  } else if (props.clone) {
+    return 'ion-copy'
   }
   return props.icon
 })
@@ -83,18 +89,20 @@ const getColor = computed<string | undefined>(() => {
   }
   return props.color
 })
-// const getLabel = computed(() => {
-//   if (props.label) {
-//     return __(props.label)
-//   } else if (props.show) {
-//     return __('labels.show')
-//   } else if (props.update) {
-//     return __('labels.update')
-//   } else if (props.destroy) {
-//     return __('labels.destroy')
-//   }
-//   return props.label
-// })
+const getLabel = computed(() => {
+  if (props.label !== undefined) {
+    return __(props.label)
+  } else if (props.show) {
+    return __('labels.show')
+  } else if (props.update) {
+    return __('labels.update')
+  } else if (props.destroy) {
+    return __('labels.destroy')
+  } else if (props.clone) {
+    return __('labels.clone')
+  }
+  return props.label
+})
 
 defineOptions({
   name: 'MDtBtn',
@@ -111,6 +119,7 @@ defineOptions({
     @click="emit('click',$event)"
   >
     <q-item-section
+      v-if="!!getIcon"
       side
       v-bind="pluginOptions.dt?.MDtBtn?.item?.avatarProps"
     >
@@ -123,7 +132,7 @@ defineOptions({
     <q-item-section v-bind="pluginOptions.dt?.MDtBtn?.item?.labelSectionProps">
       <q-item-label v-bind="pluginOptions.dt?.MDtBtn?.item?.itemLabelProps">
         <slot>
-          {{ label ? __(label) : label }}
+          {{ __(getLabel) }}
         </slot>
       </q-item-label>
     </q-item-section>

package/src/components/datatable/MDtContextmenuItems.vue

@@ -15,6 +15,7 @@ import type { MDatatableDialogsOptions, MDatatableProps } from '../../types'
 import type { UnwrapRef } from 'vue'
 import { computed } from 'vue'
 import { useMyth } from '../../composable'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   items: MDatatableProps['contextItems'],
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const itemMode = computed(() => props.displayMode === 'item')
 const { __ } = useMyth()
+const { te } = useI18n({ useScope: 'global' })
 defineOptions({
   name: 'MDtContextmenuItems',
   inheritAttrs: !1
@@ -46,9 +48,7 @@ defineOptions({
       <MDtBtn
         v-if="typeof m.showIf === 'function' ? m.showIf(item,index) : m.showIf"
         :[m.name]="!0"
-        :label="itemMode && m.label === undefined ? __(m.tooltip || m.attr?.label || m.attr?.tooltip || m.name) : (m.label !== undefined ?
-          __(m.label || m.name) :
-          undefined)"
+        :label="itemMode&&m.label===undefined?(te(`labels.${m.name}`)?__(`labels.${m.name}`):__(m.tooltip || m.attr?.label || m.attr?.tooltip || m.name)):(m.label!==undefined?__(m.label || m.name):undefined)"
         :list-item="itemMode"
         :tooltip="m.tooltip !== undefined ? m.tooltip : (m.label === undefined ? `labels.${m.name}` : undefined)"
         dense

package/src/composable/useMyth.ts

@@ -24,7 +24,7 @@ export const useMyth = () => {
   const $route = useRoute()
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const __ = (key: any, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
+  const __ = (key: any, ...rest: unknown[]) => !key ? key : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
   const getPageTitle = (route?: RouteLocationNormalizedLoaded | number | string, number?: number | string): string => {
     if (typeof route !== 'object') {
       number = route
@@ -56,6 +56,8 @@ export const useMyth = () => {
     const pluralize = Str.pascalCase(lodash.pluralize(lastRouteName))
     const singular = Str.pascalCase(lodash.singularize(lastRouteName))
     const keys = lodash.filter(lodash.uniq([
+      `routes.${routeName}`,
+      `routes.${routePath}`,
       `${lastRouteName}Page.title`,
       `${lodash.camelCase(lastRouteName)}Page.title`,
       `choice.${pluralize}`,
@@ -71,14 +73,6 @@ export const useMyth = () => {
     let str: string | null = null
     let k: string | any
 
-    if (te((k = `routes.${routeName}`)) && lodash.isString((str = t(k)))) {
-      return str
-    }
-
-    if (te((k = `routes.${routePath}`)) && lodash.isString((str = t(k)))) {
-      return str
-    }
-
     for (const f in keys) {
       if (!(k = keys[f])) {
         continue

package/src/types/api-helpers.d.ts

@@ -38,6 +38,8 @@ export type HelpersStubSchema = {
 
   update (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
 
+  clone (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig): Promise<ApiInterface>;
+
   destroy (id: UrlType, config?: AxiosRequestConfig): Promise<ApiInterface>;
 
   destroyAll (ids?: UrlType[], config?: AxiosRequestConfig): Promise<ApiInterface>;

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

@@ -114,6 +114,7 @@ export type MDatatableDialogsOptions<T extends MDDIP = MDDIP> = {
 export interface MDtBtnProps extends MBtnProps {
   show?: boolean;
   update?: boolean;
+  clone?: boolean;
   destroy?: boolean;
   tooltip?: string | undefined;
   color?: string;
@@ -226,6 +227,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   withUpdate?: string | string[];
   hideAddBtn?: boolean;
   hideUpdateBtn?: boolean;
+  cloneBtn?: boolean;
   hideShowBtn?: boolean;
   hideDestroyBtn?: boolean;
   storeRoute?: string | RouteLocationRaw;

package/src/utils/Helpers.ts

@@ -87,6 +87,12 @@ export const Helpers = {
         data && Helpers.appendArray(formData, data)
         return axios().post(u, formData, config)
       },
+      async clone (id: UrlType, data?: ParamsType, config?: AxiosRequestConfig) {
+        const u = makeUrl(`${id}/Clone`)
+        const formData = new FormData()
+        data && Helpers.appendArray(formData, data)
+        return axios().post(u, formData, config)
+      },
       async destroy (id: UrlType, config?: AxiosRequestConfig) {
         const u = makeUrl(id)
         return axios().delete(u, config)