@dejwcake/craftable 2.3.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dejwcake/craftable",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "This is a frontend dependency for Craftable. Craftable is a Laravel-based open-source toolkit for building administration interfaces.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/listing/BulkOperationsBar.vue

@@ -13,9 +13,20 @@
 
     <span class="float-end pe-2">
         <slot>
-            <button class="btn btn-sm btn-danger px-4" @click="onBulkDelete()">
-                {{ translations.delete_btn }}
-            </button>
+            <span class="d-inline-flex gap-2">
+                <button v-if="onBulkDelete" class="btn btn-sm btn-danger px-4" @click="onBulkDelete()">
+                    <i class="fa fa-trash me-1"></i>
+                    {{ translations.delete_btn }}
+                </button>
+                <button v-if="onBulkForceDelete" class="btn btn-sm btn-dark px-4" @click="onBulkForceDelete()">
+                    <i class="fa fa-eraser me-1"></i>
+                    {{ translations.force_delete_btn }}
+                </button>
+                <button v-if="onBulkRestore" class="btn btn-sm btn-success text-white px-4" @click="onBulkRestore()">
+                    <i class="fa fa-trash-arrow-up me-1"></i>
+                    {{ translations.restore_btn }}
+                </button>
+            </span>
         </slot>
     </span>
 </template>
@@ -27,7 +38,9 @@ defineProps({
     loading: { type: Boolean, default: false },
     onCheckAll: { type: Function, required: true },
     onUncheckAll: { type: Function, required: true },
-    onBulkDelete: { type: Function, required: true },
+    onBulkDelete: { type: Function, default: null },
+    onBulkForceDelete: { type: Function, default: null },
+    onBulkRestore: { type: Function, default: null },
     translations: {
         type: Object,
         default: () => ({
@@ -35,6 +48,8 @@ defineProps({
             check_all_items: 'Check all items',
             uncheck_all_items: 'Uncheck all items',
             delete_btn: 'Delete',
+            force_delete_btn: 'Delete permanently',
+            restore_btn: 'Restore',
         }),
     },
 });

package/src/components/listing/ForceDeleteButton.vue

@@ -0,0 +1,57 @@
+<template>
+    <button
+        type="button"
+        class="btn btn-sm btn-dark"
+        :title="translations.force_delete_btn"
+        @click="showConfirm = true"
+    >
+        <i class="fa fa-eraser"></i>
+    </button>
+
+    <ConfirmModal
+        :show="showConfirm"
+        variant="danger"
+        :translations="translations"
+        @confirm="onConfirm"
+        @cancel="showConfirm = false"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const axios = window.axios;
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+import ConfirmModal from '../ConfirmModal.vue';
+
+const props = defineProps({
+    url: { type: String, required: true },
+    translations: {
+        type: Object,
+        default: () => ({
+            force_delete_btn: 'Delete permanently',
+            confirm_title: 'Deletion',
+            confirm_text: 'Delete this item permanently? This cannot be undone.',
+            confirm_btn: 'Delete permanently',
+            cancel_btn: 'Cancel',
+        }),
+    },
+});
+
+const emit = defineEmits(['deleted']);
+
+const showConfirm = ref(false);
+
+function onConfirm() {
+    showConfirm.value = false;
+
+    axios.delete(props.url).then(
+        (response) => {
+            notifySuccess(response.data.message);
+            emit('deleted');
+        },
+        (error) => {
+            notifyError(error.response?.data?.message);
+        },
+    );
+}
+</script>

package/src/components/listing/RestoreButton.vue

@@ -0,0 +1,62 @@
+<template>
+    <span :title="disabled ? translations.not_restorable : translations.restore_btn">
+        <button
+            type="button"
+            class="btn btn-sm btn-success text-white"
+            :aria-label="disabled ? translations.not_restorable : translations.restore_btn"
+            :disabled="disabled"
+            @click="showConfirm = true"
+        >
+            <i class="fa fa-trash-arrow-up"></i>
+        </button>
+    </span>
+
+    <ConfirmModal
+        :show="showConfirm"
+        variant="success"
+        :translations="translations"
+        @confirm="onConfirm"
+        @cancel="showConfirm = false"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const axios = window.axios;
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+import ConfirmModal from '../ConfirmModal.vue';
+
+const props = defineProps({
+    url: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+    translations: {
+        type: Object,
+        default: () => ({
+            restore_btn: 'Restore',
+            not_restorable: 'This item cannot be restored, an item it belongs to is deleted.',
+            confirm_title: 'Restore',
+            confirm_text: 'Do you really want to restore this item?',
+            confirm_btn: 'Restore',
+            cancel_btn: 'Cancel',
+        }),
+    },
+});
+
+const emit = defineEmits(['restored']);
+
+const showConfirm = ref(false);
+
+function onConfirm() {
+    showConfirm.value = false;
+
+    axios.post(props.url).then(
+        (response) => {
+            notifySuccess(response.data.message);
+            emit('restored');
+        },
+        (error) => {
+            notifyError(error.response?.data?.message);
+        },
+    );
+}
+</script>

package/src/components/listing/ShowDeleted.vue

@@ -0,0 +1,28 @@
+<template>
+    <label class="d-inline-flex align-items-center gap-2 mb-0 text-nowrap text-reset">
+        <span class="form-check form-switch form-switch-inline mb-0">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+                :checked="modelValue"
+                @change="$emit('update:modelValue', $event.target.checked)"
+            />
+        </span>
+        {{ translations.show_deleted }}
+    </label>
+</template>
+
+<script setup>
+defineProps({
+    modelValue: { type: Boolean, default: false },
+    translations: {
+        type: Object,
+        default: () => ({
+            show_deleted: 'Show deleted',
+        }),
+    },
+});
+
+defineEmits(['update:modelValue']);
+</script>

package/src/composables/useBaseListing.js

@@ -20,10 +20,12 @@ export function useBaseListing(props) {
         },
     });
 
