Kasir/resources/js/components/EditAkun.vue

<template>
  <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">
        <!-- Nama -->
        <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" 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"
            :options="[
              { value: 'owner', label: 'Owner' },
              { 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">
          <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-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>

<script>
import axios from "axios";
import InputField from "@/components/InputField.vue";
import InputSelect from "@/components/InputSelect.vue";

export default {
  name: "EditAkun",
  props: {
    akun: {
      type: Object,
      required: true,
    },
  },
  components: { InputField, InputSelect },
  data() {
    return {
      form: {
        nama: this.akun?.nama || "",
        password: "",
        role: this.akun?.role || "",
      },
      errors: { nama: "", password: "", role: "" },
      errorMessage: "",
    };
  },
  watch: {
    akun: {
      handler(newVal) {
        if (newVal) {
          this.form = {
            nama: newVal.nama || "",
            password: "",
            role: newVal.role || "",
          };
          this.errors = { nama: "", password: "", role: "" };
          this.errorMessage = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  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;

        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>