Feat verification tag add (#1234)

* feat organizationList: verification tag add on organization card * fix projectTaskStatus: enum value display * fix manageOrganization: hide new btn if no token & show verified/unverified tab on ALL tab selection only * fix manageOrganization: add verification tag & redirect to approve org if org not verified
hotosm · Feb 21, 2024 · 5ae205d · 5ae205d
1 parent 637fffa
commit 5ae205d
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 38 deletions.
diff --git a/src/frontend/src/api/ProjectTaskStatus.js b/src/frontend/src/api/ProjectTaskStatus.js
@@ -35,7 +35,7 @@ const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, m
         dispatch(
           HomeActions.SetSnackBar({
             open: true,
-            message: `Task #${response.data.id} has been updated to ${response.data.task_status}`,
+            message: `Task #${response.data.id} has been updated to ${task_priority_str[response.data.task_status]}`,
             variant: 'success',
             duration: 3000,
           }),

diff --git a/src/frontend/src/components/organisation/OrganisationGridCard.tsx b/src/frontend/src/components/organisation/OrganisationGridCard.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import CoreModules from '@/shared/CoreModules';
 import CustomizedImage from '@/utilities/CustomizedImage';
+import { useNavigate } from 'react-router-dom';
+import { user_roles } from '@/types/enums';
 
 const OrganisationGridCard = ({ filteredData, allDataLength }) => {
+  const navigate = useNavigate();
+  const token = CoreModules.useAppSelector((state) => state.login.loginToken);
   const cardStyle = {
     padding: '20px',
     display: 'flex',
@@ -19,7 +23,15 @@ const OrganisationGridCard = ({ filteredData, allDataLength }) => {
       </p>
       <div className="fmtm-grid fmtm-grid-cols-1 md:fmtm-grid-cols-2 lg:fmtm-grid-cols-3 fmtm-gap-5">
         {filteredData?.map((data, index) => (
-          <CoreModules.Card key={index} sx={cardStyle}>
+          <CoreModules.Card
+            key={index}
+            sx={cardStyle}
+            onClick={() => {
+              if (!data?.approved && token && token?.['role'] === user_roles.ADMIN) {
+                navigate(`/approve-organization/${data?.id}`);
+              }
+            }}
+          >
             {data.logo ? (
               <div className="fmtm-min-w-[60px] md:fmtm-min-w-[80px] lg:fmtm-min-w-[120px]">
                 <CoreModules.CardMedia component="img" src={data.logo} sx={{ width: ['60px', '80px', '120px'] }} />
@@ -30,19 +42,35 @@ const OrganisationGridCard = ({ filteredData, allDataLength }) => {
               </div>
             )}
 
-            <CoreModules.Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} className="fmtm-overflow-hidden">
-              <h2
-                className="fmtm-line-clamp-1 fmtm-text-base sm:fmtm-text-lg fmtm-font-bold fmtm-capitalize"
-                title={data.name}
-              >
-                {data.name}
-              </h2>
-              <p
-                className="fmtm-line-clamp-3 fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-sm sm:fmtm-text-base"
-                title={data.description}
-              >
-                {data.description}
-              </p>
+            <CoreModules.Box
+              sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}
+              className="fmtm-overflow-hidden fmtm-grow fmtm-h-full fmtm-justify-between"
+            >
+              <div className="fmtm-flex fmtm-flex-col fmtm-gap-1">
+                <h2
+                  className="fmtm-line-clamp-1 fmtm-text-base sm:fmtm-text-lg fmtm-font-bold fmtm-capitalize"
+                  title={data.name}
+                >
+                  {data.name}
+                </h2>
+                <p
+                  className="fmtm-line-clamp-3 fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-sm sm:fmtm-text-base"
+                  title={data.description}
+                >
+                  {data.description}
+                </p>
+              </div>
+              {token && token['role'] === user_roles.ADMIN && (
+                <div className="fmtm-w-full fmtm-flex fmtm-justify-end">
+                  <div
+                    className={`fmtm-bottom-5 fmtm-right-5 fmtm-px-2 fmtm-py-1 fmtm-rounded fmtm-w-fit ${
+                      data?.approved ? 'fmtm-text-[#40B449] fmtm-bg-[#E7F3E8]' : 'fmtm-bg-[#FBE2E2] fmtm-text-[#D33A38]'
+                    }`}
+                  >
+                    <p className="fmtm-text-sm sm:fmtm-text-base">{data?.approved ? 'Verified' : 'Not Verified'}</p>
+                  </div>
+                </div>
+              )}
             </CoreModules.Box>
           </CoreModules.Card>
         ))}

diff --git a/src/frontend/src/models/organisation/organisationModel.ts b/src/frontend/src/models/organisation/organisationModel.ts
@@ -27,4 +27,5 @@ export interface GetOrganisationDataModel {
   id: number;
   logo: string;
   url: string;
+  approved: boolean;
 }
diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx
@@ -44,10 +44,6 @@ const Organisation = () => {
     }
   }, [verifiedTab]);
 
-  const approveOrganization = (id: number) => {
-    navigate(`/approve-organization/${id}`);
-  };
-
   return (
     <CoreModules.Box
       sx={{
@@ -100,27 +96,29 @@ const Organisation = () => {
               className="fmtm-duration-150"
               onClick={() => setActiveTab(1)}
             />
-            <CoreModules.Link to={'/create-organization'}>
-              <CoreModules.Button
-                variant="outlined"
-                color="error"
-                startIcon={<AssetModules.AddIcon />}
-                sx={{
-                  marginLeft: ['8px', '12px', '12px'],
-                  minWidth: 'fit-content',
-                  width: 'auto',
-                  fontWeight: 'bold',
-                  minHeight: ['26px', '36px', '36px'],
-                  height: ['30px', '36px', '36px'],
-                  px: ['12px', '16px', '16px'],
-                }}
-              >
-                New
-              </CoreModules.Button>
-            </CoreModules.Link>
+            {token && (
+              <CoreModules.Link to={'/create-organization'}>
+                <CoreModules.Button
+                  variant="outlined"
+                  color="error"
+                  startIcon={<AssetModules.AddIcon />}
+                  sx={{
+                    marginLeft: ['8px', '12px', '12px'],
+                    minWidth: 'fit-content',
+                    width: 'auto',
+                    fontWeight: 'bold',
+                    minHeight: ['26px', '36px', '36px'],
+                    height: ['30px', '36px', '36px'],
+                    px: ['12px', '16px', '16px'],
+                  }}
+                >
+                  New
+                </CoreModules.Button>
+              </CoreModules.Link>
+            )}
           </CoreModules.Tabs>
         </CoreModules.Box>
-        {token !== null && token['role'] && token['role'] === user_roles.ADMIN && (
+        {token !== null && token['role'] && token['role'] === user_roles.ADMIN && activeTab === 0 && (
           <CoreModules.Box>
             <CoreModules.Tabs sx={{ minHeight: 'fit-content' }}>
               <CoreModules.Tab