Fix style issues

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

mediarepo-ui/src/api/models/File.ts

@@ -22,11 +22,11 @@ export class File {
         return this.basicData.status;
     }
 
-    public get mimeType(): string {
-        return this.basicData.mime_type;
-    }
-
     public set status(value: FileStatus) {
         this.basicData.status = value;
     }
+
+    public get mimeType(): string {
+        return this.basicData.mime_type;
+    }
 }

mediarepo-ui/src/api/models/Repository.ts

@@ -22,7 +22,7 @@ export class Repository {
         return this.repoData.local;
     }
 
-    public update(data: {name?: string, address?: string, path?: string, local?: boolean}) {
+    public update(data: { name?: string, address?: string, path?: string, local?: boolean }) {
         this.repoData = Object.assign(this.repoData, data);
     }
 }

mediarepo-ui/src/app/components/core/core.component.scss

@@ -36,6 +36,7 @@ mat-tab-group {
         right: 0;
         top: 0;
         height: 100%;
+
         ng-icon {
             font-size: 1.5em;
             margin-top: calc(-50%);

mediarepo-ui/src/app/components/core/core.module.ts

@@ -1,17 +1,11 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {CoreComponent} from "./core.component";
-import {
-    RepositoriesTabComponent
-} from "./repositories-tab/repositories-tab.component";
+import {RepositoriesTabComponent} from "./repositories-tab/repositories-tab.component";
 import {FilesTabComponent} from "./files-tab/files-tab.component";
-import {
-    FilesTabSidebarComponent
-} from "./files-tab/files-tab-sidebar/files-tab-sidebar.component";
+import {FilesTabSidebarComponent} from "./files-tab/files-tab-sidebar/files-tab-sidebar.component";
 import {ImportTabComponent} from "./import-tab/import-tab.component";
-import {
-    ImportTabSidebarComponent
-} from "./import-tab/import-tab-sidebar/import-tab-sidebar.component";
+import {ImportTabSidebarComponent} from "./import-tab/import-tab-sidebar/import-tab-sidebar.component";
 import {MatButtonModule} from "@angular/material/button";
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
@@ -30,9 +24,7 @@ import {SidebarModule} from "../shared/sidebar/sidebar.module";
 import {FileModule} from "../shared/file/file.module";
 import {AppCommonModule} from "../shared/app-common/app-common.module";
 import {ReactiveFormsModule} from "@angular/forms";
-import {
-    RepositoryCardComponent
-} from "./repositories-tab/repository-card/repository-card.component";
+import {RepositoryCardComponent} from "./repositories-tab/repository-card/repository-card.component";
 import {MatCardModule} from "@angular/material/card";
 import {MatListModule} from "@angular/material/list";
 import {MatDialogModule} from "@angular/material/dialog";
@@ -42,9 +34,7 @@ import {TagModule} from "../shared/tag/tag.module";
 import {
     DownloadDaemonDialogComponent
 } from "./repositories-tab/download-daemon-dialog/download-daemon-dialog.component";
-import {
-    RepositoryModule
-} from "../shared/repository/repository/repository.module";
+import {RepositoryModule} from "../shared/repository/repository/repository.module";
 import {MatToolbarModule} from "@angular/material/toolbar";
 import {
     RepositoryDetailsViewComponent
@@ -76,7 +66,7 @@ import {
         MatProgressBarModule,
         MatCheckboxModule,
         ScrollingModule,
-        NgIconsModule.withIcons({...materialIcons}),
+        NgIconsModule.withIcons({ ...materialIcons }),
         FlexModule,
         MatButtonModule,
         MatMenuModule,

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html

@@ -1,9 +1,12 @@
 <div class="sidebar-inner">
     <mat-tab-group headerPosition="below">
         <mat-tab label="Search">
-            <app-file-search [state]="this.state" [availableTags]="this.allTags" [contextTags]="this.tags"
+            <app-file-search (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);"
                              (searchStartEvent)="this.searchStartEvent.emit($event)"
-                             (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);" [tagsLoading]="this.tagsLoading"></app-file-search>
+                             [availableTags]="this.allTags"
+                             [contextTags]="this.tags"
+                             [state]="this.state"
+                             [tagsLoading]="this.tagsLoading"></app-file-search>
         </mat-tab>
         <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
             <app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts

@@ -1,25 +1,10 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild
-} from "@angular/core";
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from "@angular/core";
 import {Tag} from "../../../../../api/models/Tag";
 import {TagService} from "../../../../services/tag/tag.service";
 import {File} from "../../../../../api/models/File";
-import {
-    FileSearchComponent
-} from "../../../shared/sidebar/file-search/file-search.component";
-import {
-    RepositoryService
-} from "../../../../services/repository/repository.service";
-import {
-    TagEditComponent
-} from "../../../shared/sidebar/tag-edit/tag-edit.component";
+import {FileSearchComponent} from "../../../shared/sidebar/file-search/file-search.component";
+import {RepositoryService} from "../../../../services/repository/repository.service";
+import {TagEditComponent} from "../../../shared/sidebar/tag-edit/tag-edit.component";
 import {TabState} from "../../../../models/TabState";
 
 @Component({

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html

@@ -1,6 +1,7 @@
 <mat-drawer-container (keyDownEvent)="this.onKeydown($event)" appInputReceiver autosize>
     <mat-drawer disableClose mode="side" opened>
-        <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false;" (searchStartEvent)="this.contentLoading = true;"
+        <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false;"
+                               (searchStartEvent)="this.contentLoading = true;"
                                [selectedFiles]="this.selectedFiles"
                                [state]="this.state"></app-files-tab-sidebar>
     </mat-drawer>

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html

@@ -1,12 +1,13 @@
 <div class="import-tab-inner">
     <mat-tab-group headerPosition="below">
         <mat-tab label="Import">
-            <app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import>
+            <app-file-import (fileImported)="fileImported.emit($event)"
+                             (importFinished)="importFinished.emit($event)"></app-file-import>
         </mat-tab>
-        <mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
+        <mat-tab *ngIf="selectedFiles.length > 0" label="Edit Tags">
             <app-tag-edit [files]="selectedFiles"></app-tag-edit>
         </mat-tab>
-        <mat-tab label="File Metadata" *ngIf="selectedFiles.length === 1">
+        <mat-tab *ngIf="selectedFiles.length === 1" label="File Metadata">
             <app-file-metadata [file]="selectedFiles[0]"></app-file-metadata>
         </mat-tab>
     </mat-tab-group>

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html

@@ -1,11 +1,14 @@
 <mat-drawer-container autosize>
     <mat-drawer disableClose="true" mode="side" opened>
-        <app-import-tab-sidebar [selectedFiles]="selectedFiles" (fileImported)="this.addFileFromImport($event)"
-                                (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
+        <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"
+                                (importFinished)="this.refreshFileView()"
+                                [selectedFiles]="selectedFiles"></app-import-tab-sidebar>
     </mat-drawer>
     <mat-drawer-content>
-        <app-file-multiview [mode]="this.state.mode.value" (modeChangeEvent)="this.state.mode.next($event)"
-                            [preselectedFile]="this.getSelectedFileFromState()"
-                            (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
+        <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
+                            (modeChangeEvent)="this.state.mode.next($event)"
+                            [files]="this.files"
+                            [mode]="this.state.mode.value"
+                            [preselectedFile]="this.getSelectedFileFromState()"></app-file-multiview>
     </mat-drawer-content>
 </mat-drawer-container>

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts

@@ -20,7 +20,7 @@ export class ImportTabComponent implements OnInit {
     }
 
     public ngOnInit(): void {
-        this.state.files.subscribe(files => files? this.files = files : undefined);
+        this.state.files.subscribe(files => files ? this.files = files : undefined);
     }
 
     /**

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.html

@@ -4,7 +4,8 @@
 <div mat-dialog-content>
     No daemon could be found on the system. Please download and install a daemon executable.
     <br>
-    <button class="download-button" mat-flat-button color="primary" (click)="this.onClickDownloadDaemon()">Download</button>
+    <button (click)="this.onClickDownloadDaemon()" class="download-button" color="primary" mat-flat-button>Download
+    </button>
 </div>
 <div class="download-dialog-actions" mat-dialog-actions>
     <button (click)="closeDialog(false)" color="accent" mat-stroked-button>Cancel</button>

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.spec.ts

@@ -1,8 +1,6 @@
 import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import {
-    DownloadDaemonDialogComponent
-} from "./download-daemon-dialog.component";
+import {DownloadDaemonDialogComponent} from "./download-daemon-dialog.component";
 
 describe("DownloadDaemonDialogComponent", () => {
     let component: DownloadDaemonDialogComponent;
@@ -10,7 +8,7 @@ describe("DownloadDaemonDialogComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ DownloadDaemonDialogComponent ]
+            declarations: [DownloadDaemonDialogComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.ts

@@ -9,9 +9,11 @@ import {shell} from "@tauri-apps/api";
 })
 export class DownloadDaemonDialogComponent {
 
-    constructor(public dialogRef: MatDialogRef<DownloadDaemonDialogComponent>,
+    constructor(
+        public dialogRef: MatDialogRef<DownloadDaemonDialogComponent>,
         @Inject(
-                    MAT_DIALOG_DATA) data: any) {
+            MAT_DIALOG_DATA) data: any
+    ) {
     }
 
 

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html

@@ -1,13 +1,14 @@
-<div class="repo-page-content" *ngIf="!selectedRepository">
+<div *ngIf="!selectedRepository" class="repo-page-content">
     <div class="add-repo-tools">
         <button (click)="openAddRepositoryDialog()" color="primary" mat-flat-button>Add Repository</button>
     </div>
     <div class="repository-list">
         <div *ngFor="let repository of repositories" class="repository-container">
-            <app-repository-card [repository]="repository" (openEvent)="this.onOpenRepository($event)"></app-repository-card>
+            <app-repository-card (openEvent)="this.onOpenRepository($event)"
+                                 [repository]="repository"></app-repository-card>
         </div>
     </div>
 </div>
-<div class="repo-details" *ngIf="selectedRepository">
+<div *ngIf="selectedRepository" class="repo-details">
     <app-repository-details-view [repository]="selectedRepository"></app-repository-details-view>
 </div>

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts

@@ -1,22 +1,9 @@
-import {
-    Component, EventEmitter,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    ViewChild
-} from "@angular/core";
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
 import {Repository} from "../../../../../api/models/Repository";
-import {
-    RepositoryService
-} from "../../../../services/repository/repository.service";
+import {RepositoryService} from "../../../../services/repository/repository.service";
 import {MatDialog} from "@angular/material/dialog";
-import {
-    ConfirmDialogComponent
-} from "../../../shared/app-common/confirm-dialog/confirm-dialog.component";
-import {
-    BusyIndicatorComponent
-} from "../../../shared/app-common/busy-indicator/busy-indicator.component";
+import {ConfirmDialogComponent} from "../../../shared/app-common/confirm-dialog/confirm-dialog.component";
+import {BusyIndicatorComponent} from "../../../shared/app-common/busy-indicator/busy-indicator.component";
 import {
     EditRepositoryDialogComponent
 } from "../../../shared/repository/repository/edit-repository-dialog/edit-repository-dialog.component";
@@ -39,7 +26,8 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
 
     constructor(
         public repoService: RepositoryService,
-        public dialog: MatDialog) {
+        public dialog: MatDialog
+    ) {
     }
 
     public async ngOnInit() {
@@ -81,28 +69,6 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
         }
     }
 
-    private async promtDeleteRepository() {
-        if (this.repository.local) {
-            const deleteContents = await this.dialog.open(
-                ConfirmDialogComponent, {
-                    data: {
-                        title: "Delete repository content",
-                        message: "Do you want to remove the contents of the repository as well?",
-                        confirmAction: "Delete",
-                        confirmColor: "warn",
-                        denyAction: "No",
-                    }
-                }).afterClosed().toPromise();
-            if (deleteContents) {
-                await this.repoService.deleteRepository(this.repository.name);
-            } else {
-                await this.repoService.removeRepository(this.repository.name);
-            }
-        } else {
-            await this.repoService.removeRepository(this.repository.name);
-        }
-    }
-
     public getDaemonStatusText(): string {
         if (this.repository.local) {
             return "Local";
@@ -138,4 +104,26 @@ export class RepositoryCardComponent implements OnInit, OnDestroy {
             }
         });
     }
+
+    private async promtDeleteRepository() {
+        if (this.repository.local) {
+            const deleteContents = await this.dialog.open(
+                ConfirmDialogComponent, {
+                    data: {
+                        title: "Delete repository content",
+                        message: "Do you want to remove the contents of the repository as well?",
+                        confirmAction: "Delete",
+                        confirmColor: "warn",
+                        denyAction: "No",
+                    }
+                }).afterClosed().toPromise();
+            if (deleteContents) {
+                await this.repoService.deleteRepository(this.repository.name);
+            } else {
+                await this.repoService.removeRepository(this.repository.name);
+            }
+        } else {
+            await this.repoService.removeRepository(this.repository.name);
+        }
+    }
 }

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html

@@ -1,43 +1,47 @@
 <mat-toolbar>
     <span class="repository-name">{{repository.name}}</span>
-    <button class="button-close-repository" mat-flat-button color="primary" (click)="this.closeRepository()">Close
+    <button (click)="this.closeRepository()" class="button-close-repository" color="primary" mat-flat-button>Close
     </button>
 </mat-toolbar>
 <div class="details-content" fxLayout="row">
     <div class="repository-metadata" fxFlex="100%">
         <h1>Stats</h1>
         <app-metadata-entry *ngIf="repository.path" attributeName="Path">{{repository.path}}</app-metadata-entry>
-        <app-metadata-entry *ngIf="repository.address" attributeName="Address">{{repository.address}}</app-metadata-entry>
+        <app-metadata-entry *ngIf="repository.address"
+                            attributeName="Address">{{repository.address}}</app-metadata-entry>
         <app-metadata-entry attributeName="File Count">
             <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            {{metadata? metadata!.file_count.toString() : ''}}
+            {{metadata ? metadata!.file_count.toString() : ''}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Tag Count">
             <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            {{metadata? metadata!.tag_count.toString() : ''}}
+            {{metadata ? metadata!.tag_count.toString() : ''}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Namespace Count">
             <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            {{metadata? metadata!.namespace_count.toString() : ''}}
+            {{metadata ? metadata!.namespace_count.toString() : ''}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Mapping Count">
             <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            {{metadata? metadata!.mapping_count.toString() : ''}}
+            {{metadata ? metadata!.mapping_count.toString() : ''}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Total Size">
             <mat-progress-bar *ngIf="(this.totalSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
             {{this.totalSize | async}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="File Folder Size">
-            <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined"
+                              mode="indeterminate"></mat-progress-bar>
             {{this.fileFolderSize | async}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Thumbnail Folder Size">
-            <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined"
+                              mode="indeterminate"></mat-progress-bar>
             {{this.thumbFolderSize | async}}
         </app-metadata-entry>
         <app-metadata-entry attributeName="Database File Size">
-            <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined"
+                              mode="indeterminate"></mat-progress-bar>
             {{this.databaseFileSize | async}}
         </app-metadata-entry>
     </div>

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.spec.ts

@@ -1,8 +1,6 @@
 import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import {
-    RepositoryDetailsViewComponent
-} from "./repository-details-view.component";
+import {RepositoryDetailsViewComponent} from "./repository-details-view.component";
 
 describe("RepositoryDetailsViewComponent", () => {
     let component: RepositoryDetailsViewComponent;
@@ -10,7 +8,7 @@ describe("RepositoryDetailsViewComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ RepositoryDetailsViewComponent ]
+            declarations: [RepositoryDetailsViewComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts

@@ -1,21 +1,10 @@
-import {
-    Component,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    SimpleChanges
-} from "@angular/core";
+import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from "@angular/core";
 import {Repository} from "../../../../../api/models/Repository";
-import {
-    RepositoryService
-} from "../../../../services/repository/repository.service";
+import {RepositoryService} from "../../../../services/repository/repository.service";
 import {RepositoryMetadata} from "../../../../models/RepositoryMetadata";
 import {BehaviorSubject} from "rxjs";
 import {MatDialog} from "@angular/material/dialog";
-import {
-    BusyDialogComponent
-} from "../../../shared/app-common/busy-dialog/busy-dialog.component";
+import {BusyDialogComponent} from "../../../shared/app-common/busy-dialog/busy-dialog.component";
 
 @Component({
     selector: "app-repository-details-view",
@@ -26,12 +15,11 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
     @Input() repository!: Repository;
 
     public metadata?: RepositoryMetadata;
-    private refreshMetadataInterval?: number;
-
     public totalSize = new BehaviorSubject<string | undefined>(undefined);
     public fileFolderSize = new BehaviorSubject<string | undefined>(undefined);
     public thumbFolderSize = new BehaviorSubject<string | undefined>(undefined);
     public databaseFileSize = new BehaviorSubject<string | undefined>(undefined);
+    private refreshMetadataInterval?: number;
 
     constructor(private repoService: RepositoryService, public dialog: MatDialog) {
     }

mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.ts

@@ -1,24 +1,17 @@
-import {
-    Directive,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    Output
-} from "@angular/core";
+import {Directive, EventEmitter, HostBinding, HostListener, Output} from "@angular/core";
 
 @Directive({
     selector: "[appInputReceiver]"
 })
 export class InputReceiverDirective {
 
-    constructor() {
-    }
-
     @Output() keyDownEvent = new EventEmitter<KeyboardEvent>();
     @Output() keyUpEvent = new EventEmitter<KeyboardEvent>();
-
     @HostBinding("tabindex") tabIndex = 1;
 
+    constructor() {
+    }
+
     @HostListener("keydown", ["$event"])
     onKeyDown(event: KeyboardEvent) {
         this.keyDownEvent.emit(event);

mediarepo-ui/src/app/components/shared/app-common/metadata-entry/metadata-entry.component.spec.ts

@@ -8,7 +8,7 @@ describe("MetadataEntryComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ MetadataEntryComponent ]
+            declarations: [MetadataEntryComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.ts

@@ -1,10 +1,4 @@
-import {
-    Component,
-    HostListener,
-    Input,
-    OnChanges,
-    SimpleChanges
-} from "@angular/core";
+import {Component, HostListener, Input, OnChanges, SimpleChanges} from "@angular/core";
 import {CdkDragMove} from "@angular/cdk/drag-drop";
 import {SafeResourceUrl} from "@angular/platform-browser";
 
@@ -16,7 +10,7 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 export class ImageViewerComponent implements OnChanges {
     @Input() imageUrl!: SafeResourceUrl | string;
     public imageZoom = 1;
-    public imagePosition = {x: 0, y: 0};
+    public imagePosition = { x: 0, y: 0 };
     public mouseInImageView = false;
 
     constructor() {
@@ -31,7 +25,7 @@ export class ImageViewerComponent implements OnChanges {
 
     public resetImage() {
         this.imageZoom = 1;
-        this.imagePosition = {x: 0, y: 0};
+        this.imagePosition = { x: 0, y: 0 };
     }
 
     public onDragMoved($event: CdkDragMove<HTMLDivElement>): void {

mediarepo-ui/src/app/components/shared/input/native-file-select/native-file-select.component.ts

@@ -1,12 +1,4 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges
-} from "@angular/core";
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core";
 import {FormControl} from "@angular/forms";
 import {dialog} from "@tauri-apps/api";
 import {DialogFilter} from "@tauri-apps/api/dialog";

mediarepo-ui/src/app/components/shared/repository/repository/add-repository-dialog/add-repository-dialog.component.html

@@ -4,16 +4,24 @@
 </div>
 <div class="dialog-buttons" mat-dialog-actions>
     <button (click)="closeDialog()" color="accent" mat-stroked-button>Cancel</button>
-    <button (click)="addRepository()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote' || repoForm.localRepoExists"
-            [disabled]="!repoForm.formGroup.valid" color="primary" mat-flat-button
+    <button (click)="addRepository()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote' || repoForm.localRepoExists"
+            [disabled]="!repoForm.formGroup.valid"
+            color="primary"
+            mat-flat-button
             matTooltip="Add the existing repository">Add
     </button>
-    <button (click)="this.initLocalRepository()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'local' && !repoForm.localRepoExists"
+    <button (click)="this.initLocalRepository()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'local' && !repoForm.localRepoExists"
             [disabled]="!repoForm.formGroup.valid"
-            color="accent" mat-flat-button
+            color="accent"
+            mat-flat-button
             matTooltip="Initialize the repository in the specified path">Init
     </button>
-    <button (click)="repoForm.checkRepositoryStatus()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote'" [disabled]="!repoForm.formGroup.valid"
-            class="check-connection-button" mat-stroked-button>Check Connection
+    <button (click)="repoForm.checkRepositoryStatus()"
+            *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote'"
+            [disabled]="!repoForm.formGroup.valid"
+            class="check-connection-button"
+            mat-stroked-button>Check Connection
     </button>
 </div>

mediarepo-ui/src/app/components/shared/repository/repository/edit-repository-dialog/edit-repository-dialog.component.html

@@ -1,8 +1,11 @@
 <h1 mat-dialog-title>Edit {{this.selectedRepository.name}}</h1>
 <div mat-dialog-content>
-    <app-repository-form #repoForm [name]="selectedRepository.name" [address]="selectedRepository.address ?? ''"
+    <app-repository-form #repoForm
+                         [address]="selectedRepository.address ?? ''"
+                         [name]="selectedRepository.name"
+                         [path]="selectedRepository.path ?? ''"
                          [repositoryType]="selectedRepository.local? 'local' : 'remote'"
-                         [path]="selectedRepository.path ?? ''" [validateNameDuplicate]="false"></app-repository-form>
+                         [validateNameDuplicate]="false"></app-repository-form>
 </div>
 <div class="dialog-buttons" mat-dialog-actions>
     <button (click)="closeDialog()" color="accent" mat-stroked-button>Cancel</button>

mediarepo-ui/src/app/components/shared/repository/repository/edit-repository-dialog/edit-repository-dialog.component.spec.ts

@@ -1,8 +1,6 @@
 import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import {
-    EditRepositoryDialogComponent
-} from "./edit-repository-dialog.component";
+import {EditRepositoryDialogComponent} from "./edit-repository-dialog.component";
 
 describe("EditRepositoryDialogComponent", () => {
     let component: EditRepositoryDialogComponent;
@@ -10,7 +8,7 @@ describe("EditRepositoryDialogComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ EditRepositoryDialogComponent ]
+            declarations: [EditRepositoryDialogComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/repository/repository/repository-form/repository-form.component.spec.ts

@@ -8,7 +8,7 @@ describe("RepositoryFormComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ RepositoryFormComponent ]
+            declarations: [RepositoryFormComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/repository/repository/repository-form/repository-form.component.ts

@@ -1,15 +1,7 @@
 import {Component, Input, OnInit, Output} from "@angular/core";
-import {
-    AbstractControl,
-    FormControl,
-    FormGroup,
-    ValidationErrors,
-    Validators
-} from "@angular/forms";
+import {AbstractControl, FormControl, FormGroup, ValidationErrors, Validators} from "@angular/forms";
 import {Repository} from "../../../../../../api/models/Repository";
-import {
-    RepositoryService
-} from "../../../../../services/repository/repository.service";
+import {RepositoryService} from "../../../../../services/repository/repository.service";
 import {dialog} from "@tauri-apps/api";
 import {MatDialog} from "@angular/material/dialog";
 
@@ -101,7 +93,7 @@ export class RepositoryFormComponent implements OnInit {
         const value = control?.value;
 
         if (this.validateNameDuplicate && this.repositories.find(r => r.name === value)) {
-            control?.setErrors({nameAlreadyExists: value});
+            control?.setErrors({ nameAlreadyExists: value });
         }
     }
 
@@ -110,7 +102,7 @@ export class RepositoryFormComponent implements OnInit {
             "repositoryType")?.value ?? "local";
 
         if (repositoryType === "local") {
-            return control.value.length > 0 ? null : {valueRequired: control.value};
+            return control.value.length > 0 ? null : { valueRequired: control.value };
         }
         return null;
     }
@@ -121,7 +113,7 @@ export class RepositoryFormComponent implements OnInit {
 
         if (repositoryType === "remote") {
             const match = /(\d+\.){3}\d+:\d+|\S+:\d+/.test(control.value);
-            return match ? null : {invalidAddress: control.value};
+            return match ? null : { invalidAddress: control.value };
         }
 
         return null;

mediarepo-ui/src/app/components/shared/repository/repository/repository.module.ts

@@ -1,14 +1,8 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
-import {
-    AddRepositoryDialogComponent
-} from "./add-repository-dialog/add-repository-dialog.component";
-import {
-    RepositoryFormComponent
-} from "./repository-form/repository-form.component";
-import {
-    EditRepositoryDialogComponent
-} from "./edit-repository-dialog/edit-repository-dialog.component";
+import {AddRepositoryDialogComponent} from "./add-repository-dialog/add-repository-dialog.component";
+import {RepositoryFormComponent} from "./repository-form/repository-form.component";
+import {EditRepositoryDialogComponent} from "./edit-repository-dialog/edit-repository-dialog.component";
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatButtonModule} from "@angular/material/button";
 import {MatTooltipModule} from "@angular/material/tooltip";
@@ -37,7 +31,7 @@ import {MatFolder} from "@ng-icons/material-icons";
         MatSelectModule,
         MatInputModule,
         ReactiveFormsModule,
-        NgIconsModule.withIcons({MatFolder})
+        NgIconsModule.withIcons({ MatFolder })
     ]
 })
 export class RepositoryModule {

mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.spec.ts

@@ -8,7 +8,7 @@ describe("FileImportComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ FileImportComponent ]
+            declarations: [FileImportComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html

@@ -2,12 +2,12 @@
     <app-metadata-entry *ngIf="mode === 'read'" [attributeName]="attributeName">{{value}}</app-metadata-entry>
     <mat-form-field *ngIf="mode === 'write'">
         <mat-label>{{attributeName}}</mat-label>
-        <input [formControl]="formControl" type="text" matInput [value]="value.toString()">
+        <input [formControl]="formControl" [value]="value.toString()" matInput type="text">
     </mat-form-field>
-    <button *ngIf="mode === 'write'" mat-button (click)="this.onSave()">
+    <button (click)="this.onSave()" *ngIf="mode === 'write'" mat-button>
         <ng-icon name="mat-save"></ng-icon>
     </button>
-    <button *ngIf="mode === 'read'" mat-button (click)="mode = 'write'">
+    <button (click)="mode = 'write'" *ngIf="mode === 'read'" mat-button>
         <ng-icon name="mat-edit"></ng-icon>
     </button>
 </div>

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.spec.ts

@@ -1,8 +1,6 @@
 import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import {
-    EditableMetadataEntryComponent
-} from "./editable-metadata-entry.component";
+import {EditableMetadataEntryComponent} from "./editable-metadata-entry.component";
 
 describe("EditableMetadataEntryComponent", () => {
     let component: EditableMetadataEntryComponent;
@@ -10,7 +8,7 @@ describe("EditableMetadataEntryComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ EditableMetadataEntryComponent ]
+            declarations: [EditableMetadataEntryComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts

@@ -1,12 +1,4 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges
-} from "@angular/core";
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core";
 import {FormControl} from "@angular/forms";
 
 @Component({

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.scss

@@ -20,9 +20,11 @@
         width: 100%;
         display: block;
     }
+
     :first-child {
         margin-top: 0;
     }
+
     :last-child {
         margin-bottom: 0;
     }
@@ -32,6 +34,7 @@
     text-align: center;
     height: 100px;
     width: 100%;
+
     h1 {
         margin-top: 20px;
     }

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.spec.ts

@@ -8,7 +8,7 @@ describe("FileMetadataComponent", () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ FileMetadataComponent ]
+            declarations: [FileMetadataComponent]
         })
             .compileComponents();
     });

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.spec.ts

@@ -1,14 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import { SortButtonComponent } from './sort-button.component';
+import {SortButtonComponent} from "./sort-button.component";
 
-describe('SortButtonComponent', () => {
+describe("SortButtonComponent", () => {
     let component: SortButtonComponent;
     let fixture: ComponentFixture<SortButtonComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-      declarations: [ SortButtonComponent ]
+            declarations: [SortButtonComponent]
         })
             .compileComponents();
     });
@@ -19,7 +19,7 @@ describe('SortButtonComponent', () => {
         fixture.detectChanges();
     });
 
-  it('should create', () => {
+    it("should create", () => {
         expect(component).toBeTruthy();
     });
 });

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-preset-item/sort-preset-item.component.spec.ts

@@ -1,14 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from "@angular/core/testing";
 
-import { SortPresetItemComponent } from './sort-preset-item.component';
+import {SortPresetItemComponent} from "./sort-preset-item.component";
 
-describe('SortPresetItemComponent', () => {
+describe("SortPresetItemComponent", () => {
     let component: SortPresetItemComponent;
     let fixture: ComponentFixture<SortPresetItemComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-      declarations: [ SortPresetItemComponent ]
+            declarations: [SortPresetItemComponent]
         })
             .compileComponents();
     });
@@ -19,7 +19,7 @@ describe('SortPresetItemComponent', () => {
         fixture.detectChanges();
     });
 
-  it('should create', () => {
+    it("should create", () => {
         expect(component).toBeTruthy();
     });
 });

mediarepo-ui/src/app/components/shared/sidebar/sidebar.module.ts

@@ -52,7 +52,7 @@ import {GetTagQueryPipe} from "./file-search/filter-pipes/get-tag-query.pipe";
 import {GetPropertyQueryPipe} from "./file-search/filter-pipes/get-property-query.pipe";
 import {SortButtonComponent} from "./file-search/sort-button/sort-button.component";
 import {MatTooltipModule} from "@angular/material/tooltip";
-import { SortPresetItemComponent } from './file-search/sort-preset-item/sort-preset-item.component';
+import {SortPresetItemComponent} from "./file-search/sort-preset-item/sort-preset-item.component";
 
 
 @NgModule({

mediarepo-ui/src/app/services/file/file.helper.ts

@@ -19,7 +19,7 @@ export class FileHelper {
             filters: [{
                 name: file.mimeType,
                 extensions: [extension ?? "*"]
-            }, {name: "All", extensions: ["*"]}]
+            }, { name: "All", extensions: ["*"] }]
         });
     }
 

mediarepo-ui/src/app/services/import/import.service.ts

@@ -19,7 +19,7 @@ export class ImportService {
      * @returns {Promise<FileOsMetadata[]>}
      */
     public async resolvePathsToFiles(paths: string[]): Promise<FileOsMetadata[]> {
-        return MediarepoApi.resolvePathsToFiles({paths});
+        return MediarepoApi.resolvePathsToFiles({ paths });
     }
 
     /**
@@ -29,6 +29,6 @@ export class ImportService {
      * @returns {Promise<File>}
      */
     public async addLocalFile(metadata: FileOsMetadata, options: AddFileOptions): Promise<File> {
-        return MediarepoApi.addLocalFile({metadata, options}).then(mapNew(File));
+        return MediarepoApi.addLocalFile({ metadata, options }).then(mapNew(File));
     }
 }

mediarepo-ui/src/app/services/job/job.service.ts

@@ -11,6 +11,6 @@ export class JobService {
     }
 
     public async runJob(jobType: JobType): Promise<void> {
-        return MediarepoApi.runJob({jobType});
+        return MediarepoApi.runJob({ jobType });
     }
 }

mediarepo-ui/src/app/services/preset/preset.service.spec.ts

@@ -1,8 +1,8 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from "@angular/core/testing";
 
-import { PresetService } from './preset.service';
+import {PresetService} from "./preset.service";
 
-describe('PresetService', () => {
+describe("PresetService", () => {
     let service: PresetService;
 
     beforeEach(() => {
@@ -10,7 +10,7 @@ describe('PresetService', () => {
         service = TestBed.inject(PresetService);
     });
 
-  it('should be created', () => {
+    it("should be created", () => {
         expect(service).toBeTruthy();
     });
 });

mediarepo-ui/src/assets/icon.svg

@@ -2,81 +2,81 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-    width="120"
     height="120"
-    viewBox="0 0 120 120"
-    version="1.1"
     id="svg5"
-    sodipodi:docname="mediarepo-icon.svg"
-    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
     inkscape:export-filename="/home/trivernis/Pictures/mediarepo-icon_32x32.png"
     inkscape:export-xdpi="25.6"
     inkscape:export-ydpi="25.6"
+    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+    sodipodi:docname="mediarepo-icon.svg"
+    version="1.1"
+    viewBox="0 0 120 120"
+    width="120"
+    xmlns="http://www.w3.org/2000/svg"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-    xmlns="http://www.w3.org/2000/svg"
 >
     <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="px"
-     showgrid="true"
-     inkscape:lockguides="true"
-     objecttolerance="20"
         guidetolerance="10000"
-     inkscape:zoom="5.6833333"
+        id="namedview7"
+        inkscape:current-layer="layer1"
         inkscape:cx="32.199413"
         inkscape:cy="77.859238"
-     inkscape:window-width="2560"
+        inkscape:document-units="px"
+        inkscape:lockguides="true"
+        inkscape:pagecheckerboard="0"
+        inkscape:pageopacity="0.0"
+        inkscape:pageshadow="2"
         inkscape:window-height="1359"
+        inkscape:window-maximized="1"
+        inkscape:window-width="2560"
         inkscape:window-x="1200"
         inkscape:window-y="240"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1">
+        inkscape:zoom="5.6833333"
+        objecttolerance="20"
+        pagecolor="#ffffff"
+        showgrid="true">
         <inkscape:grid
-       type="xygrid"
-       id="grid13779"
             dotted="false"
+            id="grid13779"
             spacingx="0.5"
-       spacingy="0.5" />
+            spacingy="0.5"
+            type="xygrid"/>
     </sodipodi:namedview>
     <defs
-     id="defs2" />
+        id="defs2"/>
     <g
-     inkscape:groupmode="layer"
         id="layer3"
+        inkscape:groupmode="layer"
         inkscape:label="Background"
         style="display:none">
         <rect
-       style="fill:#010001;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+            height="142.5"
             id="rect40027"
+            style="fill:#010001;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
             width="170"
-       height="142.5"
             x="-20"
-       y="-10" />
+            y="-10"/>
     </g>
     <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
         id="layer1"
+        inkscape:groupmode="layer"
+        inkscape:label="Layer 1"
         style="display:inline">
         <g
             aria-label="M"
             id="text13769"
-       style="font-size:120px;font-family:'DejaVu Sans', 'Bitstream Vera Sans';fill:#b300df;fill-opacity:1;stroke:none;stroke-opacity:1"
             inkscape:export-filename="/home/trivernis/Pictures/mediarepo-icon_128x128.png"
             inkscape:export-xdpi="102.4"
-       inkscape:export-ydpi="102.4">
+            inkscape:export-ydpi="102.4"
+            style="font-size:120px;font-family:'DejaVu Sans', 'Bitstream Vera Sans';fill:#b300df;fill-opacity:1;stroke:none;stroke-opacity:1">
             <path
-         id="path14062"
-         style="fill:#b300df;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                 d="M 91.853516,14.957031 C 87.625624,14.940758 82.986173,16.079346 80,17.5 69.344922,22.56909 60,45 60,45 60,45 50.680027,22.566415 40,17.5 34.688445,14.980293 24.157014,13.342986 20,17.5 -0.61934311,38.119343 15,80 5,105 3.5782709,108.55432 17.01074,102.39141 20,100 32.5,90 33.253324,58.268354 32.5,47.5 33.314651,57.148409 35.039944,78.87714 50,90 c 5.349969,3.977723 14.654765,3.984082 20,0 10.464133,-7.799463 15.084189,-27.639159 17.5,-42.5 -1.296836,17.464817 0,42.5 12.5,52.5 3.00451,2.40361 16.42898,8.57246 15,5 -10,-25 5.61934,-66.880657 -15,-87.5 -1.818694,-1.818694 -4.858124,-2.530312 -8.146484,-2.542969 z M 60,50 c 8.28427,0 15,6.715729 15,15 0,8.28427 -6.71573,15 -15,15 -8.284271,0 -15,-6.71573 -15,-15 0,-8.284271 6.715729,-15 15,-15 z m 0,5.615234 c -5.182976,0 -9.384766,4.201791 -9.384766,9.384766 0,5.182975 4.20179,9.384766 9.384766,9.384766 5.182975,0 9.384766,-4.201791 9.384766,-9.384766 0,-5.182975 -4.201791,-9.384766 -9.384766,-9.384766 z"
-         sodipodi:nodetypes="sscsssscsscssssssssssssss" />
+                id="path14062"
+                sodipodi:nodetypes="sscsssscsscssssssssssssss"
+                style="fill:#b300df;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
         </g>
     </g>
 </svg>

mediarepo-ui/src/test.ts

@@ -2,10 +2,7 @@
 
 import "zone.js/testing";
 import {getTestBed} from "@angular/core/testing";
-import {
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting
-} from "@angular/platform-browser-dynamic/testing";
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from "@angular/platform-browser-dynamic/testing";
 
 declare const require: {
     context(path: string, deep?: boolean, filter?: RegExp): {
@@ -18,7 +15,7 @@ declare const require: {
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
-    {teardown: {destroyAfterEach: true}},
+    { teardown: { destroyAfterEach: true } },
 );
 
 // Then we find all the tests.