[feat Akun.vue, CreateAkun, EditAkun, Update UserController, Index.js]
This commit is contained in:
timotiabbauftech
parent
fcd7719826
commit
bb7d6e7a32
@ -19,7 +19,7 @@ class UserController extends Controller
|
||||
public function store(Request $request)
|
||||
{
|
||||
$request->validate([
|
||||
'nama' => 'required|nama|unique:users',
|
||||
'nama' => 'required|string|unique:users',
|
||||
'password' => 'required|min:6',
|
||||
'role' => 'required|in:owner,kasir',
|
||||
]);
|
||||
|
||||
103
resources/js/components/CreateAkun.vue
Normal file
103
resources/js/components/CreateAkun.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||||
<div class="bg-white rounded-lg p-6 w-96 shadow-lg">
|
||||
<h2 class="text-lg font-bold mb-4">Tambah Akun</h2>
|
||||
|
||||
<form @submit.prevent="createAkun">
|
||||
<!-- Nama -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium mb-1">Nama</label>
|
||||
<input
|
||||
v-model.trim="form.nama"
|
||||
type="text"
|
||||
class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium mb-1">Password</label>
|
||||
<input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Peran -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium mb-1">Peran</label>
|
||||
<select
|
||||
v-model="form.role"
|
||||
class="border rounded w-full p-2 focus:ring focus:ring-blue-300"
|
||||
required
|
||||
>
|
||||
<option disabled value="">-- Pilih Peran --</option>
|
||||
<option value="owner">Owner</option>
|
||||
<option value="kasir">Kasir</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="$emit('close')"
|
||||
class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Error -->
|
||||
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "CreateAkun",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
nama: "",
|
||||
password: "",
|
||||
role: "",
|
||||
},
|
||||
errorMessage: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async createAkun() {
|
||||
try {
|
||||
await axios.post("api/user", this.form);
|
||||
|
||||
// reset form
|
||||
this.form = { nama: "", password: "", role: "" };
|
||||
|
||||
// tutup modal dan refresh data
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
} catch (err) {
|
||||
this.errorMessage =
|
||||
err.response?.data?.message || "Gagal menambah akun.";
|
||||
console.error("Gagal tambah akun:", err);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
95
resources/js/components/EditAkun.vue
Normal file
95
resources/js/components/EditAkun.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<div class="bg-white rounded-lg p-6 w-96">
|
||||
<h2 class="text-lg font-bold mb-4">Edit Akun</h2>
|
||||
|
||||
<form @submit.prevent="updateAkun">
|
||||
<!-- Nama -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium">Nama</label>
|
||||
<input v-model="form.nama" type="text" class="border rounded w-full p-2" required />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium">Password</label>
|
||||
<input v-model="form.password" type="password" class="border rounded w-full p-2" />
|
||||
<small class="text-gray-500">Kosongkan jika tidak ingin mengubah password</small>
|
||||
</div>
|
||||
|
||||
<!-- Peran -->
|
||||
<div class="mb-3">
|
||||
<label class="block font-medium">Peran</label>
|
||||
<select v-model="form.role" class="border rounded w-full p-2" required>
|
||||
<option value="">-- Pilih Peran --</option>
|
||||
<option value="owner">Owner</option>
|
||||
<option value="kasir">Kasir</option>
|
||||
</select>
|
||||
</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">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
|
||||
Ubah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
akun: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
nama: this.akun.nama || "",
|
||||
password: "",
|
||||
role: this.akun.role || "", // gunakan "role" bukan "peran"
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
akun: {
|
||||
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);
|
||||
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
} catch (err) {
|
||||
console.error("Gagal update akun:", err.response?.data || err.message);
|
||||
alert("Update akun gagal. Silakan cek kembali inputan.");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
211
resources/js/pages/Akun.vue
Normal file
211
resources/js/pages/Akun.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Create/Edit Akun -->
|
||||
<CreateAkun
|
||||
v-if="creatingAkun"
|
||||
:isOpen="creatingAkun"
|
||||
:akun="detail"
|
||||
@close="closeAkun"
|
||||
/>
|
||||
|
||||
<EditAkun
|
||||
v-if="editingAkun"
|
||||
:isOpen="editingAkun"
|
||||
:akun="detail"
|
||||
@close="closeEditAkun"
|
||||
/>
|
||||
|
||||
<!-- Modal Delete -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="confirmDeleteOpen"
|
||||
title="Hapus User"
|
||||
message="Apakah Anda yakin ingin menghapus user ini?"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="closeDeleteModal"
|
||||
/>
|
||||
|
||||
<div class="p-6 min-h-[75vh]">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-bold text-D">Manajemen Akun</h1>
|
||||
<button
|
||||
@click="tambahAkun"
|
||||
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Tambah User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
|
||||
>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-C text-white">
|
||||
<th class="px-6 py-4 text-center text-D border-r border-[#b09065]">No</th>
|
||||
<th class="px-6 py-4 text-center text-D border-r border-[#b09065]">Nama</th>
|
||||
<th class="px-6 py-4 text-center text-D border-r border-[#b09065]">Role</th>
|
||||
<th class="px-6 py-4 text-center text-D">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in akun"
|
||||
:key="item.id"
|
||||
class="border-b border-gray-200 hover:bg-gray-50 transition duration-150"
|
||||
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
||||
>
|
||||
<td class="px-6 py-4 border-r border-gray-200 text-center font-medium text-gray-900">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td class="px-6 py-4 border-r border-gray-200 text-D">
|
||||
{{ item.nama }}
|
||||
</td>
|
||||
<td class="px-6 py-4 border-r border-gray-200 text-gray-800">
|
||||
{{ item.role }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex justify-center gap-2">
|
||||
<button
|
||||
@click="ubahAkun(item)"
|
||||
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
<button
|
||||
@click="hapusAkun(item)"
|
||||
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
|
||||
>
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Empty State -->
|
||||
<tr v-if="akun.length === 0 && !loading">
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center">
|
||||
<svg
|
||||
class="w-12 h-12 text-gray-400 mb-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
|
||||
/>
|
||||
</svg>
|
||||
<p>Tidak ada data user</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex justify-center items-center py-8">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
|
||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||||
import CreateAkun from "../components/CreateAkun.vue";
|
||||
import EditAkun from "../components/EditAkun.vue";
|
||||
|
||||
// State
|
||||
const akun = ref([]);
|
||||
const loading = ref(false);
|
||||
const creatingAkun = ref(false);
|
||||
const detail = ref(null);
|
||||
const editingAkun = ref(false);
|
||||
const confirmDeleteOpen = ref(false);
|
||||
const akunToDelete = ref(null);
|
||||
|
||||
// Fetch data dari API
|
||||
const fetchAkun = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.get("/api/user");
|
||||
akun.value = response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching akun:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Tambah
|
||||
const tambahAkun = () => {
|
||||
detail.value = null;
|
||||
creatingAkun.value = true;
|
||||
};
|
||||
|
||||
// Ubah
|
||||
const ubahAkun = (item) => {
|
||||
detail.value = item;
|
||||
editingAkun.value = true;
|
||||
};
|
||||
|
||||
// Hapus
|
||||
const hapusAkun = (item) => {
|
||||
akunToDelete.value = item;
|
||||
confirmDeleteOpen.value = true;
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
try {
|
||||
await axios.delete(`/api/user/${akunToDelete.value.id}`);
|
||||
fetchAkun();
|
||||
confirmDeleteOpen.value = false;
|
||||
} catch (error) {
|
||||
console.error("Error deleting akun:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
confirmDeleteOpen.value = false;
|
||||
akunToDelete.value = null;
|
||||
};
|
||||
|
||||
// Tutup modal Create/Edit
|
||||
const closeAkun = () => {
|
||||
creatingAkun.value = false;
|
||||
fetchAkun();
|
||||
};
|
||||
|
||||
const closeEditAkun = () => {
|
||||
editingAkun.value = false;
|
||||
fetchAkun();
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchAkun();
|
||||
});
|
||||
</script>
|
||||
@ -8,6 +8,7 @@ import InputProduk from '../pages/InputProduk.vue'
|
||||
import Kategori from '../pages/Kategori.vue'
|
||||
import Sales from '../pages/Sales.vue'
|
||||
import EditProduk from '../pages/EditProduk.vue'
|
||||
import Akun from '../pages/Akun.vue'
|
||||
|
||||
|
||||
const routes = [
|
||||
@ -51,6 +52,11 @@ const routes = [
|
||||
name: 'Sales',
|
||||
component: Sales
|
||||
},
|
||||
{
|
||||
path: '/akun',
|
||||
name: 'Akun',
|
||||
component: Akun
|
||||
},
|
||||
{
|
||||
path: '/produk/:id/edit', // :id = parameter dinamis
|
||||
name: 'EditProduk',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user