helorui/src/Functions/useTable.js

Vue3 components library

import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useList from './useList.js'
import useRequest from './useRequest.js'

export default function(fields, endpoint, orderBy, orderDir, storageKey = null)
{
    const {
        pagination,
        readCommonParams,
        filters,
        read,
        readStatus,
        readError,
    } = useList(endpoint, {
        orderBy: orderBy ?? 'created_at',
        orderDir: orderDir ?? 'desc',
        limit: 10,
    }, {}, storageKey);

    const { locale } = useI18n({ useScope: 'global' })

    watch(() => locale.value, (l) => {
        read();
    });

    // ----------------------------------------------------
    //  Create
    // ----------------------------------------------------
    const createDialog = ref(null);
    const createFiles = ref({});

    function openCreate()
    {
        createDialog.value.data = {};

        fields.value.forEach(field => {
            createDialog.value.data[field.name] = field.default ?? null;
            if(field.type === 'media' || field.type === 'medias'){
                createFiles.value[field.name] = null;
            }
        });

        createDialog.value.open();
    }

    function create()
    {
        let ignoreFields = [];

        fields.value.forEach(field => {
            if(field.type === 'media' || field.type === 'medias'){
                ignoreFields.push(field.name);
            }
        });

        let formDataConfig = {
            ignore: ignoreFields,
            fakePut: false,
        };

        if(createFiles.value){
            formDataConfig.files = {...createFiles.value};
        }

        return createDialog.value.send('post', endpoint, {}, formDataConfig).then(r => {
            createDialog.value.close();
            read();
        });
    }

    // ----------------------------------------------------
    //  Update
    // ----------------------------------------------------
    const updateDialog = ref(null);
    const updateFiles = ref({});

    function openUpdate(item)
    {
        updateDialog.value.data = {
            id: item.id,
        };

        updateFiles.value = {};

        fields.value.forEach(field => {
            updateDialog.value.data[field.name] = item[field.name];
            if(field.type === 'media' || field.type === 'medias'){
                updateFiles.value[field.name] = null;
            }
        });

        updateDialog.value.open();
    }

    function update()
    {
        let ignoreFields = ['id'];

        fields.value.forEach(field => {
            if(field.type === 'media' || field.type === 'medias'){
                ignoreFields.push(field.name);
            }
        });

        let formDataConfig = {
            ignore: ignoreFields,
            fakePut: true,
        };

        if(updateFiles.value){
            formDataConfig.files = {...updateFiles.value};
        }

        return updateDialog.value.send('post', endpoint + '/' + updateDialog.value.data.id, {}, formDataConfig).then(r => {
            updateDialog.value.close();
            read();
        });
    }

    // ----------------------------------------------------
    //  Destroy
    // ----------------------------------------------------
    const destroyDialog = ref(null);

    function openDestroy(item)
    {
        destroyDialog.value.data = {
            id: item.id,
        };
        destroyDialog.value.open();
    }

    function destroy()
    {
        return destroyDialog.value.send('delete', endpoint + '/' + destroyDialog.value.data.id).then(r => {
            destroyDialog.value.close();
            read();
        });
    }

    function isFieldEditable(field, item)
    {
        if(typeof field.editable === 'function'){
            return field.editable(item);
        }
        return field.editable !== false;
    }

    // ----------------------------------------------------
    //  Reorder
    // ----------------------------------------------------
    let dragPosition = null;
    let dropPosition = null;

    function drag(event, position)
    {
        dragPosition = position;
    }

    function drop(event, position)
    {
        event.preventDefault();
        dropPosition = position;

        reorder(dragPosition, dropPosition);

        dragPosition = null;
        dropPosition = null;
    }

    const {
        send: reorderSend,
        status: reorderStatus,
        error: reorderError,
        data: reorderData,
    } = useRequest();

    function reorder()
    {
        reorderData.value = {
            from_position: dragPosition,
            to_position: dropPosition,
        };

        return reorderSend('post', endpoint + '/reorder').then(r => {
            read();
        });
    }

    return {
        pagination,
        readCommonParams,
        filters,
        read,
        readStatus,
        readError,

        create,
        createFiles,
        createDialog,
        openCreate,

        update,
        updateFiles,
        updateDialog,
        openUpdate,

        destroy,
        destroyDialog,
        openDestroy,

        isFieldEditable,

        drag,
        drop,
        reorderStatus,
        reorderError,
    };
}