wticreatorstudio/Modules/Frontend/Resources/client/components/SectionTable.vue

<template>
    <DataTable
        v-model:expandedRows="expandedRows"
        :value="items"
        size="small"
    >
        <Column expander style="width: 5rem"></Column>
        <Column field="id" header="#"></Column>
        <Column
            field="title"
            :header="t('title')"
            :pt="{
                headerContent: 'justify-center',
            }"
        >
        </Column>
        <Column
            field="layout"
            :header="t('layout')"
            :pt="{
                headerContent: 'justify-center',
            }"
        >
        </Column>
        <Column
            :header="t('category', 2)"
            :pt="{
                headerContent: 'justify-center',
            }"
        >
            <template #body="{ data }">
                <Chip
                    v-for="item in data.categories"
                    :label="item.name"
                    class="m-1"
                />
            </template>
        </Column>
        <Column
            field="order"
            :header="t('order')"
            :pt="{
                headerContent: 'justify-center',
                bodyCell: 'text-center',
            }"
        >
        </Column>
        <Column
            :header="t('active')"
            :pt="{
                headerContent: 'justify-center',
            }"
        >
            <template #body="{ data }">
                <InputSwitch
                    v-model="data.active"
                    @change="handleSetStatus(data)"
                />
            </template>
        </Column>
        <Column>
            <template #body="{ data }">
                <div class="flex justify-end">
                    <Button
                        icon="pi pi-ellipsis-h"
                        size="small"
                        class="p-button-text text-black"
                        @click="toggleActions($event, data)"
                    >
                    </Button>
                    <Menu
                        ref="actions"
                        :model="options"
                        popup
                    >
                    </Menu>
                </div>
            </template>
        </Column>

        <template #expansion="{ data }">
            <div>
                <h3>Section Items</h3>
                <DataTable
                    :value="data.items"
                >
                    <Column field="id" header="Video ID"></Column>
                    <Column field="product_name" header="Title"></Column>
                </DataTable>
            </div>
        </template>
    </DataTable>
    <SectionItemDialog ref="dlgSectionItem" />
    <SectionCategoryDialog ref="dlgSectionCategory" />
    <SectionTranslationDialog ref="dlgSectionTranslation" />
</template>

<script setup>
import { computed, inject, onMounted, ref, toValue } from "vue";
import { useI18n } from "vue-i18n";
import { useSection } from "@/api/useSection";
import SectionItemDialog from "@/components/dialogs/SectionItemDialog";
import SectionCategoryDialog from "@/components/dialogs/SectionCategoryDialog";
import SectionTranslationDialog from "@/components/dialogs/SectionTranslationDialog";

const swal = inject('$swal');
const { t } = useI18n();
const {
    getSections,
    deleteSection,
    editSection,
    updateSectionStatus,
} = useSection();
const actions = ref(null);
const dlgSectionItem = ref(null);
const dlgSectionCategory = ref(null);
const dlgSectionTranslation = ref(null);
const expandedRows = ref([]);
const selectedItem = ref(null);
const options = computed(() => [
    {
        label: t("option", 2),
        items: [
            {
                label: t("set-item", 2),
                icon: "pi pi-plus",
                command: handleAddItems,
            },
            {
                label: t("set-category", 2),
                icon: "pi pi-plus",
                command: handleAddCategories,
            },
            {
                label: t("set-translation", 2),
                icon: "pi pi-globe",
                command: handleSetTranslations,
            },
            {
                label: t("edit"),
                icon: "pi pi-pencil",
                command: handleEdit,
            },
            {
                label: t("delete"),
                icon: "pi pi-trash",
                command: handleDelete
            },
        ],
    },
]);
const items = computed(() => useSection().sections);

onMounted(() => {
    getSections();
});

function handleAddItems() {
    dlgSectionItem.value.setSection(toValue(selectedItem));
    dlgSectionItem.value.show();
}

function handleAddCategories() {
    dlgSectionCategory.value.setSection(toValue(selectedItem));
    dlgSectionCategory.value.show();
}

function handleSetTranslations() {
    dlgSectionTranslation.value.setSection(toValue(selectedItem));
    dlgSectionTranslation.value.show();
}

function handleEdit() {
    editSection(selectedItem.value);
}

function handleDelete() {
    swal({
        title: "Are you sure?",
        text: "Are you sure you want to delete this section?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        cancelButtonText: "Cancel",
        confirmButtonText: "Yes, delete the section.",
        reverseButtons: true,
        returnFocus: false,
    })
    .then(result => {
        if (result.isConfirmed) {
            deleteSection(selectedItem.value.id)
                .then(response => {
                    const { data } = response;
                    const { message } = data;

                    getSections();
                    swal({
                        title: "Success",
                        text: message,
                        icon: "success",
                        timer: 3000,
                    });
                });
        }
    });
}

function handleSetStatus(section) {
    updateSectionStatus(section, section.active)
        .then(response => {
            const { data } = response;
            const { message } = data;

            getSections();
            swal({
                title: "Success",
                text: message,
                icon: "success",
                timer: 3000,
            });
        });
}

function toggleActions(ev, data) {
    actions.value.toggle(ev);
    selectedItem.value = data;
}
</script>