app_vue2/pages/organization/index.vue

<template>
  <LayoutContainer>

    <UiForm :model="models.Organization" :id="id" :query="repositories.organizationRepository.query()">
      <template v-slot:form.input="{entry, updateRepository}">

        <v-expansion-panels :value="panel" focusable accordion >

          <!-- Description -->
          <UiExpansionPanel id="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 id="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 id="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 id="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 id="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 id="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()" id="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 id="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 id="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 {UseChecker} from "~/use/form/useChecker";
  import {UseNavigationHelpers} from "~/use/form/useNavigationHelpers";

  export default defineComponent({
    name: 'organization_parent',
    setup() {
      const {store, app: {i18n}} = useContext()
      const organizationProfile = $organizationProfile(store)
      const id = store.state.profile.organization.id;

      const repositories = getRepositories()

      const {siretError, siretErrorMessage, checkSiret} = UseChecker.useHandleSiret()
      const checkSiretHook = async (siret:string, field:string, updateRepository:any) => {
        await checkSiret(siret)
        if(!siretError.value)
          updateRepository(siret, field);
      }

      const {panel} = UseNavigationHelpers.expansionPanels()

      return {
        repositories,
        id,
        organizationProfile,
        models: {Organization, ContactPoint, BankAccount, OrganizationAddressPostal},
        datatableHeaders: getDataTablesHeaders(i18n),
        rules: getRules(i18n),
        siretError,
        siretErrorMessage,
        checkSiretHook,
        panel
      }
    },
  })

  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>