From 3c93f43f63d4e74273e935b2d5380d244f187e81 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Wed, 28 Aug 2024 19:41:24 +0200
Subject: [PATCH 1/5] Added organization selector to bouquet with
 autocompletion based on data.gouv Not updating the ownership yet

---
 .../forms/bouquet/BouquetOwnerForm.vue        | 67 ++++++++++++++++++-
 src/model/organization.ts                     |  7 ++
 src/services/api/SearchOrgAPI.ts              | 29 ++++++++
 3 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/model/organization.ts
 create mode 100644 src/services/api/SearchOrgAPI.ts

diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index 830e3254..ef057b1f 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { defineModel, computed, ref, watch, type Ref } from 'vue'
+import type { Organization } from '@datagouv/components'
+import { debounce } from 'lodash'
+import { defineModel, computed, ref, watch, type Ref, onMounted } from 'vue'
+import Multiselect from 'vue-multiselect'
+import 'vue-multiselect/dist/vue-multiselect.css'
 
+import '@/assets/multiselect.css'
 import type { Topic } from '@/model/topic'
+import SearchAPI from '@/services/api/SearchOrgAPI'
 import { useUserStore } from '@/store/UserStore'
 import { useTopicsConf } from '@/utils/config'
 
@@ -9,6 +15,9 @@ const topic = defineModel({
   type: Object as () => Topic,
   required: true
 })
+const selectedOrganization = defineModel('selectedOrganization', {
+  type: Object as () => Topic
+})
 
 const userStore = useUserStore()
 const { topicsName } = useTopicsConf()
@@ -18,12 +27,31 @@ const choice: Ref<'organization' | 'owner'> = ref(
 )
 const organizations = computed(() => userStore.data?.organizations || [])
 
+const isLoading = ref(false)
+const options: Ref<Organization[]> = ref([])
+
+const search = debounce(async (query: string) => {
+  isLoading.value = true
+  if (!query) {
+    options.value = []
+    isLoading.value = false
+    return
+  }
+  const organizations = (await new SearchAPI().search(query, 10, 1)).data
+  options.value = organizations
+  isLoading.value = false
+}, 400)
+
 const onSelectOrganization = (value: string) => {
   const idx = parseInt(value)
   topic.value.organization = organizations.value[idx]
   topic.value.owner = null
 }
 
