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

Compare commits

base: Magang-2025:e454ef291164f3130c9885488bcae0cf22dc5acc
Branches Tags
Magang-2025:main
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
..
compare: Magang-2025:3e96a158e5bc8466b1d2a5dddb1eff539433c46e
Branches Tags
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
Magang-2025:main

No commits in common. "e454ef291164f3130c9885488bcae0cf22dc5acc" and "3e96a158e5bc8466b1d2a5dddb1eff539433c46e" have entirely different histories.
e454ef2911 ... 3e96a158e5

2 changed files with 111 additions and 219 deletions
Show Stats Expand all files Collapse all files

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

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

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

@ -1,174 +1,118 @@
<template> <template>
<div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50"> <div class="fixed inset-0 flex items-center justify-center bg-black/65">
<div class="bg-white rounded-lg p-6 w-96 shadow-lg"> <div class="bg-white rounded-lg p-6 w-96">
<h2 class="text-lg font-bold mb-4">Edit Akun</h2> <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
<form @submit.prevent="updateAkun" class="space-y-3"> <form @submit.prevent="updateAkun" class="space-y-3">
<!-- Nama --> <label for="nama">Nama</label>
<div>
<label for="nama" class="block text-sm font-medium">Nama</label>
<InputField <InputField
v-model="form.nama" v-model="form.nama"
id="nama" label="nama"
type="text" type="text"
:required="true" :required="true"
@input="clearError('nama')" class="mb-3"
/> />
<p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
</div>
<!-- Password --> <div>
<div> <label for="password">Password</label>
<label for="password" class="block text-sm font-medium">Password</label>
<InputField <InputField
v-model="form.password" v-model="form.password"
id="password" label="password"
type="password" type="password"
:required="false" :required="false"
@input="clearError('password')" class="mb-1"
/> />
<p class="text-sm">Kosongkan jika tidak ingin ubah password</p> <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> </div>
<!-- Role --> <label for="peran">Peran</label>
<div>
<label for="role" class="block text-sm font-medium">Peran</label>
<InputSelect <InputSelect
v-model="form.role" v-model="form.role"
label="peran"
:options="[ :options="[
{ value: 'owner', label: 'Owner' }, { value: 'owner', label: 'Owner' },
{ value: 'kasir', label: 'Kasir' } { value: 'kasir', label: 'Kasir' }
]" ]"
placeholder="-- Pilih Peran --" :required="true"
@change="clearError('role')" class="mb-3"
/> />
<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">
<div class="flex justify-end gap-2 mt-4"> <button
<button type="button"
type="button" @click="$emit('close')"
@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
Batal </button>
</button> <button
<button type="submit"
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
Ubah </button>
</button> </div>
</div> </form>
</form> </div>
<!-- Error global -->
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
{{ errorMessage }}
</p>
</div> </div>
</div> </template>
</template>
<script> <script>
import axios from "axios"; import axios from "axios";
import InputField from "@/components/InputField.vue"; import InputField from "@/components/InputField.vue";
import InputSelect from "@/components/InputSelect.vue"; import InputSelect from "@/components/InputSelect.vue";
export default { export default {
name: "EditAkun", props: {
props: { akun: {
akun: { type: Object,
type: Object, required: true,
required: true,
},
},
components: { InputField, InputSelect },
data() {
return {
form: {
nama: this.akun?.nama || "",
password: "",
role: this.akun?.role || "",
}, },
errors: { nama: "", password: "", role: "" }, },
errorMessage: "", components: { InputField, InputSelect },
};
}, data() {
watch: { return {
akun: { form: {
handler(newVal) { nama: this.akun.nama || "",
if (newVal) { password: "",
this.form = { role: this.akun.role || "",
nama: newVal.nama || "", },
password: "", };
role: newVal.role || "", },
}; watch: {
this.errors = { nama: "", password: "", role: "" }; akun: {
this.errorMessage = ""; handler(newVal) {
if (newVal) {
this.form = {
nama: newVal.nama || "",
password: "",
role: newVal.role || "",
};
}
},
deep: true,
immediate: true,
},
},
methods: {
async updateAkun() {
try {
const payload = { ...this.form };
if (!payload.password) delete payload.password;
await axios.put(`/api/user/${this.akun.id}`, payload, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
this.$emit("refresh");
this.$emit("close");
} catch (err) {
console.error("Gagal update akun:", err.response?.data || err.message);
} }
}, },
deep: true,
immediate: true,
}, },
}, };
methods: { </script>
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;
await axios.put(`/api/user/${this.akun.id}`, payload, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
this.$emit("refresh");
this.$emit("close");
} catch (err) {
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);
}
},
},
};
</script>