lkt-item-crud 2.0.17 → 2.0.19

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

@@ -21,7 +21,7 @@ declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_48: {
+}, __VLS_52: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -30,7 +30,7 @@ declare var __VLS_17: {
     canDrop: boolean;
     itemBeingEdited: boolean;
     perms: string[];
-}, __VLS_69: {}, __VLS_71: {};
+}, __VLS_73: {}, __VLS_75: {};
 type __VLS_Slots = {} & {
     'prev-buttons-ever'?: (props: typeof __VLS_17) => any;
 } & {
@@ -44,11 +44,11 @@ type __VLS_Slots = {} & {
 } & {
     'prev-buttons'?: (props: typeof __VLS_38) => any;
 } & {
-    item?: (props: typeof __VLS_48) => any;
+    item?: (props: typeof __VLS_52) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_69) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_73) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_71) => any;
+    'prev-buttons'?: (props: typeof __VLS_75) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;
@@ -65,6 +65,9 @@ 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;
+    "update:form": (...args: any[]) => void;
     "before-save": (...args: any[]) => void;
     "modified-data": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
@@ -76,15 +79,24 @@ 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;
+    "onUpdate:form"?: ((...args: any[]) => any) | undefined;
     "onBefore-save"?: ((...args: any[]) => any) | undefined;
     "onModified-data"?: ((...args: any[]) => any) | undefined;
 }>, {
     view: ItemCrudView;
+    form: import("lkt-vue-kernel").FormConfig;
     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;

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -38,6 +38,9 @@
     const emit = defineEmits([
         'update:modelValue',
         'update:editing',
+        'update:perms',
+        'update:customData',
+        'update:form',
         'read',
         'create',
         'update',
@@ -50,8 +53,10 @@
 
     const isLoading = ref(true),
         item = ref(props.modelValue),
-        perms = ref(props.perms),
+        custom = ref(props.customData),
+        permissions = ref(props.perms),
         editMode = ref(props.editing),
+        validForm = ref(false),
         httpSuccessRead = ref(false),
         showStoreMessage = ref(false),
         httpStatus = ref(200),
@@ -62,14 +67,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)),
@@ -98,23 +109,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) {
@@ -148,7 +176,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);
     });
@@ -366,8 +394,12 @@
         ableToUpdate = computed(() => {
             if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
+            console.log('ableToUpdate', validForm.value);
+            if (computedHasForm.value && !validForm.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;
@@ -375,8 +407,11 @@
         ableToCreate = computed(() => {
             if (props.mode !== ItemCrudMode.Create) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
+            if (computedHasForm.value && !validForm.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;
@@ -385,7 +420,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;
@@ -408,6 +445,9 @@
                 };
             }
             return {};
+        }),
+        computedHasForm = computed(() => {
+            return typeof props.form === 'object' && Object.keys(props.form).length > 0;
         })
 </script>
 
@@ -442,7 +482,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -499,7 +539,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -529,16 +569,26 @@
                         quick
                         can-close
                         v-on:close="showStoreMessage = false" />
-                    <slot name="item"
-                          :item="item"
-                          :loading="isLoading"
-                          :edit-mode="editMode"
-                          :is-create="createMode"
-                          :can-update="canUpdate"
-                          :can-drop="canDrop"
-                          :item-being-edited="itemBeingEdited"
-                          :perms="perms"
+
+                    <lkt-form
+                        v-if="computedHasForm"
+                        v-model="item"
+                        v-model:form="form"
+                        v-model:valid="validForm"
                     />
+
+                    <template v-else>
+                        <slot name="item"
+                              :item="item"
+                              :loading="isLoading"
+                              :edit-mode="editMode"
+                              :is-create="createMode"
+                              :can-update="canUpdate"
+                              :can-drop="canDrop"
+                              :item-being-edited="itemBeingEdited"
+                              :perms="permissions"
+                        />
+                    </template>
                 </div>
                 <lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
             </div>
@@ -568,7 +618,7 @@
                 :able-to-create="ableToCreate"
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
-                :perms="perms"
+                :perms="permissions"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"