coba-tampilan/components/Setting/TipePengguna/TableViewPermission.vue

<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import UiParentCard from '@/components/shared/UiParentCard.vue';
import { Icon } from '@iconify/vue';
import dummy from '@/data/dummy/keuangan.type_user.json'

const search = ref();
const dialog = ref(false)
const dialogDelete = ref(false)
const headers = ref([
    // {
    //     no:'No',
    //     title: 'Dessert (100g serving)',
    //     align: 'start',
    //     sortable: false,
    //     key: 'name',
    // },
    { title: 'No', key: 'no' },
    { title: 'typeUser', key: 'typeUser' },
    { title: 'Actions', key: 'actions', sortable: false },
])
const Roles = ref([])
const editedIndex = ref(-1)
const editedItem = ref({
    typeUser:'',
})
const defaultItem = ref({
    typeUser: '',
})
const formTitle = computed(() => {
    return editedIndex.value === -1 ? 'New Roles' : 'Edit Roles'
})
function initialize() {
    Roles.value = dummy
}
function editItem(item) {
    editedIndex.value = Roles.value.indexOf(item)
    editedItem.value = Object.assign({}, item)
    dialog.value = true
}
function deleteItem(item) {
    editedIndex.value = Roles.value.indexOf(item)
    editedItem.value = Object.assign({}, item)
    dialogDelete.value = true
}
function deleteItemConfirm() {
    Roles.value.splice(editedIndex.value, 1)
    closeDelete()
}
function close() {
    dialog.value = false
    nextTick(() => {
        editedItem.value = Object.assign({}, defaultItem.value)
        editedIndex.value = -1
    })
}
function closeDelete() {
    dialogDelete.value = false
    nextTick(() => {
        editedItem.value = Object.assign({}, defaultItem.value)
        editedIndex.value = -1
    })
}
function save() {
    if (editedIndex.value > -1) {
        Object.assign(Roles.value[editedIndex.value], editedItem.value)
    } else {
        Roles.value.push(editedItem.value)
    }
    close()
}
watch(dialog, val => {
    val || close()
})
watch(dialogDelete, val => {
    val || closeDelete()
})
initialize()
</script>

<template>
    <!-- <pre>{{ dummy }}</pre> -->
    <v-row>
        <v-col cols="12">
            <!-- <UiParentCard title="Crud Table"> -->
                <v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
                    class="mb-5" />
                <v-data-table class="border rounded-md datatabels" :headers="headers" :items="Roles" :search="search" :sort-by="[{ key: 'typeUser', order: 'asc' }]">
                    <template v-slot:top>
                        <v-toolbar class="bg-lightprimary" flat>
                            <v-toolbar-title>My Crud Table</v-toolbar-title>
                            <v-divider class="mx-4" inset vertical></v-divider>
                            <v-spacer></v-spacer>
                            <!-- dialog create & update -->
                             <v-btn color="primary"  variant="flat" dark @click="dialog = true">Add New Item</v-btn>
                            <UiComponents2DialogsScrollable v-model="dialog">
                                <template v-slot:title>
                                    {{ formTitle }}
                                </template>
                                <template v-slot:text>
                                    <v-container class="px-0">
                                            <v-row>
                                                <v-col cols="12" sm="6" md="4">
                                                    <v-text-field v-model="editedItem.typeUser"
                                                        label="typeUser"></v-text-field>
                                                </v-col>
                                            </v-row>
                                        </v-container>
                                </template>
                                <template v-slot:actions>
                                        <v-btn color="error" variant="tonal" @click="close">
                                            Cancel
                                        </v-btn>
                                        <v-btn color="success" variant="tonal" @click="save">
                                            Save
                                        </v-btn>
                                </template>
                            </UiComponents2DialogsScrollable>
                            <!-- dialog delete -->
                            <UiComponents2DialogsActivator v-model="dialogDelete">
                                <template v-slot:text>Are you sure you want to delete this item?</template>
                                <template v-slot:actions>
                                    <v-btn color="error" variant="flat" dark   @click="closeDelete">Cancel</v-btn>
                                        <v-btn color="primary" variant="flat" dark   @click="deleteItemConfirm">OK</v-btn>
                                </template>
                            </UiComponents2DialogsActivator>
                        </v-toolbar>
                    </template>
                    <template v-slot:item.no="{ index }">{{ index + 1 }}</template>
                    <template v-slot:item.actions="{ item }">
                        <div class="d-flex gap-3">
                            <Icon
                                icon="solar:pen-new-square-broken"
                                height="20"
                                class="text-primary cursor-pointer"
                                size="small"
                                @click="editItem(item)"
                            />
                            <Icon
                                icon="solar:trash-bin-minimalistic-linear"
                                height="20"
                                class="text-error cursor-pointer"
                                size="small"
                                @click="deleteItem(item)"
                            />
                        </div>
                    </template>
                    <template v-slot:no-data>
                        <v-btn color="primary" @click="initialize">
                            Reset
                        </v-btn>
                    </template>
                </v-data-table>
            <!-- </UiParentCard> -->
        </v-col>
    </v-row>
</template>