@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

package/src/components/filter/filterSettings.vue

@@ -1,633 +1,667 @@
 <template>
-  <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"
+  <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')"
-          alignItems="vertical"
+          select-height="36px"
+          select-width="100%"
+          @click.stop
         >
           <template #selector>
-            <option-title>
+            <OptionTitle>
               {{ activeView }}
-            </option-title>
+            </OptionTitle>
           </template>
           <template #dropdown>
             <Option
               v-for="(item, idx) in filterViews"
               :key="idx + '_view'"
-              @click="$emit('on-view-select', item)"
               :value="item.name"
-              >{{ item.name }}
-              <delete-icon @click.stop="$emit('on-view-delete', item)"
-            /></Option>
+              @click="$emit('on-view-select', item)"
+            >
+              {{ item.name }}
+              <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
+            </Option>
           </template>
-        </select-component>
-      </view-container>
-      <reset-button @click="$emit('on-reset-filters')">
-        <icon :name="'update'" size="14px" :color="theme.colors.blue" />
+        </SelectComponent>
+      </ViewContainer>
+      <ResetButton @click="$emit('on-reset-filters')">
+        <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
         <div>{{ $gettext('reset_filters') }}</div>
-      </reset-button>
-    </upper-container>
-    <column-wrapper
-      :numCols="filterData.length"
-      :hasActiveView="!!filterViews && !!filterViews.length"
+      </ResetButton>
+    </UpperContainer>
+    <ColumnWrapper
+      :has-active-view="!!filterViews && !!filterViews.length"
+      :num-cols="filterData.length"
     >
-      <column-container
+      <ColumnContainer
         v-for="(item, idx) in filterData"
         :key="idx + '_filterdata'"
       >
-        <column-title
-          :showBorder="idx + 1 !== filterData.length"
+        <ColumnTitle
           :data-id="`filter_label_project_view_file_manager_${item.type}`"
+          :show-border="idx + 1 !== filterData.length"
         >
           {{ item.columnName }}
-        </column-title>
-        <row-container v-if="item.type === 'columns'">
-          <checkbox-container>
-            <draggable
-              @change="onDragChange({ data: item.dataOptions })"
+        </ColumnTitle>
+        <RowContainer v-if="item.type === 'columns'">
+          <CheckboxContainer>
+            <Draggable
+              v-model="item.dataOptions"
+              ghost-class="ghost"
               handle=".drag-container"
+              item-key="choice"
+              :set-data="modifyDragItem"
               style="display: contents"
-              ghost-class="ghost"
-              :setData="modifyDragItem"
-              v-model="item.dataOptions"
-              itemKey="choice"
+              @change="onDragChange({ data: item.dataOptions })"
             >
               <template #item="{ element: column }">
-                <checkbox-wrapper>
-                  <drag-container class="drag-container">
-                    <icon :name="'duplicate-1'" size="12px" />
-                  </drag-container>
-                  <checkbox
+                <CheckboxWrapper>
+                  <DragContainer class="drag-container">
+                    <Icon :name="'duplicate-1'" size="12px" />
+                  </DragContainer>
+                  <Checkbox
+                    :is-checked="column.selected"
+                    :is-disabled="column.selected && isCheckboxDisabled"
                     :label="column.text"
-                    :isChecked="column.selected"
+                    size="small"
                     @on-event-handler="
                       onChange({
                         dataType: item.type,
                         value: $event,
-                        choice: column.choice
+                        choice: column.choice,
                       })
                     "
-                    size="small"
-                    :isDisabled="column.selected && isCheckboxDisabled"
                   />
-                </checkbox-wrapper>
+                </CheckboxWrapper>
               </template>
-            </draggable>
-          </checkbox-container>
-        </row-container>
-        <row-container v-if="item.type === 'filter'" showBorder>
-          <row-wrapper
+            </Draggable>
+          </CheckboxContainer>
+        </RowContainer>
+        <RowContainer v-if="item.type === 'filter'" show-border>
+          <RowWrapper
             v-for="(filter, index) in item.dataOptions"
             :key="index + '_field'"
           >
