@saooti/octopus-sdk 42.2.0 → 42.2.1

package/dist/RubriqueFilter-OA_DJKL1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueFilter-OA_DJKL1.mjs","names":[],"sources":["../src/components/display/filter/RubriqueFilter.vue","../src/components/display/filter/RubriqueFilter.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"organisation && rubriquageData\"\n    class=\"d-flex mt-3 align-items-center\"\n  >\n    <ClassicCheckbox\n      v-model:text-init=\"isRubriquage\"\n      class=\"flex-shrink-0\"\n      id-checkbox=\"search-rubriquage-checkbox\"\n      :label=\"t('By topic')\"\n    />\n    <div v-if=\"isRubriquage\" class=\"d-flex ms-1 flex-column flex-grow-1\">\n      <RubriqueChoice\n        v-for=\"(filter, index) in internRubriqueFilter\"\n        :key=\"index\"\n        :index=\"index\"\n        :rubriquage-display=\"getRubriquage(index)\"\n        :rubrique-id-selected=\"filter.rubriqueId\"\n        :rubriquage-id-selected=\"filter.rubriquageId\"\n        :no-deselect=\"true\"\n        @update-rubrique=\"updateRubrique\"\n        @update-rubriquage=\"updateRubriquage\"\n        @delete-rubrique-choice=\"deleteRubriqueChoice(index)\"\n      />\n      <button\n        v-if=\"availableRubriquage.length\"\n        class=\"btn mt-2\"\n        @click=\"addFilter\"\n      >\n        {{ t(\"Add a sort criterion by topic\") }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport classicApi from \"../../../api/classicApi\";\nimport ClassicCheckbox from \"../../form/ClassicCheckbox.vue\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { RubriquageFilter } from \"@/stores/class/rubrique/rubriquageFilter\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, Ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChoice = defineAsyncComponent(\n  () => import(\"./RubriqueChoice.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  rubriqueFilter: {\n    default: () => [],\n    type: Array as () => Array<RubriquageFilter>,\n  },\n})\n\n//Emits\nconst emit = defineEmits([\"update:rubriqueFilter\", \"warning\"]);\n\n//Data \nconst isRubriquage = ref(false);\nconst internRubriqueFilter: Ref<Array<RubriquageFilter>> = ref([]);\nconst rubriquageData: Ref<Array<Rubriquage>> = ref([]);\nconst needToFetchRubrique = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { stringifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n//Computed\nconst organisation = computed(() => props.organisationId ? props.organisationId : filterStore.filterOrgaId);\nconst availableRubriquage = computed(() => getAvailableRubriquage(internRubriqueFilter.value));\n\n\n//Watch\nwatch(organisation, () => {\n  if (isRubriquage.value) {\n    fetchTopics();\n  } else {\n    needToFetchRubrique.value = true;\n  }\n});\nwatch(()=>props.rubriqueFilter, () => {\n  isRubriquage.value = 0 !== props.rubriqueFilter?.length;\n  if (\n    props.rubriqueFilter &&\n    stringifyRubriquesFilter(internRubriqueFilter.value) !==\n    stringifyRubriquesFilter(props.rubriqueFilter)\n  ) {\n    internRubriqueFilter.value = props.rubriqueFilter;\n  }\n}, {deep: true,immediate: true});\nwatch(isRubriquage, () => {\n  if (needToFetchRubrique.value) {\n    fetchTopics();\n  }\n  if (isRubriquage.value && 0 === internRubriqueFilter.value.length) {\n    addFilter();\n  }\n  const value = isRubriquage.value ? internRubriqueFilter.value : [];\n  if (\n    stringifyRubriquesFilter(value) !==\n    stringifyRubriquesFilter(props.rubriqueFilter)\n  ) {\n    emit(\"update:rubriqueFilter\", value);\n  }\n});\n\n\nonBeforeMount(()=>fetchTopics())\n\n//Methods\nfunction updateInternRubriqueFilter() {\n  if (isRubriquage.value) {\n    emit(\"update:rubriqueFilter\", internRubriqueFilter.value);\n  } else {\n    isRubriquage.value = true;\n  }\n}\nfunction addFilter(): void {\n  if (availableRubriquage.value?.[0].rubriquageId) {\n    internRubriqueFilter.value.push({\n      rubriquageId: availableRubriquage.value[0].rubriquageId,\n      rubriqueId: 0,\n      nameRubriquage: rubriquageData.value[0].title,\n      nameRubrique: \"\",\n    });\n    updateInternRubriqueFilter();\n  }\n}\nfunction deleteRubriqueChoice(index: number): void {\n  internRubriqueFilter.value.splice(index, 1);\n  updateInternRubriqueFilter();\n}\nfunction getAvailableRubriquage(\n  filterRubrique: Array<RubriquageFilter>,\n): Array<Rubriquage> {\n  if (filterRubrique.length) {\n    const rubriquageIdToNotShow = filterRubrique.map((a) => a.rubriquageId);\n    return rubriquageData.value.filter((element) => {\n      if (element.rubriquageId) {\n        return !rubriquageIdToNotShow.includes(element.rubriquageId);\n      }\n    });\n  }\n  return rubriquageData.value;\n}\nfunction getRubriquage(index: number) {\n  const elementToNotShow = Array.from(internRubriqueFilter.value);\n  elementToNotShow.splice(index, 1);\n  return getAvailableRubriquage(elementToNotShow);\n}\nfunction updateRubrique(newValue: { rubriqueId: number; index: number }): void {\n  const item = internRubriqueFilter.value[newValue.index];\n  item.rubriqueId = newValue.rubriqueId;\n  internRubriqueFilter.value.splice(newValue.index, 1, item);\n  updateInternRubriqueFilter();\n}\nfunction updateRubriquage(newValue: { rubriquageId: number; index: number }): void {\n  const item = internRubriqueFilter.value[newValue.index];\n  item.rubriquageId = newValue.rubriquageId;\n  internRubriqueFilter.value.splice(newValue.index, 1, item);\n  updateInternRubriqueFilter();\n}\nasync function fetchTopics(): Promise<void> {\n  if (!organisation.value) return;\n  needToFetchRubrique.value = false;\n  const data = await classicApi.fetchData<Array<Rubriquage>>({\n    api: 0,\n    path: \"rubriquage/find/\" + organisation.value,\n    specialTreatement: true,\n  });\n  rubriquageData.value = data.filter((element: Rubriquage) => {\n    return element.rubriques.length;\n  });\n  if (0 === rubriquageData.value.length) {\n    if (internRubriqueFilter.value.length) {\n      internRubriqueFilter.value = [];\n      updateInternRubriqueFilter();\n      emit(\"warning\");\n    }\n    return;\n  }\n  const internRubriqueFilterToUpdate = [];\n  for (const filter of internRubriqueFilter.value) {\n    const rubriquageExist = rubriquageData.value.find(\n      (element) => element.rubriquageId === filter.rubriquageId,\n    );\n    if (rubriquageExist) {\n      internRubriqueFilterToUpdate.push(filter);\n    }\n  }\n  if (\n    internRubriqueFilterToUpdate.length !== internRubriqueFilter.value.length\n  ) {\n    internRubriqueFilter.value = internRubriqueFilterToUpdate;\n    updateInternRubriqueFilter();\n    emit(\"warning\");\n  }\n}\n</script>\n","<template>\n  <div\n    v-if=\"organisation && rubriquageData\"\n    class=\"d-flex mt-3 align-items-center\"\n  >\n    <ClassicCheckbox\n      v-model:text-init=\"isRubriquage\"\n      class=\"flex-shrink-0\"\n      id-checkbox=\"search-rubriquage-checkbox\"\n      :label=\"t('By topic')\"\n    />\n    <div v-if=\"isRubriquage\" class=\"d-flex ms-1 flex-column flex-grow-1\">\n      <RubriqueChoice\n        v-for=\"(filter, index) in internRubriqueFilter\"\n        :key=\"index\"\n        :index=\"index\"\n        :rubriquage-display=\"getRubriquage(index)\"\n        :rubrique-id-selected=\"filter.rubriqueId\"\n        :rubriquage-id-selected=\"filter.rubriquageId\"\n        :no-deselect=\"true\"\n        @update-rubrique=\"updateRubrique\"\n        @update-rubriquage=\"updateRubriquage\"\n        @delete-rubrique-choice=\"deleteRubriqueChoice(index)\"\n      />\n      <button\n        v-if=\"availableRubriquage.length\"\n        class=\"btn mt-2\"\n        @click=\"addFilter\"\n      >\n        {{ t(\"Add a sort criterion by topic\") }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport classicApi from \"../../../api/classicApi\";\nimport ClassicCheckbox from \"../../form/ClassicCheckbox.vue\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { RubriquageFilter } from \"@/stores/class/rubrique/rubriquageFilter\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { defineAsyncComponent, ref, Ref, computed, watch, onBeforeMount } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChoice = defineAsyncComponent(\n  () => import(\"./RubriqueChoice.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  organisationId: { default: undefined, type: String },\n  rubriqueFilter: {\n    default: () => [],\n    type: Array as () => Array<RubriquageFilter>,\n  },\n})\n\n//Emits\nconst emit = defineEmits([\"update:rubriqueFilter\", \"warning\"]);\n\n//Data \nconst isRubriquage = ref(false);\nconst internRubriqueFilter: Ref<Array<RubriquageFilter>> = ref([]);\nconst rubriquageData: Ref<Array<Rubriquage>> = ref([]);\nconst needToFetchRubrique = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { stringifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n//Computed\nconst organisation = computed(() => props.organisationId ? props.organisationId : filterStore.filterOrgaId);\nconst availableRubriquage = computed(() => getAvailableRubriquage(internRubriqueFilter.value));\n\n\n//Watch\nwatch(organisation, () => {\n  if (isRubriquage.value) {\n    fetchTopics();\n  } else {\n    needToFetchRubrique.value = true;\n  }\n});\nwatch(()=>props.rubriqueFilter, () => {\n  isRubriquage.value = 0 !== props.rubriqueFilter?.length;\n  if (\n    props.rubriqueFilter &&\n    stringifyRubriquesFilter(internRubriqueFilter.value) !==\n    stringifyRubriquesFilter(props.rubriqueFilter)\n  ) {\n    internRubriqueFilter.value = props.rubriqueFilter;\n  }\n}, {deep: true,immediate: true});\nwatch(isRubriquage, () => {\n  if (needToFetchRubrique.value) {\n    fetchTopics();\n  }\n  if (isRubriquage.value && 0 === internRubriqueFilter.value.length) {\n    addFilter();\n  }\n  const value = isRubriquage.value ? internRubriqueFilter.value : [];\n  if (\n    stringifyRubriquesFilter(value) !==\n    stringifyRubriquesFilter(props.rubriqueFilter)\n  ) {\n    emit(\"update:rubriqueFilter\", value);\n  }\n});\n\n\nonBeforeMount(()=>fetchTopics())\n\n//Methods\nfunction updateInternRubriqueFilter() {\n  if (isRubriquage.value) {\n    emit(\"update:rubriqueFilter\", internRubriqueFilter.value);\n  } else {\n    isRubriquage.value = true;\n  }\n}\nfunction addFilter(): void {\n  if (availableRubriquage.value?.[0].rubriquageId) {\n    internRubriqueFilter.value.push({\n      rubriquageId: availableRubriquage.value[0].rubriquageId,\n      rubriqueId: 0,\n      nameRubriquage: rubriquageData.value[0].title,\n      nameRubrique: \"\",\n    });\n    updateInternRubriqueFilter();\n  }\n}\nfunction deleteRubriqueChoice(index: number): void {\n  internRubriqueFilter.value.splice(index, 1);\n  updateInternRubriqueFilter();\n}\nfunction getAvailableRubriquage(\n  filterRubrique: Array<RubriquageFilter>,\n): Array<Rubriquage> {\n  if (filterRubrique.length) {\n    const rubriquageIdToNotShow = filterRubrique.map((a) => a.rubriquageId);\n    return rubriquageData.value.filter((element) => {\n      if (element.rubriquageId) {\n        return !rubriquageIdToNotShow.includes(element.rubriquageId);\n      }\n    });\n  }\n  return rubriquageData.value;\n}\nfunction getRubriquage(index: number) {\n  const elementToNotShow = Array.from(internRubriqueFilter.value);\n  elementToNotShow.splice(index, 1);\n  return getAvailableRubriquage(elementToNotShow);\n}\nfunction updateRubrique(newValue: { rubriqueId: number; index: number }): void {\n  const item = internRubriqueFilter.value[newValue.index];\n  item.rubriqueId = newValue.rubriqueId;\n  internRubriqueFilter.value.splice(newValue.index, 1, item);\n  updateInternRubriqueFilter();\n}\nfunction updateRubriquage(newValue: { rubriquageId: number; index: number }): void {\n  const item = internRubriqueFilter.value[newValue.index];\n  item.rubriquageId = newValue.rubriquageId;\n  internRubriqueFilter.value.splice(newValue.index, 1, item);\n  updateInternRubriqueFilter();\n}\nasync function fetchTopics(): Promise<void> {\n  if (!organisation.value) return;\n  needToFetchRubrique.value = false;\n  const data = await classicApi.fetchData<Array<Rubriquage>>({\n    api: 0,\n    path: \"rubriquage/find/\" + organisation.value,\n    specialTreatement: true,\n  });\n  rubriquageData.value = data.filter((element: Rubriquage) => {\n    return element.rubriques.length;\n  });\n  if (0 === rubriquageData.value.length) {\n    if (internRubriqueFilter.value.length) {\n      internRubriqueFilter.value = [];\n      updateInternRubriqueFilter();\n      emit(\"warning\");\n    }\n    return;\n  }\n  const internRubriqueFilterToUpdate = [];\n  for (const filter of internRubriqueFilter.value) {\n    const rubriquageExist = rubriquageData.value.find(\n      (element) => element.rubriquageId === filter.rubriquageId,\n    );\n    if (rubriquageExist) {\n      internRubriqueFilterToUpdate.push(filter);\n    }\n  }\n  if (\n    internRubriqueFilterToUpdate.length !== internRubriqueFilter.value.length\n  ) {\n    internRubriqueFilter.value = internRubriqueFilterToUpdate;\n    updateInternRubriqueFilter();\n    emit(\"warning\");\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/RubriqueList-3zO1zZRT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-3zO1zZRT.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-B94NM5yi.mjs

