@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/filter/CategorySearchFilter.vue

@@ -4,63 +4,60 @@
       v-model:text-init="isCategory"
       class="flex-shrink-0 me-2"
       id-checkbox="search-category-checkbox"
-      :label="$t('By category')"
+      :label="t('By category')"
     />
     <CategoryChooser
       :category-selected="iabIdIntern"
       width="100%"
-      :defaultanswer="$t('No category filter')"
+      :defaultanswer="t('No category filter')"
       @update:category-selected="updateIabId"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import CategoryChooser from "../categories/CategoryChooser.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    CategoryChooser,
-    ClassicCheckbox,
-  },
-  props: {
-    iabId: { default: undefined, type: Number },
-  },
-  emits: ["update:iabId"],
-  data() {
-    return {
-      isCategory: false as boolean,
-      iabIdIntern: 0 as number,
-    };
-  },
-  watch: {
-    iabId: {
-      immediate: true,
-      handler() {
-        this.isCategory = undefined !== this.iabId;
-        if (this.iabId && this.iabId !== this.iabIdIntern) {
-          this.iabIdIntern = this.iabId;
-        }
-      },
-    },
-    isCategory(): void {
-      const value = this.isCategory ? this.iabIdIntern : undefined;
-      if (value !== this.iabId) {
-        this.$emit("update:iabId", value);
-      }
-    },
-  },
+import { ref, watch } from "vue";
 
-  methods: {
-    updateIabId(iabId: number) {
-      this.iabIdIntern = iabId;
-      if (this.isCategory) {
-        this.$emit("update:iabId", this.iabIdIntern);
-      } else {
-        this.isCategory = true;
-      }
-    },
-  },
+//Props 
+const props = defineProps({
+  iabId: { default: undefined, type: Number },
+})
+
+
+//Emits
+const emit = defineEmits(["update:iabId"]);
+
+//Data 
+const isCategory = ref(false);
+const iabIdIntern = ref(0);
+
+//Composables
+const { t } = useI18n();
+  
+//Watch
+watch(()=>props.iabId, () => {
+  isCategory.value = undefined !== props.iabId;
+  if (props.iabId && props.iabId !== iabIdIntern.value) {
+    iabIdIntern.value = props.iabId;
+  }
+}, {immediate: true});
+watch(isCategory, () => {
+  const value = isCategory.value ? iabIdIntern.value : undefined;
+  if (value !== props.iabId) {
+    emit("update:iabId", value);
+  }
 });
+
+//Methods
+function updateIabId(iabId: number) {
+  iabIdIntern.value = iabId;
+  if (isCategory.value) {
+    emit("update:iabId", iabIdIntern.value);
+  } else {
+    isCategory.value = true;
+  }
+}
 </script>

package/src/components/display/filter/DateFilter.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="d-flex mt-3 align-items-center flex-wrap">
     <div v-if="isEmission" class="me-2">
-      {{ $t("Emission with episode published :") }}
+      {{ t("Emission with episode published :") }}
     </div>
     <div v-for="index in 2" :key="index" class="d-flex align-items-center">
       <ClassicCheckbox
         v-model:text-init="isActive[index - 1]"
         class="flex-shrink-0"
         :id-checkbox="'search-checkbox' + index"
-        :label="1 === index ? $t('From the :') : $t('To the :')"
+        :label="1 === index ? t('From the :') : t('To the :')"
       />
       <ClassicDatePicker
         :id="'date-filter-chooser'+index"
-        :label="1 === index ? $t('From the :') : $t('To the :')"
+        :label="1 === index ? t('From the :') : t('To the :')"
         :date="internDates[index - 1]"
         class="mx-2"
         @update-date="updateDate(index - 1, $event)"
@@ -21,100 +21,85 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from "dayjs";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import ClassicDatePicker from "../../form/ClassicDatePicker.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicDatePicker,
-    ClassicCheckbox,
-  },
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-  props: {
-    isEmission: { default: false, type: Boolean },
-    fromDate: { default: undefined, type: String },
-    toDate: { default: undefined, type: String },
-  },
+//Props 
+const props = defineProps({
+  isEmission: { default: false, type: Boolean },
+  fromDate: { default: undefined, type: String },
+  toDate: { default: undefined, type: String },
+})
 
-  emits: ["updateDates"],
+//Emits
+const emit = defineEmits(["updateDates"]);
 
