fix: database management BUG #29

package.json

@@ -28,6 +28,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@ngrx/component-store": "^14.3.1",
+    "@ngrx/effects": "^14.3.1",
+    "@ngrx/entity": "^14.3.1",
+    "@ngrx/router-store": "^14.3.1",
+    "@ngrx/store": "^14.3.1",
+    "@ngrx/store-devtools": "^14.3.1",
     "ace-builds": "^1.4.14",
     "ag-grid-angular": "^28.1.1",
     "ag-grid-community": "^28.1.1",

src/app/app.module.ts

@@ -24,6 +24,9 @@ import { LoadingCircleModule } from './components/loading-circle/loading-circle.
 import { DialogKioskComponent } from './pages/dialogs/dialog-kiosk/dialog-kiosk.component';
 // import { MatDialogModule } from '@angular/material/dialog';
 import { NgxUplotModule } from 'ngx-uplot';
+import { StoreModule } from '@ngrx/store';
+import { reducers, metaReducers } from './reducers';
+import { EffectsModule } from '@ngrx/effects';
 @NgModule({
     declarations: [
         AppComponent,
@@ -47,6 +50,10 @@ import { NgxUplotModule } from 'ngx-uplot';
         ChHelpModule,
         PopupTextModule,
         NgxUplotModule,
+        StoreModule.forRoot(reducers, {
+      metaReducers
+    }),
+        EffectsModule.forRoot([]),
         // MatDialogModule,
         // MatButtonModule,
     ],

src/app/components/login-form/login-form.component.html

@@ -25,9 +25,16 @@
                 <mat-grid-list cols="7" rowHeight="1:2">
                     <mat-grid-tile [colspan]="2">
                         <div class="flex-column">
-                            <mat-selection-list #dbServer [multiple]="false">
+                            <mat-selection-list
+                                #dbServer
+                                [multiple]="false"
+                            >
                                 <mat-list-option
-                                    *ngFor="let dbServer of dbItems"
+                                    *ngFor="
+                                        let dbServer of dbItems;
+                                        let k = index
+                                    "
+                                    [selected]="k == 0"
                                     [value]="dbServer"
                                     (click)="selectConnection()"
                                 >
@@ -129,15 +136,14 @@
                         mat-raised-button
                         (click)="isAccess = !isAccess"
                         cdkFocusInitial
-                        [disabled]="!checkIfHasOneConnect()"
                     >
                         cancel
                     </button>
                     <button
                         style="margin-right: 0.5rem"
                         mat-raised-button
                         (click)="testToConnect()"
-                        [disabled]="!(dbServer.selectedOptions.selected[0])"
+                        [disabled]="!dbServer.selectedOptions.selected[0]"
                         color="primary"
                         cdkFocusInitial
                     >
@@ -147,15 +153,20 @@
                         mat-raised-button
                         (click)="removeConnection()"
                         color="accent"
-                        [disabled]="!(dbServer.selectedOptions.selected[0])"
+                        [disabled]="!dbServer.selectedOptions.selected[0]"
                         cdkFocusInitial
                     >
                         Remove connection
                     </button>
                     <button
                         mat-raised-button
                         (click)="connectToDB()"
-                        [disabled]="!(dbServer.selectedOptions.selected[0] && checkIfHasOneConnect())"
+                        [disabled]="
+                            !(
+                                dbServer.selectedOptions.selected[0] &&
+                                checkIfHasOneConnect()
+                            )
+                        "
                         color="primary"
                         cdkFocusInitial
                     >

src/app/components/login-form/login-form.component.ts

@@ -42,20 +42,15 @@ export class LoginFormComponent implements OnInit, AfterViewInit {
             return (this.value.dbLink + '').match(rx)?.[0] || NEW_CONNECT;
         },
     };
-    @Input() settings: any = {
-        dbPassword: '',
-        dbLogin: '',
-        dbLink: ''
-    };
+    @Input() settings: any = {};
     inProcess = false;
     dbItems: any[] = [];
     _errorMessage: any = '';
     @Input() set errorMessage(val) {
         this.inProcess = false;
         this._errorMessage = val;
         if (!!val && this.dbItems?.length > 0) {
-            const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings.dbLink);
-            // console.log("successMessage", { val, dbItem });
+            const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings?.dbLink);
             if (dbItem) {
                 dbItem.value.isSucceeded = false;
                 setStorage('dbItems', this.dbItems);
@@ -73,8 +68,7 @@ export class LoginFormComponent implements OnInit, AfterViewInit {
         this.inProcess = false;
         this._successMessage = val;
         if (!!val && this.dbItems?.length > 0) {
-            const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings.dbLink);
-            // console.log("successMessage", { val, dbItem });
+            const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings?.dbLink);
             if (dbItem) {
                 dbItem.value.isSucceeded = true;
                 setStorage('dbItems', this.dbItems);
@@ -104,9 +98,13 @@ export class LoginFormComponent implements OnInit, AfterViewInit {
                 connect.value = Object.assign({}, connect.value, item.value);
                 this.dbItems.push(connect);
             })
+            // if (!this.settings) {
+                this.settings = this.dbItems[0];
+                this.cdr.detectChanges();
+            // }
         } else {
             const connect = shallowClone(this.emptyConnectionTemplate);
-            connect.value = Object.assign({}, connect.value, this.settings);
+            connect.value = Object.assign({}, connect.value, this.settings||{});
 
             this.dbItems = [connect];
             this.cdr.detectChanges();
@@ -121,18 +119,19 @@ export class LoginFormComponent implements OnInit, AfterViewInit {
         return b && c;
     }
     ngAfterViewInit() {
-        const c = () => {
-            const listItem = this.connectionList?.options?.find(
-                (connection: any) => connection?.value?.value?.dbLink === this.settings.dbLink
-            );
-            if (listItem) {
-                listItem.toggle();
-                this.cdr.detectChanges();
-            } else {
-                requestAnimationFrame(c)
-            }
-        }
-        requestAnimationFrame(c);
+            this.selectConnection();
+        // const c = () => {
+        //     const listItem = this.connectionList?.options?.find(
+        //         (connection: any) => connection?.value?.value?.dbLink === this.settings?.dbLink
+        //     );
+        //     if (listItem) {
+        //         listItem.toggle();
+        //         this.cdr.detectChanges();
+        //     } else {
+        //         requestAnimationFrame(c)
+        //     }
+        // }
+        // requestAnimationFrame(c);
     }
     hidePassword(str: string) {
         return Array.from({ length: (str + '').length }, () => '•').join('');
@@ -164,19 +163,31 @@ export class LoginFormComponent implements OnInit, AfterViewInit {
             this.cdr.detectChanges();
         })
     }
-    selectConnection() {
+    selectConnection(event?: any) {
+        console.log(event)
         // if (!this.connectionList?.selectedOptions?.selected?.[0]?.value?.value) {
         //     console.log(this.connectionList.options)
         //     this.connectionList.options.first.toggle();
         // }
-        this.settings = this.connectionList.selectedOptions.selected[0].value.value;
-        // console.log(this.settings);
-        this.cdr.detectChanges();
+        try {
+
+            this.settings = this.connectionList.selectedOptions.selected[0].value.value;
+            // console.log(this.settings);
+            this.cdr.detectChanges();
+        } catch (e) {
+            requestAnimationFrame(() => {
+                this.selectConnection(event);
+            })
+        }
     }
     removeConnection() {
         this.dbItems = this.dbItems.filter(
             connection => connection.viewValue !== this.connectionList.selectedOptions.selected[0].value.viewValue
         );
+        console.log(this.connectionList.options)
+        this.connectionList.options.first.toggle();
+        this.settings = this.dbItems[0];
+        this.selectConnection();
         this.cdr.detectChanges();
         this.changeDbList();
     }

src/app/pages/home.page/home.page.component.ts

@@ -40,7 +40,7 @@ export class HomePageComponent implements OnInit {
             return;
         }
 
-        if (this._selectedDB && this._selectedDB?.value?.dbLink !== val?.value?.dbLink) {
+        if (this._selectedDB?.value && this._selectedDB.value?.dbLink !== val?.value?.dbLink) {
             this._selectedDB = val;
             this.connectToDB(this._selectedDB.value);
             this.cdr.detectChanges();
@@ -108,8 +108,29 @@ export class HomePageComponent implements OnInit {
         }
     }
 
-    ngOnInit(): void {
+    checkDBList() {
+        const dbItems = getStorage('dbItems');
+        const AUTH_DATA: any = getStorage('AUTH_DATA');
+        if (AUTH_DATA && !dbItems.find((dbItem: any) => dbItem?.value?.dbLink === AUTH_DATA?.dbURL)) {
+            const rx = /[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/;
+            const temp = {
+                value: {
+                    dbLink: AUTH_DATA.dbURL,
+                    dbLogin: AUTH_DATA.login,
+                    dbPassword: AUTH_DATA.password,
+                    isSucceeded: true
+                },
+                viewValue: (AUTH_DATA.dbURL + '').match(rx)?.[0],
+            };
+
+            dbItems.push(temp);
+            setStorage('dbItems', dbItems);
+        }
 
+    }
+
+    ngOnInit(): void {
+        this.checkDBList();
 
         const auth: any = getParam.kiosk ? {
             dbURL: getParam.db_host,

src/app/reducers/db-list.ts

@@ -0,0 +1,45 @@
+import { createAction, createFeatureSelector, createReducer, createSelector, on, props } from '@ngrx/store';
+
+export const DB_KEY = 'DATA_BASE';
+
+export interface DBState {
+    count: number;
+    updatedAt?: number;
+}
+
+/** ACTIONS */
+export const add = createAction('[DATA_BASE] add');
+export const remove = createAction('[DATA_BASE] remove');
+export const update = createAction('[DATA_BASE] update');
+
+export const initialState: DBState = {
+    count: 0
+};
+
+/** REDUCERS */
+export const dbReducer = createReducer(
+    initialState,
+    on(add, state => ({
+        ...state,
+        count: state.count + 1
+    })),
+    on(remove, state => ({
+        ...state,
+        count: state.count - 1
+    })),
+    on(update, state => ({
+        ...state,
+        count: 0
+    }))
+);
+/** SELECTORS */
+export const featureSelector
+    = createFeatureSelector<DBState>(DB_KEY);
+export const countSelector = createSelector(
+    featureSelector,
+    state => state.count
+);
+export const updatedAtSelector = createSelector(
+    featureSelector,
+    state => state.updatedAt
+);

src/app/reducers/index.ts

@@ -0,0 +1,19 @@
+import {
+  ActionReducer,
+  ActionReducerMap,
+  createFeatureSelector,
+  createSelector,
+  MetaReducer
+} from '@ngrx/store';
+import { environment } from '../../environments/environment';
+
+export interface State {
+
+}
+
+export const reducers: ActionReducerMap<State> = {
+
+};
+
+
+export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];