feat(flat-component): add PeriodicRoomPanel component to storybook

packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { PeriodicRoomPanel, PeriodicRoomPanelProps } from ".";
+import { RoomStatus, RoomType } from "../../types/room";
+import faker from "faker";
+import Chance from "chance";
+
+const chance = new Chance();
+
+const storyMeta: Meta = {
+    title: "PeriodicRoomPage/PeriodicRoomPanel",
+    component: PeriodicRoomPanel,
+};
+
+export default storyMeta;
+
+const randomRoomCount = chance.integer({ min: 1, max: 50 });
+
+export const Overview: Story<PeriodicRoomPanelProps> = args => (
+    <div className="vh75 mw8-ns">
+        <PeriodicRoomPanel {...args} />
+    </div>
+);
+Overview.args = {
+    rooms: Array(randomRoomCount)
+        .fill(0)
+        .map(() => {
+            return {
+                ownerUUID: faker.random.uuid(),
+                roomUUID: faker.random.uuid(),
+                beginTime: faker.date.past().valueOf(),
+                endTime: faker.date.future().valueOf(),
+                roomStatus: RoomStatus.Idle,
+            };
+        }),
+    isCreator: true,
+    periodicInfo: {
+        weeks: [1, 3, 5],
+        roomType: chance.pickone([RoomType.BigClass, RoomType.OneToOne, RoomType.SmallClass]),
+        endTime: faker.date.future(),
+        roomCount: randomRoomCount,
+    },
+};

packages/flat-components/src/components/PeriodicRoomPage/index.less

@@ -0,0 +1,72 @@
+.periodic-room-panel-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 65px;
+    overflow-y: auto;
+}
+
+.periodic-room-panel-body {
+    max-width: 840px;
+    min-width: 540px;
+    margin: 0 auto;
+    padding-top: 24px;
+}
+
+.periodic-room-panel-btn-list {
+    display: flex;
+    flex-direction: row-reverse;
+
+    .ant-btn {
+        width: 128px;
+        height: 32px;
+        margin-right: 8px;
+    }
+}
+
+.periodic-room-panel-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #444e60;
+    line-height: 1;
+    margin: 0;
+}
+
+.periodic-room-panel-tips {
+    background-color: #f3f6f9;
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 24px;
+}
+
+.periodic-room-panel-tips-title {
+    color: #3381ff;
+}
+
+.periodic-room-panel-tips-type {
+    color: #7a7b7c;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.periodic-room-panel-tips-inner {
+    color: #7a7b7c;
+}
+
+.periodic-room-panel-table-line {
+    width: 100%;
+    margin-top: 16px;
+    border-bottom: solid 1px #dbe1ea;
+}
+
+.ant-table-tbody > tr > td {
+    color: #7a7b7c;
+    border-bottom: 1px solid transparent;
+}
+
+.periodic-room-panel-month-value {
+    color: #444e60;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-top: 16px;
+}

packages/flat-components/src/components/PeriodicRoomPage/index.tsx