-    const orderBy = reactive({
+    const defaultOrderBy = {
         column: 'id',
         direction: 'asc',
-    });
+    };
+
+    const orderBy = reactive({ ...defaultOrderBy });
 
     const filters = reactive({});
     const search = ref('');
@@ -32,15 +34,18 @@ export function useBaseListing(props) {
     const bulkItems = reactive({});
     const bulkCheckingAllLoader = ref(false);
 
+    const defaultConfirmTranslations = {
+        confirm_title: 'Warning!',
+        confirm_text: 'Are you sure?',
+        confirm_btn: 'Yes, confirm',
+        cancel_btn: 'Cancel',
+    };
+
     const confirmModal = reactive({
         show: false,
         onConfirm: null,
-        translations: {
-            confirm_title: 'Warning!',
-            confirm_text: 'Are you sure?',
-            confirm_btn: 'Yes, confirm',
-            cancel_btn: 'Cancel',
-        },
+        variant: 'danger',
+        translations: { ...defaultConfirmTranslations },
     });
 
     // Update "now" every second
@@ -57,6 +62,19 @@ export function useBaseListing(props) {
         return Object.values(bulkItems).filter((item) => item === true).length;
     });
 
+    const showDeleted = computed({
+        get() {
+            return Boolean(filters.trashed);
+        },
+        set(value) {
+            if (!value && orderBy.column === 'deleted_at') {
+                Object.assign(orderBy, defaultOrderBy);
+            }
+            onBulkItemsClickedAllUncheck();
+            filter('trashed', value ? 1 : '');
+        },
+    });
+
     const isClickedAll = computed({
         get() {
             return (
@@ -152,13 +170,14 @@ export function useBaseListing(props) {
         }
     }
 
-    function bulkDelete(url, trans = {}) {
-        const itemsToDelete = Object.keys(bulkItems).filter((key) => bulkItems[key]);
+    function bulkAction(url, trans = {}, variant = 'danger') {
+        const selectedItems = Object.keys(bulkItems).filter((key) => bulkItems[key]);
 
+        confirmModal.variant = variant;
         confirmModal.translations = {
-            ...confirmModal.translations,
+            ...defaultConfirmTranslations,
             ...trans,
-            confirm_text: (trans.confirm_text || 'Do you really want to delete :number selected items?').replace(
+            confirm_text: (trans.confirm_text || defaultConfirmTranslations.confirm_text).replace(
                 ':number',
                 clickedBulkItemsCount.value,
             ),
@@ -167,7 +186,7 @@ export function useBaseListing(props) {
             confirmModal.show = false;
             axios
                 .post(url, {
-                    ids: itemsToDelete,
+                    ids: selectedItems,
                 })
                 .then((response) => {
                     Object.keys(bulkItems).forEach((key) => delete bulkItems[key]);
@@ -181,6 +200,34 @@ export function useBaseListing(props) {
         confirmModal.show = true;
     }
 
+    function bulkDelete(url, trans = {}) {
+        bulkAction(url, {
+            ...trans,
+            confirm_text: trans.confirm_text || 'Do you really want to delete :number selected items?',
+        });
+    }
+
+    function bulkForceDelete(url, trans = {}) {
+        bulkAction(url, {
+            confirm_btn: 'Delete permanently',
+            ...trans,
+            confirm_text: trans.confirm_text || 'Delete :number selected items permanently? This cannot be undone.',
+        });
+    }
+
+    function bulkRestore(url, trans = {}) {
+        bulkAction(
+            url,
+            {
+                confirm_title: 'Restore',
+                confirm_btn: 'Restore',
+                ...trans,
+                confirm_text: trans.confirm_text || 'Do you really want to restore :number selected items?',
+            },
+            'success',
+        );
+    }
+
     function loadData(resetCurrentPage) {
         const options = {
             params: {
@@ -292,13 +339,17 @@ export function useBaseListing(props) {
         // Computed
         isClickedAll,
         clickedBulkItemsCount,
+        showDeleted,
 
         // Methods
         onBulkItemClicked,
         onBulkItemsClickedAll,
         onBulkItemsClickedAllWithPagination,
         onBulkItemsClickedAllUncheck,
+        bulkAction,
         bulkDelete,
+        bulkForceDelete,
+        bulkRestore,
         loadData,
         filter,
         resolveUrl,

package/src/index.js

@@ -25,6 +25,9 @@ export { default as ListingHeader } from './components/listing/ListingHeader.vue
 export { default as ShowButton } from './components/listing/ShowButton.vue';
 export { default as EditButton } from './components/listing/EditButton.vue';
 export { default as DeleteButton } from './components/listing/DeleteButton.vue';
+export { default as ForceDeleteButton } from './components/listing/ForceDeleteButton.vue';
+export { default as RestoreButton } from './components/listing/RestoreButton.vue';
+export { default as ShowDeleted } from './components/listing/ShowDeleted.vue';
 export { default as BackButton } from './components/BackButton.vue';
 export { default as ConfirmModal } from './components/ConfirmModal.vue';
 export { default as ToggleSwitch } from './components/listing/ToggleSwitch.vue';