Compare commits
No commits in common. "26e1ee751ec30d72ecd0c3d01423c5ffcd3e58bb" and "26644df501ceaa285a05d20a24d8fe13147bfb3c" have entirely different histories.
26e1ee751e
...
26644df501
@ -19,9 +19,9 @@ class UserController extends Controller
|
|||||||
public function store(Request $request)
|
public function store(Request $request)
|
||||||
{
|
{
|
||||||
$request->validate([
|
$request->validate([
|
||||||
'nama' => 'required|string|unique:users',
|
'nama' => 'required|nama|unique:users',
|
||||||
'password' => 'required|min:6',
|
'password' => 'required|min:6',
|
||||||
'role' => 'required|in:owner,kasir',
|
'role' => 'required|in:owner, kasir',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
User::create([
|
User::create([
|
||||||
|
|||||||
@ -1,103 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
<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,7 +8,6 @@ import InputProduk from '../pages/InputProduk.vue'
|
|||||||
import Kategori from '../pages/Kategori.vue'
|
import Kategori from '../pages/Kategori.vue'
|
||||||
import Sales from '../pages/Sales.vue'
|
import Sales from '../pages/Sales.vue'
|
||||||
import EditProduk from '../pages/EditProduk.vue'
|
import EditProduk from '../pages/EditProduk.vue'
|
||||||
import Akun from '../pages/Akun.vue'
|
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -52,11 +51,6 @@ const routes = [
|
|||||||
name: 'Sales',
|
name: 'Sales',
|
||||||
component: Sales
|
component: Sales
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/akun',
|
|
||||||
name: 'Akun',
|
|
||||||
component: Akun
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/produk/:id/edit', // :id = parameter dinamis
|
path: '/produk/:id/edit', // :id = parameter dinamis
|
||||||
name: 'EditProduk',
|
name: 'EditProduk',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user