data provider adjust

assets/css/global.scss

@@ -10,18 +10,10 @@ header .v-toolbar__content{
 }
 
 .no-decoration{
-  text-decoration: none;
+  text-decoration: none !important;
+  color: inherit !important;
 }
 
 .margin-bottom-20{
   margin-bottom: 20px;
 }
-
-.form_main_title{
-  width: 100%;
-  .editBtn{
-    float: right;
-    margin-right: 20px;
-  }
-
-}

components/Form/BottomSheetComponent.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-bottom-sheet
-      v-model="openSheet"
-      persistent
-    >
-      <v-sheet
-        class="text-center"
-      >
-        <slot></slot>
-
-        <v-btn
-          text
-          color="error"
-          @click="$emit('close-bottom-sheet', false)"
-        >
-          Fermer
-        </v-btn>
-      </v-sheet>
-    </v-bottom-sheet>
-  </div>
-</template>
-
-
-<script>
-  import {defineComponent} from '@nuxtjs/composition-api'
-
-  export default defineComponent({
-    name: "BottomSheetComponent",
-    props:{
-      openSheet:{
-        type:Boolean,
-        required: true
-      }
-    },
-    setup: function () {
-
-    }
-  })
-</script>
-
-<style scoped>
-
-</style>

components/Form/FormComponent.vue

