diff --git a/mediarepo-ui/src/app-custom-theme.scss b/mediarepo-ui/src/app-custom-theme.scss new file mode 100644 index 0000000..607b932 --- /dev/null +++ b/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); + } +} + diff --git a/mediarepo-ui/src/app/app-routing.module.ts b/mediarepo-ui/src/app/app-routing.module.ts index 7d7e101..229020b 100644 --- a/mediarepo-ui/src/app/app-routing.module.ts +++ b/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({ diff --git a/mediarepo-ui/src/app/app.component-theme.scss b/mediarepo-ui/src/app/app.component-theme.scss index 79ac3d7..52fdfbf 100644 --- a/mediarepo-ui/src/app/app.component-theme.scss +++ b/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 { diff --git a/mediarepo-ui/src/app/app.component.scss b/mediarepo-ui/src/app/app.component.scss index 42bdf1f..e69de29 100644 --- a/mediarepo-ui/src/app/app.component.scss +++ b/mediarepo-ui/src/app/app.component.scss @@ -1 +0,0 @@ -@import "src/styles"; diff --git a/mediarepo-ui/src/app/app.component.ts b/mediarepo-ui/src/app/app.component.ts index c10aa00..e540d7d 100644 --- a/mediarepo-ui/src/app/app.component.ts +++ b/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 }) { diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index aeb3a44..c7094a5 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/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, diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html index b3db129..fb0bf89 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.html +++ b/mediarepo-ui/src/app/pages/home/home.component.html @@ -1,10 +1,10 @@
- -

Files

- - - - + + + + + +
diff --git a/mediarepo-ui/src/app/pages/home/home.component.scss b/mediarepo-ui/src/app/pages/home/home.component.scss index 19565e8..d107163 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.scss +++ b/mediarepo-ui/src/app/pages/home/home.component.scss @@ -9,7 +9,7 @@ } mat-tab-group { - height: calc(100% - 64px); + height: 100%; width: 100%; } diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts index 5e3e802..3d4fb0f 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.ts +++ b/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 { 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) {} } diff --git a/mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.html b/mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.html similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.html rename to mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.html diff --git a/mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.scss b/mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.scss similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.scss rename to mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.scss diff --git a/mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.spec.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.spec.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.spec.ts diff --git a/mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.ts similarity index 82% rename from mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repo-form/repo-form.component.ts index 2263027..9778447 100644 --- a/mediarepo-ui/src/app/pages/repositories/repo-form/repo-form.component.ts +++ b/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', diff --git a/mediarepo-ui/src/app/pages/repositories/repositories.component.html b/mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.html similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repositories.component.html rename to mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.html diff --git a/mediarepo-ui/src/app/pages/repositories/repositories.component.scss b/mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.scss similarity index 80% rename from mediarepo-ui/src/app/pages/repositories/repositories.component.scss rename to mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.scss index c67c60a..c1c39f2 100644 --- a/mediarepo-ui/src/app/pages/repositories/repositories.component.scss +++ b/mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.scss @@ -1,4 +1,4 @@ -@import 'src/styles'; +@import '../../../../styles'; .repository-container { diff --git a/mediarepo-ui/src/app/pages/repositories/repositories.component.spec.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.spec.ts similarity index 57% rename from mediarepo-ui/src/app/pages/repositories/repositories.component.spec.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.spec.ts index ada2a07..e0407b9 100644 --- a/mediarepo-ui/src/app/pages/repositories/repositories.component.spec.ts +++ b/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 fixture: ComponentFixture; + let component: RepositoriesTabComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ RepositoriesComponent ] + declarations: [ RepositoriesTabComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(RepositoriesComponent); + fixture = TestBed.createComponent(RepositoriesTabComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/mediarepo-ui/src/app/pages/repositories/repositories.component.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.ts similarity index 58% rename from mediarepo-ui/src/app/pages/repositories/repositories.component.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repositories-tab.component.ts index b35dbb3..ad7d5dd 100644 --- a/mediarepo-ui/src/app/pages/repositories/repositories.component.ts +++ b/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 {RepositoryService} from "../../services/repository/repository.service"; +import {Repository} from "../../../models/Repository"; +import {RepositoryService} from "../../../services/repository/repository.service"; import {MatSnackBar} from "@angular/material/snack-bar"; import {FormBuilder, FormGroup} from "@angular/forms"; @Component({ - selector: 'app-repositories', - templateUrl: './repositories.component.html', - styleUrls: ['./repositories.component.scss'] + selector: 'app-repositories-tab', + templateUrl: './repositories-tab.component.html', + styleUrls: ['./repositories-tab.component.scss'] }) -export class RepositoriesComponent implements OnInit { +export class RepositoriesTabComponent implements OnInit { repositories: Repository[] = []; diff --git a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.html b/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.html similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.html rename to mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.html diff --git a/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.scss b/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.scss new file mode 100644 index 0000000..d3eb924 --- /dev/null +++ b/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.scss @@ -0,0 +1 @@ +@import "../../../../../styles"; diff --git a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.spec.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.spec.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.spec.ts diff --git a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.ts b/mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.ts similarity index 63% rename from mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.ts rename to mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.ts index e491129..ee92528 100644 --- a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.ts +++ b/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 {RepositoryService} from "../../../services/repository/repository.service"; +import {Repository} from "../../../../models/Repository"; +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); } diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.html b/mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.html similarity index 100% rename from mediarepo-ui/src/app/pages/home/search-page/search-page.component.html rename to mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.html diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss b/mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.scss similarity index 100% rename from mediarepo-ui/src/app/pages/home/search-page/search-page.component.scss rename to mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.scss diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.spec.ts b/mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.spec.ts similarity index 60% rename from mediarepo-ui/src/app/pages/home/search-page/search-page.component.spec.ts rename to mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.spec.ts index 2df8a8b..5402eea 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.spec.ts +++ b/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 fixture: ComponentFixture; + let component: SearchTabComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ SearchPageComponent ] + declarations: [ SearchTabComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(SearchPageComponent); + fixture = TestBed.createComponent(SearchTabComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts b/mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.ts similarity index 77% rename from mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts rename to mediarepo-ui/src/app/pages/home/search-tab/search-tab.component.ts index 510a43b..cb7c68e 100644 --- a/mediarepo-ui/src/app/pages/home/search-page/search-page.component.ts +++ b/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', - templateUrl: './search-page.component.html', - styleUrls: ['./search-page.component.scss'] + selector: 'app-search-tab', + templateUrl: './search-tab.component.html', + 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 lightbox: Lightbox, - private lightboxEvent: LightboxEvent) { + private tagService: TagService,) { } 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; } diff --git a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.scss b/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.scss deleted file mode 100644 index 42bdf1f..0000000 --- a/mediarepo-ui/src/app/pages/repositories/repository-card/repository-card.component.scss +++ /dev/null @@ -1 +0,0 @@ -@import "src/styles";