feat(dashboards): table widget selection docs

solarwinds · Sep 3, 2024 · 83334c7 · 83334c7
1 parent 684954c
commit 83334c7
Show file tree

Hide file tree

Showing 15 changed files with 298 additions and 82 deletions.
diff --git a/packages/dashboards/examples/src/components/docs/demo.files.ts b/packages/dashboards/examples/src/components/docs/demo.files.ts
@@ -176,6 +176,15 @@ export const DEMO_PATHS = [
     "widget-types/table/table-widget-search/table-widget-search-example.component.ts",
     "widget-types/table/table-widget-search-docs.component.html",
     "widget-types/table/table-widget-search-docs.component.ts",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.html",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.less",
+    "widget-types/table/table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts",
     "widget-types/table/table-widget-selectable/table-widget-selectable.example.component.html",
     "widget-types/table/table-widget-selectable/table-widget-selectable.example.component.less",
     "widget-types/table/table-widget-selectable/table-widget-selectable.example.component.ts",

diff --git a/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts b/packages/dashboards/examples/src/components/docs/widget-types/table/table-docs.module.ts
@@ -44,6 +44,15 @@ import { TableSelectableDocsComponent } from "./table-selectable-docs.component"
 import { TableWidgetSelectableExampleComponent } from "./table-widget-selectable/table-widget-selectable.example.component";
 import { TablePaginatorDocsComponent } from "./table-paginator-docs.component";
 import { TableWidgetPaginatorExampleComponent } from "./table-widget-paginator/table-widget-paginator-example.component";
+import {
+    TableWidgetSelectableMultiExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component";
+import {
+    TableWidgetSelectableSingleExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-single/table-widget-selectable-single.example.component";
+import {
+    TableWidgetSelectableRadioExampleComponent
+} from "./table-widget-selectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component";
 
 const routes: Routes = [
     {
@@ -116,6 +125,9 @@ const routes: Routes = [
         TableWidgetExampleComponent,
         TableWidgetSearchExampleComponent,
         TableWidgetSelectableExampleComponent,
+        TableWidgetSelectableMultiExampleComponent,
+        TableWidgetSelectableSingleExampleComponent,
+        TableWidgetSelectableRadioExampleComponent,
     ],
     providers: [
         {

diff --git a/...ards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html b/...ards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.html
@@ -23,17 +23,58 @@ <h1>Table Widget with Select Functionality</h1>
     </li>
 </ul>
 
+<h2>Types of Select</h2>
+<p>Table widget can be configured with 4 different types of select:</p>
+<ul>
+    <li>
+        <b> Multi: </b>
+        <p>
+            Allows to pick multiple table rows. Each row displays a checkbox in
+            this mode and a selector for all items on the given page/all pages
+            is displayed as well.
+        </p>
+    </li>
+    <li>
+        <b> Radio: </b>
+        <p>
+            Allows to pick only one table row. Each row displays a radio button
+            and the selector for all items is hidden.
+        </p>
+    </li>
+    <li>
+        <b> Single: </b>
+        <p>
+            Same behavior as <b>Radio</b> mode but without buttons. Row is
+            clickable by default.
+        </p>
+    </li>
+</ul>
+<nui-example-wrapper
+    filenamePrefix="table-widget-selectable-multi"
+    exampleTitle="Table widget with multi select"
+>
+    <table-widget-selectable-multi-example></table-widget-selectable-multi-example>
+</nui-example-wrapper>
+
+<nui-example-wrapper
+    filenamePrefix="table-widget-selectable-radio"
+    exampleTitle="Table widget with radio select"
+>
+    <table-widget-selectable-radio-example></table-widget-selectable-radio-example>
+</nui-example-wrapper>
+
 <nui-example-wrapper
-    filenamePrefix="table-widget-selectable"
-    exampleTitle="Table widget with Select"
+    filenamePrefix="table-widget-selectable-single"
+    exampleTitle="Table widget with single select"
 >
-    <table-widget-selectable-example></table-widget-selectable-example>
+    <table-widget-selectable-single-example></table-widget-selectable-single-example>
 </nui-example-wrapper>
 
 <h2>Configuring the Widget</h2>
 <p>
     To configure the widget you have to enable selection in the widget
-    configuration:
+    configuration. The configuration is of type
+    <code>TableWidgetSelectionConfig</code>.
 </p>
 <nui-example-code language="typescript">
     {{ tableConfigurationText }}

diff --git a/...boards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts b/...boards/examples/src/components/docs/widget-types/table/table-selectable-docs.component.ts
@@ -29,10 +29,17 @@ export class TableSelectableDocsComponent {
         "table": {
             ...
             properties: {
-                configuration: {
-                    // enable selection here
-                    selectable: true,
-                } as ITableWidgetConfig,
+                // enabling selection here
+                selectionConfiguration: {
+                    // whether the selection is enabled or disabled
+                    enabled: true,
+                    // can be Multi | Radio | Single
+                    selectionMode: TableSelectionMode.Multi,
+                    // property that uniquely identifies row in a table
+                    trackByProperty: "id",
+                    // whether clicking on row should select it
+                    clickableRow: true,
+                },
             },
         },
     `;

diff --git a/...ctable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html b/...ctable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.html
@@ -0,0 +1,3 @@
+<table-widget-selectable-example
+    [selectionConfiguration]="selectionConfiguration"
+></table-widget-selectable-example>
diff --git a/...ctable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less b/...ctable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+    height: 400px;
+}
diff --git a/...lectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts b/...lectable/table-widget-selectable-multi/table-widget-selectable-multi.example.component.ts
@@ -0,0 +1,40 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+    selector: "table-widget-selectable-multi-example",
+    templateUrl: "./table-widget-selectable-multi.example.component.html",
+    styleUrls: ["./table-widget-selectable-multi.example.component.less"],
+})
+export class TableWidgetSelectableMultiExampleComponent {
+    public selectionConfiguration: TableWidgetSelectionConfig = {
+        enabled: true,
+        selectionMode: TableSelectionMode.Multi,
+        trackByProperty: "id",
+        clickableRow: true,
+    };
+}
diff --git a/...ctable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html b/...ctable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.html
@@ -0,0 +1,3 @@
+<table-widget-selectable-example
+    [selectionConfiguration]="selectionConfiguration"
+></table-widget-selectable-example>
diff --git a/...ctable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less b/...ctable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+    height: 400px;
+}
diff --git a/...lectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts b/...lectable/table-widget-selectable-radio/table-widget-selectable-radio.example.component.ts
@@ -0,0 +1,40 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+    selector: "table-widget-selectable-radio-example",
+    templateUrl: "./table-widget-selectable-radio.example.component.html",
+    styleUrls: ["./table-widget-selectable-radio.example.component.less"],
+})
+export class TableWidgetSelectableRadioExampleComponent {
+    public selectionConfiguration: TableWidgetSelectionConfig = {
+        enabled: true,
+        selectionMode: TableSelectionMode.Radio,
+        trackByProperty: "id",
+        clickableRow: true,
+    };
+}
diff --git a/...able/table-widget-selectable-single/table-widget-selectable-single.example.component.html b/...able/table-widget-selectable-single/table-widget-selectable-single.example.component.html
@@ -0,0 +1,3 @@
+<table-widget-selectable-example
+    [selectionConfiguration]="selectionConfiguration"
+></table-widget-selectable-example>
diff --git a/...able/table-widget-selectable-single/table-widget-selectable-single.example.component.less b/...able/table-widget-selectable-single/table-widget-selectable-single.example.component.less
@@ -0,0 +1,3 @@
+.dashboard {
+    height: 400px;
+}
diff --git a/...ctable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts b/...ctable/table-widget-selectable-single/table-widget-selectable-single.example.component.ts
@@ -0,0 +1,39 @@
+// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to
+//  deal in the Software without restriction, including without limitation the
+//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+//  sell copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+
+import { Component } from "@angular/core";
+import { TableSelectionMode } from "@nova-ui/bits";
+import { TableWidgetSelectionConfig } from "@nova-ui/dashboards";
+
+/**
+ * A component that instantiates the dashboard
+ */
+@Component({
+    selector: "table-widget-selectable-single-example",
+    templateUrl: "./table-widget-selectable-single.example.component.html",
+    styleUrls: ["./table-widget-selectable-single.example.component.less"],
+})
+export class TableWidgetSelectableSingleExampleComponent {
+    public selectionConfiguration: TableWidgetSelectionConfig = {
+        enabled: true,
+        selectionMode: TableSelectionMode.Single,
+        trackByProperty: "id",
+    };
+}