Minor fixes to the front end's example list

tranHieuDev23 · Dec 27, 2023 · 8d507f8 · 8d507f8
1 parent d806749
commit 8d507f8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 5 deletions.
diff --git a/web/src/app/pages/problem/description/description.component.html b/web/src/app/pages/problem/description/description.component.html
@@ -32,21 +32,39 @@
     <div #problemDescriptionContainer [innerHTML]="problem.description"></div>
 </div>
 <ng-container *ngIf="problem.exampleList.length > 0">
-    <h3 nz-typography>Examples</h3>
+    <h4 nz-typography>Examples</h4>
     <nz-table #table [nzData]="problem.exampleList" [nzShowPagination]="false">
         <thead>
             <tr>
                 <th>#</th>
                 <th>Input</th>
                 <th>Output</th>
+                <th>Action</th>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let example of table.data; index as i">
                 <td>{{ i + 1 }}</td>
-                <td><code nz-typography [nzContent]="example.input" nzCopyable="true"></code></td>
-                <td><code nz-typography [nzContent]="example.output" nzCopyable="true"></code></td>
+                <td><code nz-typography [nzContent]="example.input | ellipsis:100" nzCopyable="true"></code></td>
+                <td><code nz-typography [nzContent]="example.output | ellipsis:100" nzCopyable="true"></code></td>
+                <td>
+                    <button nz-button nz-tooltip="Expand" (click)="onExampleExpandClicked(example)">
+                        <span nz-icon nzType="expand-alt" nzTheme="outline"></span>
+                    </button>
+                </td>
             </tr>
         </tbody>
     </nz-table>
-</ng-container>
+</ng-container>
+<ng-template #expandTestCaseModal>
+    <app-test-case-view-modal [input]="expandExampleModalInput" [output]="expandExampleModalOutput">
+    </app-test-case-view-modal>
+</ng-template>
+<ng-template #expandTestCaseModalFooter>
+    <button nz-button (click)="onExpandTestCaseModalCopyInputClicked()">
+        <span nz-icon nzType="copy" nzTheme="outline"></span> Copy input
+    </button>
+    <button nz-button (click)="onExpandTestCaseModalCopyOutputClicked()">
+        <span nz-icon nzType="copy" nzTheme="outline"></span> Copy output
+    </button>
+</ng-template>
diff --git a/web/src/app/pages/problem/description/description.component.ts b/web/src/app/pages/problem/description/description.component.ts
@@ -4,9 +4,14 @@ import {
   Input,
   OnChanges,
   OnInit,
+  TemplateRef,
   ViewChild,
 } from '@angular/core';
-import { RpcAccount, RpcProblem } from '../../../dataaccess/api';
+import {
+  RpcAccount,
+  RpcProblem,
+  RpcProblemExample,
+} from '../../../dataaccess/api';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { CommonModule, Location } from '@angular/common';
 import { TimeLimitPipe } from '../../../components/utils/time-limit.pipe';
@@ -27,6 +32,10 @@ import {
 } from '../../../logic/account.service';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import renderMathInElement from 'katex/contrib/auto-render';
+import { EllipsisPipe } from '../../../components/utils/ellipsis.pipe';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import copyToClipboard from 'copy-to-clipboard';
+import { TestCaseViewModalComponent } from '../../../components/test-case-view-modal/test-case-view-modal.component';
 
 @Component({
   selector: 'app-description',
@@ -41,13 +50,25 @@ import renderMathInElement from 'katex/contrib/auto-render';
     NzTableModule,
     NzTypographyModule,
     NzIconModule,
+    EllipsisPipe,
+    NzToolTipModule,
+    TestCaseViewModalComponent,
   ],
   templateUrl: './description.component.html',
   styleUrl: './description.component.scss',
 })
 export class DescriptionComponent implements OnInit, OnChanges {
   @ViewChild('problemDescriptionContainer')
   problemDescriptionContainer: ElementRef | undefined;
+  @ViewChild('expandTestCaseModal') expandExampleModal:
+    | TemplateRef<any>
+    | undefined;
+  @ViewChild('expandTestCaseModalFooter') expandExampleModalFooter:
+    | TemplateRef<any>
+    | undefined;
+
+  public expandExampleModalInput = '';
+  public expandExampleModalOutput = '';
 
   @Input() public problem!: RpcProblem;
   @Input() public sessionAccount!: RpcAccount;
@@ -129,4 +150,24 @@ export class DescriptionComponent implements OnInit, OnChanges {
       },
     });
   }
+
+  public onExampleExpandClicked(example: RpcProblemExample): void {
+    this.expandExampleModalInput = example.input;
+    this.expandExampleModalOutput = example.output;
+    this.modalService.create({
+      nzContent: this.expandExampleModal,
+      nzWidth: 'fit-content',
+      nzFooter: this.expandExampleModalFooter,
+    });
+  }
+
+  public onExpandTestCaseModalCopyInputClicked(): void {
+    copyToClipboard(this.expandExampleModalInput);
+    this.notificationService.success('Input copied to clipboard', '');
+  }
+
+  public onExpandTestCaseModalCopyOutputClicked(): void {
+    copyToClipboard(this.expandExampleModalOutput);
+    this.notificationService.success('Output copied to clipboard', '');
+  }
 }