dosen.vue

<script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore';
import type { SalesDetails } from '@db/pages/datatable/types';

const keycloakStore = useKeycloakStore();
// Gunakan computed agar selalu reaktif
const isAuthenticated = computed(() => keycloakStore.authenticated);

const { data: productList } = await useApi<SalesDetails[]>('pages/datatable')

const search = ref('')

// headers
const headers = [
  { title: 'PRODUCT', key: 'product.name' },
  { title: 'DATE', key: 'date' },
  { title: 'CATEGORY', key: 'product.category' },
  { title: 'BUYERS', key: 'buyer.name' },
  { title: 'PAYMENT', key: 'payment', sortable: false },
  { title: 'STATUS', key: 'status', sortable: false },
  { title: 'DELETE', key: 'delete', sortable: false },
]

// 👉 methods
const deleteItem = (itemId: number) => {
  if (!productList.value)
    return

  const index = productList.value.findIndex(item => item.product.id === itemId)

  productList.value.splice(index, 1)
}

const categoryIcons = [
  { name: 'Mouse', icon: 'ri-mouse-fill', color: 'warning' },
  { name: 'Glass', icon: 'ri-glasses-line', color: 'primary' },
  { name: 'Smart Watch', icon: 'ri-time-line', color: 'success' },
  { name: 'Bag', icon: 'ri-shopping-bag-line', color: 'info' },
  { name: 'Storage Device', icon: 'ri-tape-line', color: 'warning' },
  { name: 'Bluetooth', icon: 'ri-bluetooth-line', color: 'error' },
  { name: 'Gaming', icon: 'ri-gamepad-line', color: 'warning' },
  { name: 'Home', icon: 'ri-home-line', color: 'error' },
  { name: 'VR', icon: 'ri-goggles-line', color: 'primary' },
  { name: 'Shoes', icon: 'ri-omega', color: 'success' },
  { name: 'Electronics', icon: 'ri-flashlight-fill', color: 'info' },
  { name: 'Projector', icon: 'ri-projector-line', color: 'warning' },
  { name: 'iPod', icon: 'ri-music-line', color: 'error' },
  { name: 'Keyboard', icon: 'ri-keyboard-box-line', color: 'primary' },
  { name: 'Smart Phone', icon: 'ri-smartphone-line', color: 'success' },
  { name: 'Smart TV', icon: 'ri-tv-line', color: 'info' },
  { name: 'Google Home', icon: 'ri-google-line', color: 'warning' },
  { name: 'Mac', icon: 'ri-apple-line', color: 'error' },
  { name: 'Headphone', icon: 'ri-headphone-line', color: 'primary' },
  { name: 'iMac', icon: 'ri-computer-line', color: 'success' },
  { name: 'iPhone', icon: 'ri-apple-line', color: 'warning' },
]

const resolveStatusColor = (status: string) => {
  if (status === 'Confirmed')
    return 'primary'
  if (status === 'Completed')
    return 'success'
  if (status === 'Cancelled')
    return 'error'
}

const categoryIconFilter = (categoryName: string): {
  icon: string
  color: string
}[] => {
  const index = categoryIcons.findIndex(category => category.name === categoryName)

  if (index !== -1)
    return [{ icon: categoryIcons[index].icon, color: categoryIcons[index].color }]

  return [{ icon: 'ri-question-line', color: 'primary' }]
}

// Tabel dan Filter dari API
const headersapi: Header[] = [
  { title: 'Foto', key: 'foto', align: 'start', sortable: false },
  { title: 'NIP', key: 'nip', sortable: true },
  { title: 'Nama', key: 'nama', sortable: true },
  { title: 'Kode Fakultas', key: 'org', sortable: true },
  { title: 'Aksi', key: 'operation', align: 'start', sortable: false },
];

const items = ref<JsonDosen[]>([]);
const searchText = ref('');
const loading = ref(false);
const error = ref('');
const dialogView = ref(false);
const dialogEdit = ref(false);
const dialogDelete = ref(false);
const selectedDosen = ref<JsonDosen | null>(null);
const dialogSetPassword = ref(false);
const newPassword = ref('');
const confirmPassword = ref('');
const isPasswordNewVisible = ref(false);
const isPasswordKonfVisible = ref(false);

// Interface
interface JsonDosen {
  nip: string;
  nama: string;
  org: string;
}

