@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -5,9 +5,9 @@
     :option-chosen="model"
     option-label="name"
     :display-label="displayLabel"
-    :label="label ?? $t('By rubric')"
+    :label="label ?? t('By rubric')"
     :text-danger="textDanger"
-    :placeholder="$t('Type string to filter by categories')"
+    :placeholder="t('Type string to filter by categories')"
     :max-element="maxElement"
     :multiple="multiple"
     :min-search-length="1"
@@ -20,151 +20,146 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicMultiselect,
-  },
-  props: {
-    defaultanswer: { default: "", type: String },
-    width: { default: "100%", type: String },
-    multiple: { default: false, type: Boolean },
-    reset: { default: false, type: Boolean },
-    allRubriques: { default: () => [], type: Array as () => Array<Rubrique> },
-    rubriqueSelected: { default: undefined, type: Number },
-    rubriqueSelectedArray: {
-      default: undefined,
-      type: Object as () => Array<number>,
-    },
-    id: { default: "rubrique-chooser", type: String },
-    withoutRubrique: { default: false, type: Boolean },
-    isDisabled: { default: false, type: Boolean },
-    noDeselect: { default: true, type: Boolean },
-    inModal: { default: false, type: Boolean },
-    label:{default: undefined, type: String },
-    displayLabel: { default: false, type: Boolean },
-    textDanger :{ default: undefined, type: String },
-  },
-  emits: [
-    "update:rubriqueSelected",
-    "update:rubriqueSelectedArray",
-    "selected",
-  ],
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-  data() {
-    return {
-      maxElement: 250 as number,
-      rubrique: undefined as Rubrique | undefined,
-      rubriqueForArray: [] as Array<Rubrique> | undefined,
-      withoutItem: { name: this.$t("Without rubric"), rubriqueId: -1 } as {
-        name: string;
-        rubriqueId: number;
-      },
-    };
+//Props 
+const props = defineProps({
+  defaultanswer: { default: "", type: String },
+  width: { default: "100%", type: String },
+  multiple: { default: false, type: Boolean },
+  reset: { default: false, type: Boolean },
+  allRubriques: { default: () => [], type: Array as () => Array<Rubrique> },
+  rubriqueSelected: { default: undefined, type: Number },
+  rubriqueSelectedArray: {
+    default: undefined,
+    type: Object as () => Array<number>,
   },
-  computed: {
-    getDefaultRubrique(): Rubrique | undefined {
-      if ("" === this.defaultanswer) {
-        return undefined;
-      }
-      return { name: this.defaultanswer, rubriqueId: 0 };
-    },
-    rubriques(): Array<Rubrique> {
-      const rubriques = this.allRubriques;
-      if (!this.getDefaultRubrique) {
-        return rubriques;
-      }
-      if (this.withoutRubrique) {
-        rubriques.unshift(this.withoutItem);
-      }
-      rubriques.unshift(this.getDefaultRubrique);
+  id: { default: "rubrique-chooser", type: String },
+  withoutRubrique: { default: false, type: Boolean },
+  isDisabled: { default: false, type: Boolean },
+  noDeselect: { default: true, type: Boolean },
+  inModal: { default: false, type: Boolean },
+  label:{default: undefined, type: String },
+  displayLabel: { default: false, type: Boolean },
+  textDanger :{ default: undefined, type: String },
+})
 
-      return rubriques;
-    },
-    model: {
-      get(): Rubrique | Array<Rubrique> | undefined {
-        return !this.multiple ? this.rubrique : this.rubriqueForArray;
-      },
-      set(value: Rubrique | Array<Rubrique> | undefined): void {
-        if (!this.multiple) {
-          this.rubrique = value as Rubrique | undefined;
-          return;
-        }
-        this.rubriqueForArray = value as Array<Rubrique>;
-      },
-    },
-  },
-  watch: {
-    rubriqueSelected: {
-      immediate: true,
-      handler() {
-        if (this.rubriqueSelected) {
-          this.initRubriqueSelected();
-        } else {
-          this.rubrique = this.getDefaultRubrique;
-        }
-      },
-    },
-    reset(): void {
-      this.rubrique = this.getDefaultRubrique;
-    },
+
+//Emits
+const emit = defineEmits([
+  "update:rubriqueSelected",
+  "update:rubriqueSelectedArray",
+  "selected"
+]);
+//COmposables
+const { t } = useI18n();
+
+
+//Data 
+const maxElement = ref(250);
+const rubrique: Ref<Rubrique | undefined> = ref(undefined);
+const rubriqueForArray: Ref<Array<Rubrique> | undefined> = ref([]);
+const withoutItem: Ref<{
+  name: string;
+  rubriqueId: number;
+}> = ref({ name: t("Without rubric"), rubriqueId: -1 });
+const selectRubriqueRef = useTemplateRef('selectRubrique');
+
+
+//Computed
+const getDefaultRubrique = computed(() => {
+  if ("" === props.defaultanswer) {
+    return undefined;
+  }
+  return { name: props.defaultanswer, rubriqueId: 0 };
+});
+const rubriques = computed(() => {
+  const rubriques = props.allRubriques;
+  if (!getDefaultRubrique.value) {
+    return rubriques;
+  }
+  if (props.withoutRubrique) {
+    rubriques.unshift(withoutItem.value);
+  }
+  rubriques.unshift(getDefaultRubrique.value);
+  return rubriques;
+});
+
+const model = computed({
+  get(): Rubrique | Array<Rubrique> | undefined {
+    return !props.multiple ? rubrique.value : rubriqueForArray.value;
   },
-  mounted() {
-    this.initRubriqueArray();
+  set(value: Rubrique | Array<Rubrique> | undefined): void {
+    if (!props.multiple) {
+      rubrique.value = value as Rubrique | undefined;
+      return;
+    }
+    rubriqueForArray.value = value as Array<Rubrique>;
   },
-  methods: {
-    onSearchRubrique(query: string): void {
-      let rubriques = this.rubriques;
-      if (query) {
-        rubriques = rubriques.filter((item: Rubrique) => {
-          return item.name.toUpperCase().includes(query.toUpperCase());
-        });
-      }
-      (
-        this.$refs.selectRubrique as InstanceType<typeof ClassicMultiselect>
-      ).afterSearch(rubriques, rubriques.length);
-    },
-    onRubriqueSelected(rubrique: Rubrique | Array<Rubrique>): void {
-      if (undefined !== this.rubriqueSelected) {
-        this.$emit(
-          "update:rubriqueSelected",
-          (rubrique as Rubrique).rubriqueId,
-        );
-      }
-      if (undefined !== this.rubriqueSelectedArray) {
-        const idsArray: Array<number> = [];
-        (rubrique as Array<Rubrique>).forEach((el: Rubrique) => {
-          idsArray.push(el.rubriqueId ?? 0);
-        });
-        this.$emit("update:rubriqueSelectedArray", idsArray);
-      } else {
-        this.$emit("selected", rubrique);
-      }
-    },
-    initRubriqueSelected(): void {
-      this.rubrique =
-        this.rubriques.find((el: Rubrique) => {
-          return el.rubriqueId === this.rubriqueSelected;
-        }) ?? this.getDefaultRubrique;
-    },
+})
 
-    initRubriqueArray(): void {
-      if (!this.rubriqueForArray || !this.rubriqueSelectedArray) {
-        return;
-      }
-      this.rubriqueForArray.length = 0;
-      this.rubriqueSelectedArray.forEach((element: number) => {
-        const item = this.rubriques.find((el: Rubrique) => {
-          return el.rubriqueId === element;
-        });
-        if (this.rubriqueForArray && item) {
-          this.rubriqueForArray.push(item);
-        }
-      });
-    },
-  },
+
+//Watch
+watch(()=>props.rubriqueSelected, () => {
+  if (props.rubriqueSelected) {
+    initRubriqueSelected();
+  } else {
+    rubrique.value = getDefaultRubrique.value;
+  }
+}, {immediate: true});
+watch(()=>props.reset, () => {
+  rubrique.value = getDefaultRubrique.value;
 });
+
+onMounted(()=>initRubriqueArray())
+
+
+//Methods
+function onSearchRubrique(query: string): void {
+  let tempRubriques = rubriques.value;
+  if (query) {
+    tempRubriques = tempRubriques.filter((item: Rubrique) => {
+      return item.name.toUpperCase().includes(query.toUpperCase());
+    });
+  }
+  (selectRubriqueRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(tempRubriques, tempRubriques.length);
+}
+function onRubriqueSelected(rubrique: Rubrique | Array<Rubrique>): void {
+  if (undefined !== props.rubriqueSelected) {
+    emit("update:rubriqueSelected",(rubrique as Rubrique).rubriqueId);
+  }
+  if (undefined !== props.rubriqueSelectedArray) {
+    const idsArray: Array<number> = [];
+    (rubrique as Array<Rubrique>).forEach((el: Rubrique) => {
+      idsArray.push(el.rubriqueId ?? 0);
+    });
+    emit("update:rubriqueSelectedArray", idsArray);
+  } else {
+    emit("selected", rubrique);
+  }
+}
+function initRubriqueSelected(): void {
+  rubrique.value =
+    rubriques.value.find((el: Rubrique) => {
+      return el.rubriqueId === props.rubriqueSelected;
+    }) ?? getDefaultRubrique.value;
+}
+function initRubriqueArray(): void {
+  if (!rubriqueForArray.value || !props.rubriqueSelectedArray) {
+    return;
+  }
+  rubriqueForArray.value.length = 0;
+  props.rubriqueSelectedArray.forEach((element: number) => {
+    const item = rubriques.value.find((el: Rubrique) => {
+      return el.rubriqueId === element;
+    });
+    if (rubriqueForArray.value && item) {
+      rubriqueForArray.value.push(item);
+    }
+  });
+}
 </script>

package/src/components/display/rubriques/RubriqueList.vue

@@ -3,7 +3,7 @@
     <div ref="rubriqueListContainer" class="rubrique-list-container">
       <select
         v-model="rubriquage"
-        :title="$t('By topic')"
+        :title="t('By topic')"
         class="c-hand"
         @change="onRubriquageSelected"
       >
@@ -17,7 +17,7 @@
       </select>
       <button
         v-for="rubrique in rubriqueDisplay"
-        :ref="'rubrique' + rubrique.rubriqueId"
+        :id="'rubrique' + rubrique.rubriqueId"
         :key="rubrique.rubriqueId"
         class="btn btn-primary btn-on-dark m-1"
         @click="addFilter(rubrique)"
@@ -29,7 +29,7 @@
       v-show="hidenRubriques.length"
       id="rubriques-dropdown"
       class="btn btn-primary btn-on-dark m-1"
-      :title="$t('See more')"
+      :title="t('See more')"
     >
       <PlusIcon />
     </button>
@@ -49,184 +49,164 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState, mapActions } from "pinia";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
 const RubriqueChooser = defineAsyncComponent(
   () => import("../rubriques/RubriqueChooser.vue"),
 );
-export default defineComponent({
-  name: "RubriqueList",
 
-  components: {
-    ClassicPopover,
-    RubriqueChooser,
-    PlusIcon,
-  },
+//Props 
+const props = defineProps({
+  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },
+})
 
-  props: {
-    rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },
-  },
+//Data 
+const hidenRubriques: Ref<Array<Rubrique>> = ref([]);
+const rubriquage: Ref<Rubriquage | undefined> = ref(undefined);
+const popoverRubriqueRef = useTemplateRef('popoverRubrique');
+const rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');
 
-  setup(){
-    const { modifyRubriquesFilter } = useRubriquesFilterParam();
-    return { modifyRubriquesFilter }
-  },
 
-  data() {
-    return {
-      hidenRubriques: [] as Array<Rubrique>,
-      rubriques: [] as Array<Rubrique>,
-      rubriquage: undefined as Rubriquage | undefined,
-    };
-  },
+//Composables
+const { t } = useI18n();
+const { modifyRubriquesFilter } = useRubriquesFilterParam();
+const filterStore = useFilterStore();
 
-  computed: {
-    ...mapState(useFilterStore, ["filterRubrique", "filterRubriqueDisplay"]),
-    rubriqueDisplay(): Array<Rubrique> {
-      return this.filterRubriqueDisplay.filter(
-        (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
-      );
-    },
-    rubriquageDisplay(): Array<Rubriquage> {
-      const elementToNotShow = Array.from(this.filterRubrique);
-      if (elementToNotShow.length) {
-        const rubriquageIdToNotShow = elementToNotShow.map(
-          (a) => a.rubriquageId,
-        );
-        return this.rubriquages.filter((element) => {
-          if (!element.rubriquageId) {
-            return;
-          }
-          return !rubriquageIdToNotShow.includes(element.rubriquageId);
-        });
-      }
-      return Array.from(this.rubriquages).toSorted((a,b) => {
-        if(a.title > b.title){
-          return 1;
-        }
-        return (b.title > a.title) ? -1 : 0;
-      });
-    },
-  },
-  watch: {
-    filterRubrique: {
-      deep: true,
-      handler() {
-        this.selectNewRubriquage();
-      },
-    },
-  },
 
-  mounted() {
-    this.selectNewRubriquage();
-  },
-  beforeUnmount(): void {
-    window.removeEventListener("resize", this.resizeWindow);
-  },
-  methods: {
-    ...mapActions(useFilterStore, ["filterUpdateRubriqueDisplay"]),
-    initRubriques(): void {
-      this.filterUpdateRubriqueDisplay(this.rubriquage?.rubriques ?? []);
-      window.addEventListener("resize", this.resizeWindow);
-      this.$nextTick(() => {
-        this.resizeWindow();
-      });
-    },
-    addFilterFromPopover(rubrique: Rubrique): void {
-      (this.$refs.popoverRubrique as InstanceType<typeof Popover>).clearClick();
-      this.addFilter(rubrique);
-    },
-    addFilter(rubrique: Rubrique): void {
-      if (!this.rubriquage) {
-        return;
-      }
-      const filterToAdd = {
-        rubriquageId: this.rubriquage.rubriquageId ?? 0,
-        rubriqueId: rubrique.rubriqueId ?? 0,
-        nameRubriquage: this.rubriquage.title,
-        nameRubrique: rubrique.name,
-      };
-      this.modifyRubriquesFilter((a) => {
-        a.push(filterToAdd);
-        return a;
-      });
-      this.selectNewRubriquage();
-    },
-    selectNewRubriquage() {
-      const rubriquageLength = this.rubriquages.length;
-      if (rubriquageLength === this.filterRubrique.length) {
-        return;
-      }
-      let index = 0;
-      const rubriquageAlreadyFilter = this.filterRubrique.map(
-        (a) => a.rubriquageId,
-      );
-      for (index; index < rubriquageLength; index++) {
-        const rubriquageIdIndex = this.rubriquages[index].rubriquageId;
-        if (
-          rubriquageIdIndex &&
-          !rubriquageAlreadyFilter.includes(rubriquageIdIndex)
-        ) {
-          break;
-        }
-      }
-      this.rubriquage = this.rubriquages[index];
-      this.initRubriques();
-    },
-    resizeWindow(): void {
-      const rubriqueList = this.$refs.rubriqueListContainer as HTMLElement;
-      if (null === rubriqueList) {
+//Computed
+const rubriqueDisplay = computed(() => {
+  return filterStore.filterRubriqueDisplay.filter(
+    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
+  );
+});
+const rubriquageDisplay = computed(() => {
+  const elementToNotShow = Array.from(filterStore.filterRubrique);
+  if (elementToNotShow.length) {
+    const rubriquageIdToNotShow = elementToNotShow.map(
+      (a) => a.rubriquageId,
+    );
+    return props.rubriquages.filter((element) => {
+      if (!element.rubriquageId) {
         return;
       }
-      rubriqueList.style.justifyContent = "flex-start";
-      this.hidenRubriques.length = 0;
-      this.rubriqueDisplay.forEach((element: Rubrique) => {
-        const el = (
-          this.$refs["rubrique" + element.rubriqueId] as Array<HTMLElement>
-        )[0];
-        if (!el) return;
-        if (el.classList.contains("hid")) {
-          el.classList.remove("hid");
-        }
-      });
-      this.rubriqueDisplay.forEach((element: Rubrique) => {
-        const el = (
-          this.$refs["rubrique" + element.rubriqueId] as Array<HTMLElement>
-        )[0];
-        if (!el) return;
-        const parent = el.parentElement;
-        if (
-          null !== parent &&
-          el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
-        ) {
-          return;
-        }
-        this.hidenRubriques.push(element);
-        if (!el.classList.contains("hid")) {
-          el.className += " hid";
-        }
-      });
-      if (!this.hidenRubriques.length) {
-        rubriqueList.style.justifyContent = "center";
-      }
-    },
-    onRubriquageSelected() {
-      this.initRubriques();
-    },
-  },
+      return !rubriquageIdToNotShow.includes(element.rubriquageId);
+    });
+  }
+  return Array.from(props.rubriquages).toSorted((a,b) => {
+    if(a.title > b.title){
+      return 1;
+    }
+    return (b.title > a.title) ? -1 : 0;
+  });
 });
-</script>
 
-<style lang="scss">
 
+//Watch
+watch(()=>filterStore.filterRubrique, () => {
+  selectNewRubriquage()
+}, {deep: true});
+
+onMounted(()=>selectNewRubriquage())
 
+onBeforeUnmount(()=> window.removeEventListener("resize", resizeWindow))
+
+
+//Methods
+function initRubriques(): void {
+  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);
+  window.addEventListener("resize", resizeWindow);
+  nextTick(() => {
+    resizeWindow();
+  });
+}
+function addFilterFromPopover(rubrique: Rubrique): void {
+  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;
+  popover.clearClick();
+  addFilter(rubrique);
+}
+function addFilter(rubrique: Rubrique): void {
+  if (!rubriquage.value) {
+    return;
+  }
+  const filterToAdd = {
+    rubriquageId: rubriquage.value.rubriquageId ?? 0,
+    rubriqueId: rubrique.rubriqueId ?? 0,
+    nameRubriquage: rubriquage.value.title,
+    nameRubrique: rubrique.name,
+  };
+  modifyRubriquesFilter((a) => {
+    a.push(filterToAdd);
+    return a;
+  });
+  selectNewRubriquage();
+}
+function selectNewRubriquage() {
+  const rubriquageLength = props.rubriquages.length;
+  if (rubriquageLength === filterStore.filterRubrique.length) {
+    return;
+  }
+  let index = 0;
+  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(
+    (a) => a.rubriquageId,
+  );
+  for (index; index < rubriquageLength; index++) {
+    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;
+    if (
+      rubriquageIdIndex &&
+      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)
+    ) {
+      break;
+    }
+  }
+  rubriquage.value = props.rubriquages[index];
+  initRubriques();
+}
+function resizeWindow(): void {
+  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;
+  if (null === rubriqueList) {
+    return;
+  }
+  rubriqueList.style.justifyContent = "flex-start";
+  hidenRubriques.value.length = 0;
+  rubriqueDisplay.value.forEach((element: Rubrique) => {
+    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);
+    if (!el) return;
+    if (el.classList.contains("hid")) {
+      el.classList.remove("hid");
+    }
+  });
+  rubriqueDisplay.value.forEach((element: Rubrique) => {
+    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);
+    if (!el) return;
+    const parent = el.parentElement;
+    if (
+      null !== parent &&
+      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
+    ) {
+      return;
+    }
+    hidenRubriques.value.push(element);
+    if (!el.classList.contains("hid")) {
+      el.className += " hid";
+    }
+  });
+  if (!hidenRubriques.value.length) {
+    rubriqueList.style.justifyContent = "center";
+  }
+}
+function onRubriquageSelected() {
+  initRubriques();
+}
+</script>
+
+<style lang="scss">
 .octopus-app {
   .rubrique-list-container {
     display: flex;