Redesign FundPledge Screen & Add Search/Sort (#2040)

* Add new UI Changes * Add test cases for Pledge UI changes * CHange Bug misplaced label for amount * Add comments to code * minor changes
PalisadoesFoundation · Jun 17, 2024 · 99d1a13 · 99d1a13
1 parent ff79bd3
commit 99d1a13
Show file tree

Hide file tree

Showing 20 changed files with 1,547 additions and 979 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -390,7 +390,13 @@
     "amount": "Amount",
     "editPledge": "Edit Pledge",
     "deletePledgeMsg": "Are you sure you want to delete this pledge?",
-    "noPledges": "No Pledges Found"
+    "noPledges": "No Pledges Found",
+    "sort": "Sort",
+    "searchVolunteer": "Search By Volunteer",
+    "highestAmount": "Highest Amount",
+    "lowestAmount": "Lowest Amount",
+    "latestEndDate": "Latest End Date",
+    "earliestEndDate": "Earliest End Date"
   },
   "orgPost": {
     "title": "Posts",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -395,7 +395,13 @@
     "amount": "Montant",
     "editPledge": "Modifier l'engagement",
     "deletePledgeMsg": "Etes-vous sûr de vouloir supprimer cet engagement ?",
-    "noPledges": "Aucun engagement trouvé"
+    "noPledges": "Aucun engagement trouvé",
+    "sort": "Trier",
+    "searchVolunteer": "Rechercher par bénévole",
+    "highestAmount": "Montant le plus élevé",
+    "lowestAmount": "Montant le plus bas",
+    "latestEndDate": "Date de fin la plus récente",
+    "earliestEndDate": "Date de fin la plus proche"
   },
   "orgPost": {
     "title": "Des postes",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -395,7 +395,13 @@
     "amount": "मात्रा",
     "editPledge": "प्रतिज्ञा संपादित करें",
     "deletePledgeMsg": "क्या आप वाकई इस प्रतिज्ञा को हटाना चाहते हैं?",
-    "noPledges": "कोई प्रतिज्ञा नहीं मिली"
+    "noPledges": "कोई प्रतिज्ञा नहीं मिली",
+    "sort": "क्रमबद्ध करें",
+    "searchVolunteer": "स्वयंसेवक द्वारा खोजें",
+    "highestAmount": "सबसे अधिक राशि",
+    "lowestAmount": "सबसे कम राशि",
+    "latestEndDate": "नवीनतम समाप्ति तिथि",
+    "earliestEndDate": "सबसे प्रारंभिक समाप्ति तिथि"
   },
   "orgPost": {
     "title": "पदों",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -533,7 +533,13 @@
     "deletePledgeMsg": "¿Estás seguro de que quieres eliminar este compromiso?",
     "no": "No",
     "yes": "Sí",
-    "noPledges": "No se encontraron compromisos"
+    "noPledges": "No se encontraron compromisos",
+    "sort": "Ordenar",
+    "searchVolunteer": "Buscar por voluntario",
+    "highestAmount": "Cantidad más alta",
+    "lowestAmount": "Cantidad más baja",
+    "latestEndDate": "Fecha de finalización más reciente",
+    "earliestEndDate": "Fecha de finalización más cercana"
   },
 
   "orgPost": {

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -395,7 +395,13 @@
     "amount": "数量",
     "editPledge": "编辑承诺",
     "deletePledgeMsg": "您确定要删除此承诺吗？",
-    "noPledges": "未找到承诺"
+    "noPledges": "未找到承诺",
+    "sort": "排序",
+    "searchVolunteer": "按志愿者搜索",
+    "highestAmount": "最高金额",
+    "lowestAmount": "最低金额",
+    "latestEndDate": "最新结束日期",
+    "earliestEndDate": "最早结束日期"
   },
   "orgPost": {
     "title": "帖子",

diff --git a/src/GraphQl/Mutations/PledgeMutation.ts b/src/GraphQl/Mutations/PledgeMutation.ts
@@ -52,10 +52,12 @@ export const UPDATE_PLEDGE = gql`
     $currency: Currency
     $startDate: Date
     $endDate: Date
+    $users: [ID!]
   ) {
     updateFundraisingCampaignPledge(
       id: $id
       data: {
+        users: $users
         amount: $amount
         currency: $currency
         startDate: $startDate

diff --git a/src/GraphQl/Queries/fundQueries.ts b/src/GraphQl/Queries/fundQueries.ts
@@ -47,8 +47,8 @@ export const FUND_CAMPAIGN = gql`
 `;
 
 export const FUND_CAMPAIGN_PLEDGE = gql`
-  query GetFundraisingCampaignById($id: ID!) {
-    getFundraisingCampaignById(id: $id) {
+  query GetFundraisingCampaignById($id: ID!, $orderBy: PledgeOrderByInput) {
+    getFundraisingCampaignById(id: $id, orderBy: $orderBy) {
       startDate
       endDate
       pledges {
@@ -60,6 +60,8 @@ export const FUND_CAMPAIGN_PLEDGE = gql`
         users {
           _id
           firstName
+          lastName
+          image
         }
       }
     }

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
@@ -2,11 +2,6 @@
   margin: 0.6rem 0;
 }
 
-.createPledgeBtn {
-  position: absolute;
-  top: 1.3rem;
-  right: 2rem;
-}
 .container {
   min-height: 100vh;
 }
@@ -16,15 +11,24 @@
   margin-top: 2vh;
   margin-left: 13vw;
 }
+
 .titlemodal {
-  color: var(--bs-gray-600);
+  color: #707070;
   font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid var(--bs-primary);
+  font-size: 32px;
   width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
 .greenregbtn {
   margin: 1rem 0 0;
   margin-top: 15px;
@@ -51,3 +55,73 @@
   align-items: center;
   flex-direction: column;
 }
+
+.btnsContainer {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.inputField {
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdown {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.TableImage {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+.volunteerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1rem 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: 0.35rem;
+  background-color: #31bb6b33;
+}
+
+.noOutline input {
+  outline: none;
+}