wticreatorstudio/Modules/Frontend/Resources/client/api/useSection.js

import { ref, toValue } from "vue";
import { request } from '@/helpers/axios';
import { defineStore } from "pinia";
import { useData } from "@/api/useData";
import { useLoader } from "@/api/useLoader";

export const useSection = defineStore('sections', () => {
    const { getData } = useData();
    const { setLoader } = useLoader();
    const sections = ref(getData("Common", "section.all"));
    const section = ref(null);

    async function getSections() {
        setLoader(true);
        
        const response = await request().get(route("frontend.section.all"));
        const { data } = response;

        setLoader(false);
        sections.value = data.sections;
    }

    function lazyLoadSectionItems(item) {
        return request().get(route("frontend.section.items.lazy-load", { section: item.id }), {
            params: {
                skipped: item.items.length,
            }
        });
    }

    function createSection(title, layout, order) {
        return request().post(route("frontend.section.store"), {
            title: toValue(title),
            layout: toValue(layout),
            order: toValue(order),
        });
    }

    function updateSection(title, layout, order) {
        return request().put(route("frontend.section.update"), {
            id: section.value.id,
            title: toValue(title),
            layout: toValue(layout),
            order: toValue(order),
        });
    }

    function deleteSection(id) {
        return request().delete(route("frontend.section.destroy"), {
            params: {
                id,
            },
        });
    }

    function updateSectionItems(section, nItems) {
        const items = nItems.map(item => item.id);

        return request().put(route("frontend.section.item.update", { section: section.id }), {
            items,
        });
    }

    function updateSectionCategories(section, nItems) {
        const items = nItems.map(item => item.id);

        return request().put(route("frontend.section.category.update", { section: section.id }), {
            items,
        });
    }

    function updateSectionTranslations(section, items) {
        const nItems = items.map(item => ({
            title: item.title,
            code: item.code,
        }));

        return request().put(route("frontend.section.translation.update", { section: section.id }), {
            items: nItems,
        });
    }

    function updateSectionStatus(section, state) {
        setLoader(true);
        
        return request().put(route("frontend.section.status.update", { section: section.id }), {
            state,
        });
    }

    function editSection(data) {
        section.value = data;
    }

    function clearActiveSection() {
        section.value = null;
    }

    return {
        section,
        sections,
        getSections,
        lazyLoadSectionItems,
        createSection,
        updateSection,
        deleteSection,
        updateSectionItems,
        updateSectionCategories,
        updateSectionTranslations,
        updateSectionStatus,
        editSection,
        clearActiveSection,
    };
});