SemApps instance for UTT/Tech-cico

src/frontend/boilerplates/archipelago/.env

@@ -1,2 +1,2 @@
-REACT_APP_MIDDLEWARE_URL=http://localhost:3000/
+REACT_APP_MIDDLEWARE_URL=https://data-techcico.semapps.org/
 PORT=5000

src/frontend/boilerplates/archipelago/src/App.js

@@ -3,25 +3,21 @@ import { Admin, Resource } from 'react-admin';
 import frenchMessages from 'ra-language-french';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
-import { Layout, AppBar, theme } from '@semapps/archipelago-layout';
-import { authProvider, LoginPage, LogoutButton, UserMenu } from '@semapps/auth-provider';
+import { Layout } from '@semapps/archipelago-layout';
 import { dataProvider, httpClient } from '@semapps/semantic-data-provider';
 
 import resources from './config/resources';
 import ontologies from './config/ontologies';
+import theme from './config/theme';
 
 import events from './resources/events';
-import interests from './resources/interests';
-import projects from './resources/projects';
+import themes from './resources/themes';
 import organizations from './resources/organizations';
-import skills from './resources/skills';
-import users from './resources/users';
-
-const LayoutWithUserMenu = props => <Layout appBar={<AppBar userMenu={<UserMenu />} />} {...props} />;
+import organizationTypes from './resources/organization-types';
+import places from './resources/places';
 
 const App = () => (
   <Admin
-    authProvider={authProvider(process.env.REACT_APP_MIDDLEWARE_URL)}
     dataProvider={dataProvider({
       sparqlEndpoint: process.env.REACT_APP_MIDDLEWARE_URL + 'sparql',
       httpClient,
@@ -31,17 +27,15 @@ const App = () => (
       uploadsContainerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'files'
     })}
     i18nProvider={polyglotI18nProvider(() => frenchMessages, 'fr')}
-    layout={LayoutWithUserMenu}
+    layout={Layout}
     theme={theme}
-    loginPage={LoginPage}
-    logoutButton={LogoutButton}
   >
     <Resource name="Organization" {...organizations} />
-    <Resource name="Project" {...projects} />
+    <Resource name="OrganizationType" {...organizationTypes} />
     <Resource name="Event" {...events} />
-    <Resource name="User" {...users} />
-    <Resource name="Skill" {...skills} />
-    <Resource name="Interest" {...interests} />
+    <Resource name="Place" {...places} />
+    <Resource name="Theme" {...themes} />
+    <Resource name="Subject" />
   </Admin>
 );
 

src/frontend/boilerplates/archipelago/src/config/resources.js

@@ -1,4 +1,7 @@
 const resources = {
+  Subject: {
+    types: ['pair:Project', 'pair:Organization', 'pair:Person', 'pair:Event']
+  },
   Project: {
     types: ['pair:Project'],
     containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'projects',
@@ -9,19 +12,24 @@ const resources = {
     containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'organizations',
     slugField: 'pair:label'
   },
+  OrganizationType: {
+    types: ['pair:OrganizationType'],
+    containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'organization-types',
+    slugField: 'pair:label'
+  },
   User: {
     types: ['pair:Person'],
     containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'users',
     slugField: ['pair:firstName', 'pair:lastName']
   },
-  Skill: {
-    types: ['pair:Skill'],
-    containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'skills',
+  Theme: {
+    types: ['pair:Theme'],
+    containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'themes',
     slugField: 'pair:label'
   },
-  Interest: {
-    types: ['pair:Thema'],
-    containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'themes',
+  Place: {
+    types: ['pair:Place'],
+    containerUri: process.env.REACT_APP_MIDDLEWARE_URL + 'places',
     slugField: 'pair:label'
   },
   Event: {

src/frontend/boilerplates/archipelago/src/config/theme.js

@@ -0,0 +1,6 @@
+import { theme } from '@semapps/archipelago-layout';
+
+theme.palette.primary.main = '#2579b2';
+theme.palette.secondary.main = '#e84444';
+
+export default theme;

src/frontend/boilerplates/archipelago/src/fields/SeparatedFieldList.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cloneElement, Children } from 'react';
+import { linkToRecord, sanitizeListRestProps, useListContext, Link } from 'react-admin';
+import classnames from 'classnames';
+import { LinearProgress } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap'
+  },
+  link: {}
+}));
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = e => e.stopPropagation();
+
+// Our handleClick does nothing as we wrap the children inside a Link but it is
+// required by ChipField, which uses a Chip from material-ui.
+// The material-ui Chip requires an onClick handler to behave like a clickable element.
+const handleClick = () => {};
+
+const SeparatedListField = props => {
+  const { classes: classesOverride, className, children, linkType = 'edit', separator = ',', ...rest } = props;
+  const { ids, data, loaded, resource, basePath } = useListContext(props);
+
+  const classes = useStyles(props);
+
+  if (loaded === false) {
+    return <LinearProgress />;
+  }
+
+  return (
+    <div className={classnames(classes.root, className)} {...sanitizeListRestProps(rest)}>
+      {ids.map((id, i) => {
+        const resourceLinkPath = !linkType ? false : linkToRecord(basePath, id, linkType);
+
+        if (resourceLinkPath) {
+          return (
+            <span key={id}>
+              <Link classes={classes.link} to={resourceLinkPath} onClick={stopPropagation}>
+                {cloneElement(Children.only(children), {
+                  record: data[id],
+                  resource,
+                  basePath,
+                  // Workaround to force ChipField to be clickable
+                  onClick: handleClick
+                })}
+              </Link>
+              {i < ids.length - 1 && separator + '\u00A0'}
+            </span>
+          );
+        }
+
+        return cloneElement(Children.only(children), {
+          key: id,
+          record: data[id],
+          resource,
+          basePath
+        });
+      })}
+    </div>
+  );
+};
+
+export default SeparatedListField;

src/frontend/boilerplates/archipelago/src/fields/index.js

@@ -0,0 +1 @@
+export { default as SeparatedFieldList } from './SeparatedFieldList';

src/frontend/boilerplates/archipelago/src/inputs.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { UriArrayInput } from '@semapps/semantic-data-provider';
+import { AutocompleteArrayInput } from 'react-admin';
+
+export const OrganizationsInput = ({ label, source }) => (
+  <UriArrayInput label={label} reference="Organization" source={source}>
+    <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+  </UriArrayInput>
+);
+
+export const EventsInput = ({ label, source }) => (
+  <UriArrayInput label={label} reference="Event" source={source}>
+    <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+  </UriArrayInput>
+);
+
+export const ThemesInput = ({ label, source }) => (
+  <UriArrayInput label={label} reference="Theme" source={source}>
+    <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+  </UriArrayInput>
+);
+
+export const OrganizationTypesInput = ({ label, source }) => (
+  <UriArrayInput label={label} reference="OrganizationType" source={source}>
+    <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+  </UriArrayInput>
+);
+
+export const PlacesInput = ({ label, source }) => (
+  <UriArrayInput label={label} reference="Place" source={source}>
+    <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+  </UriArrayInput>
+);

src/frontend/boilerplates/archipelago/src/resources/events/EventEdit.js

@@ -1,25 +1,22 @@
 import React from 'react';
-import { AutocompleteArrayInput, SimpleForm, TextInput, DateTimeInput } from 'react-admin';
+import { SimpleForm, TextInput, DateTimeInput, ReferenceInput, AutocompleteInput } from 'react-admin';
 import MarkdownInput from 'ra-input-markdown';
 import { Edit } from '@semapps/archipelago-layout';
-import { UriArrayInput } from '@semapps/semantic-data-provider';
+import { OrganizationsInput, ThemesInput } from '../../inputs';
 
 const EventEdit = props => (
   <Edit {...props}>
     <SimpleForm redirect="show">
       <TextInput source="pair:label" label="Nom" fullWidth />
       <TextInput source="pair:comment" label="Courte description" fullWidth />
       <MarkdownInput multiline source="pair:description" label="Description" fullWidth />
-      <TextInput source="pair:homePage" label="Site web" fullWidth />
-      <TextInput source="pair:aboutPage" label="Réseaux sociaux" fullWidth />
       <DateTimeInput source="pair:startDate" label="Date de début" fullWidth />
       <DateTimeInput source="pair:endDate" label="Date de fin" fullWidth />
-      <UriArrayInput label="Proposé par" reference="Organization" source="pair:deliveredBy">
-        <AutocompleteArrayInput shouldRenderSuggestions={value => value.length > 1} optionText="pair:label" fullWidth />
-      </UriArrayInput>
-      <UriArrayInput label="Intérêts" reference="Interest" source="pair:hasInterest">
-        <AutocompleteArrayInput shouldRenderSuggestions={value => value.length > 1} optionText="pair:label" fullWidth />
-      </UriArrayInput>
+      <ReferenceInput label="Lieu" reference="Place" source="pair:hostedIn" fullWidth>
+        <AutocompleteInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+      </ReferenceInput>
+      <OrganizationsInput label="Participe" source="pair:involves" />
+      <ThemesInput label="Thèmes" source="pair:hasTopic" />
     </SimpleForm>
   </Edit>
 );

src/frontend/boilerplates/archipelago/src/resources/events/EventShow.js

@@ -1,36 +1,40 @@
 import React from 'react';
-import { ChipField, SingleFieldList, TextField, UrlField, DateField } from 'react-admin';
+import { ChipField, SingleFieldList, TextField, DateField } from 'react-admin';
 import { Column, ColumnShowLayout, Hero, Show, MarkdownField } from '@semapps/archipelago-layout';
 import { UriArrayField } from '@semapps/semantic-data-provider';
+import { SeparatedFieldList } from '../../fields';
 
-const ProjectTitle = ({ record }) => {
+const EventTitle = ({ record }) => {
   return <span>{record ? record['pair:label'] : ''}</span>;
 };
 
 const EventShow = props => (
   <Show {...props}>
     <ColumnShowLayout>
       <Column xs={12} sm={9}>
-        <Hero title={<ProjectTitle />}>
+        <Hero title={<EventTitle />}>
           <TextField label="Courte description" source="pair:comment" />
           <DateField label="Date de début" source="pair:startDate" showTime />
           <DateField label="Date de fin" source="pair:endDate" showTime />
-          <UrlField label="Site web" source="pair:homePage" />
-          <UrlField label="Site web" source="pair:aboutPage" />
+          <UriArrayField label="Lieu" reference="Place" source="pair:hostedIn">
+            <SeparatedFieldList linkType="show">
+              <TextField source="pair:label" />
+            </SeparatedFieldList>
+          </UriArrayField>
+          <UriArrayField label="Thèmes" reference="Theme" source="pair:hasTopic">
+            <SeparatedFieldList linkType="show">
+              <TextField source="pair:label" />
+            </SeparatedFieldList>
+          </UriArrayField>
         </Hero>
         <MarkdownField source="pair:description" addLabel />
       </Column>
       <Column xs={12} sm={3} showLabel>
-        <UriArrayField label="Proposé par" reference="Organization" source="pair:deliveredBy">
+        <UriArrayField label="Participe" reference="Organization" source="pair:involves">
           <SingleFieldList linkType="show">
             <ChipField source="pair:label" color="secondary" />
           </SingleFieldList>
         </UriArrayField>
-        <UriArrayField label="Intérêts" reference="Interest" source="pair:hasInterest">
-          <SingleFieldList linkType={false}>
-            <ChipField source="pair:label" color="secondary" />
-          </SingleFieldList>
-        </UriArrayField>
       </Column>
     </ColumnShowLayout>
   </Show>

src/frontend/boilerplates/archipelago/src/resources/interests/InterestEdit.js → src/frontend/boilerplates/archipelago/src/resources/organization-types/OrganizationTypeCreate.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { SimpleForm, TextInput } from 'react-admin';
-import { Edit } from '@semapps/archipelago-layout';
+import { Create } from '@semapps/archipelago-layout';
 
-export const InterestEdit = props => (
-  <Edit {...props}>
+const OrganizationTypeCreate = props => (
+  <Create {...props}>
     <SimpleForm>
       <TextInput source="pair:label" label="Titre" fullWidth />
     </SimpleForm>
-  </Edit>
+  </Create>
 );
 
-export default InterestEdit;
+export default OrganizationTypeCreate;

src/frontend/boilerplates/archipelago/src/resources/organization-types/OrganizationTypeEdit.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AutocompleteArrayInput, SimpleForm, TextInput } from 'react-admin';
+import MarkdownInput from 'ra-input-markdown';
+import { Edit } from '@semapps/archipelago-layout';
+import { UriArrayInput } from '@semapps/semantic-data-provider';
+
+export const OrganizationTypeEdit = props => (
+  <Edit {...props}>
+    <SimpleForm redirect="show">
+      <TextInput source="pair:label" label="Titre" fullWidth />
+      <TextInput source="pair:comment" label="Courte description" fullWidth />
+      <MarkdownInput multiline source="pair:description" label="Description" fullWidth />
+      <UriArrayInput label="Organisations" reference="Organization" source="pair:typeOfSubject">
+        <AutocompleteArrayInput optionText="pair:label" shouldRenderSuggestions={value => value.length > 1} fullWidth />
+      </UriArrayInput>
+    </SimpleForm>
+  </Edit>
+);
+
+export default OrganizationTypeEdit;

src/frontend/boilerplates/archipelago/src/resources/organization-types/OrganizationTypeList.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { List, SimpleList } from '@semapps/archipelago-layout';
+
+const OrganizationTypeList = props => (
+  <List {...props}>
+    <SimpleList
+      primaryText={record => record['pair:label']}
+      leftAvatar={() => <img src={process.env.PUBLIC_URL + '/logo192.png'} width="100%" alt="SemApps" />}
+      linkType="show"
+    />
+  </List>
+);
+
+export default OrganizationTypeList;

src/frontend/boilerplates/archipelago/src/resources/organization-types/OrganizationTypeShow.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ChipField, SingleFieldList, TextField } from 'react-admin';
+import { Column, ColumnShowLayout, Hero, Show, MarkdownField } from '@semapps/archipelago-layout';
+import { UriArrayField } from '@semapps/semantic-data-provider';
+
+const OrganizationTypeTitle = ({ record }) => {
+  return <span>{record ? record['pair:label'] : ''}</span>;
+};
+
+const EventShow = props => (
+  <Show {...props}>
+    <ColumnShowLayout>
+      <Column xs={12} sm={9}>
+        <Hero title={<OrganizationTypeTitle />}>
+          <TextField label="Courte description" source="pair:comment" />
+        </Hero>
+        <MarkdownField source="pair:description" addLabel />
+      </Column>
+      <Column xs={12} sm={3} showLabel>
+        <UriArrayField label="Organisations" reference="Organization" source="pair:typeOfSubject">
+          <SingleFieldList linkType="show">
+            <ChipField source="pair:label" color="secondary" />
+          </SingleFieldList>
+        </UriArrayField>
+      </Column>
+    </ColumnShowLayout>
+  </Show>
+);
+
+export default EventShow;