feat: Added notification service

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.7.0"
+version = "0.7.5"
 description = "Commandos is a multi git repo client"
 authors = [ "Dominik Schenk" ]
 license = ""

src/app/app.component.html

@@ -23,3 +23,6 @@
 </div>
 <app-commander-modal *ngIf="commanderModalService.open"></app-commander-modal>
 <commandos-update-modal *ngIf="hasUpdate" [update]="update" (close)="closeUpdate()"></commandos-update-modal>
+<div class="commandos-notification-container">
+    <commandos-notification></commandos-notification>
+</div>

src/app/app.component.scss

@@ -4,6 +4,7 @@
     padding: 2px 5px;
     border-radius: 3px;
     cursor: pointer;
+
     &:hover {
         background-color: rgba(0, 0, 0, 0.1);
     }
@@ -18,39 +19,52 @@
 .commander-layout {
     height: 100vh;
     overflow: hidden;
+
     .commander-header {
         background: var(--cds-global-color-blue-900);
         color: var(--cds-global-color-gray-0);
         height: var(--commander-header-height);
         flex-grow: initial;
         border-left: 1px solid var(--cds-global-color-blue-900);
         border-right: 1px solid var(--cds-global-color-blue-900);
+
         &.dev {
             background: var(--cds-global-color-red-900);
             border-left: 1px solid var(--cds-global-color-red-900);
             border-right: 1px solid var(--cds-global-color-red-900);
         }
     }
+
     .commander-navigation {
         border-left: 1px solid var(--cds-alias-object-border-color);
         border-right: 1px solid var(--cds-alias-object-border-color);
     }
+
     .commander-global-content {
         border-bottom: 1px solid var(--cds-alias-object-border-color);
         border-left: 1px solid var(--cds-alias-object-border-color);
         border-right: 1px solid var(--cds-alias-object-border-color);
     }
+
     .commander-footer {
         height: var(--commander-footer-height);
         flex-grow: initial;
         border-bottom: 1px solid var(--cds-alias-object-border-color);
         border-left: 1px solid var(--cds-alias-object-border-color);
         border-right: 1px solid var(--cds-alias-object-border-color);
     }
+
     .commander-scrollable-content {
         overflow-y: auto;
         justify-content: start;
         align-items: start;
         height: 100%;
     }
 }
+
+
+.commandos-notification-container {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+}

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { ErrorService, GitService, LoggerService, StoreService, TauriService } f
 import { environment } from '@env/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { CommanderModalService, CommanderService, ICommand } from '@shared/services';
+import { listen } from '@tauri-apps/api/event';
 import { UpdateResult } from '@tauri-apps/api/updater';
 
 @Component({
@@ -58,8 +59,15 @@ export class AppComponent {
         this.registerSettingsCommand();
         this.registerNewRepoCommand();
 
+        listen<UpdateResult>("tauri://update-available", (res) => {
+            console.log(`TCL: ~ file: app.component.ts ~ line 63 ~ AppComponent ~ load ~ res`, res);
+
+        });
+
         this.update = await this.tauriService.checkUpdate();
+        console.log(`TCL: ~ file: app.component.ts ~ line 68 ~ AppComponent ~ load ~ this.update`, this.update);
         this.hasUpdate = this.update.shouldUpdate;
+
     }
 
     closeUpdate() {

src/app/shared/components/header/header.component.html

@@ -57,6 +57,9 @@
         <div (click)="goto('/settings')" cds-text="secondary" cds-layout="p:sm" class="clickable contextmenu-action">
             Settings
         </div>
+        <div (click)="checkUpdate()" cds-text="secondary" cds-layout="p:sm" class="clickable contextmenu-action">
+            Check for updates
+        </div>
         <cds-divider></cds-divider>
         <div (click)="goto('/about')" cds-text="secondary" cds-layout="p:sm" class="clickable contextmenu-action">
             About

src/app/shared/components/header/header.component.ts

@@ -1,3 +1,4 @@
+import { NotificationService } from './../notification/notification.service';
 import { environment } from '@env/environment';
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { Router } from '@angular/router';
@@ -18,7 +19,8 @@ export class HeaderComponent implements OnInit {
         public errorService: ErrorService,
         public tauriService: TauriService,
         private cd: ChangeDetectorRef,
-        private router: Router
+        private router: Router,
+        private notificationService: NotificationService
     ) {
     }
 
@@ -62,4 +64,14 @@ export class HeaderComponent implements OnInit {
         this.router.navigate([page]);
         this.isMenuOpen = false;
     }
+
+    async checkUpdate() {
+        try {
+            await this.tauriService.checkUpdate();
+        } catch {
+            this.isMenuOpen = false;
+            this.notificationService.addNotification('info', 'Commandos ist up to date :-D', 5000);
+        }
+    }
+
 }

src/app/shared/components/notification/notification.component.html

@@ -0,0 +1,9 @@
+<ng-container *ngFor="let notification of notificationService.notifications">
+
+
+    <cds-alert-group [status]="notification.type" type="banner">
+        <cds-alert closable (closeChange)="notificationService.removeNotification(notification)">
+            {{notification.message}}
+        </cds-alert>
+    </cds-alert-group>
+</ng-container>

src/app/shared/components/notification/notification.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/notification/notification.component.ts

@@ -0,0 +1,18 @@
+import { NotificationService } from './notification.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'commandos-notification',
+    templateUrl: './notification.component.html',
+    styleUrls: ['./notification.component.scss']
+})
+export class NotificationComponent implements OnInit {
+
+    constructor(
+        public notificationService: NotificationService
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+}

src/app/shared/components/notification/notification.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  let service: NotificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/components/notification/notification.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+
+type NotificationType = 'success' | 'error' | 'info' | 'warning';
+type Notification = { type: NotificationType, message: string };
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotificationService {
+
+    notifications = new Set<Notification>();
+
+    constructor() { }
+
+
+    // add a notification with a status and a message
+    addNotification(status: NotificationType, message: string, timer: number = 5000) {
+        const notification: Notification = { type: status, message: message };
+
+        this.notifications.add(notification);
+
+        if (timer) {
+            setTimeout(() => {
+                this.notifications.delete(notification);
+            }, timer);
+        }
+    }
+
+    removeNotification(notification: Notification) {
+        this.notifications.delete(notification);
+    }
+}

src/app/shared/shared.module.ts

@@ -1,3 +1,4 @@
+import { NotificationComponent } from './components/notification/notification.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -46,6 +47,7 @@ const components = [
     BranchAheadBehindComponent,
     SelectHintComponent,
     UpdateModalComponent,
+    NotificationComponent,
     // Diff
     DiffComponent,
     DiffLineByLineComponent,