[Outreachy Task Submission] - Added confirmation messages and a complete button when posts are added to collections

apps/web-mzima-client/src/app/settings/categories/create/create.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { CategoriesService } from '@mzima-client/sdk';
+import { NotificationService } from '@services';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-create',
@@ -10,7 +12,12 @@ import { CategoriesService } from '@mzima-client/sdk';
 export class CreateComponent {
   public isFormOnSubmit: boolean;
 
-  constructor(private categoriesService: CategoriesService, private router: Router) {}
+  constructor(
+    private categoriesService: CategoriesService,
+    private router: Router,
+    private notificationService: NotificationService,
+    private translate: TranslateService,
+  ) {}
 
   public createCategory(category: any): void {
     this.isFormOnSubmit = true;
@@ -21,6 +28,11 @@ export class CreateComponent {
         this.router.navigate(['settings/categories']);
       },
       error: ({ error }) => {
+        if (error.errors[0].status === 404) {
+          this.notificationService.showError(
+            this.translate.instant('An error occured, please try again'),
+          );
+        }
         this.categoriesService.categoryErrors.next(error.errors.failed_validations);
         this.isFormOnSubmit = false;
       },

apps/web-mzima-client/src/app/settings/general/general.component.ts

@@ -113,25 +113,69 @@ export class GeneralComponent implements OnInit {
         .pipe(
           mergeMap((newImage: any) => {
             this.siteConfig.image_header = newImage.result.original_file_url;
+            console.log(newImage.result.original_file_url);
+            console.log(this.updateSettings());
             return this.updateSettings();
           }),
         )
         .subscribe({
           complete: () => {
             this.loader.hide();
             this.submitted = false;
+            this.notificationService.showError('save successful');
+
+            this.notificationService.showSnackbar(
+              {
+                // icon: {
+                //   color: 'success',
+                //   name: 'thumb-up',
+                // },
+                title: 'notify.export.upload_complete',
+                buttons: [
+                  {
+                    color: 'primary',
+                    text: 'notify.export.confirmation',
+                  },
+                ],
+              },
+              {
+                duration: 0,
+                wide: true,
+              },
+            );
+            // alert('uploaded');
           },
           error: (error) => {
             this.loader.hide();
             this.submitted = false;
             this.notificationService.showError(error.message);
+            alert('error');
           },
         });
     } else {
       this.updateSettings().subscribe({
         complete: () => {
           this.submitted = false;
           this.loader.hide();
+          this.notificationService.showSnackbar(
+            {
+              icon: {
+                color: 'success',
+                name: 'thumb-up',
+              },
+              title: 'Deployment settings updated successfully',
+              buttons: [
+                {
+                  color: 'primary',
+                  text: 'notify.export.confirmation',
+                },
+              ],
+            },
+            {
+              duration: 3000,
+              wide: false,
+            },
+          );
         },
         error: (error) => {
           this.submitted = false;

apps/web-mzima-client/src/app/shared/components/collections/collections.component.html

@@ -93,6 +93,10 @@
         </app-collection-item>
       </div>
     </div>
+
+    <mat-dialog-actions align="end">
+      <mzima-client-button (buttonClick)="closeModal()"> Done </mzima-client-button>
+    </mat-dialog-actions>
   </ng-container>
 </ng-container>
 

apps/web-mzima-client/src/app/shared/components/collections/collections.component.ts

@@ -14,6 +14,8 @@ import {
   PostResult,
   AccountNotificationsInterface,
 } from '@mzima-client/sdk';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { AlertService } from 'libs/sdk/src/lib/services/alerts.service';
 import { BaseComponent } from '../../../base.component';
 import { ConfirmModalService } from '../../../core/services/confirm-modal.service';
 import { Permissions } from '@enums';
@@ -60,6 +62,7 @@ export class CollectionsComponent extends BaseComponent implements OnInit {
     private router: Router,
     private rolesService: RolesService,
     private notificationsService: NotificationsService,
+    private alertService: AlertService,
   ) {
     super(sessionService, breakpointService);
     this.checkDesktop();
@@ -169,8 +172,10 @@ export class CollectionsComponent extends BaseComponent implements OnInit {
   onCheckChange(isChecked: boolean, item: CollectionResult) {
     if (isChecked) {
       this.collectionsService.addToCollection(item.id, this.post.id).subscribe();
+      this.alertService.showMessage(`Post added to the ${item.name} collection`);
     } else {
       this.collectionsService.removeFromCollection(item.id, this.post.id).subscribe();
+      this.alertService.showMessage(`Post removed from the ${item.name} collection`);
     }
   }
 

apps/web-mzima-client/src/env.json

@@ -1,6 +1,6 @@
 {
   "production": true,
-  "backend_url": "https://mzima-dev-api.staging.ush.zone/",
+  "backend_url": "http://localhost:8080",
   "api_v3": "api/v3/",
   "api_v5": "api/v5/",
   "mapbox_api_key": "pk.eyJ1IjoidXNoYWhpZGkiLCJhIjoiY2lxaXUzeHBvMDdndmZ0bmVmOWoyMzN6NiJ9.CX56ZmZJv0aUsxvH5huJBw",

libs/sdk/src/lib/services/alerts.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+// import { SnackbarComponent, SnackbarData } from '../../shared/components';
+
+export interface SnackbarOptions extends MatSnackBarConfig {
+  wide?: boolean;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AlertService {
+  constructor(public snackBar: MatSnackBar) {}
+
+  showError(message: string) {
+    this.snackBar.open(message, 'Close', { panelClass: ['error'], duration: 3000 });
+  }
+
+  showMessage(message: string) {
+    this.snackBar.open(message, 'Close', {
+      panelClass: ['success'],
+      duration: 2000,
+      verticalPosition: 'top',
+      horizontalPosition: 'right',
+    });
+  }
+}