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' && $store.getters.isAdmin" @click="lock(item.key)">
                🔒 Click to Lock {{ postfix ? ` ${postfix}` : '' }}
                </button>
                <button v-if="item.value === '1' && $store.getters.isAdmin" @click="lock(item.key)">
                🔓 Click to Unlock {{ postfix ? ` ${postfix}` : '' }}
                </button>
            </div>
        </div>
    </transition>
</template>

<script>
import componentHandler from '../../../general/mixins/componentHandler';
export default {
    name: "ComponentLock",
    props: {
        section:{
            type: String,
            required: true
        },
        postfix: {
            type: String,
            default: ''
        }
    },
    methods: {
        lock(key){
            this.parameters = {
                key: key
            };
            this.submit(
                route("api.setting.update.lock"),
                "post",
                this.section,
                true,
                false
            );
        },
        successHandler(response, section, payload){
            this.$store.dispatch('reloadList', {'name': this.section});
            if(section === 'lockPaidBillGroup'){
                this.$store.dispatch('reloadList', {'name': 'paidBillGroupListSection'});
            }
            else if(section === 'lockCompleteCurrencyOrderSection'){
                this.$store.dispatch('reloadList', {'name': 'completeTransactionGroupsListSection'});
            }
            else if(section === 'lockOpenCurrencyOrderSection'){
                this.$store.dispatch('reloadList', {'name': 'openTransactionGroupsListSection'});
            }
        },
    },
    mixins: [componentHandler]
};
</script>