ui(post-list): enrich post metadata (#137)

Author: laggage

src/models/post.ts

@@ -27,7 +27,7 @@ export class Post {
     isPinned = false;
     isPublished = false;
     isUpdateDateAdded = false;
-    password = '';
+    password?: string | null = '';
     postBody = '';
     postType: PostType = PostType.blogPost;
     accessPermission: AccessPermission = 0;
@@ -88,4 +88,16 @@ export enum AccessPermission {
     undeclared = 0,
     authenticated = 1 << 3,
     owner = 1 << 28,
+    private = 1 << 27,
+}
+
+export function formatAccessPermission(value: AccessPermission) {
+    switch (value) {
+        case AccessPermission.undeclared:
+            return '所有人';
+        case AccessPermission.authenticated:
+            return '登录用户';
+        default:
+            return '只有我';
+    }
 }

src/tree-view-providers/models/post-metadata.ts

@@ -4,7 +4,7 @@ import format from 'date-fns/format';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
 import zhCN from 'date-fns/locale/zh-CN';
 import { TreeItem, TreeItemCollapsibleState, ThemeIcon } from 'vscode';
-import { Post } from '../../models/post';
+import { AccessPermission, Post, formatAccessPermission } from '../../models/post';
 import { PostEditDto } from '../../models/post-edit-dto';
 import { postCategoryService } from '../../services/post-category.service';
 import { postService } from '../../services/post.service';
@@ -17,6 +17,8 @@ export enum RootPostMetadataType {
     tagEntry = 'tagEntry',
     updateDate = 'updateDate',
     createDate = 'createDate',
+    publishStatus = 'publishStatus',
+    accessPermission = 'accessPermission',
 }
 
 const rootMetadataMap = (parsedPost: Post, postEditDto: PostEditDto | undefined) =>
@@ -26,6 +28,8 @@ const rootMetadataMap = (parsedPost: Post, postEditDto: PostEditDto | undefined)
             () => (parsedPost.hasUpdates ? new PostUpdatedDateMetadata(parsedPost) : null),
         ],
         [RootPostMetadataType.createDate, () => new PostCreatedDateMetadata(parsedPost)],
+        [RootPostMetadataType.publishStatus, () => new PostPublishStatusMetadata(parsedPost)],
+        [RootPostMetadataType.accessPermission, () => new PostAccessPermissionMetadata(parsedPost)],
         [
             RootPostMetadataType.categoryEntry,
             () =>
@@ -206,3 +210,58 @@ export class PostUpdatedDateMetadata extends PostDateMetadata {
         return differenceInSeconds(dateUpdated ?? now, datePublished ?? now) > 0;
     }
 }
+
+export class PostAccessPermissionMetadata extends PostMetadata {
+    constructor(public readonly parent: Post) {
+        super(parent);
+    }
+
+    static parseIcon(accessPermission: AccessPermission, requirePassword: boolean) {
+        if (requirePassword) return new ThemeIcon('key');
+
+        switch (accessPermission) {
+            case AccessPermission.undeclared:
+                return new ThemeIcon('globe');
+            case AccessPermission.authenticated:
+                return new ThemeIcon('public-ports-view-icon');
+            default:
+                return new ThemeIcon('private-ports-view-icon');
+        }
+    }
+
+    toTreeItem(): Promise<TreeItem> {
+        const { password } = this.parent;
+        const isPasswordRequired = password != null && password.length > 0;
+        return Promise.resolve(
+            Object.assign<TreeItem, Partial<TreeItem>>(
+                new TreeItem(
+                    `访问权限: ${formatAccessPermission(this.parent.accessPermission)}` +
+                        (isPasswordRequired ? '(需密码)' : '')
+                ),
+                {
+                    iconPath: PostAccessPermissionMetadata.parseIcon(this.parent.accessPermission, isPasswordRequired),
+                }
+            )
+        );
+    }
+}
+
+export class PostPublishStatusMetadata extends PostMetadata {
+    constructor(public readonly parent: Post) {
+        super(parent);
+    }
+
+    toTreeItem(): Promise<TreeItem> {
+        const {
+            parent: { isPublished, isDraft },
+        } = this;
+        return Promise.resolve(
+            Object.assign<TreeItem, Partial<TreeItem>>(
+                new TreeItem(isPublished ? '已发布' : '未发布' + (isDraft ? '(草稿)' : '')),
+                {
+                    iconPath: new ThemeIcon(isDraft ? 'issue-draft' : isPublished ? 'issue-closed' : 'circle-slash'),
+                }
+            )
+        );
+    }
+}

ui/post-configuration/components/AccessPermissionSelector.tsx

@@ -1,5 +1,5 @@
 import { ChoiceGroup, IChoiceGroupOption, Label, Stack } from '@fluentui/react';
-import { AccessPermission } from '../../../src/models/post';
+import { AccessPermission, formatAccessPermission } from '../../../src/models/post';
 import React from 'react';
 
 export interface IAccessPermissionSelectorProps {
@@ -15,18 +15,18 @@ export class AccessPermissionSelector extends React.Component<
 > {
     private options: IChoiceGroupOption[] = [
         {
-            text: '所有人',
+            text: formatAccessPermission(AccessPermission.undeclared),
             value: AccessPermission.undeclared,
             key: AccessPermission.undeclared.toString(),
         },
         {
-            text: '登录用户',
+            text: formatAccessPermission(AccessPermission.authenticated),
             value: AccessPermission.authenticated,
             key: AccessPermission.authenticated.toString(),
         },
         {
             text: '只有我',
-            value: AccessPermission.owner,
+            value: formatAccessPermission(AccessPermission.owner),
             key: AccessPermission.owner.toString(),
         },
     ];

ui/post-configuration/components/PostForm.tsx

@@ -91,7 +91,7 @@ export class PostForm extends React.Component<IPostFormProps, IPostFormState> {
                     />
                     <PasswordInput
                         onChange={value => this.setState({ password: value })}
-                        password={this.state.password}
+                        password={this.state.password ?? ''}
                     />
                     <InputSummary
                         summary={this.state.description}