lkt-item-crud 2.0.19 → 2.0.21

package/src/lib-components/LktItemCrud.vue

@@ -5,7 +5,7 @@
     import { debug } from '../functions/debug';
     import {
         ButtonConfig,
-        ensureButtonConfig,
+        ensureButtonConfig, FormUiConfig,
         getDefaultValues,
         ItemCrud,
         ItemCrudButtonNavPosition,
@@ -13,7 +13,9 @@
         ItemCrudMode,
         ItemCrudView,
         LktObject,
-        LktSettings, ModalConfig,
+        LktSettings,
+        ModalConfig,
+        ModificationView,
         NotificationType,
         TablePermission,
         ToastConfig,
@@ -24,6 +26,7 @@
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
     import { useRouter } from 'vue-router';
+    import { getModificationsDataState } from '../functions/modifications-functions';
 
     // defineOptions({
     //     inheritAttrs: false
@@ -40,7 +43,8 @@
         'update:editing',
         'update:perms',
         'update:customData',
-        'update:form',
+        'update:modifications',
+        'update:modificationView',
         'read',
         'create',
         'update',
@@ -53,6 +57,7 @@
 
     const isLoading = ref(true),
         item = ref(props.modelValue),
+        itemModifications = ref(props.modifications),
         custom = ref(props.customData),
         permissions = ref(props.perms),
         editMode = ref(props.editing),
@@ -61,6 +66,7 @@
         showStoreMessage = ref(false),
         httpStatus = ref(200),
         dataState = ref(new DataState(item.value, props.dataStateConfig)),
+        modificationsDataState = ref(new DataState(itemModifications.value, props.dataStateConfig)),
         dataChanged = ref(false),
         readDataState = ref(new DataState(props.readData)),
         createMode = ref(props.mode === ItemCrudMode.Create),
@@ -71,6 +77,16 @@
         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));
 
+    const pickedModificationView = ref(props.visibleView);
+
+    watch(() => props.visibleView, (v) => {
+        pickedModificationView.value = v
+    });
+
+    watch(pickedModificationView, (v) => {
+        emit('update:modificationView', v);
+    })
+
     watch(() => props.mode, (v) => {
         createMode.value = v === ItemCrudMode.Create;
     })
@@ -81,6 +97,21 @@
     watch(() => props.customData, (v) => {custom.value = v});
     watch(custom, (v) => {emit('update:customData', v)});
 
+    watch(() => props.modifications, (v) => {
+        modificationsDataState.value.increment(v);
+        itemModifications.value = v
+    }, {deep: true});
+
+    watch(itemModifications, (v) => {
+        resetFormDifferencesChecker();
+        modificationsDataState.value.increment(v);
+
+        if (computedEditableView.value === ModificationView.Modifications) {
+            dataChanged.value = modificationsDataState.value.changed();
+        }
+        emit('update:modifications', v)
+    }, {deep: true});
+
     const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
         safeUpdateButton = ref(ensureButtonConfig(props.updateButton, LktSettings.defaultUpdateButton)),
         safeDropButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
@@ -133,11 +164,17 @@
             }
             httpSuccessRead.value = true;
             item.value = r.data;
+            itemModifications.value = Array.isArray(r.modifications) ? {} : r.modifications;
             permissions.value = r.perms;
             dataState.value.increment(item.value).turnStoredIntoOriginal();
+            modificationsDataState.value.increment(itemModifications.value).turnStoredIntoOriginal();
             dataChanged.value = dataState.value.changed();
             readDataState.value.turnStoredIntoOriginal();
 
+            if (Object.keys(itemModifications.value).length > 0) {
+                pickedModificationView.value = ModificationView.Modifications;
+            }
+
             if (typeof props.events?.httpEnd === 'function') {
                 props.events.httpEnd({
                     httpResponse: r,
@@ -169,10 +206,13 @@
             debug('item updated -> override with: ', override);
             if (typeof override === 'object') item.value = override;
         }
+        resetFormDifferencesChecker();
         emit('update:modelValue', item.value);
         debug('item updated -> update dataState');
         dataState.value.increment(v);
-        dataChanged.value = dataState.value.changed();
+        if (computedEditableView.value === ModificationView.Current) {
+            dataChanged.value = dataState.value.changed();
+        }
         nextTick(() => itemBeingEdited.value = false);
     }, { deep: true });
 
