feat(dashboard): filter prototype for posts/changelogs (#123)

* refactor: mv post to ssr * refactor: remove un-used sub-communities query * refactor: batch selected * refactor: batch selected * refactor: batch selected for changelog
groupher · Jul 1, 2023 · 5b7438e · 5b7438e
1 parent 63cb9b4
commit 5b7438e
Show file tree

Hide file tree

Showing 55 changed files with 819 additions and 306 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/containers/thread/DashboardThread/CMS/Cell/index.tsx b/src/containers/thread/DashboardThread/CMS/Cell/index.tsx
@@ -3,6 +3,9 @@
 import { Cell } from 'rsuite-table'
 import TimeAgo from 'timeago-react'
 
+import { previewArticle } from '@/utils/signal'
+
+import Checker from '@/widgets/Checker'
 import ArticleCatState from '@/widgets/ArticleCatState'
 import TagsList from '@/widgets/TagsList'
 
@@ -20,6 +23,23 @@ import {
   // PublishIcon,
   PulseIcon,
 } from '../../styles/cms/cell'
+import { batchSelect } from '../../logic'
+
+export const CheckCell = ({ rowData, ...props }) => {
+  // const { cat, state } = rowData
+  const { id, _checked } = rowData
+
+  return (
+    <Cell {...props}>
+      <Checker
+        checked={_checked}
+        size="small"
+        top={5}
+        onChange={(checked) => batchSelect(id, checked)}
+      />
+    </Cell>
+  )
+}
 
 export const StateCell = ({ rowData, ...props }) => {
   const { cat, state } = rowData
@@ -37,7 +57,7 @@ export const ArticleCell = ({ rowData, ...props }) => {
   return (
     <Cell {...props}>
       <ArticleWrapper>
-        <ArticleTitle>{rowData.title}</ArticleTitle>
+        <ArticleTitle onClick={() => previewArticle(rowData)}>{rowData.title}</ArticleTitle>
         <TagsList items={rowData.articleTags} left={0} />
       </ArticleWrapper>
     </Cell>

diff --git a/src/containers/thread/DashboardThread/CMS/Changelogs/index.tsx b/src/containers/thread/DashboardThread/CMS/Changelogs/index.tsx
@@ -0,0 +1,164 @@
+import { FC, useCallback, useState } from 'react'
+import { pluck } from 'ramda'
+
+import { Table, Column, HeaderCell, Cell } from 'rsuite-table'
+
+import type { TID, TPagedArticles } from '@/spec'
+import Checker from '@/widgets/Checker'
+
+import { CheckCell, ArticleCell, StateCell, AuthorDateCell, DateCell } from '../Cell'
+import FilterBar from '../FilterBar'
+
+import { Title, SortIcon } from '../../styles/cms/changelogs'
+import { loadChangelogs, batchSelectAll } from '../../logic'
+
+/**
+ * example: https://table.rsuitejs.com/#fixed-column
+ * API: https://github.com/rsuite/rsuite-table#api
+ */
+
+type TProps = {
+  pagedChangelogs: TPagedArticles
+  loading: boolean
+  batchSelectedIDs: TID[]
+}
+
+const Changelogs: FC<TProps> = ({ pagedChangelogs, loading, batchSelectedIDs }) => {
+  const [showCheckColumn, setShowCheckColumn] = useState(false)
+  const [sortColumn, setSortColumn] = useState('id')
+
+  const allIDs = pluck('id', pagedChangelogs.entries)
+  const isAllSelected = allIDs.length === batchSelectedIDs?.length
+
+  const [sortState, setSortState] = useState({
+    views: '', // '' / asc / desc
+    commentsCount: '',
+    upvotesCount: '',
+  })
+
+  const handleSortColumn = useCallback(
+    (sortColumn, sortType) => {
+      setSortColumn(sortColumn)
+      setSortState({ ...sortState, [sortColumn]: sortType })
+    },
+    [sortState],
+  )
+
+  const renderSortIcon = useCallback(
+    (sortColumn) => {
+      const sortType = sortState[sortColumn]
+
+      switch (sortType) {
+        case 'asc': {
+          return <SortIcon.ArrowUp />
+        }
+        case 'desc': {
+          return <SortIcon.ArrowDown />
+        }
+
+        default:
+          return <SortIcon.Filter />
+      }
+    },
+    [sortState],
+  )
+
+  return (
+    <>
+      <FilterBar
+        checkboxActive={showCheckColumn}
+        triggerCheckbox={(show) => setShowCheckColumn(show)}
+        selectedCount={batchSelectedIDs.length}
+      />
+
+      <Table
+        data={pagedChangelogs.entries}
+        sortColumn={sortColumn}
+        onSortColumn={handleSortColumn}
+        rowHeight={68}
+        loading={loading}
+        hover={false}
+        autoHeight
+        cellBordered
+        bordered
+      >
+        {showCheckColumn && (
+          <Column width={40} fixed>
+            <HeaderCell>
+              <Checker
+                checked={isAllSelected}
+                size="small"
+                top={4}
+                onChange={(checked) => {
+                  if (checked) {
+                    batchSelectAll(true, allIDs)
+                    return
+                  }
+
+                  batchSelectAll(false, [])
+                }}
+              />
+            </HeaderCell>
+            {/* @ts-ignore */}
+            <CheckCell />
+          </Column>
+        )}
+
+        <Column width={280} fixed>
+          <HeaderCell>
+            <Title onClick={() => loadChangelogs()}>标题</Title>
+          </HeaderCell>
+          {/* @ts-ignore */}
+          <ArticleCell dataKey="title" />
+        </Column>
+
+        <Column width={90} fixed>
+          <HeaderCell align="center">
+            <Title>状态</Title>
+          </HeaderCell>
+          {/* @ts-ignore */}
+          <StateCell />
+        </Column>
+
+        <Column width={65} fixed sortable>
+          <HeaderCell align="center" renderSortIcon={() => renderSortIcon('upvotesCount')}>
+            <Title>投票</Title>
+          </HeaderCell>
+          <Cell dataKey="upvotesCount" align="center" />
+        </Column>
+
+        <Column width={65} sortable>
+          <HeaderCell align="center" renderSortIcon={() => renderSortIcon('views')}>
+            <Title>浏览</Title>
+          </HeaderCell>
+          <Cell dataKey="views" align="center" />
+        </Column>
+
+        <Column width={60} sortable>
+          <HeaderCell align="center" renderSortIcon={() => renderSortIcon('commentsCount')}>
+            <Title>评论</Title>
+          </HeaderCell>
+          <Cell dataKey="commentsCount" align="center" />
+        </Column>
+
+        <Column width={100}>
+          <HeaderCell align="right">
+            <Title>发布/活跃</Title>
+          </HeaderCell>
+          {/* @ts-ignore */}
+          <DateCell />
+        </Column>
+
+        <Column width={110}>
+          <HeaderCell align="right">
+            <Title>作者</Title>
+          </HeaderCell>
+          {/* @ts-ignore */}
+          <AuthorDateCell />
+        </Column>
+      </Table>
+    </>
+  )
+}
+
+export default Changelogs