lkt-item-crud 2.0.11 → 2.0.13

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

@@ -1,12 +1,4 @@
-import { SetupContext } from 'vue';
-import { HTTPResponse } from 'lkt-http-client';
 import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
-import ButtonNav from '../components/ButtonNav.vue';
-declare const slots: SetupContext['slots'];
-declare const isLoading: import("vue").Ref<boolean, boolean>, item: import("vue").Ref<LktObject, LktObject>, perms: import("vue").Ref<string[], string[]>, editMode: import("vue").Ref<boolean, boolean>, httpSuccessRead: import("vue").Ref<boolean, boolean>, showStoreMessage: import("vue").Ref<boolean, boolean>, httpStatus: import("vue").Ref<number, number>, dataChanged: import("vue").Ref<boolean, boolean>, createMode: import("vue").Ref<boolean, boolean>, itemBeingEdited: import("vue").Ref<boolean, boolean>, buttonNav: import("vue").Ref<null, null>, canUpdate: import("vue").ComputedRef<boolean>, canDrop: import("vue").ComputedRef<boolean>, canSwitchEditMode: import("vue").ComputedRef<boolean>;
-declare const onCreate: ($event: PointerEvent, r: HTTPResponse) => void, onUpdate: ($event: PointerEvent, r: HTTPResponse) => void, onDrop: ($event: PointerEvent, r: HTTPResponse) => void;
-declare const computedTitle: import("vue").ComputedRef<string>, displayHeader: import("vue").ComputedRef<boolean>, computedInsideModal: import("vue").ComputedRef<boolean>, computedContainerTag: import("vue").ComputedRef<"lkt-modal" | "section">, computedContainerAttrs: import("vue").ComputedRef<{}>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {
     item: LktObject;
     loading: boolean;
@@ -29,8 +21,9 @@ declare var __VLS_6: {
     canUpdate: boolean;
     canDrop: boolean;
     itemBeingEdited: boolean;
+    perms: string[];
 }, __VLS_54: {}, __VLS_56: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     'pre-title'?: (props: typeof __VLS_6) => any;
 } & {
     'post-title'?: (props: typeof __VLS_8) => any;
@@ -44,82 +37,12 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     'prev-buttons-ever'?: (props: typeof __VLS_54) => any;
 } & {
     'prev-buttons'?: (props: typeof __VLS_56) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
-    ItemCrudButtonNavPosition: typeof ItemCrudButtonNavPosition;
-    NotificationType: typeof NotificationType;
-    ButtonNav: typeof ButtonNav;
-    slots: typeof slots;
-    isLoading: typeof isLoading;
-    item: typeof item;
-    perms: typeof perms;
-    editMode: typeof editMode;
-    httpSuccessRead: typeof httpSuccessRead;
-    showStoreMessage: typeof showStoreMessage;
-    httpStatus: typeof httpStatus;
-    dataChanged: typeof dataChanged;
-    createMode: typeof createMode;
-    itemBeingEdited: typeof itemBeingEdited;
-    buttonNav: typeof buttonNav;
-    canUpdate: typeof canUpdate;
-    canDrop: typeof canDrop;
-    canSwitchEditMode: typeof canSwitchEditMode;
-    onCreate: typeof onCreate;
-    onUpdate: typeof onUpdate;
-    onDrop: typeof onDrop;
-    computedTitle: typeof computedTitle;
-    displayHeader: typeof displayHeader;
-    computedInsideModal: typeof computedInsideModal;
-    computedContainerTag: typeof computedContainerTag;
-    computedContainerAttrs: typeof computedContainerAttrs;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (...args: any[]) => void;
-    drop: (...args: any[]) => void;
-    update: (...args: any[]) => void;
-    create: (...args: any[]) => void;
-    read: (...args: any[]) => void;
-    perms: (...args: any[]) => void;
-    "update:editing": (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    "before-save": (...args: any[]) => void;
-    "modified-data": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
-    onError?: ((...args: any[]) => any) | undefined;
-    onDrop?: ((...args: any[]) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
-    onCreate?: ((...args: any[]) => any) | undefined;
-    onRead?: ((...args: any[]) => any) | undefined;
-    onPerms?: ((...args: any[]) => any) | undefined;
-    "onUpdate:editing"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onBefore-save"?: ((...args: any[]) => any) | undefined;
-    "onModified-data"?: ((...args: any[]) => any) | undefined;
-}>, {
-    view: ItemCrudView;
-    title: string;
-    mode: ItemCrudMode;
-    modelValue: LktObject;
-    editing: boolean;
-    perms: import("lkt-vue-kernel").ValidTablePermission[];
-    editModeButton: import("lkt-vue-kernel").ButtonConfig | false;
-    dropButton: import("lkt-vue-kernel").ButtonConfig | false;
-    createButton: import("lkt-vue-kernel").ButtonConfig | false;
-    updateButton: import("lkt-vue-kernel").ButtonConfig | false;
-    groupButton: import("lkt-vue-kernel").ButtonConfig | boolean;
-    buttonNavPosition: ItemCrudButtonNavPosition;
-    buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
-    modalConfig: import("lkt-vue-kernel").ModalConfig;
-    saveConfig: import("lkt-vue-kernel").SaveConfig;
-    dataStateConfig: import("lkt-data-state").DataStateConfig;
-    readResource: string;
-    readData: LktObject;
-    beforeEmitUpdate: Function;
-    notificationType: NotificationType;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;
     doRefresh: () => Promise<void>;
     doSave: () => void;
+    turnStoredDataIntoOriginal: () => void;
     hasModifiedData: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (...args: any[]) => void;

package/package.json

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

package/src/components/ButtonNav.vue

@@ -154,18 +154,15 @@
         showSaveButton = computed(() => {
             if (props.mode === ItemCrudMode.Create && props.createButton === false) return false;
             if (props.mode === ItemCrudMode.Update && props.updateButton === false) return false;
-            if (props.dataChanged) {
-                return ableToUpdate.value || ableToCreate.value;
-            }
             if (isLoading.value) return false;
 
-            if (props.mode === ItemCrudMode.Create) {
-                return true;
-            }
+            // if (props.dataChanged) {
+            //     return ableToUpdate.value || ableToCreate.value;
+            // }
 
-            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) {
-                return false;
-            }
+            // if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) {
+            //     return false;
+            // }
 
             return props.editing
                 && props.httpSuccessRead;
@@ -181,7 +178,7 @@
                 && props.httpSuccessRead;
         }),
         showButtons = computed(() => {
-            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Always && (ableToUpdate.value || ableToCreate.value || ableToDrop.value)) return true;
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Always) return true;
             if (slots['prev-buttons-ever']) return true;
             if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) return false;
             return showSaveButton.value || showDropButton.value || showSwitchButton.value;
@@ -224,7 +221,7 @@
 
                     <lkt-button
                         ref="saveButtonRef"
-                        v-if="mode === ItemCrudMode.Update && showSaveButton"
+                        v-show="mode === ItemCrudMode.Update && showSaveButton"
                         v-bind="safeUpdateButton"
                         :disabled="!ableToUpdate"
                         @loading="onButtonLoading"
@@ -239,7 +236,7 @@
 
                     <lkt-button
                         ref="saveButtonRef"
-                        v-else-if="mode === ItemCrudMode.Create && showSaveButton"
+                        v-show="mode === ItemCrudMode.Create && showSaveButton"
                         v-bind="safeCreateButton"
                         :disabled="!ableToCreate"
                         @loading="onButtonLoading"
@@ -254,8 +251,7 @@
 
                     <lkt-button
                         ref="dropButtonRef"
-                        v-show="showDropButton"
-                        v-if="mode !== ItemCrudMode.Create"
+                        v-show="showDropButton && mode !== ItemCrudMode.Create"
                         v-bind="safeDropButton"
                         :disabled="!ableToDrop"
                         @loading="onButtonLoading"
@@ -295,7 +291,7 @@
 
             <lkt-button
                 ref="saveButtonRef"
-                v-if="mode === ItemCrudMode.Update && showSaveButton"
+                v-show="mode === ItemCrudMode.Update && showSaveButton"
                 v-bind="safeUpdateButton"
                 :disabled="!ableToUpdate"
                 @loading="onButtonLoading"
@@ -310,7 +306,7 @@
 
             <lkt-button
                 ref="saveButtonRef"
-                v-else-if="mode === ItemCrudMode.Create && showSaveButton"
+                v-show="mode === ItemCrudMode.Create && showSaveButton"
                 v-bind="safeCreateButton"
                 :disabled="!ableToCreate"
                 @loading="onButtonLoading"
@@ -320,13 +316,12 @@
                       :edit-mode="isEditing"
                       :is-create="true"
                       :can-update="canUpdate"
-                      :can-drop="canDrop" />
+                      :can-drop="false" />
             </lkt-button>
 
             <lkt-button
                 ref="dropButtonRef"
-                v-show="showDropButton"
-                v-if="mode !== ItemCrudMode.Create"
+                v-show="showDropButton && mode !== ItemCrudMode.Create"
                 v-bind="safeDropButton"
                 :disabled="!ableToDrop"
                 @loading="onButtonLoading"

package/src/lib-components/LktItemCrud.vue

@@ -17,7 +17,7 @@
         ToastConfig,
         ToastPositionX,
     } from 'lkt-vue-kernel';