@@ -195,6 +235,13 @@
         emit('update:editing', v);
     });
 
+    const formDifferencesChecker = ref(undefined);
+    const resetFormDifferencesChecker = () => {
+        if (computedHasForm.value) {
+            formDifferencesChecker.value = getModificationsDataState(item.value, itemModifications.value, props.form);
+        }
+    }
+
     onMounted(() => {
         // Fetch item
         if (props.readResource && !createMode.value) fetchItem();
@@ -360,6 +407,10 @@
 
 
     const closeConfirm = computed(() => {
+        if (!computedHasButtons.value) return '';
+        if (computedEditableView.value === ModificationView.Modifications) {
+            return modificationsDataState.value.changed() ? props.modalConfig?.closeConfirm : '';
+        }
         return dataState.value.changed() ? props.modalConfig?.closeConfirm : '';
     });
 
@@ -394,7 +445,6 @@
         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({
@@ -448,7 +498,20 @@
         }),
         computedHasForm = computed(() => {
             return typeof props.form === 'object' && Object.keys(props.form).length > 0;
-        })
+        }),
+        computedModificationViews = computed(() => {
+            if (Object.keys(itemModifications.value).length === 0) return [];
+            return props.modificationViews;
+        });
+
+    const computedEditableView = computed(() => {
+        if (Object.keys(itemModifications.value).length === 0) return ModificationView.Current;
+        return ModificationView.Modifications;
+    })
+
+    const computedHasButtons = computed(() => {
+        return createMode.value || canUpdate.value || canDrop.value;
+    })
 </script>
 
 <template>
@@ -457,13 +520,15 @@
         v-bind="computedContainerAttrs"
         class="lkt-item-crud"
     >
-        <template v-if="groupButton !== false && groupButtonAsModalActions" #header-actions>
+        <template v-if="groupButton !== false && groupButtonAsModalActions && computedHasButtons" #header-actions>
             <button-nav
                 ref="buttonNav"
                 v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
+                v-model:picked-modification-view="pickedModificationView"
                 :item="item"
+                :modifications="itemModifications"
                 :mode="mode"
                 :view="view"
                 :grouped="true"
@@ -483,6 +548,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -517,10 +584,15 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions)"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top
+                && (groupButton === false || !groupButtonAsModalActions)
+                 && computedHasButtons
+"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
+                v-model:picked-modification-view="pickedModificationView"
                 :item="item"
+                :modifications="itemModifications"
                 :mode="mode"
                 :view="view"
                 :grouped="groupButton !== false"
@@ -540,6 +612,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -570,12 +644,22 @@
                         can-close
                         v-on:close="showStoreMessage = false" />
 
-                    <lkt-form
-                        v-if="computedHasForm"
-                        v-model="item"
-                        v-model:form="form"
-                        v-model:valid="validForm"
-                    />
+                    <template v-if="computedHasForm">
+                        <lkt-form
+                            v-model="item"
+                            v-model:modifications="itemModifications"
+                            v-model:valid="validForm"
+                            v-bind="<FormUiConfig>{
+                                ...formUiConfig,
+                                form,
+                                differencesTableConfig,
+                                visibleView: pickedModificationView,
+                                modificationDataState: formDifferencesChecker,
+                                editableViews: [computedEditableView],
+                                disabled: !editMode,
+                            }"
+                        />
+                    </template>
 
                     <template v-else>
                         <slot name="item"
@@ -596,10 +680,12 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions)"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
+                v-model:picked-modification-view="pickedModificationView"
                 :item="item"
+                :modifications="itemModifications"
                 :mode="mode"
                 :view="view"
                 :grouped="groupButton !== false"
@@ -619,6 +705,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"