@5minds/node-red-dashboard-2-processcube-dynamic-table 2.0.1-feature-a2a44b-mbtbbouc → 2.0.1-feature-d958b6-mcew1who

package/ui/components/UIDynamicTable.vue

@@ -1,40 +1,54 @@
 <template>
-    <v-data-table :headers="headers" :items="tasks" :search="search" :sort-by="sortBy" :items-per-page="itemsPerPage"
-        :items-per-page-options="itemsPerPageOptions" @update:sort-by="updateSortBy"
-        @update:items-per-page="updateItemsPerPage" class="full-width-table">
-        <template v-slot:top>
-            <v-toolbar flat class="py-2">
-                <v-text-field class="mx-3 search-input" v-model="search" label="Search" prepend-inner-icon="mdi-magnify"
-                    variant="outlined" hide-details single-line></v-text-field>
-            </v-toolbar>
-        </template>
-        <template v-slot:item.actions="{ item }">
-            <v-container class="action-button-container">
-                <v-container v-for="(action, index) in actions"
-                    style="padding: 0px; display: inline; width: fit-content; margin: 0px">
-                    <v-btn style="margin: 0px 2px" class="action-button" v-if="conditionCheck(action.condition, item)"
-                        :key="index" size="small" @click="actionFn(action, item)">
-                        {{ action.label }}
+    <div class="ui-dynamic-table-container">
+        <UIDynamicTableTitleText v-if="props.title_text && props.title_text.length > 0" :title="props.title_text"
+            :style="props.title_style || 'default'" :customStyles="props.title_custom_text_styling || ''"
+            :titleIcon="props.title_icon || ''" />
+        <v-data-table :headers="headers" :items="tasks" :search="search" class="full-width-table">
+            <template v-slot:top>
+                <v-toolbar flat class="pb-2 pt-8">
+                    <v-text-field class="mx-3 search-input" v-model="search" label="Suchen"
+                        prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+                    <v-btn class="reload-button ml-2 mr-8" @click="reloadData" :disabled="isReloading" size="small"
+                        variant="outlined">
+                        <v-icon left :class="{ 'reload-spin': isReloading }">mdi-refresh</v-icon>
+                        Neu Laden
                     </v-btn>
+                </v-toolbar>
+            </template>
+            <template v-slot:item.actions="{ item }">
+                <v-container class="action-button-container">
+                    <v-container v-for="(action, index) in actions"
+                        style="padding: 0px; display: inline; width: fit-content; margin: 0px">
+                        <v-btn style="margin: 0px 2px" class="action-button"
+                            v-if="conditionCheck(action.condition, item)" :key="index" size="small"
+                            @click="actionFn(action, item)">
+                            {{ action.label }}
+                        </v-btn>
+                    </v-container>
                 </v-container>
