@ramathibodi/nuxt-commons 0.1.49 → 0.1.50

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.49",
+  "version": "0.1.50",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -27,7 +27,7 @@ const module = defineNuxtModule({
       src: resolver.resolve("runtime/plugins/dialogManager"),
       mode: "client"
     });
-    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager"];
+    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission"];
     for (const file of typeFiles) {
       addTypeTemplate({
         src: resolver.resolve(`runtime/types/${file}.d.ts`),

package/dist/runtime/components/form/Dialog.vue

@@ -13,6 +13,7 @@ interface Props {
   cancelCaption?: string
   closeCaption?: string
   saveAndStay?: boolean
+  readonly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   cancelCaption: 'ยกเลิก',
   closeCaption: 'ปิด',
   saveAndStay: false,
+  readonly: false,
 })
 
 const isShowing = defineModel<boolean>({ default: false })
@@ -125,6 +127,7 @@ watch(() => isShowing.value, (newValue) => {
         <form-pad
           ref="formPadRef"
           v-model="formData"
+          :readonly="readonly"
           isolated
         >
           <template #default="slotData">
@@ -145,6 +148,7 @@ watch(() => isShowing.value, (newValue) => {
               :loading="isSaving"
               :disabled="!isDataChange"
               @click="save"
+              v-if="!readonly"
           >
             {{ saveCaption }}
           </VBtn>

package/dist/runtime/components/master/Autocomplete.vue

@@ -102,7 +102,7 @@ const computedSortBy = computed(()=>{
     >
       <v-list-item
           v-bind="props"
-          :title="(showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)"
+          :title="item.title"
       />
     </template>
   </model-autocomplete>

package/dist/runtime/components/model/Autocomplete.vue

@@ -97,11 +97,16 @@ watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
 const computedItems = computed(()=>{
   let sortByField = (!props.sortBy || typeof props.sortBy === "string") ?  [props.sortBy || ((props.showCode) ? props.itemValue : props.itemTitle)] : props.sortBy
 
-  if (props.fuzzy && !isEmpty(searchData.value)) {
-    return items.value
-  } else {
-    return sortBy(items.value, sortByField)
-  }
+  const baseItems = props.fuzzy && !isEmpty(searchData.value)
+      ? items.value
+      : sortBy(items.value, sortByField)
+
+  return baseItems.map(item => ({
+    ...item,
+    [props.itemTitle]: props.showCode
+        ? `${item[props.itemValue]}-${item[props.itemTitle]}`
+        : item[props.itemTitle]
+  }))
 })
 </script>
 
@@ -126,14 +131,8 @@ const computedItems = computed(()=>{
           v-bind="((slotData || {}) as object)"
       />
     </template>
-    <template
-        v-if="!$slots.item"
-        #item="{ props, item }"
-    >
-      <v-list-item
-          v-bind="props"
-          :title="(showCode ? item.value+'-' : '')+item.title"
-      />
+    <template v-if="!$slots.item" #item="{ props, item }">
+      <v-list-item v-bind="props" :title="(item as Record<string, any>)[String(props.itemTitle)]" />
     </template>
     <template
         v-if="isErrorLoading"

package/dist/runtime/components/model/Table.vue

@@ -4,8 +4,10 @@ import {VDataTable} from 'vuetify/components/VDataTable'
 import {clone} from 'lodash-es'
 import {useGraphqlModel} from '../../composables/graphqlModel'
 import {useDialog} from "../../composables/dialog"
+import {useUserPermission} from "../../composables/userPermission"
 import type {GraphqlModelProps} from '../../composables/graphqlModel'
 import type {FormDialogCallback} from "../../types/formDialog";
+import {type AuthenticationState, useState} from "#imports";
 
 defineOptions({
   inheritAttrs: false,
@@ -24,6 +26,8 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   search?: string
   saveAndStay?: boolean
   stringFields?: Array<string>
+  onlyOwnerEdit?: boolean
+  onlyOwnerOverridePermission?: string | string[]
 }
 
 const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
@@ -39,6 +43,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   modelBy: undefined,
   fields: () => [],
   stringFields: ()=>[],
+  onlyOwnerEdit: false,
 })
 
 const attrs = useAttrs()
@@ -48,8 +53,15 @@ const plainAttrs = computed(() => {
   return returnAttrs
 })
 
+const authenState = useState<AuthenticationState>("authentication")
+const currentUsername = computed(()=>{
+  let userProfile =  authenState.value?.userProfile as {username: string}
+  return userProfile?.username ?? ""
+})
+
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 const isDialogOpen = ref<boolean>(false)
+const isDialogReadonly = ref<boolean>(false)
 
 const { items, itemsLength,
   search,setSearch,
@@ -59,6 +71,15 @@ const { items, itemsLength,
   isLoading } = useGraphqlModel(props)
 
 function openDialog(item?: object) {
+  isDialogReadonly.value = false
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+function openDialogReadonly(item?: object) {
+  isDialogReadonly.value = true
   currentItem.value = item
   nextTick(() => {
     isDialogOpen.value = true
@@ -70,7 +91,16 @@ async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialo
   if (confirm) deleteItem(item,callback)
 }
 
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+const canEditRow = function (item: Record<string, any>) {
+  if (props.onlyOwnerEdit) {
+    if (item?.userstampField?.createdBy && item?.userstampField?.createdBy==currentUsername.value) return true
+    if (!!props.onlyOwnerOverridePermission && useUserPermission().check(props.onlyOwnerOverridePermission)) return true
+    return !item?.userstampField?.createdBy
+  }
+  return true
+}
+
+const operation = ref({ openDialog, openDialogReadonly, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, canEditRow, onlyOwnerEdit: props.onlyOwnerEdit, onlyOwnerOverridePermission: props.onlyOwnerOverridePermission })
 
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy)
@@ -188,14 +218,21 @@ defineExpose({ reload,operation })
         #item.action="{ item }"
       >
         <v-btn
-          v-if="canUpdate"
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
+        />
+        <v-btn
+          v-if="canUpdate && canEditRow(item)"
           variant="flat"
           density="compact"
           icon="mdi mdi-note-edit"
           @click="openDialog(item)"
         />
         <v-btn
-          v-if="canDelete"
+          v-if="canDelete && canEditRow(item)"
           variant="flat"
           density="compact"
           icon="mdi mdi-delete"
@@ -253,22 +290,29 @@ defineExpose({ reload,operation })
       @create="createItem"
       @update="updateItem"
       :saveAndStay="saveAndStay"
+      :readonly="isDialogReadonly"
     >
       <template #default="slotData">
         <slot
           name="form"
+          :tableItems="items"
+          :tableOperation="operation"
           v-bind="slotData"
         />
       </template>
       <template #title="slotData">
         <slot
             name="formTitle"
+            :tableItems="items"
+            :tableOperation="operation"
             v-bind="slotData"
         />
       </template>
       <template #action="slotData">
         <slot
             name="formAction"
+            :tableItems="items"
+            :tableOperation="operation"
             v-bind="slotData"
         />
       </template>

package/dist/runtime/composables/userPermission.d.ts

@@ -0,0 +1 @@
+export declare const useUserPermission: () => unknown;

package/dist/runtime/composables/userPermission.js

@@ -0,0 +1,5 @@
+import { useNuxtApp } from "#app";
+export const useUserPermission = () => {
+  const { $permission } = useNuxtApp();
+  return $permission;
+};

package/dist/runtime/plugins/permission.js

@@ -1,21 +1,42 @@
 import { defineNuxtPlugin } from "nuxt/app";
 import { useAuthentication } from "#imports";
-export default defineNuxtPlugin(async (nuxtApp) => {
-  function permission(permissionId) {
-    if (!permissionId || useAuthentication()?.hasPermission(permissionId) === void 0) return true;
-    return useAuthentication()?.hasPermission(permissionId);
+export default defineNuxtPlugin((nuxtApp) => {
+  function normalize(input) {
+    if (!input) return [];
+    if (Array.isArray(input)) return input;
+    return [input];
+  }
+  function isBlank(input) {
+    if (!input) return true;
+    const arr = normalize(input);
+    return arr.length === 0 || arr.every((v) => v.trim() === "");
+  }
+  function check(permissionIds) {
+    if (isBlank(permissionIds)) return true;
+    const auth = useAuthentication();
+    const perms = normalize(permissionIds);
+    return perms.some((id) => auth?.hasPermission(id));
+  }
+  function checkAll(permissionIds) {
+    if (isBlank(permissionIds)) return true;
+    const auth = useAuthentication();
+    const perms = normalize(permissionIds);
+    return perms.every((id) => auth?.hasPermission(id));
   }
-  nuxtApp.vueApp.config.globalProperties.$permission = permission;
   nuxtApp.vueApp.directive("permission", (el, binding, vnode) => {
-    if (!permission(binding.value)) {
-      if (vnode) {
-        if (vnode.um?.length) {
-          vnode.um.forEach((um) => {
-            um();
-          });
-        }
-        if (el.parentElement) el.parentElement.removeChild(el);
-      }
+    if (!check(binding.value)) {
+      vnode?.um?.forEach?.((um) => um());
+      el.parentElement?.removeChild(el);
     }
   });
+  nuxtApp.vueApp.directive("permission-all", (el, binding, vnode) => {
+    if (!checkAll(binding.value)) {
+      vnode?.um?.forEach?.((um) => um());
+      el.parentElement?.removeChild(el);
+    }
+  });
+  nuxtApp.provide("permission", {
+    check,
+    checkAll
+  });
 });

package/dist/runtime/types/permission.d.ts

@@ -0,0 +1,14 @@
+export interface PermissionPlugin {
+    check: (permission: string | string[] | null | undefined) => boolean
+    checkAll: (permission: string | string[] | null | undefined) => boolean
+}
+
+declare module '#app' {
+    interface NuxtApp {
+        $permission: PermissionPlugin
+    }
+
+    interface RuntimeNuxtApp {
+        $permission: PermissionPlugin
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",