Data table WIP

conedevelopment · Nov 1, 2023 · 655644e · 655644e
1 parent c1f7a57
commit 655644e
Show file tree

Hide file tree

Showing 13 changed files with 4,456 additions and 100 deletions.
diff --git a/dist/categories/index.html b/dist/categories/index.html
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/customers/index.html b/dist/customers/index.html
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/js/data-table.js b/dist/js/data-table.js
diff --git a/dist/js/data.js b/dist/js/data.js
diff --git a/dist/orders/index.html b/dist/orders/index.html
diff --git a/dist/products/index.html b/dist/products/index.html
diff --git a/src/_includes/partial/card/data-table.html b/src/_includes/partial/card/data-table.html
@@ -65,13 +65,13 @@ <h2 class="app-card__title">{{ dataTable.title }}</h2>
                 class="alert alert--info data-table-alert"
                 x-show="selectedItems.length"
             >
-                <span x-text="`${selectedItems.length} items are selected`"></span>
+                <span x-text="`${selectedItems.length > total ? total : selectedItems.length} items are selected`"></span>
                 <div class="data-table-alert__actions">
                     <div class="data-table-alert__column">
                         <button
                             @click="selectAllCheckbox($event);"
                             class="btn btn--primary btn--sm"
-                            x-text="`Select all ${items.length}`"
+                            x-text="`Select all ${items.length > total ? total : items.length}`"
                         ></button>
                         <button
                             @click="deselectAllCheckbox($event);"
@@ -146,13 +146,14 @@ <h2 class="app-card__title">{{ dataTable.title }}</h2>
                         <template x-for="(item, index) in pagedItems" :key="item.id">
                             <tr>
                                 <td>
-                                    <label class="form-check" :aria-label=`Select ${item.name}`>
+                                    <label class="form-check" :aria-label="`Select ${item.name}`">
                                         <input
                                             :name="item.id"
                                             class="form-check__control"
                                             type="checkbox"
                                             value="1"
                                             x-model="item.selected"
+                                            :change="updateSelectAllStatus()"
                                         />
                                     </label>
                                 </td>

diff --git a/src/_includes/partial/pagination.html b/src/_includes/partial/pagination.html
diff --git a/src/css/main.css b/src/css/main.css