56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup>
|
|
import {useAuthStore} from "../../Stores/auth.js";
|
|
import {NSelect, NFlex, NText} from 'naive-ui'
|
|
import {computed} from "vue";
|
|
import {useForm} from "@inertiajs/vue3";
|
|
|
|
const authStore = useAuthStore()
|
|
const userOptions = computed(() => {
|
|
return authStore.availableRoles?.map(itm => {
|
|
return {
|
|
label: itm.name,
|
|
value: itm.role_id
|
|
}
|
|
})
|
|
})
|
|
|
|
const formRole = useForm({
|
|
role_id: authStore.user.role?.role_id
|
|
})
|
|
const onChangeRole = (roleId) => {
|
|
formRole.post('/user/role/change')
|
|
}
|
|
|
|
const themeOverride = {
|
|
border: null,
|
|
borderHover: null,
|
|
borderPressed: null,
|
|
borderFocus: null,
|
|
paddingMedium: null,
|
|
rippleColor: null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NFlex align="center" :wrap="false">
|
|
<div class="min-w-[220px]">
|
|
<NSelect :options="userOptions"
|
|
v-model:value="formRole.role_id"
|
|
@update:value="value => onChangeRole(value)"
|
|
/>
|
|
</div>
|
|
<div>
|
|
{{ authStore.user?.name }}
|
|
</div>
|
|
</NFlex>
|
|
<!-- <NDropdown :options="userOptions" placement="bottom-end">-->
|
|
<!-- <NButton :theme-overrides="themeOverride">-->
|
|
<!-- {{ authStore.user?.name }}-->
|
|
<!-- </NButton>-->
|
|
<!-- </NDropdown>-->
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|