diff --git a/src/app/components/Editor.tsx b/src/app/components/Editor.tsx index a8210492..b733d56f 100644 --- a/src/app/components/Editor.tsx +++ b/src/app/components/Editor.tsx @@ -35,13 +35,16 @@ import InfoBox from "./InfoBox"; import { YamlModal } from "./YamlModal"; import useFormPersist from "react-hook-form-persist"; -import { resetPubliccodeYmlLanguages, setPubliccodeYmlLanguages } from "../store/publiccodeYmlLanguages"; +import { + resetPubliccodeYmlLanguages, + setPubliccodeYmlLanguages, +} from "../store/publiccodeYmlLanguages"; import yamlSerializer from "../yaml-serializer"; -const validatorFn = async (values: PublicCode) => await validator(JSON.stringify(values), "main"); +const validatorFn = async (values: PublicCode) => + await validator(JSON.stringify(values), "main"); const checkWarnings = async (values: PublicCode) => { - const res = await validatorFn(values); const warnings = new Map(); @@ -52,9 +55,8 @@ const checkWarnings = async (values: PublicCode) => { }); } - return { warnings } -} - + return { warnings }; +}; const resolver: Resolver = async (values) => { const res = await validatorFn(values); @@ -108,18 +110,24 @@ export default function Editor() { }); const { getValues, handleSubmit, watch, setValue, reset } = methods; - const setLanguages = useCallback((publicCode: PublicCode) => { - console.log(Object.keys(publicCode.description)); - dispatch(setPubliccodeYmlLanguages(Object.keys(publicCode.description))); - }, [dispatch]) + const setLanguages = useCallback( + (publicCode: PublicCode) => { + console.log(Object.keys(publicCode.description)); + dispatch(setPubliccodeYmlLanguages(Object.keys(publicCode.description))); + }, + [dispatch] + ); useFormPersist("form-values", { watch, setValue, - onDataRestored: useCallback((pc: PublicCode) => { - console.log('onDataRestored', pc) - setLanguages(pc); - }, [setLanguages]), + onDataRestored: useCallback( + (pc: PublicCode) => { + console.log("onDataRestored", pc); + setLanguages(pc); + }, + [setLanguages] + ), storage: window?.localStorage, // default window.sessionStorage exclude: [], }); @@ -133,34 +141,37 @@ export default function Editor() { (e: FieldErrors) => { notify( t("editor.form.validate.notification_title"), - t('editor.form.validate.notification_text'), + t("editor.form.validate.notification_text"), { dismissable: true, - state: 'error', - }) + state: "error", + } + ); console.error("Errors:", e); } ); const resetFormHandler = () => { dispatch(resetPubliccodeYmlLanguages()); - reset({ ...defaultValues }) - } + reset({ ...defaultValues }); + }; - const setFormDataAfterImport = async (fetchData: () => Promise) => { + const setFormDataAfterImport = async ( + fetchData: () => Promise + ) => { const publicCode = await fetchData(); if (publicCode) { const values = { ...defaultValues, ...publicCode } as PublicCode; - setLanguages(publicCode) - reset(values) + setLanguages(publicCode); + reset(values); - const res = await checkWarnings(values) + const res = await checkWarnings(values); - console.log(res.warnings) + console.log(res.warnings); if (res.warnings.size) { - let body = '' + let body = ""; for (const item of res.warnings) { const key = item[0]; @@ -168,203 +179,209 @@ export default function Editor() { body = body + `${key}: ${value}\n\n\n`; } - notify('Warnings', body, { + notify("Warnings", body, { dismissable: true, - state: 'warning', - duration: 60 * 2 * 1000 - }) + state: "warning", + duration: 60 * 2 * 1000, + }); } } - } + }; const loadFileYamlHandler = async (file: File) => { const fetchDataFn = () => yamlSerializer(file.stream()); await setFormDataAfterImport(fetchDataFn); - } + }; const loadRemoteYamlHandler = async (url: string) => { - const fetchDataFn = () => fetch(url) - .then(res => res.body) - .then(res => res && yamlSerializer(res)); + const fetchDataFn = () => + fetch(url) + .then((res) => res.body) + .then((res) => res && yamlSerializer(res)); - await setFormDataAfterImport(fetchDataFn) - } + await setFormDataAfterImport(fetchDataFn); + }; //#endregion return ( - - -
- - - fieldName="name" required /> - - - fieldName="applicationSuite" /> - - - {languages.map((lang) => ( -
- - - - fieldName="genericName" - lang={lang} - /> - - - - fieldName="localisedName" - lang={lang} - /> - - - - fieldName="shortDescription" +
+ +
+ + + + + fieldName='name' required /> + + + fieldName='applicationSuite' /> + + + {languages.map((lang) => ( +
+ + + + fieldName='genericName' + lang={lang} + /> + + + + fieldName='localisedName' + lang={lang} + /> + + + + fieldName='shortDescription' + lang={lang} + required + /> + + + + + + + + fieldName='longDescription' lang={lang} required + textarea /> - - - - - - - - fieldName="longDescription" - lang={lang} + +
+ ))} + + + fieldName='url' required /> + + + fieldName='landingURL' /> + + + fieldName='isBasedOn' /> + + + fieldName='softwareVersion' /> + + + fieldName='releaseDate' /> + + + + fieldName='developmentStatus' + data={developmentStatus} required - textarea /> - -
- ))} - - - fieldName="url" required /> - - - fieldName="landingURL" /> - - - fieldName="isBasedOn" /> - - - fieldName="softwareVersion" /> - - - fieldName="releaseDate" /> - - - - fieldName="developmentStatus" - data={developmentStatus} - required - /> - - - fieldName="logo" /> - - - - fieldName="localisation.localisationReady" - required - /> - - - - fieldName="localisation.availableLanguages" - data={allLangs().map(({ text, value }) => ({ - text: text || "", - value, - }))} - required - /> - - - - fieldName="categories" - data={categories.map((e) => ({ text: e, value: e }))} - required - filter="contains" - /> - - - - fieldName="platforms" - data={platforms.map((e) => ({ text: e, value: e }))} - required - filter="contains" - /> - - - - fieldName="legal.license" - data={licenses} - required - filter={(item, word) => - item.text.toLowerCase().includes(word.toLocaleLowerCase()) || - item.value.toLowerCase().includes(word.toLocaleLowerCase()) - } - /> - - - - fieldName="softwareType" - data={softwareTypes} - required - /> - - - - fieldName="maintenance.type" - data={maintenanceTypes} - required - /> - - - - -
- {countrySection.isVisible(configCountrySections, "italy") && ( - -

{t("countrySpecificSection.italy")}

+ + + fieldName='logo' /> + + + + fieldName='localisation.localisationReady' + required + /> + + + + fieldName='localisation.availableLanguages' + data={allLangs().map(({ text, value }) => ({ + text: text || "", + value, + }))} + required + /> + + + + fieldName='categories' + data={categories.map((e) => ({ text: e, value: e }))} + required + filter='contains' + /> + + + + fieldName='platforms' + data={platforms.map((e) => ({ text: e, value: e }))} + required + filter='contains' + /> + - fieldName="it.conforme.lineeGuidaDesign" /> - fieldName="it.conforme.modelloInteroperabilita" /> - fieldName="it.conforme.misureMinimeSicurezza" /> - fieldName="it.conforme.gdpr" /> - fieldName="it.riuso.codiceIPA" /> + + fieldName='legal.license' + data={licenses} + required + filter={(item, word) => + item.text + .toLowerCase() + .includes(word.toLocaleLowerCase()) || + item.value.toLowerCase().includes(word.toLocaleLowerCase()) + } + /> - fieldName="it.piattaforme.spid" /> - fieldName="it.piattaforme.cie" /> - fieldName="it.piattaforme.anpr" /> - fieldName="it.piattaforme.pagopa" /> - fieldName="it.piattaforme.io" /> + + fieldName='softwareType' + data={softwareTypes} + required + /> + + + + fieldName='maintenance.type' + data={maintenanceTypes} + required + /> + + - )} - - -
); }