feat: améliore le formulaire des métadonnées

EcrituresNumeriques · Dec 3, 2024 · 9cd6978 · 9cd6978
1 parent 63fc4c9
commit 9cd6978
Show file tree

Hide file tree

Showing 11 changed files with 280 additions and 1,071 deletions.
diff --git a/front/src/components/Form.jsx b/front/src/components/Form.jsx
@@ -97,11 +97,9 @@ function ArrayFieldTemplate (properties) {
   const addItemTitle = properties.uiSchema['ui:add-item-title'] ?? 'form.addItem.title'
   const removeItemTitle = properties.uiSchema['ui:remove-item-title'] ?? 'form.removeItem.title'
   const title = properties.uiSchema['ui:title']
-
   const inlineRemoveButton = properties.schema?.items?.type === 'string' || !removeItemTitle
   return (
-    <div className={styles.arrayField}>
-      <fieldset className={styles.fieldset} key={properties.key}>
+      <fieldset className={clsx(styles.fieldset, styles.array)} key={properties.key}>
         {title && <Translation>{(t) => 
           <legend id={properties.id}>{t(title)}</legend>}
         </Translation>}
@@ -120,7 +118,6 @@ function ArrayFieldTemplate (properties) {
         )}
         {properties.items &&
           properties.items.map((element) => {
-            console.log({ element })
             return (
               <div
                 id={element.key}
@@ -147,7 +144,6 @@ function ArrayFieldTemplate (properties) {
             )
           })}
       </fieldset>
-    </div>
   )
 }
 
@@ -204,14 +200,16 @@ function ObjectFieldTemplate (properties) {
                 }
               </Translation>
             </legend>}
-            {elements.map(([field, element]) => (
-              element
-                ? <Fragment key={field}>{element.content}</Fragment>
-                : <p key={field} className={styles.fieldHasNoElementError}>
-                  Field <code>{field}</code> defined in <code>ui:groups</code> is not an
-                  entry of <code>data-schema.json[properties]</code> object.
-                </p>
-            ))}
+            {elements.map(([field, element]) => {
+              return (
+                element
+                  ? <Fragment key={field}>{element.content}</Fragment>
+                  : <p key={field} className={styles.fieldHasNoElementError}>
+                    Field <code>{field}</code> defined in <code>ui:groups</code> is not an
+                    entry of <code>data-schema.json[properties]</code> object.
+                  </p>
+              )
+            })}
           </fieldset>
         )
       }

diff --git a/front/src/components/Write/ArticleEditorMetadata.jsx b/front/src/components/Write/ArticleEditorMetadata.jsx
@@ -1,3 +1,4 @@
+import { Toggle } from '@geist-ui/core'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
@@ -73,20 +74,31 @@ export default function ArticleEditorMetadata ({ onChange, readOnly, metadata })
       </button>
       {expanded && (
         <div className={styles.yamlEditor}>
-          <NavTag
-            defaultValue={selector}
-            onChange={setSelector}
-            items={[
-              {
-                value: 'basic',
-                name: t('write.basicMode.metadataButton'),
-              },
-              {
-                value: 'raw',
-                name: t('write.rawMode.metadataButton'),
-              },
-            ]}
-          />
+          <header className={styles.header}>
+            <h2>Metadonnées</h2>
+            <div className={styles.toggle} onClick={() => setSelector(selector === 'raw' ? 'basic' : 'raw')}>
+              <Toggle id="raw-mode" checked={selector === 'raw'} title={'Activer le mode YAML'} onChange={(e) => {
+                console.log(e)
+                setSelector(e.target.checked ? 'raw' : 'basic')
+              }}/>
+              <label htmlFor="raw-mode">YAML</label>
+            </div>
+          </header>
+
+          {/*<NavTag*/}
+          {/*  defaultValue={selector}*/}
+          {/*  onChange={setSelector}*/}
+          {/*  items={[*/}
+          {/*    {*/}
+          {/*      value: 'basic',*/}
+          {/*      name: t('write.basicMode.metadataButton'),*/}
+          {/*    },*/}
+          {/*    {*/}
+          {/*      value: 'raw',*/}
+          {/*      name: t('write.rawMode.metadataButton'),*/}
+          {/*    },*/}
+          {/*  ]}*/}
+          {/*/>*/}
           {selector === 'raw' && (
             <>
               {error !== '' && <p className={styles.error}>{error}</p>}

diff --git a/front/src/components/Write/articleEditorMetadata.module.scss b/front/src/components/Write/articleEditorMetadata.module.scss
@@ -11,7 +11,7 @@
   min-width: 375px;
   max-width: 375px;
   max-height: calc(100vh - 76px);
-  overflow-y: auto;
+  overflow-y: scroll;
   padding: 1em 0.5em 2em 0.75em;
 
   > button {
@@ -71,6 +71,27 @@
   }
 }
 
+.toggle {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  font-size: 1.125rem;
+  cursor: pointer;
+
+  > label {
+    cursor: pointer;
+    font-weight: 500;
+    user-select: none;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+
 .yamlEditor {
   display: flex;
   flex-direction: column;

diff --git a/front/src/components/form.module.scss b/front/src/components/form.module.scss
@@ -74,7 +74,6 @@
         > fieldset {
           > button {
             font-weight: bold;
-            margin: 0.5rem 0;
           }
         }
       }
@@ -108,12 +107,16 @@
         > * {
           width: 100%;
         }
+
+        &.person {
+          margin-top: 1rem;
+        }
       }
 
       &.field-string,
       &.field-boolean {
         label {
-         padding-bottom: 0.15rem;
+          padding-bottom: 0.15rem;
         }
       }
 
@@ -160,11 +163,11 @@
           }
         }
       }
-      
+
       .array-item.keywords {
         display: flex;
         align-items: center;
-        
+
         > .field-string {
           flex: 1;
         }
@@ -217,11 +220,16 @@
   gap: 0.5rem;
   padding: 0 0 1.5rem;
   margin: 0;
+  font-size: 1em;
 
   legend {
     @include legend;
     padding: 0 0 0.5rem;
-    font-size: 1.25rem;
+    font-size: 1.15em;
+  }
+
+  fieldset {
+    font-size: 0.8em;
   }
 }
 
@@ -234,11 +242,13 @@
 
 .addButton,
 .removeButton {
-  font-size: .7em;
+  font-size: 1em;
+  margin-top: .25rem;
 }
 
 .inlineRemoveButton {
-  font-size: 1em;
+  font-size: 1rem;
+  margin-top: 0;
 }
 
 .output {

diff --git a/front/src/locales/en/translation.json b/front/src/locales/en/translation.json
@@ -187,7 +187,6 @@
   "article.metadata.url": "Article URL",
   "article.metadata.url.placeholder": "Article URL",
   "article.metadata.subtitle": "Subtitle",
-  "article.metadata.surtitle": "Surtitle",
   "article.metadata.language": "Language",
   "article.metadata.language.placeholder": "Select a language",
   "article.metadata.publicationDate": "Publication date",
@@ -197,13 +196,6 @@
   "article.metadata.journalIssue.placeholder": "Issue number",
   "article.metadata.acknowledgements": "Acknowledgements",
   "article.metadata.acknowledgements.title": "Acknowledgements",
-  "article.metadata.bibliography.title": "Bibliography",
-  "article.metadata.citationsLink": "Citation Link",
-  "article.metadata.citationsLink.yes": "Yes",
-  "article.metadata.citationsLink.no": "No",
-  "article.metadata.bibliographyDisplay": "Display",
-  "article.metadata.bibliographyDisplay.all": "All citations",
-  "article.metadata.bibliographyDisplay.onlyUsed": "Only used",
   "article.metadata.authors": "Authors",
   "article.metadata.authors.addItem": "Add an author",
   "article.metadata.people.surname": "Last name",
@@ -222,12 +214,12 @@
   "article.metadata.translationOf.lang": "Language",
   "article.metadata.publisher": "Publisher",
   "article.metadata.journal": "Journal",
-  "article.metadata.journalEmail": "Journal’s email",
+  "article.metadata.journal.name": "Name",
+  "article.metadata.journal.email": "Email",
+  "article.metadata.journal.publisher": "Publisher",
+  "article.metadata.journal.url": "URL",
   "article.metadata.abstract": "Abstract",
-  "article.metadata.abstract.addItem": "Add an abstract in another language",
-  "article.metadata.abstract.text": "Abstract",
-  "article.metadata.abstract.lang": "Language",
-  "article.metadata.abstract.lang.placeholder": "Select a language",
+  "article.metadata.language.addItem": "Add a language",
   "article.metadata.keywords": "Keywords",
   "article.metadata.keywords.addItem": "Add a keyword",
   "article.metadata.keywords.removeItem": "Remove this keyword",
@@ -236,10 +228,6 @@
   "article.metadata.funder.title": "Funder",
   "article.metadata.funder.name": "Organization",
   "article.metadata.funder.id": "ID",
-  "article.metadata.translatedTitle.title": "Translated titles",
-  "article.metadata.translatedTitle.addItem": "Add a title in another language",
-  "article.metadata.translatedTitle.lang": "Language",
-  "article.metadata.translatedTitle.lang.placeholder": "Select a language",
   "article.metadata.controlledKeywords": "Controlled keywords",
   "article.metadata.controlledKeywords.addItem": "Add a controlled keyword",
   "article.metadata.dossier": "Issue",
@@ -255,17 +243,32 @@
   "article.metadata.type": "Categories",
   "article.metadata.production.title": "Production",
   "article.metadata.issnnum": "ISSN",
-  "article.metadata.prod": "Productor",
-  "article.metadata.prodnum": "Prodnum",
-  "article.metadata.diffnum": "Diffnum",
-  "article.metadata.type.essay": "Essay",
-  "article.metadata.type.creation": "Creation",
-  "article.metadata.type.lecture": "Lecture",
-  "article.metadata.type.dossierSummary": "Issue summary",
-  "article.metadata.type.interview": "Interview",
-  "article.metadata.type.editorialColumn": "Editorial column",
+  "article.metadata.production": "Production",
+  "article.metadata.headerTitle": "Article",
+  "article.metadata.titleAndAbstract": "Title and abstract",
+  "article.metadata.localizedContent": "Localized content",
+  "article.metadata.funder": "Funder",
+  "article.metadata.journalDirectors": "Journal directors",
+  "article.metadata.production.entities": "Production entities",
+  "article.metadata.production.entities.addItem": "Add a production entity",
+  "article.metadata.production.entities.type": "Type",
+  "article.metadata.production.entities.media": "Media",
+  "article.metadata.production.entities.name": "Name",
+  "article.metadata.production.entities.type.publisher": "Publisher",
+  "article.metadata.production.entities.type.producer": "Producer",
+  "article.metadata.production.entities.type.editor": "Editor",
+  "article.metadata.production.entities.media.all": " ",
+  "article.metadata.production.entities.media.print": "Print",
+  "article.metadata.production.entities.media.digital": "Digital",
+  "article.metadata.production.entities.media.ebook": "e-book",
+  "article.metadata.issue": "Issue",
+  "article.metadata.issue.title": "Title",
+  "article.metadata.issue.number": "N°",
+  "article.metadata.issue.identifier": "Identifier",
   "form.addItem.title": "Add",
+  "form.addPerson.title": "Add a person",
   "form.removeItem.title": "Remove",
+  "form.removePerson.title": "Remove this person",
   "corpus.metadata.form.name": "Name",
   "corpus.metadata.form.issue": "Issue",
   "corpus.metadata.form.issue.title": "Title",