@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

package/src/components/filter/filterSettings.vue

@@ -1,80 +1,70 @@
 <template>
-  <ContainerWrapper @click="$emit('on-container-click')">
-    <UpperContainer v-if="filterViews && filterViews.length">
-      <ViewContainer :max-width="activeView.length">
-        <SelectComponent
-          align-items="vertical"
-          font-size="13px"
-          :label="$gettext('active_filter')"
-          select-height="36px"
-          select-width="100%"
+  <container-wrapper @click="$emit('on-container-click')">
+    <upper-container v-if="filterViews && filterViews.length">
+      <view-container :maxWidth="activeView.length">
+        <select-component
           @click.stop
+          selectWidth="100%"
+          selectHeight="36px"
+          fontSize="13px"
+          :label="$gettext('active_filter')"
+          alignItems="vertical"
         >
           <template #selector>
-            <OptionTitle>
+            <option-title>
               {{ activeView }}
-            </OptionTitle>
+            </option-title>
           </template>
           <template #dropdown>
             <Option
               v-for="(item, idx) in filterViews"
               :key="idx + '_view'"
-              :value="item.name"
               @click="$emit('on-view-select', item)"
-            >
-              {{ item.name }}
-              <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
-            </Option>
+              :value="item.name"
+              >{{ item.name }}
+              <delete-icon @click.stop="$emit('on-view-delete', item)"
+            /></Option>
           </template>
-        </SelectComponent>
-      </ViewContainer>
-      <ResetButton @click="$emit('on-reset-filters')">
-        <Icon
-          :color="theme.colors.blue"
-          :name="'update'"
-          size="14px"
-        />
+        </select-component>
+      </view-container>
+      <reset-button @click="$emit('on-reset-filters')">
+        <icon :name="'update'" size="14px" :color="theme.colors.blue" />
         <div>{{ $gettext('reset_filters') }}</div>
-      </ResetButton>
-    </UpperContainer>
-    <ColumnWrapper
-      :has-active-view="!!filterViews && !!filterViews.length"
-      :num-cols="filterData.length"
+      </reset-button>
+    </upper-container>
+    <column-wrapper
+      :numCols="filterData.length"
+      :hasActiveView="!!filterViews && !!filterViews.length"
     >
-      <ColumnContainer
+      <column-container
         v-for="(item, idx) in filterData"
         :key="idx + '_filterdata'"
       >
-        <ColumnTitle
+        <column-title
+          :showBorder="idx + 1 !== filterData.length"
           :data-id="`filter_label_project_view_file_manager_${item.type}`"
-          :show-border="idx + 1 !== filterData.length"
         >
           {{ item.columnName }}
-        </ColumnTitle>
-        <RowContainer v-if="item.type === 'columns'">
-          <CheckboxContainer>
-            <Draggable
-              v-model="item.dataOptions"
-              ghost-class="ghost"
+        </column-title>
+        <row-container v-if="item.type === 'columns'">
+          <checkbox-container>
+            <draggable
+              @change="onDragChange({ data: item.dataOptions })"
               handle=".drag-container"
-              item-key="choice"
-              :set-data="modifyDragItem"
               style="display: contents"
-              @change="onDragChange({ data: item.dataOptions })"
+              ghost-class="ghost"
+              :setData="modifyDragItem"
+              v-model="item.dataOptions"
+              itemKey="choice"
             >
               <template #item="{ element: column }">
-                <CheckboxWrapper>
-                  <DragContainer class="drag-container">
-                    <Icon
-                      :name="'duplicate-1'"
-                      size="12px"
-                    />
-                  </DragContainer>
-                  <Checkbox
-                    :is-checked="column.selected"
-                    :is-disabled="column.selected && isCheckboxDisabled"
+                <checkbox-wrapper>
+                  <drag-container class="drag-container">
+                    <icon :name="'duplicate-1'" size="12px" />
+                  </drag-container>
+                  <checkbox
                     :label="column.text"
-                    size="small"
+                    :isChecked="column.selected"
                     @on-event-handler="
                       onChange({
                         dataType: item.type,
@@ -82,45 +72,43 @@
                         choice: column.choice
                       })
                     "
+                    size="small"
+                    :isDisabled="column.selected && isCheckboxDisabled"
                   />
-                </CheckboxWrapper>
+                </checkbox-wrapper>
               </template>
