From 579a5a43be43bfad1b42de57180dc4f83cec3af2 Mon Sep 17 00:00:00 2001 From: trivernis Date: Tue, 7 Dec 2021 19:23:36 +0100 Subject: [PATCH] Move repository form outside of add dialog Signed-off-by: trivernis --- .../src/app/components/core/core.module.ts | 2 + .../add-repository-dialog.component.html | 49 +------ .../add-repository-dialog.component.scss | 12 +- .../add-repository-dialog.component.ts | 100 ++------------ .../repository-card.component.ts | 1 + .../repository-form.component.html | 38 ++++++ .../repository-form.component.scss | 10 ++ .../repository-form.component.spec.ts | 25 ++++ .../repository-form.component.ts | 123 ++++++++++++++++++ 9 files changed, 218 insertions(+), 142 deletions(-) create mode 100644 mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.html create mode 100644 mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.scss create mode 100644 mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.spec.ts create mode 100644 mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.ts diff --git a/mediarepo-ui/src/app/components/core/core.module.ts b/mediarepo-ui/src/app/components/core/core.module.ts index 045ebbb..018c8d3 100644 --- a/mediarepo-ui/src/app/components/core/core.module.ts +++ b/mediarepo-ui/src/app/components/core/core.module.ts @@ -33,6 +33,7 @@ import {MatDialogModule} from "@angular/material/dialog"; import {MatTooltipModule} from "@angular/material/tooltip"; import {MatInputModule} from "@angular/material/input"; import {TagModule} from "../shared/tag/tag.module"; +import { RepositoryFormComponent } from './repositories-tab/repository-form/repository-form.component'; @NgModule({ @@ -45,6 +46,7 @@ import {TagModule} from "../shared/tag/tag.module"; ImportTabSidebarComponent, RepositoryCardComponent, AddRepositoryDialogComponent, + RepositoryFormComponent, ], exports: [ CoreComponent, diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html index 078faa6..3458e51 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.html @@ -1,56 +1,19 @@

Add a Repository

-
- - - Name - - - - - Type - - Local - Remote - - - - - - Path - - - - - Address - - -
-
- Status: {{this.onlineStatus}} -
+
- - -
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss index 66b7760..4fc7996 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.scss @@ -1,6 +1,6 @@ -form { - display: flex; - flex-direction: column; +app-repository-form { + width: 100%; + height: 100%; } .dialog-buttons { @@ -18,9 +18,3 @@ form { float: left; } } - -.button-folder-select { - position: absolute; - top: -10px; - right: 0; -} diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts index 7db16d3..731b9c5 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/add-repository-dialog/add-repository-dialog.component.ts @@ -1,4 +1,4 @@ -import {Component, Inject, OnInit} from "@angular/core"; +import {Component, Inject, OnInit, ViewChild} from "@angular/core"; import { AbstractControl, FormControl, @@ -11,24 +11,18 @@ import {RepositoryService} from "../../../../services/repository/repository.serv import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service"; import {dialog} from "@tauri-apps/api"; import {Repository} from "../../../../models/Repository"; +import { + RepositoryFormComponent +} from "../repository-form/repository-form.component"; @Component({ selector: "app-add-repository-dialog", templateUrl: "./add-repository-dialog.component.html", styleUrls: ["./add-repository-dialog.component.scss"] }) -export class AddRepositoryDialogComponent implements OnInit { - - formGroup = new FormGroup({ - name: new FormControl("My Repository", [Validators.required]), - repositoryType: new FormControl("local", [Validators.required]), - path: new FormControl("", [this.validatePath]), - address: new FormControl("", [this.validateAddress]) - }); +export class AddRepositoryDialogComponent { - repositories: Repository[] = []; - onlineStatus = "Unknown"; - localRepoExists = false; + @ViewChild(RepositoryFormComponent) repositoryForm!: RepositoryFormComponent; constructor( public repoService: RepositoryService, @@ -37,26 +31,13 @@ export class AddRepositoryDialogComponent implements OnInit { @Inject(MAT_DIALOG_DATA) data: any) { } - ngOnInit(): void { - this.repoService.repositories.subscribe( - repositories => this.repositories = repositories) - } - - public async checkRepositoryStatus() { - this.onlineStatus = "Checking..."; - const address = this.formGroup.value.address; - const running = await this.repoService.checkDaemonRunning(address); - console.log(running); - this.onlineStatus = running ? "Online" : "Offline"; - } - public async checkLocalRepoExists() { - this.localRepoExists = await this.repoService.checkLocalRepositoryExists( - this.formGroup.value.path); + this.repositoryForm.localRepoExists = await this.repoService.checkLocalRepositoryExists( + this.repositoryForm.formGroup.value.path); } public async initLocalRepository() { - const path = this.formGroup.value.path; + const path = this.repositoryForm.formGroup.value.path; try { await this.repoService.initRepository(path); } catch (err) { @@ -66,7 +47,7 @@ export class AddRepositoryDialogComponent implements OnInit { } public async addRepository() { - let {name, repositoryType, path, address} = this.formGroup.value; + let {name, repositoryType, path, address} = this.repositoryForm.formGroup.value; path = repositoryType === "local" ? path : undefined; address = repositoryType === "remote" ? address : undefined; try { @@ -81,65 +62,4 @@ export class AddRepositoryDialogComponent implements OnInit { public closeDialog() { this.dialogRef.close(); } - - public async openFolderDialog() { - const path = await dialog.open({ - directory: true, - multiple: false, - }); - this.formGroup.get("path")?.setValue(path); - await this.checkLocalRepoExists(); - } - - public async onTypeChange(type: string) { - setTimeout(() => { - const path = this.formGroup.get("path"); - const address = this.formGroup.get("address"); - switch (type) { - case "local": - address?.clearValidators(); - address?.setErrors(null); - path?.setValidators(this.validatePath); - path?.setErrors(this.validatePath(path)); - break; - case "remote": - path?.clearValidators(); - path?.setErrors(null); - address?.setValidators(this.validateAddress); - address?.setErrors(this.validateAddress(address)); - break; - } - }, 0); - } - - validateName() { - const control = this.formGroup.get("name"); - const value = control?.value; - - if (this.repositories.find(r => r.name === value)) { - control?.setErrors({nameAlreadyExists: value}); - } - } - - validatePath(control: AbstractControl): ValidationErrors | null { - const repositoryType = control.parent?.get( - "repositoryType")?.value ?? "local"; - - if (repositoryType === "local") { - return control.value.length > 0 ? null : {valueRequired: control.value}; - } - return null; - } - - validateAddress(control: AbstractControl): ValidationErrors | null { - const repositoryType = control.parent?.get( - "repositoryType")?.value ?? "remote"; - - if (repositoryType === "remote") { - const match = /(\d+\.){3}\d+:\d+|\S+:\d+/.test(control.value) - return match ? null : {invalidAddress: control.value}; - } - - return null; - } } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts index e4f5abb..fa56e82 100644 --- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts @@ -40,6 +40,7 @@ export class RepositoryCardComponent implements OnInit, OnDestroy { } } + public isSelectedRepository(): boolean { return this.repoService.selectedRepository.getValue()?.name === this.repository.name } diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.html new file mode 100644 index 0000000..d0af48f --- /dev/null +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.html @@ -0,0 +1,38 @@ +
+ + + Name + + + + + Type + + Local + Remote + + + + + + Path + + + + + Address + + +
+
+ Status: {{this.onlineStatus}} +
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.scss new file mode 100644 index 0000000..cd7f4c3 --- /dev/null +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.scss @@ -0,0 +1,10 @@ +form { + display: flex; + flex-direction: column; +} + +.button-folder-select { + position: absolute; + top: -10px; + right: 0; +} diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.spec.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.spec.ts new file mode 100644 index 0000000..a44c814 --- /dev/null +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RepositoryFormComponent } from './repository-form.component'; + +describe('RepositoryFormComponent', () => { + let component: RepositoryFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RepositoryFormComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RepositoryFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.ts new file mode 100644 index 0000000..1d50540 --- /dev/null +++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-form/repository-form.component.ts @@ -0,0 +1,123 @@ +import {Component, Input, OnInit, Output} from "@angular/core"; +import { + AbstractControl, + FormControl, + FormGroup, ValidationErrors, + Validators +} from "@angular/forms"; +import {Repository} from "../../../../models/Repository"; +import { + RepositoryService +} from "../../../../services/repository/repository.service"; +import {dialog} from "@tauri-apps/api"; +import { + ErrorBrokerService +} from "../../../../services/error-broker/error-broker.service"; + +@Component({ + selector: "app-repository-form", + templateUrl: "./repository-form.component.html", + styleUrls: ["./repository-form.component.scss"] +}) +export class RepositoryFormComponent implements OnInit { + + @Input() name: string = "My Repository"; + @Input() repositoryType: "local" | "remote" = "local"; + @Input() path: string = ""; + @Input() address: string = ""; + + @Output() formGroup = new FormGroup({ + name: new FormControl(this.name, [Validators.required]), + repositoryType: new FormControl(this.repositoryType, [Validators.required]), + path: new FormControl(this.path, [this.validatePath]), + address: new FormControl(this.address, [this.validateAddress]) + }); + + onlineStatus = "Unknown"; + localRepoExists = false; + + repositories: Repository[] = []; + + constructor(public repoService: RepositoryService, private errorBroker: ErrorBrokerService) { + + } + + ngOnInit(): void { + this.repoService.repositories.subscribe( + repositories => this.repositories = repositories) + } + + public async checkRepositoryStatus() { + this.onlineStatus = "Checking..."; + const address = this.formGroup.value.address; + const running = await this.repoService.checkDaemonRunning(address); + console.log(running); + this.onlineStatus = running ? "Online" : "Offline"; + } + + public async checkLocalRepoExists() { + this.localRepoExists = await this.repoService.checkLocalRepositoryExists( + this.formGroup.value.path); + } + + public async openFolderDialog() { + const path = await dialog.open({ + directory: true, + multiple: false, + }); + this.formGroup.get("path")?.setValue(path); + await this.checkLocalRepoExists(); + } + + public async onTypeChange(type: string) { + setTimeout(() => { + const path = this.formGroup.get("path"); + const address = this.formGroup.get("address"); + switch (type) { + case "local": + address?.clearValidators(); + address?.setErrors(null); + path?.setValidators(this.validatePath); + path?.setErrors(this.validatePath(path)); + break; + case "remote": + path?.clearValidators(); + path?.setErrors(null); + address?.setValidators(this.validateAddress); + address?.setErrors(this.validateAddress(address)); + break; + } + }, 0); + } + + validateName() { + const control = this.formGroup.get("name"); + const value = control?.value; + + if (this.repositories.find(r => r.name === value)) { + control?.setErrors({nameAlreadyExists: value}); + } + } + + validatePath(control: AbstractControl): ValidationErrors | null { + const repositoryType = control.parent?.get( + "repositoryType")?.value ?? "local"; + + if (repositoryType === "local") { + return control.value.length > 0 ? null : {valueRequired: control.value}; + } + return null; + } + + validateAddress(control: AbstractControl): ValidationErrors | null { + const repositoryType = control.parent?.get( + "repositoryType")?.value ?? "remote"; + + if (repositoryType === "remote") { + const match = /(\d+\.){3}\d+:\d+|\S+:\d+/.test(control.value) + return match ? null : {invalidAddress: control.value}; + } + + return null; + } +}