initial solution for Person identifier required and incorrect form to…

…talisation
UtrechtUniversity · Aug 2, 2023 · 30088e3 · 30088e3
1 parent df9742d
commit 30088e3
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 22 deletions.
diff --git a/deposit/metadata-form/src/PersonIdentifier.js b/deposit/metadata-form/src/PersonIdentifier.js
@@ -99,9 +99,10 @@ class PersonIdentifier extends React.Component {
 
     // Check whether combination of 2 fields is a required 'field'
     let bothRequired = false
-    // Make sure required is actually present.
-    if (this.props.registry.rootSchema.properties[parentContext].items.required) {
+    try {
       bothRequired = this.props.registry.rootSchema.properties[parentContext].items.required.includes('Person_Identifier')
+    } catch (err) {
+      bothRequired = false
     }
 
     // If either one holds a value, the other becomes a required element - hoe dit te testen!!

diff --git a/deposit/static/deposit/js/metadata-form.js b/deposit/static/deposit/js/metadata-form.js
diff --git a/research/metadata-form/src/AffiliationIdentifier.js b/research/metadata-form/src/AffiliationIdentifier.js
@@ -135,10 +135,19 @@ class AffiliationIdentifier extends React.Component {
       }
     }
 
+    let labelClasses = 'form-label';
+    if (reqName=='*') {
+        labelClasses += ' select-required';
+        if (namePresent) {
+            // select-filled only has meaning when in combination with select-required (for totalisation of completeness purposes)
+            labelClasses += ' select-filled';
+        }
+    }
+
     return (
       <div className='d-flex'>
         <div className='col compound-field'>
-          <label className='form-label select-required select-filled'>{titleAffiliationName}{reqName}</label>
+          <label className={labelClasses}>{titleAffiliationName}{reqName}</label>
           <CreatableSelect
             className='select-box is-invalid'
             options={this.options}
@@ -158,13 +167,26 @@ class AffiliationIdentifier extends React.Component {
         <div className='col compound-field'>
           <div className='mb-0 form-group'>
             <label className='form-label'>{titleAffiliationIdentifier}{reqIdf}</label>
-            <input
+
+            {reqIdf=='*' && 
+            (<input
               type='text'
+              required
               className={classesIdf} // 'form-control is-invalid'
               readOnly={this.props.readonly}
               onChange={this.handleChangeIdentifier}
               value={Affiliation_Identifier}
-            />
+            />)}
+
+            {reqIdf=='' &&
+            (<input
+              type='text'
+              className={classesIdf} // 'form-control is-invalid'
+              readOnly={this.props.readonly}
+              onChange={this.handleChangeIdentifier}
+              value={Affiliation_Identifier}
+            />)}
+
             {helpAffiliationIdentifier && (
               <small className='text-muted form-text'>
                 <p className='help-block'>{helpAffiliationIdentifier}</p>

diff --git a/research/metadata-form/src/PersonIdentifier.js b/research/metadata-form/src/PersonIdentifier.js
@@ -99,9 +99,10 @@ class PersonIdentifier extends React.Component {
 
     // Check whether combination of 2 fields is a required 'field'
     let bothRequired = false
-    // Make sure required is actually present.
-    if (this.props.registry.rootSchema.properties[parentContext].items.required) {
+    try {
       bothRequired = this.props.registry.rootSchema.properties[parentContext].items.required.includes('Person_Identifier')
+    } catch (err) {
+      bothRequired = false
     }
 
     // If either one holds a value, the other becomes a required element - hoe dit te testen!!
@@ -110,9 +111,9 @@ class PersonIdentifier extends React.Component {
       requiredScheme = '*'
     }
 
-    let requiredIdentifier = ''
+    let requiredIdentifier = '';
     if (bothRequired || ((typeof Name_Identifier_Scheme !== 'undefined') && Name_Identifier_Scheme.length > 0)) {
-      requiredIdentifier = '*'
+      requiredIdentifier = '*';
     }
 
     // Validation of values and consequences for customstyles of each field
@@ -164,10 +165,20 @@ class PersonIdentifier extends React.Component {
       searchLink = <a class='btn btn-sm btn-primary float-end' href={searchUrl} target='_blank' rel='noreferrer'><i class='fa-solid fa-magnifying-glass' aria-hidden='true' /> Lookup {Name_Identifier_Scheme}</a>
     }
 
+    // Hier moet nog in meegenomen worden of de parent daadwerkelijk verplicht is!!!! klopt dit!?
+    let labelClasses = 'form-label';
+    if (requiredScheme=='*') {
+        labelClasses += ' select-required';
+        if ((typeof Name_Identifier_Scheme !== 'undefined') && Name_Identifier_Scheme.length > 0) {
+            // select-filled only has meaning when in combination with select-required (for totalisation of completeness purposes)
+            labelClasses += ' select-filled';
+        }
+    }
+
     return (
       <div className='d-flex'>
         <div className='col compound-field'>
-          <label className='form-label'>{titleScheme}{requiredScheme}</label>
+          <label className={labelClasses}>{titleScheme}{requiredScheme}</label>
           <Select
             className='select-box'
             options={options}
@@ -186,7 +197,21 @@ class PersonIdentifier extends React.Component {
         <div className='col compound-field'>
           <div className='mb-0 form-group'>
             <label className='form-label'>{titleIdentifier}{requiredIdentifier}</label>
-            <InputMask
+            {requiredIdentifier=='*' && 
+            (<InputMask
+              className={classesIdentifierField}
+              required
+              readOnly={this.props.readonly}
+              isDisabled={this.props.readonly}
+              value={Name_Identifier}
+              placeholder={placeholder}
+              onChange={this.handleIdentifierChange}
+              mask={mask}
+              formatChars={formatChars}
+            />)}
+
+            {requiredIdentifier=='' &&
+            (<InputMask
               className={classesIdentifierField}
               readOnly={this.props.readonly}
               isDisabled={this.props.readonly}
@@ -195,7 +220,7 @@ class PersonIdentifier extends React.Component {
               onChange={this.handleIdentifierChange}
               mask={mask}
               formatChars={formatChars}
-            />
+            />)}
 
             {searchLink}
 

diff --git a/research/metadata-form/src/index.js b/research/metadata-form/src/index.js
@@ -35,8 +35,9 @@ const enumWidget = (props) => {
     let i = enumArray.indexOf(props['value']);
     let placeholder = enumNames[i] == null ? ' ' : enumNames[i];
 
-    let title = props.label || props.uiSchema["ui:title"]
-    let label = <label className="form-label">{title}</label>
+    // let title = props.label || props.uiSchema["ui:title"]
+    // met label en title wordt niks gedaan
+    // let label = <label className="form-label">{title}</label>
     let customStyles = {
         control: styles => ({
             ...styles,
@@ -82,8 +83,11 @@ const enumWidget = (props) => {
         required = formProperties.data.schema.required.includes(name_hierarchy[0]);
     }
 
+    let selectCompletenessClasses = '';
+
     if((props.rawErrors !== undefined && props.rawErrors.indexOf(error) >= 0) || (required && props.value == null)) {
-        label = <label className="text-danger form-label select-required">{title}*</label>
+        // label = <test className="text-danger form-label select-required">{title}*</test>
+        selectCompletenessClasses = 'select-required';
         customStyles = {
             control: styles => ({
                 ...styles,
@@ -95,12 +99,13 @@ const enumWidget = (props) => {
             })
         };
     } else if (required) {
-        label = <label className="form-label select-required select-filled">{title}*</label>
+        // label = <test className="form-label select-required select-filled">{title}*</test>
+        selectCompletenessClasses = 'select-required select-filled';
     }
 
     return (
         <div>
-
+            <selectTotals class={selectCompletenessClasses}></selectTotals>
             <Select className={'select-box'}
                     placeholder={placeholder}
                     required={required}

diff --git a/research/static/research/js/metadata-form.js b/research/static/research/js/metadata-form.js
diff --git a/vault/metadata-form/src/PersonIdentifier.js b/vault/metadata-form/src/PersonIdentifier.js
@@ -99,9 +99,10 @@ class PersonIdentifier extends React.Component {
 
     // Check whether combination of 2 fields is a required 'field'
     let bothRequired = false
-    // Make sure required is actually present.
-    if (this.props.registry.rootSchema.properties[parentContext].items.required) {
+    try {
       bothRequired = this.props.registry.rootSchema.properties[parentContext].items.required.includes('Person_Identifier')
+    } catch (err) {
+      bothRequired = false
     }
 
     // If either one holds a value, the other becomes a required element - hoe dit te testen!!

diff --git a/vault/static/vault/js/metadata-form.js b/vault/static/vault/js/metadata-form.js