crewli/apps/app/src/components/members/EditMemberRoleDialog.vue

<script setup lang="ts">
import { VForm } from 'vuetify/components/VForm'
import { useUpdateMemberRole } from '@/composables/api/useMembers'
import { useAuthStore } from '@/stores/useAuthStore'
import { requiredValidator } from '@core/utils/validators'
import type { Member, OrganisationRole } from '@/types/member'

const props = defineProps<{
  orgId: string
  member: Member
}>()

const modelValue = defineModel<boolean>({ required: true })

const authStore = useAuthStore()
const orgIdRef = computed(() => props.orgId)

const role = ref<OrganisationRole>(props.member.role as OrganisationRole)
const errors = ref<Record<string, string>>({})
const refVForm = ref<VForm>()
const showSuccess = ref(false)

const isSelf = computed(() => authStore.user?.id === props.member.id)

const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
  { title: 'Organisatie Beheerder', value: 'org_admin' },
  { title: 'Organisatie Lid', value: 'org_member' },
  { title: 'Evenement Manager', value: 'event_manager' },
  { title: 'Staf Coördinator', value: 'staff_coordinator' },
  { title: 'Vrijwilliger Coördinator', value: 'volunteer_coordinator' },
]

const { mutate: updateRole, isPending } = useUpdateMemberRole(orgIdRef)

watch(() => props.member, (m) => {
  role.value = m.role as OrganisationRole
}, { immediate: true })

function onSubmit() {
  if (isSelf.value) return

  refVForm.value?.validate().then(({ valid }) => {
    if (!valid) return

    errors.value = {}

    updateRole(
      { userId: props.member.id, role: role.value },
      {
        onSuccess: () => {
          modelValue.value = false
          showSuccess.value = true
        },
        onError: (err: any) => {
          const data = err.response?.data
          if (data?.errors) {
            errors.value = { role: data.errors.role?.[0] ?? '' }
          }
          else if (data?.message) {
            errors.value = { role: data.message }
          }
        },
      },
    )
  })
}
</script>

<template>
  <VDialog
    v-model="modelValue"
    max-width="500"
  >
    <VCard title="Rol wijzigen">
      <VCardText>
        <VRow class="mb-4">
          <VCol cols="12">
            <div class="text-body-1">
              <strong>{{ member.name }}</strong>
            </div>
            <div class="text-body-2 text-disabled">
              {{ member.email }}
            </div>
          </VCol>
        </VRow>

        <VForm
          ref="refVForm"
          @submit.prevent="onSubmit"
        >
          <VSelect
            v-model="role"
            label="Rol"
            :items="roleOptions"
            :rules="[requiredValidator]"
            :error-messages="errors.role"
          />
        </VForm>
      </VCardText>
      <VCardActions>
        <VSpacer />
        <VBtn
          variant="text"
          @click="modelValue = false"
        >
          Annuleren
        </VBtn>
        <VTooltip
          v-if="isSelf"
          text="Je kunt je eigen rol niet wijzigen"
        >
          <template #activator="{ props: tooltipProps }">
            <div v-bind="tooltipProps">
              <VBtn
                color="primary"
                disabled
              >
                Opslaan
              </VBtn>
            </div>
          </template>
        </VTooltip>
        <VBtn
          v-else
          color="primary"
          :loading="isPending"
          @click="onSubmit"
        >
          Opslaan
        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>

  <VSnackbar
    v-model="showSuccess"
    color="success"
    :timeout="3000"
  >
    Rol bijgewerkt
  </VSnackbar>
</template>