-            <select-component
-              v-if="isMultipleSelector(filter.filter_type)"
-              selectWidth="100%"
-              selectHeight="36px"
-              fontSize="13px"
-              :label="filter.label"
-              :labelDataId="filter.dataId"
-              :isSearchable="filter.choices.length > 7"
-              alignItems="vertical"
+            <SelectComponent
+              v-if="
+                isMultipleSelector(filter.filter_type) ||
+                isSingleSelector(filter.filter_type)
+              "
+              align-items="vertical"
               :disabled="!filter.choices.length"
-              :minOptionLength="1"
+              font-size="13px"
+              :is-searchable="filter.choices.length > 7"
+              :label="filter.label"
+              :label-data-id="filter.dataId"
+              :min-option-length="1"
+              select-height="36px"
+              select-width="100%"
             >
               <template #selector>
-                <option-title> {{ filter.selectedText }} </option-title>
+                <OptionTitle> {{ filter.selectedText }} </OptionTitle>
               </template>
               <template #dropdown>
-                <dropdown-checkbox-container
-                  v-for="(filterOption, optionIdx) in filter.choices"
-                  :key="optionIdx + 'optionIdx'"
-                  @click.stop
-                >
-                  <checkbox
-                    :label="filterOption.text"
-                    :isChecked="filterOption.selected"
-                    @on-event-handler="
+                <template v-if="isSingleSelector(filter.filter_type)">
+                  <Option
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    :value="filterOption.text"
+                    @click="
                       onChange({
                         dataType: item.type,
                         value: $event,
                         choice: filterOption.choice,
-                        field: filter.field
+                        field: filter.field,
                       })
                     "
-                    size="small"
-                  />
-                </dropdown-checkbox-container>
+                  >
+                    {{ filterOption.text }}
+                  </Option>
+                </template>
+                <template v-else>
+                  <DropdownCheckboxContainer
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    @click.stop
+                  >
+                    <Checkbox
+                      :is-checked="filterOption.selected"
+                      :label="filterOption.text"
+                      size="small"
+                      @on-event-handler="
+                        onChange({
+                          dataType: item.type,
+                          value: $event,
+                          choice: filterOption.choice,
+                          field: filter.field,
+                        })
+                      "
+                    />
+                  </DropdownCheckboxContainer>
+                </template>
               </template>
-            </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
+            </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"
                   :placeholder="
                     filter.unit
                       ? $gettext('min') + ' (' + filter.unit + ')'
                       : $gettext('min')
                   "
-                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                  :unit-name="filter.unit"
                   :value="filter.range.start"
                   @input-change="
                     onChange({
                       dataType: item.type,
                       value: $event,
                       choice: 'start',
-                      field: filter.field
+                      field: filter.field,
                     })
                   "
-                  fontSize="13px"
-                  inputHeight="36px"
-                  :unitName="filter.unit"
                 />
-                <input-number
+                <InputNumber
+                  font-size="13px"
+                  input-height="36px"
+                  :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :placeholder="
                     filter.unit
                       ? $gettext('max') + ' (' + filter.unit + ')'
                       : $gettext('max')
                   "
-                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                  :unit-name="filter.unit"
                   :value="filter.range.end"
                   @input-change="
                     onChange({
                       dataType: item.type,
                       value: $event,
                       choice: 'end',
-                      field: filter.field
+                      field: filter.field,
                     })
                   "
-                  fontSize="13px"
-                  inputHeight="36px"
-                  :unitName="filter.unit"
                 />
-              </grid-container>
-            </section-container>
-            <section-container
+              </GridContainer>
+            </SectionContainer>
+            <SectionContainer
               v-else-if="isDateSelector(filter.filter_type)"
               @click.stop
             >
-              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
-              <grid-container>
+              <RowLabel :data-id="filter.dataId">
+                {{ filter.label }}
+              </RowLabel>
+              <GridContainer>
                 <VueDatePicker
-                  text-input
-                  :placeholder="$gettext('Date from')"
-                  :locale="getDatePickerLanguage()"
-                  :model-value="filter.range.start"
-                  :enable-time-picker="false"
-                  :clearable="true"
                   :auto-apply="true"