// Filter Data Berdasarkan Pencarian
const filteredItems = computed(() => {
  if (!searchText.value) return items.value;
  const query = searchText.value.toLowerCase();
  return items.value.filter((item) =>
    [item.nip, item.nama].some((field) =>
      field.toLowerCase().includes(query)
    )
  );
});

// Ambil Data dari API
onMounted(() => {
  getData();
});

async function getData() {
  loading.value = true;
  error.value = '';
  try {
    const response = await fetch('https://api.ui.ac.id/listdosen', {
      headers: {
        Authorization: `Bearer ${keycloakStore.accessToken}`,
      },
    });
    if (!response.ok) throw new Error('Gagal mengambil data dosen');
    const data = await response.json();
    items.value = data;
  } catch (err: any) {
    error.value = err.message || 'Terjadi kesalahan';
  } finally {
    loading.value = false;
  }
}

// Buka Dialog View
function viewDosen(dosen: JsonDosen) {
  selectedDosen.value = dosen;
  dialogView.value = true;
}

// Buka Dialog Edit
function editDosen(dosen: JsonDosen) {
  selectedDosen.value = { ...dosen }; // Buat salinan data dosen
  dialogEdit.value = true;
}

// Simpan Perubahan
function saveChanges() {
  const updatedIndex = items.value.findIndex(
    (item) => item.nip === selectedDosen.value?.nip
  );
  if (updatedIndex !== -1) {
    items.value[updatedIndex] = { ...selectedDosen.value };
  }
  dialogEdit.value = false;
}

// Buka Dialog Delete
function confirmDelete(dosen: JsonDosen) {
  selectedDosen.value = dosen;
  dialogDelete.value = true;
}

// Hapus Data
function deleteDosen() {
  const deleteIndex = items.value.findIndex(
    (item) => item.nip === selectedDosen.value?.nip
  );
  if (deleteIndex !== -1) {
    items.value.splice(deleteIndex, 1);
  }
  dialogDelete.value = false;
}

// Buka Dialog Password
function viewSetPassword(dosen: JsonDosen) {
  selectedDosen.value = dosen;
  dialogSetPassword.value = true;
}

const passwordRequirements = [
  'Minimum 8 characters long - the more, the better',
  'At least one lowercase character',
  'At least one number',
  'At least one symbol, or whitespace character',
]

