Mike
93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<template>
|
|
<section>
|
|
<div class="md:max-w-xl md:mx-auto">
|
|
<SettingsSectionHeader
|
|
title="Emails addresses"
|
|
text="Manage your email addresses"
|
|
/>
|
|
<SettingsSectionHeader title="Your emails" subheading />
|
|
<SettingsUserEmailList class="pt-6" :email-data="emailItems" />
|
|
<hr class="my-6 md:my-8" />
|
|
<SettingsSectionHeader title="Add new email" subheading />
|
|
<div class="flex flex-col md:flex-row w-full pt-4 md:pt-6 pb-6">
|
|
<div class="flex flex-col md:flex-row gap-x-2 w-full">
|
|
<FormTextInput
|
|
v-model="email"
|
|
color="foundation"
|
|
label-position="left"
|
|
label="Email address"
|
|
name="email"
|
|
:rules="[isEmail, isRequired]"
|
|
placeholder="Email address"
|
|
show-label
|
|
wrapper-classes="flex-1 py-3 md:py-0 w-full"
|
|
/>
|
|
<FormButton @click="onAddEmailSubmit">Add</FormButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { orderBy } from 'lodash-es'
|
|
import { graphql } from '~~/lib/common/generated/gql'
|
|
import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
|
|
import { isEmail, isRequired } from '~~/lib/common/helpers/validation'
|
|
import { useForm } from 'vee-validate'
|
|
import { useQuery, useMutation } from '@vue/apollo-composable'
|
|
import { settingsUserEmailsQuery } from '~/lib/settings/graphql/queries'
|
|
import { settingsCreateUserEmailMutation } from '~/lib/settings/graphql/mutations'
|
|
import {
|
|
getFirstErrorMessage,
|
|
convertThrowIntoFetchResult
|
|
} from '~~/lib/common/helpers/graphql'
|
|
|
|
graphql(`
|
|
fragment SettingsUserEmails_User on User {
|
|
id
|
|
emails {
|
|
...SettingsUserEmailCards_UserEmail
|
|
}
|
|
}
|
|
`)
|
|
|
|
type FormValues = { email: string }
|
|
|
|
const { handleSubmit } = useForm<FormValues>()
|
|
const { triggerNotification } = useGlobalToast()
|
|
const { result: userEmailsResult } = useQuery(settingsUserEmailsQuery)
|
|
const { mutate: createMutation } = useMutation(settingsCreateUserEmailMutation)
|
|
|
|
const email = ref('')
|
|
|
|
// Mak sure primary email is always on top, followed by verified emails
|
|
const emailItems = computed(() =>
|
|
userEmailsResult.value?.activeUser?.emails
|
|
? orderBy(
|
|
userEmailsResult.value?.activeUser.emails,
|
|
['primary', 'verified'],
|
|
['desc', 'desc']
|
|
)
|
|
: []
|
|
)
|
|
|
|
const onAddEmailSubmit = handleSubmit(async () => {
|
|
const result = await createMutation({ input: { email: email.value } }).catch(
|
|
convertThrowIntoFetchResult
|
|
)
|
|
if (result?.data) {
|
|
triggerNotification({
|
|
type: ToastNotificationType.Success,
|
|
title: `${email.value} added`
|
|
})
|
|
} else {
|
|
const errorMessage = getFirstErrorMessage(result?.errors)
|
|
triggerNotification({
|
|
type: ToastNotificationType.Danger,
|
|
title: errorMessage
|
|
})
|
|
}
|
|
})
|
|
</script>
|