diff --git a/console-webapp/src/app/app.module.ts b/console-webapp/src/app/app.module.ts index db4582a40..854d00e8d 100644 --- a/console-webapp/src/app/app.module.ts +++ b/console-webapp/src/app/app.module.ts @@ -49,6 +49,10 @@ import { SettingsWidgetComponent } from './home/widgets/settings-widget.componen import { UserDataService } from './shared/services/userData.service'; import WhoisComponent from './settings/whois/whois.component'; import { SnackBarModule } from './snackbar.module'; +import { + RegistrarDetailsComponent, + RegistrarDetailsWrapperComponent, +} from './registrar/registrarDetails.component'; @NgModule({ declarations: [ @@ -63,6 +67,8 @@ import { SnackBarModule } from './snackbar.module'; HomeComponent, PromotionsWidgetComponent, RegistrarComponent, + RegistrarDetailsComponent, + RegistrarDetailsWrapperComponent, RegistrarSelectorComponent, ResourcesWidgetComponent, SecurityComponent, diff --git a/console-webapp/src/app/material.module.ts b/console-webapp/src/app/material.module.ts index a27951cde..bc5b6b089 100644 --- a/console-webapp/src/app/material.module.ts +++ b/console-webapp/src/app/material.module.ts @@ -45,6 +45,7 @@ import { DialogModule } from '@angular/cdk/dialog'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatChipsModule } from '@angular/material/chips'; @NgModule({ exports: [ @@ -81,6 +82,7 @@ import { MatPaginatorModule } from '@angular/material/paginator'; DialogModule, MatSnackBarModule, MatPaginatorModule, + MatChipsModule, ], }) export class MaterialModule {} diff --git a/console-webapp/src/app/registrar/registrar-selector.component.html b/console-webapp/src/app/registrar/registrar-selector.component.html index bf8241fa5..c93b08c67 100644 --- a/console-webapp/src/app/registrar/registrar-selector.component.html +++ b/console-webapp/src/app/registrar/registrar-selector.component.html @@ -13,7 +13,9 @@ Registrar +

Edit Registrar: {{ registrarInEdit.registrarId }}

