@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/display/emission/EmissionChooser.vue

@@ -1,21 +1,21 @@
 <template>
   <div
     class="default-multiselect-width"
-    :class="{ 'multiselect-hide-arrow': !displayArrow }"
     :style="{ width: width }"
   >
     <label
       for="emissionChooser"
       class="d-inline"
-      aria-label="select emission"
-    ></label>
-    <Multiselect
-      v-model="emission"
+      title="select emission"
+    />
+    <VueMultiselect
       id="emissionChooser"
+      ref="multiselectRef"
+      v-model="emission"
       label="name"
       track-by="emissionId"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by emission')"
-      ref="multiselectRef"
       :options="emissions"
       :multiple="false"
       :searchable="true"
@@ -30,33 +30,33 @@
       :show-labels="false"
       @search-change="onSearchEmission"
       @open="onOpen"
-      @close="onClose"
       @select="onEmissionSelected"
     >
-      <template v-slot:clear="props" >
+      <template #clear="{ props }">
         <div
+          v-if="emission"
           class="multiselect__clear"
-          v-if="emission.length"
           @mousedown.prevent.stop="clearAll(props.search)"
-        ></div>
+        />
       </template>
-      <template v-slot:singleLabel="props" >
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:option="props" >
+      <template #option="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:noResult>
-      <span>{{
-        $t('No elements found. Consider changing the search query.')
-      }}</span>
+      <template #noResult="">
+        <span>{{ $t('No elements found. Consider changing the search query.') }}</span>
       </template>
-      <template v-slot:afterList>
-        <div v-if="remainingElements" class="multiselect-remaining-elements">
+      <template #afterList="">
+        <div
+          v-if="remainingElements"
+          class="multiselect-remaining-elements"
+        >
           {{
             $t(
               'Count more elements matched your query, please make a more specific search.',
@@ -65,143 +65,123 @@
           }}
         </div>
       </template>
-      <template v-slot:noOptions>{{ $t('List is empty') }}</template>
-      <template v-slot:caret>
+      <template #noOptions="">
+        {{ $t('List is empty') }}
+      </template>
+      <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
-          ></span>
+            class="saooti-down octopus-arrow-down"
+          />
         </div>
       </template>
-    </Multiselect>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss">
-.default-multiselect-width {
-  width: 100%;
-}
-</style>
 <script lang="ts">
-import Multiselect from 'vue-multiselect';
-const octopusApi = require('@saooti/octopus-api');
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
+import octopusApi from '@saooti/octopus-api';
 
 const ELEMENTS_COUNT = 50;
 const DEFAULT_EMISSION_ID = 0;
 
-const getDefaultEmission = (defaultName: any) => {
+const getDefaultEmission = (defaultName: string): Emission|undefined => {
+  if(''=== defaultName){
+    return undefined;
+  }
   return {
     name: defaultName,
-    id: DEFAULT_EMISSION_ID,
+    emissionId: DEFAULT_EMISSION_ID,
+    imageUrl:'',
+    description:'',
+    monetisable:'UNDEFINED',
+    orga :{ 
+      id:'',
+      imageUrl:'',
+      name:''
+    },
+    rubriqueIds:[],
   };
 };
 
-import { defineComponent, ref } from 'vue'
+import { Emission } from '@/store/class/general/emission';
+import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect
   },
 
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: undefined as any },
-    organisationId: { default: undefined as any },
-    emissionChosen: { default: undefined as any },
-    displayArrow: { default: true },
-    distributedBy: { default: undefined as any },
-    organisationDistributedBy: { default: undefined as any },
-    reset: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    organisationId: { default: undefined, type: String},
+    emissionChosen: { default: undefined, type: Object as ()=>Emission},
+    distributedBy: { default: undefined, type: String},
+    organisationDistributedBy: { default: undefined, type: String},
+    reset: { default: false, type: Boolean },
   },
 
   emits: ['selected'],
 
   data() {
-    let _return:any = {
-      emission: '',
-      emissions: [] as any,
-      remainingElements: 0,
-      isLoading: false,
+    return{
+      emission: getDefaultEmission(this.defaultanswer) as Emission | undefined,
+      emissions: [] as Array<Emission>,
+      remainingElements: 0 as number,
+      isLoading: false as boolean,
     };
-    if (this.defaultanswer) {
-      _return['emission'] = getDefaultEmission(this.defaultanswer);
-    }
-    return _return;
   },
-
-  setup() {
-    const multiselectRef : any = ref(null);
-    return {
-      multiselectRef,
-    };
+  watch: {
+    emissionChosen: {
+      deep: true,
+      handler(){
+        this.emission = this.emissionChosen;
+      }
+    },
+    reset(): void {
+      this.emission = getDefaultEmission(this.defaultanswer);
+    },
   },
 
-  methods: {
-    onOpen() {
-      this.multiselectRef.$refs.search.setAttribute(
+   methods: {
+    onOpen(): void {
+      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      this.clearAll();
       this.onSearchEmission();
     },
-
-    onClose() {
-      if (this.emission) return;
-      this.emission = this.defaultanswer
-        ? getDefaultEmission(this.defaultanswer)
-        : '';
-      this.$emit('selected', this.emission);
-    },
-
-    onEmissionSelected(emission: any) {
+    onEmissionSelected(emission: Emission): void {
       this.$emit('selected', emission);
     },
-
-    async onSearchEmission(query: undefined) {
+    async onSearchEmission(query?: string): Promise<void> {
       this.isLoading = true;
-      let standardParam:any = {
+      const response = await octopusApi.fetchDataWithParams<{count: number;result:Array<Emission>;sort: string;}>(0, 'emission/search',{
         query: query,
         first: 0,
         size: ELEMENTS_COUNT,
-      };
-      if (undefined !== this.distributedBy) {
-        standardParam = { ...standardParam, distributedBy: this.distributedBy };
-      } else if (undefined !== this.organisationDistributedBy) {
-        standardParam = {
-          ...standardParam,
-          distributedBy: this.organisationDistributedBy,
-          organisationId: this.organisationId,
-        };
-      } else {
-        standardParam = {
-          ...standardParam,
-          organisationId: this.organisationId,
-        };
-      }
-      const response = await octopusApi.fetchEmissions(standardParam);
+        distributedBy: this.distributedBy??this.organisationDistributedBy,
+        organisationId:this.distributedBy? undefined: this.organisationId
+      }, true);
       if (this.defaultanswer) {
-        this.emissions = [getDefaultEmission(this.defaultanswer)].concat(
-          response.result
-        );
+        const emissionDefault = getDefaultEmission(this.defaultanswer);
+        if(emissionDefault){
+          this.emissions = [emissionDefault].concat(
+            response.result
+          );
+        }
       } else {
         this.emissions = response.result.concat();
       }
       this.isLoading = false;
       this.remainingElements = Math.max(0, response.count - ELEMENTS_COUNT);
     },
-
-    clearAll() {
-      this.emission = '';
+    clearAll(): void {
+      this.emission = undefined;
       this.emissions.length = 0;
     },
   },
-  watch: {
-    emissionChosen(newVal) {
-      this.emission = getDefaultEmission(newVal);
-    },
-    reset() {
-      this.emission = getDefaultEmission(this.defaultanswer);
-    },
-  },
-});
-</script>
+})
+</script>