{"version":3,"file":"CategoryList-DI1mDkQK.mjs","names":[],"sources":["../src/components/display/categories/CategoryList.vue","../src/components/display/categories/CategoryList.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"categories.length\"\n    class=\"d-inline-flex w-100 mb-3 ps-3 pe-3 category-list hide-phone\"\n  >\n    <div ref=\"categoryListContainer\" class=\"category-list-container\">\n      <button\n        v-for=\"category in categories\"\n        :id=\"'category' + category.id\"\n        :key=\"category.id\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"checkIfFilter(category)\"\n      >\n        {{ category.name }}\n      </button>\n    </div>\n    <button\n      v-show=\"hidenCategories.length\"\n      id=\"categories-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n    <ClassicPopover\n      target=\"categories-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <button\n        v-for=\"category in hidenCategories\"\n        :key=\"category.id\"\n        class=\"me-3 octopus-dropdown-item\"\n        @keydown.enter=\"checkIfFilter(category)\"\n        @mousedown=\"checkIfFilter(category)\"\n      >\n        {{ category.name }}\n      </button>\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport classicApi from \"../../../api/classicApi\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Category } from \"@/stores/class/general/category\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport { computed, nextTick, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  isFilter: { default: false, type: Boolean },\n  isDisplay: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"categoriesLength\"]);\n\n//Data \nconst hidenCategories: Ref<Array<Category>> = ref([]);\nconst categoryListRef = useTemplateRef('categoryListContainer');\n\n//Composables\nconst { t, locale } = useI18n();\nconst { updateFiltersParam } = useRouteUpdateParams();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\nconst router = useRouter();\nconst route = useRoute();\n\n//Computed\nconst categories = computed(() => {\n  let arrayCategories: Array<Category> = [];\n  if (filterStore.filterOrgaId) {\n    arrayCategories = generalStore.storedCategoriesOrga.filter((c: Category) => {\n      return c.podcastOrganisationCount;\n    });\n  } else {\n    arrayCategories = generalStore.storedCategories.filter((c: Category) => {\n      if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;\n      return c.podcastCount;\n    });\n  }\n  emit(\"categoriesLength\", arrayCategories.length);\n  return arrayCategories;\n});\nconst watchVariable = computed(() => `${props.isDisplay}|${categories.value}`);\nconst reloadVariable = computed(() => `${filterStore.filterOrgaId}|${generalStore.storedCategories}`);\n\n\n//Watch\nwatch(watchVariable, () => {\n  nextTick(() => {\n    resizeWindow();\n  });\n}, {deep: true, immediate: true});\nwatch(reloadVariable, () => {\n  if (filterStore.filterOrgaId) {\n    fetchCategories(filterStore.filterOrgaId);\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>window.addEventListener(\"resize\", resizeWindow))\nonUnmounted(()=>window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction checkIfFilter(category: Category): void {\n  if (!props.isFilter) {\n    router.push({\n      name: \"category\",\n      params: { iabId: category.id.toString() },\n    });\n    return;\n  }\n  const queries = route.query;\n  if (\n    !queries.iabId ||\n    (\"string\" === typeof queries.iabId &&\n      parseInt(queries.iabId, 10) !== category.id)\n  ) {\n    updateFiltersParam(\n      { iabId: category.id.toString() },\n      { i: category.id.toString() },\n    );\n  }\n}\nfunction resizeWindow(): void {\n  const categoryList = categoryListRef?.value as HTMLElement;\n  if (null === categoryList || !categoryList) {\n    return;\n  }\n  categoryList.style.justifyContent = \"flex-start\";\n  hidenCategories.value.length = 0;\n  categories.value.forEach((element: Category) => {\n    const el = categoryList.querySelector('#category' + element.id);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  categories.value.forEach((element: Category) => {\n    const el = categoryList.querySelector('#category' + element.id);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenCategories.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenCategories.value.length) {\n    categoryList.style.justifyContent = \"center\";\n  }\n}\nasync function fetchCategories(organisationId: string): Promise<void> {\n  const data = await classicApi.fetchData<Array<Category>>({\n    api: 0,\n    path: `iab/list/${organisationId}`,\n    parameters: { lang: locale.value },\n  });\n  generalStore.storedUpdateCategoriesOrga(data);\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .category-list-container {\n    display: inline-flex;\n    justify-content: flex-start;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n  }\n}\n</style>\n","<template>\n  <div\n    v-if=\"categories.length\"\n    class=\"d-inline-flex w-100 mb-3 ps-3 pe-3 category-list hide-phone\"\n  >\n    <div ref=\"categoryListContainer\" class=\"category-list-container\">\n      <button\n        v-for=\"category in categories\"\n        :id=\"'category' + category.id\"\n        :key=\"category.id\"\n        class=\"btn btn-primary btn-on-dark m-1\"\n        @click=\"checkIfFilter(category)\"\n      >\n        {{ category.name }}\n      </button>\n    </div>\n    <button\n      v-show=\"hidenCategories.length\"\n      id=\"categories-dropdown\"\n      class=\"btn btn-primary btn-on-dark m-1\"\n      :title=\"t('See more')\"\n    >\n      <PlusIcon />\n    </button>\n    <ClassicPopover\n      target=\"categories-dropdown\"\n      :only-click=\"true\"\n      :left-pos=\"true\"\n    >\n      <button\n        v-for=\"category in hidenCategories\"\n        :key=\"category.id\"\n        class=\"me-3 octopus-dropdown-item\"\n        @keydown.enter=\"checkIfFilter(category)\"\n        @mousedown=\"checkIfFilter(category)\"\n      >\n        {{ category.name }}\n      </button>\n    </ClassicPopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport { useRouteUpdateParams } from \"../../composable/route/useRouteUpdateParams\";\nimport classicApi from \"../../../api/classicApi\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Category } from \"@/stores/class/general/category\";\nimport { useFilterStore } from \"../../../stores/FilterStore\";\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport { computed, nextTick, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute, useRouter } from \"vue-router\";\n\n//Props \nconst props = defineProps({\n  isFilter: { default: false, type: Boolean },\n  isDisplay: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"categoriesLength\"]);\n\n//Data \nconst hidenCategories: Ref<Array<Category>> = ref([]);\nconst categoryListRef = useTemplateRef('categoryListContainer');\n\n//Composables\nconst { t, locale } = useI18n();\nconst { updateFiltersParam } = useRouteUpdateParams();\nconst generalStore = useGeneralStore();\nconst filterStore = useFilterStore();\nconst router = useRouter();\nconst route = useRoute();\n\n//Computed\nconst categories = computed(() => {\n  let arrayCategories: Array<Category> = [];\n  if (filterStore.filterOrgaId) {\n    arrayCategories = generalStore.storedCategoriesOrga.filter((c: Category) => {\n      return c.podcastOrganisationCount;\n    });\n  } else {\n    arrayCategories = generalStore.storedCategories.filter((c: Category) => {\n      if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;\n      return c.podcastCount;\n    });\n  }\n  emit(\"categoriesLength\", arrayCategories.length);\n  return arrayCategories;\n});\nconst watchVariable = computed(() => `${props.isDisplay}|${categories.value}`);\nconst reloadVariable = computed(() => `${filterStore.filterOrgaId}|${generalStore.storedCategories}`);\n\n\n//Watch\nwatch(watchVariable, () => {\n  nextTick(() => {\n    resizeWindow();\n  });\n}, {deep: true, immediate: true});\nwatch(reloadVariable, () => {\n  if (filterStore.filterOrgaId) {\n    fetchCategories(filterStore.filterOrgaId);\n  }\n}, {deep: true, immediate: true});\n\n\nonMounted(()=>window.addEventListener(\"resize\", resizeWindow))\nonUnmounted(()=>window.removeEventListener(\"resize\", resizeWindow))\n\n\n//Methods\nfunction checkIfFilter(category: Category): void {\n  if (!props.isFilter) {\n    router.push({\n      name: \"category\",\n      params: { iabId: category.id.toString() },\n    });\n    return;\n  }\n  const queries = route.query;\n  if (\n    !queries.iabId ||\n    (\"string\" === typeof queries.iabId &&\n      parseInt(queries.iabId, 10) !== category.id)\n  ) {\n    updateFiltersParam(\n      { iabId: category.id.toString() },\n      { i: category.id.toString() },\n    );\n  }\n}\nfunction resizeWindow(): void {\n  const categoryList = categoryListRef?.value as HTMLElement;\n  if (null === categoryList || !categoryList) {\n    return;\n  }\n  categoryList.style.justifyContent = \"flex-start\";\n  hidenCategories.value.length = 0;\n  categories.value.forEach((element: Category) => {\n    const el = categoryList.querySelector('#category' + element.id);\n    if (!el) return;\n    if (el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  });\n  categories.value.forEach((element: Category) => {\n    const el = categoryList.querySelector('#category' + element.id);\n    if (!el) return;\n    const parent = el.parentElement;\n    if (\n      parent &&\n      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20\n    ) {\n      return;\n    }\n    hidenCategories.value.push(element);\n    if (!el.classList.contains(\"hid\")) {\n      el.className += \" hid\";\n    }\n  });\n  if (!hidenCategories.value.length) {\n    categoryList.style.justifyContent = \"center\";\n  }\n}\nasync function fetchCategories(organisationId: string): Promise<void> {\n  const data = await classicApi.fetchData<Array<Category>>({\n    api: 0,\n    path: `iab/list/${organisationId}`,\n    parameters: { lang: locale.value },\n  });\n  generalStore.storedUpdateCategoriesOrga(data);\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .category-list-container {\n    display: inline-flex;\n    justify-content: flex-start;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n  }\n}\n</style>\n"],"mappings":"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"}