kr-phim/app/pages/admin/thanh-vien.vue

<script setup lang="ts">
definePageMeta({
  layout: 'admin',
})

useHead({
  title: 'Quản lý thành viên - CineK Admin',
})

const searchInput = ref('')
const debouncedKeyword = ref('')
const roleFilter = ref('')
const statusFilter = ref('')
const currentPage = ref(1)

let searchTimeout: ReturnType<typeof setTimeout> | undefined

watch(searchInput, (val) => {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    debouncedKeyword.value = val.trim()
    currentPage.value = 1
  }, 300)
})

watch([roleFilter, statusFilter], () => {
  currentPage.value = 1
})

const { data, refresh } = await useFetch('/api/admin/thanh-vien', {
  query: computed(() => ({
    keyword: debouncedKeyword.value,
    role: roleFilter.value,
    status: statusFilter.value,
    page: currentPage.value,
    limit: 20,
  })),
})

const { data: currentUser } = await useFetch('/api/auth/me')

async function toggleActive(member: any) {
  await $fetch(`/api/admin/thanh-vien/${member.id}`, {
    method: 'PATCH',
    body: { active: !member.active },
  })
  await refresh()
}

async function changeRole(member: any, role: string) {
  await $fetch(`/api/admin/thanh-vien/${member.id}`, {
    method: 'PATCH',
    body: { role },
  })
  await refresh()
}

async function deleteMember(member: any) {
  if (!confirm(`Xoá thành viên "${member.name || member.email}"?`)) return
  try {
    await $fetch(`/api/admin/thanh-vien/${member.id}`, { method: 'DELETE' })
    await refresh()
  } catch (err: any) {
    alert(err?.data?.message || 'Xoá thất bại')
  }
}

const members = computed(() => data.value?.items || [])
const totalPages = computed(() => {
  const limit = 20
  return Math.ceil((data.value?.total || 1) / limit)
})

// 3-dot menu state
const menuOpen = ref<number | null>(null)

// Helper để dropdown luôn hiển thị bên trong vùng nhìn thấy
function getDropdownPosition(index: number) {
  const total = members.value?.length || 0
  // Chỉ mở lên trên khi còn ít nhất 2 hàng phía dưới
  if (total <= 2 || index < total - 2) {
    return 'top-full mt-1'
  }
  return 'bottom-full mb-1'
}

const visiblePages = computed(() => {
  const total = totalPages.value
  const current = currentPage.value
  const pages: (number | 'ellipsis')[] = []

  if (total <= 7) {
    for (let i = 1; i <= total; i++) pages.push(i)
    return pages
  }

  pages.push(1)

  if (current > 4) {
    pages.push('ellipsis')
  }

  const start = Math.max(2, Math.min(current - 1, total - 4))
  const end = Math.min(total - 1, Math.max(current + 1, 5))

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  if (end < total - 1) {
    pages.push('ellipsis')
  }

  pages.push(total)

  return pages
})
</script>

