lkt-item-crud 2.0.18 → 2.0.20

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,6 +43,8 @@
         'update:editing',
         'update:perms',
         'update:customData',
+        'update:modifications',
+        'update:modificationView',
         'read',
         'create',
         'update',
@@ -52,13 +57,16 @@
 
     const isLoading = ref(true),
         item = ref(props.modelValue),
+        itemModifications = ref(props.modifications),
         custom = ref(props.customData),
         permissions = ref(props.perms),
         editMode = ref(props.editing),
+        validForm = ref(false),
         httpSuccessRead = ref(false),
         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),
@@ -69,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;
     })
@@ -79,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)),
@@ -131,11 +164,17 @@
             }
             httpSuccessRead.value = true;
             item.value = r.data;
+            itemModifications.value = 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,
@@ -167,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 });
 
@@ -193,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();
@@ -392,6 +441,7 @@
         ableToUpdate = computed(() => {
             if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
+            if (computedHasForm.value && !validForm.value) return false;
 
             if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled({
                 prop: item.value
@@ -403,6 +453,7 @@
         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({
                 prop: item.value
@@ -440,7 +491,19 @@
                 };
             }
             return {};
-        })
+        }),
+        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;
+    })
 </script>
 
 <template>
@@ -455,7 +518,9 @@
                 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"
@@ -475,6 +540,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -512,7 +579,9 @@
                 v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions)"
                 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"
@@ -532,6 +601,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
@@ -561,16 +632,35 @@
                         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="permissions"
-                    />
+
+                    <template v-if="computedHasForm">
+                        <lkt-form
+                            v-model="item"
+                            v-model:modifications="itemModifications"
+                            v-model:valid="validForm"
+                            v-bind="<FormUiConfig>{
+                                form,
+                                differencesTableConfig,
+                                visibleView: pickedModificationView,
+                                modificationDataState: formDifferencesChecker,
+                                editableViews: [computedEditableView],
+                                disabled: !editMode,
+                            }"
+                        />
+                    </template>
+
+                    <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>
@@ -581,7 +671,9 @@
                 v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions)"
                 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"
@@ -601,6 +693,8 @@
                 :able-to-update="ableToUpdate"
                 :able-to-drop="ableToDrop"
                 :perms="permissions"
+                :modification-view="computedModificationViews"
+                :editable-view="computedEditableView"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"