fix(ui): peut créer un titre sans lier de titre (#130)

packages/ui/src/api/titre-demande.js

 import gql from 'graphql-tag'
 import { apiGraphQLFetch } from './_client'
 
-const titreDemandeCreer = apiGraphQLFetch(gql`
+export const titreDemandeCreer = apiGraphQLFetch(gql`
   mutation TitreDemandeCreer($titreDemande: InputTitreDemande!) {
     titreDemandeCreer(titreDemande: $titreDemande) {
       titreEtapeId
@@ -9,5 +9,3 @@ const titreDemandeCreer = apiGraphQLFetch(gql`
     }
   }
 `)
-
-export { titreDemandeCreer }

packages/ui/src/components/titre-creation.vue

@@ -121,7 +121,7 @@
         <button
           v-if="!loading"
           id="cmn-titre-activite-edit-popup-button-enregistrer"
-          ref="save-button"
+          :ref="saveRef"
           :disabled="!complete"
           class="btn btn-primary"
           @click="save"
@@ -134,7 +134,7 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import TitreTypeSelect from './_common/titre-type-select.vue'
 import Icon from '@/components/_ui/icon.vue'
 import {
@@ -146,152 +146,203 @@ import {
 } from 'camino-common/src/roles'
 import PureTitresLink from '@/components/titre/pure-titres-link.vue'
 import { getLinkConfig } from 'camino-common/src/permissions/titres'
-import { loadLinkableTitres } from '@/components/titre/pure-titres-link.type'
+import {
+  loadLinkableTitres,
+  TitresLinkConfig
+} from '@/components/titre/pure-titres-link.type'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
+import { TitreTypeId } from 'camino-common/src/titresTypes'
+import { DomaineId } from 'camino-common/src/domaines'
+import { TitreTypeTypeId } from 'camino-common/src/titresTypesTypes'
+
+type TitreTypeType = { id: TitreTypeTypeId; nom: string }
+type Domaine = {
+  id: DomaineId
+  nom: string
+  titresTypes: {
+    id: TitreTypeId
+    type: TitreTypeType
+    titresCreation: boolean
+  }[]
+}
+type TitreType = {
+  id: TitreTypeId
+  domaine: Domaine
+  type: TitreTypeType
+  titresCreation: boolean
+}
+type Entreprise = {
+  id: string
+  nom: string
+  type: TitreTypeType
+  titresTypes: TitreType[]
+}
 
-export default {
-  components: { PureTitresLink, Icon, TitreTypeSelect },
+const titreDemande = ref<{
+  entrepriseId?: string
+  typeId?: TitreTypeId
+  nom?: string
+  titreFromIds?: string[]
+  references: { typeId: string; nom: string }[]
+}>({ references: [] })
+const saveRef = ref<any>(null)
+const store = useStore()
+
+const titreLinkConfig = computed<TitresLinkConfig>(() => {
+  if (linkConfig.value?.count === 'single') {
+    return {
+      type: 'single',
+      selectedTitreId: null
+    }
+  }
 
-  data: () => ({
-    titreDemande: {}
-  }),
+  return {
+    type: 'multiple',
+    selectedTitreIds: []
+  }
+})
+
+const user = computed(() => {
+  return store.state.user.element
+})
+
+const entreprises = computed<Entreprise[]>(() => {
+  return store.state.user.metas.entreprisesTitresCreation
+})
+
+const entreprise = computed<Entreprise | undefined>(() => {
+  return entreprises.value.find(e => e.id === titreDemande.value.entrepriseId)
+})
+
+const entrepriseOuBureauDEtudeCheck = computed<boolean>(() => {
+  return isEntreprise(user.value) || isBureauDEtudes(user.value)
+})
+
+const domaines = computed<Domaine[]>(() => {
+  if (
+    isSuper(user.value) ||
+    isAdministrationAdmin(user.value) ||
+    isAdministrationEditeur(user.value)
+  ) {
+    return store.state.user.metas.domaines
+  }
 
-  computed: {
-    titreLinkConfig() {
-      if (this.linkConfig?.count === 'single') {
-        return {
-          type: 'single',
-          selectedTitreId: null
+  if (isEntreprise(user.value) || isBureauDEtudes(user.value)) {
+    return entreprise.value?.titresTypes?.reduce(
+      (domaines: Domaine[], tt: TitreType) => {
+        if (!domaines.find(({ id }) => tt.domaine.id === id)) {
+          tt.domaine.titresTypes = []
+          domaines.push(tt.domaine)
         }
-      }
-
-      return {
-        type: 'multiple',
-        selectedTitreIds: []
-      }
-    },
-    user() {
-      return this.$store.state.user.element
-    },
-
-    entreprises() {
-      return this.$store.state.user.metas.entreprisesTitresCreation
-    },
-
-    entreprise() {
-      return this.entreprises.find(e => e.id === this.titreDemande.entrepriseId)
-    },
-
-    entrepriseOuBureauDEtudeCheck() {
-      return isEntreprise(this.user) || isBureauDEtudes(this.user)
-    },
-
-    domaines() {
-      if (
-        isSuper(this.user) ||
-        isAdministrationAdmin(this.user) ||
-        isAdministrationEditeur(this.user)
-      ) {
-        return this.$store.state.user.metas.domaines
-      }
-
-      if (isEntreprise(this.user) || isBureauDEtudes(this.user)) {
-        return this.entreprise.titresTypes.reduce((domaines, tt) => {
-          if (!domaines.find(({ id }) => tt.domaine.id === id)) {
-            tt.domaine.titresTypes = []
-            domaines.push(tt.domaine)
-          }
-
-          const domaine = domaines.find(({ id }) => tt.domaine.id === id)
-
-          domaine.titresTypes.push({
-            id: tt.id,
-            type: tt.type,
-            titresCreation: tt.titresCreation
-          })
-
-          return domaines
-        }, [])
-      }
-
-      return []
-    },
-
-    referencesTypes() {
-      return this.$store.state.titreCreation.metas.referencesTypes
-    },
-
-    complete() {
-      return (
-        this.titreDemande.entrepriseId &&
-        this.titreDemande.typeId &&
-        this.titreDemande.nom
-      )
-    },
-
-    loading() {
-      return this.$store.state.loading.includes('titreCreationAdd')
-    },
-
-    linkConfig() {
-      return getLinkConfig(this.titreDemande.typeId, [])
-    },
-
-    loadLinkableTitresByTypeId() {
-      return loadLinkableTitres(this.titreDemande.typeId, [])
-    }
-  },
-
-  watch: {
-    entreprises: 'init'
-  },
-
-  async created() {
-    await this.init()
-
-    document.addEventListener('keyup', this.keyUp)
-  },
-
-  beforeUnmount() {
-    document.removeEventListener('keyup', this.keyUp)
-  },
-
-  methods: {
-    onSelectedTitres(titres) {
-      this.titreDemande.titreFromIds = titres.map(({ id }) => id)
-    },
-    keyUp(e) {
-      if ((e.which || e.keyCode) === 13 && this.complete && !this.loading) {
-        this.$refs['save-button'].focus()
-        this.save()
-      }
-    },
-    async init() {
-      if (!this.entreprises.length) {
-        await this.$store.dispatch('pageError')
-      }
-
-      await this.$store.dispatch('titreCreation/init')
-
-      if (this.entreprises?.length === 1) {
-        this.titreDemande.entrepriseId = this.entreprises[0].id
-      }
-    },
-
-    entrepriseUpdate(event) {
-      this.titreDemande = { entrepriseId: event.target.value, references: [] }
-    },
-
-    save() {
-      this.$store.dispatch('titreCreation/save', this.titreDemande)
-    },
-
-    referenceAdd() {
-      this.titreDemande.references.push({ typeId: '', nom: '' })
-    },
-
-    referenceRemove(index) {
-      this.titreDemande.references.splice(index, 1)
-    }
+
+        const domaine = domaines.find(({ id }) => tt.domaine.id === id)
+
+        domaine?.titresTypes?.push({
+          id: tt.id,
+          type: tt.type,
+          titresCreation: tt.titresCreation
+        })
+
+        return domaines
+      },
+      []
+    )
   }
+
+  return []
+})
+
+const referencesTypes = computed(() => {
+  return store.state.titreCreation.metas.referencesTypes
+})
+
+const complete = computed(() => {
+  return (
+    titreDemande.value.entrepriseId &&
+    titreDemande.value.typeId &&
+    titreDemande.value.nom
+  )
+})
+
+const loading = computed(() => {
+  return store.state.loading.includes('titreCreationAdd')
+})
+
+const linkConfig = computed(() => {
+  if (titreDemande.value.typeId) {
+    return getLinkConfig(titreDemande.value.typeId, [])
+  }
+  return null
+})
+
+const loadLinkableTitresByTypeId = computed(() => {
+  if (titreDemande.value.typeId) {
+    return loadLinkableTitres(titreDemande.value.typeId, [])
+  } else {
+    return () => Promise.resolve([])
+  }
+})
+
+watch(
+  () => entreprises,
+  () => {
+    init()
+  }
+)
+
+onMounted(async () => {
+  await init()
+
+  document.addEventListener('keyup', keyUp)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', keyUp)
+})
+
+const onSelectedTitres = (titres: { id: string }[]) => {
+  titreDemande.value.titreFromIds = titres.map(({ id }) => id)
+}
+const keyUp = (e: KeyboardEvent) => {
+  if ((e.which || e.keyCode) === 13 && complete.value && !loading.value) {
+    saveRef.value?.focus()
+    save()
+  }
+}
+
+const init = async () => {
+  if (!entreprises.value.length) {
+    await store.dispatch('pageError')
+  }
+
+  await store.dispatch('titreCreation/init')
+
+  if (entreprises.value?.length === 1) {
+    titreDemande.value.entrepriseId = entreprises.value[0].id
+  }
+}
+
+const entrepriseUpdate = (event: Event) => {
+  titreDemande.value = {
+    entrepriseId: (event.target as HTMLSelectElement)?.value,
+    references: []
+  }
+}
+
+const save = () => {
+  if (linkConfig.value && !titreDemande.value.titreFromIds) {
+    titreDemande.value.titreFromIds = []
+  }
+
+  store.dispatch('titreCreation/save', titreDemande.value)
+}
+
+const referenceAdd = () => {
+  titreDemande.value.references.push({ typeId: '', nom: '' })
+}
+
+const referenceRemove = (index: number) => {
+  titreDemande.value.references.splice(index, 1)
 }
 </script>