@dejwcake/craftable 0.1.10 → 2.0.1

package/src/components/listing/PublishedAtColumn.vue

@@ -0,0 +1,226 @@
+<template>
+    <span v-if="item.published_at <= now">
+        {{ formatDatetime(item.published_at, datetimeFormat) }}
+    </span>
+    <span v-if="item.published_at > now">
+        <small>{{ translations.will_be_published }}</small
+        ><br />
+        {{ formatDatetime(item.published_at, datetimeFormat) }}
+        <span class="cursor-pointer" :title="translations.publish_later" role="button" @click="openPublishLater()">
+            <i class="fa fa-calendar"></i>
+        </span>
+    </span>
+    <div v-if="!item.published_at">
+        <span
+            class="btn btn-sm btn-info text-white mb-1"
+            :title="translations.publish_later"
+            role="button"
+            @click="openPublishLater()"
+        >
+            <i class="fa fa-calendar"></i>&nbsp;&nbsp;{{ translations.publish_later }}
+        </span>
+    </div>
+    <div v-if="!item.published_at || item.published_at > now">
+        <form class="d-inline" @submit.prevent="publishNow()">
+            <button
+                type="submit"
+                class="btn btn-sm btn-success text-white"
+                :title="translations.publish_now"
+                :disabled="submitting"
+            >
+                <i class="fa fa-paper-plane"></i>&nbsp;&nbsp;{{ translations.publish_now }}
+            </button>
+        </form>
+    </div>
+    <div v-if="item.published_at && item.published_at < now">
+        <form class="d-inline" @submit.prevent="unpublishNow()">
+            <button
+                type="submit"
+                class="btn btn-sm btn-danger"
+                :title="translations.unpublish_now"
+                :disabled="submitting"
+            >
+                <i class="fa fa-paper-plane"></i>&nbsp;&nbsp;{{ translations.unpublish_now }}
+            </button>
+        </form>
+    </div>
+    <div v-if="editing" class="publish-later-backdrop" @click.self="editing = false"></div>
+    <div v-if="editing" class="publish-later-modal">
+        <div class="d-flex justify-content-between align-items-center mb-2">
+            <strong>{{ translations.publish_later }}</strong>
+            <button type="button" class="btn-close btn-close-sm" aria-label="Close" @click="editing = false"></button>
+        </div>
+        <VueDatePicker
+            v-model="publishDate"
+            model-type="yyyy-MM-dd HH:mm:ss"
+            :format="'dd.MM.yyyy HH:mm'"
+            :format-locale="dateFnsLocale"
+            :enable-time-picker="true"
+            :enable-seconds="false"
+            :inline="true"
+            auto-apply
+        />
+        <div class="mt-2 text-end">
+            <button
+                class="btn btn-sm btn-primary text-white"
+                :disabled="submitting || !publishDate"
+                @click="savePublishLater()"
+            >
+                Save
+            </button>
+        </div>
+    </div>
+    <ConfirmModal
+        :show="showConfirm"
+        :translations="confirmTranslations"
+        :variant="confirmVariant"
+        @confirm="onConfirm"
+        @cancel="onCancelConfirm"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { VueDatePicker } from '@vuepic/vue-datepicker';
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+// Use the globally configured axios instance (with CSRF token and X-Requested-With header)
+const axios = window.axios;
+import { formatDatetime } from '../../utils/dateFormatters.js';
+import { getDateFnsLocale } from '../../utils/dateFnsLocale.js';
+import ConfirmModal from '../ConfirmModal.vue';
+
+const dateFnsLocale = getDateFnsLocale();
+
+const props = defineProps({
+    item: { type: Object, required: true },
+    url: { type: String, required: true },
+    now: { type: String, required: true },
+    datetimeFormat: { type: String, default: 'DD.MM.YYYY HH:mm' },
+    translations: {
+        type: Object,
+        default: () => ({
+            publish_now: 'Publish now',
+            unpublish_now: 'Unpublish now',
+            publish_later: 'Publish later',
+            will_be_published: 'This item will be published at',
+            confirm_publish_now: 'Do you really want to publish this item now?',
+            confirm_unpublish_now: 'Do you really want to unpublish this item?',
+        }),
+    },
+});
+
+const emit = defineEmits(['update:item']);
+
+const editing = ref(false);
+const publishDate = ref(null);
+const submitting = ref(false);
+const showConfirm = ref(false);
+const pendingAction = ref(null);
+const confirmTranslations = ref({});
+const confirmVariant = ref('danger');
+
+function openPublishLater() {
+    publishDate.value = props.item.published_at || null;
+    editing.value = true;
+}
+
+function savePublishLater() {
+    if (!publishDate.value) return;
+    submitting.value = true;
+
+    axios
+        .post(props.url, { published_at: publishDate.value })
+        .then(
+            (response) => {
+                emit('update:item', { ...props.item, published_at: response.data.object.published_at });
+                editing.value = false;
+                notifySuccess(response.data.message);
+            },
+            (error) => {
+                notifyError(error.response?.data?.message);
+            },
+        )
+        .finally(() => {
+            submitting.value = false;
+        });
+}
+
+function publishNow() {
+    pendingAction.value = 'publish';
+    confirmVariant.value = 'success';
+    confirmTranslations.value = {
+        confirm_title: props.translations.publish_now,
+        confirm_text: props.translations.confirm_publish_now,
+        confirm_btn: props.translations.publish_now,
+        cancel_btn: 'Cancel',
+    };
+    showConfirm.value = true;
+}
+
+function unpublishNow() {
+    pendingAction.value = 'unpublish';
+    confirmVariant.value = 'danger';
+    confirmTranslations.value = {
+        confirm_title: props.translations.unpublish_now,
+        confirm_text: props.translations.confirm_unpublish_now,
+        confirm_btn: props.translations.unpublish_now,
+        cancel_btn: 'Cancel',
+    };
+    showConfirm.value = true;
+}
+
+function onConfirm() {
+    showConfirm.value = false;
+    if (pendingAction.value === 'publish') {
+        doPublishNow();
+    } else if (pendingAction.value === 'unpublish') {
+        doUnpublishNow();
+    }
+    pendingAction.value = null;
+}
+
+function onCancelConfirm() {
+    showConfirm.value = false;
+    pendingAction.value = null;
+}
+
+function doPublishNow() {
+    submitting.value = true;
+    axios
+        .post(props.url, { publish_now: true })
+        .then(
+            (response) => {
+                emit('update:item', { ...props.item, published_at: response.data.object.published_at });
+                notifySuccess(response.data.message);
+            },
+            (error) => {
+                notifyError(error.response?.data?.message);
+            },
+        )
+        .finally(() => {
+            submitting.value = false;
+        });
+}
+
+function doUnpublishNow() {
+    submitting.value = true;
+    axios
+        .post(props.url, { unpublish_now: true })
+        .then(
+            (response) => {
+                emit('update:item', {
+                    ...props.item,
+                    published_at: response.data.object.published_at,
+                    published_to: response.data.object.published_to,
+                });
+                notifySuccess(response.data.message);
+            },
+            (error) => {
+                notifyError(error.response?.data?.message);
+            },
+        )
+        .finally(() => {
+            submitting.value = false;
+        });
+}
+</script>