+                  :clearable="true"
                   :disabled-dates="disableFutureDates"
+                  :enable-time-picker="false"
                   format="yyyy-MM-dd"
+                  :locale="getDatePickerLanguage()"
                   model-type="format"
-                  @focus="onDatepickerFocus(filter.range)"
+                  :model-value="filter.range.start"
+                  :placeholder="$gettext('Date from')"
+                  text-input
                   @close="onDatepickerBlur()"
+                  @focus="onDatepickerFocus(filter.range)"
                   @update:model-value="
                     onChange({
                       dataType: item.type,
                       value: $event,
                       choice: 'start',
-                      field: filter.field
+                      field: filter.field,
                     })
                   "
                 />
                 <VueDatePicker
-                  text-input
-                  :placeholder="$gettext('Date to')"
-                  :locale="getDatePickerLanguage()"
-                  :model-value="filter.range.end"
-                  :enable-time-picker="false"
-                  :clearable="true"
                   :auto-apply="true"
+                  :clearable="true"
                   :disabled-dates="disablePastDates"
+                  :enable-time-picker="false"
                   format="yyyy-MM-dd"
+                  :locale="getDatePickerLanguage()"
                   model-type="format"
-                  @focus="onDatepickerFocus(filter.range)"
+                  :model-value="filter.range.end"
+                  :placeholder="$gettext('Date to')"
+                  text-input
                   @close="onDatepickerBlur()"
+                  @focus="onDatepickerFocus(filter.range)"
                   @update:model-value="
                     onChange({
                       dataType: item.type,
                       value: $event,
                       choice: 'end',
-                      field: filter.field
+                      field: filter.field,
                     })
                   "
                 />
-              </grid-container>
-            </section-container>
-            <select-component
+              </GridContainer>
+            </SectionContainer>
+            <SelectComponent
               v-else
-              selectWidth="100%"
-              selectHeight="36px"
-              fontSize="13px"
-              :label="filter.label"
-              alignItems="vertical"
-              :isSearchable="filter.choices.length > 7"
+              align-items="vertical"
               :disabled="!filter.choices.length"
+              font-size="13px"
+              :is-searchable="filter.choices.length > 7"
+              :label="filter.label"
+              select-height="36px"
+              select-width="100%"
             >
               <template #selector="{ selectedValue }">
-                <option-title>
+                <OptionTitle>
                   {{
                     getSelectedValue({
                       value: selectedValue,
                       options: filter.choices,
-                      filter
+                      filter,
                     })
                   }}
-                </option-title>
+                </OptionTitle>
               </template>
               <template #dropdown>
                 <Option
                   v-for="(filterOption, filterIdx) in filter.choices"
                   :key="filterIdx + '_filterIdx'"
                   :value="filterOption.choice"
-                  >{{ filterOption.text }}</Option
                 >
+                  {{ filterOption.text }}
+                </Option>
               </template>
-            </select-component>
-          </row-wrapper>
-        </row-container>
-      </column-container>
-    </column-wrapper>
-    <button-container>
-      <main-button
+            </SelectComponent>
+          </RowWrapper>
+        </RowContainer>
+      </ColumnContainer>
+    </ColumnWrapper>
+    <ButtonContainer>
+      <MainButton
         v-if="buttonText.apply_view"
-        type="primary"
         :text="buttonText.apply_view"
+        type="primary"
         @click="$emit('on-apply-current-view')"
       />
-      <main-button
-        type="secondary"
+      <MainButton
         v-if="buttonText.save_view"
         :text="buttonText.save_view"
+        type="secondary"
         @click="$emit('on-save-new-view')"
       />
-      <main-button
-        type="cancel"
+      <MainButton
         v-if="buttonText.cancel"
         :text="buttonText.cancel"
+        type="cancel"
         @click="$emit('on-cancel-view')"
       />
