chore: template for message preview and download (wip)

nmshd · Feb 8, 2024 · fedb894 · fedb894
1 parent beb43ec
commit fedb894
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 12 deletions.
diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts b/AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts
@@ -43,6 +43,7 @@ import { DashboardComponent } from "./components/dashboard/dashboard.component";
 import { PageNotFoundComponent } from "./components/error/page-not-found/page-not-found.component";
 import { AssignQuotasDialogComponent } from "./components/quotas/assign-quotas-dialog/assign-quotas-dialog.component";
 import { IdentityDetailsComponent } from "./components/quotas/identity/identity-details/identity-details.component";
+import { DownloadMessageDialogComponent } from "./components/quotas/identity/identity-details/download-message-dialog/download-message-dialog.component";
 import { IdentityListComponent } from "./components/quotas/identity/identity-list/identity-list.component";
 import { IdentityDetailsRelationshipsComponent } from "./components/quotas/identity/identity-details/identity-details-relationships/identity-details-relationships.component";
 import { IdentityDetailsMessagesComponent } from "./components/quotas/identity/identity-details/identity-details-messages/identity-details-messages.component";
@@ -80,7 +81,8 @@ import { IdentityDetailsMessageRecipientsDialogComponent } from "./components/qu
         ClientEditComponent,
         AssignQuotasDialogComponent,
         ConfirmationDialogComponent,