package/src/components/listing/Search.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="input-group">
+        <slot name="prepend" />
+        <div class="form-control d-flex align-items-center p-0">
+            <input
+                ref="inputRef"
+                class="border-0 shadow-none ps-3 flex-grow-1"
+                style="outline: none; min-width: 0"
+                :placeholder="translations.search_placeholder"
+                :value="search"
+                @input="onInput"
+                @keyup.enter="onEnter"
+            />
+            <button
+                v-if="search"
+                type="button"
+                class="border-0 bg-transparent pe-1 ps-0 flex-shrink-0 text-danger"
+                @click="clearSearch"
+            >
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+        <button type="button" class="btn btn-primary" @click="doSearch">
+            <i class="fa fa-search"></i>&nbsp; {{ translations.search_btn }}
+        </button>
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+    search: { type: String, default: '' },
+    debounce: { type: Number, default: 400 },
+    filterFn: { type: Function, required: true },
+    translations: {
+        type: Object,
+        default: () => ({ search_placeholder: 'Search...', search_btn: 'Search' }),
+    },
+});
+
+const emit = defineEmits(['update:search']);
+const inputRef = ref(null);
+let debounceTimer = null;
+
+function cancelDebounce() {
+    if (debounceTimer) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+    }
+}
+
+function onInput(event) {
+    const value = event.target.value;
+    emit('update:search', value);
+    cancelDebounce();
+    debounceTimer = setTimeout(() => {
+        props.filterFn('search', value);
+    }, props.debounce);
+}
+
+function doSearch() {
+    cancelDebounce();
+    props.filterFn('search', props.search);
+}
+
+function onEnter() {
+    cancelDebounce();
+    const value = inputRef.value?.value ?? props.search;
+    emit('update:search', value);
+    props.filterFn('search', value);
+}
+
+function clearSearch() {
+    cancelDebounce();
+    emit('update:search', '');
+    props.filterFn('search', '');
+}
+
+onBeforeUnmount(cancelDebounce);
+</script>

package/src/components/listing/Sortable.vue

