@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

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

@@ -3,7 +3,7 @@
     <ClassicSelect
       :text-init="rubriquageIdSelected"
       id-select="rubrique-choice-select"
-      :label="$t('Topics')"
+      :label="t('Topics')"
       :display-label="false"
       class="flex-shrink-0"
       :options="rubriquageDisplayForSelect"
@@ -11,7 +11,7 @@
     />
     <template v-if="rubriquageIdSelected">
       <div class="ms-3 flex-shrink-0">
-        {{ $t("By rubric") }}
+        {{ t("By rubric") }}
       </div>
       <RubriqueChooser
         v-if="getRubriquesLength(rubriquageIdSelected)"
@@ -22,7 +22,7 @@
           0 !== rubriqueIdSelected ? rubriqueIdSelected : undefined
         "
         :all-rubriques="getRubriques(rubriquageIdSelected)"
-        :defaultanswer="$t('No rubric filter')"
+        :defaultanswer="t('No rubric filter')"
         :reset="reset"
         :without-rubrique="true"
         @selected="onRubriqueSelected"
@@ -39,76 +39,71 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicSelect from "../../form/ClassicSelect.vue";
 import TrashCanIcon from "vue-material-design-icons/TrashCan.vue";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 const RubriqueChooser = defineAsyncComponent(
   () => import("../rubriques/RubriqueChooser.vue"),
 );
