Demo

apps/4tu/index.html

@@ -41,4 +41,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-</html>
+</html>

apps/ohsmart/index.html

@@ -42,4 +42,3 @@
     -->
   </body>
 </html>
-

apps/rda/src/config/elasticSearch.tsx

@@ -24,7 +24,7 @@ const fieldConfig: Partial<RDTSearchUIProps> = {
 export const elasticConfig = [
   {
     name: "RDA Catalogue",
-    url: "https://es.ohsmart.dansdemo.nl/dans-rda2",
+    url: "https://tiger.laurenstobias.com/rda",
     fullTextFields: fieldConfig.fullTextFields,
     fullTextHighlight: fieldConfig.fullTextHighlight,
     resultBodyComponent: Rda2Result,
@@ -33,7 +33,7 @@ export const elasticConfig = [
       <ListFacet
         config={{
           id: "indi",
-          field: "individuals.fullname.keyword",
+          field: "individuals.fullName.keyword",
           title: {
             en: "Individuals",
             nl: "Individuen",
@@ -96,7 +96,7 @@ export const elasticConfig = [
       <ListFacet
         config={{
           id: "wf",
-          field: "workflows.workflowstate.keyword",
+          field: "workflows.WorkflowState.keyword",
           title: {
             en: "Workflows",
             nl: "Workflows",
@@ -108,7 +108,7 @@ export const elasticConfig = [
       <PieChartFacet
         config={{
           id: "uritype",
-          field: "uritype.uritype.keyword",
+          field: "uri_type.uri_type.keyword",
           title: {
             en: "URI types",
             nl: "URI types",
@@ -120,7 +120,7 @@ export const elasticConfig = [
       <PieChartFacet
         config={{
           id: "subjects",
-          field: "subjects.keyword",
+          field: "subjects.keyword.keyword",
           title: {
             en: "Subjects",
             nl: "Onderwerp",
@@ -165,6 +165,42 @@ export const elasticConfig = [
           rows: 1,
         }}
       />,
+      <ListFacet
+      config={{
+        id: "keywords-vocab",
+        field: "keywords.keyword.keyword",
+        title: {
+          en: "Keywords",
+          nl: "Trefwoorden",
+        },
+        cols: 2,
+        rows: 1,
+      }}
+    />,
+      <PieChartFacet
+      config={{
+        id: "gorc-elements",
+        field: "gorc_elements.element.keyword",
+        title: {
+          en: "GORC Elements",
+          nl: "GORC Elementen",
+        },
+        cols: 3,
+        rows: 1,
+      }}
+    />,
+    <PieChartFacet
+      config={{
+        id: "gorc-attributes",
+        field: "gorc_attributes.attribute.keyword",
+        title: {
+          en: "GORC Attributes",
+          nl: "GORC Attributen",
+        },
+        cols: 3,
+        rows: 1,
+      }}
+    />,
       <ListFacet
         config={{
           id: "pw",
@@ -205,7 +241,7 @@ export const elasticConfig = [
       <ListFacet
         config={{
           id: "insttype",
-          field: "institutions.english_name.keyword",
+          field: "related_institutions.english_name.keyword",
           title: {
             en: "Related institutions",
             nl: "Gerelateerde instellingen",

apps/rda/src/pages/record/index.tsx

@@ -200,7 +200,11 @@ function Metadata({
 }) {
   if (value == null) return null;
 
-  const _value = Array.isArray(value) ? value.join(" || ") : value;
+  let _value = Array.isArray(value) ? value.join(" || ") : value;
+
+  if (_value.length < 1) {
+    _value = "-"
+  }
 
   return (
     <div style={style}>
@@ -224,9 +228,9 @@ function Metadata({
 
 export function MetadataList({ record }: { record: RdaRecord | Result }) {
   const individuals =
-    record.individuals ? record.individuals.map((i: any) => i.fullname) : [];
+    record.individuals ? record.individuals.map((i: any) => i.fullName) : [];
   const workflows =
-    record.workflows ? record.workflows.map((w: any) => w.workflowstate) : [];
+    record.workflows ? record.workflows.map((w: any) => w.WorkflowState) : [];
   const rights =
     record.rights ? record.rights.map((r: any) => r.description) : [];
   const pathways =

packages/deposit/src/features/files/FilesUpload.tsx

@@ -88,7 +88,12 @@ const FilesUpload = () => {
     }
 
     // No files with these file names
-    if (file.name.indexOf("__generated__") !== -1) {
+    if (
+      file.name.indexOf("__generated__form-metadata") !== -1
+      // oh smart specific. todo: move this all to form config.
+      || file.name.toLowerCase() === "oral history metadata private.txt"
+      || file.name.toLowerCase() === "oral history metadata public.txt"
+    ) {
       return {
         code: "file-not-allowed",
         message: t("fileNotAllowed"),

packages/file-mapper/package.json

@@ -6,6 +6,7 @@
   "version": "1.0.0",
   "dependencies": {
     "@dans-framework/utils": "workspace:*",
+    "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
     "@reduxjs/toolkit": "^1.9.5",
     "i18next": "^23.4.1",

packages/file-mapper/src/features/FileMapper.tsx

@@ -9,7 +9,9 @@ import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import { useTranslation } from "react-i18next";
-import { Step1, Step2, Step3 } from './Steps';
+import SelectFile from './SelectFile';
+import SetMapping from './SetMapping';
+import SaveMapping from './SaveMapping';
 import { getActiveStep, setActiveStep, getFile, getSavedMap, getMapping, getFileError } from './fileMapperSlice';
 import { useSubmitMapMutation } from './fileMapperApi';
 import { useAppSelector, useAppDispatch } from "../redux/hooks";
@@ -18,8 +20,7 @@ import { useSiteTitle, setSiteTitle } from "@dans-framework/utils/sitetitle";
 import { lookupLanguageString } from "@dans-framework/utils/language";
 import { type Page } from "@dans-framework/pages";
 import type { FormConfig } from "@dans-framework/deposit";
-
-const steps = ['selectFile', 'createMapping', 'finish'];
+import { steps } from "./Steps";
 
 const FileMapper = ({setMappedForm, page}: { 
   setMappedForm: Dispatch<SetStateAction<FormConfig | undefined>>;
@@ -85,10 +86,10 @@ const FileMapper = ({setMappedForm, page}: {
             </Stepper>
             {
               activeStep === 0
-              ? <Step1 />
+              ? <SelectFile />
               : activeStep === 1
-              ? <Step2 />
-              : <Step3 />
+              ? <SetMapping />
+              : <SaveMapping />
             }
             <Box sx={{ 
               display: 'flex', 

packages/file-mapper/src/features/SaveMapping.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next";
+import TextField from '@mui/material/TextField';
+import Typography from "@mui/material/Typography";
+import { StepWrap } from "./Steps";
+
+export const SaveMapping = () => {  
+  const { t } = useTranslation("steps");
+
+  return (
+    <StepWrap title={t("finish")}>
+    <Typography mb={3}>{t("saveMappingExtra")}</Typography>
+      <TextField label={t('saveMapping')} sx={{ width: '30rem', maxWidth: '100%' }} />
+    </StepWrap>
+  )
+}
+
+export default SaveMapping;

packages/file-mapper/src/features/SelectFile.tsx

@@ -0,0 +1,136 @@
+import { useDropzone } from "react-dropzone";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";
+import { useTranslation } from "react-i18next";
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import type { Saves, SerializedFile } from "../types";
+import { 
+  getFile, 
+  setFile, 
+  getSavedMap,
+  setSavedMap,
+  resetMapping,
+  getFileError,
+  resetFileError,
+  resetFileData,
+} from './fileMapperSlice';
+import { useAppSelector, useAppDispatch } from "../redux/hooks";
+import { StepWrap, maxRows, saves } from "./Steps";
+
+const SelectFile = () => {
+  const { t } = useTranslation("steps");
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.up('md'));
+  const dispatch = useAppDispatch();
+  const file = useAppSelector(getFile);
+  const savedMap = useAppSelector(getSavedMap);
+  const fileError = useAppSelector(getFileError);
+
+  const onDrop = async (files: File[]) => {
+    // serialize files to store in redux
+    const serializedFile: SerializedFile = {
+      name: files[0].name,
+      size: files[0].size,
+      url: URL.createObjectURL(files[0]),
+    };
+
+    dispatch(setFile(serializedFile));
+
+    // reset saved mapping and column values after selecting a different file
+    dispatch(resetMapping());
+    dispatch(resetFileData());
+    dispatch(resetFileError());
+  }
+
+  const {  
+    getRootProps, 
+    getInputProps, 
+    isDragActive, 
+  } = useDropzone({
+    onDrop,
+    multiple: false,
+    accept: {
+      "text/csv": [".csv"],
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+    },
+  });
+
+  return (
+    <StepWrap title={t("selectFile")}>
+      <Stack 
+        direction={{xs: "column", md: "row"}} 
+        spacing={{xs: 3, md: 4}}
+        divider={<Divider orientation={matches ? "vertical" : "horizontal"} flexItem />}
+      >
+        <Box sx={{flex: 1}}>
+          <Typography variant="h4">{t("uploadNew")}</Typography>
+          <Box
+            sx={{
+              border: "1px dashed",
+              borderColor: "neutral.main",
+              backgroundColor: isDragActive ? "primary.light" : "transparent",
+              mb: matches ? 3 : 0,
+            }}
+            p={3}
+            {...getRootProps({ className: "dropzone" })}
+          >
+            <input {...getInputProps()} />
+            <Typography
+              color="neutral.contrastText"
+              sx={{ textAlign: "center", cursor: "pointer" }}
+            >
+              {isDragActive ? t("dropNow") : t("drop")}
+            </Typography>
+          </Box>
+          { file && 
+            <Box key={file.name}>
+              <Alert severity="success">
+                {t("selectedFile", { name: file.name, size: (file.size / 1024).toFixed(0) })}
+              </Alert>
+              {fileError && 
+                <Alert severity="error">
+                  {t(fileError, {max: maxRows})}
+                </Alert>
+              }
+            </Box> 
+          }
+        </Box>
+        {saves.length > 0 && 
+          <Box sx={{flex: 1}}>
+            <Typography variant="h4" mb={1}>{t("selectSave")}</Typography>
+            <List>
+            {saves.map( (save: Saves) => 
+              <ListItem key={save.id} disablePadding>
+                <ListItemButton onClick={() => dispatch(setSavedMap(savedMap === save.id ? "" : save.id))} dense>
+                  <ListItemIcon>
+                    <Checkbox
+                      edge="start"
+                      checked={savedMap === save.id}
+                      tabIndex={-1}
+                      disableRipple
+                      inputProps={{ 'aria-labelledby': save.id }}
+                    />
+                  </ListItemIcon>
+                  <ListItemText id={save.id} primary={save.name} secondary={t("savedOn", {date: save.date})} />
+                </ListItemButton>
+              </ListItem>
+            )}
+            </List>
+          </Box>
+        }
+      </Stack>
+    </StepWrap>
+  )
+}
+
+export default SelectFile;