@dejwcake/craftable 0.1.10 → 2.0.0

package/src/translation/TranslationListing.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <TranslationEditModal
+                :show="showEditModal"
+                :item="editItem"
+                :locales="localeList"
+                :url="url"
+                :translations="translations"
+                @close="showEditModal = false"
+                @saved="loadData"
+            />
+
+            <TranslationImportModal
+                :show="showImportModal"
+                :locales="localeList"
+                :url="url"
+                :step-count="stepCount"
+                :translations="translations"
+                @close="showImportModal = false"
+                @imported="loadData"
+            />
+
+            <TranslationExportModal
+                :show="showExportModal"
+                :locales="localeList"
+                :url="url"
+                :translations="translations"
+                @close="showExportModal = false"
+            />
+
+            <!-- Main card -->
+            <div class="card">
+                <div class="card-header">
+                    <i class="fa fa-align-justify"></i> {{ translations.listing_title }}
+                    <a
+                        class="btn btn-primary btn-sm float-end ms-2"
+                        href="#"
+                        role="button"
+                        @click.prevent="showImportModal = true"
+                    >
+                        <i class="fa fa-upload"></i>&nbsp; {{ translations.import_btn }}
+                    </a>
+                    <a
+                        class="btn btn-primary btn-sm float-end ms-2"
+                        href="#"
+                        role="button"
+                        @click.prevent="showExportModal = true"
+                    >
+                        <i class="fa fa-file-excel"></i>&nbsp; {{ translations.export_btn }}
+                    </a>
+                    <a class="btn btn-primary btn-sm float-end" href="#" role="button" @click.prevent="rescan">
+                        <i class="fa" :class="scanning ? 'fa-spinner fa-spin' : 'fa-eye'"></i>&nbsp;
+                        {{ translations.rescan_btn }}
+                    </a>
+                </div>
+                <div ref="cardBody" class="card-body">
+                    <div class="row justify-content-md-between mb-3">
+                        <div class="col col-lg-7 col-xl-5 mb-3">
+                            <Search
+                                v-model:search="search"
+                                :filter-fn="filter"
+                                :translations="{
+                                    search_placeholder: translations.search_placeholder,
+                                    search_btn: translations.search_btn,
+                                }"
+                            >
+                                <template #prepend>
+                                    <Multiselect
+                                        :model-value="filters.group"
+                                        :options="groups"
+                                        :placeholder="translations.all_groups"
+                                        :allow-empty="true"
+                                        :show-labels="false"
+                                        open-direction="bottom"
+                                        class="multiselect--input-group-prepend"
+                                        @update:model-value="onGroupSelect"
+                                    />
+                                </template>
+                            </Search>
+                        </div>
+                        <div class="col-sm-auto mb-3">
+                            <PerPage v-model="pagination.state.per_page" />
+                        </div>
+                    </div>
+
+                    <div class="table-responsive">
+                        <table class="table table-hover table-listing">
+                            <thead>
+                                <tr>
+                                    <Sortable :column="'group'" :order-by="orderBy" @sort="onSort">{{
+                                        translations.group
+                                    }}</Sortable>
+                                    <Sortable :column="'key'" :order-by="orderBy" @sort="onSort">{{
+                                        translations.default
+                                    }}</Sortable>
+                                    <Sortable :column="'text'" :order-by="orderBy" @sort="onSort">{{
+                                        userLocale.toUpperCase()
+                                    }}</Sortable>
+                                    <Sortable
+                                        v-if="isColumnVisible(4)"
+                                        :column="'created_at'"
+                                        :order-by="orderBy"
+                                        @sort="onSort"
+                                        >{{ translations.created_at_label }}</Sortable
+                                    >
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="item in collection" :key="item.id">
+                                    <td>{{ item.group }}</td>
+                                    <td>{{ item.key }}</td>
+                                    <td>{{ item.text?.[userLocale] }}</td>
+                                    <td v-if="isColumnVisible(4)">{{ formatDate(item.created_at) }}</td>
+                                    <td>
+                                        <a
+                                            class="btn btn-sm btn-info"
+                                            href="#"
+                                            :title="translations.edit_btn"
+                                            role="button"
+                                            @click.prevent="openEditModal(item)"
+                                        >
+                                            <i class="fa fa-edit"></i>
+                                        </a>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <Pagination
+                        :pagination="pagination.state"
+                        :options="pagination.options"
+                        :translations="{
+                            previous: translations.pagination_previous,
+                            next: translations.pagination_next,
+                            overview: translations.pagination_overview,
+                        }"
+                        @page-change="onPageChange"
+                        @per-page-change="onPerPageChange"
+                    />
+
+                    <div v-if="!collection?.length" class="no-items-found">
+                        <i class="fa fa-magnifying-glass"></i>
+                        <h3>{{ translations.no_items }}</h3>
+                        <p>{{ translations.try_changing_items }}</p>
+                        <a class="btn btn-primary" href="#" role="button" @click.prevent="rescan">
+                            <i class="fa" :class="scanning ? 'fa-spinner fa-spin' : 'fa-eye'"></i>&nbsp;
+                            {{ translations.rescan_btn }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useBaseListing } from '../composables/useBaseListing.js';
+import { useResponsiveColumns } from '../composables/useResponsiveColumns.js';
+import { notifyError } from '../utils/notify.js';
+import { formatDate } from '../utils/dateFormatters.js';
+import Multiselect from 'vue-multiselect';
+import Sortable from '../components/listing/Sortable.vue';
+import Pagination from '../components/listing/Pagination.vue';
+import PerPage from '../components/listing/PerPage.vue';
+import Search from '../components/listing/Search.vue';
+import TranslationEditModal from './modals/TranslationEditModal.vue';
+import TranslationImportModal from './modals/TranslationImportModal.vue';
+import TranslationExportModal from './modals/TranslationExportModal.vue';
+
+const axios = window.axios;
+
+const props = defineProps({
+    url: { type: String, required: true },
+    data: { type: Object, default: null },
+    timezone: { type: String, default: 'UTC' },
+    locales: { type: [Object, Array], default: () => [] },
+    userLocale: { type: String, default: 'en' },
+    groups: { type: Array, default: () => [] },
+    translations: { type: Object, default: () => ({}) },
+    stepCount: { type: Number, default: 3 },
+});
+
+const cardBody = ref(null);
+const { isColumnVisible } = useResponsiveColumns(cardBody);
+
+const { pagination, orderBy, filters, search, collection, loadData, filter, onSort, onPageChange, onPerPageChange } =
+    useBaseListing(props);
+
+const localeList = computed(() => (Array.isArray(props.locales) ? props.locales : Object.values(props.locales)));
+
+// Modal state
+const showEditModal = ref(false);
+const showImportModal = ref(false);
+const showExportModal = ref(false);
+const editItem = ref(null);
+
+// Group filter
+filters.group = null;
+
+function onGroupSelect(val) {
+    filters.group = val ?? null;
+    loadData(true);
+}
+
+function openEditModal(item) {
+    editItem.value = item;
+    showEditModal.value = true;
+}
+
+// Rescan
+const scanning = ref(false);
+
+function rescan() {
+    scanning.value = true;
+    axios.post(props.url + '/rescan').then(
+        () => {
+            scanning.value = false;
+            loadData(true);
+        },
+        () => {
+            scanning.value = false;
+            notifyError();
+        },
+    );
+}
+</script>

