Skip to content

Commit a727a87

Browse files
nicolaskempf57nicolaskempf57
authored
feat(notifications): add accepted and refused membership request notifications (#928)
1 parent 80d7751 commit a727a87

File tree

5 files changed

+136
-4
lines changed

5 files changed

+136
-4
lines changed

‎components/Notifications/MembershipAccepted.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div class="p-3 flex gap-3 relative hover:bg-gray-some">
3+
<div class="flex-none">
4+
<RiCheckboxCircleLine class="size-4" />
5+
</div>
6+
<div class="flex-1 truncate">
7+
<p class="m-0 text-xs font-bold">
8+
{{ $t('Votre adhésion a été acceptée') }}
9+
</p>
10+
<p class="m-0 text-xs flex items-center gap-1 truncate">
11+
{{ $t(`pour rejoindre`) }}
12+
<OrganizationOwner
13+
:organization="notification.details.organization as OrganizationReference"
14+
logo-size-class="size-3"
15+
:logo-no-border="true"
16+
name-size="xs"
17+
name-color="text-gray-plain"
18+
:with-link="false"
19+
/>
20+
</p>
21+
</div>
22+
<div class="flex-none flex m-0 gap-1.5">
23+
<p class="m-0 text-xs">
24+
{{ formatDate(notification.created_at) }}
25+
</p>
26+
<AnimatedLoader
27+
v-if="loading"
28+
class="size-2"
29+
/>
30+
<div
31+
v-else-if="!notification.handled_at"
32+
class="size-2 rounded-full bg-new-primary mt-0.5"
33+
/>
34+
</div>
35+
<button
36+
v-if="!notification.handled_at"
37+
class="after:absolute after:inset-0 bg-none"
38+
:title="$t('Marquer la notification comme lue')"
39+
@click="markAsRead(notification)"
40+
/>
41+
</div>
42+
</template>
43+
44+
<script setup lang="ts">
45+
import { AnimatedLoader, useFormatDate, type OrganizationReference } from '@datagouv/components-next'
46+
import { RiCheckboxCircleLine } from '@remixicon/vue'
47+
import type { MembershipAcceptedNotification } from '~/types/notifications'
48+
49+
defineProps<{
50+
notification: MembershipAcceptedNotification
51+
}>()
52+
53+
const { formatDate } = useFormatDate()
54+
const { loading, markAsRead } = useMarkAsRead()
55+
</script>

‎components/Notifications/MembershipRefused.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div class="p-3 flex gap-3 relative hover:bg-gray-some">
3+
<div class="flex-none">
4+
<RiCloseCircleLine class="size-4" />
5+
</div>
6+
<div class="flex-1 truncate">
7+
<p class="m-0 text-xs font-bold">
8+
{{ $t('Votre adhésion a été refusée') }}
9+
</p>
10+
<p class="m-0 text-xs flex items-center gap-1 truncate">
11+
{{ $t('pour rejoindre') }}
12+
<OrganizationOwner
13+
:organization="notification.details.organization as OrganizationReference"
14+
logo-size-class="size-3"
15+
:logo-no-border="true"
16+
name-size="xs"
17+
name-color="text-gray-plain"
18+
:with-link="false"
19+
/>
20+
</p>
21+
</div>
22+
<div class="flex-none flex m-0 gap-1.5">
23+
<p class="m-0 text-xs">
24+
{{ formatDate(notification.created_at) }}
25+
</p>
26+
<AnimatedLoader
27+
v-if="loading"
28+
class="size-2"
29+
/>
30+
<div
31+
v-else-if="!notification.handled_at"
32+
class="size-2 rounded-full bg-new-primary mt-0.5"
33+
/>
34+
</div>
35+
<button
36+
v-if="!notification.handled_at"
37+
class="after:absolute after:inset-0 bg-none"
38+
:title="$t('Marquer la notification comme lue')"
39+
@click="markAsRead(notification)"
40+
/>
41+
</div>
42+
</template>
43+
44+
<script setup lang="ts">
45+
import { AnimatedLoader, useFormatDate, type OrganizationReference } from '@datagouv/components-next'
46+
import { RiCloseCircleLine } from '@remixicon/vue'
47+
import type { MembershipRefusedNotification } from '~/types/notifications'
48+
49+
defineProps<{
50+
notification: MembershipRefusedNotification
51+
}>()
52+
53+
const { formatDate } = useFormatDate()
54+
const { loading, markAsRead } = useMarkAsRead()
55+
</script>

‎components/Notifications/NotificationsList.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
:notification="notification as MembershipRequestNotification"
1010
/>
1111
<NotificationsTransferRequest
12-
v-if="notification.details.class === 'TransferRequestNotificationDetails'"
12+
v-else-if="notification.details.class === 'TransferRequestNotificationDetails'"
1313
:notification="notification as TransferRequestNotification"
1414
/>
1515
<NotificationsNewBadge
@@ -21,6 +21,14 @@
2121
:notification="notification as DiscussionNotification"
2222
:subject="subjects[notification.details.discussion.subject.id]"
2323
/>
24+
<NotificationsMembershipAccepted
25+
v-else-if="notification.details.class === 'MembershipAcceptedNotificationDetails'"
26+
:notification="notification as MembershipAcceptedNotification"
27+
/>
28+
<NotificationsMembershipRefused
29+
v-else-if="notification.details.class === 'MembershipRefusedNotificationDetails'"
30+
:notification="notification as MembershipRefusedNotification"
31+
/>
2432
<NotificationsValidateHarvester
2533
v-else-if="notification.details.class === 'ValidateHarvesterNotificationDetails'"
2634
:notification="notification as ValidateHarvesterNotification"
@@ -32,7 +40,7 @@
3240
<script setup lang="ts">
3341
import type { DeepReadonly } from 'vue'
3442
import type { DiscussionSubjectTypes } from '~/types/discussions'
35-
import type { DiscussionNotification, MembershipRequestNotification, NewBadgeNotification, TransferRequestNotification, UserNotification, ValidateHarvesterNotification } from '~/types/notifications'
43+
import type { DiscussionNotification, MembershipAcceptedNotification, MembershipRefusedNotification, MembershipRequestNotification, NewBadgeNotification, TransferRequestNotification, UserNotification, ValidateHarvesterNotification } from '~/types/notifications'
3644
3745
const props = defineProps<{
3846
notifications: DeepReadonly<Array<UserNotification>>

‎components/OrganizationOwner.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex items-center space-x-2">
2+
<div class="flex items-center space-x-2 truncate">
33
<div :class="logoNoBorder ? '': 'shrink-0 p-1.5 border'">
44
<OrganizationLogo
55
:organization

‎types/notifications.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,20 @@ export type DiscussionNotification = CommonNotification & {
4747
}
4848
}
4949

50+
export type MembershipAcceptedNotification = CommonNotification & {
51+
details: {
52+
class: 'MembershipAcceptedNotificationDetails'
53+
organization: OrganizationReference
54+
}
55+
}
56+
57+
export type MembershipRefusedNotification = CommonNotification & {
58+
details: {
59+
class: 'MembershipRefusedNotificationDetails'
60+
organization: OrganizationReference
61+
}
62+
}
63+
5064
export type ValidateHarvesterNotification = CommonNotification & {
5165
details: {
5266
class: 'ValidateHarvesterNotificationDetails'
@@ -55,4 +69,4 @@ export type ValidateHarvesterNotification = CommonNotification & {
5569
}
5670
}
5771

58-
export type UserNotification = MembershipRequestNotification | TransferRequestNotification | NewBadgeNotification | DiscussionNotification | ValidateHarvesterNotification
72+
export type UserNotification = MembershipRequestNotification | TransferRequestNotification | NewBadgeNotification | DiscussionNotification | MembershipAcceptedNotification | MembershipRefusedNotification | ValidateHarvesterNotification

0 commit comments

Comments
 (0)