Merge pull request #35 from CSCfi/crosswalk-editor-demo3

Work in progress version of the crosswalk editor. Can be tested using skosrdf files. No saving functionality yet.
CSCfi · Dec 7, 2023 · 941627d · 941627d
2 parents cdd3f73 + df360d9
commit 941627d
Show file tree

Hide file tree

Showing 21 changed files with 2,599 additions and 5,696 deletions.
diff --git a/mscr-ui/src/common/components/crosswalk-list/index.tsx b/mscr-ui/src/common/components/crosswalk-list/index.tsx
@@ -1,9 +1,7 @@
 import { useTranslation } from 'next-i18next';
 import { Button } from 'suomifi-ui-components';
 import { List, ListItem } from './crosswalk-list.styles';
-import { Schema } from '@app/common/interfaces/schema.interface';
 import { Grid } from '@mui/material';
-import TreeviewTest from '../treeview-test';
 import router from 'next/router';
 import { Crosswalk } from '@app/common/interfaces/crosswalk.interface';
 
@@ -26,9 +24,8 @@ export default function CrosswalkList({
   }
 
   function handleClick(pid: string) {
-    console.log('crosswalklist');
     // will go the crosswalk detail page
-    router.push('/crosswalk-edit');
+    router.push('/crosswalk');
   }
 
   return (

diff --git a/mscr-ui/src/common/components/schema/schema.slice.tsx b/mscr-ui/src/common/components/schema/schema.slice.tsx
@@ -60,6 +60,18 @@ export const schemaApi = createApi({
         method: 'GET',
       }),
     }),
