@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,22 +1,22 @@
 <template>
   <div
+    v-if="!value || init"
     class="default-multiselect-width"
     :style="{ width: width }"
     :class="{ 'multiselect-hide-arrow': !displayArrow }"
-    v-if="!value || init"
   >
     <label
       for="organisationChooser"
       class="d-inline"
       aria-label="select productor"
-    ></label>
-    <Multiselect
-      v-model="organisation"
+    />
+    <VueMultiselect
       id="organisationChooser"
+      ref="multiselectRef"
+      v-model="organisation"
       label="name"
       track-by="organisationId"
       :placeholder="$t('Type string to filter by organisation')"
-      ref="multiselectRef"
       :options="organisations"
       :multiple="false"
       :searchable="true"
@@ -29,57 +29,64 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
+      :class="{ 'light-multiselect': stats }"
       @search-change="onSearchOrganisation"
       @open="onOpen"
       @close="onClose"
-      @select="onEmissionSelected"
-      :class="{ 'light-multiselect': stats }"
+      @select="onOrganisationSelected"
     >
-      <template v-slot:clear="props" >
+      <template #clear="{ props }">
         <div
+          v-if="organisation"
           class="multiselect__clear"
-          v-if="organisation.length"
           @mousedown.prevent.stop="clearAll(props.search)"
-        ></div>
+        />
       </template>
-      <template v-slot:singleLabel="props" >
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <img
-            v-if="!light"
+            v-if="!light &&!stats"
             class="option__image"
-            :src="props.option.imageUrl"
-            :alt="props.option.name"
-          />
-          <span class="option__title" :class="{ descriptionText: light }">
-            {{ props.option.name }}
+            :src="option.imageUrl"
+            :alt="option.name"
+          >
+          <span
+            class="option__title"
+            :class="{ descriptionText: light }"
+          >
+            {{ option.name }}
           </span>
         </div>
       </template>
-      <template v-slot:option="props" >
+      <template #option="{ option }">
         <div
           class="multiselect-octopus-proposition"
           :data-selenium="
-            'organisation-chooser-' + seleniumFormat(props.option.name)
+            'organisation-chooser-' + seleniumFormat(option.name)
           "
         >
           <img
-            v-if="!light"
+            v-if="!light &&!stats"
             class="option__image"
-            :src="props.option.imageUrl"
-            :alt="props.option.name"
-          />
-          <span class="option__title" :class="{ descriptionText: light }">
-            {{ props.option.name }}
+            :src="option.imageUrl"
+            :alt="option.name"
+          >
+          <span
+            class="option__title"
+            :class="{ descriptionText: light }"
+          >
+            {{ 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.',
@@ -88,32 +95,40 @@
           }}
         </div>
       </template>
-      <template v-slot:noOptions>{{ $t('List is empty') }}</template>
-      <template v-slot:caret>
-      <div class="position-relative" v-if="!light">
-        <span
-          class="saooti-arrow_down octopus-arrow-down-2"
-          :class="{ 'octopus-arrow-down-top': stats }"
-        ></span>
-      </div>
+      <template #noOptions="">
+        {{ $t('List is empty') }}
       </template>
-    </Multiselect>
+      <template #caret="">
+        <div
+          v-if="!light"
+          class="position-relative"
+        >
+          <span
+            class="saooti-arrow_down octopus-arrow-down-2"
+            :class="{ 'octopus-arrow-down-top': stats }"
+          />
+        </div>
+      </template>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 import { selenium } from '../../mixins/functions';
-import Multiselect from 'vue-multiselect';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
 const octopusApi = require('@saooti/octopus-api');
 import { state } from '../../../store/paramStore';
+import { Organisation } from '@/store/class/organisation';
 
 const ELEMENTS_COUNT = 50;
-const DEFAULT_ORGANISATION_ID = 0;
+const DEFAULT_ORGANISATION_ID = "";
 const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.png';
 
