feat: Replace Graphql with tRPC in frontend

.vscode/settings.json

@@ -18,5 +18,5 @@
         "**/.factorypath": true
     },
     "css.format.enable": true,
-    "typescript.tsdk": "node_modules\\typescript\\lib"
+    "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -97,16 +97,20 @@
     },
     "dependencies": {
         "@ant-design/icons": "5.3.7",
-        "@ant-design/plots": "2.2.5",
+        "@ant-design/plots": "2.2.6",
         "@apollo/client": "3.10.8",
         "@apollo/server": "4.10.4",
         "@commitlint/config-conventional": "^18.6.2",
         "@commitlint/config-nx-scopes": "^18.6.1",
         "@ideafast/idgen": "0.1.1",
         "@swc/helpers": "0.5.12",
+        "@tanstack/react-query": "4.33.0",
+        "@trpc/client": "10.37.1",
+        "@trpc/react-query": "10.37.1",
         "@trpc/server": "10.45.2",
         "JSONStream": "1.3.5",
         "antd": "5.19.2",
+        "antd-img-crop": "4.22.0",
         "apollo-upload-client": "18.0.1",
         "axios": "1.6.0",
         "bcrypt": "5.1.1",
@@ -152,6 +156,7 @@
         "react-dropzone": "14.2.3",
         "react-helmet-async": "2.0.5",
         "react-highlight-words": "0.20.0",
+        "react-quill": "2.0.0",
         "react-router-dom": "6.24.1",
         "regenerator-runtime": "0.14.1",
         "sanitize-filename": "1.6.3",

packages/itmat-apis/src/graphql/resolvers/userResolvers.ts

@@ -1,5 +1,5 @@
 import { CoreError, IUserWithoutToken, enumUserTypes } from '@itmat-broker/itmat-types';
-import { DBType, GraphQLErrorDecroator, PermissionCore, UserCore, V2CreateUserInput, V2EditUserInput, errorCodes, makeGenericReponse } from '@itmat-broker/itmat-cores';
+import { DBType, GraphQLErrorDecroator, PermissionCore, UserCore, V2CreateUserInput, V2EditUserInput, errorCodes, makeGenericResponse } from '@itmat-broker/itmat-cores';
 import { DMPResolversMap } from './context';
 import { GraphQLError } from 'graphql';
 
@@ -158,7 +158,7 @@ export class UserResolvers {
                 undefined,
                 args.user.description
             );
-            return makeGenericReponse(user.id, true, undefined, 'User created successfully.');
+            return makeGenericResponse(user.id, true, undefined, 'User created successfully.');
         } catch (e) {
             return GraphQLErrorDecroator(e as CoreError);
         }

packages/itmat-apis/src/graphql/responses.ts

@@ -5,7 +5,7 @@ export interface IGenericResponse {
     description?: string;
 }
 
