scinote-web/app/javascript/vue/shared/checklist_select.vue

<template>
  <div class="w-full relative" ref="container" v-click-outside="closeDropdown">
    <slot>
      <button ref="focusElement"
              class="btn flex justify-between items-center w-full outline-none border-[1px] bg-white rounded sn-select
              font-inter text-sm font-normal leading-5"
              :class="{
                'sci-cursor-edit': !isOpen && withEditCursor,
                'border-sn-light-grey hover:border-sn-sleepy-grey': !isOpen,
                'border-sn-science-blue': isOpen,
                'text-sn-grey': !valueLabel,
                [className]: true
              }"
              :disabled="disabled"
              @click="isOpen = !isOpen">
        <span class="overflow-hidden text-ellipsis">{{ valueLabel || this.placeholder || this.i18n.t('general.select') }}</span>
        <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
      </button>
    </slot>
    <div :style="optionPositionStyle" class="py-2.5 z-10 bg-white rounded border-[1px] border-sn-light-grey shadow-sn-menu-sm" :class="{ 'hidden': !isOpen }">
      <div v-if="withButtons" class="px-2.5 pb-[1px]">
        <div class="flex gap-2 pl-[0.625rem] justify-start items-center w-[calc(100%-10px)]">
          <div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
               @click="selectedValues = []"
               :class="{
                 'disabled cursor-default': !selectedValues.length,
                 'cursor-pointer': selectedValues.length
               }"
              >{{ i18n.t('general.clear') }}</div>
          <div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
               @click="selectedValues = options.map(option => option.id)"
               :class="{
                'disabled cursor-default': options.length === selectedValues.length,
                'cursor-pointer': options.length !== selectedValues.length}">
               {{ i18n.t('general.select_all') }}
          </div>
        </div>
      </div>
      <perfect-scrollbar ref="optionsContainer"
                         class="relative scroll-container px-2.5 pt-0"
                         :class="{
                           'block': isOpen,
                           [optionsClassName]: true
                         }"
                         @ps-scroll-y="onScroll">
        <div v-if="options.length" class="flex flex-col gap-[1px]">
          <div v-for="option in options"
               :key="option.id"
               class="checklist px-3 py-2 rounded hover:bg-sn-super-light-grey cursor-pointer
                flex gap-1 justify-start items-center"
               :class="option.id === this.lastSelectedOption ? 'bg-sn-super-light-blue' : ''"
               @change="toggleOption"
               @click="triggerLabelClick($event, option.id)"
               >
            <div class="sci-checkbox-container">
              <input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector">
              <label :for="option.id" class="sci-checkbox-label"></label>
            </div>
            <span :title="option.label"
              class="text-ellipsis overflow-hidden max-h-[4rem] ml-1 whitespace-normal line-clamp-3 option-label"
            >
              {{ option.label }}
            </span>
          </div>
        </div>
        <template v-else>
          <div
            class="sn-select__no-options"
          >
            {{ this.noOptionsPlaceholder }}
          </div>
        </template>
      </perfect-scrollbar>
    </div>
  </div>
</template>

<script>
  import { vOnClickOutside } from '@vueuse/components';

  export default {
    name: 'ChecklistSelect',
    emits: ['close', 'update', 'reached-end', 'update-selected-values'],
    props: {
      withButtons: { type: Boolean, default: false },
      withEditCursor: { type: Boolean, default: false },
      initialSelectedValues: { type: Array, default: () => [] },
      options: { type: Array, default: () => [] },
      placeholder: { type: String },
      noOptionsPlaceholder: { type: String },
      disabled: { type: Boolean, default: false },
      className: { type: String, default: '' },
      shouldOpen: { type: Boolean },
      optionsClassName: { type: String, default: '' },
      shouldUpdateWithoutValues: { type: Boolean, default: false },
      shouldUpdateOnToggleClose: { type: Boolean, default: false }
    },
    directives: {
      'click-outside': vOnClickOutside
    },
    data() {
      return {
        selectedValues: [],
        isOpen: false,
        optionPositionStyle: '',
        lastSelectedOption: null
      }
    },
    mounted() {
      this.selectedValues = this.initialSelectedValues;
    },
    computed: {
      valueLabel() {
        if (!this.selectedValues.length) return
        if (this.selectedValues.length === 1) return this.options.find(({id}) => id === this.selectedValues[0])?.label
        return `${this.selectedValues.length} ${this.i18n.t('general.selected')}`;
      },
      focusElement() {
        return this.$refs.focusElement || this.$parent.$refs.focusElement;
      },
    },
    watch: {
      initialSelectedValues: {
        handler: function (newVal, oldVal) {
          this.selectedValues = newVal;
        },
        deep: true
      },
      shouldOpen(value) {
        this.isOpen = value;
      },
      isOpen(value) {
        if (value) {
          this.updateOptionPosition();
          this.$refs.optionsContainer.scrollTop = 0;
          this.$nextTick(() => {
            this.focusElement.focus();
          });
        } else {
          if (this.shouldUpdateOnToggleClose && this.shouldUpdateWithoutValues) {
            this.$emit('update', this.selectedValues);
          }
          this.closeDropdown();
        }
        this.lastSelectedOption = null;
      },
      selectedValues(values) {
        this.$emit('update-selected-values', values);
      },
    },
    methods: {
      updateOptionPosition() {
        const container = $(this.$refs.container);
        const rect = container.get(0).getBoundingClientRect();
        let width = rect.width;
        let height = rect.height;
        this.optionPositionStyle = `position: absolute; top: ${height}px; left: 0px; width: ${width}px`
      },
      toggleOption(option) {
        const optionId = option.target._value;
        this.setLastSelected(optionId);
      },
      setLastSelected(optionId) {
        this.lastSelectedOption = this.selectedValues.includes(optionId) ? optionId : null;
      },
      closeDropdown() {
        if (!this.isOpen) return;

        this.isOpen = false;
        if (this.shouldUpdateWithoutValues) {
          this.$emit('update', this.selectedValues)
        }
        if (this.selectedValues.length && !this.shouldUpdateWithoutValues) {
          this.$emit('update', this.selectedValues);
        }
        this.$emit('close');
        this.$refs.optionsContainer.$el.scrollTop = 0;
      },
    triggerLabelClick(event, optionId) {
      if ($(event.target).hasClass('sci-checkbox')) return;
      if ($(event.target).hasClass('sci-checkbox-label')) return;

      $(event.target).closest('.checklist').find(`#${optionId}`).trigger('click');
    },
      onScroll() {
        const scrollObj = this.$refs.optionsContainer.ps;

        if (scrollObj) {
          const reachedEnd = scrollObj.reach.y === 'end';
          if (reachedEnd && this.contentHeight !== scrollObj.contentHeight) {
            this.$emit('reached-end');
            this.contentHeight = scrollObj.contentHeight;
          }
        }
      },
    }
  }
</script>