lkt-item-crud 2.0.13 → 2.0.15

package/src/lib-components/LktItemCrud.vue

@@ -4,6 +4,8 @@
     import { DataState } from 'lkt-data-state';
     import { debug } from '../functions/debug';
     import {
+        ButtonConfig,
+        ensureButtonConfig,
         getDefaultValues,
         ItemCrud,
         ItemCrudButtonNavPosition,
@@ -11,7 +13,7 @@
         ItemCrudMode,
         ItemCrudView,
         LktObject,
-        LktSettings,
+        LktSettings, ModalConfig,
         NotificationType,
         TablePermission,
         ToastConfig,
@@ -65,6 +67,28 @@
         createMode.value = v === ItemCrudMode.Create;
     })
 
+    const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
+        safeUpdateButton = ref(ensureButtonConfig(props.updateButton, LktSettings.defaultUpdateButton)),
+        safeDropButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
+        safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton)),
+        safeGroupButton = ref(ensureButtonConfig(props.groupButton, LktSettings.defaultGroupButton));
+
+    watch(() => props.createButton, v => {
+        safeCreateButton.value = ensureButtonConfig(v, LktSettings.defaultCreateButton);
+    }, { deep: true });
+
+    watch(() => props.updateButton, v => {
+        safeUpdateButton.value = ensureButtonConfig(v, LktSettings.defaultUpdateButton);
+    }, { deep: true });
+
+    watch(() => props.dropButton, v => {
+        safeDropButton.value = ensureButtonConfig(v, LktSettings.defaultDropButton);
+    }, { deep: true });
+
+    watch(() => props.editModeButton, v => {
+        safeEditModeButton.value = ensureButtonConfig(v, LktSettings.defaultEditModeButton);
+    }, { deep: true });
+
     const fetchItem = async () => {
         debug('fetchItem');
         isLoading.value = true;
@@ -193,7 +217,7 @@
         },
         onCreate = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onCreate');
-            if (!ensureValidResourceSave(r, props.createButton.resource)) {
+            if (!ensureValidResourceSave(r, safeCreateButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultCreateErrorText,
@@ -221,7 +245,7 @@
         },
         onUpdate = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onUpdate');
-            if (!ensureValidResourceSave(r, props.updateButton.resource)) {
+            if (!ensureValidResourceSave(r, safeUpdateButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultUpdateErrorText,
@@ -247,7 +271,7 @@
         },
         onDrop = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onDrop');
-            if (!ensureValidResourceSave(r, props.dropButton.resource)) {
+            if (!ensureValidResourceSave(r, safeDropButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultDropErrorText,
@@ -325,9 +349,36 @@
             if (computedInsideModal.value) return 'lkt-modal';
             return 'section';
         }),
+        ableToUpdate = computed(() => {
+            if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
+            if (!dataChanged.value) return false;
+
+            if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled(item.value);
+            if (typeof safeUpdateButton.value?.disabled === 'boolean') return !safeUpdateButton.value.disabled;
+
+            return true;
+        }),
+        ableToCreate = computed(() => {
+            if (props.mode !== ItemCrudMode.Create) return false;
+            if (!dataChanged.value) return false;
+
+            if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled(item.value);
+            if (typeof safeCreateButton.value?.disabled === 'boolean') return !safeCreateButton.value.disabled;
+
+            return true;
+        }),
+        ableToDrop = computed(() => {
+
+            if (!canDrop.value) return false;
+
+            if (typeof safeDropButton.value?.disabled === 'function') return !safeDropButton.value.disabled(item.value);
+            if (typeof safeDropButton.value?.disabled === 'boolean') return !safeDropButton.value.disabled;
+
+            return true;
+        }),
         computedContainerAttrs = computed(() => {
             if (computedContainerTag.value === 'lkt-modal') {
-                return {
+                return <ModalConfig>{
                     ...{
                         title: props.title,
                         item: item.value,
@@ -337,17 +388,68 @@
                         beforeClose: crudBeforeClose,
                         closeConfirm: closeConfirm.value,
                     },
+                    headerActionsButton: props.groupButton !== false ? <ButtonConfig>{
+                        dot: ableToCreate.value || ableToUpdate.value,
+                    } : false
                 };
             }
             return {};
-        });
+        })
 </script>
 
 <template>
     <component
         :is="computedContainerTag"
         v-bind="computedContainerAttrs"
+        class="lkt-item-crud"
     >
+        <template v-if="groupButton !== false && groupButtonAsModalActions" #header-actions>
+            <button-nav
+                ref="buttonNav"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
+                v-model:loading="isLoading"
+                v-model:editing="editMode"
+                :item="item"
+                :mode="mode"
+                :view="view"
+                :grouped="true"
+                :button-nav-visibility="buttonNavVisibility"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
+                :data-changed="dataChanged"
+                :http-success-read="httpSuccessRead"
+                :can-update="canUpdate"
+                :can-drop="canDrop"
+                :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
+                :perms="perms"
+                @create="onCreate"
+                @save="onUpdate"
+                @drop="onDrop"
+            >
+                <template #prev-buttons-ever="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons-ever']">
+                    <slot name="prev-buttons-ever"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
+                </template>
+                <template #prev-buttons="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
+                </template>
+            </button-nav>
+        </template>
+
         <article class="lkt-item-crud">
             <header class="lkt-item-crud_header" v-if="!computedInsideModal && displayHeader">
                 <div class="lkt-item-crud_header-slot" v-if="slots['pre-title']">
@@ -361,23 +463,28 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions)"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 :item="item"
                 :mode="mode"
                 :view="view"
+                :grouped="groupButton !== false"
                 :button-nav-visibility="buttonNavVisibility"
-                :create-button="createButton"
-                :update-button="updateButton"
-                :drop-button="dropButton"
-                :edit-mode-button="editModeButton"
-                :group-button="groupButton"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
                 :data-changed="dataChanged"
                 :http-success-read="httpSuccessRead"
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
@@ -425,23 +532,28 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions)"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 :item="item"
                 :mode="mode"
                 :view="view"
+                :grouped="groupButton !== false"
                 :button-nav-visibility="buttonNavVisibility"
-                :create-button="createButton"
-                :update-button="updateButton"
-                :drop-button="dropButton"
-                :edit-mode-button="editModeButton"
-                :group-button="groupButton"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
                 :data-changed="dataChanged"
                 :http-success-read="httpSuccessRead"
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"