Added popup message on availability change

backend/apiRouter.php

@@ -193,7 +193,8 @@ function apiRouter (FastRoute\RouteCollector $r) {
             if(!$users->hasRole(Role::FULL_VIEWER) && $_POST["id"] !== $users->auth->getUserId()){
                 exit;
             }
-            logger("Disponibilità cambiata in ".($_POST["available"] ? '"disponibile"' : '"non disponibile"'), is_numeric($_POST["id"]) ? $_POST["id"] : $users->auth->getUserId(), $users->auth->getUserId());
+            $user_id = is_numeric($_POST["id"]) ? $_POST["id"] : $users->auth->getUserId();
+            logger("Disponibilità cambiata in ".($_POST["available"] ? '"disponibile"' : '"non disponibile"'), $user_id);
             apiResponse([
                 "response" => $db->update(
                     DB_PREFIX.'_profiles',
@@ -201,9 +202,11 @@ function apiRouter (FastRoute\RouteCollector $r) {
                         'available' => $_POST['available'], 'availability_last_change' => 'manual'
                     ],
                     [
-                        'id' => is_numeric($_POST["id"]) ? $_POST["id"] : $users->auth->getUserId()
+                        'id' => $user_id
                     ]
-                )
+                ),
+                "updated_user" => $user_id,
+                "updated_user_name" => $users->getName($user_id)
             ]);
         }
     );

frontend/package-lock.json

@@ -22,6 +22,7 @@
         "bootstrap": "^5.1.3",
         "jwt-decode": "^3.1.2",
         "ngx-bootstrap": "^7.1.2",
+        "ngx-toastr": "^14.2.1",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -7861,6 +7862,19 @@
         "@angular/forms": "^11.0.0 || ^12.0.0"
       }
     },
+    "node_modules/ngx-toastr": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-14.2.1.tgz",
+      "integrity": "sha512-1Kq//y8tTgglUYKHIziZwpo4R7fe4/neidcxfbAXzXtcViSjT4Z21Vgqn/inoBlwoc7E9qXQDuZoJr2lanCgGA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=12.0.0-0",
+        "@angular/core": ">=12.0.0-0",
+        "@angular/platform-browser": ">=12.0.0-0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -18361,6 +18375,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "ngx-toastr": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-14.2.1.tgz",
+      "integrity": "sha512-1Kq//y8tTgglUYKHIziZwpo4R7fe4/neidcxfbAXzXtcViSjT4Z21Vgqn/inoBlwoc7E9qXQDuZoJr2lanCgGA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

frontend/package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^5.1.3",
     "jwt-decode": "^3.1.2",
     "ngx-bootstrap": "^7.1.2",
+    "ngx-toastr": "^14.2.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

frontend/src/app/_components/list/list.component.ts

@@ -2,7 +2,9 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { TableComponent } from '../table/table.component';
 import { ModalAvailabilityScheduleComponent } from '../modal-availability-schedule/modal-availability-schedule.component';
 import { ApiClientService } from 'src/app/_services/api-client.service';
+import { ToastrService } from 'ngx-toastr';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { AuthService } from 'src/app/_services/auth.service';
 
 @Component({
   selector: 'app-list',
@@ -13,13 +15,21 @@ export class ListComponent implements OnInit {
   scheduleModalRef?: BsModalRef;
   @ViewChild('table') table!: TableComponent;
 
-  constructor(private api: ApiClientService, private modalService: BsModalService) {}
+  constructor(
+    private api: ApiClientService,
+    private auth: AuthService,
+    private toastr: ToastrService,
+    private modalService: BsModalService
+  ) {}
 
   changeAvailibility(available: 0|1, id?: number|undefined) {
     this.api.post("availability", {
       id: id,
       available: available
     }).then((response) => {
+      let changed_user_msg = parseInt(response.updated_user) === parseInt(this.auth.profile.auth_user_id) ? "La tua disponibilità" : `La disponibilità di ${response.updated_user_name}`;
+      let msg = available === 1 ? `${changed_user_msg} è stata impostata con successo.` : `${changed_user_msg} è stata rimossa con successo.`;
+      this.toastr.success(msg);
       this.table.loadTableData();
     });
   }

frontend/src/app/app.module.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
+import { ToastrModule } from 'ngx-toastr';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
@@ -38,9 +40,16 @@ import { TrainingsComponent } from './_components/trainings/trainings.component'
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
+    ToastrModule.forRoot({
+      progressBar: true,
+      easeTime: 300,
+      timeOut: 2500,
+      positionClass: 'toast-bottom-right'
+    }),
     ModalModule.forRoot(),
     TooltipModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {

frontend/src/styles.scss

@@ -2,6 +2,7 @@
 
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~@fortawesome/fontawesome-free/css/all.css";
+@import '~ngx-toastr/toastr';
 
 .fa {
   vertical-align: middle;