[#24] create edit file item modal

CLIENT/CLIENT.FileSharing/src/app/file-items/shared/dialogs/edit-file-item-modal/edit-file-item-modal.component.html

@@ -0,0 +1,20 @@
+<h2 mat-dialog-title>{{ name() ? "Edit Folder" : "Create Folder" }}</h2>
+<mat-dialog-content class="dialog-content">
+  @if (action() !== EnFileAction.ChangeColor) {
+    <mat-form-field>
+      <mat-label>Name</mat-label>
+      <input matInput [(ngModel)]="name" />
+      @if (action() !== EnFileAction.Rename) {
+        <mat-icon matSuffix (click)="$event.stopPropagation(); testIt()"
+          >palette</mat-icon
+        >
+      }
+    </mat-form-field>
+  }
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onCancel()">Cancel</button>
+  <button mat-button [mat-dialog-close]="[name(), color()]" cdkFocusInitial>
+    Ok
+  </button>
+</mat-dialog-actions>

CLIENT/CLIENT.FileSharing/src/app/file-items/shared/dialogs/edit-file-item-modal/edit-file-item-modal.component.scss

@@ -0,0 +1,4 @@
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+}

CLIENT/CLIENT.FileSharing/src/app/file-items/shared/dialogs/edit-file-item-modal/edit-file-item-modal.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { EditFileItemModalComponent } from './edit-file-item-modal.component';
+
+describe('EditFileItemModalComponent', () => {
+  let component: EditFileItemModalComponent;
+  let fixture: ComponentFixture<EditFileItemModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditFileItemModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditFileItemModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

CLIENT/CLIENT.FileSharing/src/app/file-items/shared/dialogs/edit-file-item-modal/edit-file-item-modal.component.ts

@@ -0,0 +1,53 @@
+import { Component, inject, model, OnInit } from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FileItemEditModel } from '../../file-item-edit.model';
+import { EnFileAction } from '../../file-action-type.enum';
+
+@Component({
+  selector: 'fs-edit-file-item-modal',
+  templateUrl: './edit-file-item-modal.component.html',
+  styleUrl: './edit-file-item-modal.component.scss',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+  ],
+})
+export class EditFileItemModalComponent implements OnInit {
+  readonly dialogRef = inject(MatDialogRef<EditFileItemModalComponent>);
+  readonly data = inject<FileItemEditModel>(MAT_DIALOG_DATA);
+  readonly name = model(this.data.name);
+  readonly color = model(this.data.color);
+  readonly action = model(this.data.action);
+
+  EnFileAction = EnFileAction;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  testIt() {}
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+}