lkt-item-crud 2.0.16 → 2.0.18

package/dist/lib-components/LktItemCrud.vue.d.ts

@@ -65,6 +65,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     perms: (...args: any[]) => void;
     "update:editing": (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    "update:perms": (...args: any[]) => void;
+    "update:customData": (...args: any[]) => void;
     "before-save": (...args: any[]) => void;
     "modified-data": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
@@ -76,6 +78,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     onPerms?: ((...args: any[]) => any) | undefined;
     "onUpdate:editing"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:perms"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:customData"?: ((...args: any[]) => any) | undefined;
     "onBefore-save"?: ((...args: any[]) => any) | undefined;
     "onModified-data"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -83,8 +87,13 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     title: string;
     mode: ItemCrudMode;
     modelValue: LktObject;
+    events: {
+        httpStart?: undefined | Function;
+        httpEnd?: (data: import("lkt-vue-kernel").ClickEventArgs) => void | undefined;
+    };
     editing: boolean;
     perms: import("lkt-vue-kernel").ValidTablePermission[];
+    customData: LktObject;
     editModeButton: ButtonConfig | false;
     dropButton: ButtonConfig | false;
     createButton: ButtonConfig | false;
@@ -101,6 +110,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     beforeEmitUpdate: Function;
     notificationType: NotificationType;
     enabledSaveWithoutChanges: boolean;
+    redirectOnCreate: string | ((id: number | string) => string);
+    redirectOnDrop: string | (() => string);
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/lib-components/LktItemCrud.vue

@@ -23,6 +23,7 @@
     import { __ } from 'lkt-i18n';
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
+    import { useRouter } from 'vue-router';
 
     // defineOptions({
     //     inheritAttrs: false
@@ -30,11 +31,15 @@
 
     const props = withDefaults(defineProps<ItemCrudConfig>(), getDefaultValues(ItemCrud));
 
+    const router = useRouter();
+
     const slots: SetupContext['slots'] = useSlots();
 
     const emit = defineEmits([
         'update:modelValue',
         'update:editing',
+        'update:perms',
+        'update:customData',
         'read',
         'create',
         'update',
@@ -47,7 +52,8 @@
 
     const isLoading = ref(true),
         item = ref(props.modelValue),
-        perms = ref(props.perms),
+        custom = ref(props.customData),
+        permissions = ref(props.perms),
         editMode = ref(props.editing),
         httpSuccessRead = ref(false),
         showStoreMessage = ref(false),
@@ -59,14 +65,20 @@
         itemBeingEdited = ref(false),
         itemCreated = ref(false),
         buttonNav = ref(null),
-        canUpdate = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes(TablePermission.Update)),
-        canDrop = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes(TablePermission.Drop)),
-        canSwitchEditMode = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes(TablePermission.SwitchEditMode));
+        canUpdate = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.Update)),
+        canDrop = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.Drop)),
+        canSwitchEditMode = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.SwitchEditMode));
 
     watch(() => props.mode, (v) => {
         createMode.value = v === ItemCrudMode.Create;
     })
 
+    watch(() => props.perms, (v) => {permissions.value = v});
+    watch(permissions, (v) => {emit('update:perms', v)});
+
+    watch(() => props.customData, (v) => {custom.value = v});
+    watch(custom, (v) => {emit('update:customData', v)});
+
     const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
         safeUpdateButton = ref(ensureButtonConfig(props.updateButton, LktSettings.defaultUpdateButton)),
         safeDropButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
@@ -95,23 +107,40 @@
         httpStatus.value = -1;
         showStoreMessage.value = false;
 