+    getPublicSchemas: builder.query<any, any>({
+      query: () => ({
+        url: `/frontend/mscrSearch?type=SCHEMA`,
+        method: 'GET',
+      }),
+    }),
+    getFrontendSchema: builder.query<any, string>({
+      query: (pid) => ({
+        url: `/frontend/schema/${pid}`,
+        method: 'GET',
+      }),
+    }),
     postSchema: builder.mutation<
       string,
       {
@@ -91,6 +103,8 @@ export const schemaApi = createApi({
 
 export const {
   usePutSchemaMutation,
+  useGetPublicSchemasQuery,
+  useGetFrontendSchemaQuery,
   useGetSchemaQuery,
   useGetSchemaWithRevisionsQuery,
   useGetSchemaOriginalQuery,

diff --git a/mscr-ui/src/common/interfaces/crosswalk-connection.interface.ts b/mscr-ui/src/common/interfaces/crosswalk-connection.interface.ts
@@ -1,65 +1,90 @@
 export interface CrosswalkConnection {
-  source: string;
-  target: string | string[];
-  sourceTitle: string | undefined;
-  targetTitle: string | undefined;
-  sourceType: string | undefined;
-  targetType: string | undefined;
-  parentId: number | string;
-  parentName: string | undefined;
-  mappingType: string | undefined;
-  notes: string | undefined;
-  isSelected: boolean;
-  sourceDescription: string | undefined;
-  type: string | undefined;
+    source: string;
+    target: string | string[];
+    sourceTitle: string | undefined;
+    targetTitle: string | undefined;
+    sourceType: string | undefined;
+    targetType: string | undefined;
+    parentId: number | string;
+    parentName: string | undefined;
+    mappingType: string | undefined;
+    notes: string | undefined;
+    isSelected: boolean;
+    sourceDescription: string | undefined;
+    type: string | undefined;
+}
+
+export interface RenderTreeOld {
+    idNumeric: number;
+    id: string;
+    name: string;
+    isLinked: boolean;
+    title?: string;
+    type?: string;
+    description?: string;
+    required?: string;
+    isMappable?: string;
+    parentName?: string;
+    jsonPath: string;
+    parentId: number | string;
+    children?: RenderTreeOld[];
 }
 
 export interface RenderTree {
-  idNumeric: number;
-  id: string;
-  name: string;
-  isLinked: boolean;
-  title?: string;
-  type?: string;
-  description?: string;
-  required?: string;
-  isMappable?: string;
-  parentName?: string;
-  jsonPath: string;
-  parentId: number | string;
-  children?: RenderTree[];
+    name: string;
+    id: string;
+    properties: any;
+    elementPath: string;
+    parentElementPath: string | undefined;
+    children: RenderTree[];
+}
+
+export interface CrosswalkConnectionOld {
+    source: RenderTreeOld;
+    target: RenderTreeOld;
+    id: string;
+    description: string | undefined;
+    isSelected: boolean;
+    isDraft: boolean;
+    sourceJsonPath: string | undefined;
+    targetJsonPath: string | undefined;
+    sourcePredicate: string | undefined;
+    sourceProcessing: string | undefined;
+    targetPredicate: string | undefined;
+    targetProcessing: string | undefined;
 }
 
 export interface CrosswalkConnectionNew {
-  source: RenderTree;
-  target: RenderTree;
-  id: string;
-  description: string | undefined;
-  isSelected: boolean;
-  isDraft: boolean;
-  sourceJsonPath: string | undefined;
-  targetJsonPath: string | undefined;
-  sourcePredicate: string | undefined;
-  sourceProcessing: string | undefined;
-  targetPredicate: string | undefined;
-  targetProcessing: string | undefined;
+    source: RenderTree;
+    target: RenderTree;
+    id: string;
+    description: string | undefined;
+    isSelected: boolean;
+    isDraft: boolean;
+    sourceJsonPath: string | undefined;
+    targetJsonPath: string | undefined;
+    sourcePredicate: string | undefined;
+    sourceProcessing: string | undefined;
+    targetPredicate: string | undefined;
+    targetProcessing: string | undefined;
 }
 
 export interface CrosswalkConnectionsNew {
-  source: RenderTree[];
-  target: RenderTree[];
-  id: string;
-  description: string | undefined;
+    source: RenderTree[];
+    target: RenderTree[];
+    id: string;
+    description: string | undefined;
 }
 
 export interface CrosswalkPayloadPrelim {
-  sourceName: string;
-  targetName: string;
-  sourceJsonPath: string;
-  targetJsonPath: string;
-  id: string;
-  description: string | undefined;
-  filterFunction: string | undefined;
-  sourceProcessing: string | undefined;
-  targetProcessing: string | undefined;
+    sourceName: string;
+    targetName: string;
+    sourceJsonPath: string;
+    targetJsonPath: string;
+    id: string;
+    description: string | undefined;
+    filterFunction: string | undefined;
+    sourceProcessing: string | undefined;
+    targetProcessing: string | undefined;
 }
+
diff --git a/mscr-ui/src/common/interfaces/crosswalk.interface.ts b/mscr-ui/src/common/interfaces/crosswalk.interface.ts
@@ -26,6 +26,7 @@ export interface CrosswalkFormType {
   pid?: string;
   format: string;
   label: string;
+  state: string | undefined;
   languages: (LanguageBlockType & { selected: boolean })[];
   organizations: MultiSelectData[];
   status?: Status;
@@ -34,16 +35,36 @@ export interface CrosswalkFormType {
   description?: string;
 }
 
-export interface CrosswalkFormMockupType {
+export interface CreateCrosswalkMockupType {
+  pid?: string;
+  format: string;
+  status: string | undefined;
+  state: string | undefined;
+  label: {
+    [key: string]: string;
+  };
+  description: {
+    [key: string]: string;
+  };
+  languages: string[];
+  organizations: string[];
   sourceSchema: string;
   targetSchema: string;
-  name: string;
-  description: string;
+  namespace?: string;
+  versionLabel?: string;
 }
 
-export interface CreateCrosswalkMockupType {
+export interface CrosswalkFormMockupType {
+  pid?: string;
+  format: string;
+  status?: string | undefined;
+  state: string | undefined;
+  label: any;
+  description?: any;
+  languages: any;
+  organizations: any;
   sourceSchema: string;
   targetSchema: string;
-  name: string;
-  description: string;
+  namespace?: string;
+  versionLabel?: string;
 }
diff --git a/mscr-ui/src/common/utils/hooks/use-initial-crosswalk-form.tsx b/mscr-ui/src/common/utils/hooks/use-initial-crosswalk-form.tsx
@@ -1,4 +1,4 @@
-import { CrosswalkFormType } from '@app/common/interfaces/crosswalk.interface';
+import {CrosswalkFormMockupType, CrosswalkFormType} from '@app/common/interfaces/crosswalk.interface';
 import { useTranslation } from 'next-i18next';
 
 // Here we need initial crosswalk form data defined in CrosswalkFormType
@@ -9,6 +9,7 @@ export function useInitialCrosswalkForm(): CrosswalkFormType {
     pid: '',
     format: '',
     label: '',
+    state: '',
     languages: [
       {
         labelText: t('language-finnish-with-suffix'),
@@ -42,3 +43,19 @@ export function useInitialCrosswalkForm(): CrosswalkFormType {
     targetSchema: '',
   };
 }
+
+export function useInitialCrosswalkFormMockup(): CrosswalkFormMockupType {
+  const { t } = useTranslation('admin');
+
+  return {
+    format: '',
+    state: '',
+    pid: '',
+    status: '',
+    label: '',
+    languages: ['en'],
+    organizations: ['7d3a3c00-5a6b-489b-a3ed-63bb58c26a63'],
+    sourceSchema: '',
+    targetSchema: '',
+  };
+}
diff --git a/mscr-ui/src/modules/create-crosswalk/crosswalk-selection-modal.tsx b/mscr-ui/src/modules/create-crosswalk/crosswalk-selection-modal.tsx
@@ -21,9 +21,11 @@ import generatePayload from './generate-payload';
 import getApiError from '@app/common/utils/getApiErrors';
 import { useRouter } from 'next/router';
 import HasPermission from '@app/common/utils/has-permission';
-import { useInitialCrosswalkForm } from '@app/common/utils/hooks/use-initial-crosswalk-form';
-import { usePutCrosswalkMutation } from '@app/common/components/crosswalk/crosswalk.slice';
+import { useInitialCrosswalkFormMockup } from '@app/common/utils/hooks/use-initial-crosswalk-form';
+import {useGetCrosswalkQuery, usePutCrosswalkMutation} from '@app/common/components/crosswalk/crosswalk.slice';
 import CrosswalkForm from '.';
+import {CrosswalkFormMockupType} from "@app/common/interfaces/crosswalk.interface";
+import {useGetPublicSchemasQuery, useGetSchemaWithRevisionsQuery} from '@app/common/components/schema/schema.slice';
 
 interface CrosswalkFormModalProps {
   refetch: () => void;
@@ -38,7 +40,7 @@ export default function CrosswalkSelectionModal({
   const { isSmall } = useBreakpoints();
   const router = useRouter();
   const [visible, setVisible] = useState(false);
-  const [crosswalkFormInitialData] = useState(useInitialCrosswalkForm());
+  const [crosswalkFormInitialData] = useState(useInitialCrosswalkFormMockup());
   const [formData, setFormData] = useState(crosswalkFormInitialData);
   const [errors, setErrors] = useState<FormErrors>();
   const [userPosted, setUserPosted] = useState(false);
@@ -58,11 +60,18 @@ export default function CrosswalkSelectionModal({
   }, [crosswalkFormInitialData]);
 
   useEffect(() => {
+    console.log('BACK FROM EFFECT', result, userPosted, router);
+
+    if (result.isSuccess && result?.originalArgs?.format === 'MSCR') {
+      // MSCR = to be edited with crosswalk editor
+      refetch();
+      handleClose();
+      router.push(`/crosswalk/${result.data.pid}`);
+    }
     if (userPosted && result.isSuccess) {
       refetch();
       handleClose();
-      //router.push(`/crosswalk/${result.data.pid}`);
-      alert('Crosswalk created Successfully');
+      router.push(`/crosswalk/${result.data.pid}`);
     }
   }, [result, refetch, userPosted, handleClose, router]);
 
@@ -78,13 +87,10 @@ export default function CrosswalkSelectionModal({
     if (Object.values(errors).includes(true)) {
       return;
     }
-
+    console.log('!!!! formData', formData);
     const payload = generatePayload(formData);
-    console.log('payload', payload);
     handleClose();
-    router.push('/crosswalk-edit');
-    //TODO: implement saving (might include file upload later) and get id from back after success to be sent to edit-crosswalk component
-    //putCrosswalk(payload);
+    putCrosswalk(payload);
   };
 
   useEffect(() => {

diff --git a/mscr-ui/src/modules/create-crosswalk/generate-payload.tsx b/mscr-ui/src/modules/create-crosswalk/generate-payload.tsx
@@ -11,9 +11,15 @@ export default function generatePayload(
   data: CrosswalkFormMockupType
 ): CreateCrosswalkMockupType {
   return {
+    format: data.format,
     description: data.description,
-    name: data.name,
+    label: data.label,
+    languages: data.languages,
+    organizations: data.organizations,
+    status: data.status,
+    state: data.status,
     sourceSchema: data.sourceSchema,
     targetSchema: data.targetSchema,
+    versionLabel: data.versionLabel,
   };
 }