-            </Draggable>
-          </CheckboxContainer>
-        </RowContainer>
-        <RowContainer
-          v-if="item.type === 'filter'"
-          show-border
-        >
-          <RowWrapper
+            </draggable>
+          </checkbox-container>
+        </row-container>
+        <row-container v-if="item.type === 'filter'" showBorder>
+          <row-wrapper
             v-for="(filter, index) in item.dataOptions"
             :key="index + '_field'"
           >
-            <SelectComponent
+            <select-component
               v-if="isMultipleSelector(filter.filter_type)"
-              align-items="vertical"
-              :disabled="!filter.choices.length"
-              font-size="13px"
-              :is-searchable="filter.choices.length > 7"
+              selectWidth="100%"
+              selectHeight="36px"
+              fontSize="13px"
               :label="filter.label"
-              :label-data-id="filter.dataId"
-              :min-option-length="1"
-              select-height="36px"
-              select-width="100%"
+              :labelDataId="filter.dataId"
+              :isSearchable="filter.choices.length > 7"
+              alignItems="vertical"
+              :disabled="!filter.choices.length"
+              :minOptionLength="1"
             >
               <template #selector>
-                <OptionTitle> {{ filter.selectedText }} </OptionTitle>
+                <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
-                <DropdownCheckboxContainer
+                <dropdown-checkbox-container
                   v-for="(filterOption, optionIdx) in filter.choices"
                   :key="optionIdx + 'optionIdx'"
                   @click.stop
                 >
-                  <Checkbox
-                    :is-checked="filterOption.selected"
+                  <checkbox
                     :label="filterOption.text"
-                    size="small"
+                    :isChecked="filterOption.selected"
                     @on-event-handler="
                       onChange({
                         dataType: item.type,
@@ -129,25 +117,21 @@
                         field: filter.field
                       })
                     "
+                    size="small"
                   />
-                </DropdownCheckboxContainer>
+                </dropdown-checkbox-container>
               </template>
-            </SelectComponent>
-            <SectionContainer v-else-if="isRangeSelector(filter.filter_type)">
-              <RowLabel :data-id="filter.dataId">
-                {{ filter.label }}
-              </RowLabel>
-              <GridContainer>
-                <InputNumber
-                  font-size="13px"
-                  input-height="36px"
-                  :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
+            </select-component>
+            <section-container v-else-if="isRangeSelector(filter.filter_type)">
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
+              <grid-container>
+                <input-number
                   :placeholder="
                     filter.unit
                       ? $gettext('min') + ' (' + filter.unit + ')'
                       : $gettext('min')
                   "
-                  :unit-name="filter.unit"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.start"
                   @input-change="
                     onChange({
@@ -157,17 +141,17 @@
                       field: filter.field
                     })
                   "
+                  fontSize="13px"
+                  inputHeight="36px"
+                  :unitName="filter.unit"
                 />
-                <InputNumber
-                  font-size="13px"
-                  input-height="36px"
-                  :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                <input-number
                   :placeholder="
                     filter.unit
                       ? $gettext('max') + ' (' + filter.unit + ')'
                       : $gettext('max')
                   "
-                  :unit-name="filter.unit"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.end"
                   @input-change="
                     onChange({
@@ -177,30 +161,31 @@
                       field: filter.field
                     })
                   "
+                  fontSize="13px"
+                  inputHeight="36px"
+                  :unitName="filter.unit"
                 />
-              </GridContainer>
-            </SectionContainer>
-            <SectionContainer
+              </grid-container>
+            </section-container>
+            <section-container
               v-else-if="isDateSelector(filter.filter_type)"
               @click.stop
             >
-              <RowLabel :data-id="filter.dataId">
-                {{ filter.label }}
-              </RowLabel>
-              <GridContainer>
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
+              <grid-container>
                 <VueDatePicker
-                  :auto-apply="true"
+                  text-input
+                  :placeholder="$gettext('Date from')"
+                  :locale="getDatePickerLanguage()"
+                  :model-value="filter.range.start"
+                  :enable-time-picker="false"
                   :clearable="true"
+                  :auto-apply="true"
                   :disabled-dates="disableFutureDates"
-                  :enable-time-picker="false"
                   format="yyyy-MM-dd"
-                  :locale="getDatePickerLanguage()"
                   model-type="format"
