feat: new membership invitations

.github/workflows/ci.yml

@@ -124,7 +124,7 @@ jobs:
         with:
           repository: opendatateam/udata
           path: ${{ env.UDATA_WORKING_DIR }}
-          ref: main
+          ref: add_member_invitation_from_org
 
       - name: Set up uv
         uses: astral-sh/setup-uv@v6

components/AdminMembershipRequest/AdminMembershipRequest.vue

@@ -1,14 +1,107 @@
 <template>
+  <!-- Sent invitation (by the organization) -->
+  <div
+    v-if="request.kind === 'invitation'"
+    class="relative bg-white shadow rounded-sm p-5 mt-3"
+  >
+    <AdminBadge
+      class="absolute top-0 left-2.5 -translate-y-1/2"
+      size="sm"
+      type="secondary"
+      :icon="RiMailSendLine"
+    >
+      {{ $t('Invitation envoyée') }}
+    </AdminBadge>
+
+    <div class="flex flex-wrap justify-between gap-5">
+      <div class="space-y-1">
+        <div class="flex flex-wrap items-start gap-2">
+          <Avatar
+            v-if="request.user"
+            :user="request.user"
+            rounded
+            :size="24"
+          />
+          <div
+            v-else
+            class="size-6 rounded-full border border-gray-default bg-gray-lower flex items-center justify-center"
+          >
+            <RiMailLine class="size-3 text-gray-medium" />
+          </div>
+          <div>
+            <div class="flex flex-wrap items-baseline gap-1 text-gray-title text-sm/6">
+              <template v-if="request.user">
+                <div class="font-bold">
+                  {{ request.user.first_name }} {{ request.user.last_name }}
+                </div>
+                <code
+                  v-if="request.user.email"
+                  class="text-gray-medium bg-gray-lower px-1 text-sm rounded-sm break-all"
+                >{{ request.user.email }}</code>
+              </template>
+              <code
+                v-else-if="request.email"
+                class="text-gray-medium bg-gray-lower px-1 text-sm rounded-sm break-all"
+              >{{ request.email }}</code>
+              <div>{{ t("a été invité(e) à rejoindre l'organisation.") }}</div>
+            </div>
+            <div
+              v-if="roleLabel"
+              class="text-sm text-gray-medium"
+            >
+              {{ t('Rôle proposé :') }}
+              <AdminBadge
+                size="xs"
+                :type="request.role === 'admin' ? 'primary' : 'secondary'"
+              >
+                {{ roleLabel }}
+              </AdminBadge>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="request.comment"
+          class="flex items-stretch gap-1"
+        >
+          <div class="w-6 flex items-center justify-center">
+            <div class="h-full w-1 bg-gray-default" />
+          </div>
+          <div class="text-xs/5 italic">
+            « {{ request.comment }} »
+          </div>
+        </div>
+        <div class="text-sm/6 text-gray-medium">
+          {{ formatDate(new Date(request.created), { dateStyle: 'long', timeStyle: 'short' }) }}
+        </div>
+      </div>
+      <div
+        v-if="showActions"
+        class="flex flex-col gap-2.5 items-end"
+      >
+        <BrandedButton
+          color="danger"
+          size="xs"
+          :loading="loading"
+          @click="cancelInvitation"
+        >
+          {{ t("Annuler l'invitation") }}
+        </BrandedButton>
+      </div>
+    </div>
+  </div>
+
+  <!-- Membership request (by a user) -->
   <BannerNotif
+    v-else
     type="primary"
     :icon="RiUserAddLine"
     :badge="$t(`Demande de rattachement`)"
-    :user="request.user"
+    :user="request.user!"
     :date="new Date(request.created)"
   >
     <template #title>
       <code
-        v-if="request.user.email"
+        v-if="request.user?.email"
         class="text-gray-medium bg-gray-lower px-1 text-sm rounded-sm break-all"
       >{{ request.user.email }}</code>
       {{ t("demande à rejoindre l'organisation.") }}
@@ -94,12 +187,13 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
-import { ref } from 'vue'
-import { RiCheckLine, RiUserAddLine } from '@remixicon/vue'
+import { Avatar, BrandedButton, useFormatDate } from '@datagouv/components-next'
+import { computed, ref } from 'vue'
+import { RiCheckLine, RiMailLine, RiMailSendLine, RiUserAddLine } from '@remixicon/vue'
 import InputGroup from '../InputGroup/InputGroup.vue'
 import ModalWithButton from '../Modal/ModalWithButton.vue'
-import type { PendingMembershipRequest } from '~/types/types'
+import AdminBadge from '../AdminBadge/AdminBadge.vue'
+import type { MemberRole, PendingMembershipRequest } from '~/types/types'
 
 const props = defineProps<{
   oid: string
@@ -112,8 +206,17 @@ const emits = defineEmits<{
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
+const { formatDate } = useFormatDate()
 const loading = ref(false)
 
+const { data: roles } = await useAPI<Array<{ id: MemberRole, label: string }>>('/api/1/organizations/roles/', { lazy: true })
+
+const roleLabel = computed(() => {
+  if (!roles.value || !props.request.role) return null
+  const role = roles.value.find(r => r.id === props.request.role)
+  return role?.label ?? props.request.role
+})
+
 const accept = async () => {
   try {
     loading.value = true
@@ -122,8 +225,18 @@ const accept = async () => {
     })
     emits('refresh')
   }
-  catch {
-    // toast.error(t('An error occurred while refusing this membership.'))
+  finally {
+    loading.value = false
+  }
+}
+
+const cancelInvitation = async () => {
+  try {
+    loading.value = true
+    await $api(`/api/1/organizations/${props.oid}/membership/${props.request.id}/cancel/`, {
+      method: 'POST',
+    })
+    emits('refresh')
   }
   finally {
     loading.value = false
@@ -142,9 +255,6 @@ const refuse = async (close: () => void) => {
     emits('refresh')
     close()
   }
-  catch {
-    // toast.error(t('An error occurred while refusing this membership.'))
-  }
   finally {
     loading.value = false
   }

components/AdminOrgInvitation/AdminOrgInvitation.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="relative bg-white shadow rounded-sm p-5 mt-3">
+    <AdminBadge
+      class="absolute top-0 left-2.5 -translate-y-1/2"
+      size="sm"
+      type="primary"
+      :icon="RiUserAddLine"
+    >
+      {{ $t('Invitation') }}
+    </AdminBadge>
+
+    <div class="flex flex-wrap justify-between gap-5">
+      <div class="space-y-1">
+        <div class="flex flex-wrap items-start gap-2">
+          <NuxtImg
+            v-if="invitation.organization.logo"
+            class="rounded-sm border border-gray-default size-10 object-contain bg-white"
+            :src="invitation.organization.logo"
+            loading="lazy"
+            alt=""
+          />
+          <div
+            v-else
+            class="size-10 rounded-sm border border-gray-default bg-gray-lower flex items-center justify-center"
+          >
+            <RiBuilding2Line class="size-5 text-gray-medium" />
+          </div>
+          <div>
+            <div class="flex flex-wrap items-baseline gap-1 text-gray-title text-sm/6">
+              <div class="font-bold">
+                {{ invitation.organization.name }}
+              </div>
+              <div>{{ t("vous invite à rejoindre l'organisation.") }}</div>
+            </div>
+            <div
+              v-if="roleLabel"
+              class="text-sm text-gray-medium"
+            >
+              {{ t('Rôle proposé :') }}
+              <AdminBadge
+                size="xs"
+                :type="invitation.role === 'admin' ? 'primary' : 'secondary'"
+              >
+                {{ roleLabel }}
+              </AdminBadge>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="invitation.comment"
+          class="flex items-stretch gap-1"
+        >
+          <div class="w-10 flex items-center justify-center">
+            <div class="h-full w-1 bg-gray-default" />
+          </div>
+          <div class="text-xs/5 italic">
+            « {{ invitation.comment }} »
+          </div>
+        </div>
+        <div class="text-sm/6 text-gray-medium">
+          {{ formatDate(new Date(invitation.created), { dateStyle: 'long', timeStyle: 'short' }) }}
+        </div>
+      </div>
+      <div class="flex flex-col gap-2.5 items-end">
+        <BrandedButton
+          color="primary"
+          size="xs"
+          :icon="RiCheckLine"
+          :loading="loading"
+          @click="accept"
+        >
+          {{ $t('Accepter') }}
+        </BrandedButton>
+        <BrandedButton
+          color="danger"
+          size="xs"
+          :loading="loading"
+          @click="refuse"
+        >
+          {{ t("Refuser") }}
+        </BrandedButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, useFormatDate } from '@datagouv/components-next'
+import { ref } from 'vue'
+import { RiBuilding2Line, RiCheckLine, RiUserAddLine } from '@remixicon/vue'
+import AdminBadge from '../AdminBadge/AdminBadge.vue'
+import type { MemberRole, OrgInvitation } from '~/types/types'
+
+const props = defineProps<{
+  invitation: OrgInvitation
+}>()
+const emits = defineEmits<{
+  (e: 'refresh'): void
+}>()
+
+const { t } = useTranslation()
+const { $api } = useNuxtApp()
+const { formatDate } = useFormatDate()
+const loading = ref(false)
+
+const { data: roles } = await useAPI<Array<{ id: MemberRole, label: string }>>('/api/1/organizations/roles/', { lazy: true })
+
+const roleLabel = computed(() => {
+  if (!roles.value) return null
+  const role = roles.value.find(r => r.id === props.invitation.role)
+  return role?.label ?? props.invitation.role
+})
+
+const accept = async () => {
+  try {
+    loading.value = true
+    await $api(`/api/1/me/org_invitations/${props.invitation.id}/accept/`, {
+      method: 'POST',
+    })
+    emits('refresh')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const refuse = async () => {
+  try {
+    loading.value = true
+    await $api(`/api/1/me/org_invitations/${props.invitation.id}/refuse/`, {
+      method: 'POST',
+    })
+    emits('refresh')
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>

components/Notifications/MembershipRequest.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="p-3 flex gap-3 relative hover:bg-gray-some">
     <div class="flex-none">
-      <RiUserAddLine class="size-4" />
+      <RiMailSendLine
+        v-if="notification.details.kind === 'invitation'"
+        class="size-4"
+      />
+      <RiUserAddLine
+        v-else
+        class="size-4"
+      />
     </div>
     <div class="flex-1 truncate">
       <p class="m-0 text-xs font-bold">
         <NuxtLink
           class="after:absolute after:inset-0 bg-none"
-          :to="`/admin/organizations/${notification.details.request_organization.id}/members`"
+          :to="notification.details.kind === 'invitation' ? '/admin/me/profile' : `/admin/organizations/${notification.details.request_organization.id}/members`"
         >
-          {{ $t(`Demande d'adhésion`) }}
+          {{ notification.details.kind === 'invitation' ? $t('Invitation à rejoindre une organisation') : $t(`Demande d'adhésion`) }}
         </NuxtLink>
       </p>
       <p class="m-0 text-xs">
-        {{ $t('de') }}
+        {{ notification.details.kind === 'invitation' ? $t('pour') : $t('de') }}
         <AvatarWithName
           :user="notification.details.request_user"
           :with-link="false"
@@ -45,7 +52,7 @@
 
 <script setup lang="ts">
 import { AvatarWithName, useFormatDate, type OrganizationReference } from '@datagouv/components-next'
-import { RiUserAddLine } from '@remixicon/vue'
+import { RiMailSendLine, RiUserAddLine } from '@remixicon/vue'
 import type { DeepReadonly } from 'vue'
 import type { MembershipRequestNotification } from '~/types/notifications'