westone-ui/md-lokasi/modules/lokasi.js

// const URL = "/westone-api/v1/system/auth";
// const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";

const store = {
    namespaced: true,
    state() {
        return {
            itemsPerPage: 5,
            page: 1,
            sortBy: 'id',
            orderBy: 'asc',
            search: '',
            loading: false,
            totalItems: 0,
            action: 'add',
            stationList: [
                {
                    id: 1,
                    name: 'Station A'
                },
                {
                    id: 2,
                    name: 'Station B'
                },
                {
                    id: 3,
                    name: 'Station C'
                },
            ],
            selectedStation: null,
            inpLocation: '',
            inpPriority: '',
            locationList: [],
            locationListTmp: [
                {
                    id: 1,
                    locationName: "R. 214-BMD",
                    stationName: "Sample Station BMD",
                    priority: "1",
                },
                {
                    id: 2,
                    locationName: "R. 333 Sample 12",
                    stationName: "Sample Station LAB",
                    priority: "2",
                },
                {
                    id: 3,
                    locationName: "R. 103 - Sampling 1",
                    stationName: "Sample Station LAB",
                    priority: "1",
                },
                {
                    id: 4,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 5,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 6,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 7,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 8,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 9,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 10,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 11,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
                {
                    id: 12,
                    locationName: "R. 103 Sampling 2",
                    stationName: "Sample Station LAB",
                    priority: "3",
                },
            ],
            selectedLocation: {},
            dialogForm: false,
            dialogDelete: false,
            snackbar: {
                model: false,
                type: "success",
                message: "coba",
                "multiLine": false,
                "location": "top",
                timeout: 1500
            },
            dialogInfo: {
                title: 'INFORMATION',
                model: false,
                color: 'primary',
                message: "information"
            },


        };
    },
    mutations: {
        update_dialogInfo(state, data) {
            state.dialogInfo = data
        },
        update_snackbar(state, data) {
            state.snackbar = data
        },
        update_dialogDelete(state, data) {
            state.dialogDelete = data
        },
        update_action(state, data) {
            state.action = data
        },
        update_inpLocation(state, data) {
            state.inpLocation = data
        },
        update_inpPriority(state, data) {
            state.inpPriority = data
        },
        update_stationList(state, data) {
            state.stationList = data
        },
        update_selectedStation(state, data) {
            state.selectedStation = data
        },
        update_dialogForm(state, data) {
            state.dialogForm = data
        },
        update_dialogForm(state, data) {
            state.dialogForm = data
        },
        update_sortBy(state, data) {
            state.sortBy = data
        },
        update_page(state, data) {
            state.page = data
        },
        update_orderBy(state, data) {
            state.orderBy = data
        },
        update_locationListTmp(state, data) {
            state.locationListTmp = data
        },
        update_totalItems(state, data) {
            state.totalItems = data
        },
        update_loading(state, data) {
            state.loading = data
        },
        update_search(state, data) {
            state.search = data
        },
        update_itemsPerPage(state, data) {
            state.itemsPerPage = data
        },
        update_locationList(state, data) {
            state.locationList = data
        },
        update_selectedLocation(state, data) {
            state.selectedLocation = data
        },

    },
    actions: {
        async search(context) {
            context.commit('update_loading', true)
            try {
                let result = context.state.locationListTmp;
                let sortBy = context.state.sortBy
                let orderBy = context.state.orderBy
                let search = context.state.search
                let page = context.state.page
                let itemsPerPage = context.state.itemsPerPage
                context.commit('update_totalItems', result.length)

                // Pencarian
                result = result.filter(item =>
                    item.locationName.toLowerCase().includes(search.toLowerCase()) ||
                    item.stationName.toLowerCase().includes(search.toLowerCase())
                );

                // Sorting
                result = result.slice().sort((a, b) => {
                    if (a[sortBy] < b[sortBy]) return orderBy === 'asc' ? -1 : 1;
                    if (a[sortBy] > b[sortBy]) return orderBy === 'asc' ? 1 : -1;
                    return 0;
                });

                // Pagination
                const startIndex = (page - 1) * itemsPerPage;
                result = result.slice(startIndex, startIndex + itemsPerPage);
                console.log(result)
                // this.locationList = result;

                context.commit('update_locationList', result)
                // return result;

            } catch (error) {
                console.log(error);
            }
            setTimeout(() => {
                // let snackbar = {
                //     model: false,
                //     type: "success",
                //     message: "ini-coba",
                //     "multi-line": false,
                //     "location": "top",
                //     timeout: 1500
                // }
                // context.commit('update_snackbar', snackbar)

                context.commit('update_loading', false)
            }, 100);
        }
    }
};

export default store