Feat manage project UI

src/frontend/package.json

@@ -88,6 +88,7 @@
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^9.0.1"
   }
 }

src/frontend/src/api/CreateProjectService.ts

@@ -429,8 +429,8 @@ const PostFormUpdate: Function = (url: string, payload: any) => {
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: error.response.data.detail,
-            variant: 'success',
+            message: error?.response?.data?.detail || 'Failed to update Form',
+            variant: 'error',
             duration: 2000,
           }),
         );

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import UploadArea from '../../common/UploadArea';
+import { CustomSelect } from '../../common/Select';
+import Button from '../../common/Button';
+import CoreModules from '@/shared/CoreModules';
+import { diffObject } from '@/utilfunctions/compareUtils.js';
+import { PostFormUpdate } from '@/api/CreateProjectService';
+
+type FileType = {
+  id: string;
+  name: string;
+  url?: File;
+  isDeleted: boolean;
+};
+
+const FormUpdateTab = ({ projectId }) => {
+  const dispatch = CoreModules.useAppDispatch();
+
+  const [uploadForm, setUploadForm] = useState<FileType[] | null>(null);
+  const [selectedFormCategory, setSelectedFormCategory] = useState<string | null>(null);
+  const formCategoryList = CoreModules.useAppSelector((state) => state.createproject.formCategoryList);
+  const previousXform_title = CoreModules.useAppSelector((state) => state.project.projectInfo.xform_title);
+
+  useEffect(() => {
+    setSelectedFormCategory(previousXform_title);
+  }, [previousXform_title]);
+
+  const onSave = () => {
+    const diffPayload = diffObject({ category: previousXform_title }, { category: selectedFormCategory });
+    dispatch(
+      PostFormUpdate(`${import.meta.env.VITE_API_URL}/projects/update_category`, {
+        ...(Object.keys(diffPayload).length > 0 ? diffPayload : { category: selectedFormCategory }),
+        project_id: projectId,
+        upload: uploadForm && uploadForm?.[0]?.url,
+      }),
+    );
+  };
+
+  return (
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
+      <CustomSelect
+        title="Form Category"
+        placeholder="Choose"
+        data={formCategoryList}
+        dataKey="title"
+        value={selectedFormCategory}
+        valueKey="title"
+        label="title"
+        onValueChange={(value) => value && setSelectedFormCategory(value?.toString())}
+        className="fmtm-bg-white"
+      />
+      <UploadArea
+        title="Upload Form"
+        label="Please upload .xls, .slxs, .xml file"
+        multiple={false}
+        data={uploadForm || []}
+        filterKey="url"
+        onUploadFile={(updatedFiles) => {
+          setUploadForm(updatedFiles);
+        }}
+        acceptedInput=".xls, .slxs, .xml"
+      />
+      <div className="fmtm-flex fmtm-justify-center">
+        <Button onClick={onSave} btnText="UPDATE" btnType="primary" className="fmtm-rounded-md" />
+      </div>
+    </div>
+  );
+};
+
+export default FormUpdateTab;

src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import TextArea from '../../common/TextArea';
+import InputTextField from '../../common/InputTextField';
+import Button from '../../common/Button';
+import EditProjectValidation from '@/components/ManageProject/EditTab/validation/EditProjectDetailsValidation';
+import { CreateProjectActions } from '@/store/slices/CreateProjectSlice';
+import { PatchProjectDetails } from '@/api/CreateProjectService';
+import { diffObject } from '@/utilfunctions/compareUtils';
+import useForm from '@/hooks/useForm';
+import CoreModules from '@/shared/CoreModules';
+import { CommonActions } from '@/store/slices/CommonSlice';
+
+const ProjectDescriptionTab = ({ projectId }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const editProjectDetails: any = CoreModules.useAppSelector((state) => state.createproject.editProjectDetails);
+  const editProjectDetailsLoading: boolean = CoreModules.useAppSelector(
+    (state) => state.createproject.editProjectDetailsLoading,
+  );
+
+  const submission = () => {
+    const changedValues = diffObject(editProjectDetails, values);
+    dispatch(CreateProjectActions.SetIndividualProjectDetails(values));
+    if (Object.keys(changedValues).length > 0) {
+      dispatch(PatchProjectDetails(`${import.meta.env.VITE_API_URL}/projects/${projectId}`, changedValues));
+    } else {
+      dispatch(
+        CommonActions.SetSnackBar({
+          open: true,
+          message: 'No changes to Save',
+          variant: 'info',
+          duration: 2000,
+        }),
+      );
+    }
+  };
+  const { handleSubmit, handleChange, values, errors }: any = useForm(
+    editProjectDetails,
+    submission,
+    EditProjectValidation,
+  );
+  return (
+    <form onSubmit={handleSubmit} className="fmtm-w-full fmtm-h-full fmtm-flex fmtm-flex-col fmtm-flex-grow fmtm-gap-5">
+      <InputTextField
+        id="name"
+        name="name"
+        label="Project Name"
+        value={values?.name}
+        onChange={handleChange}
+        fieldType="text"
+        classNames="fmtm-w-full"
+        errorMsg={errors.name}
+        required
+      />
+      <TextArea
+        id="short_description"
+        name="short_description"
+        label="Short Description"
+        rows={2}
+        value={values?.short_description}
+        onChange={handleChange}
+        errorMsg={errors.short_description}
+        required
+      />
+      <TextArea
+        id="description"
+        name="description"
+        label="Description"
+        rows={2}
+        value={values?.description}
+        onChange={handleChange}
+        errorMsg={errors.description}
+        required
+      />
+      <TextArea
+        id="instruction"
+        name="instruction"
+        label="Instruction"
+        rows={2}
+        value={values?.instruction}
+        onChange={handleChange}
+        errorMsg={errors.instruction}
+      />
+      <InputTextField
+        id="changeset"
+        name="hashtags"
+        label="Changeset"
+        value={values?.hashtags}
+        onChange={handleChange}
+        fieldType="text"
+        classNames="fmtm-w-full"
+        errorMsg={errors.hashtags}
+        required
+      />
+      <div className="fmtm-flex fmtm-justify-center fmtm-mt-4">
+        <Button
+          isLoading={editProjectDetailsLoading}
+          loadingText="Saving"
+          btnText="SAVE"
+          btnType="primary"
+          type="submit"
+          className="fmtm-rounded-md"
+        />
+      </div>
+    </form>
+  );
+};
+
+export default ProjectDescriptionTab;

