Add "Registries" and "Land Registry" modules

app/src/app/app-routing.module.ts

@@ -38,6 +38,8 @@ import { ProjectsComponent } from './projects/projects.component';
 import { FilesComponent } from './files/files';
 import { ProjectComponent } from './projects/project/project.component';
 import { AdminComponent } from './admin/admin';
+import { RegistryComponent } from './registries/registry/registry.component';
+import { RegistriesComponent } from './registries/registries.component';
 
 const routes: Routes = [
   {
@@ -120,6 +122,22 @@ const routes: Routes = [
       data: LoadingResolverService,
     },
   },
+  {
+    path: 'registries',
+    component: RegistriesComponent,
+    canActivate: [AuthGuard],
+    resolve: {
+      data: LoadingResolverService,
+    },
+  },
+  {
+    path: 'registries/:id',
+    component: RegistryComponent,
+    canActivate: [AuthGuard],
+    resolve: {
+      data: LoadingResolverService,
+    },
+  },
   {
     path: 'notifications',
     component: NotificationsComponent,

app/src/app/app.html

@@ -187,7 +187,7 @@
           <mat-icon>home</mat-icon>
           <span *ngIf="displayLabels">{{'App.Home' | translate }}</span>
         </a>
-        <a
+        <!-- <a
           [routerLink]="['/feed']"
           mat-menu-item
           (click)="toggleMenu()"
@@ -196,7 +196,7 @@
         >
           <mat-icon>notes</mat-icon>
           <span *ngIf="displayLabels">{{ 'App.Feed' | translate }}</span>
-        </a>
+        </a> -->
         <!-- <a
           [routerLink]="['/notifications']"
           mat-menu-item
@@ -261,6 +261,17 @@
           <mat-icon>location_city</mat-icon>
           <span *ngIf="displayLabels">{{ 'App.Projects' | translate }}</span>
         </a>
+
+        <a
+        [routerLink]="['/registries']"
+        mat-menu-item
+        (click)="toggleMenu()"
+        [routerLinkActiveOptions]="{ exact: false }"
+        routerLinkActive="active-nav-link"
+      >
+        <mat-icon>fact_check</mat-icon>
+        <span *ngIf="displayLabels">{{ 'App.Registries' | translate }}</span>
+      </a>
         <a
           [routerLink]="['/notes']"
           mat-menu-item

app/src/app/app.module.ts

@@ -167,6 +167,8 @@ import { ProjectComponent } from './projects/project/project.component';
 import { AdminComponent } from './admin/admin';
 import { MatSortModule } from '@angular/material/sort';
 import { DatePipe } from '@angular/common';
+import { RegistriesComponent } from './registries/registries.component';
+import { RegistryComponent } from './registries/registry/registry.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -263,6 +265,8 @@ import { DatePipe } from '@angular/common';
     FilesComponent,
     ProjectComponent,
     AdminComponent,
+    RegistriesComponent,
+    RegistryComponent
   ],
   imports: [
     HttpClientModule,

app/src/app/registries/registries.component.css

@@ -0,0 +1,64 @@
+.loading {
+  margin: auto;
+}
+
+.input-full-width {
+  width: 100% !important;
+}
+
+.search {
+  margin-top: 1em;
+  padding: 1em 1em 0em 1em;
+  margin-bottom: 1em;
+  border-radius: 10px;
+}
+
+.circle-button {
+}
+
+.circle-button-icon {
+}
+
+.circle-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  column-gap: 1em;
+
+  margin-top: 1em;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-radius: 10px;
+}
+
+.circle-item:nth-child(1) {
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
+}
+
+.circle-item:nth-child(2) {
+  order: 0;
+  flex: 1 1 auto;
+  align-self: auto;
+}
+
+.circle-item:nth-child(3) {
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
+}
+
+.circle-actions button {
+  margin-right: 0.4em;
+  margin-bottom: 0.4em;
+}
+
+
+.project-logo {
+  max-height: 64px;
+  max-width: 64px;
+}

app/src/app/registries/registries.component.html

@@ -0,0 +1,84 @@
+<!-- <mat-progress-bar *ngIf="!events || events.length == 0" mode="indeterminate"></mat-progress-bar> -->
+
+<div class="feed-page">
+  <!-- <p>Circles is how you organize people you follow. Different circles can have different rules applied and circles is an important way to make the experience more enjoyable.</p> -->
+
+  <mat-card class="circle circle-container clickable" [routerLink]="['/registries', project._id]" *ngFor="let project of projects">
+    <div class="circle-item">
+      <mat-icon matListItemIcon  class="project-logo">{{ project.icon }}</mat-icon>
+    </div>
+    <div class="circle-item clickable">
+      {{ project.name }}<br />
+      <span class="dimmed clickable"><span>{{ 'Circles.Count' | translate }}: {{ countMembers(project) }}</span></span
+      ><br />
+      <!-- <span class="dimmed clickable"><span *ngIf="circle.public">{{ 'Circles.Public' | translate }}</span> <span *ngIf="!circle.public">{{ 'Circles.Private' | translate }}</span> - {{ circle.style | circlestyle }} - {{ 'Circles.Created' | translate }}: {{ circle.created | ago }}</span> -->
+    </div>
+    <div class="circle-item clickable">
+      <button class="circle-button" mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon class="circle-button-icon">more_vert</mat-icon>
+      </button>
+
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="copyMenu">
+          <mat-icon>copy_all</mat-icon>
+          <span>{{ 'Circles.Copy' | translate }}</span>
+        </button>
+        <button *ngIf="project.id" mat-menu-item (click)="deleteCircle(project.id)">
+          <mat-icon>delete</mat-icon>
+          <span>{{ 'Circles.DeleteCircle' | translate }}</span>
+        </button>
+      </mat-menu>
+
+      <mat-menu #copyMenu="matMenu">
+        <button mat-menu-item (click)="copyPubKeys(project)">
+          <mat-icon>content_copy</mat-icon>
+          <span>{{ 'Circles.PublicKeysNpub' | translate }}</span>
+        </button>
+        <button mat-menu-item (click)="copyPubKeysHex(project)">
+          <mat-icon>content_copy</mat-icon>
+          <span>{{ 'Circles.PublicKeysHex' | translate }}</span>
+        </button>
+      </mat-menu>
+    </div>
+  </mat-card>
+
+  <!-- <mat-card class="circle-container" *ngFor="let circle of circles">
+    <div class="circle-item"><mat-icon matListItemIcon [style.color]="circle.color">trip_origin</mat-icon></div>
+    <div class="circle-item">
+      {{ circle.name }}<br />
+      <span class="dimmed"
+        ><span>Count: {{ countMembers(circle) }}</span></span
+      ><br />
+      <span class="dimmed"><span *ngIf="circle.public">Public</span> <span *ngIf="!circle.public">Private</span> - {{ circle.style | circlestyle }} - Created: {{ circle.created | ago }}</span>
+    </div>
+    <div class="circle-item">
+      <button class="circle-button" mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon class="circle-button-icon">more_vert</mat-icon>
+      </button>
+
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="copyMenu">
+          <mat-icon>copy_all</mat-icon>
+          <span>Copy</span>
+        </button>
+        <button *ngIf="circle.id" mat-menu-item (click)="deleteCircle(circle.id)">
+          <mat-icon>delete</mat-icon>
+          <span>Delete Circle</span>
+        </button>
+      </mat-menu>
+
+      <mat-menu #copyMenu="matMenu">
+        <button mat-menu-item (click)="copyPubKeys(circle)">
+          <mat-icon>content_copy</mat-icon>
+          <span>Public Keys (npub)</span>
+        </button>
+        <button mat-menu-item (click)="copyPubKeysHex(circle)">
+          <mat-icon>content_copy</mat-icon>
+          <span>Public Keys (hex)</span>
+        </button>
+      </mat-menu>
+    </div>
+  </mat-card> -->
+
+  <!-- <small>{{ 'Circles.CirclesDescription' | translate }}</small> -->
+</div>

app/src/app/registries/registries.component.ts

@@ -0,0 +1,153 @@
+import { ChangeDetectorRef, Component, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { ApplicationState } from '../services/applicationstate';
+import { Utilities } from '../services/utilities';
+import { DataValidation } from '../services/data-validation';
+import { Circle, NostrProfileDocument } from '../services/interfaces';
+import { ProfileService } from '../services/profile';
+import { CircleService } from '../services/circle';
+import { CircleDialog } from '../shared/create-circle-dialog/create-circle-dialog';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthenticationService } from '../services/authentication';
+import { copyToClipboard } from '../shared/utilities';
+import { Subscription, tap } from 'rxjs';
+import { DataService } from '../services/data';
+import { NavigationService } from '../services/navigation';
+import { ApiService } from '../services/api.service';
+
+@Component({
+  selector: 'app-registries',
+  templateUrl: './registries.component.html',
+  styleUrls: ['./registries.component.css'],
+})
+export class RegistriesComponent {
+  publicKey?: string | null;
+  loading = false;
+  searchTerm: any;
+
+  constructor(
+    public navigation: NavigationService,
+    public appState: ApplicationState,
+    public circleService: CircleService,
+    private profileService: ProfileService,
+    public dialog: MatDialog,
+    private validator: DataValidation,
+    private utilities: Utilities,
+    private authService: AuthenticationService,
+    private router: Router,
+    private dataService: DataService,
+    private snackBar: MatSnackBar,
+    private cd: ChangeDetectorRef,
+    private ngZone: NgZone,
+    private apiService: ApiService
+  ) {}
+
+  ngOnDestroy() {
+    this.utilities.unsubscribe(this.subscriptions);
+  }
+
+  async deleteCircle(id: number) {
+    const pubKeys = this.getFollowingInCircle(id).map((f) => f.pubkey);
+
+    await this.circleService.delete(id);
+
+    for (var i = 0; i < pubKeys.length; i++) {
+      await this.profileService.setCircle(pubKeys[i], 0);
+    }
+  }
+
+  countMembers(circle: Circle) {
+    return this.getFollowingInCircle(circle.id).length;
+  }
+
+  subscriptions: Subscription[] = [];
+
+  copy(text: string) {
+    copyToClipboard(text);
+
+    this.snackBar.open('Copied to clipboard', 'Hide', {
+      duration: 2500,
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom',
+    });
+  }
+
+  getFollowingInCircle(id?: number) {
+    if (id == null) {
+      return this.profileService.following.filter(
+        (f) => f.circle == null || f.circle == 0
+      );
+    } else {
+      return this.profileService.following.filter((f) => f.circle == id);
+    }
+  }
+
+  copyPubKeys(circle: Circle) {
+    let pubkeys = this.getPublicKeys(circle);
+    pubkeys = pubkeys.map((k) => this.utilities.getNostrIdentifier(k));
+    this.copy(JSON.stringify(pubkeys));
+  }
+
+  copyPubKeysHex(circle: Circle) {
+    const pubkeys = this.getPublicKeys(circle);
+    this.copy(JSON.stringify(pubkeys));
+  }
+
+  private getPublicKeys(circle: Circle) {
+    const profiles = this.getFollowingInCircle(circle.id);
+    const pubkeys = profiles.map((p) => p.pubkey);
+    return pubkeys;
+  }
+
+  private getPublicPublicKeys() {
+    // console.log(this.items);
+    console.log(this.profileService.following);
+
+    const items: string[] = [];
+
+    for (let i = 0; i < this.circleService.circles.length; i++) {
+      const circle = this.circleService.circles[i];
+
+      if (circle.public) {
+        const profiles = this.getFollowingInCircle(circle.id);
+        const pubkeys = profiles.map((p) => p.pubkey);
+        items.push(...pubkeys);
+      }
+    }
+
+    return items;
+  }
+
+  getNpub(hex: string) {
+    return this.utilities.getNostrIdentifier(hex);
+  }
+
+  createCircle(): void {
+    const dialogRef = this.dialog.open(CircleDialog, {
+      data: { name: '', style: 1, public: true },
+      maxWidth: '100vw',
+      panelClass: 'full-width-dialog',
+    });
+
+    dialogRef.afterClosed().subscribe(async (result) => {
+      if (!result) {
+        return;
+      }
+
+      this.circleService.put(result);
+    });
+  }
+
+  projects: any[] = [];
+
+  async ngOnInit() {
+    this.appState.updateTitle('Registries');
+    this.appState.showBackButton = false;
+    this.appState.actions = [];
+
+    this.projects = await this.apiService.registries();
+
+    // this.subscriptions.push(this.profileService.items$.subscribe((profiles) => (this.following = profiles)) as Subscription);
+  }
+}