-    import { closeModal } from 'lkt-modal';
+    import { closeModal, updateModalKey } from 'lkt-modal';
     import { __ } from 'lkt-i18n';
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
@@ -61,6 +61,10 @@
         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));
 
+    watch(() => props.mode, (v) => {
+        createMode.value = v === ItemCrudMode.Create;
+    })
+
     const fetchItem = async () => {
         debug('fetchItem');
         isLoading.value = true;
@@ -171,13 +175,20 @@
             }
             return true;
         },
-        doAutoReloadId = (r: HTTPResponse) => {
-            if (!computedInsideModal.value && r.autoReloadId) {
+        doAutoReloadId = (r?: HTTPResponse) => {
+            debug('doAutoReloadId -> enter: ', r);
+            if (typeof r !== 'undefined' && r.autoReloadId) {
                 debug('doAutoReloadId -> autoReloadId detected: ', r.autoReloadId);
-                props.readData['id'] = r.autoReloadId;
-                debug('doAutoReloadId -> turning off create mode');
-                createMode.value = false;
-                fetchItem();
+                if (!computedInsideModal.value) {
+                    debug('doAutoReloadId -> outsideModal');
+                    props.readData['id'] = r.autoReloadId;
+                    debug('doAutoReloadId -> turning off create mode');
+                    createMode.value = false;
+                    fetchItem();
+                } else {
+                    debug('doAutoReloadId -> insideModal: ', props);
+                    updateModalKey(props.modalConfig.modalName, props.modalConfig.modalKey, r.autoReloadId);
+                }
             }
         },
         onCreate = ($event: PointerEvent, r: HTTPResponse) => {
@@ -205,6 +216,7 @@
                 });
             }
             doAutoReloadId(r);
+            debug('onCreate -> beforeEmitCreate');
             emit('create', r);
         },
         onUpdate = ($event: PointerEvent, r: HTTPResponse) => {
@@ -274,6 +286,9 @@
         doDrop,
         doRefresh: fetchItem,
         doSave,
+        turnStoredDataIntoOriginal: () => {
+            dataState.value.increment(item.value).turnStoredIntoOriginal();
+        },
         hasModifiedData: () => dataState.value.changed(),
     });
 
@@ -393,11 +408,16 @@
                         quick
                         can-close
                         v-on:close="showStoreMessage = false" />
-                    <slot name="item" :item="item" :loading="isLoading" :edit-mode="editMode"
+                    <slot name="item"
+                          :item="item"
+                          :loading="isLoading"
+                          :edit-mode="editMode"
                           :is-create="createMode"
                           :can-update="canUpdate"
                           :can-drop="canDrop"
-                          :item-being-edited="itemBeingEdited"></slot>
+                          :item-being-edited="itemBeingEdited"
+                          :perms="perms"
+                    />
                 </div>
                 <lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
             </div>
@@ -422,6 +442,7 @@
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"