-  data() {
-    return {
-      isActive: [false, false] as Array<boolean>,
-      internDates: [
-        dayjs().subtract(10, "days").startOf("day").toDate(),
-        dayjs().endOf("day").toDate(),
-      ],
-    };
-  },
+//Data 
+const isActive = ref([false, false]);
+const internDates = ref([
+  dayjs().subtract(10, "days").startOf("day").toDate(),
+  dayjs().endOf("day").toDate(),
+]);
 
-  watch: {
-    toDate: {
-      immediate: true,
-      handler() {
-        this.isActive[1] = undefined !== this.toDate;
-        if (this.toDate && this.toDate !== this.internDates[1].toISOString()) {
-          this.internDates[1] = dayjs(this.toDate).toDate();
-        }
-      },
-    },
-    fromDate: {
-      immediate: true,
-      handler() {
-        this.isActive[0] = undefined !== this.fromDate;
-        if (
-          this.fromDate &&
-          this.fromDate !== this.internDates[0].toISOString()
-        ) {
-          this.internDates[0] = dayjs(this.fromDate).toDate();
-        }
-      },
-    },
-    isActive: {
-      deep: true,
-      handler() {
-        this.$emit("updateDates", {
-          from: this.isActive[0]
-            ? dayjs(this.internDates[0]).toISOString()
-            : undefined,
-          to: this.isActive[1]
-            ? dayjs(this.internDates[1]).toISOString()
-            : undefined,
-        });
-      },
-    },
-  },
+//Composables
+const { t } = useI18n();
 
-  methods: {
-    updateDate(index: number, value: Date): void {
-      this.internDates[index] = value;
-      if (
-        (0 === index &&
-          dayjs(this.internDates[0]).startOf("minute").toISOString() ===
-            dayjs().subtract(10, "days").startOf("minute").toISOString()) ||
-        (1 === index &&
-          dayjs(this.internDates[1]).startOf("minute").toISOString() ===
-            dayjs().startOf("minute").toISOString())
-      ) {
-        return;
-      }
-      if (this.isActive[index]) {
-        this.$emit("updateDates", {
-          from:
-            0 === index
-              ? dayjs(this.internDates[0]).toISOString()
-              : this.fromDate,
-          to:
-            1 === index
-              ? dayjs(this.internDates[1]).toISOString()
-              : this.toDate,
-        });
-      } else {
-        this.isActive[index] = true;
-      }
-    },
-  },
-});
+
+//Watch
+watch(()=>props.toDate, () => {
+  isActive.value[1] = undefined !== props.toDate;
+  if (props.toDate && props.toDate !== internDates.value[1].toISOString()) {
+    internDates.value[1] = dayjs(props.toDate).toDate();
+  }
+}, {immediate: true});
+watch(()=>props.fromDate, () => {
+  isActive.value[0] = undefined !== props.fromDate;
+  if (props.fromDate && props.fromDate !== internDates.value[0].toISOString()) {
+    internDates.value[0] = dayjs(props.fromDate).toDate();
+  }
+}, {immediate: true});
+watch(()=>props.fromDate, () => {
+  emit("updateDates", {
+    from: isActive.value[0]
+      ? dayjs(internDates.value[0]).toISOString()
+      : undefined,
+    to: isActive.value[1]
+      ? dayjs(internDates.value[1]).toISOString()
+      : undefined,
+  });
+}, {deep: true});
+
+
+//Methods
+function updateDate(index: number, value: Date): void {
+  internDates.value[index] = value;
+  if (
+    (0 === index &&
+      dayjs(internDates.value[0]).startOf("minute").toISOString() ===
+        dayjs().subtract(10, "days").startOf("minute").toISOString()) ||
+    (1 === index &&
+      dayjs(internDates.value[1]).startOf("minute").toISOString() ===
+        dayjs().startOf("minute").toISOString())
+  ) {
+    return;
+  }
+  if (isActive.value[index]) {
+    emit("updateDates", {
+      from:
+        0 === index
+          ? dayjs(internDates.value[0]).toISOString()
+          : props.fromDate,
+      to:
+        1 === index
+          ? dayjs(internDates.value[1]).toISOString()
+          : props.toDate,
+    });
+  } else {
+    isActive.value[index] = true;
+  }
+}
 </script>

package/src/components/display/filter/MonetizableFilter.vue

@@ -2,48 +2,45 @@
   <ClassicSelect
     v-model:text-init="monetisableForVmodel"
     id-select="monetizable-filter-select"
-    :label="$t('Advertising') + ' :'"
+    :label="t('Advertising') + ' :'"
     :display-label="true"
     class-label="flex-shrink-0 me-1"
     class="d-flex align-items-center"
     :options="[
       { title: allString, value: 'UNDEFINED' },
-      { title: $t('Authorized advertising'), value: 'YES' },
-      { title: $t('Prohibited advertising'), value: 'NO' },
+      { title: t('Authorized advertising'), value: 'YES' },
+      { title: t('Prohibited advertising'), value: 'NO' },
     ]"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicSelect from "../../form/ClassicSelect.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components:{
-    ClassicSelect
-  },
-  props: {
-    isEmission: { default: false, type: Boolean },
-    monetisable: { default: "UNDEFINED", type: String },
-  },
-  emits: ["update:monetisable"],
+import { computed } from "vue";
+
+
+//Props 
+const props = defineProps({
+  isEmission: { default: false, type: Boolean },
+  monetisable: { default: "UNDEFINED", type: String },
+})
 
-  data() {
-    return {};
+//Emits
+const emit = defineEmits(["update:monetisable"]);
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const allString = computed(() => props.isEmission? t("All emissions"): t("All podcasts"));
+const monetisableForVmodel = computed({
+  get(): string {
+    return props.monetisable;
   },
-  computed: {
-    allString(): string {
-      return this.isEmission
-        ? this.$t("All emissions")
-        : this.$t("All podcasts");
-    },
-    monetisableForVmodel: {
-      get(): string {
-        return this.monetisable;
-      },
-      set(value: string) {
-        this.$emit("update:monetisable", value);
-      },
-    },
+  set(value: string) {
+    emit("update:monetisable", value);
   },
 });
+
 </script>

package/src/components/display/filter/ProductorSearch.vue

@@ -1,21 +1,21 @@
 <template>
   <div id="productor-search" class="d-flex-column align-items-center my-3">
     <div
-      v-if="!isPodcastmaker && !filterOrgaId"
+      v-if="!state.generalParameters.podcastmaker && !filterStore.filterOrgaId"
       class="w-50-responsive pe-3 position-relative"
     >
       <OrganisationChooser
-        :defaultanswer="$t('No organisation filter')"
+        :defaultanswer="t('No organisation filter')"
         :orga-id-selected="organisationId"
         @selected="onOrganisationSelected"
       />
-      <template  v-if="!authOrgaId ||authOrgaId ===organisationId">
+      <template  v-if="!authStore.authOrgaId ||authStore.authOrgaId ===organisationId">
         <ClassicCheckbox
           v-model:text-init="keepOrganisation"
           :class="!!organisationId ? '' : 'invisible'"
           class="m-3"
           :label="
-            $t(
+            t(
               'check this box if you want to keep this filter for the rest of your visit',
             )
           "
@@ -25,7 +25,7 @@
         />
         <div v-if="showBubble" class="filter-speech-bubble">
           {{
-            $t(
+            t(
               "check this box if you want to keep this filter for the rest of your visit",
             )
           }}
@@ -43,107 +43,104 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import ClassicSearch from "../../form/ClassicSearch.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed, watch, onBeforeMount } from "vue";
 import { useAuthStore } from "../../../stores/AuthStore";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 const OrganisationChooser = defineAsyncComponent(
   () => import("../organisation/OrganisationChooser.vue"),
 );
 const ClassicCheckbox = defineAsyncComponent(
   () => import("../../form/ClassicCheckbox.vue"),
 );
-export default defineComponent({
-  components: {
-    OrganisationChooser,
-    ClassicSearch,
-    ClassicCheckbox,
-  },
 
-  props: {
-    organisationId: { default: undefined, type: String },
-    searchPattern: { default: "", type: String },
-    type: { default: "podcast", type: String },
-  },
-  emits: ["update:organisationId", "update:searchPattern"],
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+  searchPattern: { default: "", type: String },
+  type: { default: "podcast", type: String },
+})
 
-  setup(){
-    const { updateRouteParam } = useRouteUpdateParams();
-    return {updateRouteParam}
-  },
+//Emits
+const emit = defineEmits(["update:organisationId", "update:searchPattern"]);
 
-  data() {
-    return {
-      keepOrganisation: false as boolean,
-      showBubble: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-    searchText(): string {
-      if ("emission" === this.type) return this.$t("Look for emission name");
-      if ("participant" === this.type)
-        return this.$t("Look for participant name");
-      if ("playlist" === this.type) return this.$t("Look for playlist name");
-      return this.$t("Look for podcast name");
-    },
-  },
-  watch: {
-    filterOrgaId(): void {
-      this.keepOrganisation = undefined !== this.filterOrgaId;
-      if (this.filterOrgaId) {
-        this.$emit("update:organisationId", this.filterOrgaId);
-      }else{
-        this.updateRouteParam({ o: this.organisationId, productor:undefined});
-      }
-    },
-  },
-  created() {
-    if (!this.organisationId) return;
-    if (this.filterOrgaId === this.organisationId) {
-      this.keepOrganisation = true;
-    }
-  },
-  methods: {
-    updateSearchPattern(newSearch: string) {
-      this.$emit("update:searchPattern", newSearch);
-    },
-    onOrganisationSelected(organisation: Organisation): void {
-      this.updateRouteParam({ o: organisation.id, productor: undefined });
-      this.keepOrganisation = false;
-      if (!organisation?.id) {
-        this.$emit("update:organisationId", undefined);
-      }
-      this.$emit("update:organisationId", organisation.id);
-      if (undefined===this.authOrgaId && "PUBLIC" !== organisation.privacy) {
-        this.onKeepOrganisation(organisation.id);
-      } else {
-        this.showBubble = true;
-        setTimeout(() => {
-          this.showBubble = false;
-        }, 6000);
-      }
-    },
-    async onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {
-      const orgaToApply= orgaId ?? this.organisationId;
-      if (!orgaToApply) {
-        return;
-      }
-      this.$router.push({
-        query: { ...this.$route.query, ...{ productor: orgaToApply, o:undefined }},
-      });
-    },
-  },
+//Data 
+const keepOrganisation = ref(false);
+const showBubble = ref(false);
+
+//Composables
+const { t } = useI18n();
+const { updateRouteParam } = useRouteUpdateParams();
+const filterStore = useFilterStore();
+const authStore = useAuthStore();
+const router = useRouter();
+const route = useRoute();
+
+
+//Computed
+const searchText = computed(() => {
+  if ("emission" === props.type) return t("Look for emission name");
+  if ("participant" === props.type)
+    return t("Look for participant name");
+  if ("playlist" === props.type) return t("Look for playlist name");
+  return t("Look for podcast name");
 });
+
+
+//Watch
+watch(()=>filterStore.filterOrgaId, async () => {
+  keepOrganisation.value = undefined !== filterStore.filterOrgaId;
+  if (filterStore.filterOrgaId) {
+    emit("update:organisationId", filterStore.filterOrgaId);
+  }else{
+    updateRouteParam({ o: props.organisationId, productor:undefined});
+  }
+});
+ 
+
+onBeforeMount(()=>{
+  if (!props.organisationId) return;
+  if (filterStore.filterOrgaId === props.organisationId) {
+    keepOrganisation.value = true;
+  }
+})
+
+
+//Methods
+function updateSearchPattern(newSearch: string) {
+  emit("update:searchPattern", newSearch);
+}
+function onOrganisationSelected(organisation: Organisation): void {
+  updateRouteParam({ o: organisation.id, productor: undefined });
+  keepOrganisation.value = false;
+  if (!organisation?.id) {
+    emit("update:organisationId", undefined);
+  }
+  emit("update:organisationId", organisation.id);
+  if (undefined===authStore.authOrgaId && "PUBLIC" !== organisation.privacy) {
+    onKeepOrganisation(organisation.id);
+  } else {
+    showBubble.value = true;
+    setTimeout(() => {
+      showBubble.value = false;
+    }, 6000);
+  }
+}
+async function onKeepOrganisation(orgaId: string|undefined = undefined): Promise<void> {
+  const orgaToApply= orgaId ?? props.organisationId;
+  if (!orgaToApply) {
+    return;
+  }
+  router.push({
+    query: { ...route.query, ...{ productor: orgaToApply, o:undefined }},
+  });
+}
 </script>
 
 <style lang="scss">