fix (frontend): required fields, description word limit, odk cred inp…

…ut (#1404) * feat select: required mark add * feat projectDetailsForm: organization name select field required * fix projectDetailsForm: display odk fields if no odk-credentials * feat textArea: character length limit & current character length display in textArea * feat projectDescription: short description character length limit set to 200 characters
hotosm · Mar 29, 2024 · 428bba6 · 428bba6
1 parent 949a789
commit 428bba6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx b/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx
@@ -61,12 +61,13 @@ const ProjectDescriptionTab = ({ projectId }) => {
         onChange={handleChange}
         errorMsg={errors.short_description}
         required
+        maxLength={200}
       />
       <TextArea
         id="description"
         name="description"
         label="Description"
-        rows={2}
+        rows={3}
         value={values?.description}
         onChange={handleChange}
         errorMsg={errors.description}

diff --git a/src/frontend/src/components/common/Select.tsx b/src/frontend/src/components/common/Select.tsx
@@ -118,6 +118,7 @@ interface ICustomSelect {
   onValueChange: (value: string | null | number) => void;
   errorMsg?: string;
   className?: string;
+  required?: boolean;
 }
 
 export const CustomSelect = ({
@@ -131,11 +132,15 @@ export const CustomSelect = ({
   onValueChange,
   errorMsg,
   className,
+  required,
 }: ICustomSelect) => {
   return (
     <div className="fmtm-w-full">
       {title && (
-        <p className={`fmtm-text-[1rem] fmtm-mb-2 fmtm-font-semibold !fmtm-bg-transparent ${className}`}>{title}</p>
+        <div className="fmtm-flex fmtm-gap-1">
+          <p className={`fmtm-text-[1rem] fmtm-mb-2 fmtm-font-semibold !fmtm-bg-transparent ${className}`}>{title}</p>
+          {required && <p className="fmtm-text-red-500 fmtm-text-[1.2rem]">*</p>}
+        </div>
       )}
       <div className="fmtm-flex fmtm-items-end">
         <div className={`fmtm-w-full ${className}`}>

diff --git a/src/frontend/src/components/common/TextArea.tsx b/src/frontend/src/components/common/TextArea.tsx
@@ -37,7 +37,7 @@ function TextArea({
         {required && <p className="fmtm-text-red-500 fmtm-text-[1.2rem]">*</p>}
       </div>
       <div
-        className={`fmtm-border-[1px] fmtm-border-gray-300 fmtm-bg-inactive_bg fmtm-w-full fmtm-justify-between fmtm-flex fmtm-items-center fmtm-overflow-hidden`}
+        className={`fmtm-border-[1px] fmtm-border-gray-300 fmtm-bg-inactive_bg fmtm-w-full fmtm-justify-between fmtm-flex fmtm-items-center fmtm-overflow-hidden fmtm-relative`}
       >
         <textarea
           id={id}
@@ -52,6 +52,11 @@ function TextArea({
           onChange={onChange}
           disabled={disabled}
         />
+        {maxLength && (
+          <p className="fmtm-text-sm fmtm-absolute fmtm-bottom-1 fmtm-right-1 fmtm-text-gray-400">
+            {value.length}/{maxLength}
+          </p>
+        )}
       </div>
       {errorMsg && <p className="fmtm-form-error fmtm-text-red-600 fmtm-text-sm fmtm-py-1">{errorMsg}</p>}
     </div>

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -27,7 +27,6 @@ const ProjectDetailsForm = ({ flag }) => {
     hasODKCredentials: item?.odk_central_url ? true : false,
   }));
   const [hasODKCredentials, setHasODKCredentials] = useState(false);
-  const [editorHtmlContent, setEditorHtmlContent] = useState('');
 
   const submission = () => {
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(values));
@@ -151,11 +150,12 @@ const ProjectDetailsForm = ({ flag }) => {
             id="short_description"
             name="short_description"
             label="Short Description"
-            rows={3}
+            rows={2}
             value={values?.short_description}
             onChange={handleInputChanges}
             required
             errorMsg={errors.short_description}
+            maxLength={200}
           />
           <TextArea
             id="description"
@@ -179,6 +179,7 @@ const ProjectDetailsForm = ({ flag }) => {
                 onValueChange={(value) => {
                   setSelectedOrganisation(value);
                 }}
+                required
               />
             </div>
             {errors.organisation_id && (
@@ -196,7 +197,7 @@ const ProjectDetailsForm = ({ flag }) => {
               className="fmtm-text-black"
             />
           )}
-          {!values.defaultODKCredentials && (
+          {((!values.defaultODKCredentials && hasODKCredentials) || !hasODKCredentials) && (
             <div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
               <InputTextField
                 id="odk_central_url"