Merge pull request #353 from italia/352-usedby-field-missing

feat: add usedBy optional field

src/app/components/Editor.tsx

@@ -42,6 +42,8 @@ import { getPubliccodeYmlVersionList } from "../contents/publiccode-yml-version"
 import { isMinorThanLatest, toSemVerObject } from "../semver";
 import { resetPubliccodeYmlLanguages, setPubliccodeYmlLanguages } from "../store/publiccodeYmlLanguages";
 import yamlSerializer from "../yaml-serializer";
+import { removeDuplicate } from "../yaml-upload";
+import EditorUsedBy from "./EditorUsedBy";
 
 const validatorFn = async (values: PublicCode) => await validator({ publiccode: JSON.stringify(values), baseURL: values.url });
 
@@ -189,6 +191,11 @@ export default function Editor() {
 
     if (publicCode) {
       const values = { ...defaultValues, ...publicCode } as PublicCode;
+
+      if (publicCode.usedBy) {
+        values.usedBy = removeDuplicate(publicCode.usedBy)
+      }
+
       setLanguages(publicCode);
       reset(values);
 
@@ -372,7 +379,9 @@ export default function Editor() {
                   filter="contains"
                 />
               </Col>
-
+              <Col>
+                <EditorUsedBy />
+              </Col>
               <Col>
                 <EditorSelect<"legal.license">
                   fieldName="legal.license"

src/app/components/EditorUsedBy.tsx

@@ -0,0 +1,78 @@
+import { Button, Icon, Input, InputGroup } from "design-react-kit";
+import { useState } from "react";
+import { useController, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import PublicCode from "../contents/publiccode";
+import { removeDuplicate } from "../yaml-upload";
+
+export default function EditorUsedBy(): JSX.Element {
+  const { control } = useFormContext<PublicCode>();
+  const {
+    field: { onChange, value },
+  } = useController<PublicCode>({
+    control,
+    name: `usedBy`,
+    shouldUnregister: true,
+  });
+  const { t } = useTranslation();
+
+  const usedBy: string[] = value ? (value as string[]) : [];
+  const [current, setCurrent] = useState<string>("");
+
+  const label = t(`publiccodeyml.usedBy.label`);
+  const description = t(`publiccodeyml.usedBy.description`);
+
+  const add = () => {
+    onChange(removeDuplicate([...usedBy, current.trim()]));
+    setCurrent("");
+  };
+
+  const remove = (feat: string) => {
+    onChange(usedBy.filter((elem) => elem !== feat));
+  };
+
+
+  return (
+    <div className="form-group">
+      <label
+        className="active"
+        htmlFor={`usedby`}
+      >{`${label} *`}</label>
+      <ul className="list-group list-group-flush">
+        {usedBy.map((feat) => (
+          <li
+            className="list-group-item d-flex justify-content-between align-items-center"
+            key={feat}
+          >
+            {feat}
+            <Button
+              color="link"
+              icon
+              onClick={() => remove(feat)}
+              size="xs"
+            >
+              <Icon icon="it-delete" size="sm" title="Remove" />
+            </Button>
+          </li>
+        ))}
+      </ul>
+      <InputGroup>
+        <Input
+          value={current}
+          onChange={({ target }) => setCurrent(target.value)}
+        />
+        <div className="input-group-append">
+          <Button
+            color="primary"
+            disabled={current.trim() === "" || usedBy.includes(current.trim())}
+            onClick={add}
+          >
+            Add PA
+          </Button>
+        </div>
+      </InputGroup>
+
+      <small className="form-text">{description}</small>
+    </div>
+  );
+}

src/app/yaml-upload.ts

@@ -9,4 +9,6 @@ export const isYamlFile = (file?: File | null) => Boolean(file?.type && yamlMime
 export const hasYamlFileExtension = (value?: string) => {
     const ext = value?.split(/[. ]+/).pop();
     return ext === "yml" || ext === "yaml";
-}
+}
+
+export const removeDuplicate = <T>(array: Array<T>) => [...new Set(array)];