Add cancel to sort dialog and fix backdrop close

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/file-search/file-search.component.ts

@@ -114,10 +114,13 @@ export class FileSearchComponent implements AfterViewChecked {
       data: {
         sortEntries,
       },
+      disableClose: true,
     });
     openedDialog.afterClosed().subscribe(async (sortExpression) => {
-      this.sortExpression = sortExpression;
+      if (sortExpression) {
-      await this.searchForFiles();
+        this.sortExpression = sortExpression;
+        await this.searchForFiles();
+      }
     });
   }
 }

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html

@@ -34,4 +34,5 @@
 </div>
 <div class="dialog-actions" mat-dialog-actions>
   <button mat-flat-button color="primary" (click)="confirmSort()">Sort</button>
+  <button mat-stroked-button color="accent" (click)="cancelSort()">Cancel</button>
 </div>

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss

@@ -18,7 +18,10 @@ mat-form-field, .filler {
 }
 
 .dialog-actions {
-  align-items: center;
+  display: flex;
-  text-align: center;
+  flex-direction: row-reverse;
   width: 100%;
+  button {
+    margin-left: 1em;
+  }
 }

mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.ts

@@ -28,4 +28,8 @@ export class FilterDialogComponent {
   public confirmSort(): void {
     this.dialogRef.close(this.sortEntries);
   }
+
+  public cancelSort(): void {
+    this.dialogRef.close()
+  }
 }