nuxt-layer-core 1.1.2 → 1.1.4

package/app/layers/solution/app/pages/gioi-thieu-san-pham/[slug]/index.vue

@@ -11,12 +11,118 @@ const { data } = await useAsyncData(
   () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
+
+const targetCTA = computed(() => data.value?.productData?.targetCTA)
+const pageSlug = computed(() => data.value?.productData?.slug || slug.value)
+
+// Lấy 1 field group (vd goi_san_pham_co_ban) từ fieldResumes, gom children về object phẳng { productid, name, ... }
+const findFieldGroup = (fieldName: string) => {
+  const group = data.value?.resumeData?.fieldResumes?.find(
+    (field: any) => field?.fieldName === fieldName && field?.type === 'FIELD_GROUP'
+  )
+  if (!group?.children) return null
+
+  const result: Record<string, any> = {}
+  for (const field of group.children) {
+    const key = field?.fieldName?.split('@')?.pop()
+    if (key) result[key] = field?.value
+  }
+  return result
+}
+
+// Gói thuê hạ tầng (goi_san_pham_*): giá theo 3 kỳ hạn 12/24/36 tháng, dùng thẳng text CMS trả về
+const toRentalPlanItem = (fieldName: string, highlight = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    productId: group.productid,
+    name: group.name,
+    tagline: group.tagline,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    // short_description là rich text từ CMS, PricingPlansSection render bằng v-html
+    short_description: group.short_description,
+    prices: {
+      12: group.gia_thue_12_thang,
+      24: group.gia_thue_24_thang,
+      36: group.gia_thue_36_thang,
+    },
+    url: group.url,
+    title_button: group.title_button,
+    highlight,
+  }
+}
+
+// Workshop / khóa đào tạo (goi_workshop_*, goi_dao_tao_proxmox_*): 1 mức giá duy nhất
+const toFlatPriceItem = (fieldName: string, highlight = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    productId: group.productid,
+    name: group.name,
+    tagline: group.tagline,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    short_description: group.short_description,
+    price: group.hoc_phi,
+    url: group.url,
+    title_button: group.title_button,
+    highlight,
+  }
+}
+
+const pricingHci01 = computed(() => toRentalPlanItem('goi_san_pham_co_ban'))
+const pricingHci02 = computed(() => toRentalPlanItem('goi_san_pham_nang_cao', true))
+const pricingHci03 = computed(() => toRentalPlanItem('goi_san_pham_cao_cap'))
+
+const pricingWorkshop01 = computed(() => toFlatPriceItem('goi_workshop_co_ban'))
+const pricingWorkshop02 = computed(() => toFlatPriceItem('goi_workshop_nang_cao', true))
+const pricingWorkshop03 = computed(() => toFlatPriceItem('goi_workshop_cao_cap'))
+
+const pricingTraining01 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_co_ban'))
+const pricingTraining02 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_nang_cao', true))
+const pricingTraining03 = computed(() => toFlatPriceItem('goi_dao_tao_proxmox_cao_cap'))
+
+// Đồng bộ dropdown "Khóa học quan tâm" của CtaSection với đúng data đang hiện ở PricingPlansSection
+const pricingPlans = computed(() => ({
+  hci: [pricingHci01.value, pricingHci02.value, pricingHci03.value].map(normalizePlanItem).filter(Boolean),
+  workshop: [pricingWorkshop01.value, pricingWorkshop02.value, pricingWorkshop03.value].map(normalizePlanItem).filter(Boolean),
+  training: [pricingTraining01.value, pricingTraining02.value, pricingTraining03.value].map(normalizePlanItem).filter(Boolean),
+}))
 </script>
 
 <template>
-  <DynamicPageSections
+  <!-- <DynamicPageSections
     :field-resumes="data?.resumeData?.fieldResumes"
     :target-c-t-a="data?.productData?.targetCTA"
     :slug="data?.productData?.slug || slug"