-const getDefaultOrganistion = (defaultName: any) => {
+const getDefaultOrganistion = (defaultName: string) => {
+  if(''===defaultName){
+    return undefined;
+  }
   return {
     name: defaultName,
     id: DEFAULT_ORGANISATION_ID,
@@ -124,59 +139,39 @@ const getDefaultOrganistion = (defaultName: any) => {
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
-  },
-
-  async created() {
-    if (
-      this.authenticated &&
-      undefined === this.$store.state.organisation.imageUrl
-    ) {
-      const data = await octopusApi.fetchOrganisation(this.organisationId);
-      this.myImage = data.imageUrl;
-    }
-    if (this.value) {
-      this.fetchOrganisation();
-    }
+    VueMultiselect,
   },
-
+  mixins:[selenium],
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: false },
-    stats: { default: false },
-    displayArrow: { default: true },
-    value: { default: null },
-    light: { default: false },
-    reset: { default: false },
-    all: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String},
+    stats: { default: false, type:  Boolean},
+    displayArrow: { default: true, type: Boolean},
+    value: { default: undefined, type: Object as ()=>Organisation},
+    light: { default: false, type:  Boolean},
+    reset: { default: false, type:  Boolean},
+    all: { default: false, type:  Boolean},
   },
   emits: ['selected'],
-
-  mixins: [selenium],
-
   data() {
-    let _return:any = {
-      organisation: '',
-      organisations: [] as any,
-      remainingElements: 0,
-      isLoading: false,
-      init: false,
-      myImage: state.organisation.imageUrl,
+    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
     };
-    if (this.defaultanswer) {
-      _return['organisation'] = getDefaultOrganistion(this.defaultanswer);
-    }
-    return _return;
   },