// Aturan Validasi
const passwordRules = [
  (v: string) => !!v || 'Password is required',
  (v: string) => v.length >= 8 || 'Password must be at least 8 characters long',
  (v: string) => /[a-z]/.test(v) || 'Password must contain at least one lowercase letter',
  (v: string) => /[A-Z]/.test(v) || 'Password must contain at least one uppercase letter',
  (v: string) => /\d/.test(v) || 'Password must contain at least one number',
  (v: string) => /[ !"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/.test(v) || 'Password must contain at least one symbol or whitespace',
];

const confirmPasswordRules = [
  (v: string) => !!v || 'Confirm password is required',
  (v: string) => v === newPassword.value || 'Passwords do not match',
];

// Generate Password
function generatePassword(length: number = 10): string {
  const lowercase = "abcdefghijklmnopqrstuvwxyz";
  const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const numbers = "0123456789";
  const symbols = ` !"#$%&'()*+,-./:;<=>?@[\\]^_\`{|}~`;

  // At least one character from each required category
  const mandatoryCharacters = [
    lowercase[Math.floor(Math.random() * lowercase.length)],
    uppercase[Math.floor(Math.random() * uppercase.length)],
    numbers[Math.floor(Math.random() * numbers.length)],
    symbols[Math.floor(Math.random() * symbols.length)],
  ];

  // Combine all character sets into one charset
  const allCharacters = lowercase + uppercase + numbers + symbols;
  const remainingLength = length - mandatoryCharacters.length;
  let password = mandatoryCharacters;

  // Fill the rest of the password with random characters from the combined charset
  for (let i = 0; i < remainingLength; i++) {
    const randomChar = allCharacters[Math.floor(Math.random() * allCharacters.length)];
    password.push(randomChar);
  }

  // Shuffle the password to ensure randomness
  password = password.sort(() => Math.random() - 0.5);

  // Return the password as a string
  return password.join('');
}

// Set Password
function setPassword() {
  if (newPassword.value.length < 8 || !/[a-z]/.test(newPassword.value) || !/\d/.test(newPassword.value) || !/[ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(newPassword.value)) {
    alert("Password harus memiliki minimal 8 karakter, setidaknya satu huruf kecil, satu angka, dan satu karakter khusus.");
    return;
  }

  if (newPassword.value !== confirmPassword.value) {
    alert("Password dan konfirmasi password tidak cocok.");
    return;
  }

  // Simulasi pengubahan password
  // Di sini Anda bisa menambahkan logika untuk mengupdate password ke server
  alert(`Password atas nama ${selectedDosen.value?.nama} sudah diubah`);

  // Reset input
  newPassword.value = '';
  confirmPassword.value = '';
  dialogSetPassword.value = false;
}
</script>

<template>
  <div v-if="isAuthenticated">
    <VCardText>
      <VRow>
        <VCol cols="12" offset-md="8" md="4" sm="12">
          <VTextField v-model="searchText" label="Search" placeholder="Search ..." append-inner-icon="ri-search-line"
            clearable @click:clear="searchText = ''" hide-details dense outlined />
        </VCol>
      </VRow>
    </VCardText>

    <!-- 👉 Data Table API  -->
    <VDataTable :headers="headersapi" :items="filteredItems || []" :search="searchText" :items-per-page="10"
      class="text-no-wrap">
      <!-- Foto -->
      <template #item.foto="{ item }">
        <div class="d-flex align-center">
          <div>
            <VImg rounded="circle" :src="`https://api.ui.ac.id/public/photo/${item.nip}.jpg`" height="40" width="40" />
          </div>
        </div>
      </template>

      <!-- Nama -->
      <template #item.nama="{ item }">
        <div class="d-flex align-center">
          <VIcon size="18" class="bg-success rounded-0">
            ri-user-follow-fill
          </VIcon> &nbsp;
          <span class="d-block font-weight-medium text-truncate text-high-emphasis">{{ item.nama }}</span>
        </div>
      </template>

      <!-- Aksi -->
      <template #item.operation="{ item }">
        <div class="d-flex align-center">
          <VBtn color="primary" size="small" icon @click="viewSetPassword(item)">
            <VIcon icon="ri-lock-line" />
          </VBtn>
          <VBtn color="info" size="small" icon @click="viewDosen(item)">
            <VIcon icon="ri-eye-line" />
          </VBtn>
          <VBtn color="warning" size="small" icon @click="editDosen(item)">
            <VIcon icon="ri-pencil-line" />
          </VBtn>
          <VBtn color="error" size="small" icon @click="confirmDelete(item)">
            <VIcon icon="ri-delete-bin-line" />
          </VBtn>
        </div>
      </template>
    </VDataTable>

    <!-- Dialog untuk Set Password -->
    <VDialog v-model="dialogSetPassword" persistent :max-width="$vuetify.display.smAndDown ? 'auto' : 400">
      <DialogCloseBtn variant="text" size="default"
        @click="dialogSetPassword = false; newPassword = ''; confirmPassword = '';" />

      <VCard class="pa-sm-5 pa-3">
        <VCardTitle class="text-center pb-5 text-h4">Set Password</VCardTitle>

        <VCardText>
          <VRow>
            <VCol cols="12" md="12" class="mb-n3">
              <VAlert color="primary" variant="tonal" class="mb-3">
                <p class="mb-0">
                  <strong>NIP:</strong> {{ selectedDosen?.nip }}
                </p>
                <p class="mb-0">
                  <strong>Nama:</strong> {{ selectedDosen?.nama }}
                </p>
              </VAlert>

              <VTextField v-model="newPassword" label="Password Baru" :maxlength="20"
                :type="isPasswordNewVisible ? 'text' : 'password'"
                :append-inner-icon="isPasswordNewVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                @click:append-inner="isPasswordNewVisible = !isPasswordNewVisible" :rules="passwordRules" clearable
                outlined dense />
            </VCol>
            <VCol cols="12" md="12">
              <VTextField v-model="confirmPassword" label="Konfirmasi Password" :maxlength="20"
                :type="isPasswordKonfVisible ? 'text' : 'password'"
                :append-inner-icon="isPasswordKonfVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                @click:append-inner="isPasswordKonfVisible = !isPasswordKonfVisible" :rules="confirmPasswordRules"
                clearable outlined dense />
            </VCol>

          </VRow>
          <VRow class="pl-3">
            <h6 class="text-h6 text-body-2 mt-1">
              Password Requirements:
            </h6>

            <VList>
              <VListItem v-for="(item, index) in passwordRequirements" :key="index" class="px-0 mt-n4 mb-n2">
                <template #prepend>
                  <VIcon size="8" icon="ri-circle-fill"
                    color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))" />
                </template>
                <VListItemTitle class="text-body-2 text-wrap">
                  {{ item }}
                </VListItemTitle>
              </VListItem>
            </VList>
          </VRow>
        </VCardText>

        <VCardActions class="ma-n3">
          <VCol cols="12" class="d-flex flex-wrap justify-center gap-2">
            <VBtn class="bg-warning" color="white" variant="tonal" @click="setPassword">Save</VBtn>
            <VBtn color="primary" variant="outlined"
              @click="dialogSetPassword = false; newPassword = ''; confirmPassword = '';">Cancel</VBtn>
            <VBtn color="secondary" variant="outlined"
              @click="newPassword = generatePassword(); confirmPassword = newPassword">Generate Password</VBtn>
          </VCol>
        </VCardActions>
      </VCard>
    </VDialog>

    <!-- Dialog untuk Detail -->
    <VDialog v-model="dialogView" persistent :max-width="$vuetify.display.smAndDown ? 'auto' : 600">
      <!-- 👉 dialog close btn -->
      <DialogCloseBtn variant="text" size="default" @click="dialogView = false" />

      <VCard class="pa-sm-5 pa-3">
        <VCardTitle class="text-center pb-5 text-h4">Detail Dosen</VCardTitle>
        <VCardText>
          <div class="d-flex align-center">
            <VImg rounded="circle" v-if="selectedDosen"
              :src="`https://api.ui.ac.id/public/photo/${selectedDosen.nip}.jpg`" height="150" width="150"
              class="mb-4" />
          </div>
          <VAlert color="primary" variant="tonal">
            <p class="mb-0"><strong>NIP:</strong> {{ selectedDosen?.nip }}</p>
            <p class="mb-0"><strong>Nama:</strong> {{ selectedDosen?.nama }}</p>
            <p class="mb-0"><strong>Kode Fakultas:</strong> {{ selectedDosen?.org }}</p>
          </VAlert>
        </VCardText>

        <VCardActions class="ma-n3">
          <!-- <VSpacer /> -->
          <!-- 👉 Close -->
          <VCol cols="12" class="d-flex flex-wrap justify-center gap-2">
            <VBtn class="bg-info" color="white" variant="tonal" @click="dialogView = false">Close</VBtn>
          </VCol>
        </VCardActions>
      </VCard>
    </VDialog>

    <!-- Dialog untuk Edit -->
    <VDialog v-model="dialogEdit" persistent :max-width="$vuetify.display.smAndDown ? 'auto' : 600">
      <!-- 👉 dialog close btn -->
      <DialogCloseBtn variant="text" size="default" @click="dialogEdit = false" />

      <VCard class="pa-sm-5 pa-3">
        <VCardTitle class="text-center pb-5 text-h4">Edit Dosen</VCardTitle>

        <VCardText>
          <VRow>
            <VCol cols="12" md="12">
              <VTextField v-model="selectedDosen.nama" label="Nama" outlined dense />
            </VCol>
            <VCol cols="12" md="12">
              <VTextField v-model="selectedDosen.org" label="Kode Fakultas" outlined dense />
            </VCol>
          </VRow>
        </VCardText>

        <VCardActions class="ma-n3">
          <!-- <VSpacer /> -->
          <VCol cols="12" class="d-flex flex-wrap justify-center gap-2">
            <VBtn class="bg-warning" color="white" variant="tonal" @click="saveChanges">Save</VBtn>
            <VBtn color="primary" variant="outlined" @click="dialogEdit = false">Cancel</VBtn>
          </VCol>
        </VCardActions>
      </VCard>
    </VDialog>

    <!-- Dialog untuk Konfirmasi Delete -->
    <VDialog v-model="dialogDelete" persistent :max-width="$vuetify.display.smAndDown ? 'auto' : 400">
      <!-- 👉 dialog close btn -->
      <DialogCloseBtn variant="text" size="default" @click="dialogDelete = false" />

      <VCard class="pa-sm-5 pa-3">
        <VCardTitle class="text-center pb-5 text-h4">Konfirmasi Hapus</VCardTitle>
        <VCardText class="text-justify">
          <p>Apakah Anda yakin ingin menghapus dosen dengan nama "{{ selectedDosen?.nama }}"?</p>
        </VCardText>

        <VCardActions class="ma-n3">
          <!-- <VSpacer /> -->
          <VCol cols="12" class="d-flex flex-wrap justify-center gap-2">
            <VBtn class="bg-error" color="white" variant="tonal" @click="deleteDosen">Hapus</VBtn>
            <VBtn color="primary" variant="outlined" @click="dialogDelete = false">Batal</VBtn>
          </VCol>
        </VCardActions>
      </VCard>
    </VDialog>

  </div>

  <div v-else>
    <VCardText>
      <VRow>
        <VCol cols="12" md="7" sm="12">
          <VBtn v-if="isAuthenticated == false" class="bg-error ml-2 mr-2" prepend-icon="ri-user-follow-line">
            Not Connected
          </VBtn>
        </VCol>

        <VCol cols="12" md="5" sm="12">
          <VTextField v-model="search" label="Search" placeholder="Search ..." append-inner-icon="ri-search-line"
            single-line hide-details dense outlined />
        </VCol>
      </VRow>
    </VCardText>

    <!-- 👉 Data Table  -->
    <VDataTable :headers="headers" :items="productList || []" :search="search" :items-per-page="10"
      class="text-no-wrap">
      <!-- product -->
      <template #item.product.name="{ item }">
        <div class="d-flex align-center">
          <div>
            <VImg :src="item.product.image" height="40" width="40" />
          </div>
          <div class="d-flex flex-column ms-3">
            <span class="d-block font-weight-medium text-truncate text-high-emphasis">{{ item.product.name }}</span>
            <span class="text-xs">{{ item.product.brand }}</span>
          </div>
        </div>
      </template>

      <!-- category -->
      <template #item.product.category="{ item }">
        <div class="d-flex align-center">
          <VAvatar v-for="(category, index) in categoryIconFilter(item.product.category)" :key="index" size="26"
            :color="category.color" variant="tonal">
            <VIcon size="18" :color="category.color" class="rounded-0">
              {{ category.icon }}
            </VIcon>
          </VAvatar>
          <span class="ms-1 text-no-wrap">{{ item.product.category }}</span>
        </div>
      </template>

      <!-- buyer -->
      <template #item.buyer.name="{ item }">
        <div class="d-flex align-center">
          <VAvatar size="1.875rem" :color="!item.buyer.avatar ? 'primary' : undefined"
            :variant="!item.buyer.avatar ? 'tonal' : undefined">
            <VImg v-if="item.buyer.avatar" :src="item.buyer.avatar" />
            <span v-else class="text-sm">{{ item.buyer.name.slice(0, 2).toUpperCase() }}</span>
          </VAvatar>
          <span class="text-no-wrap font-weight-medium text-high-emphasis ms-2">{{ item.buyer.name }}</span>
        </div>
      </template>

      <!-- Payment -->
      <template #item.payment="{ item }">
        <div class="d-flex flex-column">
          <div class="d-flex align-center">
            <span class="text-high-emphasis font-weight-medium">${{ item.payment.paidAmount }}</span>
            <span v-if="item.payment.paidAmount !== item.payment.total">/{{ item.payment.total }}</span>
          </div>
          <span class="text-xs text-no-wrap">{{ item.payment.receivedPaymentStatus }}</span>
        </div>
      </template>

      <!-- Status -->
      <template #item.status="{ item }">
        <VChip :color="resolveStatusColor(item.payment.status)"
          :class="`text-${resolveStatusColor(item.payment.status)}`" size="small" class="font-weight-medium">
          {{ item.payment.status }}
        </VChip>
      </template>

      <!-- Delete -->
      <template #item.delete="{ item }">
        <IconBtn size="small" @click="deleteItem(item.product.id)">
          <VIcon icon="ri-delete-bin-line" />
        </IconBtn>
      </template>
    </VDataTable>
  </div>
</template>