@@ -0,0 +1,206 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { r as useFilterStore } from "./classicApi-CkDHWZG1.mjs";
+import { t as ClassicPopover_default } from "./ClassicPopover-BIyLKorz.mjs";
+import { t as useRubriquesFilterParam } from "./useRubriquesFilterParam--x07HEw1.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, useTemplateRef, vModelSelect, vShow, watch, withCtx, withDirectives } from "vue";
+import PlusIcon from "vue-material-design-icons/Plus.vue";
+import { useI18n } from "vue-i18n";
+//#region src/components/display/rubriques/RubriqueList.vue?vue&type=script&setup=true&lang.ts
+var RubriqueList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RubriqueList",
+	props: { rubriquages: {
+		default: () => [],
+		type: Array
+	} },
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const RubriqueChooser = defineAsyncComponent(() => import("./RubriqueChooser-BceFw2x2.mjs"));
+		const props = __props;
+		const hidenRubriques = ref([]);
+		const rubriquage = ref(void 0);
+		const popoverRubriqueRef = useTemplateRef("popoverRubrique");
+		const rubriqueListContainerRef = useTemplateRef("rubriqueListContainer");
+		const { t } = useI18n();
+		const { modifyRubriquesFilter } = useRubriquesFilterParam();
+		const filterStore = useFilterStore();
+		const rubriqueDisplay = computed(() => {
+			return filterStore.filterRubriqueDisplay.filter((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;
+					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;
+			});
+		});
+		const rubriqueChooserText = computed(() => {
+			if (!rubriquage.value) return "";
+			let topic = rubriquage.value.title;
+			return t("Enter name of topic", { topic });
+		});
+		watch(() => filterStore.filterRubrique, () => {
+			selectNewRubriquage();
+		}, { deep: true });
+		onMounted(() => selectNewRubriquage());
+		onBeforeUnmount(() => window.removeEventListener("resize", resizeWindow));
+		function initRubriques() {
+			filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);
+			window.addEventListener("resize", resizeWindow);
+			nextTick(() => {
+				resizeWindow();
+			});
+		}
+		function addFilterFromPopover(rubrique) {
+			(popoverRubriqueRef?.value).clearClick();
+			addFilter(rubrique);
+		}
+		function addFilter(rubrique) {
+			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 < rubriquageLength; index++) {
+				const rubriquageIdIndex = props.rubriquages[index].rubriquageId;
+				if (rubriquageIdIndex && !rubriquageAlreadyFilter.includes(rubriquageIdIndex)) break;
+			}
+			rubriquage.value = props.rubriquages[index];
+			initRubriques();
+		}
+		function resizeWindow() {
+			const rubriqueList = rubriqueListContainerRef?.value;
+			if (null === rubriqueList) return;
+			rubriqueList.style.justifyContent = "flex-start";
+			hidenRubriques.value.length = 0;
+			rubriqueDisplay.value.forEach((element) => {
+				const el = rubriqueList.querySelector("#rubrique" + element.rubriqueId);
+				if (!el) return;
+				if (el.classList.contains("hid")) el.classList.remove("hid");
+			});
+			rubriqueDisplay.value.forEach((element) => {
+				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();
+		}
+		const __returned__ = {
+			RubriqueChooser,
+			props,
+			hidenRubriques,
+			rubriquage,
+			popoverRubriqueRef,
+			rubriqueListContainerRef,
+			t,
+			modifyRubriquesFilter,
+			filterStore,
+			rubriqueDisplay,
+			rubriquageDisplay,
+			rubriqueChooserText,
+			initRubriques,
+			addFilterFromPopover,
+			addFilter,
+			selectNewRubriquage,
+			resizeWindow,
+			onRubriquageSelected,
+			PlusIcon,
+			ClassicPopover: ClassicPopover_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+//#endregion
+//#region src/components/display/rubriques/RubriqueList.vue
+var _hoisted_1 = { class: "d-inline-flex w-100 mb-3 px-3 hide-phone" };
+var _hoisted_2 = {
+	ref: "rubriqueListContainer",
+	class: "rubrique-list-container"
+};
+var _hoisted_3 = ["title"];
+var _hoisted_4 = ["value"];
+var _hoisted_5 = ["id", "onClick"];
+var _hoisted_6 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [
+		createElementVNode("div", _hoisted_2, [
+			createCommentVNode(" Liste déroulante pour sélectionner le rubriquage "),
+			withDirectives(createElementVNode("select", {
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.rubriquage = $event),
+				title: $setup.t("By topic"),
+				class: "c-hand",
+				onChange: $setup.onRubriquageSelected
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.rubriquageDisplay, (myRubriquage) => {
+				return openBlock(), createElementBlock("option", {
+					key: myRubriquage.rubriquageId,
+					value: myRubriquage
+				}, toDisplayString(myRubriquage.title), 9, _hoisted_4);
+			}), 128))], 40, _hoisted_3), [[vModelSelect, $setup.rubriquage]]),
+			createCommentVNode(" Boutons de sélection de la rubrique "),
+			(openBlock(true), createElementBlock(Fragment, null, renderList($setup.rubriqueDisplay, (rubrique) => {
+				return openBlock(), createElementBlock("button", {
+					id: "rubrique" + rubrique.rubriqueId,
+					key: rubrique.rubriqueId,
+					class: "btn btn-primary btn-on-dark m-1",
+					onClick: ($event) => $setup.addFilter(rubrique)
+				}, toDisplayString(rubrique.name), 9, _hoisted_5);
+			}), 128))
+		], 512),
+		createCommentVNode(" Bouton pour afficher les rubriques cachées "),
+		withDirectives(createElementVNode("button", {
+			id: "rubriques-dropdown",
+			class: "btn btn-primary btn-on-dark m-1",
+			title: $setup.t("See more")
+		}, [createVNode($setup["PlusIcon"])], 8, _hoisted_6), [[vShow, $setup.hidenRubriques.length]]),
+		createCommentVNode(" Popup de sélection des rubriques cachées "),
+		createVNode($setup["ClassicPopover"], {
+			ref: "popoverRubrique",
+			target: "rubriques-dropdown",
+			"only-click": true,
+			"left-pos": true
+		}, {
+			default: withCtx(() => [$setup.hidenRubriques.length ? (openBlock(), createBlock($setup["RubriqueChooser"], {
+				key: 0,
+				class: "rubrique-chooser-minwidth",
+				"all-rubriques": $setup.hidenRubriques,
+				placeholder: $setup.rubriqueChooserText,
+				onSelected: _cache[1] || (_cache[1] = ($event) => $setup.addFilterFromPopover($event))
+			}, null, 8, ["all-rubriques", "placeholder"])) : createCommentVNode("v-if", true)]),
+			_: 1
+		}, 512)
+	]);
+}
+var RubriqueList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RubriqueList_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/julien/Workspace/octopus-sdk/src/components/display/rubriques/RubriqueList.vue"]]);
+//#endregion
+export { RubriqueList_default as default };
+
+//# sourceMappingURL=RubriqueList-B94NM5yi.mjs.map

