app_vue2/pages/parameters/communication.vue

<template>
  <LayoutContainer v-if="!fetchState.pending">
    <UiForm :id="id" :model="model" :query="query()">
      <template #form.input="{entry, updateRepository}">
        <v-expansion-panels  focusable multiple :value="[0, 1]">
          <!-- Site internet -->
          <UiExpansionPanel id="web_parameters" icon="fa-desktop">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="6">
                  <div>
                    <span>{{ $t('otherWebsite') }} : </span>
                    <span>{{ entry['otherWebsite'] }}</span>
                  </div>
                </v-col>

                <v-col cols="12" sm="6">
                  <div>
                    <span>{{ $t('subDomainHistorical') }} : </span>
                  </div>
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="newSubDomain" :data="entry['newSubDomain']" />
                </v-col>

                <v-col cols="12" sm="6" v-if="!organizationProfile.isCmf()">
                  <UiInputCheckbox field="desactivateOpentalentSiteWeb" :data="entry['desactivateOpentalentSiteWeb']" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="website" :data="entry['website']" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputAutocompleteWithAPI
                    field="publicationDirectors"
                    label="publicationDirectors"
                    :multiple="true"
                    chips
                    :remote-uri="entry['publicationDirectors']"
                    remote-url="api/access_people"
                    :item-text="['person.givenName', 'person.name']"
                    :searchFunction="accessSearch"
                    @update="updateRepository($event.map((id) => `/api/accesses/${id}`), 'publicationDirectors')"
                  />
                </v-col>

              </v-row>
            </v-container>
          </UiExpansionPanel>

          <!-- Sms -->
          <UiExpansionPanel id="sms" icon="fa-mobile" v-if="organizationProfile.hasModule(['Sms'])">
            <v-container fluid class="container">
              <v-row>

                <v-col cols="12" sm="6">
                  <UiInputText field="smsSenderName" :data="entry['smsSenderName']" @update="updateRepository" :rules="rules().smsSenderNameRules"  />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="usernameSMS" :data="entry['usernameSMS']" @update="updateRepository" />
                </v-col>

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

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

<script lang="ts">
import {computed, ComputedRef, defineComponent, reactive, ref, useContext} from '@nuxtjs/composition-api'
import { Organization } from '@/models/Organization/Organization'
import { repositoryHelper } from '~/services/store/repository'
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Parameters} from "~/models/Organization/Parameters";
import {Query} from "@vuex-orm/core";
import {$organizationProfile} from "~/services/profile/organizationProfile";
import ModelsUtils from "~/services/utils/modelsUtils";
import {useAccessesProvider} from "~/composables/data/useAccessesProvider";

export default defineComponent({
  name: 'parameters',
  setup () {
    const {store, $dataProvider, app: {i18n}} = useContext()
    const {getItemToEdit} = useDataUtils($dataProvider)
    const {getPhysicalByFullName: accessSearch} = useAccessesProvider($dataProvider)

    const organizationProfile = reactive($organizationProfile(store))

    const id = store.state.profile.organization.parametersId
    const {fetchState} = getItemToEdit(id, Parameters)

    const repository = repositoryHelper.getRepository(Parameters)
    const query: ComputedRef<Query> = computed(() => repository.query())

    return {
      query: () => query.value,
      rules: () => getRules(i18n),
      organizationProfile,
      id,
      fetchState,
      accessSearch,
      model: Parameters
    }
  }
})

function getRules (i18n: any) {
  return {
    smsSenderNameRules: [
      (smsSenderNameValue: string) => {
        const pattern = /^[a-zA-z\d]+$/
        return pattern.test(smsSenderNameValue) || i18n.t('smsSenderName_error')
      }
    ]
  }
}
</script>