build: Add build process for newgui (#7351)

next-gen-gui/src/app/lists/folder-list/folder-list.component.html

@@ -0,0 +1,32 @@
+<mat-form-field>
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
+</mat-form-field>
+<table mat-table class="full-width-table" matSort aria-label="Folders" multiTemplateDataRows>
+    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
+        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+        <td mat-cell *matCellDef="let folder"> {{folder[column]}} </td>
+    </ng-container>
+    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+    <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let folder" [attr.colspan]="displayedColumns.length">
+            <div class="table-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
+                <div class="detail-items">
+                    <span>Shared with: </span>
+                    <span class="item-name" *ngFor="let device of folder.devices">{{device.name}}</span>
+                </div>
+            </div>
+        </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="table-row"
+        [class.expanded-row]="expandedFolder === folder"
+        (click)="expandedFolder = expandedFolder === folder ? null : folder">
+    </tr>
+    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
+</table>
+
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
+    [pageSizeOptions]="[25, 50, 100, 250]">
+</mat-paginator>

next-gen-gui/src/app/lists/folder-list/folder-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FolderListComponent } from './folder-list.component';
+import { HttpClientModule } from '@angular/common/http';
+import { ChangeDetectorRef } from '@angular/core';
+
+describe('FolderListComponent', () => {
+  let component: FolderListComponent;
+  let fixture: ComponentFixture<FolderListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FolderListComponent],
+      imports: [HttpClientModule],
+      providers: [FolderListComponent, ChangeDetectorRef]
+    })
+      .compileComponents();
+
+    component = TestBed.inject(FolderListComponent);
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

next-gen-gui/src/app/lists/folder-list/folder-list.component.ts

@@ -0,0 +1,102 @@
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
+
+import Folder from '../../folder';
+import { SystemConfigService } from '../../services/system-config.service';
+import { FilterService } from 'src/app/services/filter.service';
+import { StType } from 'src/app/type';
+import { MatInput } from '@angular/material/input';
+import { FolderService } from 'src/app/services/folder.service';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-folder-list',
+  templateUrl: './folder-list.component.html',
+  styleUrls: ['../status-list/status-list.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
+})
+export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatTable) table: MatTable<Folder>;
+  @ViewChild(MatInput) input: MatInput;
+  dataSource: MatTableDataSource<Folder>;
+
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = [
+    "id",
+    "label",
+    "path",
+    "state"
+  ];
+
+  expandedFolder: Folder | null;
+
+  constructor(
+    private folderService: FolderService,
+    private filterService: FilterService,
+    private cdr: ChangeDetectorRef,
+  ) {
+  };
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.filterService.previousInputs.set(StType.Folder, filterValue);
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  ngOnInit() {
+    this.dataSource = new MatTableDataSource();
+    this.dataSource.data = [];
+
+    // Replace all data when requests are finished
+    this.folderService.foldersUpdated$.subscribe(
+      folders => {
+        this.dataSource.data = folders;
+      }
+    );
+
+    // Add device as they come in 
+    let folders: Folder[] = [];
+    this.folderService.folderAdded$.subscribe(
+      folder => {
+        folders.push(folder);
+        this.dataSource.data = folders;
+      }
+    );;
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+    this.table.dataSource = this.dataSource;
+
+    const changeText = (text: string) => {
+      this.dataSource.filter = text.trim().toLowerCase();
+      this.input.value = text;
+      this.cdr.detectChanges();
+    }
+
+    // Set previous value
+    changeText(this.filterService.previousInputs.get(StType.Folder));
+
+    // Listen for filter changes from other components
+    this.filterService.filterChanged$
+      .subscribe(
+        input => {
+          if (input.type === StType.Folder) {
+            changeText(input.text);
+          }
+        });
+  }
+
+  ngOnDestroy() { }
+}