-export default defineComponent({
-  components: {
-    RubriqueChooser,
-    TrashCanIcon,
-    ClassicSelect
-  },
-  props: {
-    rubriquageDisplay: {
-      default: () => [],
-      type: Array as () => Array<Rubriquage>,
-    },
-    rubriquageIdSelected: { default: 0, type: Number },
-    rubriqueIdSelected: { default: 0, type: Number },
-    index: { default: 0, type: Number },
-  },
-  emits: ["deleteRubriqueChoice", "updateRubrique", "updateRubriquage"],
 
-  data() {
-    return {
-      reset: false as boolean,
-    };
-  },
-  computed:{
-    rubriquageDisplayForSelect(){
-      return this.rubriquageDisplay.map((rubriquage) => {
-        return { title: rubriquage.title, value: rubriquage.rubriquageId };
-      });
-    }
+//Props 
+const props = defineProps({
+  rubriquageDisplay: {
+    default: () => [],
+    type: Array as () => Array<Rubriquage>,
   },
+  rubriquageIdSelected: { default: 0, type: Number },
+  rubriqueIdSelected: { default: 0, type: Number },
+  index: { default: 0, type: Number },
+})
 
+//Emits
+const emit = defineEmits(["deleteRubriqueChoice", "updateRubrique", "updateRubriquage"]);
 
-  methods: {
-    deleteRubriquage() {
-      this.$emit("deleteRubriqueChoice");
-    },
-    getRubriquesLength(rubriquageId: number): number {
-      return this.getRubriques(rubriquageId).length;
-    },
-    getRubriques(rubriquageId: number): Array<Rubrique> {
-      const topicIndex = this.rubriquageDisplay.findIndex(
-        (element: Rubriquage) => element.rubriquageId === rubriquageId,
-      );
-      return -1 !== topicIndex
-        ? this.rubriquageDisplay[topicIndex].rubriques
-        : [];
-    },
-    onRubriqueSelected(rubrique: Rubrique): void {
-      if (rubrique.rubriqueId === this.rubriqueIdSelected) return;
-      this.$emit("updateRubrique", {
-        rubriqueId: rubrique.rubriqueId,
-        index: this.index,
-      });
-    },
-    onRubriquageSelected(newRubriquage: number): void {
-      this.reset = !this.reset;
-      this.$emit("updateRubriquage", {
-        rubriquageId: newRubriquage,
-        rubriqueId:0,
-        index: this.index,
-      });
-    },
-  },
+//Data 
+const reset = ref(false);
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const rubriquageDisplayForSelect = computed(() => {
+  return props.rubriquageDisplay.map((rubriquage) => {
+    return { title: rubriquage.title, value: rubriquage.rubriquageId };
+  });
 });
+
+//Methods
+function deleteRubriquage() {
+  emit("deleteRubriqueChoice");
+}
+function getRubriquesLength(rubriquageId: number): number {
+  return getRubriques(rubriquageId).length;
+}
+function getRubriques(rubriquageId: number): Array<Rubrique> {
+  const topicIndex = props.rubriquageDisplay.findIndex(
+    (element: Rubriquage) => element.rubriquageId === rubriquageId,
+  );
+  return -1 !== topicIndex? props.rubriquageDisplay[topicIndex].rubriques: [];
+}
+function onRubriqueSelected(rubrique: Rubrique): void {
+  if (rubrique.rubriqueId === props.rubriqueIdSelected) return;
+  emit("updateRubrique", {
+    rubriqueId: rubrique.rubriqueId,
+    index: props.index,
+  });
+}
+function onRubriquageSelected(newRubriquage: number): void {
+  reset.value = !reset.value;
+  emit("updateRubriquage", {
+    rubriquageId: newRubriquage,
+    rubriqueId:0,
+    index: props.index,
+  });
+}
 </script>

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

@@ -7,7 +7,7 @@
       v-model:text-init="isRubriquage"
       class="flex-shrink-0"
       id-checkbox="search-rubriquage-checkbox"
-      :label="$t('By topic')"
+      :label="t('By topic')"
     />
     <div v-if="isRubriquage" class="d-flex ms-1 flex-column flex-grow-1">
       <RubriqueChoice
@@ -27,192 +27,177 @@
         class="btn mt-2"
         @click="addFilter"
       >
-        {{ $t("Add a sort criterion by topic") }}
+        {{ t("Add a sort criterion by topic") }}
       </button>
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import classicApi from "../../../api/classicApi";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, Ref, computed, watch, onBeforeMount } from "vue";
+import { useI18n } from "vue-i18n";
 const RubriqueChoice = defineAsyncComponent(
   () => import("./RubriqueChoice.vue"),
 );
-export default defineComponent({
-  components: {
-    RubriqueChoice,
-    ClassicCheckbox,
-  },
-  props: {
-    organisationId: { default: undefined, type: String },
-    rubriqueFilter: {
-      default: () => [],
-      type: Array as () => Array<RubriquageFilter>,
-    },
-  },
-  emits: ["update:rubriqueFilter", "warning"],
 
-  setup(){
-    const { stringifyRubriquesFilter } = useRubriquesFilterParam();
-    return { stringifyRubriquesFilter }
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+  rubriqueFilter: {
+    default: () => [],
+    type: Array as () => Array<RubriquageFilter>,
   },
+})
 
-  data() {
-    return {
-      isRubriquage: false as boolean,
-      internRubriqueFilter: [] as Array<RubriquageFilter>,
-      rubriquageData: [] as Array<Rubriquage>,
-      needToFetchRubrique: false as boolean,
-    };
-  },
+//Emits
+const emit = defineEmits(["update:rubriqueFilter", "warning"]);
 
-  computed: {
-    ...mapState(useFilterStore, ["filterRubrique", "filterOrgaId"]),
-    organisation(): string | undefined {
-      return this.organisationId ? this.organisationId : this.filterOrgaId;
-    },
-    availableRubriquage(): Array<Rubriquage> {
-      return this.getAvailableRubriquage(this.internRubriqueFilter);
-    },
-  },
-  watch: {
-    organisation(): void {
-      if (this.isRubriquage) {
-        this.fetchTopics();
-      } else {
-        this.needToFetchRubrique = true;
-      }
-    },
-    rubriqueFilter: {
-      immediate: true,
-      deep: true,
-      handler() {
-        this.isRubriquage = 0 !== this.rubriqueFilter?.length;
-        if (
-          this.rubriqueFilter &&
-          this.stringifyRubriquesFilter(this.internRubriqueFilter) !==
-            this.stringifyRubriquesFilter(this.rubriqueFilter)
-        ) {
-          this.internRubriqueFilter = this.rubriqueFilter;
-        }
-      },
-    },
-    isRubriquage(): void {
-      if (this.needToFetchRubrique) {
-        this.fetchTopics();
-      }
-      if (this.isRubriquage && 0 === this.internRubriqueFilter.length) {
-        this.addFilter();
-      }
-      const value = this.isRubriquage ? this.internRubriqueFilter : [];
-      if (
-        this.stringifyRubriquesFilter(value) !==
-        this.stringifyRubriquesFilter(this.rubriqueFilter)
-      ) {
-        this.$emit("update:rubriqueFilter", value);
-      }
-    },
-  },
+//Data 
+const isRubriquage = ref(false);
+const internRubriqueFilter: Ref<Array<RubriquageFilter>> = ref([]);
+const rubriquageData: Ref<Array<Rubriquage>> = ref([]);
+const needToFetchRubrique = ref(false);
 
-  created() {
-    this.fetchTopics();
-  },
-  methods: {
-    updateInternRubriqueFilter() {
-      if (this.isRubriquage) {
-        this.$emit("update:rubriqueFilter", this.internRubriqueFilter);
-      } else {
-        this.isRubriquage = true;
-      }
-    },
-    addFilter(): void {
-      if (this.availableRubriquage?.[0].rubriquageId) {
-        this.internRubriqueFilter.push({
-          rubriquageId: this.availableRubriquage[0].rubriquageId,
-          rubriqueId: 0,
-          nameRubriquage: this.rubriquageData[0].title,
-          nameRubrique: "",
-        });
-        this.updateInternRubriqueFilter();
-      }
-    },
-    deleteRubriqueChoice(index: number): void {
-      this.internRubriqueFilter.splice(index, 1);
-      this.updateInternRubriqueFilter();
-    },
-    getAvailableRubriquage(
-      filterRubrique: Array<RubriquageFilter>,
-    ): Array<Rubriquage> {
-      if (filterRubrique.length) {
-        const rubriquageIdToNotShow = filterRubrique.map((a) => a.rubriquageId);
-        return this.rubriquageData.filter((element) => {
-          if (element.rubriquageId) {
-            return !rubriquageIdToNotShow.includes(element.rubriquageId);
-          }
-        });
-      }
-      return this.rubriquageData;
-    },
-    getRubriquage(index: number) {
-      const elementToNotShow = Array.from(this.internRubriqueFilter);
-      elementToNotShow.splice(index, 1);
-      return this.getAvailableRubriquage(elementToNotShow);
-    },
-    updateRubrique(newValue: { rubriqueId: number; index: number }): void {
-      const item = this.internRubriqueFilter[newValue.index];
-      item.rubriqueId = newValue.rubriqueId;
-      this.internRubriqueFilter.splice(newValue.index, 1, item);
-      this.updateInternRubriqueFilter();
-    },
-    updateRubriquage(newValue: { rubriquageId: number; index: number }): void {
-      const item = this.internRubriqueFilter[newValue.index];
-      item.rubriquageId = newValue.rubriquageId;
-      this.internRubriqueFilter.splice(newValue.index, 1, item);
-      this.updateInternRubriqueFilter();
-    },
-    async fetchTopics(): Promise<void> {
-      if (!this.organisation) return;
-      this.needToFetchRubrique = false;
-      const data = await classicApi.fetchData<Array<Rubriquage>>({
-        api: 0,
-        path: "rubriquage/find/" + this.organisation,
-        specialTreatement: true,
-      });
-      this.rubriquageData = data.filter((element: Rubriquage) => {
-        return element.rubriques.length;
-      });
-      if (0 === this.rubriquageData.length) {
-        if (this.internRubriqueFilter.length) {
-          this.internRubriqueFilter = [];
-          this.updateInternRubriqueFilter();
-          this.$emit("warning");
-        }
-        return;
-      }
-      const internRubriqueFilterToUpdate = [];
-      for (const filter of this.internRubriqueFilter) {
-        const rubriquageExist = this.rubriquageData.find(
-          (element) => element.rubriquageId === filter.rubriquageId,
-        );
-        if (rubriquageExist) {
-          internRubriqueFilterToUpdate.push(filter);
-        }
-      }
-      if (
-        internRubriqueFilterToUpdate.length !== this.internRubriqueFilter.length
-      ) {
-        this.internRubriqueFilter = internRubriqueFilterToUpdate;
-        this.updateInternRubriqueFilter();
-        this.$emit("warning");
-      }
-    },
-  },
+//Composables
+const { t } = useI18n();
+const { stringifyRubriquesFilter } = useRubriquesFilterParam();
+const filterStore = useFilterStore();
+
+//Computed
+const organisation = computed(() => props.organisationId ? props.organisationId : filterStore.filterOrgaId);
+const availableRubriquage = computed(() => getAvailableRubriquage(internRubriqueFilter.value));
+
+
+//Watch
+watch(organisation, () => {
+  if (isRubriquage.value) {
+    fetchTopics();
+  } else {
+    needToFetchRubrique.value = true;
+  }
+});
+watch(()=>props.rubriqueFilter, () => {
+  isRubriquage.value = 0 !== props.rubriqueFilter?.length;
+  if (
+    props.rubriqueFilter &&
+    stringifyRubriquesFilter(internRubriqueFilter.value) !==
+    stringifyRubriquesFilter(props.rubriqueFilter)
+  ) {
+    internRubriqueFilter.value = props.rubriqueFilter;
+  }
+}, {deep: true,immediate: true});
+watch(isRubriquage, () => {
+  if (needToFetchRubrique.value) {
+    fetchTopics();
+  }
+  if (isRubriquage.value && 0 === internRubriqueFilter.value.length) {
+    addFilter();
+  }
+  const value = isRubriquage.value ? internRubriqueFilter.value : [];
+  if (
+    stringifyRubriquesFilter(value) !==
+    stringifyRubriquesFilter(props.rubriqueFilter)
+  ) {
+    emit("update:rubriqueFilter", value);
+  }
 });
+
+
+onBeforeMount(()=>fetchTopics())
+
+//Methods
+function updateInternRubriqueFilter() {
+  if (isRubriquage.value) {
+    emit("update:rubriqueFilter", internRubriqueFilter.value);
+  } else {
+    isRubriquage.value = true;
+  }
+}
+function addFilter(): void {
+  if (availableRubriquage.value?.[0].rubriquageId) {
+    internRubriqueFilter.value.push({
+      rubriquageId: availableRubriquage.value[0].rubriquageId,
+      rubriqueId: 0,
+      nameRubriquage: rubriquageData.value[0].title,
+      nameRubrique: "",
+    });
+    updateInternRubriqueFilter();
+  }
+}
+function deleteRubriqueChoice(index: number): void {
+  internRubriqueFilter.value.splice(index, 1);
+  updateInternRubriqueFilter();
+}
+function getAvailableRubriquage(
+  filterRubrique: Array<RubriquageFilter>,
+): Array<Rubriquage> {
+  if (filterRubrique.length) {
+    const rubriquageIdToNotShow = filterRubrique.map((a) => a.rubriquageId);
+    return rubriquageData.value.filter((element) => {
+      if (element.rubriquageId) {
+        return !rubriquageIdToNotShow.includes(element.rubriquageId);
+      }
+    });
+  }
+  return rubriquageData.value;
+}
+function getRubriquage(index: number) {
+  const elementToNotShow = Array.from(internRubriqueFilter.value);
+  elementToNotShow.splice(index, 1);
+  return getAvailableRubriquage(elementToNotShow);
+}
+function updateRubrique(newValue: { rubriqueId: number; index: number }): void {
+  const item = internRubriqueFilter.value[newValue.index];
+  item.rubriqueId = newValue.rubriqueId;
+  internRubriqueFilter.value.splice(newValue.index, 1, item);
+  updateInternRubriqueFilter();
+}
+function updateRubriquage(newValue: { rubriquageId: number; index: number }): void {
+  const item = internRubriqueFilter.value[newValue.index];
+  item.rubriquageId = newValue.rubriquageId;
+  internRubriqueFilter.value.splice(newValue.index, 1, item);
+  updateInternRubriqueFilter();
+}
+async function fetchTopics(): Promise<void> {
+  if (!organisation.value) return;
+  needToFetchRubrique.value = false;
+  const data = await classicApi.fetchData<Array<Rubriquage>>({
+    api: 0,
+    path: "rubriquage/find/" + organisation.value,
+    specialTreatement: true,
+  });
+  rubriquageData.value = data.filter((element: Rubriquage) => {
+    return element.rubriques.length;
+  });
+  if (0 === rubriquageData.value.length) {
+    if (internRubriqueFilter.value.length) {
+      internRubriqueFilter.value = [];
+      updateInternRubriqueFilter();
+      emit("warning");
+    }
+    return;
+  }
+  const internRubriqueFilterToUpdate = [];
+  for (const filter of internRubriqueFilter.value) {
+    const rubriquageExist = rubriquageData.value.find(
+      (element) => element.rubriquageId === filter.rubriquageId,
+    );
+    if (rubriquageExist) {
+      internRubriqueFilterToUpdate.push(filter);
+    }
+  }
+  if (
+    internRubriqueFilterToUpdate.length !== internRubriqueFilter.value.length
+  ) {
+    internRubriqueFilter.value = internRubriqueFilterToUpdate;
+    updateInternRubriqueFilter();
+    emit("warning");
+  }
+}
 </script>

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

@@ -3,48 +3,48 @@
     :text-init="sort"
     id-radio="sort-radio"
     :options="optionsArray"
-    :radio-label="$t('Sort')"
+    :radio-label="t('Sort')"
     class-label="text-primary mb-2"
     :type-tag="typeTag"
     class="flex-grow-1"
-    @update:text-init="$emit('update:sort', $event)"
+    @update:text-init="emit('update:sort', $event)"
   />
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicRadioLabel from "../../form/ClassicRadioLabel.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicRadioLabel,
-  },
-  props: {
-    isEmission: { default: false, type: Boolean },
-    sort: { default: "DATE", type: String },
-    typeTag: { default: "fieldset", type: String },
-  },
+import { computed } from "vue";
 
-  emits: ["update:sort"],
-  data() {
-    return {};
-  },
-  computed: {
-    optionsArray() {
-      const options = [
-        { title: this.$t("Sort score"), value: "SCORE" },
-        {
-          title: this.$t("Sort last"),
-          value: this.isEmission ? "LAST_PODCAST_DESC" : "DATE",
-        },
-        { title: this.$t("Sort name"), value: "NAME" },
-      ];
-      if (!this.isEmission) {
-        options.splice(2, 0, {
-          title: this.$t("Chronological"),
-          value: "DATE_ASC",
-        });
-      }
-      return options;
+//Props 
+const props = defineProps({
+  isEmission: { default: false, type: Boolean },
+  sort: { default: "DATE", type: String },
+  typeTag: { default: "fieldset", type: String },
+})
+
+//Emits
+const emit = defineEmits(["update:sort"]);
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const optionsArray = computed(() => {
+  const options = [
+    { title: t("Sort score"), value: "SCORE" },
+    {
+      title: t("Sort last"),
+      value: props.isEmission ? "LAST_PODCAST_DESC" : "DATE",
     },
-  },
+    { title: t("Sort name"), value: "NAME" },
+  ];
+  if (!props.isEmission) {
+    options.splice(2, 0, {
+      title: t("Chronological"),
+      value: "DATE_ASC",
+    });
+  }
+  return options;
 });
+
 </script>