Adds dialogs to create/edit

- user-groups
- mediafile-list

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -1,40 +1,11 @@
 <os-head-bar
     [mainButton]="canUploadFiles"
-    [editMode]="editFile"
     [multiSelectMode]="isMultiSelect"
     (mainEvent)="onMainEvent()"
-    (saveEvent)="onSaveEditedFile()"
 >
     <!-- Title -->
     <div class="title-slot">
-        <h2 *ngIf="!editFile" translate>Files</h2>
-
-        <form
-            class="edit-file-form"
-            *ngIf="editFile"
-            [formGroup]="fileEditForm"
-            (ngSubmit)="onSaveEditedFile()"
-            (keydown)="keyDownFunction($event)"
-        >
-            <mat-form-field>
-                <input
-                    type="text"
-                    matInput
-                    osAutofocus
-                    required
-                    formControlName="title"
-                    placeholder="{{ 'New file name' | translate }}"
-                />
-                <mat-error *ngIf="fileEditForm.invalid" translate>Required</mat-error>
-            </mat-form-field>
-
-            <mat-form-field>
-                <mat-select formControlName="hidden" placeholder="{{ 'Visibility' | translate }}">
-                    <mat-option [value]="true"> <span translate>Hidden</span> </mat-option>
-                    <mat-option [value]="false"><span translate>Visible</span></mat-option>
-                </mat-select>
-            </mat-form-field>
-        </form>
+        <h2 translate>Files</h2>
     </div>
 
     <!-- Menu -->
@@ -214,3 +185,47 @@
         </button>
     </div>
 </mat-menu>
+
+<ng-template #fileEditDialog>
+    <h1 mat-dialog-title>{{ 'Edit details for' | translate }}</h1>
+    <div class="os-form-card-mobile" mat-dialog-content>
+        <form
+            class="edit-file-form"
+            [formGroup]="fileEditForm"
+            (keydown)="keyDownFunction($event)"
+        >
+            <mat-form-field>
+                <input
+                    type="text"
+                    matInput
+                    osAutofocus
+                    required
+                    formControlName="title"
+                    placeholder="{{ 'New file name' | translate }}"
+                />
+                <mat-error *ngIf="fileEditForm.invalid" translate>Required</mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+                <mat-select formControlName="hidden" placeholder="{{ 'Visibility' | translate }}">
+                    <mat-option [value]="true"> <span translate>Hidden</span> </mat-option>
+                    <mat-option [value]="false"><span translate>Visible</span></mat-option>
+                </mat-select>
+            </mat-form-field>
+        </form>
+    </div>
+    <div mat-dialog-actions>
+        <button
+            type="submit"
+            mat-button
+            [disabled]="!fileEditForm.valid"
+            color="primary"
+            (click)="onSaveEditedFile(fileEditForm.value)"
+        >
+            <span translate>Save</span>
+        </button>
+        <button type="button" mat-button [mat-dialog-close]="null">
+            <span translate>Cancel</span>
+        </button>
+    </div>
+</ng-template>

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -33,12 +33,6 @@
     white-space: pre-line !important;
 }
 
-.edit-file-form {
-    mat-form-field + mat-form-field {
-        margin: 1em;
-    }
-}
-
 // duplicate. Put into own file
 .file-info-cell {
     display: grid;

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar, MatDialog } from '@angular/material';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -78,6 +78,12 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
     @ViewChild('fileEditForm')
     public fileEditForm: FormGroup;
 
