Show related projects of qfRound in adminJs

src/entities/qfRound.ts

@@ -24,9 +24,6 @@ export class QfRound extends BaseEntity {
   @Column('text', { nullable: true })
   name: string;
 
-  @ManyToMany(type => Project, project => project.qfRounds)
-  projects: Project[];
-
   @Field({ nullable: true })
   @Column({ nullable: true })
   isActive: boolean;
@@ -52,4 +49,7 @@ export class QfRound extends BaseEntity {
 
   @CreateDateColumn()
   createdAt: Date;
+
+  @ManyToMany(type => Project, project => project.qfRounds)
+  projects: Project[];
 }

src/repositories/qfRoundRepository.ts

@@ -109,3 +109,16 @@ export const deactivateExpiredQfRounds = async (): Promise<void> => {
     [now],
   );
 };
+
+export const getRelatedProjectsOfQfRound = async (
+  qfRoundId: number,
+): Promise<{ slug: string; name: string }[]> => {
+  const query = `
+    SELECT "p"."slug", "p"."title" , p.id
+    FROM "project" "p"
+    INNER JOIN "project_qf_rounds_qf_round" "qp" ON "qp"."projectId" = "p"."id"
+    WHERE "qp"."qfRoundId" = ${qfRoundId}
+  `;
+
+  return QfRound.query(query);
+};

src/server/adminJs/tabs/components/ProjectsInQfRound.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { withTheme } from 'styled-components';
+import { Section, Label, Link } from '@adminjs/design-system';
+
+const ProjectsInQfRound = props => {
+  const projects = props?.record?.params?.projects;
+
+  return (
+    <div>
+      <Label>Related Projects</Label>
+      <Section>
+        {projects.map(project => {
+          const { id, title, slug } = project;
+          const projectLink = `/admin/resources/Project/records/${id}/show`;
+          return (
+            <div key={id}>
+              <br />
+              <Section>
+                <h1>{title}</h1>
+                <h2>{slug}</h2>
+                <br />
+                <Link href={projectLink || ''} target="_blank">
+                  {projectLink}
+                </Link>
+              </Section>
+            </div>
+          );
+        })}
+      </Section>
+      <br />
+    </div>
+  );
+};
+
+export default withTheme(ProjectsInQfRound);

src/server/adminJs/tabs/qfRoundTab.ts

@@ -12,9 +12,13 @@ import {
   AdminJsContextInterface,
   AdminJsRequestInterface,
 } from '../adminJs-types';
-import { ValidationError } from 'adminjs';
+import adminJs, { ValidationError } from 'adminjs';
 import { isQfRoundHasEnded } from '../../../services/qfRoundService';
-import { findQfRoundById } from '../../../repositories/qfRoundRepository';
+import {
+  findQfRoundById,
+  getRelatedProjectsOfQfRound,
+} from '../../../repositories/qfRoundRepository';
+import { RecordJSON } from 'adminjs/src/frontend/interfaces/record-json.interface';
 
 export const refreshMaterializedViews = async (
   response,
@@ -24,6 +28,26 @@ export const refreshMaterializedViews = async (
   return response;
 };
 
+export const fillProjects: After<ActionResponse> = async (
+  response,
+  _request,
+  _context,
+) => {
+  const record: RecordJSON = response.record || {};
+  const qfRoundId = record.params.qfRoundId || record.params.id;
+  const projects = await getRelatedProjectsOfQfRound(qfRoundId);
+
+  const adminJsBaseUrl = process.env.SERVER_URL;
+  response.record = {
+    ...record,
+    params: {
+      ...record.params,
+      projects,
+    },
+  };
+  return response;
+};
+
 export const qfRoundTab = {
   resource: QfRound,
   options: {
@@ -47,11 +71,15 @@ export const qfRoundTab = {
         isVisible: true,
       },
       projects: {
+        type: 'mixed',
         isVisible: {
-          list: true,
-          edit: false,
+          list: false,
           filter: false,
           show: true,
+          edit: false,
+        },
+        components: {
+          show: adminJs.bundle('./components/ProjectsInQfRound'),
         },
       },
       createdAt: {
@@ -88,6 +116,11 @@ export const qfRoundTab = {
           canAccessQfRoundAction({ currentAdmin }, ResourceActions.NEW),
         after: refreshMaterializedViews,
       },
+      show: {
+        isAccessible: ({ currentAdmin }) =>
+          canAccessQfRoundAction({ currentAdmin }, ResourceActions.SHOW),
+        after: fillProjects,
+      },
       edit: {
         isAccessible: ({ currentAdmin }) =>
           canAccessQfRoundAction({ currentAdmin }, ResourceActions.EDIT),