Add repository overview to tabs

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent e9a4602ee0
commit d0b832fc89

@ -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);
}
}

@ -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({

@ -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 {

@ -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 }) {

@ -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,

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

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

@ -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) {}
}

@ -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',

@ -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<RepositoriesComponent>;
let component: RepositoriesTabComponent;
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();
});

@ -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[] = [];

@ -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);
}

@ -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<SearchPageComponent>;
let component: SearchTabComponent;
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();
});

@ -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;
if (this.fileSearch) {
await this.fileSearch.searchForFiles();
} else {
await this.fileService.findFiles([], [new SortKey("FileImportedTime", "Ascending", undefined)])
}
this.contentLoading = false;
}
Loading…
Cancel
Save