{"version":3,"file":"CategoryChooser-DWEL9V5p.mjs","names":[],"sources":["../src/components/display/categories/CategoryChooser.vue","../src/components/display/categories/CategoryChooser.vue"],"sourcesContent":["<template>\n  <ClassicMultiselect\n    :id=\"idClassicMultiselect\"\n    ref=\"selectCategory\"\n    :option-chosen=\"model\"\n    option-label=\"name\"\n    :display-label=\"displayLabel\"\n    :label=\"label ?? t('By category')\"\n    :text-danger=\"textDanger\"\n    :placeholder=\"t('Type string to filter by categories')\"\n    :max-element=\"maxElement\"\n    :in-modal=\"inModal\"\n    :multiple=\"multiple\"\n    :min-search-length=\"1\"\n    :width=\"width\"\n    :height=\"height\"\n    :is-disabled=\"isDisabled\"\n    :no-deselect=\"noDeselect\"\n    :display-required=\"displayRequired\"\n    :popover=\"popover\"\n    :popover-relative-class=\"popoverRelativeClass\"\n    @on-search=\"onSearchCategory\"\n    @selected=\"onCategorySelected\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport ClassicMultiselect from \"../../form/ClassicMultiselect.vue\";\nimport { Category } from \"@/stores/class/general/category\";\nimport { computed, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  defaultanswer: { default: \"\", type: String },\n  width: { default: \"100%\", type: String },\n  height: { default: undefined, type: String },\n  multiple: { default: false, type: Boolean },\n  isDisabled: { default: false, type: Boolean },\n  initCategories: {\n    default: undefined,\n    type: Array as () => Array<Category>,\n  },\n  displayAllCategories: { default: false, type: Boolean },\n  categorySelected: { default: undefined, type: Number },\n  categorySelectedArray: {\n    default: undefined,\n    type: Array as () => Array<number>,\n  },\n  inModal: { default: false, type: Boolean },\n  noDeselect: { default: true, type: Boolean },\n  label:{default: undefined, type: String },\n  displayLabel: { default: false, type: Boolean },\n  textDanger :{ default: undefined, type: String },\n  displayRequired: { default: false, type: Boolean },\n  popover: { default: undefined, type: String },\n  popoverRelativeClass: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\n  \"update:categorySelected\",\n  \"update:categorySelectedArray\",\n  \"selected\"\n]);\n\n\n//Data \nconst maxElement = ref(50);\nconst category: Ref<Category | undefined> = ref(undefined);\nconst categoryForArray: Ref<Array<Category> | undefined> = ref([]);\nconst selectCategoryRef=useTemplateRef('selectCategory');\n\n//Composables\nconst { t } = useI18n();\nconst generalStore = useGeneralStore();\n\n\n//Computed\nconst categoriesChosen = computed(() => {\n  if (props.initCategories) {\n    return props.initCategories;\n  }\n  return generalStore.storedCategories;\n});\nconst categoriesOrdered = computed(() => {\n  let allCategoriesOrdered = categoriesChosen.value.toSorted(\n    (a: Category, b: Category) => (a.name > b.name ? 1 : -1),\n  );\n  if (!props.displayAllCategories) {\n    allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {\n      return c.podcastCount;\n    });\n  }\n  if (getDefaultCategory.value) {\n    allCategoriesOrdered.unshift(getDefaultCategory.value);\n  }\n  return allCategoriesOrdered;\n});\nconst getDefaultCategory = computed(() => {\n  if (\"\" === props.defaultanswer) {\n    return undefined;\n  }\n  return { id: 0, name: props.defaultanswer };\n});\nconst idClassicMultiselect = computed(() => {\n  if (props.multiple) return \"categoryChooser\" + props.multiple;\n  return \"categoryChooser\";\n});\nconst model = computed({\n  get(): Category | Array<Category> | undefined {\n    return props.multiple ? categoryForArray.value :category.value;\n  },\n  set(value: Category | Array<Category> | undefined): void {\n    if (!props.multiple) {\n      category.value = value as Category | undefined;\n      return;\n    }\n    categoryForArray.value = value as Array<Category> | undefined;\n  },\n});\n\n\n//Watch\nwatch(()=>props.categorySelected, async () => {\n  if (props.categorySelected) {\n    initCategorySelected();\n  } else {\n    category.value = getDefaultCategory.value;\n  }\n}, {immediate: true});\n\n\nonMounted(()=>initCategoryArray())\n\n\n//Methods\nasync function onSearchCategory(query?: string): Promise<void> {\n  let categories = categoriesOrdered.value;\n  if (query) {\n    categories = categories.filter((item: Category) => {\n      return item.name.toUpperCase().includes(query.toUpperCase());\n    });\n  }\n  (selectCategoryRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(categories, categories.length);\n}\nfunction onCategorySelected(category: Category | Array<Category>): void {\n  if (undefined !== props.categorySelected) {\n    emit(\"update:categorySelected\", (category as Category).id);\n  } else if (undefined !== props.categorySelectedArray) {\n    const idsArray: Array<number> = [];\n    (category as Array<Category>).forEach((el: Category) => {\n      idsArray.push(el.id);\n    });\n    emit(\"update:categorySelectedArray\", idsArray);\n  } else {\n    emit(\"selected\", category);\n  }\n}\nfunction initCategorySelected(): void {\n  category.value =\n    categoriesChosen.value.find((el: Category) => {\n      return el.id === props.categorySelected;\n    }) ?? getDefaultCategory.value;\n}\nfunction initCategoryArray(): void {\n  if (!categoryForArray.value || !props.categorySelectedArray) {\n    return;\n  }\n  categoryForArray.value.length = 0;\n  props.categorySelectedArray.forEach((element: number) => {\n    const item = categoriesChosen.value.find((el: Category) => {\n      return el.id === element;\n    });\n    if (categoryForArray.value && item) {\n      categoryForArray.value.push(item);\n    }\n  });\n}\n</script>\n","<template>\n  <ClassicMultiselect\n    :id=\"idClassicMultiselect\"\n    ref=\"selectCategory\"\n    :option-chosen=\"model\"\n    option-label=\"name\"\n    :display-label=\"displayLabel\"\n    :label=\"label ?? t('By category')\"\n    :text-danger=\"textDanger\"\n    :placeholder=\"t('Type string to filter by categories')\"\n    :max-element=\"maxElement\"\n    :in-modal=\"inModal\"\n    :multiple=\"multiple\"\n    :min-search-length=\"1\"\n    :width=\"width\"\n    :height=\"height\"\n    :is-disabled=\"isDisabled\"\n    :no-deselect=\"noDeselect\"\n    :display-required=\"displayRequired\"\n    :popover=\"popover\"\n    :popover-relative-class=\"popoverRelativeClass\"\n    @on-search=\"onSearchCategory\"\n    @selected=\"onCategorySelected\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { useGeneralStore } from \"../../../stores/GeneralStore\";\nimport ClassicMultiselect from \"../../form/ClassicMultiselect.vue\";\nimport { Category } from \"@/stores/class/general/category\";\nimport { computed, onMounted, Ref, ref, useTemplateRef, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  defaultanswer: { default: \"\", type: String },\n  width: { default: \"100%\", type: String },\n  height: { default: undefined, type: String },\n  multiple: { default: false, type: Boolean },\n  isDisabled: { default: false, type: Boolean },\n  initCategories: {\n    default: undefined,\n    type: Array as () => Array<Category>,\n  },\n  displayAllCategories: { default: false, type: Boolean },\n  categorySelected: { default: undefined, type: Number },\n  categorySelectedArray: {\n    default: undefined,\n    type: Array as () => Array<number>,\n  },\n  inModal: { default: false, type: Boolean },\n  noDeselect: { default: true, type: Boolean },\n  label:{default: undefined, type: String },\n  displayLabel: { default: false, type: Boolean },\n  textDanger :{ default: undefined, type: String },\n  displayRequired: { default: false, type: Boolean },\n  popover: { default: undefined, type: String },\n  popoverRelativeClass: { default: undefined, type: String },\n})\n\n//Emits\nconst emit = defineEmits([\n  \"update:categorySelected\",\n  \"update:categorySelectedArray\",\n  \"selected\"\n]);\n\n\n//Data \nconst maxElement = ref(50);\nconst category: Ref<Category | undefined> = ref(undefined);\nconst categoryForArray: Ref<Array<Category> | undefined> = ref([]);\nconst selectCategoryRef=useTemplateRef('selectCategory');\n\n//Composables\nconst { t } = useI18n();\nconst generalStore = useGeneralStore();\n\n\n//Computed\nconst categoriesChosen = computed(() => {\n  if (props.initCategories) {\n    return props.initCategories;\n  }\n  return generalStore.storedCategories;\n});\nconst categoriesOrdered = computed(() => {\n  let allCategoriesOrdered = categoriesChosen.value.toSorted(\n    (a: Category, b: Category) => (a.name > b.name ? 1 : -1),\n  );\n  if (!props.displayAllCategories) {\n    allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {\n      return c.podcastCount;\n    });\n  }\n  if (getDefaultCategory.value) {\n    allCategoriesOrdered.unshift(getDefaultCategory.value);\n  }\n  return allCategoriesOrdered;\n});\nconst getDefaultCategory = computed(() => {\n  if (\"\" === props.defaultanswer) {\n    return undefined;\n  }\n  return { id: 0, name: props.defaultanswer };\n});\nconst idClassicMultiselect = computed(() => {\n  if (props.multiple) return \"categoryChooser\" + props.multiple;\n  return \"categoryChooser\";\n});\nconst model = computed({\n  get(): Category | Array<Category> | undefined {\n    return props.multiple ? categoryForArray.value :category.value;\n  },\n  set(value: Category | Array<Category> | undefined): void {\n    if (!props.multiple) {\n      category.value = value as Category | undefined;\n      return;\n    }\n    categoryForArray.value = value as Array<Category> | undefined;\n  },\n});\n\n\n//Watch\nwatch(()=>props.categorySelected, async () => {\n  if (props.categorySelected) {\n    initCategorySelected();\n  } else {\n    category.value = getDefaultCategory.value;\n  }\n}, {immediate: true});\n\n\nonMounted(()=>initCategoryArray())\n\n\n//Methods\nasync function onSearchCategory(query?: string): Promise<void> {\n  let categories = categoriesOrdered.value;\n  if (query) {\n    categories = categories.filter((item: Category) => {\n      return item.name.toUpperCase().includes(query.toUpperCase());\n    });\n  }\n  (selectCategoryRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(categories, categories.length);\n}\nfunction onCategorySelected(category: Category | Array<Category>): void {\n  if (undefined !== props.categorySelected) {\n    emit(\"update:categorySelected\", (category as Category).id);\n  } else if (undefined !== props.categorySelectedArray) {\n    const idsArray: Array<number> = [];\n    (category as Array<Category>).forEach((el: Category) => {\n      idsArray.push(el.id);\n    });\n    emit(\"update:categorySelectedArray\", idsArray);\n  } else {\n    emit(\"selected\", category);\n  }\n}\nfunction initCategorySelected(): void {\n  category.value =\n    categoriesChosen.value.find((el: Category) => {\n      return el.id === props.categorySelected;\n    }) ?? getDefaultCategory.value;\n}\nfunction initCategoryArray(): void {\n  if (!categoryForArray.value || !props.categorySelectedArray) {\n    return;\n  }\n  categoryForArray.value.length = 0;\n  props.categorySelectedArray.forEach((element: number) => {\n    const item = categoriesChosen.value.find((el: Category) => {\n      return el.id === element;\n    });\n    if (categoryForArray.value && item) {\n      categoryForArray.value.push(item);\n    }\n  });\n}\n</script>\n"],"mappings":"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"}