added eventsattended in user portal

duplixx · Oct 11, 2024 · 3263112 · 3263112
1 parent 5738fd6
commit 3263112
Show file tree

Hide file tree

Showing 12 changed files with 209 additions and 116 deletions.
diff --git a/dump.rdb b/dump.rdb
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -716,6 +716,8 @@
     "article": "Article"
   },
   "settings": {
+    "eventAttended":"Events Attended",
+    "noEventsAttended":"No Events Attended",
     "profileSettings": "Profile Settings",
     "gender": "Gender",
     "phoneNumber": "Phone Number",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -718,6 +718,8 @@
     "article": "Article"
   },
   "settings": {
+    "eventAttended":"Événements Assistés",
+    "noEventsAttended":"Aucun événement assisté",
     "profileSettings": "Paramètres de profil",
     "gender": "Genre",
     "phoneNumber": "Numéro de téléphone",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -718,6 +718,8 @@
     "article": "लेख"
   },
   "settings": {
+    "noEventsAttended": "कोई कार्यक्रम में उपस्थित नहीं",
+    "eventAttended": "भाग लिए गए कार्यक्रम",
     "profileSettings": "पार्श्वचित्र समायोजन",
     "gender": "लिंग",
     "phoneNumber": "फ़ोन नंबर",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -925,6 +925,8 @@
   },
   "settings": {
     "settings": "Ajustes",
+    "eventAttended":"Événements Assistés",
+    "noEventsAttended":"Ningún evento asistido",
     "profileSettings": "Configuración de perfil",
     "firstName": "Nombre de pila",
     "lastName": "Apellido",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -718,6 +718,8 @@
     "article": "文章"
   },
   "settings": {
+    "noEventsAttended": "未参加任何活动",
+    "eventAttended":"参加的活动",
     "profileSettings": "配置文件设置",
     "gender": "性别",
     "phoneNumber": "电话号码",

diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
@@ -23,6 +23,9 @@ export const CHECK_AUTH = gql`
         state
         countryCode
       }
+      eventsAttended {
+        _id
+      }
     }
   }
 `;

diff --git a/src/components/DynamicDropDown/DynamicDropDown.tsx b/src/components/DynamicDropDown/DynamicDropDown.tsx
@@ -1,48 +1,60 @@
 import React from 'react';
 import { Dropdown } from 'react-bootstrap';
 import styles from './DynamicDropDown.module.css';
+import type { InterfaceMember } from 'components/EventManagement/EventAttendance/InterfaceEvents';
 
 interface InterfaceChangeDropDownProps {
   parentContainerStyle?: string;
   btnStyle?: string;
   btnTextStyle?: string;
-  setFormState: React.Dispatch<React.SetStateAction<any>>;
+  setFormState: React.Dispatch<React.SetStateAction<InterfaceMember>>;
   formState: any;
-  fieldOptions: { value: string; label: string }[]; // Field options for dropdown
-  fieldName: string; // Field name for labeling
+  fieldOptions: { value: string; label: string }[];
+  fieldName: string;
+  handleChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
 const DynamicDropDown = (props: InterfaceChangeDropDownProps): JSX.Element => {
   const handleFieldChange = (value: string): void => {
-    props.setFormState({ ...props.formState, [props.fieldName]: value });
+    if (props?.handleChange) {
+      const event = {
+        target: {
+          name: props?.fieldName,
+          value: value,
+        },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      props?.handleChange(event);
+    } else {
+      props?.setFormState({ ...props?.formState, [props?.fieldName]: value });
+    }
   };
 
   const getLabel = (value: string): string => {
-    const selectedOption = props.fieldOptions.find(
+    const selectedOption = props?.fieldOptions.find(
       (option) => option.value === value,
     );
     return selectedOption ? selectedOption.label : `None`;
   };
 
   return (
     <Dropdown
-      title={`Select ${props.fieldName}`}
+      title={`Select ${props?.fieldName}`}
       className={`${props?.parentContainerStyle ?? ''} m-2`}
-      data-testid={`${props.fieldName.toLowerCase()}-dropdown-container`}
+      data-testid={`${props?.fieldName.toLowerCase()}-dropdown-container`}
     >
       <Dropdown.Toggle
         className={`${props?.btnStyle ?? 'w-100'} ${styles.dropwdownToggle}`}
-        data-testid={`${props.fieldName.toLowerCase()}-dropdown-btn`}
+        data-testid={`${props?.fieldName.toLowerCase()}-dropdown-btn`}
       >
-        {getLabel(props.formState[props.fieldName])}
+        {getLabel(props?.formState[props?.fieldName])}
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        {props.fieldOptions.map((option, index: number) => (
+        {props?.fieldOptions.map((option, index: number) => (
           <Dropdown.Item
-            key={`${props.fieldName.toLowerCase()}-dropdown-item-${index}`}
+            key={`${props?.fieldName.toLowerCase()}-dropdown-item-${index}`}
             className={`dropdown-item`}
             onClick={() => handleFieldChange(option.value)}
-            data-testid={`change-${props.fieldName.toLowerCase()}-btn-${option.value}`}
+            data-testid={`change-${props?.fieldName.toLowerCase()}-btn-${option.value}`}
           >
             {option.label}
           </Dropdown.Item>

diff --git a/src/screens/MemberDetail/MemberDetail.module.css b/src/screens/MemberDetail/MemberDetail.module.css
@@ -16,6 +16,23 @@
   left: 20px;
   cursor: pointer;
 }
+.selectWrapper {
+  position: relative;
+}
+
+.selectWithChevron {
+  appearance: none;
+  padding-right: 30px;
+}
+
+.selectWrapper::after {
+  content: '\25BC';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
 
 .sidebar:after {
   content: '';

diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
@@ -127,18 +127,22 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   }, []);
 
   const handleChange = async (
-    e: React.ChangeEvent<HTMLInputElement>,
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
   ): Promise<void> => {
-    const { name, files } = e.target;
-    if (name === 'photo' && files && files[0]) {
-      const file = files[0];
+    const { name, value } = e.target;
+    if (
+      name === 'photo' &&
+      'files' in e.target &&
+      e.target.files &&
+      e.target.files[0]
+    ) {
+      const file = e.target.files[0];
       const base64 = await convertToBase64(file);
       setFormState((prevState) => ({
         ...prevState,
         image: base64 as string,
       }));
     } else {
-      const { value } = e.target;
       setFormState((prevState) => ({
         ...prevState,
         [name]: value,
@@ -351,6 +355,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     setFormState={setFormState}
                     fieldOptions={genderEnum}
                     fieldName="gender"
+                    handleChange={handleChange}
                   />
                 </Col>
                 <Col md={6}>
@@ -380,6 +385,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     setFormState={setFormState}
                     fieldOptions={educationGradeEnum}
                     fieldName="grade"
+                    handleChange={handleChange}
                   />
                 </Col>
                 <Col md={6}>
@@ -391,6 +397,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     setFormState={setFormState}
                     fieldOptions={employmentStatusEnum}
                     fieldName="empStatus"
+                    handleChange={handleChange}
                   />
                 </Col>
                 <Col md={6}>
@@ -402,6 +409,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     setFormState={setFormState}
                     fieldOptions={maritalStatusEnum}
                     fieldName="maritalStatus"
+                    handleChange={handleChange}
                   />
                 </Col>
               </Row>
@@ -459,20 +467,6 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     onChange={handleChange}
                   />
                 </Col>
-                <Col md={12}>
-                  <label htmlFor="country" className="form-label">
-                    {t('countryCode')}
-                  </label>
-                  <input
-                    id="country"
-                    value={formState.country}
-                    className={`form-control ${styles.inputColor}`}
-                    type="text"
-                    name="country"
-                    onChange={handleChange}
-                    placeholder={t('countryCode')}
-                  />
-                </Col>
                 <Col md={6}>
                   <label htmlFor="city" className="form-label">
                     {t('city')}
@@ -500,6 +494,20 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                     onChange={handleChange}
                   />
                 </Col>
+                <Col md={12}>
+                  <label htmlFor="country" className="form-label">
+                    {t('countryCode')}
+                  </label>
+                  <input
+                    id="country"
+                    value={formState.country}
+                    className={`form-control ${styles.inputColor}`}
+                    type="text"
+                    name="country"
+                    onChange={handleChange}
+                    placeholder={t('countryCode')}
+                  />
+                </Col>
               </Row>
             </Card.Body>
           </Card>

diff --git a/src/screens/UserPortal/Settings/Settings.module.css b/src/screens/UserPortal/Settings/Settings.module.css
@@ -24,7 +24,10 @@
   font-size: 1.2rem;
   font-weight: 600;
 }
-
+.scrollableCardBody{
+  height: 220px;
+  overflow-y: scroll;
+}
 .cardHeader {
   padding: 1.25rem 1rem 1rem 1rem;
   border-bottom: 1px solid var(--bs-gray-200);
@@ -37,6 +40,7 @@
   padding: 1.25rem 1rem 1.5rem 1rem;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 }
 
 .cardLabel {
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,9 @@ export const CHECK_AUTH = gql` @@
             state
             countryCode
           }
+          eventsAttended {
+            _id
+          }
         }
       }
     `;
@@ Expand Down @@