@finema/finework-layer 2.0.61 → 2.0.63

package/app/components/HelpHub/ManualViewer.vue

@@ -0,0 +1,464 @@
+<template>
+  <Slideover
+    :open="isOpen"
+    :portal="true"
+    :modal="false"
+    :dismissible="false"
+    :ui="{ content: 'w-full max-w-[560px]' }"
+    side="right"
+    @update:open="(val) => emit('update', val)"
+  >
+    <template #content>
+      <div class="flex h-full flex-col">
+        <!-- Header -->
+        <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
+          <div class="flex min-w-0 items-center gap-3">
+            <button
+              v-if="mode !== 'list'"
+              class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+              type="button"
+              title="กลับไปหน้ารายการ"
+              @click="backToList"
+            >
+              <Icon
+                name="ph:arrow-left"
+                class="size-5"
+              />
+            </button>
+            <div
+              v-else
+              class="bg-primary-100 flex size-9 shrink-0 items-center justify-center rounded-lg"
+            >
+              <Icon
+                name="ph:book-open"
+                class="text-primary-600 size-5"
+              />
+            </div>
+            <div class="min-w-0">
+              <h2 class="truncate text-base font-semibold text-gray-900">
+                {{ headerTitle }}
+              </h2>
+              <p class="truncate text-xs text-gray-500">
+                {{ headerSubtitle }}
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-1">
+            <a
+              v-if="mode === 'view' && current?.file"
+              :href="current.file.url"
+              target="_blank"
+              rel="noopener"
+              class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+              title="เปิดแบบเต็มจอ"
+            >
+              <Icon
+                name="ph:arrow-square-out"
+                class="size-5"
+              />
+            </a>
+            <a
+              v-if="mode === 'view' && current?.file"
+              :href="current.file.url"
+              :download="`${current.name}.pdf`"
+              class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+              title="ดาวน์โหลด PDF"
+            >
+              <Icon
+                name="ph:download-simple"
+                class="size-5"
+              />
+            </a>
+            <button
+              v-if="mode === 'view' && current && canManage(current.app)"
+              class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+              type="button"
+              title="แก้ไข"
+              @click="startEdit(current)"
+            >
+              <Icon
+                name="ph:pencil-simple"
+                class="size-5"
+              />
+            </button>
+            <button
+              class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+              type="button"
+              @click="emit('update', false)"
+            >
+              <Icon
+                name="ph:x"
+                class="size-5"
+              />
+            </button>
+          </div>
+        </div>
+
+        <!-- List -->
+        <template v-if="mode === 'list'">
+          <div class="flex-1 overflow-y-auto p-3">
+            <Loader :loading="loading && !manuals.length">
+              <div
+                v-if="!groups.length"
+                class="flex flex-col items-center justify-center gap-2 px-8 py-16 text-center"
+              >
+                <div class="mb-2 flex size-16 items-center justify-center rounded-full bg-gray-100 text-gray-400">
+                  <Icon
+                    name="ph:book-open"
+                    class="size-8"
+                  />
+                </div>
+                <h3 class="text-base font-bold text-gray-900">
+                  ยังไม่มีคู่มือ
+                </h3>
+                <p class="max-w-xs text-sm text-gray-500">
+                  {{ canManageAny
+                    ? 'เริ่มต้นด้วยการเพิ่มคู่มือของแอพที่คุณดูแล'
+                    : 'ทีมงานกำลังจัดทำคู่มืออยู่ หากติดปัญหาแจ้งทีมได้ผ่าน Feedback' }}
+                </p>
+                <Button
+                  v-if="!canManageAny"
+                  class="mt-3"
+                  icon="ph:chat-circle-text"
+                  @click="emit('feedback')"
+                >
+                  ส่ง Feedback
+                </Button>
+              </div>
+
+              <div
+                v-for="group in groups"
+                :key="group.app"
+                class="mb-3 last:mb-0"
+              >
+                <div class="flex items-center gap-2 px-2 pb-1">
+                  <img
+                    :src="logoOf(group.app)"
+                    :alt="group.label"
+                    class="size-4 rounded"
+                  />
+                  <span class="text-xs font-semibold">
+                    {{ group.label }}
+                  </span>
+                  <span
+                    v-if="group.app === currentModule"
+                    class="bg-primary-50 text-primary-600 rounded-full px-1.5 py-0.5 text-[10px] font-semibold"
+                  >
+                    หน้านี้
+                  </span>
+                </div>
+                <button
+                  v-for="manual in group.items"
+                  :key="manual.id"
+                  class="group flex w-full cursor-pointer items-center gap-3 rounded-xl p-3 text-left transition hover:bg-gray-50"
+                  type="button"
+                  @click="openManual(manual)"
+                >
+                  <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500">
+                    <Icon
+                      name="ph:file-pdf"
+                      class="size-5"
+                    />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate font-semibold text-gray-900">
+                      {{ manual.name }}
+                    </div>
+                    <div class="truncate text-xs text-gray-500">
+                      {{ manual.description || `ปรับปรุง ${formatDate(manual.updated_at)}` }}
+                    </div>
+                  </div>
+                  <span
+                    v-if="canManage(manual.app)"
+                    class="flex items-center gap-1 opacity-0 transition group-hover:opacity-100"
+                  >
+                    <span
+                      class="flex size-7 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-200 hover:text-gray-600"
+                      title="แก้ไข"
+                      @click.stop="startEdit(manual)"
+                    >
+                      <Icon
+                        name="ph:pencil-simple"
+                        class="size-4"
+                      />
+                    </span>
+                    <span
+                      class="flex size-7 items-center justify-center rounded-lg text-gray-400 hover:bg-red-100 hover:text-red-600"
+                      title="ลบ"
+                      @click.stop="confirmDelete = manual"
+                    >
+                      <Icon
+                        name="ph:trash"
+                        class="size-4"
+                      />
+                    </span>
+                  </span>
+                  <Icon
+                    v-else
+                    name="ph:caret-right"
+                    class="size-4 shrink-0 text-gray-300"
+                  />
+                </button>
+              </div>
+            </Loader>
+          </div>
+
+          <div class="flex items-center justify-between gap-3 border-t border-gray-100 px-5 py-3">
+            <span class="text-xs text-gray-500">
+              ไม่เจอคู่มือที่ต้องการ?
+              <button
+                class="text-primary-600 cursor-pointer font-semibold hover:underline"
+                type="button"
+                @click="emit('feedback')"
+              >
+                ส่ง Feedback
+              </button>
+            </span>
+            <Button
+              v-if="canManageAny"
+              size="sm"
+              icon="ph:plus"
+              variant="outline"
+              color="neutral"
+              @click="startCreate"
+            >
+              เพิ่มคู่มือ
+            </Button>
+          </div>
+        </template>
+
+        <!-- Form (create / edit) -->
+        <div
+          v-else-if="mode === 'form'"
+          class="flex flex-1 flex-col overflow-hidden"
+        >
+          <HelpHubManualForm
+            :manual="editing"
+            :default-app="editing ? editing.app : (currentModule || undefined)"
+            @saved="onSaved"
+            @cancel="backToList"
+          />
+        </div>
+
+        <!-- View -->
+        <div
+          v-else
+          class="relative flex-1 overflow-hidden bg-gray-600"
+        >
+          <iframe
+            v-if="current?.file"
+            :key="current.file.url"
+            :src="`${current.file.url}#view=FitH`"
+            title="User manual"
+            class="size-full border-0"
+          />
+          <div
+            v-else
+            class="flex h-full items-center justify-center bg-white text-sm text-gray-500"
+          >
+            ไม่พบไฟล์คู่มือ
+          </div>
+        </div>
+      </div>
+    </template>
+  </Slideover>
+
+  <Modal
+    :open="!!confirmDelete"
+    :ui="{ content: 'max-w-sm' }"
+    @update:open="(v) => { if (!v) confirmDelete = null }"
+  >
+    <template #content>
+      <div class="flex flex-col gap-4 p-6">
+        <div>
+          <h3 class="text-base font-semibold text-gray-900">
+            ลบคู่มือ
+          </h3>
+          <p class="mt-1 text-sm text-gray-500">
+            ลบ “{{ confirmDelete?.name }}” ออกจากระบบ? ไฟล์ PDF จะยังอยู่ในคลังไฟล์
+          </p>
+        </div>
+        <div class="flex justify-end gap-2">
+          <Button
+            variant="outline"
+            color="neutral"
+            @click="confirmDelete = null"
+          >
+            ยกเลิก
+          </Button>
+          <Button
+            color="error"
+            :loading="deleteLoader.status.value.isLoading"
+            @click="runDelete"
+          >
+            ลบ
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import type { IManual } from '#layer/app/loaders/manual/manual'
+import { useManualDeleteLoader } from '#layer/app/loaders/manual/manual'
+import { Permission, UserModuleLabel, UserModuleLogo } from '#layer/app/composables/useAuth'
+import type { UserModule } from '#layer/app/composables/useAuth'
+
+const emit = defineEmits<{
+  (e: 'update', value: boolean): void
+  (e: 'refetch'): void
+  (e: 'feedback'): void
+}>()
+
+const props = defineProps<{
+  isOpen: boolean
+  manuals: IManual[]
+  currentModule: UserModule | null
+  loading: boolean
+}>()
+
+const auth = useAuth()
+const noti = useNotification()
+const deleteLoader = useManualDeleteLoader()
+
+type Mode = 'list' | 'view' | 'form'
+
+const mode = ref<Mode>('list')
+const selectedId = ref<string | null>(null)
+const editing = ref<IManual | null>(null)
+const confirmDelete = ref<IManual | null>(null)
+
+const current = computed<IManual | null>(
+  () => props.manuals.find((m) => m.id === selectedId.value) ?? null,
+)
+
+const canManage = (app: string) =>
+  auth.isSuperAdmin.value || auth.hasPermission(app as UserModule, Permission.SUPER)
+
+const canManageAny = computed(() => {
+  if (auth.isSuperAdmin.value) return true
+
+  return props.manuals.some((m) => canManage(m.app))
+    || (!!props.currentModule && auth.hasPermission(props.currentModule as UserModule, Permission.SUPER))
+})
+
+const appLabel = (app: string) =>
+  UserModuleLabel[app as keyof typeof UserModuleLabel] || app
+
+const logoOf = (app: string) =>
+  UserModuleLogo[app as keyof typeof UserModuleLogo]
+
+const formatDate = (iso: string) => {
+  try {
+    return new Date(iso).toLocaleDateString('th-TH', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    })
+  } catch {
+    return iso
+  }
+}
+
+const groups = computed(() => {
+  const byApp = new Map<string, IManual[]>()
+
+  for (const manual of props.manuals) {
+    const list = byApp.get(manual.app) ?? []
+
+    list.push(manual)
+    byApp.set(manual.app, list)
+  }
+
+  return [...byApp.entries()]
+    .map(([app, items]) => ({
+      app,
+      label: appLabel(app),
+      items: [...items].sort((a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)),
+    }))
+    .sort((a, b) => {
+      if (a.app === props.currentModule) return -1
+      if (b.app === props.currentModule) return 1
+
+      return a.label.localeCompare(b.label)
+    })
+})
+
+const headerTitle = computed(() => {
+  if (mode.value === 'view' && current.value) return current.value.name
+  if (mode.value === 'form') return editing.value ? 'แก้ไขคู่มือ' : 'เพิ่มคู่มือ'
+
+  return 'คู่มือการใช้งาน'
+})
+
+const headerSubtitle = computed(() => {
+  if (mode.value === 'view' && current.value) {
+    return `${appLabel(current.value.app)} · ปรับปรุง ${formatDate(current.value.updated_at)}`
+  }
+
+  if (mode.value === 'form') return 'ไฟล์ PDF · เห็นเฉพาะผู้มีสิทธิ์ในแอพนั้น'
+
+  return 'เลือกคู่มือที่ต้องการเปิด'
+})
+
+const openManual = (manual: IManual) => {
+  selectedId.value = manual.id
+  mode.value = 'view'
+}
+
+const startCreate = () => {
+  editing.value = null
+  mode.value = 'form'
+}
+
+const startEdit = (manual: IManual) => {
+  editing.value = manual
+  mode.value = 'form'
+}
+
+const backToList = () => {
+  mode.value = 'list'
+  editing.value = null
+}
+
+const onSaved = () => {
+  emit('refetch')
+  backToList()
+}
+
+const runDelete = () => {
+  const target = confirmDelete.value
+  if (!target) return
+
+  deleteLoader.run({
+    urlBind: {
+      id: target.id,
+    },
+  })
+}
+
+useWatchTrue(() => deleteLoader.status.value.isSuccess, () => {
+  confirmDelete.value = null
+
+  if (current.value && !props.manuals.some((m) => m.id === current.value?.id)) {
+    mode.value = 'list'
+  }
+
+  emit('refetch')
+})
+
+useWatchTrue(() => deleteLoader.status.value.isError, () => {
+  noti.error({
+    title: 'ลบไม่สำเร็จ',
+    description: StringHelper.getError(deleteLoader.status.value.errorData, 'ลองใหม่อีกครั้ง'),
+  })
+})
+
+// Always land on the picker when (re)opened.
+useWatchTrue(() => props.isOpen, () => {
+  mode.value = 'list'
+  selectedId.value = null
+  editing.value = null
+})
+</script>

