feat(frontend model):

- in the VolunteerViews when the mouse go over "REPORTED" appears the justification - modify the "REPORTED" button in tje AdminActivitiesView related issues: #146 #147
socialsoftware · Jul 13, 2024 · 28b303d · 28b303d
1 parent b95f264
commit 28b303d
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 16 deletions.
diff --git a/frontend/src/views/admin/AdminActivitiesView.vue b/frontend/src/views/admin/AdminActivitiesView.vue
@@ -34,6 +34,7 @@
         <v-chip
           v-if="item.state === 'REPORTED'"
           class="clickable"
+          color="blue"
           data-cy="reportedButton"
           @click="openReportsDialog(item)"
         >

diff --git a/frontend/src/views/volunteer/VolunteerActivitiesView.vue b/frontend/src/views/volunteer/VolunteerActivitiesView.vue
@@ -26,6 +26,25 @@
             {{ theme.completeName }}
           </v-chip>
         </template>
+        <template v-slot:[`item.state`]="{ item }">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-chip
+                v-if="item.state === 'REPORTED'"
+                class="mouseover"
+                @mouseover="showJustification(item)"
+                @mouseleave="hideJustification(item)"
+                v-on="on"
+              >
+                {{ item.state }}
+              </v-chip>
+              <v-chip v-else>
+                {{ item.state }}
+              </v-chip>
+            </template>
+            <span v-html="formattedJustification(item.justification)"></span>
+          </v-tooltip>
+        </template>
         <template v-slot:[`item.action`]="{ item }">
           <v-tooltip v-if="item.state === 'APPROVED' && canReport(item)" bottom>
             <template v-slot:activator="{ on }">
@@ -40,7 +59,10 @@
             </template>
             <span>Report Activity</span>
           </v-tooltip>
-          <v-tooltip v-if="item.state === 'REPORTED' && canUnReport(item)" bottom>
+          <v-tooltip
+            v-if="item.state === 'REPORTED' && canUnReport(item)"
+            bottom
+          >
             <template v-slot:activator="{ on }">
               <v-icon
                 class="mr-2 action-button"
@@ -353,7 +375,6 @@ export default class VolunteerActivitiesView extends Vue {
     );
   }
 
-
   async unReportActivity(activity: Activity) {
     const index = this.reports.findIndex(
       (r: Report) => r.activityId == activity.id,
@@ -362,9 +383,7 @@ export default class VolunteerActivitiesView extends Vue {
 
     if (activity.id !== null) {
       try {
-        const result = await RemoteServices.validateActivity(
-          activity.id,
-        );
+        const result = await RemoteServices.validateActivity(activity.id);
         this.activities = this.activities.filter((a) => a.id !== activity.id);
         this.activities.unshift(result);
       } catch (error) {
@@ -381,9 +400,33 @@ export default class VolunteerActivitiesView extends Vue {
       }
     }
     this.currentReport = null;
-   
+  }
+
+  async showJustification(activity: Activity) {
+    const index = this.reports.findIndex(
+      (r: Report) => r.activityId == activity.id,
+    );
+    this.currentReport = this.reports[index];
+
+    if (this.currentReport) {
+      this.$set(activity, 'justification', this.currentReport.justification);
+      this.$set(activity, 'showJustification', true);
+    }
+  }
+
+  async hideJustification(activity: Activity) {
+    this.$set(activity, 'showJustification', false);
+  }
+
+  formattedJustification(justification: String) {
+    if (!justification) return '';
+    return justification.replace(/(.{20})/g, '$1<br>');
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mouseover {
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/views/volunteer/VolunteerEnrollmentsView.vue b/frontend/src/views/volunteer/VolunteerEnrollmentsView.vue
@@ -26,6 +26,25 @@
             {{ theme.completeName }}
           </v-chip>
         </template>
+        <template v-slot:[`item.state`]="{ item }">
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-chip
+                v-if="item.state === 'REPORTED'"
+                class="mouseover"
+                @mouseover="showJustification(item)"
+                @mouseleave="hideJustification(item)"
+                v-on="on"
+              >
+                {{ item.state }}
+              </v-chip>
+              <v-chip v-else>
+                {{ item.state }}
+              </v-chip>
+            </template>
+            <span v-html="formattedJustification(item.justification)"></span>
+          </v-tooltip>
+        </template>
         <template v-slot:[`item.action`]="{ item }">
           <v-tooltip v-if="item.state === 'APPROVED' && canReport(item)" bottom>
             <template v-slot:activator="{ on }">
@@ -40,7 +59,10 @@
             </template>
             <span>Report Activity</span>
           </v-tooltip>
-          <v-tooltip v-if="item.state === 'REPORTED' && canUnReport(item)" bottom>
+          <v-tooltip
+            v-if="item.state === 'REPORTED' && canUnReport(item)"
+            bottom
+          >
             <template v-slot:activator="{ on }">
               <v-icon
                 class="mr-2 action-button"
@@ -163,7 +185,6 @@ import ParticipationDialog from '@/views/volunteer/ParticipationDialog.vue';
 import ReportDialog from '@/views/volunteer/ReportDialog.vue';
 import Report from '@/models/report/Report';
 
-
 @Component({
   components: {
     'assessment-dialog': AssessmentDialog,
@@ -194,7 +215,6 @@ export default class VolunteerEnrollmentsView extends Vue {
   currentReport: Report | null = null;
   createReportDialog: boolean = false;
 
-
   headers: object = [
     {
       text: 'Name',
@@ -480,7 +500,6 @@ export default class VolunteerEnrollmentsView extends Vue {
     );
   }
 
-
   async unReportActivity(activity: Activity) {
     const index = this.reports.findIndex(
       (r: Report) => r.activityId == activity.id,
@@ -489,9 +508,7 @@ export default class VolunteerEnrollmentsView extends Vue {
 
     if (activity.id !== null) {
       try {
-        const result = await RemoteServices.validateActivity(
-          activity.id,
-        );
+        const result = await RemoteServices.validateActivity(activity.id);
         this.activities = this.activities.filter((a) => a.id !== activity.id);
         this.activities.unshift(result);
       } catch (error) {
@@ -508,9 +525,33 @@ export default class VolunteerEnrollmentsView extends Vue {
       }
     }
     this.currentReport = null;
-   
+  }
+
+  async showJustification(activity: Activity) {
+    const index = this.reports.findIndex(
+      (r: Report) => r.activityId == activity.id,
+    );
+    this.currentReport = this.reports[index];
+
+    if (this.currentReport) {
+      this.$set(activity, 'justification', this.currentReport.justification);
+      this.$set(activity, 'showJustification', true);
+    }
+  }
+
+  async hideJustification(activity: Activity) {
+    this.$set(activity, 'showJustification', false);
+  }
+
+  formattedJustification(justification: String) {
+    if (!justification) return '';
+    return justification.replace(/(.{20})/g, '$1<br>');
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mouseover {
+  cursor: pointer;
+}
+</style>