#156 updating datalist to load data from localStorage according to di…

…alog specifications
headwirecom · Aug 27, 2020 · 71cb5e1 · 71cb5e1
1 parent f86a1bb
commit 71cb5e1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 34 deletions.
diff --git a/fragments/datalist/hatch.js b/fragments/datalist/hatch.js
@@ -3,7 +3,10 @@ module.exports = {
         f.wrap($, 'themecleanflex-components-block')
         f.bindAttribute($.parent(),'model','model')
 
-        let heading = $.find('th span').first()
+        const th = $.find('th').first()
+        f.addFor(th, 'model.columns', 'col')
+        const heading = $.find('th span').first()
+        f.mapField(heading, 'col.header', false)
 
         let dropdownArrow = $.find('svg').first()
         let dropdownArrowClasses = `{
@@ -14,6 +17,11 @@ module.exports = {
         f.bindAttribute(dropdownArrow, 'class', dropdownArrowClasses, false)
         f.bindEvent(dropdownArrow, 'click', "toggleSort(i)");
 
-        f.mapField(heading, 'storageData')
+        const tbody = $.find('tbody').first()
+        const tr = tbody.find('tr').first()
+        const td = tr.find('td').first()
+        f.addFor(tr, 'storageData', 'data')
+        f.addFor(td, 'model.columns', 'col')
+        f.mapField(td, 'data[col.value]', false)
     }
 }
diff --git a/fragments/datalist/template.html b/fragments/datalist/template.html
@@ -3,7 +3,7 @@
         <thead>
             <tr>
                 <th class="flex">
-                    <span>Column1 Header</span>
+                    <span></span>
                     <svg width="16" height="16" viewBox="0 0 16 16" focusable="false" class="transition-transform duration-150 ease-in-out">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"/>
                     </svg>
@@ -12,13 +12,7 @@
         </thead>
         <tbody>
             <tr>
-                <td>Column1 item1</td>
-                <td>Column2 item1</td>
-            </tr>
-
-            <tr>
-                <td>Column1 item2</td>
-                <td>Column2 item2</td>
+                <td></td>
             </tr>
         </tbody>
         <caption></caption>

diff --git a/fragments/datalist/template.vue b/fragments/datalist/template.vue
@@ -4,11 +4,10 @@
       <table class="w-full border">
         <thead>
           <tr>
-            <th class="flex">
-              <span data-per-inline="storageData">{{storageData}}</span>
-              <svg width="16" height="16" viewBox="0 0 16 16"
-              focusable="false" class="transition-transform duration-150 ease-in-out"
-              v-bind:class="{
+            <th class="flex" v-for="(col, i) in model.columns" :key="col.path || i">
+              <span>{{col.header}}</span>
+              <svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
+              class="transition-transform duration-150 ease-in-out" v-bind:class="{
             'rotate-0': active,
             'rotate-180': !active,
             'hidden': !model.sortable
@@ -20,13 +19,8 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>Column1 item1</td>
-            <td>Column2 item1</td>
-          </tr>
-          <tr>
-            <td>Column1 item2</td>
-            <td>Column2 item2</td>
+          <tr v-for="(data, i) in storageData" :key="data.path || i">
+            <td v-for="(col, i) in model.columns" :key="col.path || i">{{data[col.value]}}</td>
           </tr>
         </tbody>
         <caption></caption>

diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue
@@ -4,11 +4,10 @@
       <table class="w-full border">
         <thead>
           <tr>
-            <th class="flex">
-              <span data-per-inline="storageData">{{storageData}}</span>
-              <svg width="16" height="16" viewBox="0 0 16 16"
-              focusable="false" class="transition-transform duration-150 ease-in-out"
-              v-bind:class="{
+            <th class="flex" v-for="(col, i) in model.columns" :key="col.path || i">
+              <span>{{col.header}}</span>
+              <svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
+              class="transition-transform duration-150 ease-in-out" v-bind:class="{
             'rotate-0': active,
             'rotate-180': !active,
             'hidden': !model.sortable
@@ -20,13 +19,8 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>Column1 item1</td>
-            <td>Column2 item1</td>
-          </tr>
-          <tr>
-            <td>Column1 item2</td>
-            <td>Column2 item2</td>
+          <tr v-for="(data, i) in storageData" :key="data.path || i">
+            <td v-for="(col, i) in model.columns" :key="col.path || i">{{data[col.value]}}</td>
           </tr>
         </tbody>
         <caption></caption>