feat: Add the new design for the portal category page (#10274)
Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user