@saooti/octopus-sdk 36.0.5 → 36.0.6

package/src/components/display/organisation/OrganisationChooser.vue

@@ -1,264 +1,136 @@
 <template>
-  <div
-    v-if="!value || init"
-    class="default-multiselect-width"
-    :style="{ width: width }"
+  <ClassicMultiselect
+    v-if="!orgaIdSelected || initLoaded"
+    id="organisation-chooser"
+    ref="selectOrganisation"
+    option-label="name"
+    :label="$t('select productor')"
+    :max-element="maxElement"
+    :width="width"
+    :in-modal="inModal"
+    :option-chosen="organisationChosen"
+    :option-custom-templating="isImage"
+    @onSearch="onSearchOrganisation"
+    @selected="$emit('selected', $event)"
   >
-    <label
-      for="organisationChooser"
-      class="d-inline"
-      title="select productor"
-    />
-    <VueMultiselect
-      id="organisationChooser"
-      ref="multiselectRef"
-      v-model="organisation"
-      label="name"
-      track-by="id"
-      :aria-expanded="false"
-      :placeholder="$t('Type string to filter by organisation')"
-      :options="organisations"
-      :multiple="false"
-      :searchable="true"
-      :loading="isLoading"
-      :internal-search="false"
-      :clear-on-select="false"
-      :close-on-select="true"
-      :options-limit="200"
-      :max-height="600"
-      :show-no-results="true"
-      :hide-selected="true"
-      :show-labels="false"
-      :class="{ 'multiselect-transparent': light }"
-      @search-change="onSearchOrganisation"
-      @open="onOpen"
-      @select="onOrganisationSelected"
+    <template
+      v-if="isImage"
+      #optionTemplating="{option}"
     >
-      <template #clear="{ props }">
-        <div
-          v-if="organisation"
-          class="multiselect__clear"
-          @mousedown.prevent.stop="clearAll(props.search)"
-        />
-      </template>
-      <template #singleLabel="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <img
-            v-if="!light"
-            v-lazy="proxyImageUrl(option.imageUrl, '32')"
-            width="32"
-            height="32"
-            class="option__image"
-            :alt="option.name"
-          >
-          <span
-            class="option__title"
-          >
-            {{ option.name }}
-          </span>
-        </div>
-      </template>
-      <template #option="{ option }">
-        <div
-          class="multiselect-octopus-proposition"
-          :data-selenium="
-            'organisation-chooser-' + seleniumFormat(option.name)
-          "
+      <div
+        class="d-flex align-items-center"
+        :data-selenium="'organisation-chooser-' + seleniumFormat(option.name)"
+      >
+        <img
+          v-lazy="proxyImageUrl(option.imageUrl, '32')"
+          width="32"
+          height="32"
+          class="me-2"
+          :alt="option.name"
         >
-          <img
-            v-if="!light"
-            v-lazy="proxyImageUrl(option.imageUrl, '32')"
-            width="32"
-            height="32"
-            class="option__image"
-            :alt="option.name"
-          >
-          <span
-            class="option__title"
-          >
-            {{ option.name }}
-          </span>
-        </div>
-      </template>
-      <template #noResult="">
-        <span>{{ $t('No elements found. Consider changing the search query.') }}</span>
-      </template>
-      <template #afterList="">
-        <div
-          v-if="remainingElements"
-          class="multiselect-remaining-elements"
-        >
-          {{
-            $t(
-              'Count more elements matched your query, please make a more specific search.',
-              { count: remainingElements }
-            )
-          }}
-        </div>
-      </template>
-      <template #noOptions="">
-        {{ $t('List is empty') }}
-      </template>
-      <template #caret="">
-        <div
-          class="position-relative"
-        >
-          <span
-            class="saooti-down octopus-arrow-down-absolute"
-          />
-        </div>
-      </template>
-    </VueMultiselect>
-  </div>
+        <span>
+          {{ option.name }}
+        </span>
+      </div>
+    </template>
+  </ClassicMultiselect>
 </template>
 
 <script lang="ts">
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import imageProxy from '../../mixins/imageProxy';
 import selenium from '../../mixins/selenium';
 import { orgaComputed } from '../../mixins/orgaComputed';
-//@ts-ignore
-import VueMultiselect from 'vue-multiselect';
 import octopusApi from '@saooti/octopus-api';