-                  :model-value="filter.range.start"
-                  :placeholder="$gettext('Date from')"
-                  text-input
-                  @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
                   @update:model-value="
                     onChange({
                       dataType: item.type,
@@ -211,18 +196,18 @@
                   "
                 />
                 <VueDatePicker
-                  :auto-apply="true"
+                  text-input
+                  :placeholder="$gettext('Date to')"
+                  :locale="getDatePickerLanguage()"
+                  :model-value="filter.range.end"
+                  :enable-time-picker="false"
                   :clearable="true"
+                  :auto-apply="true"
                   :disabled-dates="disablePastDates"
-                  :enable-time-picker="false"
                   format="yyyy-MM-dd"
-                  :locale="getDatePickerLanguage()"
                   model-type="format"
-                  :model-value="filter.range.end"
-                  :placeholder="$gettext('Date to')"
-                  text-input
-                  @close="onDatepickerBlur()"
                   @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
                   @update:model-value="
                     onChange({
                       dataType: item.type,
@@ -232,20 +217,20 @@
                     })
                   "
                 />
-              </GridContainer>
-            </SectionContainer>
-            <SelectComponent
+              </grid-container>
+            </section-container>
+            <select-component
               v-else
-              align-items="vertical"
-              :disabled="!filter.choices.length"
-              font-size="13px"
-              :is-searchable="filter.choices.length > 7"
+              selectWidth="100%"
+              selectHeight="36px"
+              fontSize="13px"
               :label="filter.label"
-              select-height="36px"
-              select-width="100%"
+              alignItems="vertical"
+              :isSearchable="filter.choices.length > 7"
+              :disabled="!filter.choices.length"
             >
               <template #selector="{ selectedValue }">
-                <OptionTitle>
+                <option-title>
                   {{
                     getSelectedValue({
                       value: selectedValue,
@@ -253,70 +238,65 @@
                       filter
                     })
                   }}
-                </OptionTitle>
+                </option-title>
               </template>
               <template #dropdown>
                 <Option
                   v-for="(filterOption, filterIdx) in filter.choices"
                   :key="filterIdx + '_filterIdx'"
                   :value="filterOption.choice"
+                  >{{ filterOption.text }}</Option
                 >
-                  {{ filterOption.text }}
-                </Option>
               </template>
-            </SelectComponent>
-          </RowWrapper>
-        </RowContainer>
-      </ColumnContainer>
-    </ColumnWrapper>
-    <ButtonContainer>
-      <MainButton
+            </select-component>
+          </row-wrapper>
+        </row-container>
+      </column-container>
+    </column-wrapper>
+    <button-container>
+      <main-button
         v-if="buttonText.apply_view"
-        :text="buttonText.apply_view"
         type="primary"
+        :text="buttonText.apply_view"
         @click="$emit('on-apply-current-view')"
       />
-      <MainButton
+      <main-button
+        type="secondary"
         v-if="buttonText.save_view"
         :text="buttonText.save_view"
-        type="secondary"
         @click="$emit('on-save-new-view')"
       />
-      <MainButton
+      <main-button
+        type="cancel"
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
-        type="cancel"
         @click="$emit('on-cancel-view')"
       />
-      <ResetContainer v-if="!filterViews || !filterViews.length">
-        <ResetButton @click="$emit('on-reset-filters')">
-          <Icon
-            :color="theme.colors.blue"
-            :name="'update'"
-            size="14px"
-          />
+      <reset-container v-if="!filterViews || !filterViews.length">
+        <reset-button @click="$emit('on-reset-filters')">
+          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
           <div>{{ $gettext('reset_filters') }}</div>
-        </ResetButton>
-      </ResetContainer>
-    </ButtonContainer>
-  </ContainerWrapper>
+        </reset-button>
+      </reset-container>
+    </button-container>
+  </container-wrapper>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import SelectComponent from '../inputs/select'
-  import Option from '../inputs/select/option'
-  import InputNumber from '../inputs/inputNumber'
-  import MainButton from '../buttons/mainButton'
-  import Checkbox from '../inputs/checkbox'
-  import draggable from 'vuedraggable'
-  import Icon from '../icon'
-  import DeleteIcon from '../deleteIcon'
-  import { datePickerLang } from '../../helpers/translateLang'
-  import theme from '@/assets/theme.js'
-  import VueDatePicker from '@vuepic/vue-datepicker'
+import styled from 'vue3-styled-components'
+import SelectComponent from '../inputs/select'
+import Option from '../inputs/select/option'
+import InputNumber from '../inputs/inputNumber'
+import MainButton from '../buttons/mainButton'
+import Checkbox from '../inputs/checkbox'
+import draggable from 'vuedraggable'
+import Icon from '../icon'
+import DeleteIcon from '../deleteIcon'
+import { datePickerLang } from '../../helpers/translateLang'
+import theme from '@/assets/theme.js'
+import VueDatePicker from '@vuepic/vue-datepicker'
 
-  const ContainerWrapper = styled.div`
+const ContainerWrapper = styled.div`
   position: absolute;
   margin-top: 4px;
   background-color: ${(props) => props.theme.colors.white};
@@ -328,8 +308,8 @@
   font-size: 13px;
 `
 
-  const ColAttrs = { numCols: Number, hasActiveView: Boolean }
-  const ColumnWrapper = styled('div', ColAttrs)`
+const ColAttrs = { numCols: Number, hasActiveView: Boolean }
+const ColumnWrapper = styled('div', ColAttrs)`
   display: grid;
   grid-template-columns: repeat(${(props) => props.numCols}, auto);
 
@@ -340,8 +320,8 @@
   `}
 `
 
-  const TitleAttrs = { showBorder: Boolean }
-  const ColumnTitle = styled('div', TitleAttrs)`
+const TitleAttrs = { showBorder: Boolean }
+const ColumnTitle = styled('div', TitleAttrs)`
   font-size: 14px;
   font-weight: 700;
   color: ${(props) => props.theme.colors.eturnityGrey};
@@ -353,13 +333,13 @@
   `}
 `
 
-  const ButtonContainer = styled.div`
+const ButtonContainer = styled.div`
   display: flex;
   gap: 10px;
   padding: 15px;
 `
 
