Merge pull request #59 from eiladin/feat/replace-link-editor

feat: replace link editor
eiladin · Oct 9, 2021 · f8becda · f8becda
2 parents 35abb71 + 69fe5cb
commit f8becda
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 70 deletions.
diff --git a/ui/src/app/config/config-link/config-link.component.html b/ui/src/app/config/config-link/config-link.component.html
diff --git a/ui/src/app/config/config-link/config-link.component.scss b/ui/src/app/config/config-link/config-link.component.scss
diff --git a/ui/src/app/config/config-link/config-link.component.ts b/ui/src/app/config/config-link/config-link.component.ts
diff --git a/ui/src/app/config/config.module.ts b/ui/src/app/config/config.module.ts
@@ -9,6 +9,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTableModule } from '@angular/material/table'
 import { ResponsiveModule } from 'ngx-responsive';
 import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
 import { NgxPageScrollModule } from 'ngx-page-scroll';
@@ -18,7 +19,6 @@ import { ConfigComponent } from './config/config.component';
 import { ConfigService } from './services/config.service';
 import { ConfigRoutingModule } from './config.routes';
 import { ConfigSiteComponent } from './config-site/config-site.component';
-import { ConfigLinkComponent } from './config-link/config-link.component';
 
 @NgModule({
   imports: [
@@ -33,12 +33,13 @@ import { ConfigLinkComponent } from './config-link/config-link.component';
     MatListModule,
     MatSlideToggleModule,
     MatSnackBarModule,
+    MatTableModule,
     MatToolbarModule,
     ResponsiveModule.forRoot(),
     NgxPageScrollCoreModule,
     NgxPageScrollModule,
   ],
-  declarations: [ConfigComponent, ConfigSiteComponent, ConfigLinkComponent],
+  declarations: [ConfigComponent, ConfigSiteComponent],
   providers: [ConfigService]
 })
 export class ConfigModule { }
diff --git a/ui/src/app/config/config/config.component.html b/ui/src/app/config/config/config.component.html
@@ -25,25 +25,47 @@
                 </mat-form-field>
             </mat-card>
 
-            <h3 class="mat-subheading-1">Links</h3>
-            <mat-accordion>
-                <mat-expansion-panel *ngFor="let link of config.links">
-                    <mat-expansion-panel-header>
-                        <mat-panel-title>
-                            {{link.name || 'Unknown'}}
-                        </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <app-config-link [link]="link"></app-config-link>
-                    <mat-action-row>
-                        <button mat-button color="warn" (click)="deleteLink(link)">Delete</button>
-                    </mat-action-row>
-                </mat-expansion-panel>
-            </mat-accordion>
+            <br />
+
             <div class="actions">
                 <span class="spacer"></span>
                 <button mat-button color="primary" (click)="addLink()">Add Link</button>
             </div>
 
+            <table mat-table [dataSource]="linkTableDataSource">
+                <ng-container [matColumnDef]="col" *ngFor="let col of linkTableColumns">
+                    <th mat-header-cell *matHeaderCellDef> 
+                        <span *ngIf="col !== 'isEdit'">
+                            {{col}} 
+                        </span>
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <div [ngSwitch]="linkTableDataSchema[col]" *ngIf="!element.isEdit">
+                          <div class="btn-edit" *ngSwitchCase="'isEdit'" >
+                            <button mat-button class="button-remove" (click)="deleteLink(element)">Delete</button>
+                            <button mat-button (click)="element.isEdit = !element.isEdit">Edit</button>
+                          </div>
+                          <span *ngSwitchDefault>
+                            {{element[col.toLowerCase()]}}
+                          </span>
+                        </div>
+                        <div *ngIf="element.isEdit">
+                          <div class="btn-edit" *ngIf="col === 'isEdit'; else dataField">
+                            <button mat-button (click)="element.isEdit = !element.isEdit">Done</button>
+                          </div>
+                          <ng-template #dataField>
+                            <mat-form-field>
+                              <mat-label>{{col}}</mat-label>
+                              <input [type]="linkTableDataSchema[col]" matInput [(ngModel)]="element[col.toLowerCase()]">
+                            </mat-form-field>
+                          </ng-template>
+                        </div>
+                      </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="linkTableColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: linkTableColumns;"></tr>
+            </table>
+
             <h3 class="mat-subheading-1">Sites</h3>
             <mat-accordion>
                 <mat-expansion-panel *ngFor="let site of config.sites; let i = index" hideToggle>

diff --git a/ui/src/app/config/config/config.component.scss b/ui/src/app/config/config/config.component.scss
@@ -42,6 +42,10 @@
     }
 }
 
+table {
+    width: 100%;
+}
+
 .network-name {
     display: flex;
     flex: 1 1 100%;

diff --git a/ui/src/app/config/config/config.component.ts b/ui/src/app/config/config/config.component.ts
@@ -7,6 +7,8 @@ import { Link } from '../../shared/models/link.model';
 import { Site } from '../../shared/models/site.model';
 import { ConfigService } from '../services/config.service';
 import { PageScrollInstance, PageScrollService, EasingLogic } from 'ngx-page-scroll-core';
+// import { threadId } from 'worker_threads';
+
 @Component({
   selector: 'app-config',
   templateUrl: './config.component.html',
@@ -28,6 +30,14 @@ export class ConfigComponent implements OnInit {
    */
   public panelOpenState = [];
 
+  public linkTableDataSource;
+  public linkTableColumns: string[] = ['Name', 'URI', 'isEdit']
+  public linkTableDataSchema = {
+    "Name": "text",
+    "URI": "text",
+    "isEdit": "isEdit"
+  }
+
   @ViewChild('cardContainer')
   public cardContainer: ElementRef;
 
@@ -76,10 +86,12 @@ export class ConfigComponent implements OnInit {
       for (let site of this.config.sites) {
         this.panelOpenState.push(false);
       }
+      this.linkTableDataSource = this.config.links;
     });
   }
 
   public saveConfig() {
+    this.config.links = this.linkTableDataSource;
     this.configService.save(this.config).subscribe();
   }
 
@@ -100,7 +112,8 @@ export class ConfigComponent implements OnInit {
    */
   public addLink() {
     const link = new Link();
-    this.config.links.push(link);
+    link["isEdit"] = true;
+    this.linkTableDataSource = [link, ...this.linkTableDataSource];
   }
 
   public addSite() {
@@ -109,8 +122,9 @@ export class ConfigComponent implements OnInit {
   }
 
   public deleteLink(link: Link) {
-    const idx = this.config.links.indexOf(link);
-    this.config.links.splice(idx, 1);
+    this.linkTableDataSource = this.linkTableDataSource.filter(u => {      
+      return u !== link;
+    })
   }
 
   public deleteSite(site: Site) {