From 8b112f3409e7387c343a1de35169d7ce25b7c036 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 7 Dec 2023 11:29:49 -0300
Subject: [PATCH] create componente VnSelectCreate

---
 src/components/common/VnSelectCreate.vue | 79 ++++++++++++++++++++++++
 src/components/common/VnSelectFilter.vue |  4 +-
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/VnSelectCreate.vue

diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
new file mode 100644
index 000000000..bb4465fa5
--- /dev/null
+++ b/src/components/common/VnSelectCreate.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    rolesAllowedToCreate: {
+        type: Array,
+        default: () => ['developer'],
+    },
+});
+
+const role = useRole();
+const popup = ref(null);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const isDeliveryAssistant = computed(() => {
+    return role.hasAny($props.rolesAllowedToCreate);
+});
+
+const openCreateForm = () => {
+    popup.value.show();
+};
+</script>
+
+<template>
+    <VnSelectFilter
+        label="Label"
+        v-model="value"
+        :options="options"
+        option-value="value"
+        option-label="label"
+        hide-selected
+    >
+        <template v-if="isDeliveryAssistant" #append>
+            <QIcon
+                @click.stop.prevent="openCreateForm()"
+                name="add"
+                size="19px"
+                class="add-icon"
+            />
+            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
+                <slot name="form" />
+            </QDialog>
+        </template>
+    </VnSelectFilter>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 04f10ace9..789622cb9 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -96,8 +96,8 @@ const value = computed({
                 size="18px"
             />
         </template>
-        <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
-            <slot :name="slotName" v-bind="slotData" />
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
         </template>
     </QSelect>
 </template>