+    /**
+     * Reference to the template
+     */
+    @ViewChild('fileEditDialog')
+    public fileEditDialog: TemplateRef<string>;
+
     /**
      * Constructs the component
      *
@@ -107,7 +113,9 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
         public vp: ViewportService,
         public filterService: MediafileFilterListService,
         public sortService: MediafilesSortListService,
-        private operator: OperatorService
+        private operator: OperatorService,
+        private dialog: MatDialog,
+        private fb: FormBuilder
     ) {
         super(titleService, translate, matSnackBar, repo, route, storage, filterService, sortService);
 
@@ -123,11 +131,6 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
         super.setTitle('Files');
         this.initTable();
 
-        this.fileEditForm = new FormGroup({
-            title: new FormControl('', Validators.required),
-            hidden: new FormControl()
-        });
-
         // Observe the logo actions
         this.mediaManage.getLogoActions().subscribe(action => {
             this.logoActions = action;
@@ -161,24 +164,31 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
     public onEditFile(file: ViewMediafile): void {
         this.fileToEdit = file;
 
-        this.editFile = true;
-        this.fileEditForm.setValue({ title: this.fileToEdit.title, hidden: this.fileToEdit.hidden });
+        this.fileEditForm = this.fb.group({
+            title: [file.title, Validators.required],
+            hidden: [file.hidden]
+        });
+
+        const dialogRef = this.dialog.open(this.fileEditDialog, {
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
+        });
+
+        dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => {
+            if (event.key === 'Enter' && event.shiftKey && this.fileEditForm.valid) {
+                this.onSaveEditedFile(this.fileEditForm.value);
+            }
+        });
     }
 
     /**
      * Click on the save button in edit mode
      */
-    public onSaveEditedFile(): void {
-        if (!this.fileEditForm.value || !this.fileEditForm.valid) {
-            return;
-        }
-        const updateData = new Mediafile({
-            title: this.fileEditForm.value.title,
-            hidden: this.fileEditForm.value.hidden
-        });
-
-        this.repo.update(updateData, this.fileToEdit).then(() => {
-            this.editFile = false;
+    public onSaveEditedFile(value: { title: string; hidden: any }): void {
+        this.repo.update(value, this.fileToEdit).then(() => {
+            this.dialog.closeAll();
         }, this.raiseError);
     }
 

client/src/app/site/users/components/group-list/group-list.component.html

@@ -1,26 +1,9 @@
-<os-head-bar [mainButton]="true" [nav]="false" [editMode]="editGroup"
-    (mainEvent)="setEditMode(!editGroup)" (saveEvent)="saveGroup()">
+<os-head-bar [mainButton]="true" [nav]="false"
+    (mainEvent)="setEditMode(!editGroup)">
     <!-- Title -->
     <div class="title-slot">
-        <h2 *ngIf="!editGroup && !newGroup" translate>Groups</h2>
-
-        <form *ngIf="editGroup" [formGroup]="groupForm" (ngSubmit)="saveGroup()" (keydown)="keyDownFunction($event)">
-            <mat-form-field>
-                <input type="text" matInput osAutofocus required formControlName="name"
-                    placeholder="{{ 'New group name' | translate}}">
-                <mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
-            </mat-form-field>
-        </form>
+        <h2 translate>Groups</h2>
     </div>
-
-    <!-- remove button button -->
-    <div class="extra-controls-slot on-transition-fade">
-        <button *ngIf="editGroup && !newGroup" type="button" mat-button (click)="deleteSelectedGroup()">
-            <mat-icon>delete</mat-icon>
-            <span translate>Delete</span>
-        </button>
-    </div>
-
 </os-head-bar>
 
 <div class="hint-text on-transition-fade">
@@ -67,3 +50,35 @@
         </div>
     </mat-expansion-panel>
 </mat-accordion>
+
+<ng-template #groupEditDialog>
+    <h1 mat-dialog-title>
+        <span>{{ 'New group name' | translate }}</span>
+    </h1>
+    <div class="os-form-card-mobile" mat-dialog-content>
+        <form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
+            <mat-form-field>
+                <input type="text" matInput osAutofocus required formControlName="name"
+                    placeholder="{{ 'New group name' | translate}}">
+                <mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
+            </mat-form-field>
+        </form>
+    </div>
+    <div mat-dialog-actions>
+        <button
+            type="submit"
+            mat-button
+            [disabled]="!groupForm.valid"
+            color="primary"
+            (click)="saveGroup(groupForm.value)"
+        >
+            <span translate>Save</span>
+        </button>
+        <button type="button" mat-button (click)="cancelEditing()">
+            <span translate>Cancel</span>
+        </button>
+        <button *ngIf="selectedGroup" type="button" mat-icon-button color="warn" (click)="deleteSelectedGroup()">
+            <mat-icon>delete</mat-icon>
+        </button>
+    </div>
+</ng-template>

client/src/app/site/users/components/group-list/group-list.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
-import { MatTableDataSource, MatSnackBar } from '@angular/material';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatTableDataSource, MatSnackBar, MatDialog } from '@angular/material';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 
 import { GroupRepositoryService, AppPermissions } from 'app/core/repositories/users/group-repository.service';
 import { ViewGroup } from '../../models/view-group';
@@ -47,6 +47,12 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
     @ViewChild('groupForm')
     public groupForm: FormGroup;
 
+    /**
+     * Reference to the template
+     */
+    @ViewChild('groupEditDialog')
+    public groupEditDialog: TemplateRef<string>;
+
     public get appPermissions(): AppPermissions[] {
         return this.repo.appPermissions;
     }
@@ -64,8 +70,10 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
         titleService: Title,
         protected translate: TranslateService, // protected required for ng-translate-extract
         matSnackBar: MatSnackBar,
+        private dialog: MatDialog,
         private repo: GroupRepositoryService,
-        private promptService: PromptService
+        private promptService: PromptService,
+        private fb: FormBuilder
     ) {
         super(titleService, translate, matSnackBar);
     }
@@ -79,19 +87,34 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
         this.editGroup = editMode;
         this.newGroup = newGroup;
 
-        if (!editMode) {
-            this.cancelEditing();
-        }
+        const name = this.selectedGroup ? this.selectedGroup.name : '';
+
+        this.groupForm = this.fb.group({
+            name: [name, Validators.required]
+        });
+
+        const dialogRef = this.dialog.open(this.groupEditDialog, {
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
+        });
+
+        dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => {
+            if (event.key === 'Enter' && event.shiftKey && this.groupForm.valid) {
+                this.saveGroup(this.groupForm.value);
+            }
+        });
     }
 
     /**
      * Creates or updates a group.
      */
