Changeset 6738cc0 for src/Clients/Angular/finki-chattery

Timestamp:

01/19/22 19:14:27 (2 years ago)

Author:

Стојков Марко <mst@…>

Branches:

dev

Parents:

f3c4950

Message:

Added notifications

Location:

src/Clients/Angular/finki-chattery

Files:

• package-lock.json (modified) (1 diff)
• package.json (modified) (1 diff)
• src/app/core/services/auth.service.ts (modified) (1 diff)
• src/app/shared-app/components/generic/header/header.component.html (modified) (2 diffs)
• src/app/shared-app/components/generic/header/header.component.scss (modified) (1 diff)
• src/app/shared-app/components/generic/header/header.component.ts (modified) (2 diffs)
• src/app/shared-app/models/user.models.ts (modified) (2 diffs)
• src/app/shared-app/services/base-api.service.ts (modified) (2 diffs)
• src/app/shared-app/shared-app.module.ts (modified) (3 diffs)

src/Clients/Angular/finki-chattery/package-lock.json

@@ -7801 +7801 @@
       }
     },
+    "ngx-pipes": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/ngx-pipes/-/ngx-pipes-2.7.6.tgz",
+      "integrity": "sha512-FAeMd1mI8jCnnrhUuNLXs+PaVT1ujhA0QD3KRBDuzGFcbnP7NMXR2EJ5KYbV39LDNuRCluhpfwZudQu/NvrVuA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-toastr": {
       "version": "13.2.1",

src/Clients/Angular/finki-chattery/package.json

@@ -33 +33 @@
     "ng2-file-upload": "^1.4.0",
     "ngx-material-timepicker": "^5.5.3",
+    "ngx-pipes": "^2.7.6",
     "ngx-toastr": "^13.2.1",
     "oidc-client": "^1.11.5",

src/Clients/Angular/finki-chattery/src/app/core/services/auth.service.ts

@@ -107 +107 @@
     });
   }
+
+  public studentCheckedNotifications(): Observable<void> {
+    return this.baseApi.post('v1/students/checked-notifications');
+  }
 }

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.html

@@ -19 +19 @@
       'header-student-questions' | translate
     }}</app-button>
+    <app-button
+      matBadge="{{ auth.selfUser?.student?.notifications?.length }}"
+      matBadgeHidden="{{ studentCheckedNotifications || auth.selfUser?.student?.notifications?.length === 0 }}"
+      [matMenuTriggerFor]="notificationMenu"
+      class="margin-y-xs"
+      *ngIf="auth.isStudent()"
+      (click)="studentCheckedNotificationsClick()"
+      [buttonType]="ButtonType.Basic"
+    >
+      <mat-icon>notifications</mat-icon>
+    </app-button>
     <app-button class="margin-y-xs" *ngIf="auth.isLoggedIn()" (action)="logout()" [buttonType]="ButtonType.Basic">{{
       'header-logout' | translate
@@ -34 +45 @@
   </button>
 </mat-menu>
+
+<mat-menu #notificationMenu="matMenu">
+  <div (click)="goToQuestion(q.questionUid)" mat-menu-item *ngFor="let q of auth.selfUser?.student?.notifications">
+    {{ q?.text }} <span class="time-ago">{{ q?.createdOn | timeAgo }}</span>
+  </div>
+</mat-menu>

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.scss

@@ -14 +14 @@
   }
 }
+
+::ng-deep.mat-menu-panel {
+  max-width: none !important;
+}

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.ts

@@ -11 +11 @@
 export class HeaderComponent implements OnInit {
   ButtonType = ButtonType;
+
+  public studentCheckedNotifications = false;
 
   constructor(public auth: AuthService, private router: Router) {}
@@ -36 +38 @@
     this.router.navigateByUrl(`questioning/${questionUid}`);
   }
+
+  studentCheckedNotificationsClick(): void {
+    if (!this.studentCheckedNotifications) {
+      this.auth.studentCheckedNotifications().subscribe();
+    }
+    this.studentCheckedNotifications = true;
+  }
 }

src/Clients/Angular/finki-chattery/src/app/shared-app/models/user.models.ts

@@ +1 @@
+import * as moment from 'moment';
+
 export class ApplicationUser {
   constructor(
@@ -30 +32 @@
   public questions!: StudentQuestionResponse[];
   public teams!: StudentTeamResponse[];
+  public notifications!: StudentNotificationResponse[];
+}
+
+export class StudentNotificationResponse {
+  public uid!: string;
+  public createdOn!: moment.Moment;
+  public questionUid!: string;
+  public text!: string;
+
+  constructor(uid: string, createdOn: moment.Moment, questionUid: string, text: string) {
+    this.uid = uid;
+    this.createdOn = createdOn;
+    this.questionUid = questionUid;
+    this.text = text;
+  }
 }
 

src/Clients/Angular/finki-chattery/src/app/shared-app/services/base-api.service.ts

@@ -4 +4 @@
 
 import { environment } from '@env/environment';
-import { SelfUserResponse } from '../models';
+import { SelfUserResponse, StudentNotificationResponse } from '../models';
+import { map } from 'rxjs/operators';
+import * as moment from 'moment';
 
 @Injectable({
@@ -19 +21 @@
 
   public getSelfUser(): Observable<SelfUserResponse> {
-    return this.get<SelfUserResponse>('v1/self');
+    return this.get<SelfUserResponse>('v1/self').pipe(
+      map((x) => {
+        if (x.student) {
+          x.student.notifications = x.student.notifications.map(
+            (y) => new StudentNotificationResponse(y.uid, moment(y.createdOn), y.questionUid, y.text)
+          );
+        }
+
+        return x;
+      })
+    );
   }
 

src/Clients/Angular/finki-chattery/src/app/shared-app/shared-app.module.ts

@@ -14 +14 @@
 import { SERVICES } from './services/services';
 import { PIPES } from './pipes/pipes';
+import { NgPipesModule } from 'ngx-pipes';
 
 @NgModule({
@@ -27 +28 @@
     FileUploadModule,
     NgxMaterialTimepickerModule,
-    EditorModule
+    EditorModule,
+    NgPipesModule
   ],
   exports: [
@@ -41 +43 @@
     PIPES,
     SharedMaterialModule,
-    EditorModule
+    EditorModule,
+    NgPipesModule
   ]
 })