make apikeys editor better
This commit is contained in:
parent
5878f0ad1d
commit
9580ccc928
|
@ -0,0 +1,5 @@
|
||||||
|
<mat-form-field class="editfield" appearance="outline">
|
||||||
|
<mat-label>Name</mat-label>
|
||||||
|
<input matInput [formControl]="field" (change)="update($event)">
|
||||||
|
<mat-error *ngIf="field.invalid">{{getErrorMessage()}}</mat-error>
|
||||||
|
</mat-form-field>
|
|
@ -0,0 +1,6 @@
|
||||||
|
.editfield {
|
||||||
|
margin-top: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||||
|
import { FormControl, Validators } from '@angular/forms';
|
||||||
|
import { Logger } from 'src/app/services/logger/logger.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-settings-apikey-editor',
|
||||||
|
templateUrl: './apikey-editor.component.html',
|
||||||
|
styleUrls: ['./apikey-editor.component.scss'],
|
||||||
|
})
|
||||||
|
export class SettingsApiKeyEditorComponent {
|
||||||
|
private readonly logger = new Logger(SettingsApiKeyEditorComponent.name);
|
||||||
|
|
||||||
|
@Input() set value(value: string) {
|
||||||
|
this.field.setValue(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Output('changed') change = new EventEmitter<string>();
|
||||||
|
|
||||||
|
field = new FormControl('', [
|
||||||
|
Validators.required,
|
||||||
|
Validators.minLength(3),
|
||||||
|
Validators.maxLength(255),
|
||||||
|
]);
|
||||||
|
|
||||||
|
async update(event: Event) {
|
||||||
|
if (this.field.invalid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = this.field.value;
|
||||||
|
if (value === null) return;
|
||||||
|
|
||||||
|
this.change.emit(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
getErrorMessage() {
|
||||||
|
if (this.field.hasError('required')) {
|
||||||
|
return 'You must enter a value';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.field.hasError('minlength')) {
|
||||||
|
return 'Minimum length is 3';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.field.hasError('maxlength')) {
|
||||||
|
return 'Maximum length is 255';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Unknown error';
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,10 +4,10 @@
|
||||||
<ng-container matColumnDef="name">
|
<ng-container matColumnDef="name">
|
||||||
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
||||||
<mat-cell *matCellDef="let apikey">
|
<mat-cell *matCellDef="let apikey">
|
||||||
<mat-form-field class="editfield" appearance="outline">
|
<app-settings-apikey-editor
|
||||||
<mat-label>Name</mat-label>
|
[value]="apikey.name"
|
||||||
<input matInput [value]="apikey.name" maxlength="255" (change)="updateKeyName($event, apikey.id)">
|
(changed)="updateKeyName($event, apikey.id)"
|
||||||
</mat-form-field>
|
></app-settings-apikey-editor>
|
||||||
</mat-cell>
|
</mat-cell>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
@ -18,10 +18,3 @@ mat-table {
|
||||||
.icon-red {
|
.icon-red {
|
||||||
color: #f44336;
|
color: #f44336;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editfield {
|
|
||||||
margin-top: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
margin-right: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
|
@ -135,17 +135,7 @@ export class SettingsApiKeysComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async updateKeyName(event: Event, apikeyID: string) {
|
async updateKeyName(name: string, apikeyID: string) {
|
||||||
const name = (event.target as HTMLInputElement).value;
|
|
||||||
|
|
||||||
if (name.length < 3) {
|
|
||||||
this.utilService.showSnackBar(
|
|
||||||
'Name must be at least 3 characters long',
|
|
||||||
SnackBarType.Warning,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await this.apikeysService.updateApiKey(apikeyID, name);
|
const result = await this.apikeysService.updateApiKey(apikeyID, name);
|
||||||
|
|
||||||
if (HasFailed(result)) {
|
if (HasFailed(result)) {
|
||||||
|
|
|
@ -1,19 +1,20 @@
|
||||||
import { ClipboardModule } from '@angular/cdk/clipboard';
|
import { ClipboardModule } from '@angular/cdk/clipboard';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatChipsModule } from '@angular/material/chips';
|
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
import { MomentModule } from 'ngx-moment';
|
import { MomentModule } from 'ngx-moment';
|
||||||
import { FabModule } from 'src/app/components/fab/fab.module';
|
import { FabModule } from 'src/app/components/fab/fab.module';
|
||||||
|
import { SettingsApiKeyEditorComponent } from './apikey-editor/apikey-editor.component';
|
||||||
import { SettingsApiKeysComponent } from './settings-apikeys.component';
|
import { SettingsApiKeysComponent } from './settings-apikeys.component';
|
||||||
import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module';
|
import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [SettingsApiKeysComponent],
|
declarations: [SettingsApiKeysComponent, SettingsApiKeyEditorComponent],
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
SettingsApiKeysRoutingModule,
|
SettingsApiKeysRoutingModule,
|
||||||
|
@ -22,9 +23,9 @@ import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module'
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatPaginatorModule,
|
MatPaginatorModule,
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatChipsModule,
|
|
||||||
MomentModule,
|
MomentModule,
|
||||||
ClipboardModule,
|
ClipboardModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
FabModule,
|
FabModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue