Merge branch 'main' into 8225-link-selected

infor-design · Jan 11, 2024 · cdca87f · cdca87f
2 parents c851b01 + 6bbc445
commit cdca87f
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 7 deletions.
diff --git a/app/views/components/datagrid/test-show-and-hide-pager.html b/app/views/components/datagrid/test-show-and-hide-pager.html
@@ -0,0 +1,105 @@
+<div class="row">
+  <div class="six columns">
+    <h2>Datagrid Test: Hide and Show Pager</h2>
+    <br />
+  </div>
+</div>
+
+<div class="row">
+  <div class="six columns">
+    <div class="field">
+      <button id="hide-pager" class="btn-primary">
+        <span>Hides the pager bar</span>
+      </button>
+
+      <button id="show-pager" class="btn-secondary">
+        <span>Shows the pager bar</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <div class="toolbar">
+      <div class="title">
+        &nbsp;
+      </div>
+      <div class="buttonset"></div>
+      <div class="more">
+        <button class="btn-actions" type="button">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use href="#icon-more"></use>
+          </svg>
+          <span class="audible">More Actions</span>
+        </button>
+        <ul class="popupmenu">
+          <li><a href="#">Option One</a></li>
+          <li><a href="#">Option Two</a></li>
+          <li><a href="#">Option Three</a></li>
+          <li class="separator single-selectable-section"></li>
+          <li class="heading">Row Height</li>
+          <li class="is-selectable"><a data-option="row-extra-small" href="#" data-translate="text">ExtraSmall</a></li>
+          <li class="is-selectable"><a data-option="row-small" href="#" data-translate="text">Small</a></li>
+          <li class="is-selectable"><a data-option="row-medium" href="#" data-translate="text">Medium</a></li>
+          <li class="is-selectable is-checked"><a data-option="row-large" href="#" data-translate="text">Large</a></li>
+        </ul>
+      </div>
+    </div>
+    <div id="datagrid"></div>
+  </div>
+</div>
+
+<script>
+  $('body').one('initialized', function () {
+    var columns = [],
+      data = [];
+
+    //Define Columns for the Grid.
+    columns.push({ id: 'id', name: 'Id', field: 'id', formatter: Soho.Formatters.Readonly});
+    columns.push({ id: 'productId', name: 'Product Id', field: 'productId', width: 140, formatter: Soho.Formatters.Readonly});
+    columns.push({ id: 'productName', name: 'Product Name', sortable: false, field: 'productName', width: 150, formatter: Soho.Formatters.Hyperlink});
+    columns.push({ id: 'activity', hidden: true, name: 'Activity', field: 'activity', width: 125});
+    columns.push({ id: 'quantity', name: 'Quantity', field: 'quantity', width: 125});
+    columns.push({ id: 'price', name: 'Price', field: 'price', width: 125, formatter: Soho.Formatters.Decimal});
+    columns.push({ id: 'orderDate', name: 'Order Date', field: 'orderDate', formatter: Soho.Formatters.Date, dateFormat: 'M/d/yyyy'});
+
+    function gridSource(req, done) {
+      var url = '{{basepath}}api/compressors?pageNum='+ req.activePage +'&pageSize='+ req.pagesize;
+
+      return $.getJSON(url, function(res) {
+        req.total = res.total;
+        done(res.data, req);
+      });
+    }
+
+    //Init and get the api for the grid
+    gridApi = $('#datagrid').datagrid({
+      columns: columns,
+      selectable: 'multiple',
+      paging: true,
+      pagesize: 5,
+      source: gridSource,
+      toolbar: {
+        title: 'Data Grid Header Title',
+        results: true,
+        dateFilter: false,
+        keywordFilter: true,
+        advancedFilter: true,
+        actions: true,
+        views: true,
+        rowHeight: true,
+        collapsibleFilter: true
+      }
+    }).data('datagrid');
+
+
+    $('#hide-pager').on('click', function() {
+      gridApi.pagerAPI.hidePager(); // Calling the hidePager method to hide the pager.
+    });
+
+    $('#show-pager').on('click', function() {
+      gridApi.pagerAPI.showPager(); // Calling the showPager method to show the pager.
+    });
+  });
+</script>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -8,8 +8,9 @@
 
 - `[Link]` Changed selected border color for link card. ([#8225](https://github.com/infor-design/enterprise/issues/8225))
 - `[Locale]` Changed all `zh` locales time format as suggested by native speakers. ([#8313](https://github.com/infor-design/enterprise/issues/8313))
-- `[Process Indicator]` Adjusted alignment of icon in compact process indicator. ([#8241](https://github.com/infor-design/enterprise/issues/8241))
 - `[Modal]` Fixed a bug where the modal would shift up when toggling a switch inside of it. ([#8018](https://github.com/infor-design/enterprise/issues/8018))
+- `[Process Indicator]` Adjusted alignment of icon in compact process indicator. ([#8241](https://github.com/infor-design/enterprise/issues/8241))
+- `[Pager]` Added `showPager` and `hidePager` method to show and hide the pager bar. ([#8094](https://github.com/infor-design/enterprise/issues/8094))
 - `[Scatterplot]` Fixed legend position to be centered inside the div parent. ([#8194](https://github.com/infor-design/enterprise/issues/8194))
 - `[Tabs]` Fixed size in close button of tab list. ([#8274](https://github.com/infor-design/enterprise/issues/8274))
 - `[Tabs Header]` Fixed focus border not visible in classic contrast alabaster. ([#8265](https://github.com/infor-design/enterprise/issues/8265))

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/pager/pager.js b/src/components/pager/pager.js
@@ -779,6 +779,22 @@ Pager.prototype = {
     return this._pageCount;
   },
 
+  /**
+   * Hides the pager bar.
+   * @returns {void}
+   */
+  hidePager() {
+    this.pagerBar.hide();
+  },
+
+  /**
+   * Shows the pager bar.
+   * @returns {void}
+   */
+  showPager() {
+    this.pagerBar.show();
+  },
+
   /**
    * Renders a row of numbers that can be used to select pages (Blockgrid/Listview)
    * @returns {void}