app/pages/my-settings.vue

<!--
Page 'Mes préférences'
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-expansion-panels v-model="openedPanels" :multiple="true">
        <UiExpansionPanel title="message_settings" icon="fas fa-inbox">
          <v-container fluid class="container">
            <v-row>
              <UiLoadingPanel v-if="preferencesPending" />
              <UiForm
                v-else
                :model="AccessPreferences"
                :entity="preferences"
                action-position="bottom"
              >
                <v-row>
                  <v-col cols="12">
                    <UiInputCheckbox
                      v-model="preferences.messageReport"
                      field="messageReport"
                      label="allow_report_message"
                    />
                  </v-col>
                </v-row>
              </UiForm>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import AccessPreferences from '~/models/Access/AccessPreferences'
import { useAccessProfileStore } from '~/stores/accessProfile'

definePageMeta({
  name: 'my_settings_page',
})

const accessProfileStore = useAccessProfileStore()
if (accessProfileStore.accessPreferenceId === null) {
  throw new Error("Missing access preference's id")
}

const { fetch } = useEntityFetch()
const openedPanels: Ref<Array<number>> = ref([0])
const { data: preferences, pending: preferencesPending } = await fetch(
  AccessPreferences,
  accessProfileStore.accessPreferenceId,
)
</script>

<style scoped lang="scss"></style>