-  const ResetContainer = styled.div`
+const ResetContainer = styled.div`
   display: grid;
   align-content: center;
   margin-left: auto;
@@ -369,9 +349,9 @@
   }
 `
 
-  const ColumnContainer = styled.div``
+const ColumnContainer = styled.div``
 
-  const DragContainer = styled.div`
+const DragContainer = styled.div`
   cursor: grab;
 
   &:active {
@@ -379,7 +359,7 @@
   }
 `
 
-  const RowContainer = styled('div', TitleAttrs)`
+const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
   min-width: 300px;
 
@@ -395,16 +375,16 @@
   }
 `
 
-  const OptionTitle = styled.div`
+const OptionTitle = styled.div`
   cursor: pointer !important;
 `
 
-  const CheckboxContainer = styled.div`
+const CheckboxContainer = styled.div`
   display: grid;
   gap: 6px;
 `
 
-  const CheckboxWrapper = styled.div`
+const CheckboxWrapper = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 16px;
@@ -412,7 +392,7 @@
   align-items: center;
 `
 
-  const DropdownCheckboxContainer = styled.div`
+const DropdownCheckboxContainer = styled.div`
   display: grid;
   gap: 6px;
   width: 100%;
@@ -420,42 +400,42 @@
   background: ${(props) => props.theme.colors.grey5};
 `
 
-  const RowWrapper = styled.div`
+const RowWrapper = styled.div`
   margin-bottom: 12px;
 `
 
-  const LabelAttrs = {
-    marginTop: Boolean
-  }
-  const RowLabel = styled('div', LabelAttrs)`
+const LabelAttrs = {
+  marginTop: Boolean
+}
+const RowLabel = styled('div', LabelAttrs)`
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 8px;
   margin-top: ${(props) => (props.marginTop ? '12px' : '0')};
 `
 
-  const SectionContainer = styled.div``
+const SectionContainer = styled.div``
 
-  const GridContainer = styled.div`
+const GridContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 12px;
 `
 
-  const ViewContainerAttrs = { maxWidth: Number }
-  const ViewContainer = styled('div', ViewContainerAttrs)`
+const ViewContainerAttrs = { maxWidth: Number }
+const ViewContainer = styled('div', ViewContainerAttrs)`
   max-width: ${(props) =>
-  props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
+    props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
 `
 
-  const UpperContainer = styled.div`
+const UpperContainer = styled.div`
   display: grid;
   grid-gap: 20px
   grid-template-columns: 1fr 1fr;
   padding: 10px 14px;
 `
 
-  const ResetButton = styled.div`
+const ResetButton = styled.div`
   display: inline-flex;
   gap: 16px;
   width: max-content;
@@ -466,188 +446,188 @@
   cursor: pointer;
 `
 
