Add multiple tabs of one type
Signed-off-by: trivernis <trivernis@protonmail.com>pull/4/head
parent
481114052e
commit
20d527f195
@ -1,13 +1,33 @@
|
|||||||
<div id="content">
|
<div id="content">
|
||||||
<mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)">
|
<mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group">
|
||||||
<mat-tab label="Repositories">
|
<mat-tab label="Repositories">
|
||||||
<app-repositories-tab></app-repositories-tab>
|
<app-repositories-tab></app-repositories-tab>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
<mat-tab *ngIf="this.selectedRepository" label="Files">
|
<mat-tab *ngFor="let tab of tabs">
|
||||||
<app-files-tab></app-files-tab>
|
<ng-template mat-tab-label>
|
||||||
|
<div class="tab-label-div" (click)="this.onMouseClickTabLabel(tab, $event)">
|
||||||
|
{{tab.category}}
|
||||||
|
<button class="close-tab-button" mat-icon-button (click)="this.closeTab(tab)">
|
||||||
|
<ng-icon name="mat-close"></ng-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
<app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
|
||||||
|
<app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
<mat-tab *ngIf="this.selectedRepository" label="Import">
|
<mat-tab *ngIf="this.newTab" label="New Tab">
|
||||||
<app-import-tab></app-import-tab>
|
<div class="new-tab-content">
|
||||||
|
Select the tab type
|
||||||
|
<button mat-flat-button (click)="this.addFilesTab()" color="primary">Files</button>
|
||||||
|
<button mat-flat-button (click)="this.addImportTab()" color="primary">Import</button>
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
<mat-tab disabled>
|
||||||
|
<ng-template mat-tab-label>
|
||||||
|
<button class="new-tab-button" mat-icon-button (click)="this.addTab()">
|
||||||
|
<ng-icon name="mat-plus"></ng-icon>
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
export enum TabCategory {
|
||||||
|
Files = "Files",
|
||||||
|
Import = "Import",
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import {BehaviorSubject} from "rxjs";
|
||||||
|
import {TabCategory} from "./TabCategory";
|
||||||
|
import {FileService} from "../services/file/file.service";
|
||||||
|
import {File} from "./File";
|
||||||
|
import {FilterExpression} from "./FilterExpression";
|
||||||
|
import {SortKey} from "./SortKey";
|
||||||
|
|
||||||
|
export class TabState {
|
||||||
|
public uuid: number;
|
||||||
|
public category: TabCategory;
|
||||||
|
public files = new BehaviorSubject<File[]>([]);
|
||||||
|
|
||||||
|
private fileService: FileService;
|
||||||
|
|
||||||
|
constructor(uuid: number, category: TabCategory, fileService: FileService) {
|
||||||
|
this.category = category;
|
||||||
|
this.uuid = uuid;
|
||||||
|
this.fileService = fileService;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async loadAllFiles() {
|
||||||
|
const files = await this.fileService.getAllFiles();
|
||||||
|
this.files.next(files);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async findFiles(filters: FilterExpression[], sortBy: SortKey[]) {
|
||||||
|
const files = await this.fileService.findFiles(filters, sortBy);
|
||||||
|
this.files.next(files);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,17 +1,35 @@
|
|||||||
import {Injectable} from "@angular/core";
|
import {Injectable} from "@angular/core";
|
||||||
import {BehaviorSubject} from "rxjs";
|
import {BehaviorSubject} from "rxjs";
|
||||||
|
import {TabState} from "../../models/TabState.rs";
|
||||||
|
import {TabCategory} from "../../models/TabCategory";
|
||||||
|
import {FileService} from "../file/file.service";
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: "root"
|
providedIn: "root"
|
||||||
})
|
})
|
||||||
export class TabService {
|
export class TabService {
|
||||||
|
|
||||||
|
private tabIdCounter = 0;
|
||||||
public selectedTab = new BehaviorSubject<number>(0);
|
public selectedTab = new BehaviorSubject<number>(0);
|
||||||
|
public tabs = new BehaviorSubject<TabState[]>([]);
|
||||||
|
|
||||||
constructor() {
|
constructor(private fileService: FileService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
public setSelectedTab(index: number) {
|
public setSelectedTab(index: number) {
|
||||||
this.selectedTab.next(index);
|
this.selectedTab.next(index);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public addTab(category: TabCategory): TabState {
|
||||||
|
const state = new TabState(this.tabIdCounter++, category, this.fileService);
|
||||||
|
this.tabs.next([...this.tabs.value, state]);
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
public closeTab(uuid: number) {
|
||||||
|
const index = this.tabs.value.findIndex(t => t.uuid === uuid);
|
||||||
|
const tabs = this.tabs.value;
|
||||||
|
tabs.splice(index, 1)
|
||||||
|
this.tabs.next(tabs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue