+ Edit Registrar: {{ registrarInEdit.registrarId }}
+
+
+
+
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 @@
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();
+ }
}