Add prompt to import files when the repository is empty

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

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

@@ -6,7 +6,10 @@
                                [state]="this.state"></app-files-tab-sidebar>
     </app-drawer-page-side>
     <app-drawer-page-content>
-        <app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
+        <app-busy-indicator *ngIf="!this.metadata || this.metadata.file_count > 0"
+                            [blurBackground]="true"
+                            [busy]="contentLoading"
+                            [darkenBackground]="true">
             <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
                                 (modeChangeEvent)="state.mode.next($event)"
                                 [files]="this.files"
@@ -14,5 +17,9 @@
                                 [preselectedFile]="this.getStateSelectedFile()"
                                 [tabState]="this.state"></app-file-multiview>
         </app-busy-indicator>
+        <app-middle-centered *ngIf="this.metadata && this.metadata.file_count === 0" class="import-prompt">
+            <div><h1>There are no files in this repository.</h1></div>
+            <button (click)="this.onImportFiles()" color="primary" mat-flat-button>Import files</button>
+        </app-middle-centered>
     </app-drawer-page-content>
 </app-drawer-page>

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

@@ -25,3 +25,12 @@ app-file-multiview {
         margin: auto;
     }
 }
+
+.import-prompt {
+    text-align: center;
+
+    button {
+        font-size: 1.5em;
+        padding: 0.5em 1em;
+    }
+}

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

@@ -1,6 +1,9 @@
 import {Component, Input, OnInit} from "@angular/core";
 import {File} from "../../../../api/models/File";
 import {TabState} from "../../../models/TabState";
+import {RepositoryMetadata} from "../../../../api/api-types/repo";
+import {RepositoryService} from "../../../services/repository/repository.service";
+import {TabCategory} from "../../../models/TabCategory";
 
 @Component({
     selector: "app-files-tab",
@@ -14,8 +17,12 @@ export class FilesTabComponent implements OnInit {
     files: File[] = [];
     contentLoading = false;
     selectedFiles: File[] = [];
+    public metadata?: RepositoryMetadata;
 
-    constructor() {
+    constructor(
+        repoService: RepositoryService,
+    ) {
+        repoService.metadata.subscribe(m => this.metadata = m);
     }
 
     async ngOnInit() {
@@ -50,4 +57,8 @@ export class FilesTabComponent implements OnInit {
                 break;
         }
     }
+
+    public onImportFiles(): void {
+        this.state.category = TabCategory.Import;
+    }
 }

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

@@ -23,6 +23,7 @@ import {DrawerPageContentComponent} from "./drawer-page/drawer-page-content/draw
 import {FlexLayoutModule} from "@angular/flex-layout";
 import {MatRippleModule} from "@angular/material/core";
 import {FlapButtonComponent} from "./flap-button/flap-button.component";
+import {MiddleCenteredComponent} from "./middle-centered/middle-centered.component";
 
 
 @NgModule({
@@ -40,6 +41,7 @@ import {FlapButtonComponent} from "./flap-button/flap-button.component";
         DrawerPageSideComponent,
         DrawerPageContentComponent,
         FlapButtonComponent,
+        MiddleCenteredComponent,
     ],
     exports: [
         ConfirmDialogComponent,
@@ -54,6 +56,7 @@ import {FlapButtonComponent} from "./flap-button/flap-button.component";
         DrawerPageSideComponent,
         DrawerPageContentComponent,
         FlapButtonComponent,
+        MiddleCenteredComponent,
     ],
     imports: [
         CommonModule,

mediarepo-ui/src/app/components/shared/app-common/middle-centered/middle-centered.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

mediarepo-ui/src/app/components/shared/app-common/middle-centered/middle-centered.component.scss

@@ -0,0 +1,7 @@
+:host {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}

mediarepo-ui/src/app/components/shared/app-common/middle-centered/middle-centered.component.spec.ts

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

mediarepo-ui/src/app/components/shared/app-common/middle-centered/middle-centered.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-middle-centered',
+  templateUrl: './middle-centered.component.html',
+  styleUrls: ['./middle-centered.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MiddleCenteredComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -16,6 +16,7 @@ export class RepositoryService {
     repositories = new BehaviorSubject<Repository[]>([]);
     public selectedRepository = new BehaviorSubject<Repository | undefined>(
         undefined);
+    public metadata = new BehaviorSubject<RepositoryMetadata | undefined>(undefined);
 
     constructor(private errorBroker: LoggingService) {
         this.registerListener().catch(err => console.error(err));
@@ -68,6 +69,7 @@ export class RepositoryService {
                 console.warn(err);
             }
         }
+        this.metadata.next(undefined);
         await MediarepoApi.selectRepository({ name: repo.name });
     }
 
@@ -163,7 +165,9 @@ export class RepositoryService {
      * @returns {Promise<RepositoryMetadata>}
      */
     public async getRepositoryMetadata(): Promise<RepositoryMetadata> {
-        return MediarepoApi.getRepositoryMetadata();
+        const metadata = await MediarepoApi.getRepositoryMetadata();
+        this.metadata.next(metadata);
+        return metadata;
     }
 
     /**