Add a file command bar and show file picker conditionally

src/app/checklists/checklists.component.html

@@ -1,17 +1,28 @@
 <div class="container">
   <div class="leftbar">
+    <checklist-command-bar
+        (newFile)="onNewFile()"
+        (openFile)="onOpenFile()"
+        (uploadFile)="onUploadFile()"
+        (downloadFile)="onDownloadFile()"
+    />
     <checklist-file-picker
-      (fileSelected)="onFileSelected($event)" />
+        #filePicker
+        (fileSelected)="onFileSelected($event)"
+        (cancel)="onOpenFileCancel()"
+        [fileNames]="store.listChecklistFiles()"
+        [style.display]="showFilePicker ? '' : 'none'"
+    />
     <checklist-tree
-      #tree
-      class="checklist-tree"
-      (checklistSelected)="items.checklist = $event"
-      (checklistStructureChanged)="onStructureChanged($event)"
-      />
+        #tree
+        class="checklist-tree"
+        (checklistSelected)="items.checklist = $event"
+        (checklistStructureChanged)="onStructureChanged($event)"
+    />
   </div>
   <checklist-items
-    #items
-    class="checklist-items"
-    (checklistChanged)="onChecklistChanged($event)"
+      #items
+      class="checklist-items"
+      (checklistChanged)="onChecklistChanged($event)"
   />
 </div>

src/app/checklists/checklists.component.ts

@@ -2,13 +2,15 @@ import { Component, ViewChild } from '@angular/core';
 import { Checklist, ChecklistFile } from '../../../gen/ts/checklist';
 import { ChecklistStorage } from '../../model/storage/checklist-storage';
 import { ChecklistTreeComponent } from './checklist-tree/checklist-tree.component';
