@mythpe/quasar-ui-qui 0.1.19 → 0.1.21

package/src/composable/useDtHelpers.ts

@@ -0,0 +1,945 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, nextTick, reactive, ref, toRef, toValue, useSlots } from 'vue'
+import type {
+  ApiServiceParams,
+  FetchRowsArgs,
+  MDatatableFilterForm,
+  MDatatableMetaServer,
+  MDatatableOptions,
+  MDatatablePagination,
+  MDatatableProps, MDatatableScope,
+  MDtExportOptions,
+  MDtHeadersParameter,
+  MDtItem,
+  MDtItemIndex,
+  MDtMythApiServicesSchema
+} from '../types'
+import { useI18n } from 'vue-i18n'
+import { useMyth } from './useMyth'
+import { useQuasar } from 'quasar'
+import lodash from 'lodash'
+import { useRoute, useRouter } from 'vue-router'
+import type { AxiosRequestConfig } from 'axios'
+import { useResetForm, useSetFormValues } from 'vee-validate'
+
+const initPaginationOptions: MDatatablePagination = {
+  sortBy: undefined,
+  descending: undefined,
+  page: 1,
+  rowsPerPage: 50,
+  rowsNumber: 0
+}
+export const initMetaServer: MDatatableMetaServer = {
+  current_page: null,
+  last_page: null,
+  total: null
+}
+
+export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
+  const slots = useSlots()
+  const $q = useQuasar()
+  const router = useRouter()
+  const route = useRoute()
+  const { te } = useI18n({ useScope: 'global' })
+  const {
+    __,
+    props: pluginOptions,
+    parseHeaders,
+    pascalCase,
+    pluralize,
+    downloadFromResponse,
+    api,
+    alertError,
+    alertSuccess,
+    confirmMessage
+  } = useMyth()
+  const props = toValue(options)
+  const getRows = ref<MDtItem[]>([])
+  const defaultItem = computed(() => props.defaultItem)
+  const getTableTitle = computed(() => {
+    if (props.title) {
+      if (te(props.title)) {
+        return __(props.title)
+      }
+      return __('replace.index', { name: __(props.title) })
+    }
+    return undefined
+  })
+  const serviceName = computed(() => props.serviceName)
+  const exportToBlob = computed(() => {
+    if (props.exportUrl === undefined && pluginOptions.value.datatable?.exportUrl === undefined) {
+      return !0
+    }
+    const t = props.exportUrl === undefined ? pluginOptions.value.datatable?.exportUrl : props.exportUrl
+    if (t !== undefined) {
+      if (t.toString() === 'true' || t.toString() === '') {
+        return !1
+      }
+      if (t.toString() === 'pdf') {
+        return 'excel'
+      }
+      if (t.toString() === 'excel') {
+        return 'pdf'
+      }
+    }
+    return !0
+  })
+
+  const filterDialogModel = ref(!1)
+  const showDialogModel = ref(!1)
+  const formDialogModel = ref(!1)
+  const isUpdateDialog = ref(!1)
+  const dialogItem = ref<MDtItem | undefined>(undefined)
+  const dialogItemIndex = ref<MDtItemIndex | undefined>()
+  const dialogErrors = ref<any>({})
+  const resetDialogs = () => {
+    filterDialogModel.value = !1
+    showDialogModel.value = !1
+    formDialogModel.value = !1
+    isUpdateDialog.value = !1
+    dialogItem.value = undefined
+    dialogItemIndex.value = undefined
+    dialogErrors.value = {}
+  }
+
+  const getHeaders = computed<any[]>(() => parseHeaders(props.headers as MDtHeadersParameter,
+    { noSort: props.imageColumns }) || [])
+  const visibleHeaders = ref<string[]>([])
+
+  const contextmenu = ref(!1)
+  const selected = ref<MDtItem[]>([])
+  const onUpdateSelectedItems = () => {
+    if (contextmenu.value) {
+      contextmenu.value = !1
+    }
+  }
+
+  const meta = ref<MDatatableMetaServer>({ ...initMetaServer })
+  const pagination = ref<MDatatablePagination>({ ...initPaginationOptions })
+  const search = ref<string | null>(null)
+  const searchColumnsRef = ref<string[]>([])
+  const searchPlaceholder = computed<string>(() => {
+    if (searchColumnsRef.value.length > 0) {
+      return __('myth.datatable.searchInputPlaceholder',
+        {
+          v: getHeaders.value.filter(e => e?.field !== props.controlKey && searchColumnsRef.value.indexOf(e.name) !== -1)
+            .map(e => e.label)
+            .join(', ')
+        })
+    }
+    return 'myth.datatable.searchInput'
+  })
+  const loading = ref<boolean>(!1)
+  const filterForm = ref<MDatatableFilterForm>({})
+  const tempFilterForm = ref<MDatatableFilterForm>({})
+  const hasAction = ref<boolean>(!1)
+  const fullscreen = ref(!1)
+
+  const hasAddBtn = computed<boolean>(() => {
+    if (props.hideAddBtn) {
+      return !1
+    }
+    return !!slots.form || !!props.storeRoute
+  })
+  const hasUpdateBtn = computed<boolean>(() => {
+    if (props.hideUpdateBtn) {
+      return !1
+    }
+    return (!!slots.form || !!props.updateRoute || props.updateQueryParams) as boolean
+  })
+  const hasCloneBtn = computed<boolean>(() => Boolean(props.cloneBtn))
+  const hasShowBtn = computed<boolean>(() => {
+    if (props.hideShowBtn) {
+      return !1
+    }
+    return (!!slots.show || !!props.showRoute || props.showQueryParams) as boolean
+  })
+  const hasDestroyBtn = computed<boolean>(() => !props.hideDestroyBtn)
+  const hasFilterDialog = computed<boolean>(() => !!slots.filter)
+
+  const isUpdateMode = ref<boolean>(!1)
+  const formMode = computed<'update' | 'store'>(() => isUpdateMode.value ? 'update' : 'store')
+  const isSingleSelectedItem = computed<boolean>(() => selected.value.length === 1)
+  const firstSelectedItem = computed<MDtItem>(() => selected.value[0] as MDtItem)
+  const hasSelectedItem = computed<boolean>(() => selected.value.length > 0)
+  const getShowTitle = computed(() => {
+    if (serviceName.value && typeof serviceName.value !== 'function') {
+      const c = pascalCase(pluralize(serviceName.value.split('/').pop()))
+      return __('replace.show_details', { name: __(`choice.${c}`, 1) })
+    }
+    return __('show_details')
+  })
+  const getFormTitle = computed(() => {
+    const name = serviceName.value && typeof serviceName.value !== 'function' ? __(`choice.${pascalCase(pluralize(
+      serviceName.value.split(
+        '/').pop()))}`, 1) : ''
+    return __(`replace.${formMode.value}`, { name })
+  })
+  const isGrid = computed(() => {
+    if (props.grid !== undefined) {
+      return props.grid
+    }
+    return $q.screen.lt.md
+  })
+
+  const getMythApiServicesSchema = (): MDtMythApiServicesSchema => {
+    if (typeof serviceName.value === 'function') {
+      return serviceName.value() as MDtMythApiServicesSchema
+    }
+    const c = api.value.services[serviceName.value]
+    if (!c) {
+      throw Error(`No Service: ${serviceName.value}`)
+    }
+    return c
+  }
+  const updateSelectedItems = (items: MDtItem[]) => {
+    selected.value = items as any
+  }
+  const onScroll = ({ index, to }: any) => {
+    if (index && to && index === to) {
+      loadMore()
+    }
+  }
+  const loadMore = () => {
+    nextTick(() => {
+      fetchDatatableItems({
+        pagination: {
+          ...pagination.value,
+          page: (pagination.value.page ?? 0) + 1
+        },
+        filter: search.value
+      })
+    })
+  }
+  const refreshNoUpdate = (done?: () => void) => {
+    if (contextmenu.value) {
+      contextmenu.value = !1
+    }
+    meta.value = { ...initMetaServer }
+    pagination.value.page = 1
+    pagination.value.rowsNumber = 0
+    getRows.value = []
+    nextTick(() => {
+      fetchDatatableItems({
+        pagination: pagination.value,
+        filter: search.value
+      })
+      if (done) {
+        done()
+      }
+    })
+  }
+  const refresh = (done?: () => void) => refreshNoUpdate(done)
+  const getRequestWith = (type: 'withIndex' | 'withShow' | 'withUpdate' | 'withStore'): string | null => {
+    let v: any = []
+    const params: { [k: string]: string } & string | (() => string | object) = props[type] as any
+    if (params) {
+      if (typeof params === 'string') {
+        v = params.split(',')
+      }
+
+      if (lodash.isArray(params)) {
+        v = [...params]
+      } else if (lodash.isObject(params) && typeof params !== 'function') {
+        let e
+        for (const k in params) {
+          e = params[k]
+          v.push(`${k}=${e}`)
+        }
+      } else if (lodash.isFunction(params)) {
+        const f = params()
+        v = typeof f === 'string' ? f.split(',') : f
+      }
+    }
+    return v.join(',') ?? null
+  }
+  const getDatatableParams = ({
+    pagination,
+    filter
+  }: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
+    const headerItems = getHeaders.value.map((e: any) => e.name).join(',')
+    // console.log(headerItems)
+    let params: ApiServiceParams = {
+      headerItems,
+      indexType: 'index',
+      fdt: 'i',
+      itemsPerPage: pagination?.rowsPerPage === 0 ? -1 : (pagination?.rowsPerPage !== undefined ? pagination?.rowsPerPage : 0),
+      page: pagination?.page !== undefined ? pagination.page : 0,
+      sortBy: pagination?.sortBy !== undefined ? pagination.sortBy : undefined,
+      sortDesc: !pagination?.sortBy ? undefined : (pagination?.descending === !0 ? 1 : (pagination?.descending === !1 ? 0 : undefined))
+    }
+    if (filter) {
+      params.search = filter
+    }
+    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) => {
+            if (elm.id) {
+              return elm.id
+            } else if (elm.value) {
+              return elm.value
+            }
+            return elm
+          })
+        } else if (lodash.isPlainObject(TempFilter[fKey])) {
+          if (TempFilter[fKey].id) {
+            TempFilter[fKey] = TempFilter[fKey].id
+          } else if (TempFilter[fKey].value) {
+            TempFilter[fKey] = TempFilter[fKey].value
+          }
+        }
+      }
+      // console.log(JSON.stringify(filterForm.value))
+      // params.filter = filterForm.value
+      // console.log(TempFilter)
+      params.filter = TempFilter
+    }
+    if (searchColumnsRef.value.length > 0) {
+      params.searchColumns = searchColumnsRef.value.join(',')
+    }
+    if (props.requestParams) {
+      if (typeof props.requestParams === 'function') {
+        params = props.requestParams(params) as ApiServiceParams
+      } else {
+        params = {
+          ...params,
+          ...props.requestParams
+        }
+      }
+    }
+    return { ...params, ...merge }
+  }
+  const fetchDatatableItems = (opts: FetchRowsArgs = {}) => {
+    if (props.endReach && meta.value.last_page && pagination.value.page >= meta.value.last_page) {
+      return
+    }
+    if (loading.value || !serviceName.value) return
+    loading.value = !0
+    selected.value = []
+    nextTick(() => {
+      const params = getDatatableParams(opts)
+      const requestWith = getRequestWith('withIndex')
+      if (requestWith) {
+        params.requestWith = requestWith
+      }
+      // console.log({ params })
+      getMythApiServicesSchema().index({ params })
+        .then((result: any) => {
+          const { _data, _meta } = result
+          pagination.value = {
+            page: parseInt((_meta?.current_page || 1).toString()) || 1,
+            rowsPerPage: parseInt(_meta?.per_page) || 0,
+            rowsNumber: parseInt((_meta?.total || 0).toString()) || 0,
+            sortBy: opts?.pagination?.sortBy || undefined,
+            descending: opts?.pagination?.descending || undefined
+          }
+          _meta && (meta.value = _meta)
+          if (props.endReach) {
+            getRows.value = [...getRows.value, ...(_data || [])]
+          } else {
+            getRows.value = _data || []
+          }
+        })
+        .catch((e) => {
+          // console.log(e)
+          if (e?.response?.status === 401) {
+            logoutDatatable()
+            return e
+          }
+          if (e?._message) {
+            alertError(e._message)
+          } else if (e?.message) {
+            alertError(e.message)
+          }
+        })
+        .finally(() => {
+          loading.value = !1
+        })
+    })
+  }
+  const exportData = (type: MDtExportOptions) => {
+    if (loading.value) {
+      return
+    }
+    const ex = async () => {
+      loading.value = !0
+      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: pagination.value,
+        filter: search.value
+      }, {
+        indexType: type,
+        fdt: 'e',
+        toUrl: toBLob === !0 ? !1 : exportToBlob.value !== type,
+        headerItems
+      })
+      if (selected.value.length > 0) {
+        data.ids = selected.value.map((e: any) => e.id)
+      }
+      // console.log(3)
+      const config: AxiosRequestConfig = {}
+      if (toBLob) {
+        config.responseType = 'blob'
+      }
+      getMythApiServicesSchema().export(data, config)
+        .then(async (response) => {
+          const { _message } = response || {}
+          _message && (alertSuccess(_message))
+          try {
+            await downloadFromResponse(response)
+          } catch (e: any) {
+            if (response.status === 200 && response.headers['content-type'] === 'application/json') {
+              return response
+            }
+            if (e?.code) {
+              alertError(__(`messages.${e.code}`))
+            } else if (e?.message) {
+              alertError(e.message)
+            }
+            console.log(e)
+          }
+          return response
+        })
+        .catch((e) => {
+          alertError(e?._message || e?.message || 'Error')
+        })
+        .finally(() => {
+          loading.value = !1
+        })
+    }
+    if (!selected.value.length) {
+      confirmMessage(__('messages.export_all')).onOk(() => ex())
+    } else {
+      ex()
+    }
+  }
+  const openDialogTimeout = 100
+  const setValues = useSetFormValues()
+  const resetDialogForm = useResetForm()
+  const resetVeeForm = async (attrs?: Record<string, any>) => {
+    const init: any = {}
+    for (const k in props.defaultItem) {
+      init[k] = attrs && k in attrs ? attrs[k] : props.defaultItem[k]
+    }
+    resetDialogForm({ values: init || {} }, { force: !0 })
+    attrs && setValues(attrs, !1)
+  }
+  const openFilterDialog = () => {
+    resetDialogForm({ values: {}, errors: {} }, { force: !0 })
+    nextTick(() => {
+      tempFilterForm.value = { ...filterForm.value }
+      filterDialogModel.value = !0
+    })
+  }
+  const saveFilterDialog = () => {
+    filterDialogModel.value = !1
+    nextTick(() => (filterForm.value = { ...tempFilterForm.value }))
+  }
+  const closeFilterDialog = () => {
+    filterDialogModel.value = !1
+    tempFilterForm.value = { ...filterForm.value }
+  }
+  const onRemoveFilter = (key: string | number) => {
+    const filter = filterForm.value
+    delete filter[key]
+    filterForm.value = { ...filter }
+    if (route.query[key]) {
+      const query = { ...route.query }
+      delete query[key]
+      router.push({ query })
+    }
+  }
+  const updateFilterOptions = (data: Record<string, any>) => {
+    filterForm.value = {
+      ...filterForm.value,
+      ...data
+    }
+  }
+
+  const openShowDialogNoIndex = async (i: MDtItem) => {
+    const item = toRef(i)
+    const index = getRows.value.findIndex(e => e.id === item.value.id)
+    return openShowDialog(item.value, index)
+  }
+  const openShowDialog = async (i: MDtItem, index: MDtItemIndex) => {
+    const fdt = 's'
+    const item = toRef(i)
+    if (props.showQueryParams) {
+      router.push({ query: { ...route.query, id: item.value.id, fdt } })
+      return
+    }
+    if (props.showRoute) {
+      if (typeof props.showRoute === 'string') {
+        router.push({ name: props.showRoute, params: { id: item.value.id }, query: route.query })
+      } else {
+        router.push(props.showRoute)
+      }
+      return
+    }
+    if (loading.value) {
+      return
+    }
+    loading.value = !0
+    const params: any = { fdt }
+    if (getRequestWith('withShow')) {
+      params.requestWith = getRequestWith('withShow')
+    }
+
+    getMythApiServicesSchema().show(item.value.id, { params })
+      .then(({ _data }) => {
+        dialogItem.value = _data
+        dialogItemIndex.value = index
+        getRows.value[index as any] = _data as any
+        nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
+        setTimeout(() => (showDialogModel.value = !0), openDialogTimeout)
+      })
+      .catch((e: any) => {
+        const message = e?._message || e?.message
+        message && alertError(message)
+      })
+      .finally(() => (loading.value = !1))
+  }
+  const closeShowDialog = () => {
+    showDialogModel.value = !1
+    dialogItem.value = undefined
+    dialogItemIndex.value = undefined
+  }
+
+  const updateRouteProp = computed(() => props.updateRoute)
+  const openUpdateDialogNoIndex = (i: MDtItem) => {
+    const item = toRef(i)
+    const index = getRows.value.findIndex(e => e.id === item.value.id)
+    return openUpdateDialog(item.value, index)
+  }
+  const openUpdateDialog = (i: MDtItem, index: MDtItemIndex) => {
+    const fdt = 'u'
+    const item = { ...toValue(i) }
+    if (props.updateQueryParams) {
+      router.push({ query: { ...route.query, id: item.id, fdt } })
+      return
+    }
+    if (updateRouteProp.value) {
+      if (typeof updateRouteProp.value === 'string') {
+        router.push({ name: updateRouteProp.value, params: { id: item.id }, query: route.query })
+      } else {
+        router.push(updateRouteProp.value)
+      }
+      return
+    }
+    if (loading.value) {
+      return
+    }
+    loading.value = !0
+    isUpdateMode.value = !0
+    const params: any = { fdt }
+    if (getRequestWith('withUpdate')) {
+      params.requestWith = getRequestWith('withUpdate')
+    }
+    getMythApiServicesSchema().show(item.id, { params })
+      .then(({ _data }) => {
+        dialogItem.value = _data
+        dialogItemIndex.value = index
+        if (_data) {
+          getRows.value[index] = { ..._data } as any
+          nextTick(() => setTimeout(() => (selected.value = [getRows.value[index] as any]), openDialogTimeout))
+        }
+        setTimeout(() => {
+          resetVeeForm(_data)
+          nextTick(() => {
+            formDialogModel.value = !0
+          })
+        }, openDialogTimeout)
+      })
+      .catch((e: any) => {
+        const message = e?._message || e?.message
+        message && alertError(message)
+      })
+      .finally(() => (loading.value = !1))
+  }
+  const openCreateDialog = (dtItem?: MDtItem) => {
+    const fdt = 'c'
+    if (props.storeQueryParams) {
+      router.push({ query: { ...route.query, id: undefined, fdt } })
+      return
+    }
+    if (props.storeRoute) {
+      if (typeof props.storeRoute === 'string') {
+        router.push({ name: props.storeRoute, query: route.query })
+      } else {
+        router.push(props.storeRoute)
+      }
+      return
+    }
+    isUpdateMode.value = !1
+    dialogItem.value = { ...defaultItem.value, ...dtItem } as MDtItem
+    dialogItemIndex.value = undefined
+    setTimeout(() => {
+      resetVeeForm(dtItem)
+      formDialogModel.value = !0
+    }, openDialogTimeout)
+  }
+  const closeFormDialog = () => {
+    formDialogModel.value = !1
+    isUpdateMode.value = !1
+    dialogItem.value = undefined
+    dialogItemIndex.value = undefined
+    setTimeout(() => resetVeeForm(), openDialogTimeout)
+  }
+
+  const updateDatatableItem = (i: MDtItem, index?: MDtItemIndex) => {
+    const item = { ...toValue(i) }
+    if (item) {
+      if (index !== undefined) {
+        getRows.value[index] = item
+      } else {
+        const findIndex = getRows.value.findIndex(e => parseInt(e.id?.toString?.() ?? '') === parseInt(item?.id?.toString?.() ?? ''))
+        if (findIndex >= 0) {
+          getRows.value[findIndex] = item
+        }
+      }
+      selected.value.length === 1 && updateSelectedItems([item])
+    }
+  }
+  const removeDtItem = (i: MDtItem | number) => {
+    const item = toRef<MDtItem | number>(i)
+    const id: string | number = typeof item.value !== 'object' ? item.value : item.value.id as string
+    if (typeof item.value !== 'object') {
+      getRows.value = getRows.value.filter((e, i) => i !== id)
+    } else {
+      getRows.value = getRows.value.filter((e) => parseInt(e.id?.toString() ?? '') !== parseInt(id.toString()))
+    }
+  }
+  const ignoreKeysProps = computed(() => props.ignoreKeys)
+
+  const hideAutoMessage = computed(() => props.hideAutoMessage)
+  const onDeleteItem = (i: MDtItem, index: number) => {
+    const item = toRef(i)
+    if (loading.value || !item.value?.id) {
+      return
+    }
+    hasAction.value = !0
+    confirmMessage(__('messages.confirm_delete')).onOk(async () => {
+      loading.value = !0
+      try {
+        const { _message, _success } = await getMythApiServicesSchema().destroy(item.value.id)
+        if (!hideAutoMessage.value && _success && _message) {
+          _message && alertSuccess(_message)
+        }
+        if (_success) {
+          if (pagination.value.rowsNumber !== undefined) {
+            --pagination.value.rowsNumber
+            selected.value = []
+          }
+          removeDtItem(index)
+        }
+      } catch (e: any) {
+        e?._message && alertError(e._message)
+      } finally {
+        loading.value = !1
+      }
+    }).onDismiss(() => {
+      hasAction.value = !1
+    })
+  }
+  const deleteSelectionItem = () => {
+    if (!selected.value.length) return
+    if (loading.value || !selected.value.length) {
+      return
+    }
+    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
+    }
+    hasAction.value = !0
+    confirmMessage(__('messages.confirm_delete')).onOk(async () => {
+      loading.value = !0
+      try {
+        const {
+          _message,
+          _success
+        } = await getMythApiServicesSchema().destroyAll(selected.value.map((e: MDtItem) => e.id))
+        if (!hideAutoMessage.value && _success && _message) {
+          _message && alertSuccess(_message)
+        }
+        if (_success) {
+          refresh()
+        }
+      } catch (e: any) {
+        e?._message && alertError(e._message)
+      } finally {
+        loading.value = !1
+        nextTick()
+        selected.value = []
+      }
+    }).onDismiss(() => {
+      hasAction.value = !1
+    })
+  }
+  const logoutDatatable = () => {
+    //
+  }
+  const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | undefined) => {
+    e.preventDefault?.()
+    row = toValue(row)
+    if (index === dialogItemIndex.value) {
+      selected.value = []
+      dialogItem.value = undefined
+      dialogItemIndex.value = undefined
+      if (contextmenu.value) {
+        contextmenu.value = !1
+      }
+      return
+    }
+    selected.value = [row]
+    dialogItem.value = row
+    dialogItemIndex.value = index
+    if (isGrid.value) {
+      contextmenu.value = !0
+    }
+  }
+  const contextmenuItems = computed<any>(() => ([
+    {
+      name: 'show',
+      label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
+      click: (item: MDtItem, index: MDtItemIndex) => {
+        openShowDialog(item, index)
+      },
+      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,
+      click: (item: MDtItem, index: MDtItemIndex) => {
+        openUpdateDialog(item, index)
+      },
+      showIf: hasUpdateBtn.value,
+      order: 300
+    },
+    {
+      name: 'destroy',
+      label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.destroy' : undefined,
+      click: (item: MDtItem, index: MDtItemIndex) => {
+        selected.value = [item]
+        onDeleteItem(item, index)
+      },
+      showIf: hasDestroyBtn.value,
+      attr: {
+        color: 'negative'
+      },
+      order: 400
+    },
+    ...(props.contextItems || [])
+  ].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]))
+
+  const imageDialog = reactive<MDatatableScope['imageDialog']>({
+    value: !1,
+    src: undefined,
+    asAttachment: undefined
+  })
+  const openImageDialog = (src: string, opts?: { asAttachment?: boolean }) => {
+    imageDialog.src = src
+    imageDialog.asAttachment = opts?.asAttachment
+    nextTick(() => {
+      imageDialog.value = !0
+    })
+  }
+  const closeImageDialog = () => {
+    imageDialog.value = !1
+    nextTick(() => {
+      imageDialog.src = undefined
+      imageDialog.asAttachment = undefined
+    })
+  }
+
+  const tableOptions = reactive<MDatatableOptions>({
+    search,
+    loading,
+    pagination,
+    meta,
+    filter: filterForm,
+    tempFilter: tempFilterForm,
+    selected,
+    hasAction,
+    fullscreen,
+    getHeaders,
+    visibleHeaders
+  })
+  const datatableItemsScope = reactive({
+    openShowDialog,
+    openShowDialogNoIndex,
+    closeShowDialog,
+    openUpdateDialog,
+    openUpdateDialogNoIndex,
+    openCreateDialog,
+    closeFormDialog,
+    onDeleteItem,
+    refresh,
+    refreshNoUpdate,
+    tableOptions,
+    isSingleSelectedItem,
+    firstSelectedItem,
+    updateDatatableItem,
+    updateSelectedItems,
+    imageDialog,
+    openImageDialog,
+    closeImageDialog
+  })
+  const getShowSelection = computed<boolean | undefined>(() => {
+    if (props.hideSelection) {
+      return !1
+    }
+    return props.showSelection
+  })
+  const defaultTopBtnProps: any = {
+    dense: !0,
+    flat: !0
+  }
+  const getProp = computed<any>(() => (k: any) => {
+    if (props[k] !== undefined) {
+      return props[k]
+    }
+    if (pluginOptions.value.datatable?.[k as any] !== undefined) {
+      return pluginOptions.value.datatable?.[k as any] as any
+    }
+    return props[k]
+  })
+  const skipSlots = ['default', 'top', 'title']
+  const getSlots = computed(() => {
+    const keys = Object.keys(slots || {})
+    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)
+    }
+  }
+
+  return {
+    imageDialog,
+    onRowContextmenu,
+    getRowsPerPageOptions,
+    getShowSelection,
+    defaultTopBtnProps,
+    getProp,
+    getSlots,
+    onClickTopMenu,
+    getRows,
+    defaultItem,
+    getTableTitle,
+    serviceName,
+    exportToBlob,
+    filterDialogModel,
+    showDialogModel,
+    formDialogModel,
+    isUpdateDialog,
+    dialogItem,
+    dialogItemIndex,
+    dialogErrors,
+    resetDialogs,
+    getHeaders,
+    visibleHeaders,
+    contextmenu,
+    selected,
+    onUpdateSelectedItems,
+    meta,
+    pagination,
+    search,
+    searchColumnsRef,
+    searchPlaceholder,
+    loading,
+    filterForm,
+    tempFilterForm,
+    hasAction,
+    fullscreen,
+    hasAddBtn,
+    hasUpdateBtn,
+    hasCloneBtn,
+    hasShowBtn,
+    hasDestroyBtn,
+    hasFilterDialog,
+    isUpdateMode,
+    formMode,
+    isSingleSelectedItem,
+    firstSelectedItem,
+    hasSelectedItem,
+    getShowTitle,
+    getFormTitle,
+    isGrid,
+    getMythApiServicesSchema,
+    updateSelectedItems,
+    onScroll,
+    loadMore,
+    refreshNoUpdate,
+    refresh,
+    getRequestWith,
+    getDatatableParams,
+    fetchDatatableItems,
+    exportData,
+    openDialogTimeout,
+    openFilterDialog,
+    saveFilterDialog,
+    closeFilterDialog,
+    onRemoveFilter,
+    updateFilterOptions,
+    openShowDialogNoIndex,
+    openShowDialog,
+    closeShowDialog,
+    openUpdateDialogNoIndex,
+    openUpdateDialog,
+    openCreateDialog,
+    closeFormDialog,
+    ignoreKeysProps,
+    updateDatatableItem,
+    tableOptions,
+    removeDtItem,
+    onDeleteItem,
+    deleteSelectionItem,
+    logoutDatatable,
+    contextmenuItems,
+    datatableItemsScope,
+    onCloneItem,
+    openImageDialog,
+    closeImageDialog
+  }
+}