<template>
  <div>
    <div class="mb-6">
      <h1 class="admin-section-title">Quản lý thành viên</h1>
      <p class="admin-section-subtitle mt-1">Quản lý tài khoản thành viên CineK ({{ data?.total || 0 }} thành viên)</p>
    </div>

    <div class="admin-card overflow-visible!">
      <div class="grid grid-cols-1 gap-3 border-b border-white/6 p-4
         md:grid-cols-2 xl:grid-cols-[minmax(280px,1fr)_180px_160px] xl:items-center">
        <div class="relative min-w-0 w-full">
          <AppIcon name="search"
            class="pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-400" />

          <input v-model="searchInput" type="text" placeholder="Tìm kiếm thành viên..."
            class="admin-input h-10 w-full pl-10! pr-3">
        </div>

        <select v-model="roleFilter" class="admin-input h-10 w-full min-w-0 px-3">
          <option value="" class="bg-white">Tất cả vai trò</option>
          <option value="user" class="bg-white">User</option>
          <option value="moderator" class="bg-white">Moderator</option>
          <option value="admin" class="bg-white">Admin</option>
        </select>

        <select v-model="statusFilter" class="admin-input h-10 w-full min-w-0 px-3">
          <option value="" class="bg-white">Tất cả trạng thái</option>
          <option value="active" class="bg-white">Đang hoạt động</option>
          <option value="inactive" class="bg-white">Chưa hoạt động</option>
        </select>
      </div>

      <div class="overflow-x-auto admin-scrollbar">
        <table class="w-full" style="border-collapse: collapse; border-spacing: 0;">
          <thead>
            <tr class="text-xs font-bold uppercase tracking-wide text-slate-400">
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">STT</th>
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Thành viên</th>
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Vai trò</th>
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Trạng thái</th>
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Tham gia</th>
              <th style="border-bottom: 3px solid #eeee;" class="px-4 py-3 text-center">Thao tác</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-[#eeee]">
            <tr v-for="member in members" :key="member.id" class="transition hover:bg-white/2">
              <td class="px-4 py-3.5 text-center text-sm font-semibold text-slate-500">{{ members.indexOf(member) + 1 }}
              </td>
              <td class="px-4 py-3.5 text-center">
                <p class="truncate text-sm font-bold text-white">{{ member.name || 'Chưa có tên' }}</p>
                <p class="truncate text-xs text-slate-400">{{ member.email }}</p>
              </td>
              <td class="px-4 py-3.5 text-center">
                <select :value="member.role"
                  class="h-8 rounded-full border border-slate-200 bg-slate-100 px-3 text-xs font-bold text-slate-900 outline-none transition hover:bg-slate-100/60 focus:border-sky-500"
                  @change="changeRole(member, ($event.target as HTMLSelectElement).value)">
                  <option value="user" class="bg-white">User</option>
                  <option value="moderator" class="bg-white">Moderator</option>
                  <option value="admin" class="bg-white">Admin</option>
                </select>
              </td>
              <td class="px-4 py-3.5 text-center">
                <AdminToggle :model-value="member.active"
                  @update:model-value="(val: boolean) => { member.active = val; toggleActive(member) }" />
              </td>
              <td class="px-4 py-3.5 text-center text-sm text-slate-400">
                {{ new Date(member.createdAt).toLocaleDateString('vi-VN') }}
              </td>
              <td class="px-4 py-3.5 text-center">
                <div class="relative inline-flex">
                  <button type="button"
                    class="grid size-9 place-items-center rounded-lg text-zinc-500 transition
                       hover:bg-slate-100 hover:text-zinc-700" title="Thao tác"
                    @click="menuOpen = menuOpen === member.id ? null : member.id">
                    <AppIcon name="ellipsis-vertical" class="size-5 stroke-[2.5]" />
                  </button>
                  <Transition name="dropdown-fade">
                    <div v-if="menuOpen === member.id" :class="[
                      'absolute right-0 min-w-40 rounded-lg border border-slate-200 bg-white py-1 shadow-xl z-50',
                      getDropdownPosition(members.indexOf(member))
                    ]">
                      <button type="button"
                        v-if="currentUser?.id !== member.id"
                        class="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-500 transition hover:bg-red-50"
                        @click="menuOpen = null; deleteMember(member)">
                        <AppIcon name="trash" class="size-4" />
                        Xoá thành viên
                      </button>
                      <div v-else class="px-3 py-2 text-xs text-slate-400">
                        Không thể xoá chính mình
                      </div>
                    </div>
                  </Transition>
                </div>
              </td>
            </tr>
            <tr v-if="!members.length">
              <td colspan="6" class="px-5 py-12 text-center text-sm text-slate-400">
                {{ debouncedKeyword ? 'Không tìm thấy thành viên nào.' : 'Chưa có thành viên nào.' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-if="totalPages > 1" class="flex items-center justify-between border-t border-white/6 p-4">
        <p class="text-sm text-slate-500">Trang {{ currentPage }} / {{ totalPages }}</p>
        <div class="flex items-center gap-2">
          <button type="button"
            class="grid size-9 place-items-center rounded-lg border border-white/8 text-slate-500 transition hover:bg-white/5 hover:text-white disabled:opacity-30"
            :disabled="currentPage <= 1" @click="currentPage--">
            <AppIcon name="chevron-left" class="size-4" />
          </button>
          <template v-for="(page, index) in visiblePages" :key="index">
            <span v-if="page === 'ellipsis'" class="grid size-9 place-items-center text-sm text-slate-500">...</span>
            <button v-else type="button"
              class="grid size-9 place-items-center rounded-lg border text-sm font-semibold transition" :class="page === currentPage
                ? 'border-[#095DF2] bg-[#095DF2] text-white'
                : 'border-white/8 text-slate-500 hover:bg-white/5 hover:text-white'" @click="currentPage = page">
              {{ page }}
            </button>
          </template>
          <button type="button"
            class="grid size-9 place-items-center rounded-lg border border-white/8 text-slate-500 transition hover:bg-white/5 hover:text-white disabled:opacity-30"
            :disabled="currentPage >= totalPages" @click="currentPage++">
            <AppIcon name="chevron-right" class="size-4" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>