+        if (typeof props.events?.httpStart === 'function') {
+            props.events.httpStart();
+        }
+
         try {
-            const r = await httpCall(props.readResource, props.readData);
+            const r: HTTPResponse = await httpCall(props.readResource, props.readData);
             debug('fetchItem -> response', r);
             isLoading.value = false;
             httpStatus.value = r.httpStatus;
+            custom.value = r.custom;
             if (!r.success) {
                 httpSuccessRead.value = false;
                 httpStatus.value = r.httpStatus;
+
+                if (typeof props.events?.httpEnd === 'function') {
+                    props.events.httpEnd({
+                        httpResponse: r,
+                    });
+                }
                 emit('error', r.httpStatus);
                 return;
             }
             httpSuccessRead.value = true;
             item.value = r.data;
-            perms.value = r.perms;
+            permissions.value = r.perms;
             dataState.value.increment(item.value).turnStoredIntoOriginal();
             dataChanged.value = dataState.value.changed();
             readDataState.value.turnStoredIntoOriginal();
+
+            if (typeof props.events?.httpEnd === 'function') {
+                props.events.httpEnd({
+                    httpResponse: r,
+                });
+            }
             emit('read', r);
 
         } catch (e) {
@@ -145,7 +174,7 @@
         nextTick(() => itemBeingEdited.value = false);
     }, { deep: true });
 
-    watch(perms, () => emit('perms', perms.value));
+    watch(permissions, () => emit('perms', permissions.value));
     watch(dataChanged, (v) => {
         emit('modified-data', v);
     });
@@ -199,11 +228,16 @@
             }
             return true;
         },
-        doAutoReloadId = (r?: HTTPResponse) => {
+        doAutoReloadId = (r?: HTTPResponse, redirect?: string|Function) => {
             debug('doAutoReloadId -> enter: ', r);
             if (typeof r !== 'undefined' && r.autoReloadId) {
                 debug('doAutoReloadId -> autoReloadId detected: ', r.autoReloadId);
-                if (!computedInsideModal.value) {
+                if (typeof redirect !== 'undefined') {
+                    let route = redirect;
+                    if (typeof redirect === 'function') route = redirect(r.autoReloadId);
+                    router.push(route);
+                }
+                else if (!computedInsideModal.value) {
                     debug('doAutoReloadId -> outsideModal');
                     props.readData['id'] = r.autoReloadId;
                     debug('doAutoReloadId -> turning off create mode');
@@ -239,7 +273,7 @@
                     positionX: ToastPositionX.Right,
                 });
             }
-            doAutoReloadId(r);
+            doAutoReloadId(r, props.redirectOnCreate);
             debug('onCreate -> beforeEmitCreate');
             emit('create', r);
         },
@@ -296,6 +330,12 @@
                 //@ts-ignore
                 closeModal(props.modalConfig.modalName, props.modalConfig.modalKey);
             }
+
+            if (typeof props.redirectOnDrop !== 'undefined') {
+                let route = props.redirectOnDrop;
+                if (typeof props.redirectOnDrop === 'function') route = props.redirectOnDrop();
+                router.push(route);
+            }
         },
         doSave = () => {
             // @ts-ignore
@@ -353,7 +393,9 @@
             if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
 
-            if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled(item.value);
+            if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled({
+                prop: item.value
+            });
             if (typeof safeUpdateButton.value?.disabled === 'boolean') return !safeUpdateButton.value.disabled;
 
             return true;
@@ -362,7 +404,9 @@
             if (props.mode !== ItemCrudMode.Create) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
 
-            if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled(item.value);
+            if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled({
+                prop: item.value
+            });
             if (typeof safeCreateButton.value?.disabled === 'boolean') return !safeCreateButton.value.disabled;
 
             return true;
@@ -371,7 +415,9 @@
 
             if (!canDrop.value) return false;
 
-            if (typeof safeDropButton.value?.disabled === 'function') return !safeDropButton.value.disabled(item.value);
+            if (typeof safeDropButton.value?.disabled === 'function') return !safeDropButton.value.disabled({
+                prop: item.value
+            });
             if (typeof safeDropButton.value?.disabled === 'boolean') return !safeDropButton.value.disabled;
 
             return true;
@@ -428,7 +474,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -485,7 +531,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -523,7 +569,7 @@
                           :can-update="canUpdate"
                           :can-drop="canDrop"
                           :item-being-edited="itemBeingEdited"
-                          :perms="perms"
+                          :perms="permissions"
                     />
                 </div>
                 <lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
@@ -554,7 +600,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"