-export function makeGenericReponse(id?: string, successful?: boolean, code?: string, description?: string): IGenericResponse {
+export function makeGenericResponse(id?: string, successful?: boolean, code?: string, description?: string): IGenericResponse {
     const res: IGenericResponse = {
         id: id ?? undefined,
         successful: successful ?? true,

packages/itmat-apis/src/trpc/configProcedure.ts

@@ -1,7 +1,7 @@
 import { TRPCBaseProcedure, TRPCRouter } from './trpc';
 import { z } from 'zod';
 import { ConfigCore } from '@itmat-broker/itmat-cores';
-import { enumConfigType } from '@itmat-broker/itmat-types';
+import { enumConfigType, enumStudyBlockColumnValueType } from '@itmat-broker/itmat-types';
 
 const ZBase = z.object({
     id: z.string(),
@@ -32,15 +32,16 @@ const ZStudyConfig = ZBase.extend({
     defaultStudyProfile: z.string().nullable(),
     defaultMaximumFileSize: z.number(),
     defaultRepresentationForMissingValue: z.string(),
-    defaultFileColumns: z.array(z.object({
+    defaultFileBlocks: z.array(z.object({
         title: z.string(),
-        type: z.string()
+        fieldIds: z.array(z.string()),
+        defaultFileColumns: z.array(z.object({
+            title: z.string(),
+            property: z.string(),
+            type: z.nativeEnum(enumStudyBlockColumnValueType)
+        })),
+        defaultFileColumnsPropertyColor: z.string()
     })),
-    defaultFileColumnsPropertyColor: z.string().nullable(),
-    defaultFileDirectoryStructure: z.object({
-        pathLabels: z.array(z.string()),
-        description: z.string().nullable()
-    }),
     defaultVersioningKeys: z.array(z.string())
 });
 

packages/itmat-apis/src/trpc/dataProcedure.ts

@@ -283,24 +283,52 @@ export class DataRouter {
              * @param studyId - The id of the study.
              * @param versionId - The id of the data version. By default not specified for the latest version.
              * @param fieldIds - The list of fields to return.
-             * @param aggregation - The aggregation pipeline. Used for data post preocessing.
-             * @param useCache - Whether to use fetch the data from cache.
-             * @param forceUpdate - Whether to update the cache with the results from this call.
-             * @param readable - Whether to return the readable stream.
              *
              * @return IFile[] - The list of objects of IFile.
              */
             getFiles: this.baseProcedure.input(z.object({
                 studyId: z.string(),
                 versionId: z.optional(z.string()),
-                fieldIds: z.optional(z.array(z.string()))
+                fieldIds: z.optional(z.array(z.string())),
+                readable: z.optional(z.boolean()),
+                useCache: z.optional(z.boolean()),
+                forceUpdate: z.optional(z.boolean())
             })).query(async (opts) => {
                 return await this.dataCore.getStudyFiles(
                     opts.ctx.req.user,
                     opts.input.studyId,
                     opts.input.fieldIds,
-                    opts.input.versionId
+                    opts.input.versionId,
+                    opts.input.readable,
+                    opts.input.useCache,
+                    opts.input.forceUpdate
                 );
+            }),
+            /**
+             * Get the file of a study.
+             *
+             * @param fileId - The id of the file.
+             *
+             * @return IFile - The object of IFile.
+             */
+            deleteFile: this.baseProcedure.input(z.object({
+                fileId: z.string()
+            })).mutation(async (opts) => {
+                return await this.dataCore.deleteFile(opts.ctx.req.user, opts.input.fileId);
+            }),
+            /**
+             * Get the summary of a study.
+             *
+             * @param studyId - The id of the study.
+             *
+             * @return The object of IStudySummary.
+             */
+            getStudyDataSummary: this.baseProcedure.input(z.object({
+                studyId: z.string(),
+                useCache: z.optional(z.boolean()),
+                forceUpdate: z.optional(z.boolean())
+            })).query(async (opts) => {
+                return await this.dataCore.getStudySummary(opts.ctx.req.user, opts.input.studyId, opts.input.useCache, opts.input.forceUpdate);
             })
         });
     }

packages/itmat-apis/src/trpc/domainProcedure.ts

@@ -84,6 +84,22 @@ export class DomainRouter {
                 domainId: z.string()
             })).mutation(async (opts) => {
                 return await this.domainCore.deleteDomain(opts.ctx.req?.user ?? opts.ctx.user, opts.input.domainId);
+            }),
+            /**
+             * Get current sub path.
+             *
+             * @returns The current sub path.
+             */
+            getCurrentSubPath: this.baseProcedure.query(async (opts) => {
+                return this.domainCore.getCurrentSubPath(opts);
+            }),
+            /**
+             * Get current domain. Note this can be used for not logged in users.
+             *
+             * @returns The current domain.
+             */
+            getCurrentDomain: this.baseProcedure.query(async (opts) => {
+                return await this.domainCore.getCurrentDomain(opts);
             })
         });
     }

packages/itmat-apis/src/trpc/driveProcedure.ts

@@ -63,9 +63,9 @@ export class DriveRouter {
                 files: z.object({
                     files: z.array(FileUploadSchema)
                 }),
-                paths: z.array(z.array(z.string()))
+                paths: z.union([z.array(z.array(z.string())), z.string()])
             })).mutation(async (opts) => {
-                return await this.driveCore.createRecursiveDrives(opts.ctx.user, opts.input.parentId, opts.input.files.files, opts.input.paths);
+                return await this.driveCore.createRecursiveDrives(opts.ctx.user, opts.input.parentId, opts.input.files.files, typeof opts.input.paths === 'string' ? JSON.parse(opts.input.paths) : opts.input.paths);
             }),
             /**
              * Get the drive nodes of a user, including own drives and shared drives.

packages/itmat-apis/src/trpc/roleProcedure.ts

@@ -16,42 +16,42 @@ export class RoleRouter {
     _router() {
         return this.router({
             /**
-     * Get the roles of a user.
-     *
-     * @param studyId - The id of the study.
-     *
-     * @returns IRole[]
-     */
+             * Get the roles of a user.
+             *
+             * @param studyId - The id of the study.
+             *
+             * @returns IRole[]
+             */
             getUserRoles: this.baseProcedure.input(z.object({
                 userId: z.string(),
                 studyId: z.optional(z.string())
             })).query(async (opts) => {
                 return await this.permissionCore.getRolesOfUser(opts.ctx.user, opts.input.userId, opts.input.studyId);
             }),
             /**
-     * Get the roles of a study.
-     *
-     * @param studyId - The id of the study.
-     *
-     * @returns IRole[]
-     */
+             * Get the roles of a study.
+             *
+             * @param studyId - The id of the study.
+             *
+             * @returns IRole[]
+             */
             getStudyRoles: this.baseProcedure.input(z.object({
                 studyId: z.string()
             })).query(async (opts) => {
                 return await this.permissionCore.getRolesOfStudy(opts.ctx.user, opts.input.studyId);
             }),
             /**
-     * Create a new study role.
-     *
-     * @param studyId - The id of the study.
-     * @param name - The name of the role.
-     * @param description - The description of the role.
-     * @param dataPermissions - The data permissions for the role.
-     * @param studyRole - The role of the study.
-     * @param users - The users of the role.
-     *
-     * @returns IRole
-     */
+             * Create a new study role.
+             *
+             * @param studyId - The id of the study.
+             * @param name - The name of the role.
+             * @param description - The description of the role.
+             * @param dataPermissions - The data permissions for the role.
+             * @param studyRole - The role of the study.
+             * @param users - The users of the role.
+             *
+             * @returns IRole
+             */
             createStudyRole: this.baseProcedure.input(z.object({
                 studyId: z.string(),
                 name: z.string(),
@@ -76,17 +76,17 @@ export class RoleRouter {
                 );
             }),
             /**
-     * Edit a study role.
-     *
-     * @param roleId - The id of the role.
-     * @param name - The name of the role.
-     * @param description - The description of the role.
-     * @param dataPermissions - The data permissions for the role.
-     * @param studyRole - The role of the study.
-     * @param users - The users of the role.
-     *
-     * @returns IRole
-     */
+             * Edit a study role.
+             *
+             * @param roleId - The id of the role.
+             * @param name - The name of the role.
+             * @param description - The description of the role.
+             * @param dataPermissions - The data permissions for the role.
+             * @param studyRole - The role of the study.
+             * @param users - The users of the role.
+             *
+             * @returns IRole
+             */
             editStudyRole: this.baseProcedure.input(z.object({
                 roleId: z.string(),
                 name: z.optional(z.string()),
@@ -111,12 +111,12 @@ export class RoleRouter {
                 );
             }),
             /**
-     * Delete a study role.
-     *
-     * @param roleId - The id of the role.
-     *
-     * @returns IRole
-     */
+             * Delete a study role.
+             *
+             * @param roleId - The id of the role.
+             *
+             * @returns IRole
+             */
             deleteStudyRole: this.baseProcedure.input(z.object({
                 roleId: z.string()
             })).mutation(async (opts) => {