package/dist/RubriqueList-B94NM5yi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-B94NM5yi.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-BCN0C7QF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-BCN0C7QF.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-Cw-CkXW1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-Cw-CkXW1.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-D4Fq4Y9e.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-D4Fq4Y9e.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-DYWDfwI_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-DYWDfwI_.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriqueList-FTM4mj2p.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriqueList-FTM4mj2p.mjs","names":[],"sources":["../src/components/display/rubriques/RubriqueList.vue","../src/components/display/rubriques/RubriqueList.vue"],"sourcesContent":["<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n","<template>\n  <div class=\"d-inline-flex w-100 mb-3 px-3 hide-phone\">\n    <div ref=\"rubriqueListContainer\" class=\"rubrique-list-container\">\n\n      <!-- Liste déroulante pour sélectionner le rubriquage -->\n      <select\n        v-model=\"rubriquage\"\n        :title=\"t('By topic')\"\n        class=\"c-hand\"\n        @change=\"onRubriquageSelected\"\n      >\n        <option\n          v-for=\"myRubriquage in rubriquageDisplay\"\n          :key=\"myRubriquage.rubriquageId\"\n          :value=\"myRubriquage\"\n        >\n          {{ myRubriquage.title }}\n        </option>\n      </select>\n\n      <!-- Boutons de sélection de la rubrique -->\n      <button\n        v-for=\"rubrique in rubriqueDisplay\"\n        :id=\"'rubrique' + rubrique.rubriqueId\"\n        :key=\"rubrique.rubriqueId\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"addFilter(rubrique)\"\n      >\n        {{ rubrique.name }}\n      </button>\n    </div>\n\n    <!-- Bouton pour afficher les rubriques cachées -->\n    <button\n      v-show=\"hidenRubriques.length\"\n      id=\"rubriques-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n\n    <!-- Popup de sélection des rubriques cachées -->\n    <ClassicPopover\n      ref=\"popoverRubrique\"\n      target=\"rubriques-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <RubriqueChooser\n        v-if=\"hidenRubriques.length\"\n        class=\"rubrique-chooser-minwidth\"\n        :all-rubriques=\"hidenRubriques\"\n        :placeholder=\"rubriqueChooserText\"\n        @selected=\"addFilterFromPopover($event)\"\n      />\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRubriquesFilterParam } from \"../../composable/route/useRubriquesFilterParam\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nimport { Rubriquage } from \"@/stores/class/rubrique/rubriquage\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst RubriqueChooser = defineAsyncComponent(\n  () => import(\"../rubriques/RubriqueChooser.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },\n})\n\n//Data \nconst hidenRubriques: Ref<Array<Rubrique>> = ref([]);\nconst rubriquage: Ref<Rubriquage | undefined> = ref(undefined);\nconst popoverRubriqueRef = useTemplateRef('popoverRubrique');\nconst rubriqueListContainerRef = useTemplateRef('rubriqueListContainer');\n\n\n//Composables\nconst { t } = useI18n();\nconst { modifyRubriquesFilter } = useRubriquesFilterParam();\nconst filterStore = useFilterStore();\n\n\n//Computed\nconst rubriqueDisplay = computed(() => {\n  return filterStore.filterRubriqueDisplay.filter(\n    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,\n  );\n});\nconst rubriquageDisplay = computed(() => {\n  const elementToNotShow = Array.from(filterStore.filterRubrique);\n  if (elementToNotShow.length) {\n    const rubriquageIdToNotShow = elementToNotShow.map(\n      (a) => a.rubriquageId,\n    );\n    return props.rubriquages.filter((element) => {\n      if (!element.rubriquageId) {\n        return;\n      }\n      return !rubriquageIdToNotShow.includes(element.rubriquageId);\n    });\n  }\n  return Array.from(props.rubriquages).toSorted((a,b) => {\n    if(a.title > b.title){\n      return 1;\n    }\n    return (b.title > a.title) ? -1 : 0;\n  });\n});\n\n// Retourne le texte à afficher dans le RubriqueChooser\nconst rubriqueChooserText = computed(() => {\n  if (!rubriquage.value) {\n    return '';\n  }\n  let topic = rubriquage.value.title;\n  return t('Enter name of topic', { topic });\n});\n\n\n//Watch\nwatch(()=>filterStore.filterRubrique, () => {\n  selectNewRubriquage()\n}, {deep: true});\n\nonMounted(()=>selectNewRubriquage())\n\nonBeforeUnmount(()=> window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction initRubriques(): void {\n  filterStore.filterUpdateRubriqueDisplay(rubriquage.value?.rubriques ?? []);\n  window.addEventListener(\"resize\", resizeWindow);\n  nextTick(() => {\n    resizeWindow();\n  });\n}\nfunction addFilterFromPopover(rubrique: Rubrique): void {\n  const popover = popoverRubriqueRef?.value as InstanceType<typeof ClassicPopover>;\n  popover.clearClick();\n  addFilter(rubrique);\n}\nfunction addFilter(rubrique: Rubrique): void {\n  if (!rubriquage.value) {\n    return;\n  }\n  const filterToAdd = {\n    rubriquageId: rubriquage.value.rubriquageId ?? 0,\n    rubriqueId: rubrique.rubriqueId ?? 0,\n    nameRubriquage: rubriquage.value.title,\n    nameRubrique: rubrique.name,\n  };\n  modifyRubriquesFilter((a) => {\n    a.push(filterToAdd);\n    return a;\n  });\n  selectNewRubriquage();\n}\nfunction selectNewRubriquage() {\n  const rubriquageLength = props.rubriquages.length;\n  if (rubriquageLength === filterStore.filterRubrique.length) {\n    return;\n  }\n  let index = 0;\n  const rubriquageAlreadyFilter = filterStore.filterRubrique.map(\n    (a) => a.rubriquageId,\n  );\n  for (index; index < rubriquageLength; index++) {\n    const rubriquageIdIndex = props.rubriquages[index].rubriquageId;\n    if (\n      rubriquageIdIndex &&\n      !rubriquageAlreadyFilter.includes(rubriquageIdIndex)\n    ) {\n      break;\n    }\n  }\n  rubriquage.value = props.rubriquages[index];\n  initRubriques();\n}\nfunction resizeWindow(): void {\n  const rubriqueList = rubriqueListContainerRef?.value as HTMLElement;\n  if (null === rubriqueList) {\n    return;\n  }\n  rubriqueList.style.justifyContent = \"flex-start\";\n  hidenRubriques.value.length = 0;\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  rubriqueDisplay.value.forEach((element: Rubrique) => {\n    const el = rubriqueList.querySelector('#rubrique' + element.rubriqueId);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      null !== parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenRubriques.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenRubriques.value.length) {\n    rubriqueList.style.justifyContent = \"center\";\n  }\n}\nfunction onRubriquageSelected() {\n  initRubriques();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .rubrique-list-container {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    padding: 0 4rem;\n\n    select {\n      width: auto;\n      border-radius: var(--octopus-border-radius);\n      margin: 0.25rem;\n      font-size: 0.6rem;\n      padding: 0.5rem;\n    }\n  }\n\n  #popoverrubriques-dropdown {\n    overflow: initial !important;\n  }\n\n  .rubrique-chooser-minwidth {\n    min-width: 400px;\n\n    @media (width <= 500px) {\n      min-width: 90vw;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/RubriquePage-B06bcAoC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RubriquePage-B06bcAoC.mjs","names":[],"sources":["../src/components/pages/RubriquePage.vue","../src/components/pages/RubriquePage.vue"],"sourcesContent":["<template>\n  <section v-if=\"isInit\" class=\"page-box\">\n    <h1>{{ title }}</h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :rubrique-id=\"[rubriqueId]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport {useSeoTitleUrl} from \"../composable/route/useSeoTitleUrl\";\nimport classicApi from \"../../api/classicApi\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  rubriqueId: { default: undefined, type: Number },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst title = ref(\"\");\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { updatePathParams } = useSeoTitleUrl();\n\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.rubriqueId, async () => {\n  const data = await classicApi.fetchData<Rubrique>({\n    api: 0,\n    path: \"rubrique/\" + props.rubriqueId,\n  });\n  updatePathParams(data.name);\n  title.value = data.name;\n}, {immediate: true});\n\n</script>\n","<template>\n  <section v-if=\"isInit\" class=\"page-box\">\n    <h1>{{ title }}</h1>\n    <ProductorSearch\n      v-model:organisation-id=\"organisationId\"\n      v-model:search-pattern=\"searchPattern\"\n    />\n    <PodcastList\n      :first=\"paginateFirst\"\n      :size=\"ps\"\n      :rubrique-id=\"[rubriqueId]\"\n      :organisation-id=\"orgaArray\"\n      :query=\"searchMinSize\"\n      :sort-criteria=\"sortOrder ?? 'DATE'\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport {useSeoTitleUrl} from \"../composable/route/useSeoTitleUrl\";\nimport classicApi from \"../../api/classicApi\";\nimport PodcastList from \"../display/podcasts/PodcastList.vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\nimport { Rubrique } from \"@/stores/class/rubrique/rubrique\";\nconst ProductorSearch = defineAsyncComponent(\n  () => import(\"../display/filter/ProductorSearch.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  rubriqueId: { default: undefined, type: Number },\n  routeOrga: { default: undefined, type: String },\n  routeQuery: { default: \"\", type: String },\n});\n\n//Data \nconst title = ref(\"\");\n\n//Composables\nconst {\n  searchPattern,\n  organisationId,\n  searchMinSize,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props);\nconst { updatePathParams } = useSeoTitleUrl();\n\n\n//Computed\nconst orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);\nconst sortOrder = computed(() =>{\n  if(searchMinSize.value.length){\n    return \"SCORE\";\n  }\n  return undefined;\n});\n\n//Watch\nwatch(()=>props.rubriqueId, async () => {\n  const data = await classicApi.fetchData<Rubrique>({\n    api: 0,\n    path: \"rubrique/\" + props.rubriqueId,\n  });\n  updatePathParams(data.name);\n  title.value = data.name;\n}, {immediate: true});\n\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,kBAAkB,2BAChB,OAAO,kCAAA,MAAA,MAAA,EAAA,CAAA,CACf;EAGA,MAAM,QAAQ;EASd,MAAM,QAAQ,IAAI,EAAE;EAGpB,MAAM,EACJ,eACA,gBACA,eACA,eACA,WACE,mBAAmB,KAAK;EAC5B,MAAM,EAAE,qBAAqB,eAAe;EAI5C,MAAM,YAAY,eAAc,eAAe,QAAQ,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC;EAClF,MAAM,YAAY,eAAc;GAC9B,IAAG,cAAc,MAAM,QACrB,OAAO;EAGX,CAAC;EAGD,YAAU,MAAM,YAAY,YAAY;GACtC,MAAM,OAAO,MAAM,mBAAW,UAAoB;IAChD,KAAK;IACL,MAAM,cAAc,MAAM;GAC5B,CAAC;GACD,iBAAiB,KAAK,IAAI;GAC1B,MAAM,QAAQ,KAAK;EACrB,GAAG,EAAC,WAAW,KAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CCpEK,OAAM;;;QAAd,OAAA,UAAA,UAAA,GAAf,mBAcU,WAdV,YAcU;EAbR,mBAAoB,MAAA,MAAA,gBAAb,OAAA,KAAK,GAAA,CAAA;EACZ,YAGE,OAAA,oBAAA;GAFQ,mBAAiB,OAAA;oEAAA,OAAA,iBAAc;GAC/B,kBAAgB,OAAA;mEAAA,OAAA,gBAAa;;EAEvC,YAOE,OAAA,gBAAA;GANC,OAAO,OAAA;GACP,MAAM,OAAA;GACN,eAAW,CAAG,OAAA,UAAU;GACxB,mBAAiB,OAAA;GACjB,OAAO,OAAA;GACP,iBAAe,OAAA,aAAS"}