package/src/translation/modals/TranslationEditModal.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="modal fade" :class="{ show: show }" :style="{ display: show ? 'block' : 'none' }">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">{{ translations.edit }}</h4>
+                    <button type="button" class="btn-close" @click="$emit('close')"></button>
+                </div>
+                <div class="modal-body">
+                    <p class="text-center" style="word-wrap: break-word">
+                        <strong>{{ translations.default_text }}:</strong> {{ item?.key }}
+                    </p>
+                    <form @submit.prevent="onSubmit">
+                        <div v-for="locale in localeList" :key="locale" class="mb-3">
+                            <label class="form-label">{{ locale.toUpperCase() }} {{ translations.translation }}</label>
+                            <input
+                                v-if="!translationValues[locale] || translationValues[locale].length < 70"
+                                v-model="translationValues[locale]"
+                                type="text"
+                                class="form-control"
+                                :placeholder="(translations.translation_for || '').replace(':locale', locale)"
+                            />
+                            <textarea
+                                v-else
+                                v-model="translationValues[locale]"
+                                class="form-control"
+                                :placeholder="(translations.translation_for || '').replace(':locale', locale)"
+                                cols="30"
+                                rows="4"
+                            ></textarea>
+                        </div>
+                        <div class="text-center">
+                            <button class="btn btn-primary w-100" type="submit">
+                                {{ translations.save }} {{ translations.translation }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-if="show" class="modal-backdrop fade show" @click="$emit('close')"></div>
+</template>
+
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { notifySuccess, notifyError } from '../../utils/notify.js';
+
+const axios = window.axios;
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    item: { type: Object, default: null },
+    locales: { type: [Object, Array], default: () => [] },
+    url: { type: String, required: true },
+    translations: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['close', 'saved']);
+
+const localeList = computed(() => (Array.isArray(props.locales) ? props.locales : Object.values(props.locales)));
+
+const translationValues = reactive({});
+
+watch(
+    () => props.item,
+    (item) => {
+        Object.keys(translationValues).forEach((key) => delete translationValues[key]);
+        for (const key of Object.keys(item?.text || {})) {
+            translationValues[key] = item.text[key];
+        }
+    },
+    { immediate: true },
+);
+
+async function onSubmit() {
+    try {
+        await axios.post(props.url + '/' + props.item.id, { text: { ...translationValues } });
+        notifySuccess('Item successfully changed.');
+        emit('saved');
+        emit('close');
+    } catch {
+        notifyError();
+    }
+}
+</script>

