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 1/2] 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>

From a8c6b6f63820d68d96dcb03e5a37858f02c8884d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 14 Dec 2023 08:46:17 -0300
Subject: [PATCH 2/2] Update input select create

---
 src/components/common/VnSelectCreate.vue | 28 ++++++++++--------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
index bb4465fa5..867c97135 100644
--- a/src/components/common/VnSelectCreate.vue
+++ b/src/components/common/VnSelectCreate.vue
@@ -27,7 +27,7 @@ const $props = defineProps({
 });
 
 const role = useRole();
-const popup = ref(null);
+const showForm = ref(false);
 
 const value = computed({
     get() {
@@ -38,35 +38,31 @@ const value = computed({
     },
 });
 
-const isDeliveryAssistant = computed(() => {
+const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
 
-const openCreateForm = () => {
-    popup.value.show();
+const toggleForm = () => {
+    showForm.value = !showForm.value;
 };
 </script>
 
 <template>
-    <VnSelectFilter
-        label="Label"
-        v-model="value"
-        :options="options"
-        option-value="value"
-        option-label="label"
-        hide-selected
-    >
-        <template v-if="isDeliveryAssistant" #append>
+    <VnSelectFilter v-model="value" :options="options">
+        <template v-if="isAllowedToCreate" #append>
             <QIcon
-                @click.stop.prevent="openCreateForm()"
+                @click.stop.prevent="toggleForm()"
                 name="add"
                 size="19px"
                 class="add-icon"
             />
-            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
-                <slot name="form" />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" @close-form="toggleForm()" />
             </QDialog>
         </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
     </VnSelectFilter>
 </template>