-      <reset-container v-if="!filterViews || !filterViews.length">
-        <reset-button @click="$emit('on-reset-filters')">
-          <icon :name="'update'" size="14px" :color="theme.colors.blue" />
+      <ResetContainer v-if="!filterViews || !filterViews.length">
+        <ResetButton @click="$emit('on-reset-filters')">
+          <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
           <div>{{ $gettext('reset_filters') }}</div>
-        </reset-button>
-      </reset-container>
-    </button-container>
-  </container-wrapper>
+        </ResetButton>
+      </ResetContainer>
+    </ButtonContainer>
+  </ContainerWrapper>
 </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`
-  position: absolute;
-  margin-top: 4px;
-  background-color: ${(props) => props.theme.colors.white};
-  min-width: 100%;
-  width: max-content;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-  z-index: 99999;
-  font-size: 13px;
-`
+  const ContainerWrapper = styled.div`
+    position: absolute;
+    margin-top: 4px;
+    max-height: 70vh;
+    background-color: ${(props) => props.theme.colors.white};
+    min-width: 100%;
+    width: max-content;
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+    z-index: 99999;
+    font-size: 13px;
+  `
 
-const ColAttrs = { numCols: Number, hasActiveView: Boolean }
-const ColumnWrapper = styled('div', ColAttrs)`
-  display: grid;
-  grid-template-columns: repeat(${(props) => props.numCols}, auto);
+  const ColAttrs = { numCols: Number, hasActiveView: Boolean }
+  const ColumnWrapper = styled('div', ColAttrs)`
+    display: grid;
+    max-height: calc(70vh - 50px);
+    overflow-y: auto;
+    grid-template-columns: repeat(${(props) => props.numCols}, auto);
 
-  ${({ hasActiveView, theme }) =>
-    hasActiveView &&
-    `
-    border-top: 1px solid ${theme.colors.grey4};
-  `}
-`
+    ${({ hasActiveView, theme }) =>
+      hasActiveView &&
+      `
+      border-top: 1px solid ${theme.colors.grey4};
+    `}
+  `
 
