feat(CSVEntry): allow consumers to pass in custom footer content

also now allows consumer to control footer direction ISSUES CLOSED: #1690
GetTerminus · Oct 30, 2019 · d8f69fb · d8f69fb
1 parent 3d8a00f
commit d8f69fb
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/demo/app/components/csv-entry/csv-entry.component.html b/demo/app/components/csv-entry/csv-entry.component.html
@@ -1,12 +1,33 @@
 <ts-card tsVerticalSpacing>
   <h3 tsVerticalSpacing>CSV Entry</h3>
 
+  <div>
+    Footer direction:
+    <ul>
+      <li>
+        <label>
+          ltr
+          <input type="radio" name="direction" value="ltr" [(ngModel)]="footerDirection">
+        </label>
+      </li>
+      <li>
+        <label>
+          rtl
+          <input type="radio" name="direction" value="rtl" [(ngModel)]="footerDirection">
+        </label>
+      </li>
+    </ul>
+  </div>
+
   <div style="max-width: 80%;" tsVerticalSpacing>
     <ts-csv-entry
       [columnValidators]="validators"
       [columnHeaders]="['foo', 'bar']"
+      [footerDirection]="footerDirection"
       (blobGenerated)="file($event)"
-    ></ts-csv-entry>
+    >
+      <button>My Custom Content!</button>
+    </ts-csv-entry>
   </div>
 
   <button (click)="generateFile()">Generate file & download</button>

diff --git a/demo/app/components/csv-entry/csv-entry.component.ts b/demo/app/components/csv-entry/csv-entry.component.ts
@@ -8,31 +8,29 @@ import { TsValidatorsService } from '@terminus/ui/validators';
   templateUrl: './csv-entry.component.html',
 })
 export class CSVEntryComponent {
-  validators = [
+  public validators = [
     Validators.required,
     this.validatorsService.url(),
   ];
-  results: string | undefined;
-  blob;
-  myFile;
+  public results: string | undefined;
+  public blob;
+  public myFile;
+  public footerDirection: 'ltr' | 'rtl' = 'ltr';
 
   constructor(
     private validatorsService: TsValidatorsService,
   ) {}
 
-
-  file(v: Blob) {
+  public file(v: Blob): void {
     console.log('DEMO: Got file from CSV entry: ', v);
     this.blob = v;
   }
 
-
-  generateFile() {
+  public generateFile(): void {
     this.myFile = new File([this.blob], 'testCsv');
     saveFile(this.blob, 'test');
   }
 
-
 }
 
 

diff --git a/demo/app/components/csv-entry/csv-entry.module.ts b/demo/app/components/csv-entry/csv-entry.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { TsCardModule } from '@terminus/ui/card';
 import { TsCSVEntryModule } from '@terminus/ui/csv-entry';
 import { TsSpacingModule } from '@terminus/ui/spacing';
@@ -13,6 +14,7 @@ import { CSVEntryComponent } from './csv-entry.component';
   imports: [
     CommonModule,
     CSVEntryRoutingModule,
+    FormsModule,
     TsCardModule,
     TsCSVEntryModule,
     TsSpacingModule,

diff --git a/terminus-ui/csv-entry/src/csv-entry.component.html b/terminus-ui/csv-entry/src/csv-entry.component.html
@@ -129,21 +129,29 @@
       >{{ tooManyRowsMessage }}</div>
     </div>
 
-    <div [fxLayout]="columnCount < 2 ? 'column' : 'row'" fxLayout="end center" [fxLayoutGap]="layoutGap">
-      <ts-button
-        id="ts-csv-reset"
-        class="qa-csv-entry-reset"
-        format="hollow"
-        theme="warn"
-        (clicked)="resetTable()"
-      >Reset Table</ts-button>
-
-      <ts-button
-        id="ts-csv-add-row"
-        class="qa-csv-entry-add-row"
-        format="hollow"
-        (clicked)="addRows()"
-      >Add Row</ts-button>
+    <div fxLayout="row" [dir]="footerDirection" fxLayoutAlign="space-between center" [fxLayoutGap]="layoutGap">
+      <div dir="ltr" fxLayoutGap="1em">
+        <ts-button
+          id="ts-csv-reset"
+          class="qa-csv-entry-reset"
+          format="hollow"
+          theme="warn"
+          (clicked)="resetTable()"
+        >Reset Table</ts-button>
+
+        <ts-button
+          id="ts-csv-add-row"
+          class="qa-csv-entry-add-row"
+          format="hollow"
+          (clicked)="addRows()"
+        >Add Row</ts-button>
+      </div>
+
+      <span fxFlex></span>
+
+      <div>
+        <ng-content></ng-content>
+      </div>
     </div>
   </div>
 </div>
diff --git a/terminus-ui/csv-entry/src/csv-entry.component.ts b/terminus-ui/csv-entry/src/csv-entry.component.ts
@@ -94,16 +94,6 @@ const DEFAULT_VALIDATION_MESSAGES_MAX = 6;
 /**
  * This is the csv-entry UI Component
  *
- * #### QA CSS CLASSES
- * - `qa-csv-entry`: The primary container
- * - `qa-csv-entry-info`: Container for row/column count
- * - `qa-csv-entry-row`: A row
- * - `qa-csv-entry-cell`: A body cell
- * - `qa-csv-entry-header-cell`: A header cell
- * - `qa-csv-entry-header-row`: Container for a header row
- * - `qa-csv-entry-delete`: A delete button
- * - `qa-csv-entry`: Placed on the primary container
- *
  * @example
  * <ts-csv-entry
  *              id="my-id"
@@ -113,6 +103,7 @@ const DEFAULT_VALIDATION_MESSAGES_MAX = 6;
  *              [fullWidth]="false"
  *              [columnHeaders]="arrayOfHeaders"
  *              [columnValidators]="arrayOfValidators"
+ *              [footerDirection]="ltr"
  *              outputFormat="csv"
  *              (blobGenerated)="handleTheFileBlob($event)"
  * ></ts-csv-entry>
@@ -264,6 +255,12 @@ export class TsCSVEntryComponent implements OnInit, OnDestroy {
   }
   private _columnValidators: ValidatorFn | null[] = [];
 
+  /**
+   * Define the layout direction for the footer
+   */
+  @Input()
+  public footerDirection: 'ltr' | 'rtl' = 'ltr';
+
   /**
    * Define output to be CSV rather than TSV
    */