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>
              <UiFormEdition
                :id="accessProfileStore.preferencesId"
                :model="Preferences"
              >
                <template #default="{ entity: preferences }">
                  <div v-if="preferences">
                    <v-row>
                      <v-col cols="12">
                        <UiInputCheckbox
                          v-model="preferences.messageReport"
                          field="messageReport"
                          label="allow_report_message"
                        />
                      </v-col>
                    </v-row>
                  </div>
                </template>
              </UiFormEdition>
            </v-row>
          </v-container>
        </UiExpansionPanel>
      </v-expansion-panels>
    </v-col>
  </LayoutContainer>
</template>

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

definePageMeta({
  name: 'my_settings_page',
})

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

const openedPanels: Ref<Array<number>> = ref([0])
</script>

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