src/frontend/src/components/ManageProject/EditTab/index.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import environment from '@/environment';
+import ProjectDescriptionTab from './ProjectDescriptionTab';
+import FormUpdateTab from './FormUpdateTab';
+import { FormCategoryService, GetIndividualProjectDetails } from '@/api/CreateProjectService';
+import CoreModules from '@/shared/CoreModules';
+
+const tabList: ['Project Description', 'Form Update'] = ['Project Description', 'Form Update'];
+
+const EditTab = ({ projectId }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const [tabView, setTabView] = useState<'Project Description' | 'Form Update'>('Project Description');
+
+  useEffect(() => {
+    dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`));
+  }, []);
+
+  return (
+    <div>
+      <div className="fmtm-flex fmtm-gap-3 fmtm-mb-5">
+        {tabList.map((tab) => (
+          <div
+            key={tab}
+            className={`fmtm-w-fit fmtm-text-[#9B9999] fmtm-px-2 fmtm-border-b-[1px] hover:fmtm-border-primaryRed fmtm-duration-300 fmtm-cursor-pointer ${
+              tabView === tab ? 'fmtm-border-primaryRed' : 'fmtm-border-transparent'
+            }`}
+            onClick={() => setTabView(tab)}
+          >
+            {tab}
+          </div>
+        ))}
+      </div>
+      <div className="fmtm-max-w-[29.5rem]">
+        {tabView === 'Project Description' ? (
+          <ProjectDescriptionTab projectId={projectId} />
+        ) : (
+          <FormUpdateTab projectId={projectId} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EditTab;

src/frontend/src/components/ManageProject/EditTab/validation/EditProjectDetailsValidation.ts

@@ -0,0 +1,42 @@
+interface ProjectValues {
+  organisation: string;
+  name: string;
+  username: string;
+  id: string;
+  short_description: string;
+  description: string;
+  hashtags: string;
+}
+interface ValidationErrors {
+  organisation?: string;
+  name?: string;
+  username?: string;
+  id?: string;
+  short_description?: string;
+  description?: string;
+  hashtags?: string;
+}
+const regexForSymbol = /_/g;
+
+function EditProjectValidation(values: ProjectValues) {
+  const errors: ValidationErrors = {};
+  if (!values?.name) {
+    errors.name = 'Project Name is Required.';
+  }
+  if (values?.name && regexForSymbol.test(values.name)) {
+    errors.name = 'Project Name should not contain _.';
+  }
+  if (!values?.short_description) {
+    errors.short_description = 'Short Description is Required.';
+  }
+  if (!values?.description) {
+    errors.description = 'Description is Required.';
+  }
+  if (!values?.hashtags) {
+    errors.hashtags = 'Changeset is Required.';
+  }
+
+  return errors;
+}
+
+export default EditProjectValidation;

src/frontend/src/components/ManageProject/UserTab/AssignTab.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import InputTextField from '../../../components/common/InputTextField';
+import AssetModules from '../../../shared/AssetModules.js';
+import Chips from '../../common/Chips';
+import { CustomSelect } from '../../common/Select';
+import Button from '../..//common/Button';
+
+const roleList = [
+  { label: 'Project Manger', value: 'project_manager' },
+  { label: 'Surveyor', value: 'surveyor' },
+  { label: 'Supervisor', value: 'supervisor' },
+];
+const AssignTab = () => {
+  const [user, setUser] = useState<string | null>('');
+  const [assignUser, setAssignUser] = useState<string[]>([]);
+  const [assignedRole, setAssignedRole] = useState<string>('');
+  return (
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 lg:fmtm-gap-10">
+      <div>
+        <div className="fmtm-flex fmtm-gap-2">
+          <div className="fmtm-flex-grow">
+            <InputTextField
+              id="name"
+              name="name"
+              label="Assign User"
+              value={user}
+              onChange={(e) => setUser(e.target.value)}
+              fieldType="text"
+            />
+          </div>
+          <AssetModules.AddIcon
+            className="fmtm-bg-red-600 fmtm-text-white fmtm-rounded-full hover:fmtm-bg-red-700 hover:fmtm-cursor-pointer fmtm-mt-9"
+            onClick={() => {
+              setAssignUser([...assignUser, user]);
+              setUser('');
+            }}
+          />
+        </div>
+        {assignUser.length > 0 && (
+          <div>
+            <Chips
+              data={assignUser}
+              clearChip={(i) => {
+                setAssignUser((prevAssignUser) => assignUser.filter((_, index) => index !== i));
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <CustomSelect
+        title="Assign as"
+        placeholder="Choose"
+        data={roleList}
+        dataKey="value"
+        value={assignedRole}
+        valueKey="value"
+        label="label"
+        onValueChange={(value) => setAssignedRole(value)}
+        className="fmtm-bg-white"
+      />
+      <div className="fmtm-flex fmtm-justify-center">
+        <Button btnText="ASSIGN" btnType="primary" className="fmtm-rounded-md" />
+      </div>
+    </div>
+  );
+};
+
+export default AssignTab;