-
+  
   computed: {
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    myOrganisation():any {
+    myOrganisation(): Organisation|undefined {
       if (!this.authenticated) return undefined;
       return {
         id: this.organisationId,
@@ -189,31 +184,51 @@ export default defineComponent({
       };
     },
   },
+  watch: {
+    value(): void {
+      if (!this.init || this.value) {
+        this.fetchOrganisation();
+      }
+    },
+    reset(): void {
+      this.organisation = this.defaultanswer
+        ? getDefaultOrganistion(this.defaultanswer)
+        : undefined;
+    },
+  },
 
+  async created() {
+    if (
+      this.authenticated &&
+      undefined === this.$store.state.organisation.imageUrl
+    ) {
+      const data = await octopusApi.fetchOrganisation(this.organisationId);
+      this.myImage = data.imageUrl;
+    }
+    if (this.value) {
+      this.fetchOrganisation();
+    }
+  },
   methods: {
-    onOpen() {
-      this.$refs.multiselectRef.$refs.search.setAttribute(
+    onOpen(): void {
+      (this.$refs.multiselectRef as any).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
       this.clearAll();
       this.onSearchOrganisation();
     },
-
-    onClose() {
+    onClose(): void {
       if (this.organisation) return;
-
       this.organisation = this.defaultanswer
         ? getDefaultOrganistion(this.defaultanswer)
-        : '';
+        : undefined;
       this.$emit('selected', this.organisation);
     },
-
-    onEmissionSelected(organisation: any) {
+    onOrganisationSelected(organisation: Organisation|undefined): void {
       this.$emit('selected', organisation);
     },
-
-    async onSearchOrganisation(query: undefined) {
+    async onSearchOrganisation(query?: string): Promise<void> {
       this.isLoading = true;
       const response = await octopusApi.fetchOrganisations({
         query: query,
@@ -234,27 +249,26 @@ export default defineComponent({
           orga = orga.concat(other.result);
         }
       }
-
-      let notNull = orga.filter((o: null) => {
+      const notNull = orga.filter((o: Organisation|null) => {
         return null !== o;
       });
-
       if (this.defaultanswer) {
-        this.organisations = [getDefaultOrganistion(this.defaultanswer)].concat(
-          notNull
-        );
+        const defaultOrganisation = getDefaultOrganistion(this.defaultanswer);
+        if(defaultOrganisation){
+          this.organisations =[defaultOrganisation].concat(notNull);
+        }
       } else {
         this.organisations = notNull;
       }
       if (this.myOrganisation) {
         if (undefined === query) {
-          this.organisations = this.organisations.filter((obj: { id: any; }) => {
+          this.organisations = this.organisations.filter((obj: Organisation) => {
             return obj.id !== this.organisationId;
           });
           this.organisations.splice(1, 0, this.myOrganisation);
         } else {
-          let foundIndex = this.organisations.findIndex(
-            (            obj: { id: any; }) => obj.id === this.organisationId
+          const foundIndex = this.organisations.findIndex(
+            (obj: Organisation) => obj.id === this.organisationId
           );
           if (foundIndex) {
             this.organisations[foundIndex] = this.myOrganisation;
@@ -264,8 +278,7 @@ export default defineComponent({
       this.isLoading = false;
       this.remainingElements = Math.max(0, response.count - orga.length);
     },
-
-    async fetchOrganisation() {
+    async fetchOrganisation(): Promise<void> {
       if (0 === this.organisations.length) {
         this.onSearchOrganisation();
       }
@@ -273,24 +286,12 @@ export default defineComponent({
       this.organisation = data;
       this.init = true;
     },
-
-    clearAll() {
-      this.organisation = '';
+    clearAll(): void {
+      this.organisation = undefined;
       this.organisations.length = 0;
     },
   },
-
-  watch: {
-    value(newVal) {
-      if (!this.init || newVal) {
-        this.fetchOrganisation();
-      }
-    },
-    reset() {
-      this.organisation = this.defaultanswer
-        ? getDefaultOrganistion(this.defaultanswer)
-        : '';
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,92 +1,85 @@
 <template>
   <div
+    v-if="(!value || init) && organisation"
     class="default-multiselect-width"
     :style="{ width: width }"
-    v-if="(!value || init) && '' !== organisation"
   >
     <select
       :id="'organisation_chooser_light' + page"
-      class="basic-select mb-0 c-hand"
       v-model="actual"
+      class="basic-select mb-0 c-hand"
       @change="onOrganisationSelected"
     >
-      <option :value="organisation.id">{{ organisation.name }}</option>
-      <option :value="-1">{{ $t('No organisation filter') }}</option>
+      <option :value="organisation.id">
+        {{ organisation.name }}
+      </option>
+      <option :value="-1">
+        {{ $t('No organisation filter') }}
+      </option>
     </select>
     <label
       :for="'organisation_chooser_light' + page"
       class="d-inline"
       :aria-label="$t('select productor')"
-    ></label>
+    />
   </div>
 </template>
 
-<style lang="scss">
-.default-multiselect-width .basic-select {
-  width: auto;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  text-indent: 1px;
-  text-overflow: '';
-  font-size: 1rem;
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 
+import { Organisation } from '@/store/class/organisation';
 import { defineComponent } from 'vue'
 export default defineComponent({
-  components: {},
-
-  created() {
-    if (this.value) {
-      this.fetchOrganisation();
-    }
-  },
-
   props: {
-    width: { default: '100%' },
-    value: { default: null },
-    reset: { default: false },
-    page: { default: '' },
+    width: { default: '100%', type: String},
+    value: { default: undefined, type: String},
+    reset: { default: false, type: Boolean},
+    page: { default: '', type: String},
   },
   emits: ['selected'],
 
   data() {
-    let _return = {
-      actual: -1,
-      organisation: '',
-      init: false,
+    return  {
+      actual: -1 as number,
+      organisation: undefined as Organisation|undefined,
+      init: false as boolean,
     };
-    return _return;
+  },
+
+  watch: {
+    value(): void {
+      if (!this.init || this.value) {
+        this.fetchOrganisation();
+      }
+    },
+    reset(): void {
+      this.actual = -1;
+    },
+  },
+
+  created() {
+    if (this.value) {
+      this.fetchOrganisation();
+    }
   },
 
   methods: {
-    onOrganisationSelected() {
+    onOrganisationSelected(): void{
       if (-1 === this.actual) {
         this.$emit('selected', undefined);
       } else {
         this.$emit('selected', this.organisation);
       }
     },
-    async fetchOrganisation() {
+    async fetchOrganisation(): Promise<void> {
       const data = await octopusApi.fetchOrganisation(this.value);
       this.organisation = data;
       this.actual = data.id;
       this.init = true;
     },
   },
-
-  watch: {
-    value(newVal) {
-      if (!this.init || newVal) {
-        this.fetchOrganisation();
-      }
-    },
-    reset() {
-      this.actual = -1;
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>