From 005e8589548ea982ba86dd3eac9d75d9874b10bc Mon Sep 17 00:00:00 2001
From: Luciano Righetti <luciano.righetti@gmail.com>
Date: Thu, 23 Jan 2025 11:21:19 +0100
Subject: [PATCH] chg: style changes

---
 .../src/components/attributes/AttributesIndex.vue    | 12 ++++++------
 .../src/components/objects/ObjectAttributesList.vue  | 12 ++++++------
 frontend/src/components/tags/TagsSelect.vue          | 12 +++++++-----
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/attributes/AttributesIndex.vue b/frontend/src/components/attributes/AttributesIndex.vue
index 5c69c89..2792cf5 100644
--- a/frontend/src/components/attributes/AttributesIndex.vue
+++ b/frontend/src/components/attributes/AttributesIndex.vue
@@ -64,12 +64,12 @@ function handleAttributesUpdated(event) {
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th style="width: 30%" scope="col">value</th>
-                    <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">tags</th>
-                    <th style="width: 10%" scope="col">type</th>
-                    <th style="width: 10%" scope="col" class="d-none d-sm-table-cell">timestamp</th>
-                    <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">distribution</th>
-                    <th style="width: 20%" scope="col" class="text-end">actions</th>
+                    <th scope="col">value</th>
+                    <th style="width: 400px;" scope="col" class="d-none d-sm-table-cell">tags</th>
+                    <th scope="col">type</th>
+                    <th scope="col" class="d-none d-sm-table-cell">timestamp</th>
+                    <th scope="col" class="d-none d-sm-table-cell">distribution</th>
+                    <th scope="col" class="text-end">actions</th>
                 </tr>
             </thead>
             <tbody>
diff --git a/frontend/src/components/objects/ObjectAttributesList.vue b/frontend/src/components/objects/ObjectAttributesList.vue
index 9536043..8f1f701 100644
--- a/frontend/src/components/objects/ObjectAttributesList.vue
+++ b/frontend/src/components/objects/ObjectAttributesList.vue
@@ -42,12 +42,12 @@ function handleAttributeEnriched(attribute_id) {
     <table class="table table-striped">
         <thead>
             <tr>
-                <th style="width: 30%" scope="col">value</th>
-                <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">tags</th>
-                <th style="width: 10%" scope="col">type</th>
-                <th style="width: 10%" scope="col" class="d-none d-sm-table-cell">timestamp</th>
-                <th style="width: 15%" scope="col" class="d-none d-sm-table-cell">distribution</th>
-                <th style="width: 20%" scope="col" class="text-end">actions</th>
+                <th scope="col">value</th>
+                <th style="width: 400px" scope="col" class="d-none d-sm-table-cell">tags</th>
+                <th scope="col">type</th>
+                <th scope="col" class="d-none d-sm-table-cell">timestamp</th>
+                <th scope="col" class="d-none d-sm-table-cell">distribution</th>
+                <th scope="col" class="text-end">actions</th>
             </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/components/tags/TagsSelect.vue b/frontend/src/components/tags/TagsSelect.vue
index 75f4e95..8c5372a 100644
--- a/frontend/src/components/tags/TagsSelect.vue
+++ b/frontend/src/components/tags/TagsSelect.vue
@@ -68,18 +68,19 @@ onMounted(() => {
         },
         render: {
             option: function (data, escape) {
-                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + '" title="' + escape(data.name) + '">' +
+                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + ';" title="' + escape(data.name) + '">' +
                     escape(data.name) +
                     '</span>';
             },
             item: function (data, escape) {
-                return '<span class="badge mx-1 tag" style="color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + '" title="' + escape(data.name) + '">' +
+                return '<span class="badge mx-1 tag" style="display:block; color: ' + escape(data.color) + '; background-color: ' + escape(data.backgroundColor) + ';" title="' + escape(data.name) + '"><span class="tag-label">' +
                     escape(data.name) +
-                    '</span>';
+                    '<span/></span>';
             }
         },
         onLoad() {
-            selectElement.value.tomselect.setValue(props.selectedTags.map(tag => tag.name), true);
+            let tags = props.selectedTags ? props.selectedTags.map(tag => tag.name) : [];
+            selectElement.value.tomselect.setValue(tags, true);
             initialising = false;
         },
         onItemRemove: function (tag) {
@@ -97,7 +98,6 @@ onMounted(() => {
             if (initialising) {
                 return;
             }
-            console.log(item);
             if (props.modelClass == "event") {
                 eventsStore.tag(props.model.id, tag);
                 return;
@@ -113,6 +113,8 @@ onMounted(() => {
 
 </script>
 
+<style></style>
+
 <template>
     <select ref="selectElement" multiple>
     </select>