成员看板 (#347)

Author: luojiyin1987

pages/member/[name].tsx

@@ -1,21 +1,47 @@
 import { text2color } from 'idea-react';
 import { marked } from 'marked';
+import { textJoin } from 'mobx-i18n';
 import { observer } from 'mobx-react';
 import { compose, errorLogger, translator } from 'next-ssr-middleware';
 import { Component } from 'react';
 import { Badge, Breadcrumb, Col, Container, Image, Row } from 'react-bootstrap';
 import { formatDate } from 'web-utility';
 
+import { ActivityCard } from '../../components/Activity/Card';
+import { ArticleCard } from '../../components/Article/Card';
 import { CommentBox } from '../../components/Base/CommentBox';
 import { LarkImage } from '../../components/Base/LarkImage';
+import { CommunityCard } from '../../components/Community/CommunityCard';
+import { GroupCard } from '../../components/Department/Card';
+import { MeetingCard } from '../../components/Governance/MeetingCard';
 import { PageHead } from '../../components/Layout/PageHead';
+import { OrganizationCard } from '../../components/Organization/Card';
+import { Activity, SearchActivityModel } from '../../models/Activity';
 import { i18n, t } from '../../models/Base/Translation';
+import { Community, SearchCommunityModel } from '../../models/Community';
+import { SearchNGOModel } from '../../models/Community/Organization';
+import {
+  Organization,
+  SearchOrganizationModel,
+} from '../../models/Community/Organization';
+import { Meeting, SearchMeetingModel } from '../../models/Governance/Meeting';
 import { Personnel, PersonnelModel } from '../../models/Personnel';
+import {
+  Department,
+  SearchDepartmentModel,
+} from '../../models/Personnel/Department';
 import { Person, PersonModel } from '../../models/Personnel/Person';
-
+import { Article, SearchArticleModel } from '../../models/Product/Article';
 interface PersonDetailPageProps {
   person: Person;
   personnels: Personnel[];
+  articles: Article[];
+  departments: Department[];
+  meetings: Meeting[];
+  activitys: Activity[];
+  communitys: Community[];
+  organizations: Organization[];
+  NGOs: Organization[];
 }
 
 export const getServerSideProps = compose<{ name: string }, PersonDetailPage>(
@@ -31,8 +57,38 @@ export const getServerSideProps = compose<{ name: string }, PersonDetailPage>(
       recipient: name,
     });
 
+    const [
+      departments,
+      meetings,
+      articles,
+      activitys,
+      communitys,
+      organizations,
+      NGOs,
+    ] = await Promise.all([
+      new SearchDepartmentModel().getSearchList(name + ''),
+      new SearchMeetingModel().getSearchList(name + ''),
+      new SearchArticleModel().getSearchList(name + ''),
+      new SearchActivityModel().getSearchList(name + ''),
+      new SearchCommunityModel().getSearchList(name + ''),
+      new SearchOrganizationModel().getSearchList(name + ''),
+      new SearchNGOModel().getSearchList(name + ''),
+    ]);
+
+    const searchResults = {
+      person,
+      personnels,
+      departments,
+      meetings,
+      articles,
+      activitys,
+      communitys,
+      organizations,
+      NGOs,
+    };
+
     return {
-      props: JSON.parse(JSON.stringify({ person, personnels })),
+      props: JSON.parse(JSON.stringify(searchResults)),
     };
   },
 );
@@ -137,8 +193,108 @@ export default class PersonDetailPage extends Component<PersonDetailPageProps> {
     </li>
   );
 
+  renderArticle = (articles: Article[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('article'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {articles.map(article => (
+          <Col key={article.id as string} as="li">
+            <ArticleCard {...article} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+  renderDepartment = (departments: Department[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('department'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {departments.map(department => (
+          <Col key={department.id as string} as="li">
+            <GroupCard {...department} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
+  renderMeeting = (meetings: Meeting[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('meeting'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {meetings.map(meeting => (
+          <Col key={meeting.id as string} as="li">
+            <MeetingCard {...meeting} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
+  renderActivity = (activitys: Activity[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('activity'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {activitys.map(activity => (
+          <Col key={activity.id as string} as="li">
+            <ActivityCard {...activity} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
+  renderCommunity = (communitys: Community[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('community'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {communitys.map(community => (
+          <Col key={community.id as string} as="li">
+            <CommunityCard {...community} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
+  renderOrganization = (organizations: Organization[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('organization'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {organizations.map(({ id, ...organization }) => (
+          <Col key={id as string} as="li">
+            <OrganizationCard {...organization} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
+  renderNGO = (NGOs: Organization[]) => (
+    <details>
+      <summary>{textJoin(t('related'), t('NGO'))}</summary>
+      <Row as="ol" className="list-unstyled g-3" xs={1} md={2}>
+        {NGOs.map(({ id, ...NGO }) => (
+          <Col key={id as string} as="li">
+            <OrganizationCard {...NGO} />
+          </Col>
+        ))}
+      </Row>
+    </details>
+  );
+
   render() {
-    const { person, personnels } = this.props;
+    const {
+      person,
+      personnels,
+      departments,
+      meetings,
+      articles,
+      activitys,
+      communitys,
+      organizations,
+      NGOs,
+    } = this.props;
 
     return (
       <Container className="py-5">
@@ -165,6 +321,13 @@ export default class PersonDetailPage extends Component<PersonDetailPageProps> {
             <hr className="my-5" />
 
             {personnels.map(this.renderPersonnel)}
+            {articles.length > 0 && this.renderArticle(articles)}
+            {departments.length > 0 && this.renderDepartment(departments)}
+            {meetings.length > 0 && this.renderMeeting(meetings)}
+            {activitys.length > 0 && this.renderActivity(activitys)}
+            {communitys.length > 0 && this.renderCommunity(communitys)}
+            {organizations.length > 0 && this.renderOrganization(organizations)}
+            {NGOs.length > 0 && this.renderNGO(NGOs)}
           </Col>
         </Row>
 

translation/en-US.ts

@@ -118,6 +118,8 @@ export default {
   department: 'department',
   organization: 'organization',
   activity: 'activity',
+  meeting: 'meeting',
+  NGO: 'NGO',
 
   // Organization page
   reset: 'reset',
@@ -270,4 +272,7 @@ export default {
   this_term_proposition: 'This term proposition',
   recommendation: 'recommendation',
   vote_for_me: 'Vote for Me',
+
+  // Member pages
+  related: 'Related',
 } as const;

translation/zh-CN.ts

@@ -112,6 +112,8 @@ export default {
   department: '部门',
   organization: '组织',
   activity: '活动',
+  meeting: '会议',
+  NGO: 'NGO',
 
   // Organization page
   reset: '重置',
@@ -263,4 +265,7 @@ export default {
   this_term_proposition: '本届主张',
   recommendation: '推荐语',
   vote_for_me: '投我一票',
+
+  // Member pages
+  related: '相关',
 } as const;

translation/zh-TW.ts

@@ -112,6 +112,8 @@ export default {
   department: '部門',
   organization: '組織',
   activity: '活動',
+  meeting: '會議',
+  NGO: 'NGO',
 
   // Organization page
   reset: '重置',
@@ -263,4 +265,7 @@ export default {
   this_term_proposition: '本屆主張',
   recommendation: '推薦語',
   vote_for_me: '投我一票',
+
+  // Member pages
+  related: '相關',
 } as const;