-            </v-container>
-        </template>
-        <template v-slot:no-data>
-            <v-alert text="No Data" style="margin: 12px"></v-alert>
-        </template>
-    </v-data-table>
+            </template>
+            <template v-slot:no-data>
+                <v-alert text="No Data" style="margin: 12px"></v-alert>
+            </template>
+        </v-data-table>
+    </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import { debounce } from 'lodash';
+import UIDynamicTableTitleText from './TitleText.vue'
 
 export default {
     name: 'UIDynamicTable',
+    components: {
+        UIDynamicTableTitleText
+    },
     inject: ['$socket'],
     props: {
+        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
         id: { type: String, required: true },
         props: { type: Object, default: () => ({}) },
+        /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
         state: {
             type: Object,
             default: () => ({ enabled: true, visible: true }),
@@ -42,15 +56,6 @@ export default {
     },
     computed: {
         ...mapState('data', ['messages']),
-        searchParamKey() {
-            return `search_${this.id}`;
-        },
-        sortByStorageKey() {
-            return `table_sort_${this.id}`;
-        },
-        itemsPerPageStorageKey() {
-            return `table_items_per_page_${this.id}`;
-        },
     },
     data() {
         return {
@@ -58,24 +63,10 @@ export default {
             actions: [],
             tasks: [],
             headers: [],
-            isInitialized: false,
-            sortBy: [],
-            itemsPerPage: 10,
-            itemsPerPageOptions: [
-                { value: 5, title: '5' },
-                { value: 10, title: '10' },
-                { value: 25, title: '25' },
-                { value: 50, title: '50' },
-                { value: 100, title: '100' },
-                { value: -1, title: 'All' }
-            ],
+            isReloading: false,
         };
     },
     mounted() {
-        this.loadFromLocalStorage();
-        this.loadSearchFromUrl();
-        this.isInitialized = true;
-
         this.$socket.on('widget-load:' + this.id, (msg) => {
             this.initialize(msg);
             this.$store.commit('data/bind', {
@@ -89,7 +80,9 @@ export default {
             }
 
             this.initialize(msg);
+
             this.messages[this.id] = msg;
+
             this.$store.commit('data/bind', {
                 widgetId: this.id,
                 msg,
@@ -128,7 +121,6 @@ export default {
                 title: 'Actions',
                 align: 'center',
                 key: 'actions',
-                sortable: false
             });
         },
         conditionCheck(condition, row) {
@@ -141,82 +133,19 @@ export default {
                 return false;
             }
         },
-        updateSearchParam: debounce(function (searchValue) {
-            const currentQuery = { ...this.$route.query };
+        reloadData() {
+            this.isReloading = true;
+            this.$socket.emit('widget-load', this.id);
 
-            if (searchValue && searchValue.trim() !== '') {
-                currentQuery[this.searchParamKey] = searchValue;
-            } else {
-                delete currentQuery[this.searchParamKey];
-            }
-
-            this.$router.replace({
-                path: this.$route.path,
-                query: currentQuery
-            }).catch(err => {
-                if (err.name !== 'NavigationDuplicated') {
-                    console.error('Router navigation error:', err);
-                }
-            });
-        }, 500),
-        loadSearchFromUrl() {
-            const searchValue = this.$route.query[this.searchParamKey];
-            if (searchValue && typeof searchValue === 'string') {
-                this.search = searchValue;
-            } else {
-                this.search = '';
-            }
-        },
-        loadFromLocalStorage() {
-            try {
-                const savedSortBy = localStorage.getItem(this.sortByStorageKey);
-                if (savedSortBy) {
-                    this.sortBy = JSON.parse(savedSortBy);
-                }
-
-                const savedItemsPerPage = localStorage.getItem(this.itemsPerPageStorageKey);
-                if (savedItemsPerPage) {
-                    this.itemsPerPage = parseInt(savedItemsPerPage, 10);
-                }
-            } catch (error) {
-                console.error('Error loading table settings from localStorage:', error);
-            }
-        },
-        saveToLocalStorage() {
-            try {
-                localStorage.setItem(this.sortByStorageKey, JSON.stringify(this.sortBy));
-                localStorage.setItem(this.itemsPerPageStorageKey, this.itemsPerPage.toString());
-            } catch (error) {
-                console.error('Error saving table settings to localStorage:', error);
-            }
-        },
-        updateSortBy(newSortBy) {
-            this.sortBy = newSortBy;
-            this.saveToLocalStorage();
-        },
-        updateItemsPerPage(newItemsPerPage) {
-            this.itemsPerPage = newItemsPerPage;
-            this.saveToLocalStorage();
-        },
-    },
-    watch: {
-        search(newValue, oldValue) {
-            if (this.isInitialized) {
-                this.updateSearchParam(newValue);
-            }
+            setTimeout(() => {
+                this.isReloading = false;
+            }, 1000);
         },
-        '$route.query': {
-            handler(newQuery) {
-                if (this.isInitialized) {
-                    this.loadSearchFromUrl();
-                }
-            },
-            deep: true
-        }
     },
 };
 </script>
 
 <style scoped>
+/* CSS is auto scoped, but using named classes is still recommended */
 @import '../stylesheets/ui-dynamic-table.css';
 </style>

package/ui/stylesheets/ui-dynamic-table.css

@@ -1,96 +1,126 @@
 h1 {
-    margin-bottom: 10px
+  margin-bottom: 10px;
 }
 
 h2 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 h3 {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 p {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 ul li {
-   list-style-type: circle;
-   list-style-position: inside;
-   margin-left: 15px;
+  list-style-type: circle;
+  list-style-position: inside;
+  margin-left: 15px;
 }
 
 pre {
-    padding: 12px;
-    margin: 12px;
-    background-color: #eee;
+  padding: 12px;
+  margin: 12px;
+  background-color: #eee;
 }
 
 code {
-    font-size: 0.825rem;
-    color: #ae0000;
+  font-size: 0.825rem;
+  color: #ae0000;
 }
 
 input {
-    padding: 12px;
-    margin: 12px;
-    background-color: #eee;
+  padding: 12px;
+  margin: 12px;
+  background-color: #eee;
 }
 
 .task-div {
-    padding: 8px;
-    margin: 16px;
-    border: solid;
-    border-radius: 4px;
-    border-color: #303030;
+  padding: 8px;
+  margin: 16px;
+  border: solid;
+  border-radius: 4px;
+  border-color: #303030;
 }
 
 .action-button-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .full-width-table {
   --v-table-header-height: 40px !important;
+  background-color: #fff;
+  border-radius: 0px 0px 8px 8px;
 }
 
 .full-width-table .v-toolbar {
-    background: unset !important;
-    color: unset !important;
+  background: unset !important;
+  color: unset !important;
 }
 
 .full-width-table .v-table__wrapper .v-alert--variant-flat {
-    background: unset !important;
-    color: unset !important;
+  background: unset !important;
+  color: unset !important;
 }
 
-.full-width-table >>> thead th {
+.full-width-table :deep(thead th) {
   border-bottom: 4px solid rgb(var(--v-theme-primary)) !important;
   font-weight: 700 !important;
   font-size: 16px !important;
 }
 
-.full-width-table >>> tbody {
-  background-color: #F6F5FA !important;
+.full-width-table :deep(tbody) {
+  background-color: unset !important;
   --widget-row-height: 40px !important;
   font-size: 16px;
 }
 
-.search-input >>> .v-field__outline__end {
-  border-right: none;
-  border-top: none;
-  border-radius: 0px;
+.search-input :deep(.v-field__outline__end) {
+  border: none !important;
+}
+
+.search-input :deep(.v-field__outline__start) {
+  border: none !important;
+}
+
+.search-input :deep(.v-field__outline) {
+  display: none !important;
 }
 
-.search-input >>> .v-label {
+.search-input :deep(.v-label) {
   font-size: 14px !important;
 }
 
-.search-input >>> .v-field__outline__start {
+.search-input :deep(.v-field) {
   border-radius: 0px 0px 0px 8px;
-  border-top: none;
+  border-bottom: 2px solid rgb(var(--v-theme-primary)) !important;
+  border-left: 2px solid rgb(var(--v-theme-primary)) !important;
+  border-right: none !important;
+  border-top: none !important;
+  transition: border-width 0.1s ease-in-out;
+  margin-bottom: 8px;
+}
+
+.search-input :deep(.v-field__input) {
+  font-size: 18px;
+  font-weight: 400;
+  font-style: normal;
+  padding: 4px 8px;
+}
+
+.search-input:focus-within :deep(.v-field) {
+  border-bottom: 4px solid rgb(var(--v-theme-primary)) !important;
+  border-left: 4px solid rgb(var(--v-theme-primary)) !important;
+}
+
+.search-input:focus-within :deep(.v-field__input) {
+  background-color: #f6f5fa;
+  border-radius: 0 8px 0px 5px;
 }
 
 .action-button {
@@ -101,3 +131,69 @@ input {
   color: rgb(var(--v-theme-primary));
   padding: 8px;
 }
+
+.ui-dynamic-table-container {
+  border-radius: 8px;
+  border-bottom: 4px solid rgb(var(--v-theme-primary));
+  box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5);
+}
+
+.ui-dynamic-table-title-default {
+  background: linear-gradient(131deg, #18181a 26.76%, #242326 100.16%);
+  padding: 32px;
+  color: #ffffff;
+  font-size: 36px;
+  font-weight: 700;
+  border-radius: 8px 8px 0px 0px;
+  margin-top: 0px;
+  border: 2px solid #f6f5fa;
+  border-bottom: none;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.ui-dynamic-table-title-default hr {
+  border: 4px solid rgb(var(--v-theme-primary));
+  border-radius: 2px;
+}
+
+.ui-dynamic-table-title-minimal {
+  padding: 16px;
+  margin-top: 0px;
+  border: 2px solid #f6f5fa;
+  border-bottom: none;
+}
+
+.ui-dynamic-table-title-outside {
+  padding-bottom: 24px;
+  padding-top: 24px;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.reload-button {
+  border-radius: 8px !important;
+  background-color: transparent !important;
+  border-color: rgb(var(--v-theme-primary)) !important;
+  border: 2px solid !important;
+  color: rgb(var(--v-theme-primary)) !important;
+  padding: 8px !important;
+  min-height: 36px !important;
+  font-weight: 500 !important;
+}
+
+.reload-button:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08) !important;
+}
+
+.reload-button:disabled {
+  opacity: 0.6 !important;
+}
+
+.reload-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}