app_vue2/pages/parameters/secure.vue

<template>
  <LayoutContainer v-if="!fetchState.pending">
    <UiForm :id="id" :model="model" :query="query()">
      <template #form.input="{entry, updateRepository}">
        <v-expansion-panels  focusable multiple :value="[0,1]">
          <!-- Description -->
          <UiExpansionPanel id="superAdmin" icon="fa-desktop">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                    {{$t('help_super_admin')}}
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText field="username" :data="entry['username']" @update="updateRepository" :readonly="true" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputEmail field="email" :data="entry['email']" @update="updateRepository" />
                </v-col>
              </v-row>
            </v-container>
          </UiExpansionPanel>

        </v-expansion-panels>
      </template>
    </UiForm>
  </LayoutContainer>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, useContext} from '@nuxtjs/composition-api'
import { repositoryHelper } from '~/services/store/repository'
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Query} from "@vuex-orm/core";
import {AdminAccess} from "~/models/Access/AdminAccess";
import {queryHelper} from "~/services/store/query";

export default defineComponent({
  name: 'secure',
  setup () {
    const {$dataProvider} = useContext()
    const {getItemToEdit} = useDataUtils($dataProvider)
    const {fetchState} = getItemToEdit(1, AdminAccess)

    const repository = repositoryHelper.getRepository(AdminAccess)
    const query: ComputedRef<Query> = computed(() => repository.query())
    const id: ComputedRef<number> = computed(() => {
      const item:AdminAccess = queryHelper.getFirstItem(query.value) as AdminAccess
      return item.id
    })

    return {
      query: () => query.value,
      fetchState,
      id,
      model: AdminAccess
    }
  }
})
</script>