Fixed #4882 RadioButton selection for TurboTable

primefaces · Jan 19, 2018 · 7176b69 · 7176b69
1 parent b81646b
commit 7176b69
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 3 deletions.
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -674,6 +674,27 @@ export class Table implements OnInit, AfterContentInit {
         return index;
     }
 
+    selectRowWithRadio(event: Event, rowData:any) {
+        if(this.selection != rowData) {
+            this._selection = rowData;
+            this.selectionChange.emit(this.selection);
+            this.onRowSelect.emit({originalEvent: event, data: rowData, type: 'radiobutton'});
+
+            if(this.dataKey) {
+                this.selectionKeys = {};
+                this.selectionKeys[String(this.objectUtils.resolveFieldData(rowData, this.dataKey))] = 1;
+            }
+        }
+        else {
+            this._selection = null;
+            this.selectionChange.emit(this.selection);
+            this.onRowUnselect.emit({originalEvent: event, data: rowData, type: 'radiobutton'});
+        }
+
+        this.preventSelectionKeysUpdate = true;
+        this.tableService.onSelectionChange();
+    }
+
     equals(data1, data2) {
         return this.compareSelectionBy === 'equals' ? (data1 === data2) : this.objectUtils.equals(data1, data2, this.dataKey);
     }
@@ -928,7 +949,6 @@ export class Table implements OnInit, AfterContentInit {
     public exportCSV(options?: any) {
         let data = this.filteredValue || this.value;
         let csv = '\ufeff';
-        debugger;
 
         if (options && options.selectionOnly) {
             data = this.selection || [];
@@ -2009,10 +2029,67 @@ export class CellEditor implements AfterContentInit {
 
 }
 
+@Component({
+    selector: 'p-tableRadioButton',
+    template: `
+        <div class="ui-radiobutton ui-widget" (click)="onClick()">
+            <div class="ui-helper-hidden-accessible">
+                <input type="radio" [attr.name]="name"
+                    [checked]="selected" (change)="onChange($event)" (focus)="onFocus($event)" (blur)="onBlur($event)">
+            </div>
+            <div #box [ngClass]="{'ui-radiobutton-box ui-widget ui-state-default':true,
+                'ui-state-active':selected, 'ui-state-disabled':disabled}">
+                <span class="ui-radiobutton-icon ui-clickable" [ngClass]="{'fa fa-circle':selected}"></span>
+            </div>
+        </div>
+    `
+})
+export class TableRadioButton  {
+
+    @Input() disabled: boolean;
+
+    @Input() value: any;
+
+    @ViewChild('box') boxViewChild: ElementRef;
+
+    selected: boolean;
+
+    subscription: Subscription;
+
+    constructor(public dt: Table, public domHandler: DomHandler, public tableService: TableService) {
+        this.subscription = this.dt.tableService.selectionSource$.subscribe(() => {
+            this.selected = this.dt.isSelected(this.value);
+        });
+    }
+
+    ngOnInit() {
+        this.selected = this.dt.isSelected(this.value);
+    }
+
+    onClick(event: Event) {
+        this.dt.selectRowWithRadio(event, this.value);
+    }
+
+    onFocus() {
+        this.domHandler.addClass(this.boxViewChild.nativeElement, 'ui-state-focus');
+    }
+
+    onBlur() {
+        this.domHandler.removeClass(this.boxViewChild.nativeElement, 'ui-state-focus');
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+}
+
 
 @NgModule({
     imports: [CommonModule,PaginatorModule],
-    exports: [Table,SharedModule,SortableColumn,SelectableRow,RowToggler,ContextMenuRow,ResizableColumn,ReorderableColumn,EditableColumn,CellEditor,SortIcon],
-    declarations: [Table,SortableColumn,SelectableRow,RowToggler,ContextMenuRow,ResizableColumn,ReorderableColumn,EditableColumn,CellEditor,TableBody,ScrollableView,SortIcon]
+    exports: [Table,SharedModule,SortableColumn,SelectableRow,RowToggler,ContextMenuRow,ResizableColumn,ReorderableColumn,EditableColumn,CellEditor,SortIcon,TableRadioButton],
+    declarations: [Table,SortableColumn,SelectableRow,RowToggler,ContextMenuRow,ResizableColumn,ReorderableColumn,EditableColumn,CellEditor,TableBody,ScrollableView,SortIcon,TableRadioButton]
 })
 export class TableModule { }
diff --git a/src/app/showcase/components/table/tableselectiondemo.html b/src/app/showcase/components/table/tableselectiondemo.html
@@ -98,6 +98,33 @@ <h3>Events</h3>
             </tr>
         </ng-template>
     </p-table>
+
+    <h3>RadioButton</h3>
+    <p-table [columns]="cols" [value]="cars" [(selection)]="selectedCar4" dataKey="vin">
+        <ng-template pTemplate="header" let-columns>
+            <tr>
+                <th style="width: 2.25em"></th>
+                <th *ngFor="let col of columns">
+                    {{col.header}}
+                </th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-rowData let-columns="columns">
+            <tr [pSelectableRow]="rowData">
+                <td>
+                    <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
+                </td>
+                <td *ngFor="let col of columns">
+                    {{rowData[col.field]}}
+                </td>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="summary">
+                <div style="text-align: left">
+                    Selected Car: {{selectedCar4 ? selectedCar4.vin + ' - ' + selectedCar4.brand + ' - ' + selectedCar4.year + ' - ' + selectedCar4.color: 'none'}}
+                </div>
+            </ng-template>
+    </p-table>
 </div>
 
 <div class="content-section documentation">
@@ -123,6 +150,8 @@ <h3>Events</h3>
 
     selectedCar3: Car;
 
+    selectedCar4: Car;
+
     selectedCars: Car[];
 
     constructor(private carService: CarService) &#123; &#125;
@@ -252,6 +281,33 @@ <h3>Events</h3>
         &lt;/tr&gt;
     &lt;/ng-template&gt;
 &lt;/p-table&gt;
+
+&lt;h3&gt;RadioButton&lt;/h3&gt;
+&lt;p-table [columns]="cols" [value]="cars" [(selection)]="selectedCar4" dataKey="vin"&gt;
+    &lt;ng-template pTemplate="header" let-columns&gt;
+        &lt;tr&gt;
+            &lt;th style="width: 2.25em"&gt;&lt;/th&gt;
+            &lt;th *ngFor="let col of columns"&gt;
+                &#123;&#123;col.header&#125;&#125;
+            &lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/ng-template&gt;
+    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
+        &lt;tr [pSelectableRow]="rowData"&gt;
+            &lt;td&gt;
+                &lt;p-tableRadioButton [value]="rowData"&gt;&lt;/p-tableRadioButton&gt;
+            &lt;/td&gt;
+            &lt;td *ngFor="let col of columns"&gt;
+                &#123;&#123;rowData[col.field]&#125;&#125;
+            &lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/ng-template&gt;
+    &lt;ng-template pTemplate="summary"&gt;
+            &lt;div style="text-align: left"&gt;
+                Selected Car: &#123;&#123;selectedCar4 ? selectedCar4.vin + ' - ' + selectedCar4.brand + ' - ' + selectedCar4.year + ' - ' + selectedCar4.color: 'none'&#125;&#125;
+            &lt;/div&gt;
+        &lt;/ng-template&gt;
+&lt;/p-table&gt;
 </code>
 </pre>
         </p-tabPanel>

diff --git a/src/app/showcase/components/table/tableselectiondemo.ts b/src/app/showcase/components/table/tableselectiondemo.ts
@@ -20,6 +20,8 @@ export class TableSelectionDemo implements OnInit {
 
     selectedCar3: Car;
 
+    selectedCar4: Car;
+
     selectedCars: Car[];
 
     constructor(private carService: CarService) { }