@finema/finework-layer 2.0.61 → 2.0.62

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.0.62](https://gitlab.finema.co/finema/internal/finework/compare/2.0.61...2.0.62) (2026-09-15)
+
+### Bug Fixes
+
+* disable manual viewer dismissible ([35780ce](https://gitlab.finema.co/finema/internal/finework/commit/35780ce41d2f542220b873340be5aacb5a5a8595))
+
 ## [2.0.61](https://gitlab.finema.co/finema/internal/finework/compare/2.0.60...2.0.61) (2026-09-11)
 
 ## [2.0.60](https://gitlab.finema.co/finema/internal/finework/compare/2.0.59...2.0.60) (2026-09-11)

package/app/app.vue

@@ -6,6 +6,6 @@
     }"
   >
     <NuxtPage />
-    <FeedbackTicket />
+    <HelpHub />
   </App>
 </template>

package/app/assets/css/main.css

@@ -88,3 +88,8 @@ body {
   to   { transform: translateY(-20px); opacity: 0; }
 }
 
+@keyframes helpHubDialIn {
+  from { transform: translateY(6px); opacity: 0; }
+  to   { transform: translateY(0);   opacity: 1; }
+}
+

package/app/components/HelpHub/Action.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    type="button"
+    class="group flex cursor-pointer items-center gap-3"
+    @click="emit('click')"
+  >
+    <span class="group-hover:text-primary-600 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 shadow-md transition">
+      {{ label }}
+    </span>
+    <span class="text-primary-600 flex size-11 items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-gray-200 transition group-hover:scale-105">
+      <Icon
+        :name="icon"
+        class="size-5"
+      />
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+defineProps<{
+  label: string
+  icon: string
+}>()
+</script>

package/app/components/HelpHub/ManualForm.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex-1 overflow-y-auto px-5 py-4">
+      <FormFields
+        :form="form"
+        :options="formFields"
+        class="flex flex-col gap-4 space-y-0"
+      />
+    </div>
+
+    <div class="flex gap-3 border-t border-gray-100 p-4">
+      <Button
+        variant="outline"
+        color="neutral"
+        class="flex-1 justify-center"
+        @click="emit('cancel')"
+      >
+        ยกเลิก
+      </Button>
+      <Button
+        class="flex-1 justify-center"
+        :loading="saveLoader.status.value.isLoading"
+        :disabled="saveLoader.status.value.isLoading"
+        @click="onSubmit"
+      >
+        {{ isEdit ? 'บันทึก' : 'เพิ่มคู่มือ' }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IManual } from '#layer/app/loaders/manual/manual'
+import { useManualAddLoader, useManualUpdateLoader } from '#layer/app/loaders/manual/manual'
+import { Permission } from '#layer/app/composables/useAuth'
+import type { UserModule } from '#layer/app/composables/useAuth'
+
+const emit = defineEmits<{
+  (e: 'saved'): void
+  (e: 'cancel'): void
+}>()
+
+const props = defineProps<{
+  manual?: IManual | null
+  defaultApp?: string
+}>()
+
+const auth = useAuth()
+const noti = useNotification()
+
+const isEdit = computed(() => !!props.manual)
+
+const addLoader = useManualAddLoader()
+const updateLoader = useManualUpdateLoader()
+const saveLoader = computed(() => (isEdit.value ? updateLoader : addLoader))
+
+const manageableApps = computed(() =>
+  UserModuleOptions.filter(
+    (opt) =>
+      auth.isSuperAdmin.value
+      || auth.hasPermission(opt.value as UserModule, Permission.SUPER),
+  ),
+)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    v.object({
+      app: v.pipe(v.string(), v.minLength(1, 'เลือกแอพ')),
+      name: v.pipe(v.string(), v.minLength(1, 'ใส่ชื่อคู่มือ')),
+      description: v.nullish(v.string()),
+      file: v.nullish(
+        v.object({
+          id: v.string(),
+          url: v.string(),
+          name: v.string(),
+          path: v.string(),
+          size: v.number(),
+        }),
+      ),
+    }),
+  ),
+})
+
+const applyInitial = () => {
+  if (props.manual) {
+    form.resetForm({
+      values: {
+        app: props.manual.app,
+        name: props.manual.name,
+        description: props.manual.description ?? '',
+        file: props.manual.file
+          ? {
+            id: props.manual.file.id,
+            url: props.manual.file.url,
+            name: props.manual.file.name,
+            path: props.manual.file.path,
+            size: props.manual.file.size,
+          }
+          : null,
+      },
+    })
+
+    return
+  }
+
+  form.resetForm({
+    values: {
+      app: props.defaultApp && manageableApps.value.some((a) => a.value === props.defaultApp)
+        ? props.defaultApp
+        : (manageableApps.value[0]?.value ?? ''),
+      name: '',
+      description: '',
+      file: null,
+    },
+  })
+}
+
+applyInitial()
+watch(() => props.manual?.id, applyInitial)
+
+const formFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.SELECT,
+    class: 'w-full',
+    props: {
+      form,
+      name: 'app',
+      label: 'แอพ',
+      placeholder: 'เลือกแอพ',
+      options: manageableApps.value,
+      required: true,
+      disabled: isEdit.value,
+    },
+  },
+  {
+    type: INPUT_TYPES.TEXT,
+    class: 'w-full',
+    props: {
+      form,
+      name: 'name',
+      label: 'ชื่อคู่มือ',
+      placeholder: 'เช่น เริ่มต้นใช้งาน, การอนุมัติ',
+      required: true,
+    },
+  },
+  {
+    type: INPUT_TYPES.TEXTAREA,
+    class: 'w-full',
+    props: {
+      form,
+      name: 'description',
+      label: 'คำอธิบายสั้น ๆ (ไม่บังคับ)',
+      placeholder: 'สรุปว่าคู่มือนี้ครอบคลุมเรื่องอะไร',
+      rows: 2,
+    },
+  },
+  {
+    type: INPUT_TYPES.UPLOAD_DROPZONE_AUTO,
+    class: 'w-full',
+    props: {
+      form,
+      name: 'file',
+      label: 'ไฟล์ PDF',
+      placeholder: 'PDF เท่านั้น (สูงสุด 20MB)',
+      requestOptions: useRequestOptions().filePublic(FileAppType.COMMON),
+      accept: '.pdf',
+      maxSize: 20480,
+      required: true,
+    },
+    on: {
+      change: () => {},
+      success: () => {},
+      delete: () => form.setFieldValue('file', null),
+    },
+  },
+])
+
+const onSubmit = form.handleSubmit((values) => {
+  const fileId = (values.file as { id?: string } | null)?.id
+
+  if (!fileId) {
+    form.setFieldError('file', 'อัปโหลดไฟล์ PDF ก่อน')
+
+    return
+  }
+
+  const data = {
+    app: values.app,
+    name: values.name,
+    description: values.description || null,
+    file_id: fileId,
+  }
+
+  if (isEdit.value && props.manual) {
+    updateLoader.run({
+      urlBind: {
+        id: props.manual.id,
+      },
+      data,
+    })
+
+    return
+  }
+
+  addLoader.run({
+    data,
+  })
+})
+
+useWatchTrue(() => saveLoader.value.status.value.isSuccess, () => {
+  noti.success({
+    title: isEdit.value ? 'บันทึกคู่มือแล้ว' : 'เพิ่มคู่มือแล้ว',
+  })
+
+  emit('saved')
+})
+
+useWatchTrue(() => saveLoader.value.status.value.isError, () => {
+  noti.error({
+    title: 'บันทึกไม่สำเร็จ',
+    description: StringHelper.getError(saveLoader.value.status.value.errorData, 'ลองใหม่อีกครั้ง'),
+  })
+})
+</script>