From 6d6dc0c153f710ab29dfb4265256855f748258e9 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 16 Oct 2024 01:47:28 +0530
Subject: [PATCH] feat: Add the new design for the portal category page
 (#10274)

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../CategoryPage/CategoriesPage.story.vue     | 209 ++++++++++++++++++
 .../Pages/CategoryPage/CategoriesPage.vue     | 101 +++++++++
 .../Pages/CategoryPage/CategoryList.vue       |  30 +++
 3 files changed, 340 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
 create mode 100644 app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
new file mode 100644
index 000000000..8fdafd86a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
@@ -0,0 +1,209 @@
+<script setup>
+import CategoriesPage from './CategoriesPage.vue';
+
+const categories = [
+  {
+    id: 'getting-started',
+    title: '🚀 Getting started',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'marketing',
+    title: 'Marketing',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
+    articlesCount: '4',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'development',
+    title: 'Development',
+    description: '',
+    articlesCount: '5',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Archived article',
+        title: 'Best practices for organizing your Help Center content',
+        status: 'archived',
+        updatedAt: '3 days ago',
+        author: 'Fernando',
+        category: '💰 Finance',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Customizing the appearance of your Help Center',
+        status: '',
+        updatedAt: '5 days ago',
+        author: 'Jane',
+        category: '💰 Finance',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'roadmap',
+    title: '🛣️ Roadmap',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '3',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+  {
+    id: 'finance',
+    title: '💰 Finance',
+    description:
+      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
+    articlesCount: '2',
+    articles: [
+      {
+        variant: 'Draft article',
+        title:
+          "How to get an SSL certificate for your Help Center's custom domain",
+        status: 'draft',
+        updatedAt: '2 days ago',
+        author: 'Michael',
+        category: '⚡️ Marketing',
+        views: 3400,
+      },
+      {
+        variant: 'Published article',
+        title: 'Setting up your first Help Center portal',
+        status: '',
+        updatedAt: '1 week ago',
+        author: 'John',
+        category: '🛠️ Development',
+        views: 400,
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
+    <Variant title="All Categories">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <CategoriesPage :categories="categories" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
new file mode 100644
index 000000000..79d648abe
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref, computed } from 'vue';
+// import { OnClickOutside } from '@vueuse/components';
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+// import EditCategory from 'dashboard/playground/HelpCenter/components/EditCategory.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+});
+
+const selectedCategory = ref(null);
+// const showEditCategory = ref(false);
+
+// const openEditCategory = () => {
+//   showEditCategory.value = true;
+// };
+// const closeEditCategory = () => {
+//   showEditCategory.value = false;
+// };
+
+const breadcrumbItems = computed(() => {
+  const items = [{ label: 'Categories (en-US)', link: '#' }];
+  if (selectedCategory.value) {
+    items.push({
+      label: selectedCategory.value.title,
+      count: selectedCategory.value.articles.length,
+    });
+  }
+  return items;
+});
+const openCategoryArticles = id => {
+  selectedCategory.value = props.categories.find(
+    category => category.id === id
+  );
+};
+const resetCategory = () => {
+  selectedCategory.value = null;
+};
+const displayedArticles = computed(() => {
+  return selectedCategory.value ? selectedCategory.value.articles : [];
+});
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between">
+        <div v-if="!selectedCategory" class="flex items-center gap-4">
+          <Button
+            label="English"
+            size="sm"
+            icon-position="right"
+            icon="chevron-lucide-down"
+            icon-lib="lucide"
+            variant="secondary"
+          />
+          <div
+            class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800"
+          />
+          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+            {{ categories.length }} categories
+          </span>
+        </div>
+        <Breadcrumb v-else :items="breadcrumbItems" @click="resetCategory" />
+        <Button
+          v-if="!selectedCategory"
+          label="New category"
+          icon="add"
+          size="sm"
+        />
+        <div v-else class="relative">
+          <Button
+            label="Edit category"
+            variant="secondary"
+            size="sm"
+            @click="openEditCategory"
+          />
+          <!-- <OnClickOutside @trigger="closeEditCategory">
+            <EditCategory v-if="showEditCategory" @close="closeEditCategory" />
+          </OnClickOutside> -->
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <CategoryList
+        v-if="!selectedCategory"
+        :categories="categories"
+        @click="openCategoryArticles"
+      />
+      <ArticleList v-else :articles="displayedArticles" />
+    </template>
+  </HelpCenterLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
new file mode 100644
index 000000000..6ec7f5920
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
@@ -0,0 +1,30 @@
+<script setup>
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+
+defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = id => {
+  emit('click', id);
+};
+</script>
+
+<template>
+  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
+    <CategoryCard
+      v-for="category in categories"
+      :id="category.id"
+      :key="category.title"
+      :title="category.title"
+      :description="category.description"
+      :articles-count="category.articlesCount"
+      @click="handleClick(category.id)"
+    />
+  </ul>
+</template>