fix(FE) : validate number norm & add action, feat user & hak akses
This commit is contained in:
Yusron alamsyah
No files matched your search
@@ -0,0 +1,283 @@
|
||||
<script setup lang="ts">
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import hakAksesData from '~/data/mock/hakAkses.json';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// Detect mode from route query
|
||||
type PageMode = 'create' | 'edit' | 'view';
|
||||
const mode = computed<PageMode>(() => {
|
||||
const modeParam = route.query.mode as string;
|
||||
if (modeParam === 'edit') return 'edit';
|
||||
if (modeParam === 'view') return 'view';
|
||||
return 'create';
|
||||
});
|
||||
|
||||
// Computed readonly state
|
||||
const isReadonly = computed(() => mode.value === 'view');
|
||||
|
||||
// Dynamic page title based on mode
|
||||
const pageTitle = computed(() => {
|
||||
switch (mode.value) {
|
||||
case 'edit':
|
||||
return 'Edit User';
|
||||
case 'view':
|
||||
return 'Detail User';
|
||||
default:
|
||||
return 'Tambah User';
|
||||
}
|
||||
});
|
||||
|
||||
// Dynamic breadcrumbs based on mode
|
||||
const breadcrumbText = computed(() => {
|
||||
switch (mode.value) {
|
||||
case 'edit':
|
||||
return 'Edit';
|
||||
case 'view':
|
||||
return 'Detail';
|
||||
default:
|
||||
return 'Tambah';
|
||||
}
|
||||
});
|
||||
|
||||
const page = ref({ title: pageTitle });
|
||||
const breadcrumbs = computed(() => [
|
||||
{
|
||||
text: 'User',
|
||||
disabled: false,
|
||||
href: '/setting/user'
|
||||
},
|
||||
{
|
||||
text: breadcrumbText.value,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
// Form data
|
||||
const form = ref();
|
||||
const valid = ref(true);
|
||||
const namaUser = ref('');
|
||||
const username = ref('');
|
||||
const email = ref('');
|
||||
const hakAkses = ref<number | null>(null);
|
||||
const status = ref('aktif');
|
||||
|
||||
// Rules
|
||||
const rules = {
|
||||
required: (value: any) => !!value || 'Field ini wajib diisi',
|
||||
email: (value: string) => {
|
||||
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return pattern.test(value) || 'Format email tidak valid';
|
||||
}
|
||||
};
|
||||
|
||||
// Hak Akses options
|
||||
const hakAksesList = ref(hakAksesData);
|
||||
const hakAksesOptions = computed(() => {
|
||||
return hakAksesList.value.map(h => ({
|
||||
title: h.namaHakAkses,
|
||||
value: h.id
|
||||
}));
|
||||
});
|
||||
|
||||
const handleSimpan = async () => {
|
||||
const { valid } = await form.value.validate();
|
||||
|
||||
if (valid) {
|
||||
console.log({
|
||||
namaUser: namaUser.value,
|
||||
username: username.value,
|
||||
email: email.value,
|
||||
hakAkses: hakAkses.value,
|
||||
status: status.value
|
||||
});
|
||||
|
||||
alert('Data berhasil disimpan!');
|
||||
router.push('/setting/user');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
if (confirm('Apakah Anda yakin ingin mereset form?')) {
|
||||
form.value.reset();
|
||||
namaUser.value = '';
|
||||
username.value = '';
|
||||
email.value = '';
|
||||
hakAkses.value = null;
|
||||
status.value = 'aktif';
|
||||
}
|
||||
};
|
||||
|
||||
const handleKembali = () => {
|
||||
router.push('/setting/user');
|
||||
};
|
||||
|
||||
// Load data if edit or view mode
|
||||
onMounted(() => {
|
||||
if (mode.value !== 'create') {
|
||||
const id = route.query.id;
|
||||
// TODO: Load data based on id
|
||||
// For now, just mock data
|
||||
if (id === '1') {
|
||||
namaUser.value = 'Dr. John Doe';
|
||||
username.value = 'john.doe';
|
||||
email.value = '[email protected]';
|
||||
hakAkses.value = 3; // Dokter
|
||||
status.value = 'aktif';
|
||||
} else if (id === '2') {
|
||||
namaUser.value = 'Admin Sistem';
|
||||
username.value = 'admin';
|
||||
email.value = '[email protected]';
|
||||
hakAkses.value = 1; // Super Admin
|
||||
status.value = 'aktif';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<BaseBreadcrumb :title="pageTitle" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
</v-col>
|
||||
|
||||
<!-- Form Card -->
|
||||
<v-col cols="12">
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<h5 class="text-h5 font-weight-bold">Informasi User</h5>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<!-- Nama User -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-label class="mb-2 font-weight-medium">Nama User <span class="text-error">*</span></v-label>
|
||||
<v-text-field
|
||||
v-model="namaUser"
|
||||
placeholder="Masukan nama lengkap user"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:rules="[rules.required]"
|
||||
hide-details="auto"
|
||||
:readonly="isReadonly"
|
||||
:bg-color="isReadonly ? 'grey-lighten-3' : undefined"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Username -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-label class="mb-2 font-weight-medium">Username <span class="text-error">*</span></v-label>
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
placeholder="Masukan username"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:rules="[rules.required]"
|
||||
hide-details="auto"
|
||||
:readonly="isReadonly"
|
||||
:bg-color="isReadonly ? 'grey-lighten-3' : undefined"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Email -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-label class="mb-2 font-weight-medium">Email <span class="text-error">*</span></v-label>
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
placeholder="[email protected]"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
type="email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
hide-details="auto"
|
||||
:readonly="isReadonly"
|
||||
:bg-color="isReadonly ? 'grey-lighten-3' : undefined"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Hak Akses -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-label class="mb-2 font-weight-medium">Hak Akses <span class="text-error">*</span></v-label>
|
||||
<v-autocomplete
|
||||
v-model="hakAkses"
|
||||
:items="hakAksesOptions"
|
||||
placeholder="Pilih hak akses"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:rules="[rules.required]"
|
||||
hide-details="auto"
|
||||
:readonly="isReadonly"
|
||||
:disabled="isReadonly"
|
||||
:bg-color="isReadonly ? 'grey-lighten-3' : undefined"
|
||||
></v-autocomplete>
|
||||
</v-col>
|
||||
|
||||
<!-- Status -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
|
||||
<v-switch
|
||||
v-model="status"
|
||||
true-value="aktif"
|
||||
false-value="tidak aktif"
|
||||
color="success"
|
||||
hide-details="auto"
|
||||
:readonly="isReadonly"
|
||||
:disabled="isReadonly"
|
||||
inset
|
||||
>
|
||||
<template #label>
|
||||
<span :class="status === 'aktif' ? 'text-success' : 'text-error'">
|
||||
{{ status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
|
||||
</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<v-col cols="12">
|
||||
<v-card elevation="10">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-end ga-3">
|
||||
<v-btn
|
||||
color="default"
|
||||
size="large"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-arrow-left"
|
||||
@click="handleKembali"
|
||||
>
|
||||
Kembali
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="!isReadonly"
|
||||
color="error"
|
||||
size="large"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-reload"
|
||||
@click="handleReset"
|
||||
>
|
||||
Reset
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="!isReadonly"
|
||||
color="primary"
|
||||
size="large"
|
||||
prepend-icon="mdi-content-save"
|
||||
@click="handleSimpan"
|
||||
>
|
||||
Simpan
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</template>
|
||||
@@ -0,0 +1,166 @@
|
||||
<script setup lang="ts">
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
|
||||
import usersData from '~/data/mock/users.json';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
namaUser: string;
|
||||
username: string;
|
||||
email: string;
|
||||
hakAkses: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const page = ref({ title: 'User' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Setting',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'User',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
const router = useRouter();
|
||||
const search = ref('');
|
||||
const usersList = ref<User[]>(usersData);
|
||||
|
||||
// Snackbar state
|
||||
const snackbar = ref(false);
|
||||
const snackbarMessage = ref('');
|
||||
const snackbarColor = ref('success');
|
||||
|
||||
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: 'namaUser', sortable: true },
|
||||
{ title: 'Username', key: 'username', sortable: true },
|
||||
{ title: 'Email', key: 'email', sortable: true },
|
||||
{ title: 'Hak Akses', key: 'hakAkses', sortable: true },
|
||||
{ title: 'Status', key: 'status', sortable: true, align: 'center' as const },
|
||||
{ title: 'Actions', key: 'actions', sortable: false, align: 'center' as const }
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{ icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
|
||||
{ icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
|
||||
{ icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
|
||||
];
|
||||
|
||||
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.namaUser}"?`)) {
|
||||
// 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');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
</v-col>
|
||||
<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="Search..."
|
||||
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"
|
||||
:search="search"
|
||||
:actions="actions"
|
||||
min-width="1200px"
|
||||
@view="handleView"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
>
|
||||
<template #item.no="{ index }">
|
||||
{{ index + 1 }}
|
||||
</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>
|
||||
Reference in New Issue
Block a user