@saooti/octopus-sdk 40.2.19 → 41.0.0

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

@@ -4,7 +4,7 @@
     id="organisation-chooser"
     ref="selectOrganisation"
     option-label="name"
-    :label="label ??$t('select productor')"
+    :label="label ??t('select productor')"
     :display-label="displayLabel"
     :max-element="maxElement"
     :width="width"
@@ -14,7 +14,7 @@
     option-selected-custom-templating="optionTemplating"
     :no-deselect="noDeselect"
     @on-search="onSearchOrganisation"
-    @selected="$emit('selected', $event)"
+    @selected="emit('selected', $event)"
   >
     <template v-if="isImage" #optionTemplating="{ option }">
       <div
@@ -26,9 +26,10 @@
           width="32"
           height="32"
           class="me-2"
-          role="presentation"
+          aria-hidden="true"
+        alt=""
           
-          :title="$t('Organisation name image', { name: option.name })"
+          :title="t('Organisation name image', { name: option.name })"
         />
         <span>
           {{ option.name }}
@@ -38,138 +39,131 @@
   </ClassicMultiselect>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useAuthStore } from "../../../stores/AuthStore";
-import { mapActions, mapState } from "pinia";
 import {useImageProxy} from "../../composable/useImageProxy";
 import {useSelenium} from "../../composable/useSelenium";
 import classicApi from "../../../api/classicApi";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, ref, Ref, useTemplateRef, watch } from "vue";
 import {
   emptyOrgaData,
   Organisation,
 } from "@/stores/class/general/organisation";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  components: {
-    ClassicMultiselect,
-  },
-  props: {
-    defaultanswer: { default: "", type: String },
-    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 },
-    noDeselect: { default: true, type: Boolean },
-    label:{default: undefined, type: String },
-    displayLabel: { default: false, type: Boolean },
-  },
-  emits: ["selected"],
-  setup(){
-    const { seleniumFormat } = useSelenium();
-    const { useProxyImageUrl } = useImageProxy();
-    return { seleniumFormat, useProxyImageUrl }
-  },
-  data() {
-    return {
-      maxElement: 50 as number,
-      organisationChosen: undefined as Organisation | undefined,
-      initLoaded: false as boolean,
-    };
-  },
+import { useI18n } from "vue-i18n";
 