-    public saveGroup(): void {
+    public saveGroup(value: { name: string }): void {
         if (this.editGroup && this.newGroup) {
-            this.submitNewGroup();
+            this.repo.create(value as Group).then(() => this.cancelEditing(), this.raiseError);
         } else if (this.editGroup && !this.newGroup) {
-            this.submitEditedGroup();
+            this.repo.update(value, this.selectedGroup).then(() => this.cancelEditing(), this.raiseError);
         }
     }
 
@@ -101,34 +124,6 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
     public selectGroup(group: ViewGroup): void {
         this.selectedGroup = group;
         this.setEditMode(true, false);
-        this.groupForm.setValue({ name: this.selectedGroup.name });
-    }
-
-    /**
-     * Saves a newly created group.
-     */
-    public submitNewGroup(): void {
-        if (!this.groupForm.value || !this.groupForm.valid) {
-            return;
-        }
-        this.repo.create(this.groupForm.value as Group).then(() => {
-            this.groupForm.reset();
-            this.cancelEditing();
-        }, this.raiseError);
-    }
-
-    /**
-     * Saves an edited group.
-     */
-    public submitEditedGroup(): void {
-        if (!this.groupForm.value || !this.groupForm.valid) {
-            return;
-        }
-        const updateData = new Group({ name: this.groupForm.value.name });
-
-        this.repo.update(updateData, this.selectedGroup).then(() => {
-            this.cancelEditing();
-        }, this.raiseError);
     }
 
     /**
@@ -146,9 +141,10 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
      * Cancel the editing
      */
     public cancelEditing(): void {
+        this.dialog.closeAll();
         this.newGroup = false;
         this.editGroup = false;
-        this.groupForm.reset();
+        this.selectedGroup = null;
     }
 
     /**
@@ -214,7 +210,6 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
      */
     public ngOnInit(): void {
         super.setTitle('Groups');
-        this.groupForm = new FormGroup({ name: new FormControl('', Validators.required) });
         this.repo.getViewModelListObservable().subscribe(newViewGroups => {
             if (newViewGroups) {
                 this.groups = newViewGroups;