-  />
+  /> -->
+
+  <div>
+    <main class="min-h-screen bg-white text-slate-900">
+      <TheHeader :target-c-t-a="targetCTA" :slug="pageSlug" />
+      <ProxmoxHeroSection />
+      <ProxmoxPainPointsSection />
+      <ProxmoxVeFeaturesSection />
+      <ProxmoxHciOverviewSection />
+      <PricingPlansSection
+        :item-id01-groups01="pricingHci01"
+        :item-id02-groups01="pricingHci02"
+        :item-id03-groups01="pricingHci03"
+        :item-id01-groups02="pricingWorkshop01"
+        :item-id02-groups02="pricingWorkshop02"
+        :item-id03-groups02="pricingWorkshop03"
+        :item-id01-groups03="pricingTraining01"
+        :item-id02-groups03="pricingTraining02"
+        :item-id03-groups03="pricingTraining03"
+      />
+      <ProxmoxTrainingBenefitsSection />
+      <ProxmoxComparisonSection />
+      <!-- <CoursesSection :target-c-t-a="targetCTA" :slug="pageSlug" /> -->
+      <!-- <ProxmoxTestimonialsSection />
+      <ProxmoxFaqSection /> -->
+      <CtaSection :pricing-plans="pricingPlans" />
+      <TheFooter />
+    </main>
+  </div>
 </template>

package/app/layers/solution/app/pages/template/[slug]/index.vue

@@ -1,22 +1,136 @@
-<script setup lang="ts">
-definePageMeta({ layout: 'default' })
-
-const route = useRoute()
-const { getSlugData } = useSolutionApi()
-
-const slug = computed(() => route.params.slug as string)
-
-const { data } = await useAsyncData(
-  `slug-${slug.value}`,
-  () => getSlugData(slug.value, 'gioi-thieu-template'),
-  { server: true }
-)
-</script>
-
-<template>
-  <DynamicPageSections
-    :field-resumes="data?.resumeData?.fieldResumes"
-    :target-c-t-a="data?.productData?.targetCTA"
-    :slug="data?.productData?.slug || slug"
-  />
-</template>
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+const { data } = await useAsyncData(
+  `slug-${slug.value}`,
+  () => getSlugData(slug.value, 'gioi-thieu-template'),
+  { server: true }
+)
+
+const targetCTA = computed(() => data.value?.productData?.targetCTA)
+const pageSlug = computed(() => data.value?.productData?.slug || slug.value)
+
+// Lấy 1 field group (vd version-khuyen-nghi) từ fieldResumes, gom children về object phẳng { name, type, ... }
+const findFieldGroup = (fieldName: string) => {
+  const group = data.value?.resumeData?.fieldResumes?.find(
+    (field: any) => field?.fieldName === fieldName && field?.type === 'FIELD_GROUP'
+  )
+  if (!group?.children) return null
+
+  const result: Record<string, any> = {}
+  for (const field of group.children) {
+    const key = field?.fieldName?.split('@')?.pop()
+    if (key) result[key] = field?.value
+  }
+  return result
+}
+
+// 1 phiên bản Ubuntu (version-khuyen-nghi, version_on_dinh, version_lts)
+const toVersionMeta = (fieldName: string, badgeTone: string, recommended = false) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return undefined
+
+  return {
+    id: group.productid,
+    version: String(group.name || '').replace(/^Ubuntu\s+/i, ''),
+    codename: '',
+    badge: group.type,
+    badgeTone,
+    recommended,
+    releaseDate: group.createdate,
+    supportUntil: group.expired ? `Hỗ trợ đến ${group.expired}` : '',
+    desc: group.description,
+  }
+}
+
+const versionRecommended = computed(() => toVersionMeta('version-khuyen-nghi', 'primary', true))
+const versionStable = computed(() => toVersionMeta('version_on_dinh', 'amber'))
+const versionLts = computed(() => toVersionMeta('version_lts', 'slate'))
+
+// short_description là rich text <ul><li>✓ ...</li></ul> -> tách thành mảng text thuần
+// (template tự thêm icon check riêng nên phải bỏ ký tự ✓ có sẵn trong CMS để khỏi lặp)
+const parseFeatureList = (html?: string | null) => {
+  if (!html) return []
+
+  return [...html.matchAll(/<li[^>]*>([\s\S]*?)<\/li>/gi)]
+    .map((match) =>
+      (match[1] || '')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&amp;/g, '&')
+        .replace(/^[✓\s]+/, '')
+        .trim()
+    )
+    .filter(Boolean)
+}
+
+// 1 gói dịch vụ (san_pham_01/02/03), gắn với 1 phiên bản Ubuntu qua relate_groups <-> productid của version
+const toPackage = (fieldName: string) => {
+  const group = findFieldGroup(fieldName)
+  if (!group?.name) return null
+
+  return {
+    id: group.productid || group.product_slug || group.name,
+    relateGroups: group.relate_groups,
+    name: group.name,
+    desc: group.tagline,
+    price: group.gia_tien,
+    unit: group.don_vi ? `/${group.don_vi}` : '',
+    features: parseFeatureList(group.short_description),
+    url: group.url,
+    titleButton: group.title_button,
+    highlight: false,
+  }
+}
+
+const packages = computed(() =>
+  [toPackage('san_pham_01'), toPackage('san_pham_02'), toPackage('san_pham_03')].filter(
+    (pkg): pkg is NonNullable<typeof pkg> => !!pkg
+  )
+)
+
+// Gom các gói thuộc về đúng phiên bản Ubuntu thành 1 nhóm sản phẩm cho phiên bản đó
+const toProductGroup = (versionId?: string) => {
+  const items = packages.value.filter((pkg) => pkg.relateGroups === versionId)
+  if (!items.length) return undefined
+
+  return {
+    id: 'goi-dich-vu',
+    name: 'Gói dịch vụ đề xuất',
+    icon: 'lucide:server-cog',
+    desc: '',
+    packages: items,
+  }
+}
+
+const groupRecommended = computed(() => toProductGroup(versionRecommended.value?.id))
+const groupStable = computed(() => toProductGroup(versionStable.value?.id))
+const groupLts = computed(() => toProductGroup(versionLts.value?.id))
+</script>
+
+<template>
+  <!-- <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug"
+  /> -->
+
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="pageSlug" />
+    <LinuxIntroSection />
+    <LinuxVersionsSection
+      :groups-item01="versionRecommended"
+      :groups-item02="versionStable"
+      :groups-item03="versionLts"
+      :item-id01-groups01="groupRecommended"
+      :item-id01-groups02="groupStable"
+      :item-id01-groups03="groupLts"
+    />
+    <WhyChooseUbuntuSection />
+    <TheFooter />
+  </div>
+</template>

