angular-slickgrid 8.14.0 → 9.0.0

package/src/demos/examples/example25.component.html

@@ -0,0 +1,60 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 25: GraphQL Basic API without Pagination
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-graphql-nopage.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle row">
+    <div class="col-12">
+      Use basic GraphQL query with any external public APIs (<a
+        href="https://ghiscoding.gitbook.io/angular-slickgrid/backend-services/graphql"
+        target="_blank"
+        >Wiki docs</a
+      >).
+      <ul>
+        <li>
+          This Examples uses a Public GraphQL API that you can find at this link
+          <a href="https://countries.trevorblades.com/" target="_blank">https://countries.trevorblades.com/</a>
+        </li>
+        <li>Compare to the regular and default GraphQL implementation, you will find the following differences</li>
+        <ul>
+          <li>
+            There are no Pagination and we only use GraphQL <b>once</b> to load the data, then we use the grid as a regular local in-memory
+            grid
+          </li>
+          <li>
+            We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting
+          </li>
+        </ul>
+        <li>
+          NOTE - This Example calls multiple GraphQL queries, this is <b>ONLY</b> for demo purposes, you would typically only call 1 query
+          (which is what GraphQL is good at)
+        </li>
+        <li>
+          This example is mainly to demo the use of GraphqlService to build the query and retrieve the data but also to demo how to mix that
+          with local (in-memory) Filtering/Sorting strategies
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-6 col-sm-3">
+      <div [class]="status.class" role="alert" data-test="status">
+        <strong>Status: </strong> {{ status.text }}
+        <span [hidden]="!processing">
+          <i class="mdi mdi-sync mdi-spin-1s"></i>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <angular-slickgrid gridId="grid25" [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset"> </angular-slickgrid>
+</div>

package/src/demos/examples/example25.component.scss

@@ -0,0 +1,8 @@
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+//   $slick-preheader-font-size: 18px,
+//   $slick-preheader-border-right: 1px solid lightgrey,
+// );
+
+.alert {
+  padding: 8px;
+}

package/src/demos/examples/example25.component.ts

@@ -0,0 +1,255 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { GraphqlService, GraphqlResult, GraphqlServiceApi } from '@slickgrid-universal/graphql';
+
+import {
+  AngularGridInstance,
+  Column,
+  Filters,
+  Formatters,
+  GridOption,
+  Metrics,
+  type MultipleSelectOption,
+  OperatorType,
+} from '../../library';
+import { Observable } from 'rxjs';
+
+const COUNTRIES_API = 'https://countries.trevorblades.com/';
+
+export interface Country {
+  countryCode: string;
+  countryName: string;
+  countryNative: string;
+  countryPhone: number;
+  countryCurrency: string;
+  countryEmoji: string;
+  continentCode: string;
+  continentName: string;
+  languageCode: string;
+  languageName: string;
+  languageNative: string;
+}
+
+@Component({
+  templateUrl: './example25.component.html',
+  styleUrls: ['./example25.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+})
+export class Example25Component implements OnInit {
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset = [];
+  metrics!: Metrics;
+
+  graphqlQuery = '';
+  processing = true;
+  status = { text: 'processing...', class: 'alert alert-danger' };
+  isDataLoaded = false;
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      { id: 'countryCode', field: 'code', name: 'Code', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' },
+      { id: 'countryName', field: 'name', name: 'Name', width: 60, sortable: true, filterable: true, columnGroup: 'Country' },
+      { id: 'countryNative', field: 'native', name: 'Native', width: 60, sortable: true, filterable: true, columnGroup: 'Country' },
+      {
+        id: 'countryPhone',
+        field: 'phone',
+        name: 'Phone Area Code',
+        maxWidth: 110,
+        sortable: true,
+        filterable: true,
+        columnGroup: 'Country',
+      },
+      {
+        id: 'countryCurrency',
+        field: 'currency',
+        name: 'Currency',
+        maxWidth: 90,
+        sortable: true,
+        filterable: true,
+        columnGroup: 'Country',
+      },
+      { id: 'countryEmoji', field: 'emoji', name: 'Emoji', maxWidth: 90, sortable: true, columnGroup: 'Country' },
+      {
+        id: 'languageName',
+        field: 'languages.name',
+        name: 'Names',
+        width: 60,
+        formatter: Formatters.arrayObjectToCsv,
+        columnGroup: 'Language',
+        params: { propertyNames: ['name'], useFormatterOuputToFilter: true },
+        filterable: true,
+        // this Filter is a bit more tricky than others since the values are an array of objects
+        // what we can do is use the Formatter to search from the CSV string coming from the Formatter (with "useFormatterOuputToFilter: true")
+        // we also need to use the Operator IN_CONTAINS
+        filter: {
+          model: Filters.multipleSelect,
+          collectionAsync: this.getLanguages(),
+          operator: OperatorType.inContains,
+          collectionOptions: {
+            addBlankEntry: true,
+            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
+            collectionInsideObjectProperty: 'data.languages',
+          },
+          collectionFilterBy: [
+            // filter out any empty values
+            { property: 'name', value: '', operator: 'NE' },
+            { property: 'name', value: null, operator: 'NE' },
+          ],
+          collectionSortBy: { property: 'name' },
+          customStructure: { value: 'name', label: 'name' },
+          options: { filter: true } as MultipleSelectOption,
+        },
+      },
+      {
+        id: 'languageNative',
+        field: 'languages.native',
+        name: 'Native',
+        width: 60,
+        formatter: Formatters.arrayObjectToCsv,
+        params: { propertyNames: ['native'], useFormatterOuputToFilter: true },
+        columnGroup: 'Language',
+        filterable: true,
+        filter: {
+          model: Filters.multipleSelect,
+          collectionAsync: this.getLanguages(),
+          operator: OperatorType.inContains,
+          collectionOptions: {
+            addBlankEntry: true,
+            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
+            collectionInsideObjectProperty: 'data.languages',
+          },
+          collectionFilterBy: [
+            // filter out any empty values
+            { property: 'native', value: '', operator: 'NE' },
+            { property: 'native', value: null, operator: 'NE' },
+          ],
+          collectionSortBy: { property: 'native' },
+          customStructure: { value: 'native', label: 'native' },
+          options: { filter: true } as MultipleSelectOption,
+        },
+      },
+      {
+        id: 'languageCode',
+        field: 'languages.code',
+        name: 'Codes',
+        maxWidth: 100,
+        formatter: Formatters.arrayObjectToCsv,
+        params: { propertyNames: ['code'], useFormatterOuputToFilter: true },
+        columnGroup: 'Language',
+        filterable: true,
+      },
+      {
+        id: 'continentName',
+        field: 'continent.name',
+        name: 'Name',
+        width: 60,
+        sortable: true,
+        filterable: true,
+        formatter: Formatters.complexObject,
+        columnGroup: 'Continent',
+      },
+      {
+        id: 'continentCode',
+        field: 'continent.code',
+        name: 'Code',
+        maxWidth: 90,
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.singleSelect,
+          collectionAsync: this.getContinents(),
+          collectionOptions: {
+            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
+            collectionInsideObjectProperty: 'data.continents',
+            addBlankEntry: true,
+            separatorBetweenTextLabels: ': ',
+          },
+          customStructure: {
+            value: 'code',
+            label: 'code',
+            labelSuffix: 'name',
+          },
+        },
+        formatter: Formatters.complexObject,
+        columnGroup: 'Continent',
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableFiltering: true,
+      enableCellNavigation: true,
+      enablePagination: false,
+      createPreHeaderPanel: true,
+      showPreHeaderPanel: true,
+      preHeaderPanelHeight: 28,
+      datasetIdPropertyName: 'code',
+      showCustomFooter: true, // display some metrics in the bottom custom footer
+      backendServiceApi: {
+        // use the GraphQL Service to build the query but use local (in memory) Filtering/Sorting strategies
+        // the useLocalFiltering/useLocalSorting flags can be enabled independently
+        service: new GraphqlService(),
+        useLocalFiltering: true,
+        useLocalSorting: true,
+
+        options: {
+          datasetName: 'countries', // the only REQUIRED property
+        },
+        // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init
+        preProcess: () => (!this.isDataLoaded ? this.displaySpinner(true) : ''),
+        process: (query: string) => this.getCountries(query),
+        postProcess: (result: GraphqlResult<Country>) => {
+          this.metrics = result.metrics as Metrics;
+          this.displaySpinner(false);
+          this.isDataLoaded = true;
+        },
+      } as GraphqlServiceApi,
+    };
+  }
+
+  displaySpinner(isProcessing: boolean) {
+    this.processing = isProcessing;
+    this.status = isProcessing
+      ? { text: 'processing...', class: 'alert alert-danger' }
+      : { text: 'finished', class: 'alert alert-success' };
+  }
+
+  // --
+  // NOTE - Demo Code ONLY
+  // This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)
+  // This demo is mainly to show the use of GraphqlService to build the query and retrieve the data but also to show how to mix that with usage of local Filtering/Sorting strategies
+  // --
+
+  /** Calling the GraphQL backend API to get the Countries with the Query created by the "process" method of GraphqlService  */
+  getCountries(query: string): Observable<GraphqlResult<Country>> {
+    return this.http.post<GraphqlResult<Country>>(COUNTRIES_API, { query });
+  }
+
+  /**
+   * Calling again the GraphQL backend API, however in this case we cannot use the GraphQL Service to build the query
+   * So we will have to write, by hand, the query to get the continents code & name
+   * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array)
+   */
+  getContinents(): Observable<GraphqlResult<{ code: string; name: string }>> {
+    const continentQuery = `query { continents { code, name  }}`;
+    return this.http.post<GraphqlResult<{ code: string; name: string }>>(COUNTRIES_API, { query: continentQuery });
+  }
+
+  /**
+   * Calling again the GraphQL backend API, however in this case we cannot use the GraphQL Service to build the query
+   * So we will have to write, by hand, the query to get the languages code & name
+   * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array)
+   */
+  getLanguages(): Observable<GraphqlResult<{ code: string; name: string; native: string }>> {
+    const languageQuery = `query { languages { code, name, native  }}`;
+    return this.http.post<GraphqlResult<{ code: string; name: string; native: string }>>(COUNTRIES_API, { query: languageQuery });
+  }
+}

package/src/demos/examples/example26.component.html

@@ -0,0 +1,98 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 26: Use of Angular Components
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-angular.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    <h3>Filters, Editors, AsyncPostRender with Angular Components</h3>
+    Grid with usage of Angular Components as Editor &amp; AsyncPostRender (similar to Formatter).
+    <ul>
+      <li>Support of Angular Component as Custom Editor (click on any "Assignee" name cell)</li>
+      <ul>
+        <li>
+          That column uses <a href="https://github.com/ng-select/ng-select" target="_blank">ng-select</a> as a custom editor as an Angular
+          Component
+        </li>
+        <li>
+          Increased Grid Options "rowHeight" &amp; "headerRowHeight" to 45 so that the "ng-select" fits in the cell. Ideally it would be
+          better to override the ng-select css styling to change it's max height
+        </li>
+      </ul>
+      <li>Support of Angular Component as Custom Filter ("Assignee" columns), which also uses "ng-select"</li>
+      <li>The 2nd "Assignee" column (showing in bold text) uses "asyncPostRender" with an Angular Component</li>
+      <ul>
+        <li>Why can't we use Angular Component as Customer Formatter and why do I see a slight delay in loading the data?</li>
+        <li>
+          It's totally normal since SlickGrid Formatters only accept strings (synchronously), so we cannot use that (Angular requires at
+          least 1 full cycle to render the element), so we are left with SlickGrid "asyncPostRender" and it works but as the name suggest
+          it's async users might see noticeable delay in loading the data
+        </li>
+      </ul>
+      <li>
+        The 2nd "Title" showing an interactive component, which is not destroyed after first rendering but stays active. Click on the button
+        to see the title alerted
+      </li>
+    </ul>
+  </div>
+
+  <div class="col-sm-6">
+    <label>autoEdit setting: </label>
+    <span id="radioAutoEdit">
+      <label class="radio-inline control-label" for="radioTrue">
+        <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit" (change)="setAutoEdit(true)" /> ON
+        (single-click)
+      </label>
+      <label class="radio-inline control-label" for="radioFalse">
+        <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit" (change)="setAutoEdit(false)" /> OFF
+        (double-click)
+      </label>
+    </span>
+    <div class="row col-sm-12">
+      <span>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="undo()">
+          <i class="mdi mdi-undo"></i>
+          Undo last edit(s)
+        </button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.filterService.clearFilters()">Clear Filters</button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
+        <label class="checkbox-inline control-label" for="autoCommitEdit">
+          <input
+            type="checkbox"
+            id="autoCommitEdit"
+            data-test="auto-commit"
+            [checked]="gridOptions.autoCommitEdit"
+            (click)="changeAutoCommit()"
+          />
+          Auto Commit Edit
+        </label>
+      </span>
+    </div>
+  </div>
+
+  <div class="col-sm-6">
+    <div class="alert alert-info" *ngIf="updatedObject"><strong>Updated Item:</strong> {{ updatedObject | json }}</div>
+    <div class="alert alert-warning" *ngIf="alertWarning"><strong>Updated Item:</strong> {{ alertWarning }}</div>
+  </div>
+
+  <div class="col-sm-12">
+    <angular-slickgrid
+      gridId="grid26"
+      [columns]="columnDefinitions"
+      [options]="gridOptions"
+      [dataset]="dataset"
+      (onAngularGridCreated)="angularGridReady($event.detail)"
+      (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
+      (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
+      (onValidationError)="onCellValidationError($event.detail.eventData, $event.detail.args)"
+    >
+    </angular-slickgrid>
+  </div>
+</div>

package/src/demos/examples/example26.component.scss

@@ -0,0 +1,42 @@
+h3 {
+  font-style: normal;
+  color: #3d3d3d;
+}
+
+#slickGridContainer-grid22 {
+  /* you can change all filters heights via CSS variable */
+  --slick-header-input-height: 34px;
+
+  .slickgrid-container {
+    .slick-headerrow-column {
+      .ng-input {
+        input {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.ng-select-focused {
+  box-shadow: 0 0 0 0.25rem #0d6efd40;
+}
+
+.cell-menu-dropdown {
+  border: 1px solid #a3a3a3;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: max-content;
+  padding: 0 14px;
+  cursor: pointer;
+  &:hover {
+    background-color: #a3a3a3;
+    color: #ffffff;
+  }
+
+  .mdi-chevron-down {
+    margin-left: 5px;
+  }
+}