chore: remove Remote Example & replace with Import from CSV

Author: ghiscoding

src/app/app-routing.module.ts

@@ -30,7 +30,6 @@ import { GridLocalizationComponent } from './examples/grid-localization.componen
 import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridRangeComponent } from './examples/grid-range.component';
-import { GridRemoteComponent } from './examples/grid-remote.component';
 import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
 import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
 import { GridRowMoveComponent } from './examples/grid-rowmove.component';
@@ -40,7 +39,7 @@ import { GridTabsComponent } from './examples/grid-tabs.component';
 import { GridTradingComponent } from './examples/grid-trading.component';
 import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
 import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
-import { Grid43Component } from './examples/grid43.component';
+import { Grid18Component } from './examples/grid18.component';
 import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
 
 import { NgModule } from '@angular/core';
@@ -59,7 +58,7 @@ const routes: Routes = [
   { path: 'context', component: GridContextMenuComponent },
   { path: 'custom-pagination', component: GridCustomPaginationComponent },
   { path: 'custom-tooltip', component: GridCustomTooltipComponent },
-  { path: 'csv-grid', component: Grid43Component },
+  { path: 'csv-grid', component: Grid18Component },
   { path: 'drag-recycle', component: GridDragRecycleComponent },
   { path: 'editor', component: GridEditorComponent },
   { path: 'excel-formula', component: GridExcelFormulaComponent },
@@ -83,7 +82,6 @@ const routes: Routes = [
   { path: 'clientside', component: GridClientSideComponent },
   { path: 'odata', component: GridOdataComponent },
   { path: 'range', component: GridRangeComponent },
-  { path: 'remote', component: GridRemoteComponent },
   { path: 'resize-by-content', component: GridResizeByContentComponent },
   { path: 'rowdetail', component: GridRowDetailComponent },
   { path: 'rowmove', component: GridRowMoveComponent },

src/app/app.component.html

@@ -92,7 +92,7 @@
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowmove']">17- Row Move</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/remote']">18- Remote Model</a>
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/csv-grid']">18- Create Grid from CSV </a>
         </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
@@ -174,9 +174,6 @@
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-pagination']"> 42- Custom Pagination </a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/csv-grid']"> 43- Create Grid from CSV </a>
-        </li>
       </ul>
     </section>
 

src/app/app.module.ts

@@ -46,7 +46,6 @@ import { GridLocalizationComponent } from './examples/grid-localization.componen
 import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridRangeComponent } from './examples/grid-range.component';
-import { GridRemoteComponent } from './examples/grid-remote.component';
 import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
 import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
 import { GridRowMoveComponent } from './examples/grid-rowmove.component';
@@ -56,7 +55,7 @@ import { GridTabsComponent } from './examples/grid-tabs.component';
 import { GridTradingComponent } from './examples/grid-trading.component';
 import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
 import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
-import { Grid43Component } from './examples/grid43.component';
+import { Grid18Component } from './examples/grid18.component';
 import { HomeComponent } from './examples/home.component';
 import { CustomPagerComponent } from './examples/grid-custom-pager.component';
 import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
@@ -136,7 +135,6 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridMenuComponent,
     GridOdataComponent,
     GridRangeComponent,
-    GridRemoteComponent,
     GridResizeByContentComponent,
     GridRowDetailComponent,
     GridRowMoveComponent,
@@ -146,7 +144,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridTradingComponent,
     GridTreeDataParentChildComponent,
     GridTreeDataHierarchicalComponent,
-    Grid43Component,
+    Grid18Component,
     RowDetailPreloadComponent,
     RowDetailViewComponent,
     SwtCommonGridTestComponent,

src/app/examples/grid-remote.component.html

@@ -1,11 +1,11 @@
 <div id="demo-container" class="container-fluid">
   <h2>
-    Example 43: Dynamically Create Grid from CSV / Excel import
+    Example 18: Dynamically Create Grid from CSV / Excel import
     <span class="float-end">
       <a
         style="font-size: 18px"
         target="_blank"
-        href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid43.component.ts"
+        href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid18.component.ts"
       >
         <span class="mdi mdi-link mdi-v-align-sub"></span> code
       </a>
@@ -45,16 +45,15 @@ <h2>
       <button id="uploadBtn" data-test="static-data-btn" class="btn btn-outline-secondary" (click)="handleDefaultCsv()">
         Use default CSV data
       </button>
-      &nbsp;/
-      <button class="btn btn-outline-danger btn-sm ms-2" (click)="destroyGrid()">Destroy Grid</button>
+      <button class="btn btn-outline-secondary" (click)="destroyGrid()">Destroy Grid</button>
     </div>
   </div>
 
   <hr />
 
   <angular-slickgrid
     *ngIf="gridCreated"
-    gridId="grid43"
+    gridId="grid18"
     [columnDefinitions]="columnDefinitions"
     [gridOptions]="gridOptions"
     [dataset]="dataset"

src/app/examples/grid-remote.component.ts

@@ -7,9 +7,9 @@ const sampleDataRoot = 'assets/data';
 @Component({
   styles: ['.file-upload { max-width: 300px; }'],
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './grid43.component.html',
+  templateUrl: './grid18.component.html',
 })
-export class Grid43Component {
+export class Grid18Component {
   columnDefinitions: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
@@ -21,16 +21,14 @@ export class Grid43Component {
   constructor(private readonly cd: ChangeDetectorRef) {}
 
   handleFileImport(event: any) {
-    const file: File = event.target.files[0];
-    if (file.name.endsWith('.csv')) {
+    const file = event.target.files[0];
+    if (file) {
       const reader = new FileReader();
       reader.onload = (e: any) => {
         const content = e.target.result;
         this.dynamicallyCreateGrid(content);
       };
       reader.readAsText(file);
-    } else {
-      alert('File must be a CSV file');
     }
   }
 

src/app/examples/grid43.component.html renamed to src/app/examples/grid18.component.html

@@ -1,10 +1,10 @@
-describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => {
+describe('Example 18 - Dynamically Create Grid from CSV / Excel import', () => {
   const defaultCsvTitles = ['First Name', 'Last Name', 'Age', 'Type'];
   const GRID_ROW_HEIGHT = 33;
 
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/csv-grid`);
-    cy.get('h2').should('contain', 'Example 43: Dynamically Create Grid from CSV / Excel import');
+    cy.get('h2').should('contain', 'Example 18: Dynamically Create Grid from CSV / Excel import');
   });
 
   it('should load default CSV file and expect default column titles', () => {