FIO-8465: added templates for select all rows alert

src/templates/bootstrap3/grid/html.ejs

@@ -17,6 +17,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>

src/templates/bootstrap3/index.ts

@@ -42,6 +42,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -58,6 +59,7 @@ export default {
     if (builder.scrollResizeObserver) {
       builder.scrollResizeObserver.disconnect();
     }
+    // @ts-ignore
     builder.scrollResizeObserver = new ResizeObserver(() => {
       setTimeout(() => {
         const { form, sidebar } = builder.refs;
@@ -124,5 +126,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };

src/templates/bootstrap3/selectAllContent/html.ejs

@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>

src/templates/bootstrap3/selectAllContent/index.ts

@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };

src/templates/bootstrap4/grid/html.ejs

@@ -15,6 +15,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>

src/templates/bootstrap4/index.ts

@@ -67,6 +67,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -148,5 +149,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };

src/templates/bootstrap4/selectAllContent/html.ejs

@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>

src/templates/bootstrap4/selectAllContent/index.ts

@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };