perf: update connect acl dialog

Author: ibuler

src/app/elements/elements.component.ts

@@ -25,6 +25,7 @@ import { ElementReplayAsciicastComponent } from '@app/elements/replay/asciicast/
 import { ElementConnectorNecComponent } from '@app/elements/content/content-window/nec/nec.component';
 import { ElementFaceMonitorComponent } from '@app/elements/connect/face-monitor/face-monitor.component';
 import { ElementACLDialogComponent } from '@app/services/connect-token/acl-dialog/acl-dialog.component';
+import { ElementBatchACLDialogComponent } from '@app/services/connect-token/batch-acl-dialog/batch-acl-dialog.component';
 import { ElementTreeFilterComponent } from '@app/elements/asset-tree/tree-filter/tree-filter.component';
 import { ElementOrganizationComponent } from '@app/elements/left-bar/organization/organization.component';
 import { ElementConnectorGuideComponent } from '@app/elements/content/content-window/guide/guide.component';
@@ -76,6 +77,7 @@ export const ElementComponents = [
   DynamicFormComponent,
   ElementsPartsComponent,
   ElementACLDialogComponent,
+  ElementBatchACLDialogComponent,
   ElementDialogAlertComponent,
   ElementLoginExpiredDialogComponent,
   ElementTermComponent

src/app/services/connect-token/batch-acl-dialog/batch-acl-dialog.component.html

@@ -0,0 +1,50 @@
+<div class="batch-acl-dialog">
+  <div *nzModalTitle>{{ titleKey | translate }}</div>
+
+  <nz-alert
+    [nzType]="isActionable ? 'info' : 'error'"
+    [nzDescription]="messageKey | translate"
+  ></nz-alert>
+
+  <div class="review-list" *ngIf="isBatch">
+    <div class="review-item" *ngFor="let item of items">
+      <div class="review-header">
+        <strong>{{ item.asset.name }}</strong>
+        <nz-tag [nzColor]="statusType[item.status]">{{
+          'Batch review status ' + item.status | translate
+        }}</nz-tag>
+      </div>
+      <div class="review-detail" *ngIf="isReview && item.status === 'pending'">
+        {{ 'Assignees' | translate }}: {{ item.assignees }}
+        <button nz-button nzType="link" nzSize="small" (click)="onCopyLink(item)">
+          {{ 'Copy link' | translate }}
+        </button>
+      </div>
+      <div class="review-detail error" *ngIf="item.detail">{{ item.detail }}</div>
+    </div>
+  </div>
+
+  <div class="single-detail" *ngIf="!isBatch && isReview && singleItem?.status === 'pending'">
+    {{ 'Assignees' | translate }}: {{ singleItem.assignees }}
+    <button nz-button nzType="link" nzSize="small" (click)="onCopyLink(singleItem)">
+      {{ 'Copy link' | translate }}
+    </button>
+  </div>
+
+  <iframe
+    *ngIf="faceVerifyUrl"
+    class="face-verify-frame"
+    [src]="faceVerifyUrl"
+    allow="camera"
+    sandbox="allow-scripts allow-same-origin"
+  ></iframe>
+
+  <div *nzModalFooter>
+    <button nz-button [disabled]="isSubmitting" (click)="onClose()">
+      {{ closeTextKey | translate }}
+    </button>
+    <button nz-button nzType="primary" *ngIf="isActionable && !submitted" (click)="onConfirm()">
+      {{ actionTextKey | translate }}
+    </button>
+  </div>
+</div>

src/app/services/connect-token/batch-acl-dialog/batch-acl-dialog.component.scss

@@ -0,0 +1,49 @@
+.batch-acl-dialog {
+  nz-alert {
+    display: block;
+    margin-bottom: 16px;
+  }
+}
+
+.review-list {
+  max-height: 420px;
+  overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+
+.face-verify-frame {
+  width: 100%;
+  height: 480px;
+  margin-top: 16px;
+  border: 0;
+}
+
+.review-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.review-detail {
+  margin-top: 8px;
+  color: #666;
+
+  &.error {
+    color: #ff4d4f;
+  }
+}
+
+.single-detail {
+  margin-top: 16px;
+}