Represent status with dot in tables but not in select view

Author: ml-evs

webapp/src/components/DynamicDataTable.vue

@@ -239,7 +239,7 @@
           >
             <template #option="slotProps">
               <div class="flex items-center">
-                <FormattedItemStatus :status="slotProps.option.status" />
+                <FormattedItemStatus :status="slotProps.option.status" :dot-only="false" />
               </div>
             </template>
             <template #value="slotProps">
@@ -250,7 +250,7 @@
                     :key="index"
                     class="inline-flex items-center mr-2"
                   >
-                    <FormattedItemStatus :status="option.status" />
+                    <FormattedItemStatus :status="option.status" :dot-only="false" />
                   </span>
                 </template>
                 <span v-else class="text-gray-400">Any</span>

webapp/src/components/FormattedItemStatus.vue

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="alt" class="dot" :title="status" :class="'badge-' + badgeClass"></span>
+  <span
+    v-if="dotOnly"
+    class="dot"
+    :title="status.toUpperCase()"
+    :class="'badge-' + badgeClass"
+  ></span>
   <span v-else class="badge badge-pill text-uppercase" :class="'badge-' + badgeClass">
     {{ status }}
   </span>
@@ -8,8 +13,8 @@
 <script>
 export default {
   props: {
-    status: { type: String, required: false },
-    alt: { type: Boolean, default: false },
+    dotOnly: { type: Boolean, default: true },
+    status: { type: String, required: false, default: "" },
   },
   computed: {
     badgeClass() {
@@ -56,5 +61,81 @@ export default {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
+  position: relative;
+}
+
+.dot.badge-success {
+  border-color: #28a745;
+  background-color: transparent !important;
+  box-shadow:
+    0 0 2px #28a745,
+    0 0 4px #28a745,
+    0 0 6px #28a745;
+}
+
+.dot.badge-danger {
+  border-color: #dc3545;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #dc3545 1.5px,
+    #dc3545 2px
+  ) !important;
+}
+
+.dot.badge-warning {
+  border-color: #ffc107;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #ffc107 1.5px,
+    #ffc107 2px
+  ) !important;
+}
+
+.dot.badge-primary {
+  border-color: #007bff;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #007bff 1.5px,
+    #007bff 2px
+  ) !important;
+}
+
+.dot.badge-secondary {
+  border-color: #6c757d;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #6c757d 1.5px,
+    #6c757d 2px
+  ) !important;
+}
+
+.dot.badge-info {
+  border-color: #17a2b8;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #17a2b8 1.5px,
+    #17a2b8 2px
+  ) !important;
+}
+
+.dot.badge-dark {
+  border-color: #343a40;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1.5px,
+    #343a40 1.5px,
+    #343a40 2px
+  ) !important;
 }
 </style>

webapp/src/components/ToggleableItemStatusFormGroup.vue

@@ -9,7 +9,12 @@
       <font-awesome-icon id="edit-icon" class="pl-1" icon="pen" size="xs" :fade="isEditingStatus" />
     </label>
     <div>
-      <FormattedItemStatus v-if="!isEditingStatus" :status="value" aria-labelledby="status" />
+      <FormattedItemStatus
+        v-if="!isEditingStatus"
+        :dot-only="false"
+        :status="value"
+        aria-labelledby="status"
+      />
       <OnClickOutside
         v-if="isEditingStatus"
         :options="{ ignore: [outerDivRef] }"