@orbe-agro/client-core 5.3.67 → 5.3.68

package/lib/@ecme/views/concepts/help-center/ManageArticle/components/ArticleListTable.tsx

@@ -0,0 +1,174 @@
+import { useMemo } from 'react'
+import Avatar from '@/components/ui/Avatar'
+import Tag from '@/components/ui/Tag'
+import Switcher from '@/components/ui/Switcher'
+import { UsersAvatarGroup } from '@/components/shared'
+import DataTable from '@/components/shared/DataTable'
+import { useManageArticleStore } from '../store/manageArticleStore'
+import useManageArticle from '../hooks/useManageArticle'
+import { categoryIcon, categoryClass } from '../utils'
+import classNames from '@/utils/classNames'
+import { Link } from 'react-router-dom'
+import type { TableQueries } from '@/@types/common'
+import type { Article } from '../types'
+import type { OnSortParam, ColumnDef, Row } from '@/components/shared/DataTable'
+
+const ArticleListTable = () => {
+    const tableData = useManageArticleStore((state) => state.tableData)
+    const selectedArticle = useManageArticleStore(
+        (state) => state.selectedArticle,
+    )
+    const setSelectedArticle = useManageArticleStore(
+        (state) => state.setSelectedArticle,
+    )
+    const setSelectAllArticle = useManageArticleStore(
+        (state) => state.setSelectAllArticle,
+    )
+    const setTableData = useManageArticleStore((state) => state.setTableData)
+
+    const { articleList, articleTotal, isLoading } = useManageArticle()
+
+    const columns: ColumnDef<Article>[] = useMemo(
+        () => [
+            {
+                header: 'Title',
+                accessorKey: 'title',
+                cell: (props) => {
+                    const row = props.row.original
+                    return (
+                        <div className="flex items-center gap-4">
+                            <Avatar
+                                icon={categoryIcon[row.category]}
+                                shape="round"
+                                className={classNames(
+                                    'text-gray-900',
+                                    categoryClass[row.category],
+                                )}
+                            />
+                            <div>
+                                <div className="mb-2">
+                                    <Link
+                                        to={`/concepts/help-center/edit-article/${row.id}`}
+                                        className="font-bold heading-text hover:text-primary"
+                                    >
+                                        {row.title}
+                                    </Link>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    {row.tags.map((tag) => (
+                                        <Tag key={tag.id}>{tag.label}</Tag>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    )
+                },
+            },
+            {
+                header: 'Authors',
+                accessorKey: 'authors',
+                enableSorting: false,
+                cell: (props) => {
+                    const row = props.row.original
+                    return (
+                        <UsersAvatarGroup
+                            avatarProps={{ size: 25 }}
+                            users={row.authors || []}
+                        />
+                    )
+                },
+            },
+            {
+                header: 'Last update',
+                accessorKey: 'updateTimeStamp',
+                cell: (props) => {
+                    const row = props.row.original
+                    return <div>{row.updateTime}</div>
+                },
+            },
+            {
+                header: 'Published',
+                accessorKey: 'published',
+                enableSorting: false,
+                cell: (props) => {
+                    const row = props.row.original
+                    return (
+                        <div className="px-4">
+                            <Switcher defaultChecked={row.published} />
+                        </div>
+                    )
+                },
+            },
+        ],
+        [],
+    )
+
+    const handleSetTableData = (articleList: TableQueries) => {
+        setTableData(articleList)
+        if (selectedArticle.length > 0) {
+            setSelectAllArticle([])
+        }
+    }
+
+    const handlePaginationChange = (page: number) => {
+        const newTableData = structuredClone(tableData)
+        newTableData.pageIndex = page
+        handleSetTableData(newTableData)
+    }
+
+    const handleSelectChange = (value: number) => {
+        const newTableData = structuredClone(tableData)
+        newTableData.pageSize = Number(value)
+        newTableData.pageIndex = 1
+        handleSetTableData(newTableData)
+    }
+
+    const handleSort = (sort: OnSortParam) => {
+        const newTableData = structuredClone(tableData)
+        newTableData.sort = sort
+        handleSetTableData(newTableData)
+    }
+
+    const handleRowSelect = (checked: boolean, row: Article) => {
+        setSelectedArticle(checked, row)
+    }
+
+    const handleAllRowSelect = (checked: boolean, rows: Row<Article>[]) => {
+        if (checked) {
+            const originalRows = rows.map((row) => row.original)
+            setSelectAllArticle(originalRows)
+        } else {
+            setSelectAllArticle([])
+        }
+    }
+
+    return (
+        <div>
+            <DataTable
+                selectable
+                hoverable={false}
+                columns={columns}
+                data={articleList}
+                noData={!isLoading && articleList.length === 0}
+                skeletonAvatarColumns={[0]}
+                skeletonAvatarProps={{ width: 28, height: 28 }}
+                loading={isLoading}
+                pagingData={{
+                    total: articleTotal || 0,
+                    pageIndex: tableData.pageIndex as number,
+                    pageSize: tableData.pageSize as number,
+                }}
+                checkboxChecked={(row) =>
+                    selectedArticle.some((selected) => selected.id === row.id)
+                }
+                onPaginationChange={handlePaginationChange}
+                onSelectChange={handleSelectChange}
+                onSort={handleSort}
+                onCheckBoxChange={handleRowSelect}
+                onIndeterminateCheckBoxChange={handleAllRowSelect}
+            />
+        </div>
+    )
+}
+
+export default ArticleListTable

package/lib/@ecme/views/concepts/help-center/ManageArticle/components/ArticleTableFilter.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Drawer from '@/components/ui/Drawer'
+import Checkbox from '@/components/ui/Checkbox'
+import { Form, FormItem } from '@/components/ui/Form'
+import { useManageArticleStore } from '../store/manageArticleStore'
+import { categoryOption } from '../utils'
+import { TbFilter } from 'react-icons/tb'
+import { useForm, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import type { ZodType } from 'zod'
+
+type FormSchema = {
+    category: Array<string>
+}
+
+const validationSchema: ZodType<FormSchema> = z.object({
+    category: z.array(z.string()),
+})
+
+const ArticleTableFilter = () => {
+    const [filterIsOpen, setFilterIsOpen] = useState(false)
+    const filterData = useManageArticleStore((state) => state.filterData)
+    const setFilterData = useManageArticleStore((state) => state.setFilterData)
+
+    const { handleSubmit, control } = useForm<FormSchema>({
+        defaultValues: filterData,
+        resolver: zodResolver(validationSchema),
+    })
+
+    const onSubmit = (values: FormSchema) => {
+        setFilterData(values)
+        setFilterIsOpen(false)
+    }
+
+    return (
+        <>
+            <Button icon={<TbFilter />} onClick={() => setFilterIsOpen(true)}>
+                Filter
+            </Button>
+            <Drawer
+                title="Filter"
+                isOpen={filterIsOpen}
+                onClose={() => setFilterIsOpen(false)}
+                onRequestClose={() => setFilterIsOpen(false)}
+            >
+                <Form
+                    className="h-full"
+                    containerClassName="flex flex-col justify-between h-full"
+                    onSubmit={handleSubmit(onSubmit)}
+                >
+                    <div>
+                        <FormItem label="Showing category">
+                            <div className="mt-4">
+                                <Controller
+                                    name="category"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <Checkbox.Group
+                                            vertical
+                                            className="flex"
+                                            {...field}
+                                        >
+                                            {categoryOption.map((category) => (
+                                                <Checkbox
+                                                    key={category.value}
+                                                    name={field.name}
+                                                    value={category.value}
+                                                    className="justify-between flex-row-reverse heading-text"
+                                                >
+                                                    {category.label}
+                                                </Checkbox>
+                                            ))}
+                                        </Checkbox.Group>
+                                    )}
+                                />
+                            </div>
+                        </FormItem>
+                    </div>
+                    <Button variant="solid" type="submit">
+                        Query
+                    </Button>
+                </Form>
+            </Drawer>
+        </>
+    )
+}
+
+export default ArticleTableFilter

package/lib/@ecme/views/concepts/help-center/ManageArticle/components/ManageArticleHeader.tsx

@@ -0,0 +1,16 @@
+import ArticleListSearch from './ArticleListSearch'
+import ArticleTableFilter from './ArticleTableFilter'
+
+const ManageArticleHeader = () => {
+    return (
+        <div className="mb-6">
+            <h3>Manage article</h3>
+            <div className="flex items-center justify-between gap-4 mt-4">
+                <ArticleListSearch />
+                <ArticleTableFilter />
+            </div>
+        </div>
+    )
+}
+
+export default ManageArticleHeader

package/lib/@ecme/views/concepts/help-center/ManageArticle/hooks/useManageArticle.ts

@@ -0,0 +1,29 @@
+import { useManageArticleStore } from '../store/manageArticleStore'
+import { apiGetArticleList } from '@/services/HelpCenterService'
+import useSWR from 'swr'
+import type { TableQueries } from '@/@types/common'
+import type { GetArticleListResponse } from '../types'
+
+const useManageArticle = () => {
+    const tableData = useManageArticleStore((state) => state.tableData)
+    const filterData = useManageArticleStore((state) => state.filterData)
+
+    const { data, isLoading, mutate } = useSWR(
+        ['/helps/manage/articles', { ...tableData, ...filterData }],
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ([_, params]) =>
+            apiGetArticleList<GetArticleListResponse, TableQueries>(params),
+        {
+            revalidateOnFocus: false,
+        },
+    )
+
+    return {
+        articleList: data?.list || [],
+        articleTotal: data?.total || 0,
+        isLoading,
+        mutate,
+    }
+}
+
+export default useManageArticle

package/lib/@ecme/views/concepts/help-center/ManageArticle/index.ts

@@ -0,0 +1,3 @@
+import ManageArticle from './ManageArticle'
+
+export default ManageArticle

package/lib/@ecme/views/concepts/help-center/ManageArticle/store/manageArticleStore.ts

@@ -0,0 +1,74 @@
+import { create } from 'zustand'
+import type { TableQueries } from '@/@types/common'
+import type { Article, Articles, Filter } from '../types'
+
+export const initialTableData: TableQueries = {
+    pageIndex: 1,
+    pageSize: 10,
+    query: '',
+    sort: {
+        order: '',
+        key: '',
+    },
+}
+
+export const initialFilterData = {
+    category: [
+        'introduction',
+        'setupGuide',
+        'basicFeatures',
+        'survey',
+        'analytic',
+        'dataVisualization',
+        'chatbot',
+        'media',
+        'security',
+        'integration',
+        'themes',
+        'commission',
+    ],
+}
+
+export type ManageArticleState = {
+    tableData: TableQueries
+    filterData: Filter
+    selectedArticle: Partial<Article>[]
+}
+
+type ManageArticleAction = {
+    setFilterData: (payload: Filter) => void
+    setTableData: (payload: TableQueries) => void
+    setSelectedArticle: (checked: boolean, customer: Article) => void
+    setSelectAllArticle: (customer: Articles) => void
+}
+
+const initialState: ManageArticleState = {
+    tableData: initialTableData,
+    filterData: initialFilterData,
+    selectedArticle: [],
+}
+
+export const useManageArticleStore = create<
+    ManageArticleState & ManageArticleAction
+>((set) => ({
+    ...initialState,
+    setFilterData: (payload) => set(() => ({ filterData: payload })),
+    setTableData: (payload) => set(() => ({ tableData: payload })),
+    setSelectedArticle: (checked, row) =>
+        set((state) => {
+            const prevData = state.selectedArticle
+            if (checked) {
+                return { selectedArticle: [...prevData, ...[row]] }
+            } else {
+                if (prevData.some((prevArticle) => row.id === prevArticle.id)) {
+                    return {
+                        selectedArticle: prevData.filter(
+                            (prevArticle) => prevArticle.id !== row.id,
+                        ),
+                    }
+                }
+                return { selectedArticle: prevData }
+            }
+        }),
+    setSelectAllArticle: (row) => set(() => ({ selectedArticle: row })),
+}))

package/lib/@ecme/views/concepts/help-center/ManageArticle/types.ts

@@ -0,0 +1,35 @@
+export type ArticleTag = {
+    id: string
+    label: string
+}
+
+export type Article = {
+    id: string
+    title: string
+    content: string
+    category: string
+    authors: {
+        name: string
+        img: string
+    }[]
+    tags: ArticleTag[]
+    starred: boolean
+    published: boolean
+    updateTime: string
+    updateTimeStamp: number
+    createdBy: string
+    timeToRead: number
+    viewCount: number
+    commentCount: number
+}
+
+export type Articles = Article[]
+
+export type Filter = {
+    category: string[]
+}
+
+export type GetArticleListResponse = {
+    list: Articles
+    total: number
+}

package/lib/@ecme/views/concepts/help-center/ManageArticle/utils.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+import {
+    TbPresentation,
+    TbSettings,
+    TbStar,
+    TbLicense,
+    TbChartHistogram,
+    TbChartPie,
+    TbRobotFace,
+    TbLibraryPhoto,
+    TbShieldCheck,
+    TbRefreshDot,
+    TbPalette,
+    TbCoins,
+} from 'react-icons/tb'
+
+export const categoryIcon: Record<string, ReactNode> = {
+    introduction: <TbPresentation />,
+    setupGuide: <TbSettings />,
+    basicFeatures: <TbStar />,
+    survey: <TbLicense />,
+    analytic: <TbChartHistogram />,
+    dataVisualization: <TbChartPie />,
+    chatbot: <TbRobotFace />,
+    media: <TbLibraryPhoto />,
+    security: <TbShieldCheck />,
+    integration: <TbRefreshDot />,
+    themes: <TbPalette />,
+    commission: <TbCoins />,
+}
+
+export const categoryLabel: Record<string, string> = {
+    introduction: 'Introduction',
+    setupGuide: 'Setup Guide',
+    basicFeatures: 'Basic Features',
+    survey: 'Survey',
+    analytic: 'Analytic',
+    dataVisualization: 'Data Visualization',
+    chatbot: 'Chatbot',
+    media: 'Media',
+    security: 'Security',
+    integration: 'Integration',
+    themes: 'Themes',
+    commission: 'Commission',
+}
+
+export const categoryClass: Record<string, string> = {
+    introduction: 'bg-sky-200 dark:bg-sky-200',
+    setupGuide: 'bg-red-200 dark:bg-red-200',
+    basicFeatures: 'bg-amber-200 dark:bg-amber-200',
+    survey: 'bg-orange-200 dark:bg-orange-200',
+    analytic: 'bg-teal-200 dark:bg-teal-200',
+    dataVisualization: 'bg-cyan-200 dark:bg-cyan-200',
+    chatbot: 'bg-yellow-200 dark:bg-yellow-200',
+    media: 'bg-rose-200 dark:bg-rose-200',
+    security: 'bg-emerald-200 dark:bg-emerald-200',
+    integration: ' bg-purple-200 dark:bg-purple-200',
+    themes: 'bg-sky-200 dark:bg-sky-200',
+    commission: 'bg-indigo-200 dark:bg-indigo-200',
+}
+
+export const categoryOption = [
+    { label: 'Introduction', value: 'introduction' },
+    { label: 'Setup Guide', value: 'setupGuide' },
+    { label: 'Basic Features', value: 'basicFeatures' },
+    { label: 'Survey', value: 'survey' },
+    { label: 'Analytic', value: 'analytic' },
+    { label: 'Data Visualization', value: 'dataVisualization' },
+    { label: 'Chatbot', value: 'chatbot' },
+    { label: 'Media', value: 'media' },
+    { label: 'Security', value: 'security' },
+    { label: 'Integration', value: 'integration' },
+    { label: 'Themes', value: 'themes' },
+    { label: 'Commission', value: 'commission' },
+]

package/lib/@ecme/views/concepts/help-center/SupportHub/SupportHub.tsx

@@ -0,0 +1,13 @@
+import TopSection from './components/TopSection'
+import BodySection from './components/BodySection'
+
+const SupportHub = () => {
+    return (
+        <>
+            <TopSection />
+            <BodySection />
+        </>
+    )
+}
+
+export default SupportHub

package/lib/@ecme/views/concepts/help-center/SupportHub/components/Article.tsx

@@ -0,0 +1,82 @@
+import Avatar from '@/components/ui/Avatar'
+import IconText from '@/components/shared/IconText'
+import { categoryIcon } from '../utils'
+import classNames from '@/utils/classNames'
+import { useNavigate } from 'react-router-dom'
+import { TbEye, TbMessage } from 'react-icons/tb'
+
+type ArticleProps = {
+    id: string
+    isLastChild: boolean
+    category: string
+    title: string
+    timeToRead: number
+    viewCount: number
+    commentCount: number
+}
+
+const Article = ({
+    id,
+    isLastChild,
+    category,
+    title,
+    timeToRead,
+    viewCount,
+    commentCount,
+}: ArticleProps) => {
+    const navigate = useNavigate()
+
+    const handleArticleClick = () => {
+        navigate(`/concepts/help-center/article/${id}`)
+    }
+
+    return (
+        <div
+            className={classNames(
+                'flex items-center justify-between py-6 border-gray-200 dark:border-gray-700 group cursor-pointer',
+                isLastChild && 'border-b',
+            )}
+            role="buttton"
+            onClick={handleArticleClick}
+        >
+            <div className="flex items-center gap-4">
+                <Avatar
+                    className="bg-gray-100 dark:bg-gray-700"
+                    size={50}
+                    icon={
+                        <span className="heading-text">
+                            {categoryIcon[category]}
+                        </span>
+                    }
+                    shape="round"
+                />
+                <div>
+                    <h6 className="font-bold group-hover:text-primary">
+                        {title}
+                    </h6>
+                    <div className="flex items-center gap-2">
+                        <span>{timeToRead} min read</span>
+                        <span>•</span>
+                        <span>{category}</span>
+                    </div>
+                </div>
+            </div>
+            <div className="flex items-center gap-3">
+                <IconText
+                    className="font-semibold"
+                    icon={<TbEye className="text-xl" />}
+                >
+                    {viewCount}
+                </IconText>
+                <IconText
+                    className="font-semibold"
+                    icon={<TbMessage className="text-xl" />}
+                >
+                    {commentCount}
+                </IconText>
+            </div>
+        </div>
+    )
+}
+
+export default Article