fix after comments

AbsaOSS · Jun 21, 2024 · 0b7d180 · 0b7d180
1 parent bd26c97
commit 0b7d180
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 33 deletions.
diff --git a/projects/composition/src/app/api-data/cps-file-upload.json b/projects/composition/src/app/api-data/cps-file-upload.json
@@ -29,6 +29,14 @@
                         "default": "100%",
                         "description": "Width of the component, a number denoting pixels or a string."
                     },
+                    {
+                        "name": "fileInfo",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Expected file info block, explaining some extra stuff about file."
+                    },
                     {
                         "name": "fileProcessingCallback",
                         "optional": true,

diff --git a/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html b/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html
@@ -1,35 +1,43 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-
-  <cps-button-toggle
-    label="File extension"
-    [options]="fileUploadOptions"
-    [value]="selectedFileUploadType.value"
-    (valueChanged)="onFileExtensionChanged($event)"
-    [mandatory]="false">
-  </cps-button-toggle>
-  <br/>
-  <cps-file-upload
-    [extensions]="[selectedFileUploadType.value]"
-    [fileDesc]="selectedFileUploadType!.label || ''"
-    width="500"
-    [fileProcessingCallback]="processUploadedFile"
-    (fileUploadFailed)="onFileUploadFailed($event)"
-    (fileUploaded)="onFileUploaded($event)"
-    (uploadedFileRemoved)="onUploadedFileRemoved($event)">
-  </cps-file-upload>
-
+  <h2 class="section-title">File upload component with the dependency on selected file extension</h2>
+  <div>
+    <p>
+      <cps-button-toggle
+        label="File extension"
+        [options]="fileUploadOptions"
+        [value]="selectedFileUploadType.value"
+        (valueChanged)="onFileExtensionChanged($event)"
+        [mandatory]="false">
+      </cps-button-toggle>
+      <br/>
+      <cps-file-upload
+        [extensions]="[selectedFileUploadType.value]"
+        [fileDesc]="selectedFileUploadType!.label || ''"
+        width="400"
+        [fileProcessingCallback]="processUploadedFile"
+        (fileUploadFailed)="onFileUploadFailed($event)"
+        (fileUploaded)="onFileUploaded($event)"
+        (uploadedFileRemoved)="onUploadedFileRemoved($event)">
+      </cps-file-upload>
+    </p>
+  </div>
   <cps-divider/>
 
-  <cps-file-upload
-    [extensions]="['.jpg', '.png', 'pdf']"
-    fileDesc="Pictures or PDFs"
-    width="500"
-    [fileProcessingCallback]="processUploadedFile"
-    (fileUploadFailed)="onFileUploadFailed($event)"
-    (fileUploaded)="onFileUploaded($event)"
-    (uploadedFileRemoved)="onUploadedFileRemoved($event)">
-    <cps-icon color="calm" icon="info-circle" size="xsmall"></cps-icon>
-    The file should be a small sample file to<br />infer the schema, which will be shown in<br />the next step
-  </cps-file-upload>
+  <h2 class="section-title">File upload component with extra info</h2>
+  <div>
+    <p>
+      <cps-file-upload
+        [extensions]="['.jpg', '.png', 'pdf']"
+        [fileInfo]="fileInfo"
+        fileDesc="Pictures or PDFs"
+        width="500"
+        [fileProcessingCallback]="processUploadedFile"
+        (fileUploadFailed)="onFileUploadFailed($event)"
+        (fileUploaded)="onFileUploaded($event)"
+        (uploadedFileRemoved)="onUploadedFileRemoved($event)">
+      </cps-file-upload>
+    </p>
+  </div>
+
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.ts b/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.ts
@@ -36,6 +36,8 @@ export class FileUploadPageComponent {
   ];
 
   selectedFileUploadType: CpsButtonToggleOption = this.fileUploadOptions[0];
+  fileInfo: string =
+    'The file should be a small sample file to infer the schema, which will be shown in the next step';
 
   processUploadedFile(file: File): Observable<boolean> {
     return from(file.text()).pipe(

diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html
@@ -1,4 +1,4 @@
-<div class="cps-file-upload" [ngStyle]="{ width: width }">
+<div class="cps-file-upload" [ngStyle]="{ width: cvtWidth }">
   <div
     class="cps-file-upload-dropzone"
     [ngClass]="{
@@ -31,7 +31,7 @@
     @if(fileInfo) {
       <div class="cps-file-upload-dropzone-content">
         <cps-icon color="calm" icon="info-circle" size="xsmall"></cps-icon>
-        {{fileInfo}
+        {{fileInfo}}
       </div>
     }
     <cps-progress-linear

diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts
@@ -8,6 +8,7 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { catchError, Observable, of, take } from 'rxjs';
+import { convertSize } from '../../utils/internal/size-utils';
 import { CpsIconComponent } from '../cps-icon/cps-icon.component';
 import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-linear.component';
 
@@ -41,7 +42,12 @@ export class CpsFileUploadComponent implements OnInit {
    */
   @Input() width: number | string = '100%';
 
-  @Input() fileInfo = '';
+  /**
+   * Expected file info block, explaining some extra stuff about file.
+   * @group Props
+   */
+  @Input() fileInfo: string = '';
+
   /**
    * Callback for uploaded file processing.
    * @group Props
@@ -74,11 +80,13 @@ export class CpsFileUploadComponent implements OnInit {
   uploadedFile?: File;
   extensionsString = '';
   extensionsStringAsterisks = '';
+  cvtWidth = '';
 
   isProcessingFile = false;
 
   ngOnInit(): void {
     this.updateExtensionsString();
+    this.cvtWidth = convertSize(this.width);
   }
 
   ngOnChanges(changes: SimpleChanges): void {