Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

validasi create akun dan edit akun

Browse Source
This commit is contained in:
adityaalfarison 2025-09-11 15:15:47 +07:00
parent dbd4d46048
commit 02fdad7ff5
2 changed files with 227 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
resources/js/components/CreateAkun.vue
View File

@ -7,25 +7,34 @@
<form @submit.prevent="createAkun" class="space-y-3">
<!-- Nama -->
<label for="nama">Nama</label>
<div>
<label for="nama" class="block text-sm font-medium">Nama</label>
<InputField
v-model="form.nama"
id="nama"
type="text"
:required="true"
@input="clearError('nama')"
/>
<p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
</div>
<!-- Password -->
<div>
<label for="password">Password</label>
<label for="password" class="block text-sm font-medium">Password</label>
<InputField
v-model="form.password"
id="password"
type="password"
:required="true"
@input="clearError('password')"
/>
<p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
</div>
<label for="peran">Peran</label>
<!-- Role -->
<div>
<label for="peran" class="block text-sm font-medium">Peran</label>
<InputSelect
v-model="form.role"
:options="[
@ -33,7 +42,10 @@
{ value: 'kasir', label: 'Kasir' },
]"
placeholder="-- Pilih Peran --"
@change="clearError('role')"
/>
<p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
</div>
<!-- Tombol -->
<div class="flex justify-end gap-2 mt-4">
@ -53,7 +65,7 @@
</div>
</form>
<!-- Error -->
<!-- Error global -->
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
{{ errorMessage }}
</p>
@ -72,25 +84,65 @@ export default {
data() {
return {
form: { nama: "", password: "", role: "" },
errors: { nama: "", password: "", role: "" },
errorMessage: "",
};
},
methods: {
clearError(field) {
this.errors[field] = "";
this.errorMessage = "";
},
validateForm() {
let valid = true;
this.errors = { nama: "", password: "", role: "" };
if (!this.form.nama) {
this.errors.nama = "Nama wajib diisi";
valid = false;
}
if (!this.form.password) {
this.errors.password = "Password wajib diisi";
valid = false;
} else if (this.form.password.length < 6) {
this.errors.password = "Password minimal 6 karakter";
valid = false;
}
if (!this.form.role) {
this.errors.role = "Role wajib dipilih";
valid = false;
} else if (!["owner", "kasir"].includes(this.form.role)) {
this.errors.role = "Role harus owner atau kasir";
valid = false;
}
return valid;
},
async createAkun() {
if (!this.validateForm()) return;
try {
await axios.post("api/user", this.form, {
await axios.post("/api/user", this.form, {
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
// reset form
this.form = { nama: "", password: "", role: "" };
this.$emit("refresh");
this.$emit("close");
} catch (err) {
if (err.response?.status === 422 && err.response.data.errors) {
// tampilkan error validasi backend
const backendErrors = err.response.data.errors;
Object.keys(backendErrors).forEach((key) => {
this.errors[key] = backendErrors[key][0];
});
} else {
this.errorMessage =
err.response?.data?.message || "Gagal menambah akun.";
}
console.error("Gagal tambah akun:", err);
}
},

110
resources/js/components/EditAkun.vue
View File

@ -1,58 +1,73 @@
<template>
<div class="fixed inset-0 flex items-center justify-center bg-black/65">
<div class="bg-white rounded-lg p-6 w-96">
<div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
<div class="bg-white rounded-lg p-6 w-96 shadow-lg">
<h2 class="text-lg font-bold mb-4">Edit Akun</h2>
<form @submit.prevent="updateAkun" class="space-y-3">
<label for="nama">Nama</label>
<!-- Nama -->
<div>
<label for="nama" class="block text-sm font-medium">Nama</label>
<InputField
v-model="form.nama"
label="nama"
id="nama"
type="text"
:required="true"
class="mb-3"
@input="clearError('nama')"
/>
<div>
<label for="password">Password</label>
<InputField
v-model="form.password"
label="password"
type="password"
:required="false"
class="mb-1"
/>
<p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
<p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
</div>
<label for="peran">Peran</label>
<!-- Password -->
<div>
<label for="password" class="block text-sm font-medium">Password</label>
<InputField
v-model="form.password"
id="password"
type="password"
:required="false"
@input="clearError('password')"
/>
<p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
<p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
</div>
<!-- Role -->
<div>
<label for="role" class="block text-sm font-medium">Peran</label>
<InputSelect
v-model="form.role"
label="peran"
:options="[
{ value: 'owner', label: 'Owner' },
{ value: 'kasir', label: 'Kasir' }
]"
:required="true"
class="mb-3"
placeholder="-- Pilih Peran --"
@change="clearError('role')"
/>
<p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
</div>
<!-- Tombol -->
<div class="flex justify-end gap-2 mt-4">
<button
type="button"
@click="$emit('close')"
class="bg-gray-300 px-4 py-2 rounded"
class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
>
Batal
</button>
<button
type="submit"
class="bg-blue-500 text-white px-4 py-2 rounded"
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
>
Ubah
</button>
</div>
</form>
<!-- Error global -->
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
{{ errorMessage }}
</p>
</div>
</div>
</template>
@ -63,6 +78,7 @@
import InputSelect from "@/components/InputSelect.vue";
export default {
name: "EditAkun",
props: {
akun: {
type: Object,
@ -70,14 +86,15 @@
},
},
components: { InputField, InputSelect },
data() {
return {
form: {
nama: this.akun.nama || "",
nama: this.akun?.nama || "",
password: "",
role: this.akun.role || "",
role: this.akun?.role || "",
},
errors: { nama: "", password: "", role: "" },
errorMessage: "",
};
},
watch: {
@ -89,6 +106,8 @@
password: "",
role: newVal.role || "",
};
this.errors = { nama: "", password: "", role: "" };
this.errorMessage = "";
}
},
deep: true,
@ -96,7 +115,35 @@
},
},
methods: {
clearError(field) {
this.errors[field] = "";
this.errorMessage = "";
},
validateForm() {
let valid = true;
this.errors = { nama: "", password: "", role: "" };
if (!this.form.nama) {
this.errors.nama = "Nama wajib diisi";
valid = false;
}
if (this.form.password && this.form.password.length < 6) {
this.errors.password = "Password minimal 6 karakter";
valid = false;
}
if (!this.form.role) {
this.errors.role = "Role wajib dipilih";
valid = false;
} else if (!["owner", "kasir"].includes(this.form.role)) {
this.errors.role = "Role harus owner atau kasir";
valid = false;
}
return valid;
},
async updateAkun() {
if (!this.validateForm()) return;
try {
const payload = { ...this.form };
if (!payload.password) delete payload.password;
@ -105,12 +152,21 @@
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
});
this.$emit("refresh");
this.$emit("close");
} catch (err) {
console.error("Gagal update akun:", err.response?.data || err.message);
if (err.response?.status === 422 && err.response.data.errors) {
const backendErrors = err.response.data.errors;
Object.keys(backendErrors).forEach((key) => {
this.errors[key] = backendErrors[key][0];
});
} else {
this.errorMessage =
err.response?.data?.message || "Gagal update akun.";
}
console.error("Gagal update akun:", err);
}
},
},