+
+
+ + Registry Lock: + + True + False + + + + Onboarded TLDs: + + + {{ tld }} + + + + + + + + + +
+
+ diff --git a/console-webapp/src/app/registrar/registrarDetails.component.scss b/console-webapp/src/app/registrar/registrarDetails.component.scss new file mode 100644 index 000000000..132f0d566 --- /dev/null +++ b/console-webapp/src/app/registrar/registrarDetails.component.scss @@ -0,0 +1,8 @@ +.registrarDetails { + min-width: 30vw; + + &__input { + display: block; + margin-top: 0.5rem; + } +} diff --git a/console-webapp/src/app/registrar/registrarDetails.component.ts b/console-webapp/src/app/registrar/registrarDetails.component.ts new file mode 100644 index 000000000..9fa1e0f15 --- /dev/null +++ b/console-webapp/src/app/registrar/registrarDetails.component.ts @@ -0,0 +1,105 @@ +// Copyright 2023 The Nomulus Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Component, Injector } from '@angular/core'; +import { Registrar, RegistrarService } from './registrar.service'; +import { BreakpointObserver } from '@angular/cdk/layout'; +import { + MAT_BOTTOM_SHEET_DATA, + MatBottomSheet, + MatBottomSheetRef, +} from '@angular/material/bottom-sheet'; +import { + MAT_DIALOG_DATA, + MatDialog, + MatDialogRef, +} from '@angular/material/dialog'; +import { MatChipInputEvent } from '@angular/material/chips'; + +const MOBILE_LAYOUT_BREAKPOINT = '(max-width: 599px)'; + +@Component({ + selector: 'app-registrar-details', + templateUrl: './registrarDetails.component.html', + styleUrls: ['./registrarDetails.component.scss'], +}) +export class RegistrarDetailsComponent { + registrarInEdit!: Registrar; + private elementRef: + | MatBottomSheetRef + | MatDialogRef; + + constructor( + protected registrarService: RegistrarService, + private injector: Injector + ) { + // We only inject one, either Dialog or Bottom Sheet data + // so one of the injectors is expected to fail + try { + var params = this.injector.get(MAT_DIALOG_DATA); + this.elementRef = this.injector.get(MatDialogRef); + } catch (e) { + var params = this.injector.get(MAT_BOTTOM_SHEET_DATA); + this.elementRef = this.injector.get(MatBottomSheetRef); + } + this.registrarInEdit = JSON.parse(JSON.stringify(params.registrar)); + } + + onCancel(e: MouseEvent) { + if (this.elementRef instanceof MatBottomSheetRef) { + this.elementRef.dismiss(); + } else if (this.elementRef instanceof MatDialogRef) { + this.elementRef.close(); + } + } + + saveAndClose(e: MouseEvent) { + // TODO: Implement save call to API + this.onCancel(e); + } + + addTLD(e: MatChipInputEvent) { + this.removeTLD(e.value); // Prevent dups + this.registrarInEdit.allowedTlds = this.registrarInEdit.allowedTlds?.concat( + [e.value.toLowerCase()] + ); + } + + removeTLD(tld: string) { + this.registrarInEdit.allowedTlds = this.registrarInEdit.allowedTlds?.filter( + (v) => v != tld + ); + } +} + +@Component({ + selector: 'app-registrar-details-wrapper', + template: '', +}) +export class RegistrarDetailsWrapperComponent { + constructor( + private dialog: MatDialog, + private bottomSheet: MatBottomSheet, + protected breakpointObserver: BreakpointObserver + ) {} + + open(registrar: Registrar) { + const config = { data: { registrar } }; + if (this.breakpointObserver.isMatched(MOBILE_LAYOUT_BREAKPOINT)) { + this.bottomSheet.open(RegistrarDetailsComponent, config); + } else { + this.dialog.open(RegistrarDetailsComponent, config); + } + } +} diff --git a/console-webapp/src/app/registrar/registrarsTable.component.html b/console-webapp/src/app/registrar/registrarsTable.component.html index fcc760d7a..746ebd9b1 100644 --- a/console-webapp/src/app/registrar/registrarsTable.component.html +++ b/console-webapp/src/app/registrar/registrarsTable.component.html @@ -1,10 +1,34 @@
+ + Search + + search + + + + + + + + - + +
diff --git a/console-webapp/src/app/registrar/registrarsTable.component.scss b/console-webapp/src/app/registrar/registrarsTable.component.scss index ccb625928..21db917ae 100644 --- a/console-webapp/src/app/registrar/registrarsTable.component.scss +++ b/console-webapp/src/app/registrar/registrarsTable.component.scss @@ -7,6 +7,11 @@ overflow: auto; } + &__registrars-filter { + min-width: $min-width !important; + width: 100%; + } + &__registrars-table { min-width: $min-width !important; } @@ -16,6 +21,10 @@ } .mat-column { + &-edit { + max-width: 55px; + padding-left: 5px; + } &-driveId { min-width: 200px; word-break: break-all; diff --git a/console-webapp/src/app/registrar/registrarsTable.component.ts b/console-webapp/src/app/registrar/registrarsTable.component.ts index 379ac511a..b86d2da13 100644 --- a/console-webapp/src/app/registrar/registrarsTable.component.ts +++ b/console-webapp/src/app/registrar/registrarsTable.component.ts @@ -17,6 +17,7 @@ import { Registrar, RegistrarService } from './registrar.service'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; +import { RegistrarDetailsWrapperComponent } from './registrarDetails.component'; @Component({ selector: 'app-registrar', @@ -76,10 +77,12 @@ export class RegistrarComponent { cell: (record: Registrar) => `${record.driveFolderId || ''}`, }, ]; - displayedColumns = this.columns.map((c) => c.columnDef); + displayedColumns = ['edit'].concat(this.columns.map((c) => c.columnDef)); @ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatSort) sort!: MatSort; + @ViewChild('registrarDetailsView') + detailsComponentWrapper!: RegistrarDetailsWrapperComponent; constructor(protected registrarService: RegistrarService) { this.dataSource = new MatTableDataSource( @@ -91,4 +94,14 @@ export class RegistrarComponent { this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; } + + openDetails(event: MouseEvent, registrar: Registrar) { + event.stopPropagation(); + this.detailsComponentWrapper.open(registrar); + } + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + } }