andrewwallacespeckle
9f4b0c99da
* Fixing up "Manage Project" & "New Project" Dialogs * Dialog Updates * Updates from tickets * Remove sidepanel * Remove max-height prop from Dialog component * Updates to Profile Dialog * Props for Buttons in Dialog. Attachment Dialog * Remove margin to show issue with dialogs * Update to stories * Responsive updates * Fix overflow on MoveTo * Use Dialog header prop * Dialog updates * Responsive Changes * Responsive fixes * Small responsive change * Fixes * Type based declaration * Last fixes * Small darkmode fixes * Updated type * Update * Updates from PR comments * Fix storybook issues * Updates from PR * Updates from PR * Changes from Agi * Turntable mode Toggle * Fix dialog shadows on scroll * Fix invite autocomplete * Changes from PR Comments * Small styling updates * Responsive views * Adjust Danger zones * Fix typo * New Webhook Icon. Swap icon prop to slot. * Adjust Icon weights * FE2-TASK-27 * FE2-TASK-26 * FE2-TASK-28
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<LayoutDialog v-model:open="isOpen" max-width="md">
|
|
<template #header>Edit Profile</template>
|
|
<div v-if="user" class="flex flex-col text-foreground">
|
|
<UserProfileEditDialogBio :user="user" />
|
|
<UserProfileEditDialogNotificationPreferences :user="user" />
|
|
<LayoutDialogSection
|
|
title="Developer Settings"
|
|
:button="developerSettingsButton"
|
|
border-b
|
|
>
|
|
<template #icon>
|
|
<CodeBracketIcon class="h-full w-full" />
|
|
</template>
|
|
</LayoutDialogSection>
|
|
<UserProfileEditDialogChangePassword :user="user" />
|
|
<UserProfileEditDialogDeleteAccount :user="user" @deleted="isOpen = false" />
|
|
<div class="text-tiny text-foreground-2 mt-4">User #{{ user.id }}</div>
|
|
</div>
|
|
</LayoutDialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useQuery } from '@vue/apollo-composable'
|
|
import { CodeBracketIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
|
|
import { profileEditDialogQuery } from '~~/lib/user/graphql/queries'
|
|
|
|
type FormButtonColor =
|
|
| 'default'
|
|
| 'invert'
|
|
| 'danger'
|
|
| 'warning'
|
|
| 'success'
|
|
| 'card'
|
|
| 'secondary'
|
|
| 'info'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:open', val: boolean): void
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
open: boolean
|
|
}>()
|
|
|
|
const { result } = useQuery(profileEditDialogQuery)
|
|
|
|
const user = computed(() => result.value?.activeUser)
|
|
|
|
const isOpen = computed({
|
|
get: () => !!(props.open && user.value),
|
|
set: (newVal) => emit('update:open', newVal)
|
|
})
|
|
|
|
const developerSettingsButton = computed(() => ({
|
|
text: 'Manage',
|
|
color: 'default' as FormButtonColor,
|
|
to: '/developer-settings/',
|
|
iconRight: ChevronRightIcon,
|
|
onClick: () => {
|
|
isOpen.value = false
|
|
}
|
|
}))
|
|
</script>
|