@@ -0,0 +1,28 @@
+<template>
+    <th>
+        <a @click.stop="sort(column)">
+            <span
+                class="fa"
+                :class="{
+                    'fa-arrow-down-wide-short': orderBy.column === column && orderBy.direction === 'asc',
+                    'fa-arrow-down-short-wide': orderBy.column === column && orderBy.direction === 'desc',
+                }"
+            ></span>
+            <slot></slot>
+        </a>
+    </th>
+</template>
+
+<script setup>
+const props = defineProps({
+    column: { type: String, required: true },
+    orderBy: { type: Object, required: true },
+});
+
+const emit = defineEmits(['sort']);
+
+function sort(column) {
+    const direction = props.orderBy.column === column ? (props.orderBy.direction === 'asc' ? 'desc' : 'asc') : 'asc';
+    emit('sort', { column, direction });
+}
+</script>

package/src/components/listing/ToggleSwitch.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="form-check form-switch form-switch-inline">
+        <input
+            class="form-check-input"
+            :class="switchClass"
+            type="checkbox"
+            role="switch"
+            :checked="!!modelValue"
+            @change="toggle"
+        />
+    </div>
+</template>
+
+<script setup>
+const axios = window.axios;
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: [Boolean, Number, String], required: true },
+    url: { type: String, required: true },
+    column: { type: String, required: true },
+    row: { type: Object, required: true },
+    variant: { type: String, default: 'success' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const switchClass = computed(() => `form-switch-${props.variant}`);
+
+function toggle() {
+    const newValue = !props.modelValue;
+    emit('update:modelValue', newValue);
+
+    const data = { ...props.row, [props.column]: newValue };
+
+    axios.post(props.url, data).then(
+        (response) => {
+            notifySuccess(response.data.message);
+        },
+        (error) => {
+            emit('update:modelValue', props.modelValue);
+            notifyError(error.response?.data?.message);
+        },
+    );
+}
+</script>

package/src/composables/useAdmin.js

@@ -0,0 +1,39 @@
+import { ref, onMounted } from 'vue';
+const axios = window.axios;
+
+export function useAdmin() {
+    const loading = ref(false);
+
+    function setLoading(value) {
+        loading.value = !!value;
+    }
+
+    onMounted(() => {
+        axios.interceptors.request.use(
+            (config) => {
+                setLoading(true);
+                return config;
+            },
+            (error) => {
+                setLoading(false);
+                return Promise.reject(error);
+            },
+        );
+
+        axios.interceptors.response.use(
+            (response) => {
+                setLoading(false);
+                return response;
+            },
+            (error) => {
+                setLoading(false);
+                return Promise.reject(error);
+            },
+        );
+    });
+
+    return {
+        loading,
+        setLoading,
+    };
+}

package/src/composables/useBaseAuth.js

@@ -0,0 +1,81 @@
+import { ref } from 'vue';
+import { useForm, validate as veeValidate } from 'vee-validate';
+const axios = window.axios;
+
+export function useBaseAuth(props, options = {}) {
+    const form = ref(options.formDefaults ? { ...options.formDefaults } : {});
+    const submitting = ref(false);
+    const successMessage = ref('');
+
+    const { setErrors, errors } = useForm();
+
+    async function onSubmit() {
+        if (options.validationSchema) {
+            const fieldErrors = {};
+            for (const [field, rules] of Object.entries(options.validationSchema)) {
+                const result = await veeValidate(form.value[field], rules, {
+                    name: field,
+                    values: form.value,
+                });
+                if (!result.valid) {
+                    fieldErrors[field] = result.errors[0];
+                }
+            }
+
+            const errorState = {};
+            for (const field of Object.keys(options.validationSchema)) {
+                errorState[field] = fieldErrors[field] || undefined;
+            }
+            setErrors(errorState);
+
+            if (Object.keys(fieldErrors).length > 0) {
+                return false;
+            }
+        }
+
+        submitting.value = true;
+        successMessage.value = '';
+
+        axios
+            .post(props.action, form.value)
+            .then((response) => {
+                onSuccess(response.data);
+            })
+            .catch((err) => {
+                onFail(err.response?.data || {});
+            });
+    }
+
+    function onSuccess(data) {
+        submitting.value = false;
+        if (options.onSuccess) {
+            options.onSuccess(data);
+            return;
+        }
+        if (data.message) {
+            successMessage.value = data.message;
+        }
+        if (data.redirect) {
+            window.location.replace(data.redirect);
+        }
+    }
+
+    function onFail(data) {
+        submitting.value = false;
+        if (data.errors !== undefined) {
+            const fieldErrors = {};
+            Object.keys(data.errors).forEach((key) => {
+                fieldErrors[key] = data.errors[key][0];
+            });
+            setErrors(fieldErrors);
+        }
+    }
+
+    return {
+        form,
+        errors,
+        submitting,
+        successMessage,
+        onSubmit,
+    };
+}