+const clear = () => {
+  selectedOrganization.value = undefined
+}
+
 watch(choice, () => {
   if (choice.value === 'owner' && userStore.data?.id) {
     topic.value.owner = userStore.data
@@ -54,6 +82,43 @@ watch(choice, () => {
             label="En tant qu'organisation"
           />
           <div v-if="choice === 'organization'">
+            <Multiselect
+              v-if="userStore.isAdmin"
+              id="bouquet-select-dataset"
+              ref="multiselect"
+              v-model="selectedOrganization"
+              :options="options"
+              label="title"
+              track-by="id"
+              placeholder="Ex: Lyon Métropole"
+              select-label="Entrée pour sélectionner"
+              :multiple="false"
+              :searchable="true"
+              :internal-search="false"
+              :loading="isLoading"
+              :clear-on-select="true"
+              :close-on-select="true"
+              :show-no-results="false"
+              :hide-selected="true"
+              @search-change="search"
+            >
+              <template #caret>
+                <div
+                  v-if="selectedOrganization"
+                  class="multiselect__clear"
+                  @mousedown.prevent.stop="clear"
+                ></div>
+              </template>
+              <template #singleLabel="slotProps">
+                {{ slotProps.option.name }}
+              </template>
+              <template #option="slotProps">
+                {{ slotProps.option.name }}
+              </template>
+              <template #noOptions>
+                Précisez ou élargissez votre recherche
+              </template>
+            </Multiselect>
             <select
               class="fr-select"
               @change="
diff --git a/src/model/organization.ts b/src/model/organization.ts
new file mode 100644
index 00000000..87257a53
--- /dev/null
+++ b/src/model/organization.ts
@@ -0,0 +1,7 @@
+import type { Organization } from '@datagouv/components'
+
+import type { GenericResponse } from './api'
+
+export interface OrganizationResponse extends GenericResponse {
+  data: Organization[]
+}
diff --git a/src/services/api/SearchOrgAPI.ts b/src/services/api/SearchOrgAPI.ts
new file mode 100644
index 00000000..70717486
--- /dev/null
+++ b/src/services/api/SearchOrgAPI.ts
@@ -0,0 +1,29 @@
+import { size } from 'lodash'
+
+import type { OrganizationResponse } from '@/model/organization'
+
+import DatagouvfrAPI from './DatagouvfrAPI'
+
+/**
+ * A wrapper around search engine API
+ */
+export default class SearchAPI extends DatagouvfrAPI {
+  version = 2
+  endpoint = 'organizations/search'
+
+  async search(
+    query: string,
+    size: number,
+    page: number,
+    args?: object
+  ): Promise<OrganizationResponse> {
+    return await this.list({
+      params: {
+        q: query,
+        size: size ?? 20,
+        page: page ?? 1,
+        ...args
+      }
+    })
+  }
+}

From 2a1e137d4bda49a2a6496af6cd3a7c9282105f35 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Wed, 11 Sep 2024 16:25:33 +0200
Subject: [PATCH 2/5] save organization + owner form refactor

---
 .../forms/bouquet/BouquetOwnerForm.vue        | 185 ++++++++++--------
 1 file changed, 102 insertions(+), 83 deletions(-)

diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index ef057b1f..e5c1bbd3 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -15,9 +15,6 @@ const topic = defineModel({
   type: Object as () => Topic,
   required: true
 })
-const selectedOrganization = defineModel('selectedOrganization', {
-  type: Object as () => Topic
-})
 
 const userStore = useUserStore()
 const { topicsName } = useTopicsConf()
@@ -25,6 +22,27 @@ const { topicsName } = useTopicsConf()
 const choice: Ref<'organization' | 'owner'> = ref(
   topic.value.organization != null ? 'organization' : 'owner'
 )
+
+const selectedAnyOrganization: Ref<Organization | undefined> = ref(undefined)
+const selectedOwnOrganization: Ref<string | undefined> = ref(undefined)
+
+const radioOptions = [
+  {
+    label: 'En votre propre nom',
+    value: 'owner'
+  },
+  {
+    label: "En tant qu'organisation",
+    value: 'organization'
+  }
+]
+const selectOptions = computed(() => {
+  const options = organizations.value.map((option, index) => {
+    return { value: index, text: option.name }
+  })
+  return options
+})
+
 const organizations = computed(() => userStore.data?.organizations || [])
 
 const isLoading = ref(false)
@@ -42,14 +60,24 @@ const search = debounce(async (query: string) => {
   isLoading.value = false
 }, 400)
 
-const onSelectOrganization = (value: string) => {
-  const idx = parseInt(value)
-  topic.value.organization = organizations.value[idx]
-  topic.value.owner = null
+const onSelectOwnOrganization = () => {
+  if (selectedOwnOrganization.value) {
+    const idx = parseInt(selectedOwnOrganization.value)
+    topic.value.organization = organizations.value[idx]
+    topic.value.owner = null
+    clear()
+  }
+}
+const onSelectAnyOrganization = () => {
+  if (selectedAnyOrganization.value) {
+    topic.value.organization = selectedAnyOrganization.value
+    topic.value.owner = null
+    selectedOwnOrganization.value = undefined
+  }
 }
 
 const clear = () => {
-  selectedOrganization.value = undefined
+  selectedAnyOrganization.value = undefined
 }
 
 watch(choice, () => {
@@ -62,84 +90,75 @@ watch(choice, () => {
 
 <template>
   <div>
-    <label class="fr-label" for="owner"
-      >Choisissez si vous souhaitez gérer ce {{ topicsName }}&nbsp;:</label
+    <DsfrRadioButtonSet
+      required="true"
+      v-model="choice"
+      :options="radioOptions"
+      :legend="`Choisissez si vous souhaitez gérer ce ${topicsName}&nbsp;:`"
+    />
+    <fieldset
+      v-if="choice === 'organization'"
+      class="fr-fieldset organizations"
     >
-    <fieldset id="owner" class="fr-fieldset">
-      <div class="fr-fieldset__content" role="radiogroup">
-        <DsfrRadioButton
-          v-model="choice"
-          name="owner"
-          value="owner"
-          label="En votre propre nom"
+      <div class="fr-fieldset__element">
+        <DsfrSelect
+          v-model="selectedOwnOrganization"
+          label="Organisations dont vous faites partie."
+          defaultUnselectedText="Sélectionnez une ogranisation"
+          id="ownerOrg"
+          :options="selectOptions"
+          @update:modelValue="onSelectOwnOrganization()"
         />
-        <div>
-          <DsfrRadioButton
-            v-model="choice"
-            :disabled="organizations.length === 0"
-            name="organization"
-            value="organization"
-            label="En tant qu'organisation"
-          />
-          <div v-if="choice === 'organization'">
-            <Multiselect
-              v-if="userStore.isAdmin"
-              id="bouquet-select-dataset"
-              ref="multiselect"
-              v-model="selectedOrganization"
-              :options="options"
-              label="title"
-              track-by="id"
-              placeholder="Ex: Lyon Métropole"
-              select-label="Entrée pour sélectionner"
-              :multiple="false"
-              :searchable="true"
-              :internal-search="false"
-              :loading="isLoading"
-              :clear-on-select="true"
-              :close-on-select="true"
-              :show-no-results="false"
-              :hide-selected="true"
-              @search-change="search"
-            >
-              <template #caret>
-                <div
-                  v-if="selectedOrganization"
-                  class="multiselect__clear"
-                  @mousedown.prevent.stop="clear"
-                ></div>
-              </template>
-              <template #singleLabel="slotProps">
-                {{ slotProps.option.name }}
-              </template>
-              <template #option="slotProps">
-                {{ slotProps.option.name }}
-              </template>
-              <template #noOptions>
-                Précisez ou élargissez votre recherche
-              </template>
-            </Multiselect>
-            <select
-              class="fr-select"
-              @change="
-                onSelectOrganization(($event.target as HTMLInputElement)?.value)
-              "
-            >
-              <option selected disabled value="">
-                Choisissez une organisation
-              </option>
-              <option
-                v-for="(org, idx) in organizations"
-                :key="idx"
-                :selected="topic.organization?.id === org.id"
-                :value="idx"
-              >
-                {{ org.name }}
-              </option>
-            </select>
-          </div>
-        </div>
+      </div>
+      <div class="fr-fieldset__element">
+        <label class="fr-mt-2v" for="any-org-select-bouquet"
+          >Cherchez une autre organisation.</label
+        >
+        <Multiselect
+          v-if="userStore.isAdmin"
+          id="any-org-select-bouquet"
+          ref="multiselect"
+          v-model="selectedAnyOrganization"
+          :options="options"
+          track-by="id"
+          placeholder="Ex: Lyon Métropole"
+          select-label="Entrée pour sélectionner"
+          :multiple="false"
+          :searchable="true"
+          :internal-search="false"
+          :loading="isLoading"
+          :clear-on-select="true"
+          :close-on-select="true"
+          :show-no-results="false"
+          :hide-selected="true"
+          @search-change="search"
+          @select="onSelectAnyOrganization()"
+          role="search"
+        >
+          <template #caret>
+            <div
+              v-if="selectedAnyOrganization"
+              class="multiselect__clear"
+              @mousedown.prevent.stop="clear"
+            ></div>
+          </template>
+          <template #singleLabel="slotProps">
+            {{ slotProps.option.name }}
+          </template>
+          <template #option="slotProps">
+            {{ slotProps.option.name }}
+          </template>
+          <template #noOptions>
+            Précisez ou élargissez votre recherche
+          </template>
+        </Multiselect>
       </div>
     </fieldset>
   </div>
 </template>
+
+<style scoped>
+.organizations {
+  gap: 1rem;
+}
+</style>

From 099e160e1793b09b39ef9f6d84b11dbe1bea5619 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Mon, 16 Sep 2024 11:18:25 +0200
Subject: [PATCH 3/5] cleanup

---
 src/components/forms/bouquet/BouquetOwnerForm.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index e5c1bbd3..d88be916 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Organization } from '@datagouv/components'
 import { debounce } from 'lodash'
-import { defineModel, computed, ref, watch, type Ref, onMounted } from 'vue'
+import { computed, defineModel, ref, watch, type Ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 import 'vue-multiselect/dist/vue-multiselect.css'
 
@@ -91,7 +91,7 @@ watch(choice, () => {
 <template>
   <div>
     <DsfrRadioButtonSet
-      required="true"
+      :required="true"
       v-model="choice"
       :options="radioOptions"
       :legend="`Choisissez si vous souhaitez gérer ce ${topicsName}&nbsp;:`"
@@ -110,12 +110,11 @@ watch(choice, () => {
           @update:modelValue="onSelectOwnOrganization()"
         />
       </div>
-      <div class="fr-fieldset__element">
+      <div v-if="userStore.isAdmin" class="fr-fieldset__element">
         <label class="fr-mt-2v" for="any-org-select-bouquet"
           >Cherchez une autre organisation.</label
         >
         <Multiselect
-          v-if="userStore.isAdmin"
           id="any-org-select-bouquet"
           ref="multiselect"
           v-model="selectedAnyOrganization"

From de50aa5afb7c723270ddba0bbd0dd6a6510952b8 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Mon, 16 Sep 2024 17:41:14 +0200
Subject: [PATCH 4/5] typos and cleanup

---
 .../forms/bouquet/BouquetOwnerForm.vue        | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index d88be916..ab57e84d 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Organization } from '@datagouv/components'
 import { debounce } from 'lodash'
-import { computed, defineModel, ref, watch, type Ref } from 'vue'
+import { computed, ref, watch, type Ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 import 'vue-multiselect/dist/vue-multiselect.css'
 
@@ -37,10 +37,9 @@ const radioOptions = [
   }
 ]
 const selectOptions = computed(() => {
-  const options = organizations.value.map((option, index) => {
+  return organizations.value.map((option, index) => {
     return { value: index, text: option.name }
   })
-  return options
 })
 
 const organizations = computed(() => userStore.data?.organizations || [])
@@ -91,8 +90,8 @@ watch(choice, () => {
 <template>
   <div>
     <DsfrRadioButtonSet
-      :required="true"
       v-model="choice"
+      :required="true"
       :options="radioOptions"
       :legend="`Choisissez si vous souhaitez gérer ce ${topicsName}&nbsp;:`"
     />
@@ -102,25 +101,26 @@ watch(choice, () => {
     >
       <div class="fr-fieldset__element">
         <DsfrSelect
-          v-model="selectedOwnOrganization"
-          label="Organisations dont vous faites partie."
-          defaultUnselectedText="Sélectionnez une ogranisation"
           id="ownerOrg"
+          v-model="selectedOwnOrganization"
+          label="Organisations dont vous faites partie&nbsp;:"
+          default-unselected-text="Sélectionnez une ogranisation"
           :options="selectOptions"
-          @update:modelValue="onSelectOwnOrganization()"
+          @update:model-value="onSelectOwnOrganization()"
         />
       </div>
       <div v-if="userStore.isAdmin" class="fr-fieldset__element">
         <label class="fr-mt-2v" for="any-org-select-bouquet"
-          >Cherchez une autre organisation.</label
+          >Cherchez une autre organisation&nbsp;:</label
         >
         <Multiselect
           id="any-org-select-bouquet"
           ref="multiselect"
           v-model="selectedAnyOrganization"
+          role="search"
           :options="options"
           track-by="id"
-          placeholder="Ex: Lyon Métropole"
+          placeholder="Ex: Ministère de la Transition Ecologique"
           select-label="Entrée pour sélectionner"
           :multiple="false"
           :searchable="true"
@@ -132,7 +132,6 @@ watch(choice, () => {
           :hide-selected="true"
           @search-change="search"
           @select="onSelectAnyOrganization()"
-          role="search"
         >
           <template #caret>
             <div

From c1289baf98ad8d89c796c81deeb5f8bcc3e3747b Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Tue, 17 Sep 2024 17:07:41 +0200
Subject: [PATCH 5/5] add current owner organization as default form selects

---
 .../forms/bouquet/BouquetOwnerForm.vue        | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/forms/bouquet/BouquetOwnerForm.vue b/src/components/forms/bouquet/BouquetOwnerForm.vue
index ab57e84d..8c4f8ce3 100644
--- a/src/components/forms/bouquet/BouquetOwnerForm.vue
+++ b/src/components/forms/bouquet/BouquetOwnerForm.vue
@@ -23,8 +23,25 @@ const choice: Ref<'organization' | 'owner'> = ref(
   topic.value.organization != null ? 'organization' : 'owner'
 )
 
-const selectedAnyOrganization: Ref<Organization | undefined> = ref(undefined)
-const selectedOwnOrganization: Ref<string | undefined> = ref(undefined)
+const organizations = computed(() => userStore.data?.organizations || [])
+
+// checks if current owner is a user's org and return its id
+const ownOrganizationIndex = computed(() => {
+  return organizations.value.findIndex(
+    (org) => org.id === topic.value.organization?.id
+  )
+})
+// both models check the above index to determine the default owner to display
+const selectedAnyOrganization: Ref<Organization | undefined> = ref(
+  ownOrganizationIndex.value < 0 && !topic.value.owner
+    ? topic.value.organization
+    : undefined
+)
+const selectedOwnOrganization: Ref<number | string | undefined> = ref(
+  ownOrganizationIndex.value >= 0 && !topic.value.owner
+    ? ownOrganizationIndex.value
+    : undefined
+)
 
 const radioOptions = [
   {
@@ -42,8 +59,6 @@ const selectOptions = computed(() => {
   })
 })
 
-const organizations = computed(() => userStore.data?.organizations || [])
-
 const isLoading = ref(false)
 const options: Ref<Organization[]> = ref([])
 
@@ -61,7 +76,7 @@ const search = debounce(async (query: string) => {
 
 const onSelectOwnOrganization = () => {
   if (selectedOwnOrganization.value) {
-    const idx = parseInt(selectedOwnOrganization.value)
+    const idx = Number(selectedOwnOrganization.value)
     topic.value.organization = organizations.value[idx]
     topic.value.owner = null
     clear()
@@ -104,7 +119,7 @@ watch(choice, () => {
           id="ownerOrg"
           v-model="selectedOwnOrganization"
           label="Organisations dont vous faites partie&nbsp;:"
-          default-unselected-text="Sélectionnez une ogranisation"
+          default-unselected-text="Sélectionnez une organisation"
           :options="selectOptions"
           @update:model-value="onSelectOwnOrganization()"
         />