@saooti/octopus-sdk 36.0.5 → 36.0.7

package/src/assets/multiselect.scss

@@ -1,518 +0,0 @@
-/* Added styles */
-.octopus-app{
-
-    .default-multiselect-width {
-        width: auto;
-        font-size: 1rem;
-    }
-    .multiselect-transparent{
-        .multiselect__tags, .multiselect__input, .multiselect__single{
-            background: transparent !important;
-        }
-        .multiselect__tags-wrap{
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .multiselect__tags{
-            border: 0;
-            padding-left: 0;
-            padding-top: 0;
-            display: flex;
-            align-items: center;
-        }
-        .multiselect__tag{
-            margin-top: 5px;
-            border: 1px gray solid;
-        }
-    }
-
-    .multiselect-octopus-proposition{
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        .option__image {
-            height: 32px;
-            width: 32px;
-            border-radius: 50px;
-            margin: 0 0.5rem 0 0;
-        }
-        .option__title {
-            padding-left: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    .multiselect-remaining-elements {
-        text-align: center;
-        font-weight: 500;
-        font-size: 0.65rem;
-        margin: 0.2rem;
-    } 
-    .octopus-arrow-down-absolute
-    {
-        position: absolute;
-        right: 10px;
-        top: 0.7rem;
-        cursor: pointer;
-    }
-
-
-    /************************************************************************/
-
-
-    fieldset[disabled] .multiselect {
-        pointer-events: none;
-    }
-
-    .multiselect__spinner {
-        position: absolute;
-        right: 1px;
-        top: 1px;
-        width: 48px;
-        height: 35px;
-        display: block;
-    }
-
-    .multiselect__spinner:after,
-    .multiselect__spinner:before {
-        position: absolute;
-        content: "";
-        top: 50%;
-        left: 50%;
-        margin: -8px 0 0 -8px;
-        width: 16px;
-        height: 16px;
-        border-radius: 100%;
-        border: 2px solid transparent;
-        border-top-color: #000000;
-        box-shadow: 0 0 0 1px transparent;
-    }
-
-    .multiselect__spinner:before {
-        animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-        animation-iteration-count: infinite;
-    }
-
-    .multiselect__spinner:after {
-        animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-        animation-iteration-count: infinite;
-    }
-
-    .multiselect__loading-enter-active,
-    .multiselect__loading-leave-active {
-        transition: opacity 0.4s ease-in-out;
-        opacity: 1;
-    }
-
-    .multiselect__loading-enter,
-    .multiselect__loading-leave-active {
-        opacity: 0;
-    }
-
-    .multiselect,
-    .multiselect__input,
-    .multiselect__single {
-        font-family: inherit;
-        font-size: 16px;
-        -ms-touch-action: manipulation;
-        touch-action: manipulation;
-    }
-
-    .multiselect {
-        box-sizing: content-box;
-        display: block;
-        position: relative;
-        min-height: 40px;
-        text-align: left;
-        color: #35495e;
-    }
-
-    .multiselect-white .multiselect{
-        color: white !important;
-    }
-
-
-
-    .multiselect * {
-        box-sizing: border-box;
-    }
-
-    .multiselect--disabled {
-        background: #ededed;
-        pointer-events: none;
-        opacity: 0.6;
-    }
-
-    .multiselect--active {
-        z-index: 50;
-    }
-
-    .multiselect--active .multiselect__select {
-        transform: rotate(180deg);
-    }
-
-    .multiselect__input,
-    .multiselect__single {
-        position: relative;
-        display: inline-block;
-        min-height: 20px;
-        line-height: 28px;
-        border: none;
-        border-radius: $octopus-borderradius;
-        padding: 0 0 0 5px;
-        width: 100%;
-        transition: border 0.1s ease;
-        box-sizing: border-box;
-        margin-bottom: 8px;
-        vertical-align: top;
-    }
-
-    .multiselect__input:-ms-input-placeholder {
-        color: #35495e;
-    }
-
-    .multiselect__input::placeholder {
-        color: #35495e;
-    }
-
-    .multiselect__tag~.multiselect__input,
-    .multiselect__tag~.multiselect__single {
-        width: auto;
-    }
-
-    .multiselect__input:hover,
-    .multiselect__single:hover {
-        border-color: #cfcfcf;
-    }
-
-    .multiselect__input:focus,
-    .multiselect__single:focus {
-        border-color: #a8a8a8;
-    }
-
-    .multiselect__single {
-        padding-left: 5px;
-        margin-bottom: 0px;
-    }
-
-    .multiselect__tags-wrap {
-        display: inline;
-    }
-
-    .multiselect__tags {
-        min-height: 45px;
-        display: flex;
-        padding-right: 40px;
-        padding-left: 5px;
-        align-items: center;
-        border-radius: $octopus-borderradius;
-        border: 0.1rem solid #dee2e6;
-        background: #fff;
-        font-size: 14px;
-        @media (max-width: 960px) {
-            padding: 10px 40px 5px 0;
-            margin: 0;
-        }
-    }
-
-    .multiselect__tag {
-        position: relative;
-        display: inline-block;
-        padding: 4px 26px 4px 10px;
-        border-radius: $octopus-borderradius;
-        margin-right: 10px;
-        color: black;
-        line-height: 1;
-        background: #f8f9fa;
-        margin-bottom: 5px;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 100%;
-        text-overflow: ellipsis;
-    }
-
-    .multiselect__tag-icon {
-        cursor: pointer;
-        margin-left: 7px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        font-weight: 700;
-        font-style: normal;
-        width: 22px;
-        text-align: center;
-        line-height: 22px;
-        transition: all 0.2s ease;
-        border-radius: $octopus-borderradius;
-    }
-
-    .multiselect__tag-icon:after {
-        content: "\D7";
-        color: #266d4d;
-        font-size: 14px;
-    }
-
-    .multiselect__tag-icon:focus,
-    .multiselect__tag-icon:hover {
-        background:#d33e3d;
-    }
-
-    .multiselect__tag-icon:focus:after,
-    .multiselect__tag-icon:hover:after {
-        color: #fff;
-    }
-
-    .multiselect__current {
-        min-height: 40px;
-        overflow: hidden;
-        padding: 8px 30px 0 12px;
-        white-space: nowrap;
-        border-radius: $octopus-borderradius;
-        border: 1px solid #e8e8e8;
-    }
-
-    .multiselect__current,
-    .multiselect__select {
-        line-height: 16px;
-        box-sizing: border-box;
-        display: block;
-        margin: 0;
-        text-decoration: none;
-        cursor: pointer;
-    }
-
-    .multiselect__select {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        right: 1px;
-        top: 1px;
-        padding: 4px 8px;
-        text-align: center;
-        transition: transform 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .multiselect__select:before {
-        position: relative;
-        right: 0;
-        top: 0;
-        color: #999;
-        margin-top: 4px;
-        border-color: #999 transparent transparent;
-        border-style: solid;
-        border-width: 5px 5px 0;
-        content: "";
-    }
-
-    .multiselect__placeholder {
-        color: #757575;
-        display: inline-block;
-    }
-
-    .multiselect--active .multiselect__placeholder {
-        display: none;
-    }
-
-    .multiselect__content-wrapper {
-        position: absolute;
-        display: block;
-        background: #fff;
-        width: 100%;
-        max-height: 240px;
-        overflow: auto;
-        border: 1px solid #e8e8e8;
-        border-top: none;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-        z-index: 50;
-        -webkit-overflow-scrolling: touch;
-    }
-    .multiselect-white .multiselect__content-wrapper{
-        background: black;
-    }
-
-
-    .multiselect__content {
-        list-style: none;
-        display: inline-block;
-        padding: 0;
-        margin: 0;
-        width: 100%;
-        vertical-align: top;
-    }
-
-    .multiselect--above .multiselect__content-wrapper {
-        bottom: 100%;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        border-bottom: none;
-        border-top: 1px solid #e8e8e8;
-    }
-
-    .multiselect__element {
-        display: block;
-    }
-
-    .multiselect__option {
-        display: block;
-        padding: 12px;
-        min-height: 40px;
-        line-height: 16px;
-        text-decoration: none;
-        text-transform: none;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        white-space: nowrap;
-    }
-
-    .multiselect__option:after {
-        top: 0;
-        right: 0;
-        position: absolute;
-        line-height: 40px;
-        padding-right: 12px;
-        padding-left: 20px;
-        font-size: 13px;
-    }
-
-    .multiselect__option--highlight {
-        background: #f8f9fa;
-        color: #000;
-    }
-
-    .multiselect__option--highlight:after {
-        content: attr(data-select);
-        background: #f8f9fa;
-        color: #000;
-    }
-
-    .multiselect__option--selected {
-        background: #f3f3f3;
-        color: #35495e;
-        font-weight: 700;
-    }
-
-    .multiselect__option--selected:after {
-        content: attr(data-selected);
-        color: silver;
-    }
-
-    .multiselect__option--selected.multiselect__option--highlight {
-        background: #ff6a6a;
-        color: #fff;
-    }
-
-    .multiselect__option--selected.multiselect__option--highlight:after {
-        background: #ff6a6a;
-        content: attr(data-deselect);
-        color: #fff;
-    }
-
-    .multiselect--disabled .multiselect__current,
-    .multiselect--disabled .multiselect__select {
-        background: #ededed;
-        color: #a6a6a6;
-    }
-
-    .multiselect__option--disabled {
-        background: #ededed !important;
-        color: #a6a6a6 !important;
-        cursor: text;
-        pointer-events: none;
-    }
-
-    .multiselect__option--group {
-        background: #ededed;
-        color: #35495e;
-    }
-
-    .multiselect__option--group.multiselect__option--highlight {
-        background: #35495e;
-        color: #fff;
-    }
-
-    .multiselect__option--group.multiselect__option--highlight:after {
-        background: #35495e;
-    }
-
-    .multiselect__option--disabled.multiselect__option--highlight {
-        background: #dedede;
-    }
-
-    .multiselect__option--group-selected.multiselect__option--highlight {
-        background: #ff6a6a;
-        color: #fff;
-    }
-
-    .multiselect__option--group-selected.multiselect__option--highlight:after {
-        background: #ff6a6a;
-        content: attr(data-deselect);
-        color: #fff;
-    }
-
-    .multiselect-enter-active,
-    .multiselect-leave-active {
-        transition: all 0.15s ease;
-    }
-
-    .multiselect-enter,
-    .multiselect-leave-active {
-        opacity: 0;
-    }
-
-    .multiselect__strong {
-        margin-bottom: 8px;
-        line-height: 20px;
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    [dir="rtl"] .multiselect {
-        text-align: right;
-    }
-
-    [dir="rtl"] .multiselect__select {
-        right: auto;
-        left: 1px;
-    }
-
-    [dir="rtl"] .multiselect__content {
-        text-align: right;
-    }
-
-    [dir="rtl"] .multiselect__option:after {
-        right: auto;
-        left: 0;
-    }
-
-    [dir="rtl"] .multiselect__clear {
-        right: auto;
-        left: 12px;
-    }
-
-    [dir="rtl"] .multiselect__spinner {
-        right: auto;
-        left: 1px;
-    }
-
-    @keyframes spinning {
-        0% {
-            transform: rotate(0);
-        }
-
-        to {
-            transform: rotate(2turn);
-        }
-    }
-}

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

@@ -1,187 +0,0 @@
-<template>
-  <div
-    class="default-multiselect-width"
-    :style="{ width: width }"
-  >
-    <label
-      for="emissionChooser"
-      class="d-inline"
-      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')"
-      :options="emissions"
-      :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"
-      @search-change="onSearchEmission"
-      @open="onOpen"
-      @select="onEmissionSelected"
-    >
-      <template #clear="{ props }">
-        <div
-          v-if="emission"
-          class="multiselect__clear"
-          @mousedown.prevent.stop="clearAll(props.search)"
-        />
-      </template>
-      <template #singleLabel="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ option.name }}</span>
-        </div>
-      </template>
-      <template #option="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <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>
-</template>
-
-<script lang="ts">
-//@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: string): Emission|undefined => {
-  if(''=== defaultName){
-    return undefined;
-  }
-  return {
-    name: defaultName,
-    emissionId: DEFAULT_EMISSION_ID,
-    imageUrl:'',
-    description:'',
-    monetisable:'UNDEFINED',
-    orga :{ 
-      id:'',
-      imageUrl:'',
-      name:''
-    },
-    rubriqueIds:[],
-  };
-};
-
-import { Emission } from '@/stores/class/general/emission';
-import { defineComponent } from 'vue'
-export default defineComponent({
-  components: {
-    VueMultiselect
-  },
-
-  props: {
-    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() {
-    return{
-      emission: getDefaultEmission(this.defaultanswer),
-      emissions: [] as Array<Emission>,
-      remainingElements: 0 as number,
-      isLoading: false as boolean,
-    };
-  },
-  watch: {
-    emissionChosen: {
-      deep: true,
-      handler(){
-        this.emission = this.emissionChosen;
-      }
-    },
-    reset(): void {
-      this.emission = getDefaultEmission(this.defaultanswer);
-    },
-  },
-
-   methods: {
-    onOpen(): void {
-      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
-        'autocomplete',
-        'off'
-      );
-      this.onSearchEmission();
-    },
-    onEmissionSelected(emission: Emission): void {
-      this.$emit('selected', emission);
-    },
-    async onSearchEmission(query?: string): Promise<void> {
-      this.isLoading = true;
-      const response = await octopusApi.fetchDataWithParams<{count: number;result:Array<Emission>;sort: string;}>(0, 'emission/search',{
-        query: query,
-        first: 0,
-        size: ELEMENTS_COUNT,
-        distributedBy: this.distributedBy??this.organisationDistributedBy,
-        organisationId:this.distributedBy? undefined: this.organisationId
-      }, true);
-      if (this.defaultanswer) {
-        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(): void {
-      this.emission = undefined;
-      this.emissions.length = 0;
-    },
-  },
-})
-</script>