:construction: studio channel fetch from api

dashboard/src/components/api/Channel.ts

@@ -1,3 +1,5 @@
+import { IStudioApiResponse } from "./Auth";
+
 export type ChannelInfoProps = {
 	ChannelName: string;
 	ChannelId: string;
@@ -6,3 +8,28 @@ export type ChannelInfoProps = {
 	StudioId: string;
 	StudioType: string;
 };
+
+export interface IApiResponseChannelData {
+	uid: string;
+	name: string;
+	summary: string;
+	type: string;
+	studio: IStudioApiResponse;
+	lang: string;
+	status: number;
+	created_at: string;
+	updated_at: string;
+}
+export interface IApiResponseChannel {
+	ok: boolean;
+	message: string;
+	data: IApiResponseChannelData;
+}
+export interface IApiResponseChannelList {
+	ok: boolean;
+	message: string;
+	data: {
+		rows: IApiResponseChannelData[];
+		count: number;
+	};
+}

dashboard/src/locales/zh-Hans/buttons.ts

@@ -2,6 +2,8 @@ const items = {
 	"buttons.submit": "提交",
 	"buttons.create": "新建",
 	"buttons.edit": "编辑",
+	"buttons.delete": "删除",
+	"buttons.delete.all": "批量删除",
 };
 
 export default items;

dashboard/src/pages/studio/channel/edit.tsx

@@ -1,7 +1,14 @@
 import { useParams } from "react-router-dom";
-import { ProForm, ProFormText, ProFormSelect, ProFormTextArea } from "@ant-design/pro-components";
+import {
+	ProForm,
+	ProFormText,
+	ProFormSelect,
+	ProFormTextArea,
+} from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
 import { message, Space } from "antd";
+import { IApiResponseChannel } from "../../../components/api/Channel";
+import { get, put } from "../../../request";
 
 interface IFormData {
 	name: string;
@@ -13,6 +20,7 @@ interface IFormData {
 const Widget = () => {
 	const intl = useIntl();
 	const { channelid } = useParams(); //url 参数
+	const { studioname } = useParams();
 
 	return (
 		<>
@@ -20,9 +28,26 @@ const Widget = () => {
 			<ProForm<IFormData>
 				onFinish={async (values: IFormData) => {
 					// TODO
-					values.studio = "aaaa";
 					console.log(values);
-					message.success(intl.formatMessage({ id: "flashes.success" }));
+					const res = await put(`/v2/channel/${channelid}`, values);
+					console.log(res);
+					message.success(
+						intl.formatMessage({ id: "flashes.success" })
+					);
+				}}
+				formKey="channel_edit"
+				request={async () => {
+					// TODO
+					const res: IApiResponseChannel = await get(
+						`/v2/channel/${channelid}`
+					);
+					return {
+						name: res.data.name,
+						type: res.data.type,
+						lang: res.data.lang,
+						summary: res.data.summary,
+						studio: studioname ? studioname : "",
+					};
 				}}
 			>
 				<ProForm.Group>
@@ -34,7 +59,9 @@ const Widget = () => {
 						rules={[
 							{
 								required: true,
-								message: intl.formatMessage({ id: "channel.create.message.noname" }),
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
 							},
 						]}
 					/>
@@ -45,11 +72,15 @@ const Widget = () => {
 						options={[
 							{
 								value: "translation",
-								label: intl.formatMessage({ id: "channel.type.translation.title" }),
+								label: intl.formatMessage({
+									id: "channel.type.translation.title",
+								}),
 							},
 							{
 								value: "nissaya",
-								label: intl.formatMessage({ id: "channel.type.nissaya.title" }),
+								label: intl.formatMessage({
+									id: "channel.type.nissaya.title",
+								}),
 							},
 						]}
 						width="md"
@@ -57,7 +88,9 @@ const Widget = () => {
 						rules={[
 							{
 								required: true,
-								message: intl.formatMessage({ id: "channel.create.message.noname" }),
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
 							},
 						]}
 						label={intl.formatMessage({ id: "channel.type" })}
@@ -75,7 +108,9 @@ const Widget = () => {
 						rules={[
 							{
 								required: true,
-								message: intl.formatMessage({ id: "channel.create.message.noname" }),
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
 							},
 						]}
 						label={intl.formatMessage({ id: "channel.lang" })}

dashboard/src/pages/studio/channel/list.tsx

@@ -9,6 +9,8 @@ import { Button, Dropdown, Menu, Popover } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 
 import ChannelCreate from "../../../components/studio/channel/ChannelCreate";
+import { get } from "../../../request";
+import { IApiResponseChannelList } from "../../../components/api/Channel";
 
 const onMenuClick: MenuProps["onClick"] = (e) => {
 	console.log("click", e);
@@ -37,15 +39,14 @@ const menu = (
 	/>
 );
 
-const EType = ["translation", "nissaya", "commentray", "original", "general"];
-
 interface IItem {
 	id: number;
+	uid: string;
 	title: string;
-	subtitle: string;
+	summary: string;
 	type: string;
 	publicity: number;
-	createdAt: number;
+	createdAt: string;
 }
 
 const Widget = () => {
@@ -75,17 +76,19 @@ const Widget = () => {
 						tip: "过长会自动收缩",
 						ellipsis: true,
 						render: (text, row, index, action) => {
-							const link = `/studio/${studioname}/channel/${row.id}/edit`;
-							return (
-								<div>
-									<div>
-										<Link to={link}>{row.title}</Link>
-									</div>
-									<div>{row.subtitle}</div>
-								</div>
-							);
+							const link = `/studio/${studioname}/channel/${row.uid}/edit`;
+							return <Link to={link}>{row.title}</Link>;
 						},
 					},
+					{
+						title: intl.formatMessage({
+							id: "forms.fields.summary.label",
+						}),
+						dataIndex: "summary",
+						key: "summary",
+						tip: "过长会自动收缩",
+						ellipsis: true,
+					},
 					{
 						title: intl.formatMessage({
 							id: "forms.fields.type.label",
@@ -100,7 +103,7 @@ const Widget = () => {
 							all: { text: "全部", status: "Default" },
 							translation: { text: "译文", status: "Success" },
 							nissaya: { text: "逐词解析", status: "Processing" },
-							commentray: { text: "注疏", status: "Default" },
+							commentary: { text: "注疏", status: "Default" },
 							original: { text: "原文", status: "Default" },
 							general: { text: "通用", status: "Default" },
 						},
@@ -133,7 +136,7 @@ const Widget = () => {
 						search: false,
 						dataIndex: "createdAt",
 						valueType: "date",
-						sorter: (a, b) => a.createdAt - b.createdAt,
+						//sorter: (a, b) => a.createdAt - b.createdAt,
 					},
 					{
 						title: "操作",
@@ -179,7 +182,11 @@ const Widget = () => {
 				tableAlertOptionRender={() => {
 					return (
 						<Space size={16}>
-							<Button type="link">批量删除</Button>
+							<Button type="link">
+								{intl.formatMessage({
+									id: "buttons.delete.all",
+								})}
+							</Button>
 						</Space>
 					);
 				}}
@@ -187,27 +194,24 @@ const Widget = () => {
 					// TODO
 					console.log(params, sorter, filter);
 
-					const size = params.pageSize || 20;
+					const res: IApiResponseChannelList = await get(
+						`/v2/channel?view=studio`
+					);
+					const items: IItem[] = res.data.rows.map((item, id) => {
+						return {
+							id: id,
+							uid: item.uid,
+							title: item.name,
+							summary: item.summary,
+							type: item.type,
+							publicity: item.status,
+							createdAt: item.created_at,
+						};
+					});
 					return {
-						total: 1 << 12,
-						success: true,
-						data: Array.from(Array(size).keys()).map((x) => {
-							const id =
-								((params.current || 1) - 1) * size + x + 1;
-
-							var it: IItem = {
-								id,
-								title: `title ${id}`,
-								subtitle: `subtitle ${id}`,
-								type: EType[Math.floor(Math.random() * 4)],
-								publicity:
-									(Math.floor(Math.random() * 3) + 1) * 10,
-								createdAt:
-									Date.now() -
-									Math.floor(Math.random() * 2000000000),
-							};
-							return it;
-						}),
+						total: res.data.count,
+						succcess: true,
+						data: items,
 					};
 				}}
 				rowKey="id"