package/src/translation/modals/TranslationExportModal.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="modal fade" :class="{ show: show }" :style="{ display: show ? 'block' : 'none' }">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">{{ translations.export }}</h4>
+                    <button type="button" class="btn-close" @click="$emit('close')"></button>
+                </div>
+                <div class="modal-body">
+                    <form @submit.prevent="onSubmit">
+                        <p class="text-start">{{ translations.export_notice }}</p>
+
+                        <FormMultiSelect
+                            v-model="languagesToExport"
+                            name="languagesToExport"
+                            :label="translations.language_to_export"
+                            :options="localeOptions"
+                            track-by="id"
+                            option-label="name"
+                            :placeholder="translations.select_language"
+                        />
+
+                        <div class="text-end">
+                            <button class="btn btn-primary" type="submit">
+                                <i class="fa fa-file-excel"></i>&nbsp;{{ translations.export_btn }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-if="show" class="modal-backdrop fade show" @click="$emit('close')"></div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { notifyError } from '../../utils/notify.js';
+import FormMultiSelect from '../../components/form/FormMultiSelect.vue';
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    locales: { type: [Object, Array], default: () => [] },
+    url: { type: String, required: true },
+    translations: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['close']);
+
+const localeList = computed(() => (Array.isArray(props.locales) ? props.locales : Object.values(props.locales)));
+
+const localeOptions = computed(() => localeList.value.map((l) => ({ id: l, name: l.toUpperCase() })));
+
+const languagesToExport = ref([]);
+
+watch(
+    localeOptions,
+    (opts) => {
+        languagesToExport.value = [...opts];
+    },
+    { immediate: true },
+);
+
+function onSubmit() {
+    if (languagesToExport.value.length === 0) {
+        notifyError('Please select at least one language to export.');
+        return;
+    }
+    const params = new URLSearchParams();
+    languagesToExport.value.forEach((l) => params.append('exportLanguages[]', l.id));
+    window.location = props.url + '/export?' + params.toString();
+    emit('close');
+}
+</script>

package/src/translation/modals/TranslationImportModal.vue