-import { state } from '../../../stores/ParamSdkStore';
-import { Organisation } from '@/stores/class/general/organisation';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-const ELEMENTS_COUNT = 50;
-const DEFAULT_ORGANISATION_ID = "";
-const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.webp';
-
-const getDefaultOrganistion = (defaultName: string) => {
-  if(''===defaultName){
-    return undefined;
-  }
-  return {
-    name: defaultName,
-    id: DEFAULT_ORGANISATION_ID,
-    imageUrl: DEFAULT_ORGANISATION_IMAGE,
-  };
-};
-
+import ClassicMultiselect from '../../form/ClassicMultiselect.vue';
 import { defineComponent } from 'vue';
+import { emptyOrgaData, Organisation } from '@/stores/class/general/organisation';
 export default defineComponent({
   components: {
-    VueMultiselect,
+    ClassicMultiselect,
   },
   mixins:[selenium, orgaComputed, imageProxy],
   props: {
-    width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String},
-    value: { default: undefined, type: String},
-    light: { default: false, type:  Boolean},
+    orgaIdSelected: { default: undefined, type: String},
     reset: { default: false, type:  Boolean},
+    width: { default: '100%', type: String },
+    isImage: { default: true, type: Boolean },
+    inModal:{default: false, type: Boolean},
   },
   emits: ['selected'],
   data() {
     return {
-      organisations: [] as Array<Organisation>,
-      remainingElements: 0 as number,
-      isLoading: false as boolean,
-      init: false as boolean,
-      myImage: state.organisation.imageUrl as string,
-      organisation: getDefaultOrganistion(this.defaultanswer) as Organisation | undefined
+      maxElement: 50 as number,
+      organisationChosen: undefined as Organisation | undefined,
+      initLoaded: false as boolean
     };
   },
   
   computed: {
     ...mapState(useAuthStore, ['authOrganisation']),
+    getDefaultOrganisation(): Organisation|undefined{
+      if(''===this.defaultanswer){
+        return undefined;
+      }
+      return emptyOrgaData(this.defaultanswer);
+    },
     myOrganisation(): Organisation|undefined {
       if (!this.authenticated) return undefined;
-      return {
-        id: this.myOrganisationId??"",
-        imageUrl: this.myImage,
-        name: `${this.$t('Edit my organisation')} (${state.organisation.name})`
-      };
-    },
+      return {...this.authOrganisation, ...{name: `${this.$t('Edit my organisation')} (${this.authOrganisation.name})`}};
+    }
   },
   watch: {
-    value(): void {
-      if (!this.init || this.value) {
-        this.fetchOrganisation();
+    orgaIdSelected: {
+      immediate:true,
+      handler(){
+        if (!this.initLoaded && this.orgaIdSelected) {
+          this.fetchOrganisation();
+        }
       }
     },
     reset(): void {
-      this.organisation = this.defaultanswer
-        ? getDefaultOrganistion(this.defaultanswer)
-        : undefined;
+      this.organisationChosen = this.getDefaultOrganisation;
     },
   },
 
   async created() {
-    if (
-      this.authenticated &&
-      (undefined === this.authOrganisation.imageUrl ||'' === this.authOrganisation.imageUrl)
-    ) {
-      const data = await octopusApi.fetchData<Organisation>(0,`organisation/${this.myOrganisationId ?this.myOrganisationId:""}`);
-      this.myImage = data.imageUrl;
-    }
-    if (this.value) {
-      this.fetchOrganisation();
-    }
+    this.organisationChosen = this.getDefaultOrganisation;
   },
   methods: {
-    onOpen(): void {
-      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
-        'autocomplete',
-        'off'
-      );
-      this.onSearchOrganisation();
-    },
-    onOrganisationSelected(organisation: Organisation|undefined): void {
-      this.$emit('selected', organisation);
-    },
     async onSearchOrganisation(query?: string): Promise<void> {
-      this.isLoading = true;
-      const response = await octopusApi.fetchDataWithParams<{count: number;result: Array<Organisation>;sort: string;}>(0, 'organisation/search',{
+      const response = await octopusApi.fetchDataWithParams<{count: number;result:Array<Organisation>;sort: string;}>(0, 'organisation/search',{
         query: query,
         first: 0,
-        size: ELEMENTS_COUNT,
+        size: this.maxElement
       });
-      const orga = response.result;
-      const notNull = orga.filter((o: Organisation|null) => {
+      let notNullOrga = response.result.filter((o: Organisation|null) => {
         return null !== o;
       });
-      if (this.defaultanswer) {
-        const defaultOrganisation = getDefaultOrganistion(this.defaultanswer);
-        if(defaultOrganisation){
-          this.organisations =[defaultOrganisation].concat(notNull);
-        }
-      } else {
-        this.organisations = notNull;
+      if (this.getDefaultOrganisation) {
+        notNullOrga.unshift(this.getDefaultOrganisation);
       }
       if (this.myOrganisation) {
         if (undefined === query) {
-          this.organisations = this.organisations.filter((obj: Organisation) => {
+          notNullOrga = notNullOrga.filter((obj: Organisation) => {
             return obj.id !== this.myOrganisationId;
           });
-          this.organisations.splice(1, 0, this.myOrganisation);
+          notNullOrga.splice(1, 0, this.myOrganisation);
         } else {
-          const foundIndex = this.organisations.findIndex(
+          const foundIndex = notNullOrga.findIndex(
             (obj: Organisation) => obj.id === this.myOrganisationId
           );
           if (foundIndex) {
-            this.organisations[foundIndex] = this.myOrganisation;
+            notNullOrga[foundIndex] = this.myOrganisation;
           }
         }
       }
-      this.isLoading = false;
-      this.remainingElements = Math.max(0, response.count - orga.length);
+      (this.$refs.selectOrganisation as InstanceType<typeof ClassicMultiselect>).afterSearch(notNullOrga,response.count);
     },
     async fetchOrganisation(): Promise<void> {
-      if (0 === this.organisations.length) {
-        this.onSearchOrganisation();
-      }
-      if(!this.value){return;}
-      const data = await octopusApi.fetchData<Organisation>(0,`organisation/${this.value}`);
-      this.organisation = data;
-      this.init = true;
-    },
-    clearAll(): void {
-      this.organisation = undefined;
-      this.organisations.length = 0;
+      this.organisationChosen = await octopusApi.fetchData<Organisation>(0,`organisation/${this.orgaIdSelected}`);
+      this.initLoaded = true;
     },
   },
 })

package/src/components/display/podcasts/PodcastFilterList.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="py-3">
-    <h2 class="big-h2 mb-2">{{ titleFilter }}</h2>
+    <h2 class="big-h2 mb-2">
+      {{ titleFilter }}
+    </h2>
     <div class="d-flex align-items-center flex-wrap mb-2">
       <div
-        class="d-flex align-items-center flex-grow-1 me-3"
+        class="w-50-responsive pe-3"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
@@ -12,7 +14,7 @@
       </div>
       <ClassicSearch
         v-model:textInit="searchPattern"
-        class="flex-small-grow"
+        class="w-50-responsive"
         id-search="podcast-filter-search"
         :label="$t('Search')"
       />

package/src/components/display/podcasts/PodcastImage.vue

@@ -59,7 +59,9 @@
           <span class="paddle2" />
           <span class="paddle3" />
         </div>
-        <div class="ms-2">{{durationString}}</div>
+        <div class="ms-2">
+          {{ durationString }}
+        </div>
       </div>
       <div
         v-else

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -29,7 +29,7 @@
             {{ date }}
           </div>
           <div>
-            {{ duration}}
+            {{ duration }}
           </div>
           <div
             v-if="isLiveReady"
@@ -50,7 +50,10 @@
         />
         <!-- eslint-enable -->
         <div class="my-3">
-          <ParticipantDescription class="mb-1" :participants="podcast.animators" />
+          <ParticipantDescription
+            class="mb-1"
+            :participants="podcast.animators"
+          />
           <div class="mb-1">
             {{ $t('Emission') + ' : ' }}
             <router-link
@@ -65,7 +68,10 @@
               {{ podcast.emission.name }}
             </router-link>
           </div>
-          <div class="mb-1" v-if="!isPodcastmaker">
+          <div
+            v-if="!isPodcastmaker"
+            class="mb-1"
+          >
             {{ $t('Producted by : ') }}
             <router-link
               :to="{
@@ -79,10 +85,16 @@
               {{ podcast.organisation.name }}
             </router-link>
           </div>
-          <div class="mb-1" v-if="''!==photoCredit">
+          <div
+            v-if="''!==photoCredit"
+            class="mb-1"
+          >
             {{ $t('Photo credits') + " : "+ photoCredit }}
           </div>
-          <div class="mb-1" v-if="''!==audioCredit">
+          <div
+            v-if="''!==audioCredit"
+            class="mb-1"
+          >
             {{ $t('Audio credits') + " : "+ audioCredit }}
           </div>
           <a

package/src/components/display/podcasts/TagList.vue

@@ -30,8 +30,8 @@
         v-if="isOuestFranceTag(tag)"
         :target="'tag-list-from-podcast-page'+index"
         :content="tag.substring(4,tag.length)"
-        relativeClass="page-element"
-        :isFixed="true"
+        relative-class="page-element"
+        :is-fixed="true"
       />
     </div>
   </div>