package/app/components/HelpHub/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="fixed right-7 bottom-7 z-40 md:bottom-8.5 print:hidden">
+    <!-- click-away scrim -->
+    <div
+      v-if="isDialOpen"
+      class="fixed inset-0"
+      @click="isDialOpen = false"
+    />
+
+    <div class="relative flex flex-col items-end gap-3.5">
+      <div
+        v-if="isDialOpen"
+        class="flex flex-col items-end gap-3.5 motion-safe:animate-[helpHubDialIn_160ms_ease-out]"
+      >
+        <HelpHubAction
+          label="ส่ง Feedback"
+          icon="ph:chat-circle-text"
+          @click="open('feedback')"
+        />
+        <HelpHubAction
+          v-if="showManualAction"
+          label="คู่มือการใช้งาน"
+          icon="ph:book-open"
+          @click="open('manual')"
+        />
+      </div>
+
+      <button
+        class="flex size-10 cursor-pointer items-center justify-center rounded-full shadow-lg ring-2 transition-all duration-200 md:size-12"
+        :class="isDialOpen
+          ? 'bg-gray-900 ring-gray-700 hover:bg-gray-800'
+          : 'bg-primary-600 ring-primary-200 hover:bg-primary-700 hover:scale-105 hover:shadow-xl'"
+        type="button"
+        :aria-expanded="isDialOpen"
+        aria-label="ความช่วยเหลือ — ส่ง Feedback หรือดูคู่มือการใช้งาน"
+        :title="isDialOpen ? 'ปิด' : 'ความช่วยเหลือ'"
+        @click="isDialOpen = !isDialOpen"
+      >
+        <Icon
+          :name="isDialOpen ? 'ph:x' : 'ph:question'"
+          class="size-6 text-white transition-transform duration-200 md:size-7"
+          :class="{ 'rotate-90': isDialOpen }"
+        />
+      </button>
+    </div>
+  </div>
+
+  <FeedbackTicketForm
+    :is-open="panel === 'feedback'"
+    @update="(v) => { if (!v) panel = null }"
+    @success="panel = null"
+  />
+
+  <HelpHubManualViewer
+    :is-open="panel === 'manual'"
+    :manuals="manuals"
+    :current-module="currentModule"
+    :loading="manualList.status.value.isLoading"
+    @update="(v) => { if (!v) panel = null }"
+    @refetch="manualList.run()"
+    @feedback="open('feedback')"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useManualListLoader } from '#layer/app/loaders/manual/manual'
+import { Permission } from '#layer/app/composables/useAuth'
+import type { UserModule } from '#layer/app/composables/useAuth'
+
+type Panel = 'feedback' | 'manual' | null
+
+const auth = useAuth()
+const route = useRoute()
+const currentModule = useCurrentModule()
+const manualList = useManualListLoader()
+
+const isDialOpen = ref(false)
+const panel = ref<Panel>(null)
+
+const manuals = computed(() => manualList.data.value ?? [])
+
+const canManageAny = computed(() => {
+  if (auth.isSuperAdmin.value) return true
+
+  const mod = currentModule.value
+
+  return !!mod && auth.hasPermission(mod as UserModule, Permission.SUPER)
+})
+
+const showManualAction = computed(() => manuals.value.length > 0 || canManageAny.value)
+
+const open = (next: Exclude<Panel, null>) => {
+  isDialOpen.value = false
+  panel.value = next
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && isDialOpen.value) {
+    isDialOpen.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+
+  if (auth.isAuthenticated.value && !manualList.status.value.isSuccess) {
+    manualList.run()
+  }
+})
+
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+
+watch(() => route.path, () => {
+  isDialOpen.value = false
+})
+</script>