#156 added selected actions

headwirecom · Aug 31, 2020 · 2d8341a · 2d8341a
1 parent 874abdb
commit 2d8341a
Show file tree

Hide file tree

Showing 12 changed files with 399 additions and 148 deletions.
diff --git a/core/src/main/java/com/themecleanflex/models/DatalistModel.java b/core/src/main/java/com/themecleanflex/models/DatalistModel.java
@@ -95,6 +95,13 @@
           "x-default": 300,
           "x-form-visible": "model.scrollabletable == 'true'"
         },
+        "selectable": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Selectable Table",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
         "cellborders": {
           "type": "string",
           "x-source": "inject",
@@ -511,6 +518,10 @@ public class DatalistModel extends AbstractComponent {
 	@Default(values ="300")
 	private String tableheight;
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Selectable Table","x-form-type":"materialswitch","x-default":false} */
+	@Inject
+	private String selectable;
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Add borders around individual cells","x-form-type":"materialswitch","x-default":false} */
 	@Inject
 	private String cellborders;
@@ -687,6 +698,11 @@ public String getTableheight() {
 		return tableheight;
 	}
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Selectable Table","x-form-type":"materialswitch","x-default":false} */
+	public String getSelectable() {
+		return selectable;
+	}
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Add borders around individual cells","x-form-type":"materialswitch","x-default":false} */
 	public String getCellborders() {
 		return cellborders;

diff --git a/fragments/datalist/hatch.js b/fragments/datalist/hatch.js
@@ -3,7 +3,15 @@ module.exports = {
         f.wrap($, 'themecleanflex-components-block')
         f.bindAttribute($.parent(),'model','model')
 
-        const desktopContainer = $.find('div').eq(0);
+        const selectedContainer = $.find('div.selected').eq(0)
+        const selectedContainerClasses = `{
+            'hidden': active.filter(element => element === true).length === 0,
+        }`
+        f.bindAttribute(selectedContainer, 'class', selectedContainerClasses, false)
+        const selectedText = selectedContainer.find('.selected-text').eq(0)
+        f.mapField(selectedText, '`${active.filter(element =&gt; element === true).length} selected`', false)
+
+        const desktopContainer = $.find('div.overflow-x-hidden').eq(0);
         const desktopContainerClasses = `{
             'overflow-y-scroll': model.scrollabletable === 'true',
             'hidden': isMobile,
@@ -42,21 +50,44 @@ module.exports = {
             'top-0': model.stickyheader === 'true'
         }`
         f.bindAttribute(th, 'class', thClasses, false)
-        f.mapField(th, 'col.header', false)
+        f.mapField(th.find('span.header-text'), 'col.header', false)
+
+        const innerHeaderDiv = th.find('div').eq(0);
+        f.addIf(innerHeaderDiv, "model.selectable === 'true' && i === 0")
+
+        f.addIf(th.find('span.header-text').eq(1), "model.selectable !== 'true' || i !== 0" ) ;
+        f.addIf(th.find('.unchecked'), '!active.every(element => element === true)');
+        f.addIf(th.find('.checked'), 'active.every(element => element === true)');
+        f.bindEvent(th.find('.action').eq(0), 'click', 'toggleAllRows');
 
         const tbody = $.find('tbody').first()
         const tr = tbody.find('tr').first()
         const td = tr.find('td').first()
-        f.addFor(tr, 'storageData', 'data')
+        tr.attr('v-for', `(${data}, j) in ${storageData}`)
+        tr.attr(':key', `${data}.path || j`)
+
         f.addFor(td, 'model.columns', 'col')
-        f.mapField(td, 'data[col.value]', false)
+        f.mapField(td.find('span.item-text'), 'data[col.value]', false)
 
         const tdClasses = `{
             'border': model.cellborders === 'true',
             'p-3': model.densetable !== 'true',
             'p-1': model.densetable === 'true'
         }`    
         f.bindAttribute(td, 'class', tdClasses, false)
+        f.addStyle(td, 'background', "active[j] ? 'var(--color-red-500) !important' : ''")
+
+        const innerBodyDiv = td.find('div').eq(0);
+        f.addIf(innerBodyDiv, "model.selectable === 'true' && i === 0")
+
+        f.bindEvent(innerBodyDiv.find('.action').eq(0), 'click', 'toggleRow(j)');
+        f.addStyle(td.find('span.item-text'), 'color',"active[j] ? 'var(--text-secondary-color) !important' : ''");
+
+        f.addIf(td.find('span.item-text').eq(1), "model.selectable !== 'true' || i !== 0" );
+
+        f.addIf(td.find('.unchecked'), '!active[j]');
+        f.addIf(td.find('.checked'), 'active[j]');
+        f.addStyle(td.find('.checked'), 'fill',"active[j] ? 'var(--text-secondary-color) !important' : ''");
 
         const caption = $.find('caption')
         const captionClasses = `{

diff --git a/fragments/datalist/model.json b/fragments/datalist/model.json
@@ -78,6 +78,13 @@
           "x-default": 300,
           "x-form-visible": "model.scrollabletable == 'true'"
         },
+        "selectable": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Selectable Table",
+          "x-form-type": "materialswitch",
+          "x-default": false
+        },
         "cellborders": {
           "type": "string",
           "x-source": "inject",

diff --git a/fragments/datalist/template.html b/fragments/datalist/template.html
@@ -1,15 +1,46 @@
 <div class="w-full">
-
+    <div class="selected w-full flex justify-between p-3">
+        <div class="selected-text">0 Selected</div>
+        <div class="selected-actions">
+            <svg class="w-24" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
+            </svg>
+        </div>
+    </div>
     <div class="w-full overflow-x-hidden">
         <table class="w-full border">
             <thead>
                 <tr>
-                    <th class="text-left"></th>
+                    <th class="text-left">
+                        <div class="flex">
+                            <span class="action relative cursor-pointer mr-2">
+                                <input type="checkbox" data-indeterminate="false" value="" class="h-100 m-0 opacity-0 p-0 z-10 w-48 absolute">
+                                <svg class="action-active-svg w-24" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path class="unchecked" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
+                                    <path class="checked" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
+                                </svg>
+                            </span>
+                            <span class="header-text"></span>
+                        </div>
+                        <span class="header-text"></span>
+                    </th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td></td>
+                    <td>
+                        <div class="flex">
+                            <span class="action relative cursor-pointer mr-2">
+                                <input type="checkbox" data-indeterminate="false" value="" class="h-100 m-0 opacity-0 p-0 z-10 w-48 absolute">
+                                <svg class="action-active-svg w-24" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path class="unchecked" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
+                                    <path class="checked" d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
+                                </svg>
+                            </span>
+                            <span class="item-text"></span>
+                        </div>
+                        <span class="item-text"></span>
+                    </td>
                 </tr>
             </tbody>
             <caption></caption>