andrewwallacespeckle
c2a95b484f
* New Text Styles. Initial FE2 changes * More fe2 styling classes * Minor update * Minor update * Fix build * More updates for discussion * More styling updates * Minor updates to inputs * More text updates * More font class swapping * Revert dui3 changes * Confirmed Lineheights * Add story files for new text styles * Minor copy changes * Minor typo * andrew/web-1371-misalignment-in-account-dropdown * andrew/web-1374-settings-text-styles-are-not-right * andrew/web-1375-nav-texts-should-be-14px * andrew/web-1376-decrease-size-of-versions-header * andrew/web-1377-version-card-title * semibold>medium * Measure mode * Changes from PR * Tweaked nav menu * Revert prose change. Add prose-sm --------- Co-authored-by: Mike Tasset <mike.tasset@gmail.com>
103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
|
<section>
|
|
<div class="md:max-w-xl md:mx-auto pb-6 md:pb-0">
|
|
<SettingsSectionHeader
|
|
title="Notifications"
|
|
text="Manage your notification preferences"
|
|
/>
|
|
<table class="table-auto w-full rounded-t overflow-hidden">
|
|
<thead class="text-foreground-1">
|
|
<tr>
|
|
<th class="pb-4 font-medium text-sm text-left">Notification type</th>
|
|
<th
|
|
v-for="channel in notificationChannels"
|
|
:key="channel"
|
|
class="text-right font-medium pb-4 text-sm"
|
|
>
|
|
{{ capitalize(channel) }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="[type, settings] in Object.entries(localPreferences)"
|
|
:key="type"
|
|
class="border-t"
|
|
>
|
|
<td class="text-body-xs py-4">
|
|
{{ notificationTypeMapping[type] || 'Unknown' }}
|
|
</td>
|
|
<td
|
|
v-for="channel in notificationChannels"
|
|
:key="channel"
|
|
class="flex justify-end py-4"
|
|
>
|
|
<FormCheckbox
|
|
:name="`${type} (${channel})`"
|
|
:disabled="loading"
|
|
hide-label
|
|
:model-value="settings[channel] || undefined"
|
|
@update:model-value="
|
|
($event) => onUpdate({ value: !!$event, type, channel })
|
|
"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { capitalize, cloneDeep } from 'lodash-es'
|
|
import { graphql } from '~~/lib/common/generated/gql'
|
|
import { useUpdateNotificationPreferences } from '~~/lib/user/composables/management'
|
|
import type { NotificationPreferences } from '~~/lib/user/helpers/components'
|
|
import type { UserProfileEditDialogNotificationPreferences_UserFragment } from '~~/lib/common/generated/gql/graphql'
|
|
|
|
graphql(`
|
|
fragment UserProfileEditDialogNotificationPreferences_User on User {
|
|
id
|
|
notificationPreferences
|
|
}
|
|
`)
|
|
|
|
const props = defineProps<{
|
|
user: UserProfileEditDialogNotificationPreferences_UserFragment
|
|
}>()
|
|
|
|
const { mutate, loading } = useUpdateNotificationPreferences()
|
|
|
|
const notificationTypeMapping = ref({
|
|
activityDigest: 'Weekly activity digest',
|
|
mentionedInComment: 'Mentioned in comment',
|
|
newStreamAccessRequest: 'Project access request',
|
|
streamAccessRequestApproved: 'Project access request approved'
|
|
} as Record<string, string>)
|
|
|
|
const localPreferences = ref({} as NotificationPreferences)
|
|
|
|
const notificationPreferences = computed(
|
|
() => props.user.notificationPreferences as NotificationPreferences
|
|
)
|
|
|
|
const notificationChannels = computed(() => {
|
|
const firstTypeSettings = Object.values(notificationPreferences.value)[0] || {}
|
|
return Object.keys(firstTypeSettings)
|
|
})
|
|
|
|
const onUpdate = async (params: { value: boolean; channel: string; type: string }) => {
|
|
const { value, channel, type } = params
|
|
localPreferences.value[type][channel] = value
|
|
await mutate(localPreferences.value)
|
|
}
|
|
|
|
watch(
|
|
notificationPreferences,
|
|
(prefs) => {
|
|
localPreferences.value = cloneDeep(prefs)
|
|
},
|
|
{ immediate: true, deep: true }
|
|
)
|
|
</script>
|