package/app/layers/solution/app/pages/tu-van/[slug]/index.vue

@@ -11,12 +11,67 @@ const { data } = await useAsyncData(
   () => getSlugData(slug.value, 'giai-phap'),
   { server: true }
 )
+
+const targetCTA = computed(() => data.value?.productData?.targetCTA)
+const pageSlug = computed(() => data.value?.productData?.slug || slug.value)
+
+// Lấy giá trị 1 field top-level (vd name, level) từ fieldResumes
+const findFieldValue = (fieldName: string) => {
+  const field = data.value?.resumeData?.fieldResumes?.find(
+    (item: any) => item?.fieldName === fieldName && item?.type === 'FIELD'
+  )
+  return field?.value ?? ''
+}
+
+// Lấy 1 field group (vd hinh_thuc_hoc_online) từ fieldResumes, gom children về object phẳng { name, type }
+const findFieldGroup = (fieldName: string) => {
+  const group = data.value?.resumeData?.fieldResumes?.find(
+    (field: any) => field?.fieldName === fieldName && field?.type === 'FIELD_GROUP'
+  )
+  if (!group?.children) return null
+
+  const result: Record<string, any> = {}
+  for (const field of group.children) {
+    const key = field?.fieldName?.split('@')?.pop()
+    if (key) result[key] = field?.value
+  }
+  return result
+}
+
+const plan = computed(() => ({
+  id: findFieldValue('productid') || pageSlug.value,
+  name: findFieldValue('name'),
+  level: findFieldValue('level'),
+  duration: findFieldValue('thoi-gian'),
+  description: findFieldValue('short_description'),
+  icon: 'lucide:server',
+}))
+
+const toStudyMode = (fieldName: string) => {
+  const group = findFieldGroup(fieldName)
+  if (!group) return null
+  return { name: group.name, type: String(group.type || '').trim() }
+}
+
+const studyModes = computed(() =>
+  [
+    toStudyMode('hinh_thuc_hoc_online'),
+    toStudyMode('hinh_thuc_hoc_tai_lop'),
+    toStudyMode('dao_tao_doanh_nghiep'),
+  ].filter((mode): mode is { name: string; type: string } => !!mode)
+)
 </script>
 
 <template>
-  <DynamicPageSections
+  <!-- <DynamicPageSections
     :field-resumes="data?.resumeData?.fieldResumes"
     :target-c-t-a="data?.productData?.targetCTA"
     :slug="data?.productData?.slug || slug"
-  />
+  /> -->
+
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="pageSlug" />
+    <RegistrationSection :plans="[plan]" :study-modes="studyModes" />
+    <TheFooter />
+  </div>
 </template>

package/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-layer-core",
   "type": "module",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.1.4",
   "scripts": {
     "build": "env-cmd -f .env nuxt build",
     "dev": "env-cmd -f .env nuxt dev"