feat: add view rules on report component

les-projets-cagnottes · Oct 28, 2023 · 4ca9f21 · 4ca9f21
1 parent 05faab4
commit 4ca9f21
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 90 deletions.
diff --git a/src/app/app/budgets/budgets.component.html b/src/app/app/budgets/budgets.component.html
@@ -12,7 +12,7 @@ <h3 class="card-title" i18n="@@budgets">Budgets</h3>
             </a>
         </div>
     </div>
-    <div class="card-body p-0">
+    <div class="card-body p-0 table-responsive">
         <table class="table table-striped projects">
             <thead>
                 <tr>
@@ -155,7 +155,7 @@ <h4 class="modal-title pull-left" i18n="@@editBudget">Edit budget</h4>
                 </div>
             </div>
             <div class="form-group">
-                <label for="rules">Rules</label>
+                <label for="rules" i18n="@@budgetsRules">Rules</label>
                 <select class="custom-select" class="form-control" style="width: 100%;" formControlName="rules"
                     id="rules">
                     <option *ngFor="let item of rules | keyvalue" value="{{ item.key }}">{{ item.value.name }}</option>

diff --git a/src/app/app/projects/list/list-projects.component.ts b/src/app/app/projects/list/list-projects.component.ts
@@ -117,8 +117,9 @@ export class ListProjectsComponent implements OnInit {
             var projectCampaigns = data.filter(campaign => campaign.project.id === project.id);
             var projectTotalDonations = projectCampaigns.reduce((sum, current) => sum + current.totalDonations, 0);
             var projectDonationsRequired = projectCampaigns.reduce((sum, current) => {
+              console.log(current.status + " : " + current.totalRequired);
               if (current.status != CampaignStatus.FAILED) {
-                return sum + current.donationsRequired
+                return sum + current.totalRequired
               } else {
                 return sum
               }

diff --git a/src/app/app/report/report.component.html b/src/app/app/report/report.component.html
@@ -1,13 +1,19 @@
 <div class="row action-bar" [formGroup]="selectBudgetForm">
-    <div class="col-2">
+    <div class="col-md-2">
         <div class="form-group">
             <label for="amount" i18n="@@budget">Budget</label>
             <select class="form-control" style="width: 100%;" formControlName="budget">
                 <option *ngFor="let budget of budgets; index as i" value="{{ budget.id }}">{{ budget.name }}</option>
             </select>
         </div>
     </div>
-    <div class="col-10">
+    <div class="col-md-2">
+        <div class="form-group">
+            <label for="amount" i18n="@@reportRulesLabel">Rules</label>
+            <button type="button" class="btn btn-block btn-default" (click)="onViewTermsOfUse(viewRulesModalTemplate)" i18n="@@reportRulesButton">View rules</button>
+        </div>
+    </div>
+    <div class="col-md-8">
         <div id="budgetUsage" class="progress-group">
             <span class="progress-text" i18n="@@usageOverview">Usage overview</span>
             <div class="progress" title="{{ budgetUsage }}">
@@ -54,7 +60,7 @@ <h3 class="card-title" i18n="@@campaigns">Campaigns</h3>
                             <td><span *ngIf="projects.get(campaign.project.id) !== undefined">{{
                                     getProject(campaign.project.id).peopleGivingTimeRef.length }} / 3</span></td>
                             <td>{{ campaign.totalDonations.toFixed(2) }} €</td>
-                            <td>{{ campaign.donationsRequired.toFixed(2) }} €</td>
+                            <td>{{ campaign.totalRequired.toFixed(2) }} €</td>
                             <td>
                                 <span *ngIf="campaign.status === 'IN_PROGRESS'" class="badge bg-yellow"
                                     i18n="@@reportStatusInProgress">In Progress</span>
@@ -191,4 +197,18 @@ <h3 class="card-title" i18n="@@reportAccountsState">Accounts State</h3>
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<ng-template #viewRulesModalTemplate>
+    <div class="modal-header">
+        <h4 class="modal-title pull-left">{{ rules.name }}</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="viewRulesModal.hide()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body" [innerHTML]="rules.value">
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" (click)="viewRulesModal.hide()" i18n="@@close">Close</button>
+    </div>
+</ng-template>
diff --git a/src/app/app/report/report.component.ts b/src/app/app/report/report.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
 import { UntypedFormBuilder } from '@angular/forms';
-import { Account, Budget, User } from 'src/app/_entities';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { Account, Budget, Content, User } from 'src/app/_entities';
 import { AccountModel, CampaignModel, DataPage, ProjectModel } from 'src/app/_models';
 import { Pager } from 'src/app/_models/pagination/pager/pager';
-import { AuthenticationService, BudgetService, OrganizationService, PagerService, ProjectService } from 'src/app/_services';
+import { AuthenticationService, BudgetService, ContentService, OrganizationService, PagerService, ProjectService } from 'src/app/_services';
 
 @Component({
   selector: 'app-report',
@@ -22,6 +23,10 @@ export class ReportComponent implements OnInit {
     budget: [0]
   });
 
+  // Rules Modal
+  viewRulesModal = new BsModalRef();
+  rules = new Content();
+
   // Campaigns Box
   private rawProjectsResponse = new DataPage<CampaignModel>();
   campaignPager = new Pager();
@@ -37,12 +42,14 @@ export class ReportComponent implements OnInit {
   accountsSyncStatus = 'idle';
 
   constructor(
+    private modalService: BsModalService,
+    private fb: UntypedFormBuilder,
     private authenticationService: AuthenticationService,
     private budgetService: BudgetService,
+    private contentService: ContentService,
     private organizationService: OrganizationService,
     private projectService: ProjectService,
-    private pagerService: PagerService,
-    private fb: UntypedFormBuilder) { }
+    private pagerService: PagerService) { }
 
   ngOnInit() {
     this.refresh();
@@ -56,7 +63,7 @@ export class ReportComponent implements OnInit {
       });
     this.selectBudgetForm.controls['budget'].valueChanges.subscribe(val => {
       const budgetFound = this.budgets.find(budget => budget.id === +val);
-      if(budgetFound !== undefined) {
+      if (budgetFound !== undefined) {
         this.budget = budgetFound;
         this.budgetUsage = this.computeNumberPercent(this.budget.totalDonations, this.authenticationService.currentOrganizationValue.membersRef.length * this.budget.amountPerMember) + "%";
         this.refreshCampaigns(this.campaignPager.currentPage);
@@ -69,32 +76,39 @@ export class ReportComponent implements OnInit {
     if (this.pagerService.canChangePage(this.campaignPager, page)) {
       this.campaignsSyncStatus = 'running';
       this.budgetService.getCampaigns(this.selectBudgetForm.controls['budget'].value, page - 1, this.campaignsPageSize)
-        .subscribe(response => {
-          this.rawProjectsResponse = response;
-          this.setCampaignsPage(page);
-          const projectIds: number[] = [];
-          this.pagedCampaigns.forEach(campaign => {
-            if(campaign.project.id > 0) {
-              projectIds.push(campaign.project.id);
-            }
-          });
-          this.projectService.getAllByIds(projectIds)
-            .subscribe(response => {
-              response.forEach(prj => this.projects.set(prj.id, prj))
-            },
-            error => {
-              console.log(error);
+        .subscribe({
+          next: (response) => {
+            this.rawProjectsResponse = response;
+            this.setCampaignsPage(page);
+            const projectIds: number[] = [];
+            this.pagedCampaigns.forEach(campaign => {
+              if (campaign.project.id > 0) {
+                projectIds.push(campaign.project.id);
+              }
             });
-          this.campaignsSyncStatus = 'success';
-          setTimeout(() => {
-            this.campaignsSyncStatus = 'idle';
-          }, 1000);
-        }, error => {
-          this.campaignsSyncStatus = 'error';
-          console.log(error);
-          setTimeout(() => {
-            this.campaignsSyncStatus = 'idle';
-          }, 1000);
+            this.projectService.getAllByIds(projectIds)
+              .subscribe({
+                next: (response) => response.forEach(prj => this.projects.set(prj.id, prj)),
+                complete: () => { },
+                error: error => {
+                  console.log(error);
+                }
+              });
+            this.campaignsSyncStatus = 'success';
+            setTimeout(() => {
+              this.campaignsSyncStatus = 'idle';
+            }, 1000);
+
+          },
+          complete: () => { },
+          error: error => {
+            this.campaignsSyncStatus = 'error';
+            console.log(error);
+            setTimeout(() => {
+              this.campaignsSyncStatus = 'idle';
+            }, 1000);
+
+          }
         });
     }
   }
@@ -147,7 +161,7 @@ export class ReportComponent implements OnInit {
 
   getProject(id: number): ProjectModel {
     let entity = this.projects.get(id);
-    if(entity === undefined) {
+    if (entity === undefined) {
       entity = new ProjectModel();
     }
     return entity;
@@ -159,4 +173,12 @@ export class ReportComponent implements OnInit {
     }
     return 100 * number / max;
   }
+
+  onViewTermsOfUse(template: TemplateRef<string>) {
+    this.contentService.getById(this.budget.rules.id)
+      .subscribe(content => {
+        this.rules = Content.fromModel(content);
+        this.viewRulesModal = this.modalService.show(template);
+      });
+  }
 }
diff --git a/src/locale/messages.fr.xlf b/src/locale/messages.fr.xlf
@@ -68,6 +68,9 @@
       <trans-unit id="costOfHour" datatype="html">
         <target>Coût d'une heure</target>
       </trans-unit>
+      <trans-unit id="budgetsRules" datatype="html">
+        <target>Règles d'utilisation</target>
+      </trans-unit>
       <trans-unit id="budgetFieldDisabled" datatype="html">
         <target> Certains champs ont été désactivés car le budget est déjà distribué entre les membres de l'organisation. </target>
       </trans-unit>
@@ -562,6 +565,12 @@
       <trans-unit id="userWhantToLeadRealOfIdea" datatype="html">
         <target>Je souhaite porter la réalisation de cette idée</target>
       </trans-unit>
+      <trans-unit id="reportRulesLabel" datatype="html">
+        <target>Règles associées</target>
+      </trans-unit>
+      <trans-unit id="reportRulesButton" datatype="html">
+        <target>Afficher les règles</target>
+      </trans-unit>
       <trans-unit id="usageOverview" datatype="html">
         <target>Utilisation</target>
       </trans-unit>