Move repository form outside of add dialog
Signed-off-by: trivernis <trivernis@protonmail.com>pull/4/head
parent
1dc17f0aef
commit
579a5a43be
@ -1,56 +1,19 @@
|
|||||||
<h1 mat-dialog-title>Add a Repository</h1>
|
<h1 mat-dialog-title>Add a Repository</h1>
|
||||||
<div mat-dialog-content>
|
<div mat-dialog-content>
|
||||||
<form [formGroup]="formGroup">
|
<app-repository-form #repoForm></app-repository-form>
|
||||||
|
|
||||||
<mat-form-field matTooltip="A unique name for the repository" matTooltipShowDelay="1000">
|
|
||||||
<mat-label>Name</mat-label>
|
|
||||||
<input (blur)="validateName()" (change)="validateName()" (input)="validateName()" formControlName="name"
|
|
||||||
matInput>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field matTooltip="Type of repository if it's on the local system or somewhere else"
|
|
||||||
matTooltipShowDelay="1000">
|
|
||||||
<mat-label>Type</mat-label>
|
|
||||||
<mat-select #repoTypeSelect (selectionChange)="onTypeChange(repoTypeSelect.value)"
|
|
||||||
formControlName="repositoryType">
|
|
||||||
<mat-option value="local">Local</mat-option>
|
|
||||||
<mat-option value="remote">Remote</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field *ngIf="repoTypeSelect.value === 'local'"
|
|
||||||
matTooltip="Path where the repository is located or should be created"
|
|
||||||
matTooltipShowDelay="1000">
|
|
||||||
<button (click)="openFolderDialog()" class="button-folder-select" mat-button>
|
|
||||||
<ng-icon name="mat-folder"></ng-icon>
|
|
||||||
</button>
|
|
||||||
<mat-label>Path</mat-label>
|
|
||||||
<input (change)="this.checkLocalRepoExists()" formControlName="path" matInput>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field *ngIf="repoTypeSelect.value === 'remote'"
|
|
||||||
matTooltip="IP address and port of the remote repository"
|
|
||||||
matTooltipShowDelay="1000">
|
|
||||||
<mat-label>Address</mat-label>
|
|
||||||
<input formControlName="address" matInput>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
<div *ngIf="repoTypeSelect.value === 'remote'" class="connection-state">
|
|
||||||
<span>Status:</span> <span>{{this.onlineStatus}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-buttons" mat-dialog-actions>
|
<div class="dialog-buttons" mat-dialog-actions>
|
||||||
<button (click)="closeDialog()" color="accent" mat-stroked-button>Cancel</button>
|
<button (click)="closeDialog()" color="accent" mat-stroked-button>Cancel</button>
|
||||||
<button (click)="addRepository()" *ngIf="repoTypeSelect.value === 'remote' || this.localRepoExists"
|
<button (click)="addRepository()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote' || repoForm.localRepoExists"
|
||||||
[disabled]="!formGroup.valid" color="primary" mat-flat-button
|
[disabled]="!repoForm.formGroup.valid" color="primary" mat-flat-button
|
||||||
matTooltip="Add the existing repository">Add
|
matTooltip="Add the existing repository">Add
|
||||||
</button>
|
</button>
|
||||||
<button (click)="this.initLocalRepository()" *ngIf="repoTypeSelect.value === 'local' && !this.localRepoExists"
|
<button (click)="this.initLocalRepository()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'local' && !repoForm.localRepoExists"
|
||||||
[disabled]="!formGroup.valid"
|
[disabled]="!repoForm.formGroup.valid"
|
||||||
color="accent" mat-flat-button
|
color="accent" mat-flat-button
|
||||||
matTooltip="Initialize the repository in the specified path">Init
|
matTooltip="Initialize the repository in the specified path">Init
|
||||||
</button>
|
</button>
|
||||||
<button (click)="checkRepositoryStatus()" *ngIf="repoTypeSelect.value === 'remote'" [disabled]="!formGroup.valid"
|
<button (click)="repoForm.checkRepositoryStatus()" *ngIf="repoForm.formGroup.get('repositoryType')?.value === 'remote'" [disabled]="!repoForm.formGroup.valid"
|
||||||
class="check-connection-button" mat-stroked-button>Check Connection
|
class="check-connection-button" mat-stroked-button>Check Connection
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -0,0 +1,38 @@
|
|||||||
|
<form [formGroup]="formGroup">
|
||||||
|
|
||||||
|
<mat-form-field matTooltip="A unique name for the repository" matTooltipShowDelay="1000">
|
||||||
|
<mat-label>Name</mat-label>
|
||||||
|
<input (blur)="validateName()" (change)="validateName()" (input)="validateName()" formControlName="name"
|
||||||
|
matInput>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field matTooltip="Type of repository if it's on the local system or somewhere else"
|
||||||
|
matTooltipShowDelay="1000">
|
||||||
|
<mat-label>Type</mat-label>
|
||||||
|
<mat-select #repoTypeSelect (selectionChange)="onTypeChange(repoTypeSelect.value)"
|
||||||
|
formControlName="repositoryType">
|
||||||
|
<mat-option value="local">Local</mat-option>
|
||||||
|
<mat-option value="remote">Remote</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field *ngIf="repoTypeSelect.value === 'local'"
|
||||||
|
matTooltip="Path where the repository is located or should be created"
|
||||||
|
matTooltipShowDelay="1000">
|
||||||
|
<button (click)="openFolderDialog()" class="button-folder-select" mat-button>
|
||||||
|
<ng-icon name="mat-folder"></ng-icon>
|
||||||
|
</button>
|
||||||
|
<mat-label>Path</mat-label>
|
||||||
|
<input (change)="this.checkLocalRepoExists()" formControlName="path" matInput>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field *ngIf="repoTypeSelect.value === 'remote'"
|
||||||
|
matTooltip="IP address and port of the remote repository"
|
||||||
|
matTooltipShowDelay="1000">
|
||||||
|
<mat-label>Address</mat-label>
|
||||||
|
<input formControlName="address" matInput>
|
||||||
|
</mat-form-field>
|
||||||
|
</form>
|
||||||
|
<div *ngIf="repoTypeSelect.value === 'remote'" class="connection-state">
|
||||||
|
<span>Status:</span> <span>{{this.onlineStatus}}</span>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-folder-select {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
@ -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<RepositoryFormComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ RepositoryFormComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(RepositoryFormComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue