@nixweb/nixloc-ui 0.0.237 → 0.0.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.237",
+  "version": "0.0.238",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/ButtonGroup.vue

@@ -2,14 +2,10 @@
   <div>
     <div>
       <b-button-group size="sm">
-        <b-button
-          v-for="option in options"
-          :class="{ selected: option.title == selected }"
-          class="btn-group"
-          @click="execute(option)"
-          :key="option.title"
-        >
+        <b-button v-for="option in options" :class="{ selected: option.title == selected }" class="btn-group"
+          @click="execute(option)" :key="option.title">
           {{ option.title }}
+          <div v-if="option.badge" class="badge-button">{{ option.badge }}</div>
         </b-button>
       </b-button-group>
     </div>
@@ -53,7 +49,17 @@ export default {
   border-color: #e9e9e9 !important;
   outline: none !important;
 }
+
 .selected {
   background-color: #f5f5f5 !important;
 }
+
+.badge-button {
+  width: 20px;
+  height: 20px;
+  background-color: red;
+  border-radius: 20px;
+  margin-left: 10px;
+  color: white;
+}
 </style>

package/src/component/planner/ResponsibleUser.vue

@@ -1,6 +1,18 @@
 <template>
     <div>
-        <div class="div-current" @click="show = true">
+        <div v-if="multiSelected">
+            <div class="side-by-side icon-filter" @click="show = true">
+                <i class="fa-solid fa-circle-plus "></i>
+                <span v-if="currentValueFilter.length == 0"> Todos usuários</span>
+            </div>
+            <div class="side-by-side" v-for="user in currentValueFilter">
+                <img class="img-current" :src="baseUrl + user.photo" alt="">
+                <div class="side-by-side icon-close" @click="remove(user)">
+                    <i class="fa-solid fa-do-not-enter"></i>
+                </div>
+            </div>
+        </div>
+        <div v-else class="div-current" @click="show = true">
             <img class="img-current" :src="baseUrl + currentValue.photo" alt="">
         </div>
         <div v-if="show" class="main-select" @mouseleave="show = false">
@@ -28,9 +40,14 @@ export default {
     props: {
         genericId: String,
         responsibleUser: Object,
+        multiSelected: {
+            type: Boolean,
+            default: false,
+        },
         title: String,
         urlGet: String,
         urlUpdate: String,
+        value: Array
     },
     components: {
 
@@ -39,6 +56,7 @@ export default {
         return {
             baseUrl: "https://espaco.blob.core.windows.net/nixloc-photo-user/",
             currentValue: {},
+            currentValueFilter: [],
             data: [],
             show: false,
             baseParams: {
@@ -70,9 +88,22 @@ export default {
             this.putApi(params).then((response) => { });
         },
         select(item) {
-            this.currentValue = item;
+            if (!this.multiSelected) {
+                this.currentValue = item;
+            } else {
+                const exists = this.currentValueFilter.some(x => x.id === item.id);
+                if (!exists)
+                    this.currentValueFilter.push(item);
+                this.$emit("input", this.currentValueFilter);
+            }
+
+            if (this.genericId)
+                this.updateResponsibleUser();
+
             this.show = false;
-            this.updateResponsibleUser();
+        },
+        remove(item) {
+            this.currentValueFilter = this.currentValueFilter.filter(x => x.id !== item.id);
         }
     },
     watch: {
@@ -125,5 +156,16 @@ export default {
     height: 30px;
     border-radius: 50px;
 }
+
+.icon-filter {
+    font-size: 15px;
+    cursor: pointer;
+}
+
+.icon-close {
+    color: red;
+    font-size: 13px;
+    cursor: pointer;
+}
 </style>