[log-selection] add add-to-favorites funcionality

Author: loukaspd

changelog.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [0.2.2] PENDING
 
 ### Added
+- **[Packages]:** addsdb package
+- **[log-selection]:** add add-to-favorites funcionality
 
 ### Changed
 - **[app-window]:** moves app window to the center of the screen

package.json

@@ -80,9 +80,11 @@
     "node": ">=10.9.0"
   },
   "dependencies": {
+    "@types/pouchdb": "^6.4.0",
     "electron-log": "^4.2.2",
     "electron-updater": "^4.1.2",
     "ng-zorro-antd": "^8.3.1",
-    "node-powershell": "^4.0.0"
+    "node-powershell": "^4.0.0",
+    "pouchdb": "^7.2.2"
   }
 }

src/app/components/event-logs-management-dialog/log-selection/log-selection.component.html

@@ -23,7 +23,13 @@
     [nzLoading]="loading"
 >
     <ng-template #itemRef let-item>
-        <li nz-list-item [nzActions]="[deleteAction, selectAction]" [nzContent]="item.log + ' ('+ item.entries +')'" nzNoFlex></li>
+        <li nz-list-item [nzActions]="[favorite, deleteAction, selectAction]" [nzContent]="item.log + ' ('+ item.entries +')'" nzNoFlex></li>
+        <ng-template #favorite>
+            <img 
+            (click)="UiOnFavoriteClicked(item)" 
+            [src]="item.isFavorite ? './assets/icons/star-filled.png': './assets/icons/star-empty.png'"
+            style="width: 20px; height: 20px;"/>
+        </ng-template>
         <ng-template #deleteAction><a (click)="UiOnRemoveItemClicked(item)" style="color: #E89999;">remove</a></ng-template>
         <ng-template #selectAction><a (click)="UiOnItemSelected(item)">select</a></ng-template>
     </ng-template>

src/app/components/event-logs-management-dialog/log-selection/log-selection.component.ts

@@ -7,6 +7,8 @@ import { map, debounceTime } from 'rxjs/operators';
 import { PowershellCommands } from '../../../services/powershell/powershell-commands';
 import { GlobalUtils } from '../../../services/global-utils';
 import { AppLogger } from '../../../services/AppLogger';
+import { AppDatabase } from '../../../services/AppDatabase';
+import { DbEventLog } from '../../../types/database/DbEventLog';
 //#endregion imports
 
 @Component({
@@ -32,6 +34,7 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
 
     public loading: boolean= true;
     private _logers: EventLog[] = [];
+    private _dbLoggers: DbEventLog[] = [];
     public logers: EventLog[] = [];
     private _searchValue: string = '';
     public remoteComputer: string = '';
@@ -40,6 +43,7 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
 
     //#region Component Methods
     ngOnInit(): void {
+        AppDatabase.getInstance().getAllLoggs().then(items => this._dbLoggers = items);
         this._search();
         this._setupSearch();
     }
@@ -76,7 +80,9 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
         this.loading = true;
         PowershellCommands.getEventLogs(this.remoteComputer)
         .then((evs: EventLog[]) => {
-            this._logers = evs;
+            this._logers = evs
+                .map(logger => this._dbLoggers.find(dbLogger => dbLogger.IsSame(logger)) || logger)
+                .sort((it1, it2) => it1.isFavorite == it2.isFavorite ? 0 : (it1.isFavorite ? -1 : 1));
             this.loading = false;
             this._applyFiltering();
         })
@@ -145,6 +151,25 @@ export class LogSelectionComponent implements OnInit, OnDestroy {
             });
         });
     }
-    //#endregion UiCallbacks
+
+    public UiOnFavoriteClicked(item: EventLog): void {
+        const dbItem = new DbEventLog(item);
+        dbItem.isFavorite = !item.isFavorite;
+        
+        AppDatabase
+            .getInstance()
+            .upsertItem(dbItem)
+            .then((res :boolean) => {
+                if (!res) return;
+
+                item.isFavorite = !item.isFavorite;
+                if (this._dbLoggers.find(dbLogger => dbLogger.IsSame(dbItem)) == null) {
+                    this._dbLoggers.push(dbItem);
+                }
+                else {
+                    this._dbLoggers = this._dbLoggers.map(logger => logger.IsSame(dbItem) ? dbItem : logger);
+                }
+            });
+    }
 
 }

src/app/services/AppDatabase.ts

@@ -0,0 +1,61 @@
+import { AppLogger } from "./AppLogger";
+import { DbEventLog } from "../types/database/DbEventLog";
+
+//import PouchDB from 'pouchdb';
+//const PouchDB = require('pouchdb').default;
+import PouchDB from 'pouchdb';
+
+export class AppDatabase {
+    //#region Singleton
+    private static _instance;
+    public static getInstance(): AppDatabase {
+        if (this._instance == null) this._instance = new AppDatabase();
+        return this._instance;
+    }
+
+    private constructor() {
+        this._db = new PouchDB('DbEventLog');
+    }
+    //#endregion Singleton
+
+
+    //#region Properties
+    private _db: PouchDB.Database;
+    //#endregion Properties
+
+
+    //#region Public Api
+    public upsertItem(item: any) : Promise<boolean> {
+        return this._db
+            .get(item._id)
+            .catch(e => {
+                if (e.status == 404) return null 
+                throw e;
+            })
+            .then(existingItem => {
+                if (existingItem) {
+                    item._rev = existingItem._rev;
+                }
+                return this._db.put(item);
+            })
+            .then(res => true)
+            .catch(e => {
+                AppLogger.getDebug().logErrorMessage(`Error while executing upsertItem. ItemData:\n${JSON.stringify(item)}`);
+                AppLogger.getDebug().logError(e);
+                return false;
+            });
+    }
+
+
+    public getAllLoggs(): Promise<DbEventLog[]> {
+        return this._db
+            .allDocs({include_docs: true})
+            .then(res => res.rows.map(row => new DbEventLog(row.doc)))
+            .catch(e => {
+                AppLogger.getDebug().logErrorMessage(`Error while executing getAllLoggs`);
+                AppLogger.getDebug().logError(e);
+                return [];
+            });
+    }
+    //#endregion Public Api
+}

src/app/types/EventLog.ts

@@ -3,6 +3,18 @@ export class EventLog {
 
     public log: string;
     public entries: number;
+    public friendlyName: string;
+    public isFavorite: boolean;
+
+    constructor(instance? :EventLog) {
+        if (instance != null) {
+            this.computerName = instance.computerName;
+            this.log = instance.log;
+            this.entries = instance.entries;
+            this.friendlyName = instance.friendlyName;
+            this.isFavorite = instance.isFavorite;
+        }
+    }
 
     //#region Ui Methods
     public UiTabLabel(): string {

src/app/types/database/DbEventLog.ts

@@ -0,0 +1,15 @@
+import { EventLog } from "../EventLog";
+
+export class DbEventLog extends EventLog {
+    public _id: string;
+
+    constructor(instance? :any) {
+        super(instance);
+        this.setId();
+    }
+
+
+    public setId(): void {
+        this._id = `${this.log}#${this.computerName || ''}`;
+    }
+}

src/assets/icons/star-empty.png

@@ -8,6 +8,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
+    "allowSyntheticDefaultImports": true,
     "typeRoots": [
       "node_modules/@types"
     ],