antrean-operasi/pages/setting/user/index.vue

<script setup lang="ts">
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import type { User } from '~/types/setting';
import { getListUser } from '~/services/access';


const router = useRouter();
const search = ref('');
const usersList = ref<User[]>([]);
const loading = ref(false);
const currentPage = ref(1);
const itemsPerPage = ref(10);
const totalItems = ref(0);

// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const fetchData = async () => {
    loading.value = true;
    try {
        const offset = (currentPage.value - 1) * itemsPerPage.value;
        const response = await getListUser({
            limit: itemsPerPage.value,
            offset: offset,
            search: search.value || undefined
        });
        
        if (response && response.success) {
            usersList.value = response.data;
            totalItems.value = response.Paginate.Total;
        }
    } catch (error) {
        console.error('Error fetching users:', error);
        showSnackbar('Gagal mengambil data user', 'error');
    } finally {
        loading.value = false;
    }
};


// Watch for page changes
watch(currentPage, () => {
    fetchData();
});

watch(itemsPerPage, () => {
    currentPage.value = 1;
    fetchData();
});


// Watch for search with debounce
let searchTimeout: NodeJS.Timeout | null = null;
watch(search, () => {
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }
    searchTimeout = setTimeout(() => {
        currentPage.value = 1;
        fetchData();
    }, 500); // 500ms debounce
});

// Initial fetch
onMounted(() => {
    fetchData();
});

const showSnackbar = (message: string, color: string = 'success') => {
    snackbarMessage.value = message;
    snackbarColor.value = color;
    snackbar.value = true;
};

const headers = [
    { title: 'No', key: 'no', width: '100px', align: 'center' as const },
    { title: 'Nama User', key: 'name', sortable: true },
    { title: 'Email', key: 'email', sortable: true },
    { title: 'Hak Akses', key: 'hak_akses', sortable: true },
    // { title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
];

const handleView = (item: unknown) => {
    const data = item as User;
    router.push({
        path: '/setting/user/form',
        query: {
            mode: 'view',
            id: data.id
        }
    });
};

const handleEdit = (item: unknown) => {
    const data = item as User;
    router.push({
        path: '/setting/user/form',
        query: {
            mode: 'edit',
            id: data.id
        }
    });
};

const handleDelete = (item: unknown) => {
    const data = item as User;
    if (confirm(`Apakah Anda yakin ingin menghapus user "${data.name}"?`)) {
        // Remove from list
        const index = usersList.value.findIndex(u => u.id === data.id);
        if (index > -1) {
            usersList.value.splice(index, 1);
        }
        showSnackbar('User berhasil dihapus.', 'success');
    }
};

definePageMeta({
  middleware: 'auth',
  pageTitle: 'User',
});
</script>
<template>
    <v-row>
        <v-col cols="12">
            <v-card elevation="10">
                <v-card-text>
                    <div class="d-flex justify-space-between align-center mb-4">
                        <v-text-field
                            v-model="search"
                            placeholder="Cari..."
                            variant="outlined"
                            density="comfortable"
                            hide-details
                            prepend-inner-icon="mdi-magnify"
                            style="max-width: 400px;"
                        ></v-text-field>
                        
                        <!-- <v-btn
                            color="primary"
                            prepend-icon="mdi-plus"
                            to="/setting/user/form"
                        >
                            Tambah User
                        </v-btn> -->
                    </div>

                    <TableAntrian
                        :headers="headers"
                        :items="usersList"
                        :server-side="true"
                        :total-items="totalItems"
                        :current-page="currentPage"
                        :items-per-page="itemsPerPage"
                        :loading="loading"
                        min-width="1200px"
                        @view="handleView"
                        @edit="handleEdit"
                        @delete="handleDelete"
                    >
                        <template #item.no="{ index }">
                            {{ index + 1 }}
                        </template>
                        <template #item.hak_akses="{ item }">
                            <v-chip
                                v-for="(hak, idx) in item.hak_akses"
                                :key="idx"
                                class="ma-1"
                                color="primary"
                                size="small"
                            >
                                {{ hak }}
                            </v-chip>
                        </template>
                        <template #item.status="{ item }">
                            <v-chip
                                :color="item.status === 'aktif' ? 'success' : 'error'"
                                size="small"
                            >
                                {{ item.status }}
                            </v-chip>
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>

    <!-- Snackbar for notifications -->
    <v-snackbar
        v-model="snackbar"
        :color="snackbarColor"
        :timeout="3000"
        location="top"
    >
        {{ snackbarMessage }}
        <template #actions>
            <v-btn
                variant="text"
                @click="snackbar = false"
            >
                Close
            </v-btn>
        </template>
    </v-snackbar>
</template>