exchange-2.0/resources/assets/vue/components/settings/elements/ComponentLock.vue

<template>
    <transition name="fade">
        <div class="row">
            <div class="col">
                <button v-if="item.value === '0' && authStore.isAdmin" @click="lock(item.key)">
                🔒 Click to Lock {{ postfix ? ` ${postfix}` : '' }}
                </button>
                <button v-if="item.value === '1' && authStore.isAdmin" @click="lock(item.key)">
                🔓 Click to Unlock {{ postfix ? ` ${postfix}` : '' }}
                </button>
            </div>
        </div>
    </transition>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';
import { useQueueStore } from '@/stores/queue';
import { useAuthStore } from '@/stores/auth';

interface Props {
    section: string;
    data: any;
    postfix?: string;
}

const props = withDefaults(defineProps<Props>(), {
    postfix: ''
});

const authStore = useAuthStore();
const queueStore = useQueueStore();
const { item } = useComponentHandler(props);
const { submit } = useRequest();

const lock = (key: string) => {
    submit(route('api.setting.update.lock'), 'post', props.section, true, false, { key }, {
        successHandler: (response: any, section?: string, payload?: any) => {
            queueStore.reloadList({ name: props.section });

            if (section === 'lockPaidBillGroup') {
                queueStore.reloadList({ name: 'paidBillGroupListSection' });
            } else if (section === 'lockCompleteCurrencyOrderSection') {
                queueStore.reloadList({ name: 'completeTransactionGroupsListSection' });
            } else if (section === 'lockOpenCurrencyOrderSection') {
                queueStore.reloadList({ name: 'openTransactionGroupsListSection' });
            }
        }
    });
};
</script>