@@ -0,0 +1,161 @@
+import "./index.less";
+
+import React, { useState } from "react";
+import { Button, Table } from "antd";
+import { getDay } from "date-fns";
+import { format, formatWithOptions } from "date-fns/fp";
+import { zhCN } from "date-fns/locale";
+import { RoomInfo, RoomStatus, RoomType, Week } from "../../types/room";
+import { getRoomTypeName, getWeekName, getWeekNames } from "../../utils/room";
+import { RoomStatusElement } from "../RoomStatusElement";
+import { RemoveRoomModal } from "../RemoveRoomModal";
+
+export interface PeriodicRoomPanelProps {
+    rooms: RoomInfo[];
+    isCreator: boolean;
+    periodicInfo: {
+        weeks: Week[];
+        roomType: RoomType;
+        endTime: Date;
+        roomCount: number;
+    };
+    jumpToPeriodicModifyPage: () => void;
+    onCancelRoom: () => void;
+}
+
+export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
+    rooms,
+    periodicInfo,
+    isCreator,
+    jumpToPeriodicModifyPage,
+    onCancelRoom,
+}) => {
+    const [cancelModalVisible, showCancelModal] = useState(false);
+
+    const yearMonthFormat = formatWithOptions({ locale: zhCN }, "yyyy/MM");
+    const dayFormat = formatWithOptions({ locale: zhCN }, "dd");
+    const timeSuffixFormat = format("HH:mm");
+    const dayWeekFormat = formatWithOptions({ locale: zhCN }, "yyyy/MM/dd iii");
+
+    const hasRunning = rooms.some(room =>
+        [RoomStatus.Started, RoomStatus.Paused].includes(room?.roomStatus as RoomStatus),
+    );
+
+    const defaultDate = new Date();
+
+    const renderPeriodicRoomTable = (): React.ReactNode => {
+        const polymerizationRooms = (() => {
+            const result: Record<string, RoomInfo[]> = {};
+
+            rooms.forEach(room => {
+                if (room?.beginTime) {
+                    const key = result[yearMonthFormat(room.beginTime)];
+
+                    if (key) {
+                        key.push(room);
+                    } else {
+                        result[yearMonthFormat(room.beginTime)] = [room];
+                    }
+                }
+            });
+
+            return result;
+        })();
+
+        const groupedList = Object.keys(polymerizationRooms)
+            .sort()
+            .map(key => (
+                <div key={key}>
+                    <div className="periodic-room-panel-month-value">{key}</div>
+                    <div className="periodic-room-panel-table-line" />
+                    <Table
+                        rowKey="roomUUID"
+                        dataSource={polymerizationRooms[key]}
+                        showHeader={false}
+                        bordered={false}
+                        pagination={false}
+                    >
+                        <Table.Column
+                            render={(_, room: RoomInfo) =>
+                                dayFormat(room.beginTime || defaultDate) + "日"
+                            }
+                        />
+                        <Table.Column
+                            render={(_, room: RoomInfo) =>
+                                getWeekName(getDay(room.beginTime || defaultDate))
+                            }
+                        />
+                        <Table.Column
+                            render={(_, room: RoomInfo) => {
+                                return (
+                                    timeSuffixFormat(room.beginTime || defaultDate) +
+                                    "~" +
+                                    timeSuffixFormat(room.endTime || defaultDate)
+                                );
+                            }}
+                        />
+                        <Table.Column
+                            render={(_, room: RoomInfo) => {
+                                return <RoomStatusElement room={room} />;
+                            }}
+                        />
+                        {/* 
+                        // TODO: MoreMenu component
+                        <Table.Column
+                        render={(_, room: RoomInfo) => {
+                            return null;
+                        }}
+                    /> */}
+                    </Table>
+                </div>
+            ));
+        return <div className="periodic-room-panel-table-container">{groupedList}</div>;
+    };
+
+    return (
+        <div className="periodic-room-panel-container">
+            <div className="periodic-room-panel-body">
+                <div className="periodic-room-panel-tips">
+                    <div className="periodic-room-panel-tips-title">
+                        每{getWeekNames(periodicInfo.weeks)}
+                    </div>
+                    <div className="periodic-room-panel-tips-type">
+                        房间类型：{getRoomTypeName(periodicInfo.roomType)}
+                    </div>
+                    <div className="periodic-room-panel-tips-inner">
+                        结束于 {dayWeekFormat(periodicInfo.endTime)} ，共 {periodicInfo.roomCount}{" "}
+                        个房间
+                    </div>
+                </div>
+                <div className="periodic-room-panel-btn-list">
+                    {isCreator ? (
+                        <>
+                            <Button disabled={hasRunning} onClick={jumpToPeriodicModifyPage}>
+                                修改周期性房间
+                            </Button>
+                            <Button
+                                danger
+                                onClick={() => showCancelModal(true)}
+                                disabled={hasRunning}
+                            >
+                                取消周期性房间
+                            </Button>
+                        </>
+                    ) : (
+                        <Button danger onClick={() => showCancelModal(true)}>
+                            移除周期性房间
+                        </Button>
+                    )}
+                </div>
+                {renderPeriodicRoomTable()}
+            </div>
+            <RemoveRoomModal
+                cancelModalVisible={cancelModalVisible}
+                isCreator={isCreator}
+                onCancel={() => showCancelModal(false)}
+                onCancelRoom={onCancelRoom}
+                isPeriodicDetailsPage={true}
+            />
+        </div>
+    );
+};