WIP for #967

client/src/components/CollaborationUnits.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "./CollaborationUnits.scss";
+import I18n from "../locale/I18n";
+import SelectField from "./SelectField";
+
+export const CollaborationUnits = ({selectedUnits, allUnits, setUnits, label = I18n.t("units.collaboration")}) => {
+
+
+    const selectedUnitsChanged = selectedOptions => {
+        if (selectedOptions === null) {
+            setUnits([]);
+        } else {
+            const newSelectedOptions = Array.isArray(selectedOptions) ? [...selectedOptions] : [selectedOptions];
+            setUnits(newSelectedOptions);
+        }
+    }
+
+    return (<SelectField value={selectedUnits}
+                         options={allUnits
+                             .filter(unit => !selectedUnits.find(selectedUnit => selectedUnit.value === unit.value))}
+                         name={label}
+                         isMulti={true}
+                         placeholder={I18n.t("units.unitsPlaceHolder")}
+                         onChange={selectedUnitsChanged}/>
+
+    );
+}

client/src/components/DateField.scss

@@ -11,7 +11,7 @@
         min-width: 210px;
         color: black;
         position: relative;
-        font-weight: bold;
+        font-weight: 600;
     }
 
     span.tool-tip-section {

client/src/components/EmailField.jsx

@@ -49,7 +49,6 @@ export default function EmailField({
         if (isEmpty(e.key) && isEmpty(e.target.value)) {
             return;
         }
-        debugger; // eslint-disable-line no-debugger
         const email = e.target.value;
         const invalidEmails = [];
         const delimiters = [",", " ", ";", "\n", "\t"];

client/src/components/InputField.scss

@@ -133,7 +133,7 @@
 
     }
 
-    div.input-field-link {
+    div.input-field-link{
         margin-left: 10px;
         display: flex;
         border-radius: 4px;
@@ -163,6 +163,32 @@
         }
     }
 
+    div.input-field-delete {
+        border: 1px solid var(--sds--color--gray--400);
+        font-size: 20px;
+        color: var(--sds--color--gray--400);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--sds--color--gray--100);
+        }
+
+
+        a {
+            padding: 8px 12px;
+        }
+
+        svg {
+
+            color: var(--sds--color--gray--400);
+            cursor: pointer;
+
+            &:hover {
+                color: var(--sds--color--red--400);
+            }
+        }
+    }
+
 
     span.no-input {
         margin-bottom: 6px;

client/src/components/OrganisationUnits.jsx

@@ -1,58 +1,64 @@
-import React, {useEffect, useRef, useState} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {Tooltip} from "@surfnet/sds";
+import React, {useRef, useState} from "react";
 import "./OrganisationUnits.scss";
-import {isEmpty, removeDuplicates, splitListSemantically, stopEvent} from "../utils/Utils";
+import {isEmpty, splitListSemantically, stopEvent} from "../utils/Utils";
 import I18n from "../locale/I18n";
 import {unitUsage} from "../api";
 import ConfirmationDialog from "./ConfirmationDialog";
 import {ReactComponent as TrashIcon} from "@surfnet/sds/icons/functional-icons/bin.svg";
-import {current} from "immer";
+import ErrorIndicator from "./redesign/ErrorIndicator";
+import SpinnerField from "./redesign/SpinnerField";
 
-export const OrganisationUnits = ({units, setUnits, readOnly}) => {
+export const OrganisationUnits = ({units, setUnits}) => {
 
     const [duplicate, setDuplicate] = useState(-1);
     const [references, setReferences] = useState({});
     const [loading, setLoading] = useState(false);
     const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-    const [confirmationDialogAction, setConfirmationDialogAction] = useState(false);
+    const [removalIndex, setRemovalIndex] = useState(-1);
 
     const inputRef = useRef(null);
 
-
-    useEffect(() => {
+    const focusAfterAdd = () => {
         inputRef.current && inputRef.current.focus();
-    });
+    }
 
     const cancelRemoval = () => {
         setReferences({});
         setConfirmationDialogOpen(false);
+        setRemovalIndex(-1);
     }
 
     const internalOnChange = index => e => {
-        const name = e.target.value;
-        if (units.filter(unit => unit.name.toLowerCase() === name.toLowerCase()).length > 1) {
+        const value = e.target.value;
+        if (units.filter(unit => unit.name.toLowerCase() === value.toLowerCase()).length > 1) {
             setDuplicate(index);
             return stopEvent(e);
         } else {
             setDuplicate(-1);
-            const unit = units[index];
-            unit.name = name;
-            units.splice(index, 1, unit);
-            setUnits([...units]);
+            const newUnits = [...units];
+            const unit = newUnits[index];
+            unit.name = value;
+            newUnits.splice(index, 1, unit);
+            setUnits(newUnits);
         }
     }
 
     const doRemoveUnit = index => {
         units.splice(index, 1);
-        setUnits(...units);
+        setUnits([...units]);
     }
 
     const hasReferences = res => {
         return !isEmpty(res.collaborations) || !isEmpty(res.invitations)
             || !isEmpty(res.collaboration_requests);
     }
 
+    const removeAfterConfirmation = () => {
+        doRemoveUnit(removalIndex);
+        setConfirmationDialogOpen(false);
+        setReferences({});
+    }
+
     const removeUnit = index => e => {
         stopEvent(e);
         const unit = units[index];
@@ -61,12 +67,8 @@ export const OrganisationUnits = ({units, setUnits, readOnly}) => {
             unitUsage(unit).then(res => {
                 setReferences(res);
                 if (hasReferences(res)) {
+                    setRemovalIndex(index);
                     setConfirmationDialogOpen(true);
-                    setConfirmationDialogAction(() => {
-                        doRemoveUnit(index);
-                        setReferences({});
-                        setConfirmationDialogOpen(false);
-                    });
                 }
                 setLoading(false);
             })
@@ -78,7 +80,8 @@ export const OrganisationUnits = ({units, setUnits, readOnly}) => {
 
     const addUnit = e => {
         stopEvent(e);
-        setUnits(...units.concat({name: ""}));
+        setUnits([...units.concat({name: ""})]);
+        setTimeout(() => focusAfterAdd(), 250);
     }
 
     const renderConfirmation = () => {
@@ -101,33 +104,44 @@ export const OrganisationUnits = ({units, setUnits, readOnly}) => {
         );
     }
 
+    if (loading) {
+        return <SpinnerField/>
+    }
+
     return (
-        <div className="organisation-units">
+        <div className="organisation-units sds--text-field ">
             <ConfirmationDialog isOpen={confirmationDialogOpen}
                                 cancel={cancelRemoval}
-                                confirm={confirmationDialogAction}
+                                confirm={() => removeAfterConfirmation()}
                                 question={I18n.t("units.confirmation")}
                                 closeTimeoutMS={0}
                                 isWarning={true}>
                 {confirmationDialogOpen && renderConfirmation()}
             </ConfirmationDialog>
             <label>{I18n.t("units.label")}</label>
 
-            {units.map((unit, index) =>
-                <div className="inner-input-field" key={index}>
-                    <input type="text"
-                           value={unit.name}
-                           onChange={internalOnChange}
-                           onBlur={onBlur}
-                           ref={ref => (index + 1) === units.length ? inputRef : null}
-                           className={`sds--text-field--input`}
-                    />
-                    <div className={`input-field-link`}>
-                        <a href={"#"} onClick={removeUnit(index)}>
-                            <TrashIcon/>
-                        </a>
-                    </div>
-                </div>)
+            {units.map((unit, index) => {
+                const refProps = (index + 1) === units.length ? {ref: inputRef} : {};
+                return (
+                    <div className={`input-field ${index === 0 ? "first" : ""}`} key={index}>
+                        <div className="inner-input-field">
+                            <input type="text"
+                                   value={unit.name}
+                                   onChange={internalOnChange(index)}
+                                   className={`sds--text-field--input`}
+                                   {...refProps}
+                            />
+                            <div className={`input-field-link input-field-delete`}>
+                                <a href={"#"} onClick={removeUnit(index)}>
+                                    <TrashIcon/>
+                                </a>
+                            </div>
+                            {duplicate === index &&
+                                <ErrorIndicator msg={"error"} standalone={true}/>
+                            }
+                        </div>
+                    </div>)
+            })
             }
             <a className={"add-unit"} href="#" onClick={addUnit}>
                 {I18n.t("units.add")}

client/src/components/OrganisationUnits.scss

@@ -4,4 +4,9 @@ div.organisation-units {
     display: flex;
     position: relative;
     flex-direction: column;
+    margin-top: 15px;
+
+    a.add-unit {
+        margin-top: 15px;
+    }
 }