diff --git a/src/components/action-buttons/action-buttons.component.tsx b/src/components/action-buttons/action-buttons.component.tsx index 3ed5c508..57ac4f9c 100644 --- a/src/components/action-buttons/action-buttons.component.tsx +++ b/src/components/action-buttons/action-buttons.component.tsx @@ -14,9 +14,14 @@ import type { TFunction } from "react-i18next"; import type { RouteParams, Schema } from "../../types"; import { publishForm, unpublishForm } from "../../forms.resource"; import { useForm } from "../../hooks/useForm"; -import SaveFormModal from "../modals/save-form.component"; +import SaveFormModal from "../modals/save-form-modal.component"; import styles from "./action-buttons.scss"; +type ActionButtonsProps = { + schema: Schema; + t: TFunction; +}; + type Status = | "idle" | "publishing" @@ -25,11 +30,6 @@ type Status = | "unpublished" | "error"; -type ActionButtonsProps = { - schema: Schema; - t: TFunction; -}; - function ActionButtons({ schema, t }: ActionButtonsProps) { const { formUuid } = useParams(); const { form, mutate } = useForm(formUuid); diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx index 2cf08b3f..794fa704 100644 --- a/src/components/form-editor/form-editor.component.tsx +++ b/src/components/form-editor/form-editor.component.tsx @@ -171,7 +171,7 @@ const FormEditor: React.FC = () => { - + {t("preview", "Preview")} {t("interactiveBuilder", "Interactive Builder")} @@ -179,7 +179,6 @@ const FormEditor: React.FC = () => { diff --git a/src/components/modals/save-form.component.tsx b/src/components/modals/save-form-modal.component.tsx similarity index 89% rename from src/components/modals/save-form.component.tsx rename to src/components/modals/save-form-modal.component.tsx index 21d8129b..2c9751f1 100644 --- a/src/components/modals/save-form.component.tsx +++ b/src/components/modals/save-form-modal.component.tsx @@ -1,4 +1,4 @@ -import React, { SyntheticEvent, useCallback, useState } from "react"; +import React, { SyntheticEvent, useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { useParams } from "react-router-dom"; import { @@ -29,7 +29,7 @@ import { import type { EncounterType, Resource, RouteParams, Schema } from "../../types"; import { useEncounterTypes } from "../../hooks/useEncounterTypes"; import { useForm } from "../../hooks/useForm"; -import styles from "./save-form.scss"; +import styles from "./save-form-modal.scss"; type FormGroupData = { name: string; @@ -56,18 +56,25 @@ const SaveFormModal: React.FC = ({ form, schema }) => { const [saveState, setSaveState] = useState(""); const [isSavingForm, setIsSavingForm] = useState(false); const [isInvalidVersion, setIsInvalidVersion] = useState(false); - const [name, setName] = useState(form?.name); - const [description, setDescription] = useState(form?.description); - const [encounterType, setEncounterType] = useState( - form?.encounterType?.uuid || "" - ); - const [version, setVersion] = useState(form?.version); + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + const [encounterType, setEncounterType] = useState(""); + const [version, setVersion] = useState(""); const clearDraftFormSchema = useCallback( () => localStorage.removeItem("formSchema"), [] ); + useEffect(() => { + if (schema) { + setName(schema.name); + setDescription(schema.description); + setEncounterType(schema.encounterType); + setVersion(schema.version); + } + }, [schema]); + const checkVersionValidity = (version: string) => { if (!version) return setIsInvalidVersion(false); @@ -297,27 +304,28 @@ const SaveFormModal: React.FC = ({ form, schema }) => { setName(event.target.value)} - placeholder="e.g. OHRI Express Care Patient Encounter Form" + placeholder={t( + "formNamePlaceholder", + "e.g. OHRI Express Care Patient Encounter Form" + )} required + value={name} /> {saveState === "update" ? ( ) : null} { checkVersionValidity(event.target.value); @@ -330,33 +338,38 @@ const SaveFormModal: React.FC = ({ form, schema }) => { "invalidVersionWarning", "Version can only start with with a number" )} + required + value={version} />