@@ -0,0 +1,255 @@
+<template>
+    <div class="modal fade" :class="{ show: show }" :style="{ display: show ? 'block' : 'none' }">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">{{ translations.import_title }}</h4>
+                    <button type="button" class="btn-close" @click="onClose"></button>
+                </div>
+                <div class="modal-body">
+                    <div v-show="currentStep === 1">
+                        <p>{{ translations.import_notice }}</p>
+                        <div class="row mb-3">
+                            <div class="col-md-4 text-md-end">
+                                <label class="col-form-label">{{ translations.upload_file }}</label>
+                            </div>
+                            <div class="col-md-6">
+                                <label class="btn btn-primary btn-sm w-100 mb-0">
+                                    <span v-if="importedFile">{{ importedFile.name }}</span>
+                                    <span v-else>{{ translations.choose_file }}</span>
+                                    <input
+                                        ref="fileInput"
+                                        type="file"
+                                        class="d-none"
+                                        accept=".xlsx"
+                                        @change="handleFileUpload"
+                                    />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="row mb-3">
+                            <div class="col-md-4 text-md-end">
+                                <label for="importLanguage" class="col-form-label">{{
+                                    translations.language_to_import
+                                }}</label>
+                            </div>
+                            <div class="col-md-6">
+                                <Multiselect
+                                    v-model="importLanguageObj"
+                                    :options="localeOptions"
+                                    track-by="id"
+                                    label="name"
+                                    :placeholder="translations.select_language"
+                                    :allow-empty="false"
+                                    :show-labels="false"
+                                    open-direction="bottom"
+                                />
+                            </div>
+                        </div>
+                        <div class="offset-md-4">
+                            <div class="form-check">
+                                <input
+                                    id="onlyMissingTranslations"
+                                    v-model="onlyMissing"
+                                    class="form-check-input"
+                                    type="checkbox"
+                                />
+                                <label class="form-check-label" for="onlyMissingTranslations">{{
+                                    translations.do_not_override
+                                }}</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-show="currentStep === 2">
+                        <div class="text-center mb-3">
+                            <p>
+                                {{ translations.conflict_found }} {{ numberOfFoundTranslations }}
+                                {{ translations.conflict_to_import }} {{ numberOfTranslationsToReview }}
+                                {{ translations.conflict_differ }}
+                            </p>
+                        </div>
+                        <table class="table table-hover">
+                            <thead>
+                                <tr>
+                                    <th>{{ translations.group }}</th>
+                                    <th>{{ translations.default }}</th>
+                                    <th>{{ translations.current_value }}</th>
+                                    <th>{{ translations.imported_value }}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <template v-for="(item, index) in translationsToImport" :key="index">
+                                    <tr v-if="item.has_conflict">
+                                        <td style="word-break: break-all">{{ item.group }}</td>
+                                        <td style="word-break: break-all">{{ item.default }}</td>
+                                        <td style="word-break: break-all">
+                                            <input
+                                                :id="'current-' + index + '0'"
+                                                v-model="translationsToImport[index].checkedCurrent"
+                                                type="radio"
+                                                class="form-check-input me-1"
+                                                :value="true"
+                                                :name="'current-' + index"
+                                            />
+                                            <label class="form-check-label" :for="'current-' + index + '0'">{{
+                                                item.current_value
+                                            }}</label>
+                                        </td>
+                                        <td style="word-break: break-all">
+                                            <input
+                                                :id="'current-' + index + '1'"
+                                                v-model="translationsToImport[index].checkedCurrent"
+                                                type="radio"
+                                                class="form-check-input me-1"
+                                                :value="false"
+                                                :name="'current-' + index"
+                                            />
+                                            <label class="form-check-label" :for="'current-' + index + '1'">{{
+                                                item[importLanguage.toLowerCase()]
+                                            }}</label>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div v-show="currentStep === 3">
+                        <div class="text-center">
+                            <p>
+                                {{ numberOfSuccessfullyImportedTranslations }} {{ translations.successfully_imported }}
+                                {{ numberOfSuccessfullyUpdatedTranslations }} {{ translations.successfully_updated }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button v-if="!lastStep" type="button" class="btn btn-primary" @click.prevent="nextStep">
+                        {{ translations.next }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-if="show" class="modal-backdrop fade show" @click="onClose"></div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { notifyError } from '../../utils/notify.js';
+import Multiselect from 'vue-multiselect';
+
+const axios = window.axios;
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    locales: { type: [Object, Array], default: () => [] },
+    url: { type: String, required: true },
+    stepCount: { type: Number, default: 3 },
+    translations: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['close', 'imported']);
+
+const localeList = computed(() => (Array.isArray(props.locales) ? props.locales : Object.values(props.locales)));
+
+const localeOptions = computed(() => localeList.value.map((l) => ({ id: l, name: l.toUpperCase() })));
+
+const fileInput = ref(null);
+const importedFile = ref(null);
+const importLanguageObj = ref(null);
+const importLanguage = computed(() => importLanguageObj.value?.id ?? '');
+const onlyMissing = ref(false);
+const currentStep = ref(1);
+const numberOfSuccessfullyImportedTranslations = ref(0);
+const numberOfSuccessfullyUpdatedTranslations = ref(0);
+const numberOfFoundTranslations = ref(0);
+const numberOfTranslationsToReview = ref(0);
+const translationsToImport = ref(null);
+
+const lastStep = computed(() => currentStep.value === props.stepCount);
+
+watch(
+    () => props.show,
+    (val) => {
+        if (!val) resetState();
+    },
+);
+
+function resetState() {
+    currentStep.value = 1;
+    importedFile.value = null;
+    importLanguageObj.value = null;
+    onlyMissing.value = false;
+    translationsToImport.value = null;
+    if (fileInput.value) {
+        fileInput.value.value = '';
+    }
+}
+
+function handleFileUpload(e) {
+    importedFile.value = e.target.files[0];
+}
+
+function onClose() {
+    emit('close');
+}
+
+async function nextStep() {
+    if (currentStep.value === 1) {
+        if (!importedFile.value || !importLanguage.value) {
+            notifyError('The form contains invalid fields.');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('fileImport', importedFile.value);
+        formData.append('importLanguage', importLanguage.value);
+        formData.append('onlyMissing', onlyMissing.value);
+
+        try {
+            const response = await axios.post(props.url + '/import', formData, {
+                headers: { 'Content-Type': 'multipart/form-data' },
+            });
+
+            if ('numberOfImportedTranslations' in response.data && 'numberOfUpdatedTranslations' in response.data) {
+                currentStep.value = 3;
+                numberOfSuccessfullyImportedTranslations.value = response.data.numberOfImportedTranslations;
+                numberOfSuccessfullyUpdatedTranslations.value = response.data.numberOfUpdatedTranslations;
+                emit('imported');
+            } else {
+                currentStep.value = 2;
+                translationsToImport.value = response.data;
+                numberOfFoundTranslations.value = Object.keys(response.data).length;
+                numberOfTranslationsToReview.value = translationsToImport.value.filter((i) => i.has_conflict).length;
+            }
+        } catch (error) {
+            const msg = error.response?.data;
+            if (msg === 'Wrong syntax in your import') notifyError('Wrong syntax in your import.');
+            else if (msg === 'Unsupported file type') notifyError('Unsupported file type.');
+            else notifyError();
+        }
+    } else if (currentStep.value === 2) {
+        for (let i = 0; i < translationsToImport.value.length; i++) {
+            if (translationsToImport.value[i].checkedCurrent) {
+                translationsToImport.value[i][importLanguage.value.toLowerCase()] =
+                    translationsToImport.value[i].current_value;
+            }
+        }
+
+        try {
+            const response = await axios.post(props.url + '/import/conflicts', {
+                importLanguage: importLanguage.value,
+                resolvedTranslations: translationsToImport.value,
+            });
+            currentStep.value = 3;
+            numberOfSuccessfullyImportedTranslations.value = response.data.numberOfImportedTranslations;
+            numberOfSuccessfullyUpdatedTranslations.value = response.data.numberOfUpdatedTranslations;
+            emit('imported');
+        } catch {
+            notifyError();
+        }
+    }
+}
+</script>