-  export default {
-    name: 'FilterSettings',
-    components: {
-      ContainerWrapper,
-      ColumnWrapper,
-      ColumnTitle,
-      ColumnContainer,
-      SelectComponent,
-      RowContainer,
-      OptionTitle,
-      Option,
-      ButtonContainer,
-      MainButton,
-      CheckboxContainer,
-      CheckboxWrapper,
-      Checkbox,
-      RowWrapper,
-      DropdownCheckboxContainer,
-      draggable,
-      Icon,
-      DragContainer,
-      InputNumber,
-      RowLabel,
-      SectionContainer,
-      GridContainer,
-      ViewContainer,
-      DeleteIcon,
-      UpperContainer,
-      ResetButton,
-      ResetContainer,
-      VueDatePicker
+export default {
+  name: 'filter-settings',
+  components: {
+    ContainerWrapper,
+    ColumnWrapper,
+    ColumnTitle,
+    ColumnContainer,
+    SelectComponent,
+    RowContainer,
+    OptionTitle,
+    Option,
+    ButtonContainer,
+    MainButton,
+    CheckboxContainer,
+    CheckboxWrapper,
+    Checkbox,
+    RowWrapper,
+    DropdownCheckboxContainer,
+    draggable,
+    Icon,
+    DragContainer,
+    InputNumber,
+    RowLabel,
+    SectionContainer,
+    GridContainer,
+    ViewContainer,
+    DeleteIcon,
+    UpperContainer,
+    ResetButton,
+    ResetContainer,
+    VueDatePicker
+  },
+  props: {
+    filterData: {
+      required: true
+    },
+    hasActiveView: {
+      required: false
     },
-    props: {
-      filterData: {
-        required: true
-      },
-      hasActiveView: {
-        required: false
-      },
-      buttonText: {
-        required: true
+    buttonText: {
+      required: true
       // example:
       // {
       //   'save_new_view': '$gettext("save_new_view")',
       //   'cancel': '$gettext("cancel")',
       //   'save_view': '$gettext("save_view")'
       // }
-      },
-      filterViews: {
-        required: true
-      },
-      activeLanguage: {
-        required: false
-      },
-      settingsTranslations: {
-        required: false
-      },
-      activeView: {
-        required: false
-      }
     },
-    data() {
-      return {
-        selectedDates: null,
-        value1: null,
-        dateStart: null,
-        dateEnd: null
-      }
+    filterViews: {
+      required: true
     },
-    computed: {
-      isCheckboxDisabled() {
-        // if only 1 item left, disable checkbox
-        let isDisabled = false
-        let columnsData = this.filterData.filter(
-          (item) => item.type === 'columns'
-        )
-        if (columnsData.length) {
-          columnsData = columnsData[0]
-          const filteredColumns = columnsData.dataOptions.filter(
-            (item) => item.selected
-          )
-          if (filteredColumns.length === 1) {
-            isDisabled = true
-          }
-        }
-        return isDisabled
-      },
-      theme() {
-        return theme
+    activeLanguage: {
+      required: false
+    },
+    settingsTranslations: {
+      required: false
+    },
+    activeView: {
+      required: false
+    }
+  },
+  data() {
+    return {
+      selectedDates: null,
+      value1: null,
+      dateStart: null,
+      dateEnd: null
+    }
+  },
+  methods: {
+    onChange({ dataType, value, choice, field }) {
+      if (
+        dataType === 'columns' &&
+        this.isCheckboxDisabled &&
+        value === false
+      ) {
+        return
       }
+      const data = { dataType, value, choice, field }
+      this.$emit('on-filter-change', data)
     },
-    methods: {
-      onChange({ dataType, value, choice, field }) {
-        if (
-          dataType === 'columns' &&
-          this.isCheckboxDisabled &&
-          value === false
-        ) {
-          return
-        }
-        const data = { dataType, value, choice, field }
-        this.$emit('on-filter-change', data)
-      },
-      onDatepickerFocus(range) {
-        this.dateStart = range.start
-        this.dateEnd = range.end
-        this.$emit('on-prevent-close', true)
-      },
-      onDatepickerBlur() {
-        this.$emit('on-prevent-close', false)
-      },
-      disablePastDates(date) {
-        const dateString = this.dateStart
-        if (!dateString) {
-          return
-        }
-        const dateParts = dateString.split('-')
+    onDatepickerFocus(range) {
+      this.dateStart = range.start
+      this.dateEnd = range.end
+      this.$emit('on-prevent-close', true)
+    },
+    onDatepickerBlur() {
+      this.$emit('on-prevent-close', false)
+    },
+    disablePastDates(date) {
+      const dateString = this.dateStart
+      if (!dateString) {
+        return
+      }
+      const dateParts = dateString.split('-')
 
-        const year = parseInt(dateParts[0])
-        const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
-        const day = parseInt(dateParts[2])
+      const year = parseInt(dateParts[0])
+      const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
+      const day = parseInt(dateParts[2])
 
-        const currentDate = new Date(year, month, day)
-        const selectedDate = new Date(date)
+      const currentDate = new Date(year, month, day)
+      const selectedDate = new Date(date)
 
-        // Disable dates that are greater than or equal to the current date
-        return selectedDate <= currentDate
-      },
-      disableFutureDates(date) {
-        const dateString = this.dateEnd
-        if (!dateString) {
-          return
-        }
-        const dateParts = dateString.split('-')
+      // Disable dates that are greater than or equal to the current date
+      return selectedDate <= currentDate
+    },
+    disableFutureDates(date) {
+      const dateString = this.dateEnd
+      if (!dateString) {
+        return
+      }
+      const dateParts = dateString.split('-')
 
-        const year = parseInt(dateParts[0])
-        const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
-        const day = parseInt(dateParts[2])
+      const year = parseInt(dateParts[0])
+      const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
+      const day = parseInt(dateParts[2])
 
-        const currentDate = new Date(year, month, day)
-        const selectedDate = new Date(date)
+      const currentDate = new Date(year, month, day)
+      const selectedDate = new Date(date)
 
-        // Disable dates that are greater than or equal to the current date
-        return selectedDate >= currentDate
-      },
-      getDatePickerLanguage() {
-        return datePickerLang(this.activeLanguage)
-      },
-      onDragChange({ data }) {
-        this.$emit('on-drag-change', data)
-      },
-      modifyDragItem(dataTransfer) {
-        const isSafari = /^((?!chrome|android).)*safari/i.test(
-          navigator.userAgent
+      // Disable dates that are greater than or equal to the current date
+      return selectedDate >= currentDate
+    },
+    getDatePickerLanguage() {
+      return datePickerLang(this.activeLanguage)
+    },
+    onDragChange({ data }) {
+      this.$emit('on-drag-change', data)
+    },
+    modifyDragItem(dataTransfer) {
+      const isSafari = /^((?!chrome|android).)*safari/i.test(
+        navigator.userAgent
+      )
+      // prevents the dragged element from dragging the whole row as a "ghost"
+      // Safari fix because this does not work on Safari
+      let img = new Image()
+      if (!isSafari) {
+        dataTransfer.setDragImage(img, 0, 0)
+      } else {
+        img.src =
+          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+        dataTransfer.setDragImage(img, 0, 0)
+      }
+    },
+    getSelectedValue({ value, options, filter }) {
+      const foundItem = options.find((item) => item.choice === value)
+      return foundItem ? foundItem.text : value ? value : filter.selectedText
+    },
+    isMultipleSelector(type) {
+      return type === 'multi_select_integer' || type === 'multi_select_string'
+    },
+    isRangeSelector(type) {
+      return type === 'integer_range' || type === 'number_range'
+    },
+    isIntegerRange(type) {
+      return type === 'integer_range'
+    },
+    isDateSelector(type) {
+      return type === 'datetime'
+    }
+  },
+  computed: {
+    isCheckboxDisabled() {
+      // if only 1 item left, disable checkbox
+      let isDisabled = false
+      let columnsData = this.filterData.filter(
+        (item) => item.type === 'columns'
+      )
+      if (columnsData.length) {
+        columnsData = columnsData[0]
+        const filteredColumns = columnsData.dataOptions.filter(
+          (item) => item.selected
         )
-        // prevents the dragged element from dragging the whole row as a "ghost"
-        // Safari fix because this does not work on Safari
-        let img = new Image()
-        if (!isSafari) {
-          dataTransfer.setDragImage(img, 0, 0)
-        } else {
-          img.src =
-            'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-          dataTransfer.setDragImage(img, 0, 0)
+        if (filteredColumns.length === 1) {
+          isDisabled = true
         }
-      },
-      getSelectedValue({ value, options, filter }) {
-        const foundItem = options.find((item) => item.choice === value)
-        return foundItem ? foundItem.text : value ? value : filter.selectedText
-      },
-      isMultipleSelector(type) {
-        return type === 'multi_select_integer' || type === 'multi_select_string'
-      },
-      isRangeSelector(type) {
-        return type === 'integer_range' || type === 'number_range'
-      },
-      isIntegerRange(type) {
-        return type === 'integer_range'
-      },
-      isDateSelector(type) {
-        return type === 'datetime'
       }
+      return isDisabled
+    },
+    theme() {
+      return theme
     }
   }
+}
 </script>