+import { ChecklistCommandBarComponent } from './command-bar/command-bar.component';
 import { ChecklistFilePickerComponent } from './file-picker/file-picker.component';
 import { ChecklistItemsComponent } from './items-list/items-list.component';
 
 @Component({
   selector: 'app-checklists',
   standalone: true,
   imports: [
+    ChecklistCommandBarComponent,
     ChecklistFilePickerComponent,
     ChecklistItemsComponent,
     ChecklistTreeComponent
@@ -19,19 +21,71 @@ import { ChecklistItemsComponent } from './items-list/items-list.component';
 export class ChecklistsComponent {
   private _selectedFile?: ChecklistFile;
   @ViewChild("tree") tree?: ChecklistTreeComponent;
+  @ViewChild("filePicker") filePicker?: ChecklistFilePickerComponent;
+
+  showFilePicker: boolean = false;
 
   constructor(public store: ChecklistStorage) { }
 
+  onNewFile() {
+    this.showFilePicker = false;
+
+    let name = prompt("Enter a name for the new file:");
+    if (!name) {
+      return;
+    }
+
+    // Save an empty file with that name.
+    let file: ChecklistFile = {
+      name: name,
+      groups: [],
+    };
+    this.store.saveChecklistFile(file);
+    this._displayFile(file);
+  }
+
+  onOpenFile() {
+    this.showFilePicker = true;
+  }
+
+  onOpenFileCancel() {
+    this.showFilePicker = false;
+  }
+
+  onUploadFile() {
+    this.showFilePicker = false;
+
+    window.alert('TODO');
+  }
+
+  onDownloadFile() {
+    this.showFilePicker = false;
+
+    window.alert('TODO');
+  }
+
   onFileSelected(id: string) {
+    this.showFilePicker = false;
+
     let file: ChecklistFile | undefined;
     if (id) {
       let loadedFile = this.store.getChecklistFile(id);
       if (loadedFile) {
         file = loadedFile;
       }
     }
+    this._displayFile(file);
+
+    // TODO: Add filename to topbar, add rename pencil there
+  }
+
+  private _displayFile(file?: ChecklistFile) {
     this._selectedFile = file;
     this.tree!.file = file;
+    if (file) {
+      // Make the file selected the next time the picker gets displayed
+      this.filePicker!.selectedFile = file.name;
+    }
   }
 
   onStructureChanged(file: ChecklistFile) {

src/app/checklists/command-bar/command-bar.component.html

@@ -0,0 +1,27 @@
+<div class="command-bar">
+  <button
+      mat-icon-button
+      aria-label="New file"
+      (click)="newFile.emit(true)">
+    <mat-icon fontIcon="note_add" />
+  </button>
+  <button
+      mat-icon-button
+      aria-label="Open file"
+      (click)="openFile.emit(true)">
+    <mat-icon fontIcon="folder_open" />
+  </button>
+  <!-- TODO: Rename, delete file? -->
+  <button
+      mat-icon-button
+      aria-label="Upload file"
+      (click)="uploadFile.emit(true)">
+    <mat-icon fontIcon="upload" />
+  </button>
+  <button
+      mat-icon-button
+      aria-label="Download file"
+      (click)="downloadFile.emit(true)">
+    <mat-icon fontIcon="download" />
+  </button>
+</div>

src/app/checklists/command-bar/command-bar.component.scss

@@ -0,0 +1,3 @@
+.command-bar {
+    padding: 10px;
+}

src/app/checklists/command-bar/command-bar.component.spec.ts

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

src/app/checklists/command-bar/command-bar.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'checklist-command-bar',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+  ],
+  templateUrl: './command-bar.component.html',
+  styleUrl: './command-bar.component.scss'
+})
+export class ChecklistCommandBarComponent {
+  @Output() newFile = new EventEmitter<boolean>();
+  @Output() openFile = new EventEmitter<boolean>();
+  @Output() uploadFile = new EventEmitter<boolean>();
+  @Output() downloadFile = new EventEmitter<boolean>();
+}

src/app/checklists/file-picker/file-picker.component.html

@@ -1,20 +1,15 @@
-<mat-form-field class="container">
-  <mat-label>Select checklist file</mat-label>
-  <mat-select
-      [(value)]="selectedFile"
-      (selectionChange)="onFileSelected()">
-    <mat-option
-        *ngFor="let file of store.listChecklistFiles()"
-        value="{{file}}">
-      {{file}}
-    </mat-option>
-    <mat-option value="new">
-      <mat-icon fontIcon="library_add" />
-      Create new file
-    </mat-option>
-    <mat-option value="upload">
-      <mat-icon fontIcon="upload" />
-      Upload new file
-    </mat-option>
-  </mat-select>
-</mat-form-field>
+<div class="container">
+  <mat-form-field class="dropdown">
+    <mat-label>Select checklist file</mat-label>
+    <mat-select
+        [(value)]="selectedFile"
+        (selectionChange)="fileSelected.emit(selectedFile)">
+      <mat-option
+          *ngFor="let file of fileNames"
+          value="{{file}}">
+        {{file}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <!-- TODO: Cancel button -->
+</div>

src/app/checklists/file-picker/file-picker.component.scss

@@ -1,4 +1,8 @@
 .container {
-  width: 300px;
-  padding-top: 20px;
+  width: 100%;
+  display: flex;
+}
+
+.dropdown {
+  flex-grow: 1;
 }

src/app/checklists/file-picker/file-picker.component.ts

@@ -1,9 +1,7 @@
 import { NgFor } from '@angular/common';
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
-import { ChecklistFile } from '../../../../gen/ts/checklist';
-import { ChecklistStorage } from '../../../model/storage/checklist-storage';
 
 @Component({
   selector: 'checklist-file-picker',
@@ -17,43 +15,8 @@ import { ChecklistStorage } from '../../../model/storage/checklist-storage';
   styleUrl: './file-picker.component.scss'
 })
 export class ChecklistFilePickerComponent {
+  @Input() fileNames? : string[];
+  @Input() selectedFile = '';
   @Output() fileSelected = new EventEmitter<string>();
-  selectedFile = '';
-
-  constructor(public store: ChecklistStorage) { }
-
-  onFileSelected() {
-    if (this.selectedFile === 'new') {
-      this.onNewFile();
-    } else if (this.selectedFile === 'upload') {
-      this.onUploadFile();
-    } else {
-      this.loadFile();
-    }
-  }
-
-  private loadFile() {
-    this.fileSelected.emit(this.selectedFile);
-  }
-
-  onNewFile() {
-    let name = prompt("Enter a name for the new file:");
-    if (name) {
-      // Save an empty file with that name.
-      let file: ChecklistFile = {
-        name: name,
-        groups: [],
-      };
-      this.store.saveChecklistFile(file);
-      this.selectedFile = name;
-    } else {
-      // TODO: Doesn't unselect the New File item if ESC is pressed (vs cancelling)
-      this.selectedFile = '';
-    }
-    this.loadFile();
-  }
-
-  onUploadFile() {
-    // TODO
-  }
+  @Output() cancel = new EventEmitter<boolean>();
 }