{"version":3,"file":"D7w3Dnld.js","sources":["../../../../../../../app/components/filter/CiFilterPanel/CiFilterModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useResizeObserver } from '@vueuse/core';\nimport debounce from 'debounce';\n\n// icons\nimport { faTimesCircle } from '@fortawesome/pro-light-svg-icons';\nimport { faUndoAlt, faChevronRight } from '@fortawesome/pro-regular-svg-icons';\n\n// components\nimport CiFanclubFilter from '@/components/fanclub/CiFanclubFilter.vue';\nimport CiFilterGroup from '@/components/filter/CiFilterPanel/CiFilterGroup.vue';\n\n/********************\n * PROPS & EMITS     *\n ********************/\nexport interface CiFilterModalProps {\n  excludedFilter?: any;\n  groupsToDisplay?: any;\n  showSidebar?: boolean;\n}\nconst props = withDefaults(defineProps<CiFilterModalProps>(), {\n  excludedFilter: () => [],\n  groupsToDisplay: false,\n  showSidebar: true,\n});\n\nconst emit = defineEmits<{\n  close: [];\n}>();\n\n/********************\n * COMPOSITIONS      *\n ********************/\nconst getRouteBaseName = useRouteBaseName();\nconst route = useRoute();\nconst searchStore = useSearchStore();\nconst { $gettext } = useGettext();\nconst {\n  activeFilterCount,\n  filterGroups,\n  getActiveFilterByGroup,\n  getFilterByGroupName,\n  openResetModal,\n  selectedFilterGroupLabel,\n  setFilter,\n} = useFilter();\n\n/********************\n * REFS & VARS       *\n ********************/\nconst filterModalPaneRef = ref<HTMLElement | null>(null);\nconst filterModalRef = ref<HTMLElement | null>(null);\nconst showFilterPane = ref(false);\nconst windowInnerWidth = ref(window.innerWidth);\n\nconst numberOfResults = computed(() => {\n  return getRouteBaseName(route) === RBN_SEARCH_MAP ? searchStore.mapResultCount : searchStore.resultCount;\n});\n\nconst filteredGroups = computed(() => {\n  return props.groupsToDisplay ? props.groupsToDisplay : filterGroups;\n});\n\n/********************\n * HOOKS             *\n ********************/\nuseResizeObserver(filterModalRef, debounce(() => {\n  windowInnerWidth.value = window.innerWidth;\n}));\n\n/********************\n * FUNCTIONS         *\n ********************/\nfunction onChangeGroup(name: string | null) {\n  showFilterPane.value = true;\n\n  if (searchStore.selectedFilterGroup === name) {\n    return;\n  }\n\n  searchStore.selectedFilterGroup = name;\n\n  nextTick(() => {\n    if (filterModalPaneRef.value) {\n      filterModalPaneRef.value.scroll({\n        top: 0,\n      });\n    }\n  });\n}\n</script>\n\n<template>\n  <div\n    ref=\"filterModalRef\"\n    class=\"filter-modal container-fluid flex h-full flex-col overflow-hidden\"\n  >\n    <div class=\"row border-b border-gray-40 bg-gray-10 py-2\">\n      <div class=\"col-12 flex\">\n        <CiButton\n          v-if=\"showFilterPane && windowInnerWidth < 576\"\n          class=\"button\"\n          icon-before\n          @click=\"showFilterPane = false\"\n        >\n          <span>{{ $gettext('Back to Overview') }}</span>\n        </CiButton>\n        <div class=\"shrink grow basis-auto self-center text-center\">\n          <strong v-if=\"!showFilterPane || windowInnerWidth > 575\">{{ $gettext('Filter') }}</strong>\n        </div>\n        <CiButton\n          class=\"button button--circle\"\n          :icon=\"faTimesCircle\"\n          icon-ratio=\"1.2\"\n          @click=\"emit('close')\"\n        />\n      </div>\n      <div class=\"col-sm flex justify-end\" />\n    </div>\n\n    <div class=\"row grow overflow-hidden\">\n      <!-- sidebar -->\n      <template v-if=\"props.showSidebar\">\n        <div\n          v-show=\"!showFilterPane || windowInnerWidth > 575\"\n          class=\"filter-modal__groups col-12 col-sm-4 h-full grow overflow-y-auto overflow-x-hidden bg-white !px-0 sm:bg-gray-20\"\n        >\n          <div\n            v-if=\"activeFilterCount\"\n            class=\"filter-modal__groups--item cursor-pointer overflow-y-auto overflow-x-hidden border-0 py-4 sm:px-2\"\n          >\n            <div class=\"row\">\n              <div class=\"col-12 flex justify-center\">\n                <CiButton\n                  class=\"button button--warning-outline\"\n                  :icon=\"faUndoAlt\"\n                  icon-ratio=\"0.5\"\n                  @click=\"openResetModal()\"\n                >\n                  <span>{{ $gettext('Reset All Filter') }}</span>\n                </CiButton>\n              </div>\n            </div>\n          </div>\n          <div\n            v-for=\"(group, index) in filteredGroups\"\n            :key=\"`group-mobile-${index}`\"\n            :class=\"{\n              active: searchStore.selectedFilterGroup\n                ? searchStore.selectedFilterGroup === group.name\n                : group.name === 'fanclub',\n            }\"\n            class=\"filter-modal__groups--item flex cursor-pointer items-center py-2\"\n            @click=\"onChangeGroup(group?.name || null)\"\n          >\n            <div\n              :class=\"{\n                'has-sublabel': getActiveFilterByGroup(group.name).length > 0,\n              }\"\n              class=\"filter-modal__groups--wrapper shrink grow basis-auto truncate\"\n            >\n              <div class=\"label truncate leading-4\">\n                {{ group.label }}\n              </div>\n              <div\n                v-if=\"getActiveFilterByGroup(group.name).length > 0\"\n                class=\"sublabel mt-1 truncate text-gray\"\n                v-text=\"getActiveFilterByGroup(group.name).join(', ')\"\n              />\n            </div>\n            <CiAwesomeIcon\n              :icon=\"faChevronRight\"\n              class=\"mr-2 fill-primary\"\n              ratio=\"0.75\"\n            />\n          </div>\n        </div>\n      </template>\n\n      <!-- filter -->\n      <div\n        v-show=\"showFilterPane || windowInnerWidth > 575 || !props.showSidebar\"\n        ref=\"filterModalPaneRef\"\n        class=\"filter-modal__pane h-full overflow-y-auto !px-4 !pb-4 sm:!px-12\"\n        :class=\"[props.showSidebar ? 'col-12 col-sm-8' : 'col-12']\"\n      >\n        <!-- only selected filter -->\n        <template v-if=\"props.showSidebar\">\n          <h3 class=\"my-6 text-center\">\n            {{ selectedFilterGroupLabel }}\n          </h3>\n          <CiFanclubFilter\n            v-if=\"!searchStore.selectedFilterGroup || searchStore.selectedFilterGroup === 'fanclub'\"\n            :small=\"true\"\n            @change=\"setFilter\"\n          />\n          <CiFilterGroup\n            v-else\n            :filter=\"getFilterByGroupName(searchStore.selectedFilterGroup || 'rating', props.excludedFilter)\"\n            :selected-filter=\"searchStore.selectedFilter\"\n            @change=\"setFilter\"\n          />\n          <div v-if=\"getActiveFilterByGroup(searchStore.selectedFilterGroup || 'rating').length > 0\">\n            <hr class=\"my-4 h-px border-0 bg-gray-40\" />\n            <div class=\"flex justify-center\">\n              <CiButton\n                class=\"button button--warning-outline mb-6\"\n                :icon=\"faUndoAlt\"\n                icon-ratio=\"0.5\"\n                @click=\"openResetModal(searchStore.selectedFilterGroup, props.excludedFilter)\"\n              >\n                <span>{{ $gettext('Reset Filter') }}</span>\n              </CiButton>\n            </div>\n          </div>\n        </template>\n\n        <!-- all filter from groupsToDisplay -->\n        <template v-else>\n          <div\n            v-for=\"group in props.groupsToDisplay\"\n            :key=\"group.name\"\n            class=\"mb-12\"\n          >\n            <h3 class=\"my-6 text-center\">\n              {{ group.label }}\n            </h3>\n            <CiFilterGroup\n              :filter=\"getFilterByGroupName(group.name, props.excludedFilter)\"\n              :selected-filter=\"searchStore.selectedFilter\"\n              @change=\"setFilter\"\n            />\n            <div\n              v-if=\"getActiveFilterByGroup(group.name, props.excludedFilter).length > 0\"\n              :key=\"group.name\"\n            >\n              <hr class=\"my-4 h-px border-0 bg-gray-40\" />\n              <div class=\"flex justify-center\">\n                <CiButton\n                  class=\"button button--warning-outline mb-4\"\n                  :icon=\"faUndoAlt\"\n                  icon-ratio=\"0.5\"\n                  @click=\"openResetModal(group.name, excludedFilter)\"\n                >\n                  <span>{{ $gettext('Reset Filter') }}</span>\n                </CiButton>\n              </div>\n            </div>\n          </div>\n        </template>\n      </div>\n    </div>\n\n    <div\n      class=\"row z-10 min-h-14 border-t border-gray-40 bg-white py-2 shadow-lg\"\n      :class=\"[showFilterPane || windowInnerWidth > 575 ? 'min-h-[7.0625rem] sm:min-h-14' : 'min-h-14']\"\n    >\n      <div\n        v-if=\"showFilterPane || windowInnerWidth > 575\"\n        class=\"col-12 col-md-6 col-lg-3 offset-lg-3 md:order-0 order-1 mt-4 flex items-center sm:hidden md:mt-0\"\n      >\n        <CiButton\n          :disabled=\"getActiveFilterByGroup(searchStore.selectedFilterGroup).length === 0\"\n          class=\"button button--warning-outline icon-md-absolute w-full\"\n          @click=\"openResetModal(searchStore.selectedFilterGroup, excludedFilter)\"\n        >\n          <span>{{ $gettext('Reset Filter') }}</span>\n        </CiButton>\n      </div>\n      <div class=\"col-12 col-sm-6 offset-sm-3\">\n        <CiButton\n          class=\"button button--primary icon-md-absolute w-full\"\n          @click=\"emit('close')\"\n        >\n          <span>\n            {{ $gettext('Hits %{count}', { count: numberOfResults }) }}\n          </span>\n        </CiButton>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.filter-modal__groups--item {\n  border-bottom: 1px solid $light-gray-40;\n  margin: 0 1rem;\n\n  @include media-breakpoint-up(sm) {\n    margin: 0;\n  }\n\n  .filter-modal__groups--wrapper {\n    padding: 1rem;\n\n    &.has-sublabel {\n      padding-bottom: 0.5rem;\n      padding-top: 0.5rem;\n\n      .sublabel {\n        height: 1rem;\n      }\n    }\n  }\n\n  .sublabel {\n    font-size: 0.75rem;\n    height: 0rem;\n    line-height: 1rem;\n  }\n\n  &.active {\n    background-color: $white;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","getRouteBaseName","useRouteBaseName","route","useRoute","searchStore","useSearchStore","$gettext","useGettext","activeFilterCount","filterGroups","getActiveFilterByGroup","getFilterByGroupName","openResetModal","selectedFilterGroupLabel","setFilter","useFilter","filterModalPaneRef","ref","filterModalRef","showFilterPane","windowInnerWidth","numberOfResults","computed","RBN_SEARCH_MAP","filteredGroups","useResizeObserver","debounce","onChangeGroup","name","nextTick"],"mappings":"ugEAoBA,MAAMA,EAAQC,EAMRC,EAAOC,EAOPC,EAAmBC,EAAiB,EACpCC,EAAQC,EAAS,EACjBC,EAAcC,EAAe,EAC7B,CAAE,SAAAC,CAAS,EAAIC,EAAW,EAC1B,CACJ,kBAAAC,EACA,aAAAC,EACA,uBAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,yBAAAC,EACA,UAAAC,GACEC,GAAU,EAKRC,EAAqBC,EAAwB,IAAI,EACjDC,EAAiBD,EAAwB,IAAI,EAC7CE,EAAiBF,EAAI,EAAK,EAC1BG,EAAmBH,EAAI,OAAO,UAAU,EAExCI,EAAkBC,EAAS,IACxBtB,EAAiBE,CAAK,IAAMqB,EAAiBnB,EAAY,eAAiBA,EAAY,WAC9F,EAEKoB,EAAiBF,EAAS,IACvB1B,EAAM,gBAAkBA,EAAM,gBAAkBa,CACxD,EAKiBgB,EAAAP,EAAgBQ,GAAS,IAAM,CAC/CN,EAAiB,MAAQ,OAAO,UAAA,CACjC,CAAC,EAKF,SAASO,EAAcC,EAAqB,CAC1CT,EAAe,MAAQ,GAEnBf,EAAY,sBAAwBwB,IAIxCxB,EAAY,oBAAsBwB,EAElCC,GAAS,IAAM,CACTb,EAAmB,OACrBA,EAAmB,MAAM,OAAO,CAC9B,IAAK,CAAA,CACN,CACH,CACD,EAAA"}