Add repository overview to tabs

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

mediarepo-ui/src/app-custom-theme.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
+@mixin color($theme) {
+  $color: #0d071b;
+  $color-lighter: desaturate(lighten($color, 5), 5);
+  .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn, .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab, .mat-drawer-inner-container, .mat-drawer-content {
+    background-color: $color;
+  }
+  .mat-card {
+    background-color: $color-lighter;
+  }
+}
+
+@mixin typography($theme) {
+  // Get the typography config from the theme.
+  $typography-config: mat.get-typography-config($theme);
+}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+
+  $typography-config: mat.get-typography-config($theme);
+  @if $typography-config != null {
+    @include typography($theme);
+  }
+}
+

mediarepo-ui/src/app/app-routing.module.ts

@@ -1,10 +1,8 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {RepositoriesComponent} from "./pages/repositories/repositories.component";
 import {HomeComponent} from "./pages/home/home.component";
 
 const routes: Routes = [
-  {path: "repositories", component: RepositoriesComponent},
   {path: "", component: HomeComponent}];
 
 @NgModule({

mediarepo-ui/src/app/app.component-theme.scss

@@ -7,12 +7,13 @@
   $warn-palette: map.get($color-config, 'warn');
 
   body {
-    background-color: darken(mat.get-color-from-palette($primary-palette, 'darker'), 35);
+    background-color: darken(#303030, 5);
     color: white
   }
   ::ng-deep ::-webkit-scrollbar {
     width: 15px;
     height: 15px;
+    background: #303030;
   }
 
   ::ng-deep ::-webkit-scrollbar-thumb {

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

@@ -1 +0,0 @@
-@import "src/styles";

mediarepo-ui/src/app/app.component.ts

@@ -25,9 +25,6 @@ export class AppComponent implements OnInit{
     this.errorBroker.errorCb = (err: { message: string }) => this.showError(err);
     this.errorBroker.infoCb = (info: string) => this.showInfo(info);
     await this.repoService.loadRepositories();
-    if (this.repoService.selectedRepository.getValue() == undefined) {
-      await this.router.navigate(["repositories"])
-    }
   }
 
   private showError(err: { message: string }) {

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

@@ -4,9 +4,9 @@ import {BrowserModule} from '@angular/platform-browser';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {RepositoriesComponent} from './pages/repositories/repositories.component';
+import {RepositoriesTabComponent} from './pages/home/repositories-tab/repositories-tab.component';
 import {HomeComponent} from './pages/home/home.component';
-import {RepositoryCardComponent} from './pages/repositories/repository-card/repository-card.component';
+import {RepositoryCardComponent} from './pages/home/repositories-tab/repository-card/repository-card.component';
 import {MatCardModule} from "@angular/material/card";
 import {MatListModule} from "@angular/material/list";
 import {MatButtonModule} from "@angular/material/button";
@@ -15,7 +15,7 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
 import {ReactiveFormsModule} from "@angular/forms";
-import {RepoFormComponent} from './pages/repositories/repo-form/repo-form.component';
+import {RepoFormComponent} from './pages/home/repositories-tab/repo-form/repo-form.component';
 import {FileGridComponent} from './components/file-grid/file-grid.component';
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {MatGridListModule} from "@angular/material/grid-list";
@@ -29,7 +29,7 @@ import {MatIconModule} from "@angular/material/icon";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {FileSearchComponent} from './components/file-search/file-search.component';
 import {MatTabsModule} from "@angular/material/tabs";
-import {SearchPageComponent} from './pages/home/search-page/search-page.component';
+import {SearchTabComponent} from './pages/home/search-tab/search-tab.component';
 import {FlexModule, GridModule} from "@angular/flex-layout";
 import {MatRippleModule} from "@angular/material/core";
 import {FilterDialogComponent} from './components/file-search/filter-dialog/filter-dialog.component';
@@ -47,14 +47,14 @@ import {MatSliderModule} from "@angular/material/slider";
 @NgModule({
   declarations: [
     AppComponent,
-    RepositoriesComponent,
+    RepositoriesTabComponent,
     HomeComponent,
     RepositoryCardComponent,
     RepoFormComponent,
     FileGridComponent,
     FileGridEntryComponent,
     FileSearchComponent,
-    SearchPageComponent,
+    SearchTabComponent,
     FilterDialogComponent,
     FileGalleryComponent,
     FileGalleryEntryComponent,

mediarepo-ui/src/app/pages/home/home.component.html

@@ -1,10 +1,10 @@
 <div id="content">
-  <mat-toolbar color="primary">
+  <mat-tab-group #tabGroup>
-    <h1>Files</h1>
+    <mat-tab label="Repositories">
-  </mat-toolbar>
+      <app-repositories-tab></app-repositories-tab>
-  <mat-tab-group>
+    </mat-tab>
-    <mat-tab label="Search">
+    <mat-tab *ngIf="this.selectedRepository" label="Search">
-      <app-search-page></app-search-page>
+      <app-search-tab></app-search-tab>
     </mat-tab>
   </mat-tab-group>
 </div>

mediarepo-ui/src/app/pages/home/home.component.scss

@@ -9,7 +9,7 @@
 }
 
 mat-tab-group {
-  height: calc(100% - 64px);
+  height: 100%;
   width: 100%;
 }
 

mediarepo-ui/src/app/pages/home/home.component.ts

@@ -1,19 +1,8 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {FileService} from "../../services/file/file.service";
-import {File} from "../../models/File";
-import {Lightbox, LIGHTBOX_EVENT, LightboxEvent} from "ngx-lightbox";
-import {ErrorBrokerService} from "../../services/error-broker/error-broker.service";
-import {TagService} from "../../services/tag/tag.service";
-import {Tag} from "../../models/Tag";
-import {MatChipInputEvent} from "@angular/material/chips";
-import {COMMA, ENTER} from "@angular/cdk/keycodes";
-import {MatSelectionListChange} from "@angular/material/list";
-import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
-import {Observable} from "rxjs";
-import {map, startWith} from "rxjs/operators";
-import {FormControl} from "@angular/forms";
-import {FileSearchComponent} from "../../components/file-search/file-search.component";
 import {DataloaderService} from "../../services/dataloader/dataloader.service";
+import {Repository} from "../../models/Repository";
+import {RepositoryService} from "../../services/repository/repository.service";
+import {MatTabGroup} from "@angular/material/tabs";
 
 @Component({
   selector: 'app-home',
@@ -21,10 +10,27 @@ import {DataloaderService} from "../../services/dataloader/dataloader.service";
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
+
+  public selectedRepository: Repository | undefined;
+
+  @ViewChild("tabGroup") tabGroup!: MatTabGroup;
+
   public async ngOnInit(): Promise<void> {
     await this.dataloaderService.loadData();
+    this.selectedRepository = this.repoService.selectedRepository.getValue();
+    this.repoService.selectedRepository.subscribe((selected) => {
+      this.selectedRepository = selected;
+      this.updateSelectedTab();
+    });
   }
 
+  public updateSelectedTab() {
+    if (!this.selectedRepository) {
+      this.tabGroup.selectedIndex = 0;
+    } else if (this.tabGroup.selectedIndex === 0) {
+      this.tabGroup.selectedIndex = 1;
+    }
+  }
 
-  constructor(private dataloaderService: DataloaderService) {}
+  constructor(private dataloaderService: DataloaderService, private repoService: RepositoryService) {}
 }

mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {RepositoryService} from "../../../services/repository/repository.service";
+import {RepositoryService} from "../../../../services/repository/repository.service";
 import {MatSnackBar} from "@angular/material/snack-bar";
-import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
 
 @Component({
   selector: 'app-repo-form',

mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.scss

@@ -1,4 +1,4 @@
-@import 'src/styles';
+@import '../../../../styles';
 
 
 .repository-container {

mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RepositoriesComponent } from './repositories.component';
+import { RepositoriesTabComponent } from './repositories-tab.component';
 
 describe('RepositoriesComponent', () => {
-  let component: RepositoriesComponent;
+  let component: RepositoriesTabComponent;
-  let fixture: ComponentFixture<RepositoriesComponent>;
+  let fixture: ComponentFixture<RepositoriesTabComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RepositoriesComponent ]
+      declarations: [ RepositoriesTabComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RepositoriesComponent);
+    fixture = TestBed.createComponent(RepositoriesTabComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import {Repository} from "../../models/Repository";
+import {Repository} from "../../../models/Repository";
-import {RepositoryService} from "../../services/repository/repository.service";
+import {RepositoryService} from "../../../services/repository/repository.service";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {FormBuilder, FormGroup} from "@angular/forms";
 
 @Component({
-  selector: 'app-repositories',
+  selector: 'app-repositories-tab',
-  templateUrl: './repositories.component.html',
+  templateUrl: './repositories-tab.component.html',
-  styleUrls: ['./repositories.component.scss']
+  styleUrls: ['./repositories-tab.component.scss']
 })
-export class RepositoriesComponent implements OnInit {
+export class RepositoriesTabComponent implements OnInit {
 
   repositories: Repository[] = [];
 

mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.scss

@@ -0,0 +1 @@
+@import "../../../../../styles";

mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.ts

@@ -1,28 +1,24 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Repository} from "../../../models/Repository";
+import {Repository} from "../../../../models/Repository";
-import {RepositoryService} from "../../../services/repository/repository.service";
+import {RepositoryService} from "../../../../services/repository/repository.service";
 import {Router} from "@angular/router";
-import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
 
 @Component({
   selector: 'app-repository-card',
   templateUrl: './repository-card.component.html',
   styleUrls: ['./repository-card.component.scss']
 })
-export class RepositoryCardComponent implements OnInit {
+export class RepositoryCardComponent {
 
   @Input() repository?: Repository;
 
   constructor(private repoService: RepositoryService, private router: Router, private errorBroker: ErrorBrokerService) {}
 
-  ngOnInit(): void {
-  }
-
   async selectRepository() {
     if (this.repository) {
       try {
         await this.repoService.setRepository(this.repository);
-        await this.router.navigate([""]);
       } catch(err) {
         this.errorBroker.showError(err);
       }

mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SearchPageComponent } from './search-page.component';
+import { SearchTabComponent } from './search-tab.component';
 
 describe('SearchPageComponent', () => {
-  let component: SearchPageComponent;
+  let component: SearchTabComponent;
-  let fixture: ComponentFixture<SearchPageComponent>;
+  let fixture: ComponentFixture<SearchTabComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SearchPageComponent ]
+      declarations: [ SearchTabComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchPageComponent);
+    fixture = TestBed.createComponent(SearchTabComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.ts

@@ -8,13 +8,14 @@ import {TagService} from "../../../services/tag/tag.service";
 import {Lightbox, LIGHTBOX_EVENT, LightboxEvent} from "ngx-lightbox";
 import {MatSelectionListChange} from "@angular/material/list";
 import {SortKey} from "../../../models/SortKey";
+import {RepositoryService} from "../../../services/repository/repository.service";
 
 @Component({
-  selector: 'app-search-page',
+  selector: 'app-search-tab',
-  templateUrl: './search-page.component.html',
+  templateUrl: './search-tab.component.html',
-  styleUrls: ['./search-page.component.scss']
+  styleUrls: ['./search-tab.component.scss']
 })
-export class SearchPageComponent implements OnInit {
+export class SearchTabComponent implements OnInit {
 
   tags: Tag[] = [];
   files: File[] = [];
@@ -27,16 +28,26 @@ export class SearchPageComponent implements OnInit {
 
   constructor(
     private errorBroker: ErrorBrokerService,
+    private repoService: RepositoryService,
     private fileService: FileService,
-    private tagService: TagService,
+    private tagService: TagService,) {
-    private lightbox: Lightbox,
-    private lightboxEvent: LightboxEvent) {
   }
 
   async ngOnInit() {
     this.fileService.displayedFiles.subscribe((files) => this.files = files);
+    this.repoService.selectedRepository.subscribe(async (repo) => repo && await this.loadFilesInitially());
+    await this.loadFilesInitially();
+  }
+
+  async loadFilesInitially() {
+    this.files = [];
     this.contentLoading = true;
-    await this.fileService.findFiles([], [new SortKey("FileImportedTime", "Ascending", undefined)])
+
+    if (this.fileSearch) {
+      await this.fileSearch.searchForFiles();
+    } else {
+      await this.fileService.findFiles([], [new SortKey("FileImportedTime", "Ascending", undefined)])
+    }
     this.contentLoading = false;
   }
 

mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.scss

@@ -1 +0,0 @@
-@import "src/styles";