@@ -1,115 +0,0 @@
-<template>
-  <v-form
-    ref="form"
-    v-model="properties.valid"
-    lazy-validation
-  >
-    <slot name="form.input" v-bind="{entry}"></slot>
-<!--{{entry}}-->
-
-    <v-container fluid class="container">
-      <v-row>
-        <v-col cols="12" sm="12">
-          <v-btn v-if="!readOnly" class="mr-4 submitBtn ot_green ot_white--text" @click="submit">
-            Enregistrer
-          </v-btn>
-          <v-btn v-if="!readOnly" class="mr-4 submitBtn ot_danger ot_white--text" @click="submit">
-            Annuler
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-form>
-</template>
-
-<script lang="ts">
-  import {defineComponent, reactive, useContext, computed, toRefs} from '@nuxtjs/composition-api'
-  import Vue from 'vue'
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {useQueryHelper} from "~/use/store/useQuery";
-  import {Query, Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
-
-  export type VForm = Vue & { validate: () => boolean }
-
-  export default defineComponent({
-    props: {
-      repository: {
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      id:{
-        type: Number,
-        required: true
-      },
-      query:{
-        type: Object as () => Query,
-        required: true
-      },
-    },
-    setup(props) {
-      const {repository, id, query} = toRefs(props)
-      const properties = reactive({
-        valid: false,
-        saveOk: false,
-        saveKo: false
-      })
-
-      const {store} = useContext();
-      const readOnly = computed(() => {
-        return useRepositoryHelper.getReadOnly(repository.value)
-      })
-
-      const entry = computed(() => {
-          return useQueryHelper.getFlattenEntry(query.value, id.value)
-      })
-
-      const submit = () => {
-        useRepositoryHelper.setReadOnly(repository.value, true)
-        console.log(useQueryHelper.getJsonEntry(query.value, id.value))
-      }
-
-      return {
-        submit,
-        properties,
-        readOnly,
-        entry
-      }
-    },
-    // methods:{
-    //   async submit(){
-    //
-    //     console.log()
-    //
-    //
-    //     const form:VForm = this.$refs.form;
-    //     if(form.validate()){
-    //       const model = await this.repository.find(parseInt(this.$route.params.id));
-    //       if(model){
-    //         const playload = model.$toJson();
-    //
-    //         this.$http.$put(`https://local.new.api.opentalent.fr/api/${model.$entity}/${this.$route.params.id}`, playload)
-    //           .then(()=>{
-    //             this.saveOk=true
-    //           }, () =>{
-    //             this.saveKo=true
-    //           })
-    //
-    //         setTimeout(()=>{
-    //           this.saveOk=false
-    //           this.saveKo=false
-    //         },2000)
-    //       }
-    //     }
-    //   }
-    // }
-  })
-</script>
-
-<style scoped>
-  .submitBtn {
-    right: 0;
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-</style>

components/Form/Input/CheckboxComponent.vue

@@ -1,61 +0,0 @@
-<template>
-  <v-container
-    class="px-0"
-    fluid
-  >
-    <v-checkbox
-      :value="data"
-      :label="$t(label_field)"
-      @change="update"
-      :disabled="readOnly"
-    ></v-checkbox>
-  </v-container>
-</template>
-
-<script lang="ts">
-  import {computed, defineComponent, toRef} from '@nuxtjs/composition-api'
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
-
-  export default defineComponent({
-    props: {
-      repository: {
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      entry:{
-        type: Object,
-        required: true
-      },
-      field: {
-        type: String,
-        required: true
-      },
-      label: {
-        type: String,
-        required: false
-      }
-    },
-    setup(props){
-      const {label, field, repository } = props
-      const entry = toRef(props, 'entry')
-
-      const label_field = label ?? field;
-
-      const data = computed(() => entry.value[field])
-      const update = (newValue:string) => useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
-      const readOnly = computed(() => useRepositoryHelper.getReadOnly(repository))
-
-      return {
-        label_field,
-        readOnly,
-        data,
-        update
-      }
-    }
-  })
-</script>
-
-<style scoped>
-</style>

components/Form/Input/InputComponent.vue

@@ -1,82 +0,0 @@
-<template>
-    <v-text-field
-      :value="data"
-      :label="$t(label_field)"
-      @change="update"
-      :rules="rules"
-      :disabled="readOnly"
-      :type="type"
-      :error="error"
-      :error-messages="errorMessage"
-    >
-    </v-text-field>
-</template>
-
-<script lang="ts">
-  import {computed, defineComponent, toRef, ref} from '@nuxtjs/composition-api'
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
-
-  export default defineComponent({
-    props: {
-      repository:{
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      entry:{
-        type: Object,
-        required: true
-      },
-      field:{
-        type: String,
-        required: true
-      },
-      label:{
-        type: String,
-        required: false
-      },
-      type:{
-        type: String,
-        required: false
-      },
-      rules:{
-        type: Array,
-        required: false
-      },
-      error:{
-        type: Boolean,
-        required: false
-      },
-      errorMessage:{
-        type: String,
-        required: false
-      }
-    },
-    setup(props, {emit}){
-      const {label, field, repository } = props
-      const entry = toRef(props, 'entry')
-      const label_field = label ? label : field;
-
-      const data = computed(() => entry.value[field])
-      const update = (newValue:string) => {
-        useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
-        emit('update', newValue)
-      }
-      const readOnly = computed(() => useRepositoryHelper.getReadOnly(repository))
-
-      return {
-        label_field,
-        data,
-        update,
-        readOnly
-      }
-    }
-  })
-</script>
-
-<style>
-  input:read-only{
-    color: #666 !important;
-  }
-</style>

components/Form/Input/SelectComponent.vue

@@ -1,89 +0,0 @@
-<template>
-  <div>
-    <v-skeleton-loader
-      v-if="loading"
-      type="list-item"
-      loading
-    ></v-skeleton-loader>
-
-    <v-select
-      v-if="!loading"
-      :label="$t(label_field)"
-      :value="data"
-      :items="items"
-      item-text="label"
-      item-value="value"
-      @change="update"
-      :rules="rules"
-      :disabled="readOnly"
-    ></v-select>
-  </div>
-</template>
-
-<script lang="ts">
-  import {computed, defineComponent, ref, toRef, useContext, useFetch} from '@nuxtjs/composition-api'
-  import {$enumDataProvider} from "~/services/dataProvider/enumDataProvider";
-  import {AnyJson} from "~/types/types";
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
-
-  export default defineComponent({
-    props: {
-      repository: {
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      entry:{
-        type: Object,
-        required: true
-      },
-      field: {
-        type: String,
-        required: true
-      },
-      label: {
-        type: String,
-        required: false
-      },
-      enumType: {
-        type: String,
-        required: true
-      },
-      rules: {
-        type: Array,
-        required: false
-      }
-    },
-    setup(props){
-      const {label, field, repository, enumType } = props
-      const entry = toRef(props, 'entry')
-
-      const {$rest, app: {i18n}} = useContext()
-      const label_field = label ?? field;
-
-      const data = computed(() => entry.value[field])
-      const update = (newValue:string) => useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
-      const readOnly = computed(() => useRepositoryHelper.getReadOnly(repository))
-
-      const loading = ref(true)
-      const items: AnyJson = ref([])
-      const {fetch, fetchState} = useFetch(async () => {
-        items.value = await $enumDataProvider($rest, i18n).get(enumType)
-        loading.value = false
-      })
-
-      return {
-        data,
-        update,
-        items,
-        loading,
-        label_field,
-        readOnly
-      }
-    }
-  })
-</script>
-
-<style scoped>
-</style>

components/Form/Input/TextComponent.vue

@@ -1,61 +0,0 @@
-<template>
-  <v-textarea
-    :value="data"
-    :label="$t(label_field)"
-    @change="update"
-    :rules="rules"
-    :disabled="readOnly"
-  ></v-textarea>
-</template>
-
-<script lang="ts">
-  import {computed, defineComponent, toRef} from '@nuxtjs/composition-api'
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
-
-  export default defineComponent({
-    props: {
-      repository: {
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      entry:{
-        type: Object,
-        required: true
-      },
-      field: {
-        type: String,
-        required: true
-      },
-      label: {
-        type: String,
-        required: false
-      },
-      rules: {
-        type: Array,
-        required: false
-      }
-    },
-    setup(props){
-      const {label, field, repository } = props
-      const entry = toRef(props, 'entry')
-
-      const label_field = label ?? field;
-
-      const data = computed(() => entry.value[field])
-      const update = (newValue:string) => useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
-      const readOnly = computed(() => useRepositoryHelper.getReadOnly(repository))
-
-      return {
-        label_field,
-        data,
-        readOnly,
-        update
-      }
-    }
-  })
-</script>
-
-<style scoped>
-</style>

components/Layout/BannerTop.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-row justify="center" align="center" class="bannerTopForm">
+    <v-col cols="3" class="ot_dark_grey ot_white--text">
+      <slot name="bloc1"></slot>
+    </v-col>
+    <v-col cols="6" class="ot_white ot_grey--text">
+      <slot name="bloc2"></slot>
+    </v-col>
+    <v-col cols="3" class="ot_light_grey ot_grey--text">
+      <slot name="bloc3"></slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    setup() {
+      return {
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .bannerTopForm{
+    min-height: 100px;
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+  }
+  .bannerTopForm > .col{
+    min-height: 100px;
+    padding: 10px;
+  }
+</style>

components/Layout/Container.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-container fluid class="container">
+    <v-row justify="center" align="center">
+      <v-col cols="12" sm="12" md="12">
+        <slot></slot>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+  import {defineComponent, reactive} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    setup() {
+      return {
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .container{
+    padding: 30px;
+  }
+</style>

components/Layout/ContainerComponent.vue

@@ -1,26 +0,0 @@
-<template>
-  <v-container fluid class="container">
-    <v-row justify="center" align="center">
-      <v-col cols="12" sm="12" md="12">
-        <slot></slot>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script lang="ts">
-  import {defineComponent, reactive} from '@nuxtjs/composition-api'
-
-  export default defineComponent({
-    setup() {
-      return {
-      }
-    }
-  })
-</script>
-
-<style scoped>
-  .container{
-    padding: 30px;
-  }
-</style>

components/Layout/Header.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-app-bar
+    clipped-left
+    elevate-on-scroll
+    dense
+    fixed
+    app
+    class="ot_green ot_white--text"
+  >
+    <v-btn
+      v-if="properties.displayedMiniVariant"
+      class="menu-btn"
+      icon
+      @click.stop="displayedMenu()"
+    >
+      <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
+    </v-btn>
+
+    <v-toolbar-title v-text="properties.title"/>
+
+    <v-spacer/>
+
+    <v-btn
+      elevation="2"
+      color="ot_warning ot_white--text"
+    >{{$t('create')}}</v-btn>
+
+<!--    <v-btn icon>-->
+<!--      <a class="no-decoration" :href="properties.homeUrl + '/'"><v-icon class="ot_white&#45;&#45;text" small>fa-home</v-icon></a>-->
+<!--    </v-btn>-->
+
+    <v-btn icon>
+      <NuxtLink to="/" class="no-decoration"><v-icon class="ot_white--text" small>fa-home</v-icon></NuxtLink>
+    </v-btn>
+
+    <LayoutHeaderMenu :menu="properties.webSiteMenu"></LayoutHeaderMenu>
+
+    <LayoutHeaderMenu :menu="properties.myAccessesMenu" v-if="properties.hasAccessesMenu"></LayoutHeaderMenu>
+
+    <LayoutHeaderMenu :menu="properties.myFamilyMenu" v-if="properties.hasFamilyMenu"></LayoutHeaderMenu>
+
+    <LayoutNotification></LayoutNotification>
+
+    <LayoutHeaderMenu :menu="properties.configurationMenu" v-if="properties.hasConfigurationMenu"></LayoutHeaderMenu>
+
+    <LayoutHeaderMenu :menu="properties.accountMenu" :avatar="true"></LayoutHeaderMenu>
+
+    <a class="help ot_dark_grey ot_menu_color--text" href="https://support.opentalent.fr/" target="_blank">{{$t('help_access')}}</a>
+
+  </v-app-bar>
+</template>
+
+<script lang="ts">
+  import {defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
+  import {$useMenu} from "~/use/layout/menu";
+
+  export default defineComponent({
+    setup(props, {emit}) {
+      const {store, $config} = useContext();
+
+      const properties = reactive({
+        miniVariant: false,
+        displayedMiniVariant: store.state.profile.access.hasLateralMenu,
+        hasConfigurationMenu: store.state.profile.access.hasConfigurationMenu,
+        hasAccessesMenu: store.state.profile.access.hasAccessesMenu,
+        hasFamilyMenu: store.state.profile.access.hasFamilyMenu,
+        title: store.state.profile.organization.name,
+        homeUrl : $config.baseURL_adminLegacy,
+        webSiteMenu: $useMenu.setUpContext().useWebSiteMenuConstruct(),
+        myAccessesMenu : $useMenu.setUpContext().useMyAccessesMenuConstruct(),
+        myFamilyMenu : $useMenu.setUpContext().useMyFamilyMenuConstruct(),
+        configurationMenu: $useMenu.setUpContext().useConfigurationMenuConstruct(),
+        accountMenu : $useMenu.setUpContext().useAccountMenuConstruct()
+      })
+
+      const displayedMenu = () => {
+        properties.miniVariant = !properties.miniVariant
+        emit('handle-open-menu-click', properties.miniVariant)
+      }
+
+      return {
+        properties,
+        displayedMenu
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .help {
+    padding: 14px;
+    padding-bottom: 13px;
+    font-size: 14px;
+    text-decoration: none;
+  }
+</style>

components/Layout/HeaderComponent.vue

@@ -1,96 +0,0 @@
-<template>
-  <v-app-bar
-    clipped-left
-    elevate-on-scroll
-    dense
-    fixed
-    app
-    class="ot_green ot_white--text"
-  >
-    <v-btn
-      v-if="properties.displayedMiniVariant"
-      class="menu-btn"
-      icon
-      @click.stop="displayedMenu()"
-    >
-      <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
-    </v-btn>
-
-    <v-toolbar-title v-text="properties.title"/>
-
-    <v-spacer/>
-
-    <v-btn
-      elevation="2"
-      color="ot_warning ot_white--text"
-    >{{$t('create')}}</v-btn>
-
-<!--    <v-btn icon>-->
-<!--      <a class="no-decoration" :href="properties.homeUrl + '/'"><v-icon class="ot_white&#45;&#45;text" small>fa-home</v-icon></a>-->
-<!--    </v-btn>-->
-
-    <v-btn icon>
-      <NuxtLink to="/" class="no-decoration"><v-icon class="ot_white--text" small>fa-home</v-icon></NuxtLink>
-    </v-btn>
-
-    <HeaderMenuComponent :menu="properties.webSiteMenu"></HeaderMenuComponent>
-
-    <HeaderMenuComponent :menu="properties.myAccessesMenu" v-if="properties.hasAccessesMenu"></HeaderMenuComponent>
-
-    <HeaderMenuComponent :menu="properties.myFamilyMenu" v-if="properties.hasFamilyMenu"></HeaderMenuComponent>
-
-    <NotificationComponent></NotificationComponent>
-
-    <HeaderMenuComponent :menu="properties.configurationMenu" v-if="properties.hasConfigurationMenu"></HeaderMenuComponent>
-
-    <HeaderMenuComponent :menu="properties.accountMenu" :avatar="true"></HeaderMenuComponent>
-
-    <a class="help ot_dark_grey ot_menu_color--text" href="https://support.opentalent.fr/" target="_blank">{{$t('help_access')}}</a>
-
-  </v-app-bar>
-</template>
-
-<script lang="ts">
-  import {defineComponent, reactive, useContext} from '@nuxtjs/composition-api'
-  import {$useMenu} from "~/use/layout/menu";
-
-  export default defineComponent({
-    setup(props, {emit}) {
-      const {store, $config} = useContext();
-
-      const properties = reactive({
-        miniVariant: false,
-        displayedMiniVariant: store.state.profile.access.hasLateralMenu,
-        hasConfigurationMenu: store.state.profile.access.hasConfigurationMenu,
-        hasAccessesMenu: store.state.profile.access.hasAccessesMenu,
-        hasFamilyMenu: store.state.profile.access.hasFamilyMenu,
-        title: store.state.profile.organization.name,
-        homeUrl : $config.baseURL_adminLegacy,
-        webSiteMenu: $useMenu.setUpContext().useWebSiteMenuConstruct(),
-        myAccessesMenu : $useMenu.setUpContext().useMyAccessesMenuConstruct(),
-        myFamilyMenu : $useMenu.setUpContext().useMyFamilyMenuConstruct(),
-        configurationMenu: $useMenu.setUpContext().useConfigurationMenuConstruct(),
-        accountMenu : $useMenu.setUpContext().useAccountMenuConstruct()
-      })
-
-      const displayedMenu = () => {
-        properties.miniVariant = !properties.miniVariant
-        emit('handle-open-menu-click', properties.miniVariant)
-      }
-
-      return {
-        properties,
-        displayedMenu
-      }
-    }
-  })
-</script>
-
-<style scoped>
-  .help {
-    padding: 14px;
-    padding-bottom: 13px;
-    font-size: 14px;
-    text-decoration: none;
-  }
-</style>

components/Layout/HeaderMenu.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-menu offset-y left max-height="300">
+    <template v-slot:activator="{ on, attrs }">
+      <v-avatar v-if="avatar"
+             size="30"
+             v-bind="attrs"
+             v-on="on"
+      >
+        <img
+          src="https://cdn.vuetifyjs.com/images/john.jpg"
+          alt="John"
+        >
+      </v-avatar>
+      <v-btn v-else
+             icon
+             v-bind="attrs"
+             v-on="on"
+             color=""
+      >
+        <v-icon class="ot_white--text" small>{{menu.icon}}</v-icon>
+      </v-btn>
+    </template>
+    <v-list dense :subheader="true">
+      <v-list-item dense class="ot_light_grey">
+        <v-list-item-title v-text="$t(menu.title)"></v-list-item-title>
+      </v-list-item>
+      <template v-for="(item, index) in menu.children">
+        <v-list-item
+          :key="item.title"
+          :href="item.isExternalLink ? item.to : undefined"
+          :to="!item.isExternalLink ? item.to : undefined"
+          router
+          exact
+        >
+          <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
+        </v-list-item>
+        <v-divider
+          v-if="index < menu.length - 1"
+          :key="index"
+        ></v-divider>
+      </template>
+
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    props: {
+      menu: {
+        type: Object,
+        required: true
+      },
+      avatar: {
+        type: Boolean,
+        required: false
+      }
+    },
+
+    setup() {
+      return {
+      }
+    }
+  })
+</script>
+
+<style scoped>
+
+</style>

components/Layout/HeaderMenuComponent.vue

@@ -1,71 +0,0 @@
-<template>
-  <v-menu offset-y left max-height="300">
-    <template v-slot:activator="{ on, attrs }">
-      <v-avatar v-if="avatar"
-             size="30"
-             v-bind="attrs"
-             v-on="on"
-      >
-        <img
-          src="https://cdn.vuetifyjs.com/images/john.jpg"
-          alt="John"
-        >
-      </v-avatar>
-      <v-btn v-else
-             icon
-             v-bind="attrs"
-             v-on="on"
-             color=""
-      >
-        <v-icon class="ot_white--text" small>{{menu.icon}}</v-icon>
-      </v-btn>
-    </template>
-    <v-list dense :subheader="true">
-      <v-list-item dense class="ot_light_grey">
-        <v-list-item-title v-text="$t(menu.title)"></v-list-item-title>
-      </v-list-item>
-      <template v-for="(item, index) in menu.children">
-        <v-list-item
-          :key="item.title"
-          :href="item.isExternalLink ? item.to : undefined"
-          :to="!item.isExternalLink ? item.to : undefined"
-          router
-          exact
-        >
-          <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
-        </v-list-item>
-        <v-divider
-          v-if="index < menu.length - 1"
-          :key="index"
-        ></v-divider>
-      </template>
-
-    </v-list>
-  </v-menu>
-</template>
-
-<script lang="ts">
-  import {defineComponent} from '@nuxtjs/composition-api'
-
-  export default defineComponent({
-    props: {
-      menu: {
-        type: Object,
-        required: true
-      },
-      avatar: {
-        type: Boolean,
-        required: false
-      }
-    },
-
-    setup() {
-      return {
-      }
-    }
-  })
-</script>
-
-<style scoped>
-
-</style>

components/Layout/Menu.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-navigation-drawer
+    :mini-variant.sync="miniVariant"
+    clipped
+    class="ot_dark_grey ot_menu_color--text"
+    fixed
+    app
+  >
+    <v-list>
+      <div v-for="(item, i) in properties.menu" :key="i">
+        <v-list-item
+          v-if="!item.children"
+          :href="item.isExternalLink ? item.to : undefined"
+          :to="!item.isExternalLink ? item.to : undefined"
+          router
+          exact
+        >
+          <v-list-item-action>
+            <v-icon class="ot_menu_color--text" small>{{ item.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title class="ot_menu_color--text" v-text="$t(item.title)"/>
+          </v-list-item-content>
+        </v-list-item>
+
+        <v-list-group
+          v-else
+          v-model="item.active"
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-item-action>
+              <v-icon class="ot_menu_color--text" small>{{ item.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title class="ot_menu_color--text" v-text="$t(item.title)"/>
+            </v-list-item-content>
+          </template>
+
+          <v-list-item
+            v-for="child in item.children"
+            :key="child.title"
+            :href="child.isExternalLink ? child.to : undefined"
+            :to="!child.isExternalLink ? child.to : undefined"
+            router
+            exact
+          >
+            <v-list-item-action>
+              <v-icon class="ot_menu_color--text" small>{{ child.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title class="ot_menu_color--text" v-text="$t(child.title)"/>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-group>
+      </div>
+
+    </v-list>
+
+  </v-navigation-drawer>
+</template>
+
+<script lang="ts">
+  import {$useMenu} from '@/use/layout/menu'
+  import {defineComponent, reactive} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    props: {
+      miniVariant: {
+        type: Boolean,
+        required: true
+      }
+    },
+    setup() {
+      const properties = reactive({
+        menu: $useMenu.setUpContext().useLateralMenuConstruct()
+      })
+
+      return {
+        properties
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .v-list-item__action, .v-list-group__header__prepend-icon {
+    margin-right: 10px !important;
+  }
+
+  .v-application--is-ltr .v-list-group--no-action > .v-list-group__items > .v-list-item {
+    padding-left: 30px;
+  }
+
+  .v-list-item__title {
+    font-size: 14px;
+  }
+
+  .v-list-item {
+    min-height: 10px !important;
+  }
+
+  .v-list-item__action {
+    margin: 10px 0;
+  }
+
+  .v-list-item__content {
+    padding: 8px 0;
+  }
+
+  .home_menu {
+    font-size: 23px;
+  }
+</style>

components/Layout/MenuComponent.vue

@@ -1,114 +0,0 @@
-<template>
-  <v-navigation-drawer
-    :mini-variant.sync="miniVariant"
-    clipped
-    class="ot_dark_grey ot_menu_color--text"
-    fixed
-    app
-  >
-    <v-list>
-      <div v-for="(item, i) in properties.menu" :key="i">
-        <v-list-item
-          v-if="!item.children"
-          :href="item.isExternalLink ? item.to : undefined"
-          :to="!item.isExternalLink ? item.to : undefined"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon class="ot_menu_color--text" small>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title class="ot_menu_color--text" v-text="$t(item.title)"/>
-          </v-list-item-content>
-        </v-list-item>
-
-        <v-list-group
-          v-else
-          v-model="item.active"
-          no-action
-        >
-          <template v-slot:activator>
-            <v-list-item-action>
-              <v-icon class="ot_menu_color--text" small>{{ item.icon }}</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title class="ot_menu_color--text" v-text="$t(item.title)"/>
-            </v-list-item-content>
-          </template>
-
-          <v-list-item
-            v-for="child in item.children"
-            :key="child.title"
-            :href="child.isExternalLink ? child.to : undefined"
-            :to="!child.isExternalLink ? child.to : undefined"
-            router
-            exact
-          >
-            <v-list-item-action>
-              <v-icon class="ot_menu_color--text" small>{{ child.icon }}</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title class="ot_menu_color--text" v-text="$t(child.title)"/>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-group>
-      </div>
-
-    </v-list>
-
-  </v-navigation-drawer>
-</template>
-
-<script lang="ts">
-  import {$useMenu} from '@/use/layout/menu'
-  import {defineComponent, reactive} from '@nuxtjs/composition-api'
-
-  export default defineComponent({
-    props: {
-      miniVariant: {
-        type: Boolean,
-        required: true
-      }
-    },
-    setup() {
-      const properties = reactive({
-        menu: $useMenu.setUpContext().useLateralMenuConstruct()
-      })
-
-      return {
-        properties
-      }
-    }
-  })
-</script>
-
-<style scoped>
-  .v-list-item__action, .v-list-group__header__prepend-icon {
-    margin-right: 10px !important;
-  }
-
-  .v-application--is-ltr .v-list-group--no-action > .v-list-group__items > .v-list-item {
-    padding-left: 30px;
-  }
-
-  .v-list-item__title {
-    font-size: 14px;
-  }
-
-  .v-list-item {
-    min-height: 10px !important;
-  }
-
-  .v-list-item__action {
-    margin: 10px 0;
-  }
-
-  .v-list-item__content {
-    padding: 8px 0;
-  }
-
-  .home_menu {
-    font-size: 23px;
-  }
-</style>

components/Layout/Notification.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn icon
+             v-bind="attrs"
+             v-on="on"
+      >
+        <v-icon class="ot_white--text" small>fa-bell</v-icon>
+      </v-btn>
+    </template>
+    <v-list dense>
+      <template v-for="(item, index) in properties.menu">
+        <v-list-item :key="item.title">
+          <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
+        </v-list-item>
+        <v-divider
+          v-if="index < properties.menu.length - 1"
+          :key="index"
+        ></v-divider>
+      </template>
+
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+  import {$useMenu} from '@/use/layout/menu'
+  import {defineComponent, reactive} from '@nuxtjs/composition-api'
+  import {AnyJson} from "~/types/interfaces";
+
+  export default defineComponent({
+    setup() {
+      const menu: AnyJson = $useMenu.setUpContext().useConfigurationMenuConstruct()
+
+      const properties = reactive({
+        menu: menu
+      })
+
+      return {
+        properties
+      }
+    }
+  })
+</script>
+
+<style scoped>
+
+</style>

components/Layout/NotificationComponent.vue

@@ -1,48 +0,0 @@
-<template>
-  <v-menu offset-y>
-    <template v-slot:activator="{ on, attrs }">
-      <v-btn icon
-             v-bind="attrs"
-             v-on="on"
-      >
-        <v-icon class="ot_white--text" small>fa-bell</v-icon>
-      </v-btn>
-    </template>
-    <v-list dense>
-      <template v-for="(item, index) in properties.menu">
-        <v-list-item :key="item.title">
-          <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
-        </v-list-item>
-        <v-divider
-          v-if="index < properties.menu.length - 1"
-          :key="index"
-        ></v-divider>
-      </template>
-
-    </v-list>
-  </v-menu>
-</template>
-
-<script lang="ts">
-  import {$useMenu} from '@/use/layout/menu'
-  import {defineComponent, reactive} from '@nuxtjs/composition-api'
-  import {AnyJson} from "~/types/types";
-
-  export default defineComponent({
-    setup() {
-      const menu: AnyJson = $useMenu.setUpContext().useConfigurationMenuConstruct()
-
-      const properties = reactive({
-        menu: menu
-      })
-
-      return {
-        properties
-      }
-    }
-  })
-</script>
-
-<style scoped>
-
-</style>

components/Ui/Card.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-card
+    elevation="2"
+    outlined
+    shaped
+    min-height="200"
+  >
+    <v-card-title>
+      <slot name="card.title"></slot>
+    </v-card-title>
+    <v-card-text>
+      <slot name="card.text"></slot>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <slot name="card.action"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    props: {
+    },
+    setup(props) {
+      return {
+
+      }
+    }
+  })
+</script>
+<style scoped>
+</style>

components/Form/DataTableComponent.vue → components/Ui/DataTable.vue

@@ -3,10 +3,6 @@
       cols="12"
       sm="12"
     >
-      <BottomSheetComponent :openSheet="openSheet" v-on:close-bottom-sheet="openSheet=$event">
-          <slot name="sheet.content" v-bind="{itemId}"></slot>
-      </BottomSheetComponent>
-
       <v-data-table
         :headers="headersWithItem"
         :items="entries"
@@ -44,9 +40,10 @@
 <script lang="ts">
   import {defineComponent, ref, useContext, useFetch, computed, toRefs, onUnmounted} from '@nuxtjs/composition-api'
   import {Query} from "@vuex-orm/core";
-  import {$dataProvider} from "~/services/dataProvider/dataProvider";
-  import {AnyJson} from "~/types/types";
+  import {AnyJson} from "~/types/interfaces";
   import {useQueryHelper} from "~/use/store/useQuery";
+  import {QUERY_TYPE} from "~/types/enums";
+  import {Organization} from "~/models/Organization/Organization";
 
   export default defineComponent({
     props: {
@@ -85,24 +82,23 @@
       const entries = ref([] as Array<AnyJson>)
       const loading = ref(true)
 
-      const {store, $rest} = useContext()
+      const {$dataProvider} = useContext()
       const {fetch, fetchState} = useFetch(async ()=>{
-        await $dataProvider(store, $rest).getSubResourceCollection(
-          rootModel.value,
-          rootId.value,
-          model.value
-        )
+        await $dataProvider.invoke({
+          type: QUERY_TYPE.MODEL,
+          model: model.value,
+          root_model: rootModel.value,
+          root_id: rootId.value
+        })
         entries.value = useQueryHelper.getFlattenEntries(query.value);
         totalEntries.value = entries.value.length
         loading.value = false
       })
 
-      const openSheet = ref(false);
       const itemId = ref(0);
 
       const editItem = (item: AnyJson) => {
         itemId.value=item.id;
-        openSheet.value = true;
       }
 
       // onUnmounted( useRepositoryHelper.cleanRepository(repository.value) )
@@ -113,8 +109,7 @@
         loading,
         headersWithItem,
         editItem,
-        itemId,
-        openSheet
+        itemId
       }
     }
   })

components/Ui/Form.vue

@@ -0,0 +1,228 @@
+<template>
+  <main>
+    <v-form
+      ref="form"
+      v-model="properties.valid"
+      lazy-validation
+      :readonly="readOnly"
+    >
+      <v-container fluid class="container btnActions">
+        <v-row>
+          <v-col cols="12" sm="12">
+            <slot name="form.button"></slot>
+            <v-btn v-if="!readOnly" class="mr-4 ot_green ot_white--text" @click="submit">
+              Enregistrer
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <slot name="form.input" v-bind="{entry,updateRepository}"></slot>
+
+      <v-container fluid class="container btnActions">
+        <v-row>
+          <v-col cols="12" sm="12">
+            <slot name="form.button"></slot>
+            <v-btn v-if="!readOnly" class="mr-4 ot_green ot_white--text" @click="submit">
+              Enregistrer
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+
+    <div class="text-center">
+      <v-dialog
+        v-model="dialog"
+        width="500"
+      >
+        <v-card>
+          <v-card-title class="text-h5 grey lighten-2">
+            Attention
+          </v-card-title>
+
+          <v-card-text>
+            <br>
+            <p>Vous souhaitez quitter ce formulaire sans avoir enregistré</p>
+          </v-card-text>
+
+          <v-divider></v-divider>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn class="mr-4 submitBtn ot_danger ot_white--text" @click="closeDialogs">
+              Retour
+            </v-btn>
+            <v-btn class="mr-4 submitBtn ot_green ot_white--text" @click="goEvenUnsavedData">
+              Continuer
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+  import {defineComponent, reactive, useContext, computed, toRefs, onBeforeUnmount, onBeforeMount} from '@nuxtjs/composition-api'
+  import {useRepositoryHelper} from "~/use/store/useRepository";
+  import {useQueryHelper} from "~/use/store/useQuery";
+  import {Query} from "@vuex-orm/core";
+  import {QUERY_TYPE} from "~/types/enums";
+
+  export default defineComponent({
+    props: {
+      model: {
+        type: Function,
+        required: true
+      },
+      id: {
+        type: Number,
+        required: true
+      },
+      query: {
+        type: Object as () => Query,
+        required: true
+      },
+    },
+    setup: function (props) {
+      const {$dataPersister, store, app} = useContext()
+
+      const {id, query} = toRefs(props)
+      const repository = useRepositoryHelper.getRepository(props.model)
+      const properties = reactive({
+        valid: false,
+        saveOk: false,
+        saveKo: false
+      })
+
+      const readOnly = computed(() => {
+        return false
+      })
+
+      const entry = computed(() => {
+        return useQueryHelper.getFlattenEntry(query.value, id.value)
+      })
+
+      const handler = getEventHandler()
+
+      const updateRepository = (newValue: string, field: string) => {
+        addEventListener(handler)
+        store.commit('form/setDirty', true)
+        useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
+      }
+
+      const dialog = computed(() => {
+        return store.state.form.showConfirmToLeave
+      })
+
+      const closeDialogs = () => {
+        store.commit('form/setShowConfirmToLeave', false)
+      }
+
+      const goEvenUnsavedData = () => {
+        store.commit('form/setDirty', false)
+        store.commit('form/setShowConfirmToLeave', false)
+
+        const entryCopy = query.value.first()
+        if (entryCopy && entryCopy.$getAttributes()['originalState']) {
+          useRepositoryHelper.updateStore(repository, entryCopy.$getAttributes()['originalState'])
+        }
+
+        if (app.router) {
+          app.router.push(store.state.form.goAfterLeave)
+        }
+      }
+
+      onBeforeMount(() => {
+        clearEventListener(handler)
+      })
+
+      onBeforeUnmount(() => {
+        clearEventListener(handler)
+      })
+
+      const submit = async () => {
+        try {
+          store.commit('form/setDirty', false)
+          clearEventListener(handler)
+
+          await $dataPersister.invoke({
+            type: QUERY_TYPE.MODEL,
+            model: props.model,
+            id: id.value
+          })
+        } catch (error) {
+          console.log('aie aie aie')
+        }
+      }
+
+      return {
+        submit,
+        updateRepository,
+        properties,
+        readOnly,
+        dialog,
+        entry,
+        goEvenUnsavedData,
+        closeDialogs,
+      }
+    },
+    methods: {
+
+      // async submit(){
+      //
+      //   console.log()
+      //
+      //
+      //   const form:VForm = this.$refs.form;
+      //   if(form.validate()){
+      //     const model = await this.repository.find(parseInt(this.$route.params.id));
+      //     if(model){
+      //       const playload = model.$toJson();
+      //
+      //       this.$http.$put(`https://local.new.api.opentalent.fr/api/${model.$entity}/${this.$route.params.id}`, playload)
+      //         .then(()=>{
+      //           this.saveOk=true
+      //         }, () =>{
+      //           this.saveKo=true
+      //         })
+      //
+      //       setTimeout(()=>{
+      //         this.saveOk=false
+      //         this.saveKo=false
+      //       },2000)
+      //     }
+      //   }
+      // }
+    }
+  })
+
+  function getEventHandler() {
+    return function (e: any) {
+      // Cancel the event
+      e.preventDefault();
+      // Chrome requires returnValue to be set
+      e.returnValue = '';
+    };
+  }
+
+  function addEventListener(handler: any) {
+    if (process.browser) {
+      window.addEventListener('beforeunload', handler);
+    }
+  }
+
+  function clearEventListener(handler: any) {
+    if (process.browser) {
+      window.removeEventListener('beforeunload', handler);
+    }
+  }
+
+</script>
+
+<style scoped>
+  .btnActions {
+    text-align: right;
+  }
+</style>

components/Ui/Input/Checkbox.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-container
+    class="px-0"
+    fluid
+  >
+    <v-checkbox
+      :value="data"
+      :label="$t(label_field)"
+      @change="$emit('update', $event, field)"
+      :disabled="readOnly"
+    ></v-checkbox>
+  </v-container>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    props: {
+      field: {
+        type: String,
+        required: false
+      },
+      label: {
+        type: String,
+        required: false
+      },
+      data: {
+        type: Boolean,
+        required: false
+      },
+      readOnly: {
+        type: Boolean,
+        required: false
+      },
+    },
+    setup(props){
+      return {
+        label_field : props.label ?? props.field,
+      }
+    }
+  })
+</script>
+
+<style scoped>
+</style>

components/Form/Input/DatePickerComponent.vue → components/Ui/Input/DatePicker.vue

@@ -28,46 +28,37 @@
 
 
 <script lang="ts">
-  import {defineComponent, watch, ref, useContext, onUnmounted, computed, toRef} from '@nuxtjs/composition-api'
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Repository} from "@vuex-orm/core";
-  import {Model} from "~/models/Model";
+  import {defineComponent, watch, ref, useContext, onUnmounted} from '@nuxtjs/composition-api'
 
   export default defineComponent({
     props: {
-      repository: {
-        type: Object as () => Repository<Model>,
-        required: true
-      },
-      entry:{
-        type: Object,
-        required: true
-      },
       field: {
         type: String,
-        required: true
+        required: false
       },
       label: {
         type: String,
         required: false
-      }
+      },
+      data: {
+        type: String,
+        required: false
+      },
+      readOnly: {
+        type: Boolean,
+        required: false
+      },
     },
-    setup(props){
-      const {label, field, repository } = props
-      const entry = toRef(props, 'entry')
-
+    setup(props, {emit}){
+      const {data, field} = props
       const {$moment} = useContext()
-      const label_field = label ?? field;
-
-      const data = computed(() => entry.value[field])
-      const readOnly = computed(() => useRepositoryHelper.getReadOnly(repository))
 
-      const dateFormatted = ref($moment(data.value).format('DD/MM/YYYY'))
-      const dateParsed = ref($moment(data.value).format('YYYY-MM-DD'))
+      const dateFormatted = ref($moment(data).format('DD/MM/YYYY'))
+      const dateParsed = ref($moment(data).format('YYYY-MM-DD'))
 
       const unwatch = watch(dateParsed, (newValue) => {
         dateFormatted.value = $moment(newValue).format('DD/MM/YYYY')
-        useRepositoryHelper.updateStoreFromField(repository, entry.value, newValue, field)
+        emit('update', newValue, field)
       })
 
       onUnmounted(()=>{
@@ -75,8 +66,7 @@
       })
 
       return {
-        label_field,
-        readOnly,
+        label_field : props.label ?? props.field,
         dateParsed,
         dateFormatted,
         dateOpen: false

components/Ui/Input/Enum.vue

@@ -0,0 +1,81 @@
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="list-item"
+      loading
+    ></v-skeleton-loader>
+
+    <v-select
+      v-if="!loading"
+      :label="$t(label_field)"
+      :value="data"
+      :items="items"
+      item-text="label"
+      item-value="value"
+      @change="$emit('update', $event, field)"
+      :rules="rules"
+      :disabled="readOnly"
+    ></v-select>
+  </main>
+</template>
+
+<script lang="ts">
+  import {defineComponent, ref, useContext, useFetch} from '@nuxtjs/composition-api'
+  import {AnyJson} from "~/types/interfaces";
+  import {QUERY_TYPE} from "~/types/enums";
+
+  export default defineComponent({
+    props: {
+      enumType: {
+        type: String,
+        required: true
+      },
+      label:{
+        type: String,
+        required: false
+      },
+      field:{
+        type: String,
+        required: false
+      },
+      data: {
+        type: String,
+        required: false
+      },
+      readOnly: {
+        type: Boolean,
+        required: false
+      },
+      rules: {
+        type: Array,
+        required: false
+      }
+    },
+    setup(props, {emit}){
+      const label_field = props.label ?? props.field
+
+      const loading = ref(true)
+      const { enumType } = props
+      const {$dataProvider} = useContext()
+
+      const items: AnyJson = ref([])
+      const {fetch, fetchState} = useFetch(async () => {
+        items.value = await $dataProvider.invoke({
+          type: QUERY_TYPE.ENUM,
+          enumType: enumType
+        })
+        loading.value = false
+      })
+
+      return {
+        items,
+        label_field,
+        loading
+      }
+    }
+  })
+</script>
+
+<style scoped>
+</style>

components/Ui/Input/Text.vue

@@ -0,0 +1,65 @@
+<template>
+    <v-text-field
+      :value="data"
+      :label="$t(label_field)"
+      @change="$emit('update', $event, field)"
+      :rules="rules"
+      :disabled="readOnly"
+      :type="type"
+      :error="error"
+      :error-messages="errorMessage"
+    >
+    </v-text-field>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    props: {
+      label:{
+        type: String,
+        required: false
+      },
+      field:{
+        type: String,
+        required: false
+      },
+      type:{
+        type: String,
+        required: false
+      },
+      data: {
+        type: String,
+        required: false
+      },
+      readOnly: {
+        type: Boolean,
+        required: false
+      },
+      rules:{
+        type: Array,
+        required: false
+      },
+      error:{
+        type: Boolean,
+        required: false
+      },
+      errorMessage:{
+        type: String,
+        required: false
+      }
+    },
+    setup(props){
+      return {
+        label_field : props.label ?? props.field
+      }
+    }
+  })
+</script>
+
+<style>
+  input:read-only{
+    color: #666 !important;
+  }
+</style>

components/Ui/SubList.vue

@@ -0,0 +1,69 @@
+<template>
+    <main>
+      <v-skeleton-loader
+        type="text"
+        v-if="loading"
+      ></v-skeleton-loader>
+      <div v-else>
+        <slot name="list.item" v-bind="{entries}"></slot>
+      </div>
+      <slot>
+      </slot>
+    </main>
+</template>
+
+<script lang="ts">
+  import {defineComponent, ref, useContext, useFetch, computed, toRefs, onUnmounted} from '@nuxtjs/composition-api'
+  import {Query} from "@vuex-orm/core";
+  import {AnyJson} from "~/types/interfaces";
+  import {useQueryHelper} from "~/use/store/useQuery";
+  import {QUERY_TYPE} from "~/types/enums";
+  import {Organization} from "~/models/Organization/Organization";
+
+  export default defineComponent({
+    props: {
+      rootModel:{
+        type: Function,
+        required: true
+      },
+      rootId:{
+        type: Number,
+        required: true
+      },
+      model:{
+        type: Function,
+        required: true
+      },
+      query:{
+        type: Object as () => Query,
+        required: true
+      }
+    },
+    setup(props) {
+      const {rootModel, rootId, model, query} = toRefs(props);
+      const entries = ref([] as Array<AnyJson>)
+      const loading = ref(true)
+
+      const {$dataProvider} = useContext()
+      const {fetch, fetchState} = useFetch(async ()=>{
+
+        await $dataProvider.invoke({
+          type: QUERY_TYPE.MODEL,
+          model: model.value,
+          root_model: rootModel.value,
+          root_id: rootId.value
+        })
+
+        entries.value = useQueryHelper.getEntries(query.value);
+        loading.value = false
+      })
+
+      // onUnmounted( useRepositoryHelper.cleanRepository(repository.value) )
+
+      return {
+        entries,
+        loading
+      }
+    }
+  })
+</script>

layouts/default.vue

@@ -5,9 +5,9 @@
 
     <v-app dark>
 
-      <MenuComponent  v-if="properties.displayedMenu" :miniVariant="properties.miniVariant"></MenuComponent>
+      <LayoutMenu  v-if="properties.displayedMenu" :miniVariant="properties.miniVariant"></LayoutMenu>
 
-      <HeaderComponent v-on:handle-open-menu-click="handleOpenMenu"></HeaderComponent>
+      <LayoutHeader v-on:handle-open-menu-click="handleOpenMenu"></LayoutHeader>
 
       <v-main class="ot_content_color">
           <nuxt/>
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-  import {defineComponent, reactive, ref, useContext, computed} from '@nuxtjs/composition-api'
+  import {defineComponent, reactive, useContext, computed} from '@nuxtjs/composition-api'
 
   export default defineComponent({
     name: 'defaultLayout',
@@ -34,11 +34,15 @@
         properties.miniVariant = miniVariant
       }
 
+
+
       return {
         properties,
         handleOpenMenu
       }
     },
+
+
     middleware: ['auth']
   })
 </script>

models/Core/AddressPostal.ts

@@ -1,5 +1,4 @@
-import {Attr, Str, HasOne, Num} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, HasOne, Num, Model} from '@vuex-orm/core'
 import {Country} from "~/models/Core/Country";
 
 export class AddressPostal extends Model{
@@ -8,11 +7,8 @@ export class AddressPostal extends Model{
   @Attr(null)
   id!: number | null
 
-  @Attr(null)
-  addressPostalId!: number | null
-
-  @HasOne(() => Country, 'countryId')
-  country!: Country | null
+  @HasOne(() => Country, 'id')
+  addressCountry!: Country | null
 
   @Str('', {nullable: true})
   addressCity!: string

models/Core/BankAccount.ts

@@ -1,5 +1,4 @@
-import {Attr, Str, Bool, Num} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, Bool, Model} from '@vuex-orm/core'
 
 export class BankAccount extends Model{
   static entity = 'bank_accounts'

models/Core/ContactPoint.ts

@@ -1,5 +1,4 @@
-import {Attr, Str} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, Model} from '@vuex-orm/core'
 
 export class ContactPoint extends Model{
   static entity = 'contact_points'

models/Core/Country.ts

@@ -1,5 +1,4 @@
-import {Attr, Str} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, Model} from '@vuex-orm/core'
 
 export class Country extends Model{
   static entity = 'countries'

models/Model.ts

@@ -1,13 +1,6 @@
-import {Model as BaseModel} from "@vuex-orm/core";
+import {Model as BaseModel, Attr} from '@vuex-orm/core'
 
 export class Model extends BaseModel{
-  readonly:boolean = true;
-
-  setReadOnly(readOnly: boolean): void{
-    this.readonly = readOnly;
-  }
-
-  getReadOnly():boolean{
-    return this.readonly;
-  }
+  @Attr({})
+  originalState!: object | null
 }

models/Organization/Organization.ts

@@ -1,5 +1,5 @@
 import {Attr, Str, Bool, Num} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Model} from "~/models/Model";
 
 export class Organization extends Model{
   static entity = 'organizations'
@@ -7,6 +7,9 @@ export class Organization extends Model{
   @Attr(null)
   id!: number | null
 
+  @Attr({})
+  originalState!: object | null
+
   @Str('', {nullable: true})
   name!: string
 

models/Organization/OrganizationAddressPostal.ts

@@ -1,5 +1,4 @@
-import {Attr, Str, HasOne} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, HasOne, Model} from '@vuex-orm/core'
 import {AddressPostal} from "~/models/Core/AddressPostal";
 
 export class OrganizationAddressPostal extends Model{
@@ -8,7 +7,7 @@ export class OrganizationAddressPostal extends Model{
   @Attr(null)
   id!: number | null
 
-  @HasOne(() => AddressPostal, 'addressPostalId')
+  @HasOne(() => AddressPostal, 'id')
   addressPostal!: AddressPostal | null
 
   @Str('PRINCIPAL', {nullable: false})

models/Organization/OrganizationLicence.ts

@@ -1,5 +1,4 @@
-import {Attr, Str} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, Model} from '@vuex-orm/core'
 
 export class OrganizationLicence extends Model{
   static entity = 'organization_licences'

models/Organization/OrganizationNetwork.ts

@@ -1,5 +1,4 @@
-import {Attr, Str} from '@vuex-orm/core'
-import {Model} from '@/models/Model'
+import {Attr, Str, Model} from '@vuex-orm/core'
 
 export class OrganizationLicence extends Model{
   static entity = 'organization_licences'

pages/index.vue

@@ -2,7 +2,7 @@
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="12">
       <h3>Bienvenue !</h3>
-      <NuxtLink to="organization/edit">Organization</NuxtLink>
+      <NuxtLink to="organization">Organization</NuxtLink>
     </v-col>
   </v-row>
 </template>

pages/login.vue

@@ -11,6 +11,7 @@
   import {defineComponent, useContext} from '@nuxtjs/composition-api'
 
   export default defineComponent({
+    name: 'login',
     setup() {
       return {
 

pages/organization.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container fluid>
+    <LayoutBannerTop>
+      <template v-slot:bloc1>{{entry.name}}</template>
+      <template v-slot:bloc2>N°Siret : {{entry.siretNumber}}</template>
+      <template v-slot:bloc3>{{entry.description}}</template>
+    </LayoutBannerTop>
+    <NuxtChild />
+  </v-container>
+</template>
+
+
+<script lang="ts">
+  import {computed, defineComponent, useContext} from '@nuxtjs/composition-api'
+  import {QUERY_TYPE} from "~/types/enums";
+  import {Organization} from "~/models/Organization/Organization";
+  import {useQueryHelper} from "~/use/store/useQuery";
+  import {useRepositoryHelper} from "~/use/store/useRepository";
+
+  export default defineComponent({
+    name: 'organization',
+    setup() {
+      const {store} = useContext()
+      const repository = useRepositoryHelper.getRepository(Organization)
+      const query = computed(() => repository.query())
+      const entry = computed(() => {
+        return useQueryHelper.getEntry(query.value, store.state.profile.organization.id)
+      })
+      return {
+        entry
+      }
+    },
+    async asyncData({store, $dataProvider}) {
+      await $dataProvider.invoke({
+        type: QUERY_TYPE.MODEL,
+        model: Organization,
+        id: store.state.profile.organization.id
+      })
+    }
+  })
+
+</script>

pages/organization/address/_id.vue

@@ -0,0 +1,105 @@
+<template>
+  <main>
+    <v-skeleton-loader
+      type="text"
+      v-if="loading"
+    ></v-skeleton-loader>
+    <LayoutContainer v-else>
+      <v-card class="margin-bottom-20">
+        <v-toolbar flat class="ot_light_grey toolbarForm" dark dense rounded>
+          <v-toolbar-title class="ot_dark_grey--text form_main_title">
+            <v-icon class="ot_white--text ot_green icon">fa-globe-europe</v-icon>
+            {{ $t('address_postal') }}
+          </v-toolbar-title>
+        </v-toolbar>
+
+        <UiForm :model="model" :id="id" :query="query()">
+          <template v-slot:form.input="{entry, updateRepository}">
+
+            <v-skeleton-loader
+              type="text"
+              v-if="loading"
+            ></v-skeleton-loader>
+            <v-container v-else fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddress" label="streetAddress" :data="entry['addressPostal.streetAddress']" v-on:update="updateRepository"/>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddressSecond" label="streetAddressSecond" :data="entry['addressPostal.streetAddressSecond']" v-on:update="updateRepository"/>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.streetAddressThird" label="streetAddressThird" :data="entry['addressPostal.streetAddressThird']" v-on:update="updateRepository"/>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.postalCode" label="postalCode" :data="entry['addressPostal.postalCode']" v-on:update="updateRepository"/>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="addressPostal.addressCity" label="addressCity" :data="entry['addressPostal.addressCity']" v-on:update="updateRepository"/>
+                </v-col>
+              </v-row>
+            </v-container>
+
+          </template>
+
+          <template v-slot:form.button>
+            <NuxtLink :to="{ path: '/organization', query: { accordion: 'postal_address' }}" class="no-decoration">
+              <v-btn class="mr-4 ot_danger ot_white--text">
+                Retour
+              </v-btn>
+            </NuxtLink>
+          </template>
+        </UiForm>
+      </v-card>
+    </LayoutContainer>
+  </main>
+</template>
+
+
+<script lang="ts">
+  import {defineComponent, useContext, useFetch, ref, computed} from '@nuxtjs/composition-api'
+  import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
+  import {QUERY_TYPE} from "~/types/enums";
+  import {useRepositoryHelper} from "~/use/store/useRepository";
+
+  export default defineComponent({
+    name: 'organization_address',
+    setup() {
+      const {route, $dataProvider} = useContext()
+      const loading = ref(true)
+      const id = parseInt(route.value.params.id)
+
+      const repository = useRepositoryHelper.getRepository(OrganizationAddressPostal)
+      const query = computed(() => repository.with('addressPostal', (query) => {
+        query.with('addressCountry')
+      }))
+
+      useFetch(async () => {
+        await $dataProvider.invoke({
+          type: QUERY_TYPE.MODEL,
+          model: OrganizationAddressPostal,
+          id: id
+        })
+        loading.value = false
+      })
+
+      return {
+        model: OrganizationAddressPostal,
+        query: () => query,
+        id,
+        loading,
+        panel: 0
+      }
+    },
+  })
+</script>
+<style>
+  .toolbarForm .v-toolbar__content{
+    padding-left: 0px !important;
+  }
+  .toolbarForm .v-toolbar__title .v-icon{
+    height: 46px;
+    width: 46px;
+  }
+
+</style>

pages/organization/edit.vue

@@ -1,469 +0,0 @@
-<template>
-  <ContainerComponent>
-    <template>
-      <v-card class="margin-bottom-20">
-        <v-toolbar flat class="ot_light_grey" dark>
-          <v-toolbar-title class="ot_dark_grey--text form_main_title">
-            Description de l'organisation
-            <v-btn @click="edit" v-if="readOnly" class="ot_green editBtn">
-              Modifier
-            </v-btn>
-          </v-toolbar-title>
-        </v-toolbar>
-
-        <FormComponent :repository="repositories.organizationRepository" :id="id" :query="repositories.organizationRepository.query()">
-          <template v-slot:form.input="{entry}">
-            <v-tabs vertical>
-              <v-tab><v-icon left>fa-info</v-icon>{{$t('description')}}</v-tab>
-              <v-tab><v-icon left>fa-gavel</v-icon>{{$t('legalInformation')}}</v-tab>
-              <v-tab><v-icon left>fa-certificate</v-icon>{{$t('agrements')}}</v-tab>
-              <v-tab><v-icon left>fa-users</v-icon>{{$t('salary')}}</v-tab>
-              <v-tab v-if="organizationProfile.isInsideNetwork()"><v-icon left>fa-share-alt</v-icon>{{$t('network')}}</v-tab>
-              <v-tab><v-icon left>fa-rss</v-icon>{{$t('communication')}}</v-tab>
-
-              <v-tab-item>
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="name" :repository="repositories.organizationRepository" :entry="entry" :rules="rules.nameRules" />
-                    </v-col>
-
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="acronym" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent
-                        field="siretNumber"
-                        :repository="repositories.organizationRepository"
-                        :entry="entry"
-                        v-on:update="checkSiret"
-                        :error="siretError"
-                        :errorMessage="siretErrorMessage"
-                        :rules="rules.siretRule"
-                      />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="apeNumber" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="entry['legalStatus'] === 'ASSOCIATION_LAW_1901'" >
-                      <InputComponent field="waldecNumber" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="organizationProfile.isInsideNetwork()" >
-                      <InputComponent field="identifier" :repository="repositories.organizationRepository" :entry="entry"
-                                      :label="organizationProfile.isCmf() ? 'identifierCmf' : 'identifierFfec'" />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()" >
-                      <InputComponent field="ffecApproval" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="description" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="logo" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-
-                    <!-- @todo: ajouter les if et transformer en select-->
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="typeOfPractices" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="otherPractice" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-              <v-tab-item>
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <DatePickerComponent field="creationDate" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="prefectureName" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="prefectureNumber" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="tvaNumber" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <SelectComponent field="legalStatus" :repository="repositories.organizationRepository" :entry="entry"  enumType="organization_legal" />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="!organizationProfile.isManagerProduct()" >
-                      <SelectComponent field="principalType" :repository="repositories.organizationRepository"
-                                       :entry="entry"  enumType="organization_principal_type"
-                      />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="!organizationProfile.isFfec() && !organizationProfile.isManagerProduct() && !organizationProfile.isArtist()">
-                      <SelectComponent field="schoolCategory" :repository="repositories.organizationRepository" :entry="entry"  enumType="organization_school_cat" />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()" >
-                      <SelectComponent field="typeEstablishment" :repository="repositories.organizationRepository" :entry="entry" enumType="organization_type_establishment"/>
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="entry.typeEstablishment === 'MULTIPLE'" >
-                      <SelectComponent field="typeEstablishmentDetail" :repository="repositories.organizationRepository" :entry="entry"  enumType="organization_type_establishment_detail"/>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-              <v-tab-item>
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="youngApproval" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="trainingApproval" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="otherApproval" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-              <v-tab-item>
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="collectiveAgreement" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <SelectComponent field="opca" :repository="repositories.organizationRepository" :entry="entry"  enumType="organization_opca" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="icomNumber" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="urssafNumber" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-              <v-tab-item  v-if="organizationProfile.isInsideNetwork()">
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6"  v-if="organizationProfile.isFfec()" >
-                      <InputComponent field="budget" :repository="repositories.organizationRepository" :entry="entry"  type="number" />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()" >
-                      <CheckboxComponent field="isPedagogicIsPrincipalActivity" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()" >
-                      <InputComponent field="pedagogicBudget" :repository="repositories.organizationRepository" :entry="entry"  type="number"/>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-              <v-tab-item>
-                <v-container fluid class="container">
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="twitter" :repository="repositories.organizationRepository" :entry="entry"  />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="facebook" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="instagram" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <CheckboxComponent field="portailVisibility" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                    <v-col cols="12" sm="6">
-                      <InputComponent field="image" :repository="repositories.organizationRepository" :entry="entry" />
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-tab-item>
-
-            </v-tabs>
-          </template>
-        </FormComponent>
-      </v-card>
-    </template>
-
-
-    <v-expansion-panels v-model="panel" focusable>
-
-      <!-- Adresses -->
-      <ExpansionPanelComponent :title="$t('address_postal')"  icon="fa-globe-europe">
-        <v-container fluid class="container">
-          <v-row>
-            <v-col cols="12" sm="12">
-              <DataTableComponent
-                :query="repositories.addressRepository.with('addressPostal')"
-                :rootModel="models.Organization"
-                :rootId="id"
-                :model="models.OrganizationAddressPostal"
-                :headers="datatableHeaders.headersAddressPostal"
-              >
-                <template v-slot:item.type="{item}">
-                  {{$t(item.type)}}
-                </template>
-                <template v-slot:item.address="{item}">
-                  {{item['addressPostal.streetAddress']}}
-                  {{item['addressPostal.postalCode']}}
-                  {{item['addressPostal.addressCity']}}
-                </template>
-
-                <template v-slot:sheet.content="{itemId}">
-                  <v-container class="container sheetBottomContainer">
-                    <h2 class="sheet_bottom_title">Adresse postale</h2>
-                    <FormComponent :repository="repositories.addressRepository" :id="itemId" :query="queries.addressQuery()">
-                      <template v-slot:form.input="{entry: addressEntry }">
-                        <v-row>
-                          <v-col cols="12" sm="6">
-                            <SelectComponent field="type" label="address_postal_type" :repository="repositories.addressRepository" :entry="addressEntry" enumType="address_postal_organization" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.addressOwner" label="addressOwner" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.streetAddress" label="streetAddress" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.streetAddressSecond" label="streetAddressSecond" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.streetAddressThird" label="streetAddressThird" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.postalCode" label="postalCode" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.addressCity" label="addressCity" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="addressPostal.country" label="country" :repository="repositories.addressRepository" :entry="addressEntry" />
-                          </v-col>
-                        </v-row>
-                      </template>
-                    </FormComponent>
-                  </v-container>
-                </template>
-              </DataTableComponent>
-            </v-col>
-          </v-row>
-        </v-container>
-      </ExpansionPanelComponent>
-
-      <!--  Point de Contact-->
-      <ExpansionPanelComponent :title="$t('contact_point')"  icon="fa-phone">
-        <v-container class="container">
-          <v-row>
-            <v-col cols="12" sm="12">
-              <DataTableComponent
-                :query="repositories.contactPointRepository.query()"
-                :rootModel="models.Organization"
-                :rootId="id"
-                :model="models.ContactPoint"
-                :headers="datatableHeaders.headersContactPoint"
-              >
-                <template v-slot:sheet.content="{itemId }">
-                  <v-container class="container sheetBottomContainer">
-                    <h2 class="sheet_bottom_title">Point de contact</h2>
-                    <FormComponent :repository="repositories.contactPointRepository" :query="queries.contactPointQuery()" :id="itemId">
-                      <template v-slot:form.input="{entry: contactPointEntry }">
-                        <v-row>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="email" :repository="repositories.contactPointRepository" :entry="contactPointEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="telphone" :repository="repositories.contactPointRepository" :entry="contactPointEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="mobilPhone" :repository="repositories.contactPointRepository" :entry="contactPointEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="faxNumber" :repository="repositories.contactPointRepository" :entry="contactPointEntry" />
-                          </v-col>
-                        </v-row>
-                      </template>
-                    </FormComponent>
-                  </v-container>
-                </template>
-              </DataTableComponent>
-            </v-col>
-          </v-row>
-        </v-container>
-      </ExpansionPanelComponent>
-
-      <!-- IBAN -->
-      <ExpansionPanelComponent :title="$t('bank_account')"  icon="fa-euro-sign">
-        <v-container class="container">
-          <v-row>
-            <v-col cols="12" sm="12">
-              <DataTableComponent
-                :query="repositories.bankAccountRepository.query()"
-                :rootModel="models.Organization"
-                :rootId="id"
-                :model="models.BankAccount"
-                :headers="datatableHeaders.headersBankAccount"
-              >
-                <template v-slot:sheet.content="{itemId}">
-                  <v-container class="container sheetBottomContainer">
-                    <h2 class="sheet_bottom_title">IBAN</h2>
-                    <FormComponent :repository="repositories.bankAccountRepository" :id="itemId" :query="queries.bankAccountQuery()">
-                      <template v-slot:form.input="{entry: bankAccountEntry }">
-                        <v-row>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="bankName" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="bic" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="iban" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="debitAddress" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <InputComponent field="holder" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                          <v-col cols="12" sm="6">
-                            <CheckboxComponent field="principal" :repository="repositories.bankAccountRepository" :entry="bankAccountEntry" />
-                          </v-col>
-                        </v-row>
-                      </template>
-                    </FormComponent>
-                  </v-container>
-                </template>
-              </DataTableComponent>
-            </v-col>
-          </v-row>
-        </v-container>
-      </ExpansionPanelComponent>
-
-    </v-expansion-panels>
-
-  </ContainerComponent>
-</template>
-
-<script lang="ts">
-  import {defineComponent, useContext, onUnmounted, computed} from '@nuxtjs/composition-api'
-  import {$dataProvider} from "~/services/dataProvider/dataProvider";
-  import {$organizationProfile} from "~/services/profile/organizationProfile";
-  import {Organization} from '@/models/Organization/Organization'
-  import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
-  import {ContactPoint} from "~/models/Core/ContactPoint";
-  import {BankAccount} from "~/models/Core/BankAccount";
-  import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Utils} from "~/use/form/utils";
-
-  export default defineComponent({
-    name: 'organization_edit',
-    setup() {
-      const {store, app:{i18n}} = useContext()
-      const organizationProfile = $organizationProfile(store)
-      const id = store.state.profile.organization.id;
-
-      const repositories = getRepositories()
-
-
-      const {siretError, siretErrorMessage, checkSiret} = Utils.useHandleSiret()
-      //onUnmounted( useRepositoryHelper.cleanRepository(repository) )
-
-      const readOnly = computed(() => {
-        return useRepositoryHelper.getReadOnly(repositories.organizationRepository)
-      })
-
-      return {
-        repositories,
-        queries: getQueries(),
-        id,
-        organizationProfile,
-        models: {Organization, ContactPoint, BankAccount, OrganizationAddressPostal},
-        edit: useRepositoryHelper.editRepository(repositories.organizationRepository),
-        datatableHeaders: getDataTablesHeaders(i18n),
-        rules: getRules(i18n),
-        siretError,
-        siretErrorMessage,
-        checkSiret,
-        panel:null,
-        readOnly
-      }
-    },
-
-    async asyncData({store, $rest}){
-      await $dataProvider(store, $rest).getItem(Organization, store.state.profile.organization.id)
-    }
-  })
-
-  function getRules(i18n: any){
-    return {
-      nameRules : [
-        (nameValue:string) => !!nameValue || i18n.t('required'),
-        (nameValue:string) => (nameValue || '').length <= 128 || i18n.t('name_length_rule')
-      ],
-      siretRule : [
-        (siretValue:string) => /^([0-9]{9}|[0-9]{14})$/.test(siretValue) || i18n.t('siret_error')
-      ]
-    }
-  }
-
-  function getDataTablesHeaders(i18n: any) {
-    return {
-      headersContactPoint: [
-        {text: i18n.t('email'), value: 'email'},
-        {text: i18n.t('telphone'), value: 'telphone'},
-        {text: i18n.t('mobilPhone'), value: 'mobilPhone'},
-        {text: i18n.t('actions'), value: 'actions', sortable: false},
-      ],
-      headersBankAccount: [
-        {text: i18n.t('bankName'), value: 'bankName'},
-        {text: i18n.t('iban'), value: 'iban'},
-        {text: i18n.t('bic'), value: 'bic'},
-        {text: i18n.t('actions'), value: 'actions', sortable: false},
-      ],
-      headersAddressPostal: [
-        {text: i18n.t('address_postal_type'), value: 'type'},
-        {text: i18n.t('address'), value: 'address'},
-        {text: i18n.t('actions'), value: 'actions', sortable: false},
-      ]
-    }
-  }
-
-  function getRepositories() {
-    return {
-      organizationRepository: useRepositoryHelper.initRepository(Organization),
-      contactPointRepository: useRepositoryHelper.initRepository(ContactPoint, false),
-      bankAccountRepository: useRepositoryHelper.initRepository(BankAccount, false),
-      addressRepository: useRepositoryHelper.initRepository(OrganizationAddressPostal, false)
-    }
-  }
-
-  function getQueries() {
-    return {
-      organizationQuery: () => getRepositories().organizationRepository.query(),
-      contactPointQuery: () => getRepositories().contactPointRepository.query(),
-      bankAccountQuery: () => getRepositories().bankAccountRepository.query(),
-      addressQuery: () => getRepositories().addressRepository.with('addressPostal')
-    }
-  }
-</script>
-
-<style scoped>
-  .v-tab{
-    justify-content: left;
-    font-size: 12px;
-  }
-  .v-icon.v-icon{
-    font-size: 14px;
-  }
-  .sheet_bottom_title{
-    text-align: left;
-    border-bottom: 1px solid #1ead8d;
-    margin-bottom: 35px;
-  }
-  .sheetBottomContainer{
-    padding: 20px;
-    padding-top: 30px;
-  }
-</style>

pages/organization/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <LayoutContainer>
+
+    <UiForm :model="models.Organization" :id="id" :query="repositories.organizationRepository.query()">
+      <template v-slot:form.input="{entry, updateRepository}">
+
+        <v-expansion-panels v-model="panel" focusable accordion>
+
+          <!-- Description -->
+          <UiExpansionPanel :title="$t('description')" icon="fa-info">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="name" :data="entry['name']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="acronym" :data="entry['acronym']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="siretNumber" :data="entry['siretNumber']"  v-on:update="checkSiretHook($event, 'siretNumber', updateRepository)"
+                                  :error="siretError"
+                                  :errorMessage="siretErrorMessage"
+                                  :rules="rules.siretRule"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="apeNumber" :data="entry['apeNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="entry['legalStatus'] === 'ASSOCIATION_LAW_1901'">
+                  <UiInputText field="waldecNumber" :data="entry['waldecNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="organizationProfile.isInsideNetwork()">
+                  <UiInputText :label="organizationProfile.isCmf() ? 'identifierCmf' : 'identifierFfec'" field="identifier" :data="entry['identifier']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
+                  <UiInputText field="ffecApproval" :data="entry['ffecApproval']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="description" :data="entry['description']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="logo" :data="entry['logo']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <!-- @todo: ajouter les if et transformer en select-->
+                <v-col cols="12" sm="6">
+                  <UiInputText field="typeOfPractices" :data="entry['typeOfPractices']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="otherPractice" :data="entry['otherPractice']"  v-on:update="updateRepository"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- Adresses -->
+          <UiExpansionPanel :title="$t('address_postal')" icon="fa-globe-europe">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiSubList
+                    :query="repositories.addressRepository.with('addressPostal', (query) => {
+                      query.with('addressCountry')
+                    })"
+                    :rootModel="models.Organization"
+                    :rootId="id"
+                    :model="models.OrganizationAddressPostal"
+                  >
+                    <template v-slot:list.item="{entries}">
+                      <v-container fluid>
+                        <v-row dense>
+                            <v-col
+                              v-for="entry in entries"
+                              :key="entry.id"
+                              cols="3"
+                            >
+                              <UiCard>
+                                <template v-slot:card.title>{{$t(entry.type)}}</template>
+                                <template v-slot:card.text>
+                                  {{entry.addressPostal.streetAddress}} <br />
+                                  <span v-if="entry.addressPostal.streetAddressSecond">{{entry.addressPostal.streetAddressSecond}} <br /></span>
+                                  <span v-if="entry.addressPostal.streetAddressThird">{{entry.addressPostal.streetAddressThird}} <br /></span>
+                                  {{entry.addressPostal.postalCode}} {{entry.addressPostal.addressCity}}<br />
+                                  <span v-if="entry.addressPostal.addressCountry">{{entry.addressPostal.addressCountry.name}}</span>
+                                </template>
+                                <template v-slot:card.action>
+                                  <v-btn icon>
+                                    <NuxtLink :to="`/organization/address/${entry.id}`" class="no-decoration"><v-icon>mdi-pencil</v-icon></NuxtLink>
+                                  </v-btn>
+                                  <v-btn icon>
+                                    <v-icon>mdi-delete</v-icon>
+                                  </v-btn>
+                                </template>
+                              </UiCard>
+                            </v-col>
+                        </v-row>
+                      </v-container>
+                    </template>
+                  </UiSubList>
+                </v-col>
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!--  Point de Contact-->
+          <UiExpansionPanel :title="$t('contact_point')" icon="fa-phone">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiDataTable
+                    :query="repositories.contactPointRepository.query()"
+                    :rootModel="models.Organization"
+                    :rootId="id"
+                    :model="models.ContactPoint"
+                    :headers="datatableHeaders.headersContactPoint"
+                  >
+                  </UiDataTable>
+                </v-col>
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- Informations légales -->
+          <UiExpansionPanel :title="$t('legalInformation')" icon="fa-gavel">
+            <v-container fluid class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputDatePicker field="creationDate" :data="entry['creationDate']"  v-on:update="updateRepository"/>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="prefectureName" :data="entry['prefectureName']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="prefectureNumber" :data="entry['prefectureNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="tvaNumber" :data="entry['tvaNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputEnum field="legalStatus" :data="entry['legalStatus']"  enumType="organization_legal" v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="!organizationProfile.isManagerProduct()">
+                  <UiInputEnum field="principalType" :data="entry['principalType']"  enumType="organization_principal_type" v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="!organizationProfile.isFfec() && !organizationProfile.isManagerProduct() && !organizationProfile.isArtist()">
+                  <UiInputEnum field="schoolCategory" :data="entry['schoolCategory']"  enumType="organization_school_cat" v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
+                  <UiInputEnum field="typeEstablishment" :data="entry['typeEstablishment']"  enumType="organization_type_establishment" v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="entry.typeEstablishment === 'MULTIPLE'">
+                  <UiInputEnum field="typeEstablishmentDetail" :data="entry['typeEstablishmentDetail']"  enumType="organization_type_establishment_detail" v-on:update="updateRepository"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!--  Agréments -->
+          <UiExpansionPanel :title="$t('agrements')" icon="fa-certificate">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="youngApproval" :data="entry['youngApproval']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="trainingApproval" :data="entry['trainingApproval']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="otherApproval" :data="entry['otherApproval']"  v-on:update="updateRepository"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- Salariés -->
+          <UiExpansionPanel :title="$t('salary')" icon="fa-users">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="collectiveAgreement" :data="entry['collectiveAgreement']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputEnum field="opca" :data="entry['opca']"  enumType="organization_opca" v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="icomNumber" :data="entry['icomNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="urssafNumber" :data="entry['urssafNumber']"  v-on:update="updateRepository"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- Réseaux -->
+          <UiExpansionPanel v-if="organizationProfile.isInsideNetwork()" :title="$t('network')" icon="fa-share-alt">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
+                  <UiInputText field="budget" :data="entry['budget']"  v-on:update="updateRepository" type="number"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
+                  <UiInputCheckbox field="isPedagogicIsPrincipalActivity" :data="entry['isPedagogicIsPrincipalActivity']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
+                  <UiInputText field="pedagogicBudget" :data="entry['pedagogicBudget']"  v-on:update="updateRepository" type="number"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- Communication -->
+          <UiExpansionPanel :title="$t('communication')" icon="fa-rss">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <UiInputText field="twitter" :data="entry['twitter']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="facebook" :data="entry['facebook']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="instagram" :data="entry['instagram']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputCheckbox field="portailVisibility" :data="entry['portailVisibility']"  v-on:update="updateRepository"/>
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="image" :data="entry['image']"  v-on:update="updateRepository"/>
+                </v-col>
+
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+          <!-- IBAN -->
+          <UiExpansionPanel :title="$t('bank_account')" icon="fa-euro-sign">
+            <v-container class="container">
+              <v-row>
+                <v-col cols="12" sm="12">
+                  <UiDataTable
+                    :query="repositories.bankAccountRepository.query()"
+                    :rootModel="models.Organization"
+                    :rootId="id"
+                    :model="models.BankAccount"
+                    :headers="datatableHeaders.headersBankAccount"
+                  >
+                  </UiDataTable>
+                </v-col>
+              </v-row>
+            </v-container>
+          </UiExpansionPanel>
+
+        </v-expansion-panels>
+      </template>
+    </UiForm>
+  </LayoutContainer>
+</template>
+
+<script lang="ts">
+  import {defineComponent, useContext} from '@nuxtjs/composition-api'
+  import {$organizationProfile} from "~/services/profile/organizationProfile";
+  import {Organization} from '@/models/Organization/Organization'
+  import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
+  import {ContactPoint} from "~/models/Core/ContactPoint";
+  import {BankAccount} from "~/models/Core/BankAccount";
+  import {useRepositoryHelper} from "~/use/store/useRepository";
+  import {Utils} from "~/use/form/utils";
+
+  export default defineComponent({
+    name: 'organization_parent',
+    setup() {
+      const {store, app: {i18n}, route} = useContext()
+      const organizationProfile = $organizationProfile(store)
+      const id = store.state.profile.organization.id;
+
+      const repositories = getRepositories()
+
+      const {siretError, siretErrorMessage, checkSiret} = Utils.useHandleSiret()
+      const checkSiretHook = async (siret:string, field:string, updateRepository:any) => {
+        await checkSiret(siret)
+        if(!siretError.value)
+          updateRepository(siret, field);
+      }
+
+      //onUnmounted( useRepositoryHelper.cleanRepository(repository) )
+
+      return {
+        repositories,
+        id,
+        organizationProfile,
+        models: {Organization, ContactPoint, BankAccount, OrganizationAddressPostal},
+        datatableHeaders: getDataTablesHeaders(i18n),
+        rules: getRules(i18n),
+        siretError,
+        siretErrorMessage,
+        checkSiretHook,
+        panel: route.value.query.accordion ? 0 : 0
+      }
+    },
+  })
+
+  function getRules(i18n: any) {
+    return {
+      nameRules: [
+        (nameValue: string) => !!nameValue || i18n.t('required'),
+        (nameValue: string) => (nameValue || '').length <= 128 || i18n.t('name_length_rule')
+      ],
+      siretRule: [
+        (siretValue: string) => /^([0-9]{9}|[0-9]{14})$/.test(siretValue) || i18n.t('siret_error')
+      ]
+    }
+  }
+
+  function getDataTablesHeaders(i18n: any) {
+    return {
+      headersContactPoint: [
+        {text: i18n.t('email'), value: 'email'},
+        {text: i18n.t('telphone'), value: 'telphone'},
+        {text: i18n.t('mobilPhone'), value: 'mobilPhone'},
+        {text: i18n.t('actions'), value: 'actions', sortable: false},
+      ],
+      headersBankAccount: [
+        {text: i18n.t('bankName'), value: 'bankName'},
+        {text: i18n.t('iban'), value: 'iban'},
+        {text: i18n.t('bic'), value: 'bic'},
+        {text: i18n.t('actions'), value: 'actions', sortable: false},
+      ],
+      headersAddressPostal: [
+        {text: i18n.t('address_postal_type'), value: 'type'},
+        {text: i18n.t('address'), value: 'address'},
+        {text: i18n.t('actions'), value: 'actions', sortable: false},
+      ]
+    }
+  }
+
+  function getRepositories() {
+    return {
+      organizationRepository: useRepositoryHelper.getRepository(Organization),
+      contactPointRepository: useRepositoryHelper.getRepository(ContactPoint),
+      bankAccountRepository: useRepositoryHelper.getRepository(BankAccount),
+      addressRepository: useRepositoryHelper.getRepository(OrganizationAddressPostal)
+    }
+  }
+</script>
+
+<style scoped>
+  .v-icon.v-icon {
+    font-size: 14px;
+  }
+</style>

store/form.ts

@@ -0,0 +1,23 @@
+import {formState} from "~/types/interfaces";
+
+export const state = () => ({
+  dirty: false,
+  showConfirmToLeave: false,
+  goAfterLeave: null,
+})
+
+export const mutations = {
+  setDirty(state:formState, dirty:boolean){
+    state.dirty = dirty
+  },
+  setShowConfirmToLeave(state:formState, showConfirmToLeave:boolean){
+    state.showConfirmToLeave = showConfirmToLeave
+  },
+  setGoAfterLeave(state:formState, goAfterLeave:string){
+    state.goAfterLeave = goAfterLeave
+  },
+}
+
+export const actions = {
+
+}

store/index.js

@@ -1,4 +1,5 @@
 import VuexORM from '@vuex-orm/core'
+import {QUERY_TYPE} from "~/types/enums";
 
 const cookieparser = process.server ? require('cookieparser') : undefined
 
@@ -53,7 +54,11 @@ export const actions = {
    * @return {Promise<void>}
    */
   async updateProfile({dispatch, state}) {
-    const my_profile = await this.$http.$get(`/api/my_profile/${state.profile.access.accessId}`)
+    const my_profile = await this.app.context.$dataProvider.invoke({
+      type: QUERY_TYPE.DEFAULT,
+      url: 'my_profile',
+      id: state.profile.access.accessId
+    })
     dispatch('profile/access/setProfile', my_profile)
   },
 }

store/profile/access.ts

@@ -1,5 +1,5 @@
 import {$roleUtils} from '~/services/rights/roleUtils'
-import {AbilitiesType, accessState} from "~/types/types";
+import {AbilitiesType, accessState} from "~/types/interfaces";
 
 export const state = () => ({
   bearer: null,

store/profile/organization.ts

@@ -1,4 +1,4 @@
-import {organizationState} from "~/types/types";
+import {organizationState} from "~/types/interfaces";
 import * as _ from "lodash";
 
 export const state = () => ({