-const TitleAttrs = { showBorder: Boolean }
-const ColumnTitle = styled('div', TitleAttrs)`
-  font-size: 14px;
-  font-weight: 700;
-  color: ${(props) => props.theme.colors.eturnityGrey};
-  padding: 10px 14px;
-  ${({ showBorder, theme }) =>
-    showBorder &&
-    `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
-`
+  const TitleAttrs = { showBorder: Boolean }
+  const ColumnTitle = styled('div', TitleAttrs)`
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.eturnityGrey};
+    padding: 10px 14px;
+    ${({ showBorder, theme }) =>
+      showBorder &&
+      `
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
+  `
 
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: 10px;
-  padding: 15px;
-`
+  const ButtonContainer = styled.div`
+    display: flex;
+    gap: 10px;
+    padding: 15px;
+  `
 
-const ResetContainer = styled.div`
-  display: grid;
-  align-content: center;
-  margin-left: auto;
-  div {
-    margin-top: 0;
-    align-self: center;
-  }
-`
+  const ResetContainer = styled.div`
+    display: grid;
+    align-content: center;
+    margin-left: auto;
+    div {
+      margin-top: 0;
+      align-self: center;
+    }
+  `
 
-const ColumnContainer = styled.div``
+  const ColumnContainer = styled.div``
 
-const DragContainer = styled.div`
-  cursor: grab;
+  const DragContainer = styled.div`
+    cursor: grab;
 
-  &:active {
-    cursor: grabbing;
-  }
-`
+    &:active {
+      cursor: grabbing;
+    }
+  `
 
-const RowContainer = styled('div', TitleAttrs)`
-  padding: 10px 14px;
-  min-width: 300px;
+  const RowContainer = styled('div', TitleAttrs)`
+    padding: 10px 14px;
+    min-width: 300px;
 
-  ${({ showBorder, theme }) =>
-    showBorder &&
-    `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
+    ${({ showBorder, theme }) =>
+      showBorder &&
+      `
+      border-right: 1px solid ${theme.colors.grey4};
+    `}
 
-  .ghost {
-    opacity: 0.5;
-    background-color: #e5fcb4;
-  }
-`
+    .ghost {
+      opacity: 0.5;
+      background-color: #e5fcb4;
+    }
+  `
 
-const OptionTitle = styled.div`
-  cursor: pointer !important;
-`
+  const OptionTitle = styled.div`
+    cursor: pointer !important;
+  `
 
-const CheckboxContainer = styled.div`
-  display: grid;
-  gap: 6px;
-`
+  const CheckboxContainer = styled.div`
+    display: grid;
+    gap: 6px;
+  `
 
-const CheckboxWrapper = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 16px;
-  padding: 2px;
-  align-items: center;
-`
+  const CheckboxWrapper = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 16px;
+    padding: 2px;
+    align-items: center;
+  `
 
-const DropdownCheckboxContainer = styled.div`
-  display: grid;
-  gap: 6px;
-  width: 100%;
-  padding: 7px 10px;
-  background: ${(props) => props.theme.colors.grey5};
-`
+  const DropdownCheckboxContainer = styled.div`
+    display: grid;
+    gap: 6px;
+    width: 100%;
+    padding: 7px 10px;
+    background: ${(props) => props.theme.colors.grey5};
+  `
 
-const RowWrapper = styled.div`
-  margin-bottom: 12px;
-`
+  const RowWrapper = styled.div`
+    margin-bottom: 12px;
+  `
 
-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 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`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 12px;
-`
+  const GridContainer = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 12px;
+  `
 
-const ViewContainerAttrs = { maxWidth: Number }
-const ViewContainer = styled('div', ViewContainerAttrs)`
-  max-width: ${(props) =>
-    props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
-`
+  const ViewContainerAttrs = { maxWidth: Number }
+  const ViewContainer = styled('div', ViewContainerAttrs)`
+    max-width: ${(props) =>
+      props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
+  `
 
-const UpperContainer = styled.div`
-  display: grid;
-  grid-gap: 20px
-  grid-template-columns: 1fr 1fr;
-  padding: 10px 14px;
-`
+  const UpperContainer = styled.div`
+    display: grid;
+    grid-gap: 20px
+    grid-template-columns: 1fr 1fr;
+    padding: 10px 14px;
+  `
 
-const ResetButton = styled.div`
-  display: inline-flex;
-  gap: 16px;
-  width: max-content;
-  margin-top: 20px;
-  align-self: center;
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.blue};
-  cursor: pointer;
-`
+  const ResetButton = styled.div`
+    display: inline-flex;
+    gap: 16px;
+    width: max-content;
+    margin-top: 20px;
+    align-self: center;
+    font-size: 13px;
+    color: ${(props) => props.theme.colors.blue};
+    cursor: pointer;
+  `
 
-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
+  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,
     },
-    hasActiveView: {
-      required: false
+    props: {
+      filterData: {
+        required: true,
+      },
+      hasActiveView: {
+        required: false,
+      },
+      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,
+      },
     },
-    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
-    }
-  },
-  methods: {
-    onChange({ dataType, value, choice, field }) {
-      if (
-        dataType === 'columns' &&
-        this.isCheckboxDisabled &&
-        value === false
-      ) {
-        return
+    data() {
+      return {
+        selectedDates: null,
+        value1: null,
+        dateStart: null,
+        dateEnd: null,
       }
-      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)
+    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
+      },
     },
-    disablePastDates(date) {
-      const dateString = this.dateStart
-      if (!dateString) {
-        return
-      }
-      const dateParts = dateString.split('-')
+    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('-')
 
-      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
-      )
-      // 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
+        // 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
         )
-        if (filteredColumns.length === 1) {
-          isDisabled = true
+        // 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)
         }
-      }
-      return isDisabled
+      },
+      getSelectedValue({ value, options, filter }) {
+        const foundItem = options.find((item) => item.choice === value)
+        return foundItem ? foundItem.text : value ? value : filter.selectedText
+      },
+      isSingleSelector(type) {
+        return type === 'boolean'
+      },
+      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'
+      },
     },
-    theme() {
-      return theme
-    }
   }
-}
 </script>