-        IdentityDetailsMessageRecipientsDialogComponent
+        IdentityDetailsMessageRecipientsDialogComponent,
+        DownloadMessageDialogComponent
     ],
     imports: [
         FormsModule,

diff --git a/...s/identity/identity-details/download-message-dialog/download-message-dialog.component.css b/...s/identity/identity-details/download-message-dialog/download-message-dialog.component.css
@@ -0,0 +1,8 @@
+.container {
+    max-width: 400px;
+}
+
+.preview-container {
+    max-width: 800px;
+    max-height: 700px;
+}
diff --git a/.../identity/identity-details/download-message-dialog/download-message-dialog.component.html b/.../identity/identity-details/download-message-dialog/download-message-dialog.component.html
@@ -0,0 +1,36 @@
+<div class="container">
+    <div *ngIf="!preview">
+        <h2 mat-dialog-title>{{ header }}</h2>
+        <mat-dialog-content>
+            <div class="form-details" *ngIf="!loading">
+                <mat-form-field class="form-field">
+                    <mat-label>Client Secret</mat-label>
+                    <input [type]="showSymetricKey ? 'text' : 'password'" [(ngModel)]="symetricKey" matInput />
+                    <button matSuffix mat-icon-button (click)="toggleSymetricKeyVisibility()" style="cursor: pointer">
+                        <mat-icon style="text-align: center">visibility</mat-icon>
+                    </button>
+                    <!-- <mat-hint>A Client Secret will be generated if this field is left blank.</mat-hint> -->
+                </mat-form-field>
+            </div>
+            <div *ngIf="loading" class="loading">
+                <mat-progress-spinner color="primary" mode="indeterminate"> </mat-progress-spinner>
+            </div>
+        </mat-dialog-content>
+        <mat-dialog-actions align="end">
+            <button mat-flat-button color="primary" (click)="previewMessage()" [disabled]="!isValid()">Preview</button>
+            <button mat-flat-button mat-dialog-close>Cancel</button>
+        </mat-dialog-actions>
+    </div>
+    <!-- [(ngModel)]="max" -->
+    <!-- [(ngModel)]="client.clientSecret" -->
+</div>
+<div *ngIf="preview" class="preview-container">
+    <h2 mat-dialog-title>{{ header }}</h2>
+    <mat-dialog-content>
+        {{ message }}
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button mat-flat-button color="primary" (click)="downloadMessage()" [disabled]="!isValid()">Preview</button>
+        <button mat-flat-button mat-dialog-close>Close</button>
+    </mat-dialog-actions>
+</div>
diff --git a/...entity/identity-details/download-message-dialog/download-message-dialog.component.spec.ts b/...entity/identity-details/download-message-dialog/download-message-dialog.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { DownloadMessageDialogComponent } from "./download-message-dialog.component";
+
+describe("DownloadMessageDialogComponent", function () {
+    let component: DownloadMessageDialogComponent;
+    let fixture: ComponentFixture<DownloadMessageDialogComponent>;
+
+    beforeEach(async function () {
+        await TestBed.configureTestingModule({
+            declarations: [DownloadMessageDialogComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(DownloadMessageDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", async function () {
+        await expect(component).toBeTruthy();
+    });
+});
diff --git a/...as/identity/identity-details/download-message-dialog/download-message-dialog.component.ts b/...as/identity/identity-details/download-message-dialog/download-message-dialog.component.ts
@@ -0,0 +1,64 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-download-message-dialog",
+    templateUrl: "./download-message-dialog.component.html",
+    styleUrl: "./download-message-dialog.component.css"
+})
+export class DownloadMessageDialogComponent {
+    public header: string;
+    public symetricKey: string;
+    public message: string;
+
+    public loading: boolean;
+    public showSymetricKey: boolean;
+    public preview: boolean;
+
+    public constructor() {
+        this.header = "Download message";
+        this.loading = false;
+        this.showSymetricKey = false;
+        this.preview = false;
+        this.symetricKey = "";
+        this.message = "This is a message that will be displayed when a correct symetric key is entered, and this message can be downloaded.";
+    }
+
+    public isValid(): boolean {
+        // return this.metric !== undefined && this.period !== undefined && this.max !== null;
+        return true;
+    }
+
+    public toggleSymetricKeyVisibility(): void {
+        this.showSymetricKey = !this.showSymetricKey;
+    }
+
+    public previewMessage(): void {
+        if (this.symetricKey === "test") {
+            this.preview = true;
+        }
+    }
+
+    public downloadMessage(): void {
+            const message = btoa(this.message)
+            const byteCharacters = atob(message);
+            const byteArrays = [];
+
+            for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+              const slice = byteCharacters.slice(offset, offset + 512);
+              const byteNumbers = new Array(slice.length);
+              for (let i = 0; i < slice.length; i++) {
+                byteNumbers[i] = slice.charCodeAt(i);
+              }
+              const byteArray = new Uint8Array(byteNumbers);
+              byteArrays.push(byteArray);
+            }
+
+            const blob = new Blob(byteArrays, { type: "application/pdf" });
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "file.pdf";
+            link.click();
+            window.URL.revokeObjectURL(url);
+    }
+}
diff --git a/...entity/identity-details/identity-details-messages/identity-details-messages.component.css b/...entity/identity-details/identity-details-messages/identity-details-messages.component.css
@@ -1,6 +1,7 @@
 .container {
-    min-width: 2400px;
+    max-width: 2100px;
     min-height: 200px;
+    overflow-x: auto;
 }
 
 .disabled-container {

diff --git a/...ntity/identity-details/identity-details-messages/identity-details-messages.component.html b/...ntity/identity-details/identity-details-messages/identity-details-messages.component.html
@@ -50,6 +50,12 @@
                 {{ Message.numberOfAttachments }}
             </td>
         </ng-container>
+        <ng-container matColumnDef="downloadMessage">
+            <th mat-header-cell *matHeaderCellDef style="text-align: center">Download Message</th>
+            <td mat-cell *matCellDef="let Message" data-label="Download Message:" style="text-align: center">
+                <button mat-raised-button class="actions-button" color="primary" (click)="openDownloadMessageDialog()"><mat-icon style="margin: auto; padding: auto"> message</mat-icon></button>
+            </td>
+        </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="messagesTableDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: messagesTableDisplayedColumns"></tr>

diff --git a/...dentity/identity-details/identity-details-messages/identity-details-messages.component.ts b/...dentity/identity-details/identity-details-messages/identity-details-messages.component.ts
@@ -6,6 +6,7 @@ import { Router } from "@angular/router";
 import { MessageOverview, MessageRecipients, MessageService } from "src/app/services/message-service/message.service";
 import { PagedHttpResponseEnvelope } from "src/app/utils/paged-http-response-envelope";
 import { IdentityDetailsMessageRecipientsDialogComponent } from "../identity-details-message-recipients-dialog/identity-details-message-recipients-dialog.component";
+import { DownloadMessageDialogComponent } from "../download-message-dialog/download-message-dialog.component";
 
 @Component({
     selector: "app-identity-details-messages",
@@ -44,10 +45,10 @@ export class IdentityDetailsMessagesComponent {
         if (this.type) {
             switch (this.type) {
                 case "Outgoing":
-                    this.messagesTableDisplayedColumns = ["recipents", "sendDate", "numberOfAttachments"];
+                    this.messagesTableDisplayedColumns = ["recipents", "sendDate", "numberOfAttachments", "downloadMessage"];
                     break;
                 case "Incoming":
-                    this.messagesTableDisplayedColumns = ["senderAddress", "senderDevice", "sendDate", "numberOfAttachments"];
+                    this.messagesTableDisplayedColumns = ["senderAddress", "senderDevice", "sendDate", "numberOfAttachments", "downloadMessage"];
                     break;
             }
         }
@@ -99,4 +100,11 @@ export class IdentityDetailsMessagesComponent {
     public async goToIdentity(identityAddress: string): Promise<void> {
         await this.router.navigate([`/identities/${identityAddress}`]);
     }
+
+    public openDownloadMessageDialog(): void {
+        this.dialog.open(DownloadMessageDialogComponent, {
+            maxWidth: "380px",
+            maxHeight: "250px"
+        });
+    }
 }
diff --git a/...tity-details/identity-details-relationships/identity-details-relationships.component.html b/...tity-details/identity-details-relationships/identity-details-relationships.component.html
@@ -61,12 +61,12 @@
     </table>
 </div>
 <mat-paginator
-        *ngIf="!loading"
-        (page)="relationshipsPageChangeEvent($event)"
-        [length]="relationshipsTotalRecords"
-        [pageSize]="relationshipsPageSize"
-        [pageIndex]="relationshipsPageIndex"
-        [pageSizeOptions]="[5, 10, 25, 100]"
-        showFirstLastButtons
-        aria-label="Select page of relationships">
+    *ngIf="!loading"
+    (page)="relationshipsPageChangeEvent($event)"
+    [length]="relationshipsTotalRecords"
+    [pageSize]="relationshipsPageSize"
+    [pageIndex]="relationshipsPageIndex"
+    [pageSizeOptions]="[5, 10, 25, 100]"
+    showFirstLastButtons
+    aria-label="Select page of relationships">
 </mat-paginator>