-  computed: {
-    ...mapState(useAuthStore, ["authOrganisation", "authOrgaId"]),
-    getDefaultOrganisation(): Organisation | undefined {
-      if ("" === this.defaultanswer) {
-        return undefined;
-      }
-      return emptyOrgaData(this.defaultanswer);
-    },
-    myOrganisation(): Organisation | undefined {
-      if (!this.authOrgaId) return undefined;
-      return {
-        ...this.authOrganisation,
-        ...{
-          name: `${this.$t("Edit my organisation")} (${
-            this.authOrganisation.name
-          })`,
-        },
-      };
-    },
-  },
-  watch: {
-    orgaIdSelected: {
-      immediate: true,
-      handler() {
-        if (!this.orgaIdSelected) {
-          this.organisationChosen = this.getDefaultOrganisation;
-          return;
-        }
-        if (
-          this.orgaIdSelected &&
-          this.organisationChosen?.id !== this.orgaIdSelected
-        ) {
-          this.fetchOrganisation();
-        }
-      },
-    },
-    reset(): void {
-      this.organisationChosen = this.getDefaultOrganisation;
+//Props 
+const props = defineProps({
+  defaultanswer: { default: "", type: String },
+  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 },
+  noDeselect: { default: true, type: Boolean },
+  label:{default: undefined, type: String },
+  displayLabel: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["selected"]);
+  
+//Data 
+const maxElement = ref(50);
+const organisationChosen: Ref<Organisation | undefined> = ref(undefined);
+const initLoaded = ref(false);
+const selectOrganisationRef = useTemplateRef('selectOrganisation');
+
+//Composables
+const { t } = useI18n();
+const { seleniumFormat } = useSelenium();
+const { useProxyImageUrl } = useImageProxy();
+const authStore = useAuthStore();
+const saveFetchStore = useSaveFetchStore();
+
+
+//Computed
+const getDefaultOrganisation = computed(() => {
+  if ("" === props.defaultanswer) {
+    return undefined;
+  }
+  return emptyOrgaData(props.defaultanswer);
+});
+const myOrganisation = computed(() => {
+  if (!authStore.authOrgaId) return undefined;
+  return {
+    ...authStore.authOrganisation,
+    ...{
+      name: `${t("Edit my organisation")} (${
+        authStore.authOrganisation.name
+      })`,
     },
-  },
+  };
+});
 
-  created() {
-    this.organisationChosen = this.getDefaultOrganisation;
-  },
-  methods: {
-    ...mapActions(useSaveFetchStore, ["getOrgaData"]),
-    async onSearchOrganisation(query?: string): Promise<void> {
-      const response = await classicApi.fetchData<
-        ListClassicReturn<Organisation>
-      >({
-        api: 0,
-        path: "organisation/search",
-        parameters: {
-          query: query,
-          first: 0,
-          size: this.maxElement,
-        },
-      });
-      let notNullOrga = response.result.filter((o: Organisation | null) => {
-        return null !== o;
-      });
-      if (this.getDefaultOrganisation) {
-        notNullOrga.unshift(this.getDefaultOrganisation);
-      }
-      if (this.myOrganisation) {
-        if (undefined === query) {
-          notNullOrga = notNullOrga.filter((obj: Organisation) => {
-            return obj.id !== this.authOrgaId;
-          });
-          notNullOrga.splice(1, 0, this.myOrganisation);
-        } else {
-          const foundIndex = notNullOrga.findIndex(
-            (obj: Organisation) => obj.id === this.authOrgaId,
-          );
-          if (foundIndex) {
-            notNullOrga[foundIndex] = this.myOrganisation;
-          }
-        }
-      }
-      (
-        this.$refs.selectOrganisation as InstanceType<typeof ClassicMultiselect>
-      ).afterSearch(notNullOrga, response.count);
+
+//Watch
+watch(()=>props.orgaIdSelected, () => {
+  if (!props.orgaIdSelected) {
+    organisationChosen.value = getDefaultOrganisation.value;
+    return;
+  }
+  if (
+    props.orgaIdSelected &&
+    organisationChosen.value?.id !== props.orgaIdSelected
+  ) {
+    fetchOrganisation();
+  }
+}, {immediate: true});
+watch(()=>props.reset, () => {
+  organisationChosen.value = getDefaultOrganisation.value;
+});
+
+onBeforeMount(()=>organisationChosen.value = getDefaultOrganisation.value)
+
+
+//Methods
+async function onSearchOrganisation(query?: string): Promise<void> {
+  const response = await classicApi.fetchData<
+    ListClassicReturn<Organisation>
+  >({
+    api: 0,
+    path: "organisation/search",
+    parameters: {
+      query: query,
+      first: 0,
+      size: maxElement.value,
     },
-    async fetchOrganisation(): Promise<void> {
-      this.organisationChosen = await this.getOrgaData(
-        this.orgaIdSelected ?? "",
+  });
+  let notNullOrga = response.result.filter((o: Organisation | null) => {
+    return null !== o;
+  });
+  if (getDefaultOrganisation.value) {
+    notNullOrga.unshift(getDefaultOrganisation.value);
+  }
+  if (myOrganisation.value) {
+    if (undefined === query) {
+      notNullOrga = notNullOrga.filter((obj: Organisation) => {
+        return obj.id !== authStore.authOrgaId;
+      });
+      notNullOrga.splice(1, 0, myOrganisation.value);
+    } else {
+      const foundIndex = notNullOrga.findIndex(
+        (obj: Organisation) => obj.id === authStore.authOrgaId,
       );
-      this.initLoaded = true;
-    },
-  },
-});
+      if (foundIndex) {
+        notNullOrga[foundIndex] = myOrganisation.value;
+      }
+    }
+  }
+  (selectOrganisationRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(notNullOrga, response.count);
+}
+async function fetchOrganisation(): Promise<void> {
+  organisationChosen.value = await saveFetchStore.getOrgaData(
+    props.orgaIdSelected ?? "",
+  );
+  initLoaded.value = true;
+}
 </script>

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

@@ -4,71 +4,63 @@
       v-model:text-init="actual"
       :display-label="false"
       id-select="organisation-chooser-footer"
-      :label="$t('select productor')"
+      :label="t('select productor')"
       :transparent="true"
       :options="[
         { title: organisation.name, value: organisation.id },
-        { title: $t('No organisation filter'), value: 'NONE' },
+        { title: t('No organisation filter'), value: 'NONE' },
       ]"
       class="my-1"
     />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicSelect from "../../form/ClassicSelect.vue";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-import { mapActions } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components:{
-    ClassicSelect
-  },
-  props: {
-    value: { default: undefined, type: String },
-    reset: { default: false, type: Boolean },
-  },
-  emits: ["selected"],
+import { Ref, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-  data() {
-    return {
-      actual: "NONE" as string,
-      organisation: undefined as Organisation | undefined,
-      init: false as boolean,
-    };
-  },
 
-  watch: {
-    value: {
-      deep: true,
-      immediate: true,
-      async handler() {
-        if (!this.init || this.value) {
-          this.fetchOrganisation();
-        }
-      },
-    },
-    reset(): void {
-      this.actual = "NONE";
-    },
-    actual(){
-      this.$emit(
-        "selected",
-        "NONE" === this.actual ? undefined : this.organisation,
-      );
-    }
-  },
+//Props 
+const props = defineProps({
+  value: { default: undefined, type: String },
+  reset: { default: false, type: Boolean },
+})
 
-  methods: {
-    ...mapActions(useSaveFetchStore, ["getOrgaData"]),
-    async fetchOrganisation(): Promise<void> {
-      if (!this.value) {
-        return;
-      }
-      this.organisation = await this.getOrgaData(this.value);
-      this.actual = this.organisation.id;
-      this.init = true;
-    },
-  },
+//Emits
+const emit = defineEmits(["selected"]);
+
+//Data 
+const actual = ref("NONE");
+const organisation: Ref<Organisation | undefined> = ref(undefined);
+const init = ref(false);
+
+//Composables
+const { t } = useI18n();
+const SaveFetchStore = useSaveFetchStore();
+
+
+//Watch
+watch(()=>props.value, async () => {
+  if (!init.value || props.value) {
+    fetchOrganisation();
+  }
+}, {deep: true, immediate: true});
+watch(()=>props.reset, async () => {
+  actual.value = "NONE";
+});
+watch(actual, async () => {
+  emit("selected","NONE" === actual.value ? undefined : organisation.value);
 });
+ 
+//Methods
+async function fetchOrganisation(): Promise<void> {
+  if (!props.value) {
+    return;
+  }
+  organisation.value = await SaveFetchStore.getOrgaData(props.value);
+  actual.value = organisation.value.id;
+  init.value = true;
+}
 </script>

package/src/components/display/participant/ParticipantInlineList.vue

@@ -2,7 +2,7 @@
   <div class="d-flex flex-column p-3 list-participants">
     <h2 class="mb-3">{{ title }}</h2>
     <ClassicLoading
-      :loading-text="loading ? $t('Loading participants ...') : undefined"
+      :loading-text="loading ? t('Loading participants ...') : undefined"
     />
     <SwiperList
       v-if="!loading && allParticipants.length"
@@ -25,76 +25,60 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ParticipantItem from "./ParticipantItem.vue";
 import SwiperList from "../list/SwiperList.vue";
 import classicApi from "../../../api/classicApi";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { defineComponent } from "vue";
+import { onMounted, Ref, ref } from "vue";
 import { AxiosError } from "axios";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 import { Participant } from "@/stores/class/general/participant";
-export default defineComponent({
-  name: "ParticipantInlineList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ParticipantItem,
-    ClassicLoading,
-    SwiperList,
-  },
 
-  props: {
-    organisationId: { default: undefined, type: String },
-    href: { default: undefined, type: String },
-    buttonText: { default: undefined, type: String },
-    itemSize: { default: undefined, type: Number },
-    title: { default: "", type: String },
-  },
-  setup(){
-    const {handle403} = useErrorHandler();
-    return { handle403 }
-  },
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+  href: { default: undefined, type: String },
+  buttonText: { default: undefined, type: String },
+  itemSize: { default: undefined, type: Number },
+  title: { default: "", type: String },
+})
 
-  data() {
-    return {
-      loading: true as boolean,
-      allParticipants: [] as Array<Participant>,
-    };
-  },
+//Data 
+const loading = ref(true);
+const allParticipants: Ref<Array<Participant>> = ref([]);
+  
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
 
-  mounted() {
-    this.fetchNext();
-  },
-  methods: {
-    async fetchNext(): Promise<void> {
-      try {
-        const data = await classicApi.fetchData<ListClassicReturn<Participant>>({
-          api: 0,
-          path: "participant/search",
-          parameters: {
-            first: 0,
-            size: 12,
-            organisationId: this.organisationId,
-            order: "LAST_PODCAST_DESC",
-          },
-          specialTreatement: true,
-        });
-        this.allParticipants = this.allParticipants.concat(
-          data.result.filter((part: Participant | null) => null !== part),
-        );
-        this.loading = false;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-    },
+onMounted(()=>fetchNext())
 
-    reset(): void {
-      this.loading = true;
-      this.allParticipants.length = 0;
-    },
-  },
-});
+//Methods
+async function fetchNext(): Promise<void> {
+  try {
+    const data = await classicApi.fetchData<ListClassicReturn<Participant>>({
+      api: 0,
+      path: "participant/search",
+      parameters: {
+        first: 0,
+        size: 12,
+        organisationId: props.organisationId,
+        order: "LAST_PODCAST_DESC",
+      },
+      specialTreatement: true,
+    });
+    allParticipants.value = allParticipants.value.concat(
+      data.result.filter((part: Participant | null) => null !== part),
+    );
+    loading.value = false;
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+}
 </script>
 <style lang="scss">
 .octopus-app {