@eturnity/eturnity_reusable_components 7.12.7 → 7.16.0-qa-dev03.0

package/src/components/filter/filterSettings.vue

@@ -1,650 +1,650 @@
-<template>
-  <container-wrapper @click="$emit('on-container-click')">
-    <upper-container v-if="filterViews && filterViews.length">
-      <view-container :maxWidth="activeView.length">
-        <select-component
-          @click.native.stop
-          selectWidth="100%"
-          selectHeight="36px"
-          fontSize="13px"
-          :label="$gettext('active_filter')"
-          alignItems="vertical"
-        >
-          <template #selector>
-            <option-title>
-              {{ activeView }}
-            </option-title>
-          </template>
-          <template #dropdown>
-            <Option
-              v-for="(item, idx) in filterViews"
-              :key="idx + '_view'"
-              @click.native="$emit('on-view-select', item)"
-              :value="item.name"
-              >{{ item.name }}
-              <delete-icon @click.native.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" />
-        <div>{{ $gettext('reset_filters') }}</div>
-      </reset-button>
-    </upper-container>
-    <column-wrapper
-      :numCols="filterData.length"
-      :hasActiveView="!!filterViews && !!filterViews.length"
-    >
-      <column-container
-        v-for="(item, idx) in filterData"
-        :key="idx + '_filterdata'"
-      >
-        <column-title
-          :showBorder="idx + 1 !== filterData.length"
-          :data-id="`filter_label_project_view_file_manager_${item.type}`"
-        >
-          {{ item.columnName }}
-        </column-title>
-        <row-container v-if="item.type === 'columns'">
-          <checkbox-container>
-            <draggable
-              @change="onDragChange({ data: item.dataOptions })"
-              handle=".drag-container"
-              style="display: contents"
-              ghost-class="ghost"
-              :setData="modifyDragItem"
-              v-model="item.dataOptions"
-            >
-              <checkbox-wrapper
-                v-for="(column, index) in item.dataOptions"
-                :key="index + 'dataOption'"
-              >
-                <drag-container class="drag-container">
-                  <icon :name="'duplicate-1'" size="12px" />
-                </drag-container>
-                <checkbox
-                  :label="column.text"
-                  :isChecked="column.selected"
-                  @on-event-handler="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: column.choice
-                    })
-                  "
-                  size="small"
-                  :isDisabled="column.selected && isCheckboxDisabled"
-                />
-              </checkbox-wrapper>
-            </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'"
-          >
-            <select-component
-              v-if="isMultipleSelector(filter.filter_type)"
-              selectWidth="100%"
-              selectHeight="36px"
-              fontSize="13px"
-              :label="filter.label"
-              :labelDataId="filter.dataId"
-              alignItems="vertical"
-              :disabled="!filter.choices.length"
-            >
-              <template #selector>
-                <option-title> {{ filter.selectedText }} </option-title>
-              </template>
-              <template #dropdown>
-                <dropdown-checkbox-container @click.stop>
-                  <checkbox
-                    v-for="(filterOption, optionIdx) in filter.choices"
-                    :key="optionIdx + 'optionIdx'"
-                    :label="filterOption.text"
-                    :isChecked="filterOption.selected"
-                    @on-event-handler="
-                      onChange({
-                        dataType: item.type,
-                        value: $event,
-                        choice: filterOption.choice,
-                        field: filter.field
-                      })
-                    "
-                    size="small"
-                  />
-                </dropdown-checkbox-container>
-              </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
-                  :placeholder="
-                    filter.unit
-                      ? $gettext('min') + ' (' + filter.unit + ')'
-                      : $gettext('min')
-                  "
-                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
-                  :value="filter.range.start"
-                  @input-change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'start',
-                      field: filter.field
-                    })
-                  "
-                  fontSize="13px"
-                  inputHeight="36px"
-                  :unitName="filter.unit"
-                />
-                <input-number
-                  :placeholder="
-                    filter.unit
-                      ? $gettext('max') + ' (' + filter.unit + ')'
-                      : $gettext('max')
-                  "
-                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
-                  :value="filter.range.end"
-                  @input-change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'end',
-                      field: filter.field
-                    })
-                  "
-                  fontSize="13px"
-                  inputHeight="36px"
-                  :unitName="filter.unit"
-                />
-              </grid-container>
-            </section-container>
-            <section-container
-              v-else-if="isDateSelector(filter.filter_type)"
-              @click.stop
-            >
-              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
-              <grid-container>
-                <date-picker-input
-                  :placeholder="$gettext('Date from')"
-                  :lang="getDatePickerLanguage()"
-                  type="date"
-                  :value="filter.range.start"
-                  @change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'start',
-                      field: filter.field
-                    })
-                  "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disableFutureDates"
-                />
-                <date-picker-input
-                  :placeholder="$gettext('Date to')"
-                  :lang="getDatePickerLanguage()"
-                  type="date"
-                  :value="filter.range.end"
-                  @change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'end',
-                      field: filter.field
-                    })
-                  "
-                  @focus="onDatepickerFocus(filter.range)"
-                  @close="onDatepickerBlur()"
-                  format="YYYY-MM-DD"
-                  valueType="format"
-                  :disabled-date="disablePastDates"
-                />
-              </grid-container>
-            </section-container>
-            <select-component
-              v-else
-              selectWidth="100%"
-              selectHeight="36px"
-              fontSize="13px"
-              :label="filter.label"
-              alignItems="vertical"
-              :disabled="!filter.choices.length"
-            >
-              <template #selector="{ selectedValue }">
-                <option-title>
-                  {{
-                    getSelectedValue({
-                      value: selectedValue,
-                      options: filter.choices,
-                      filter
-                    })
-                  }}
-                </option-title>
-              </template>
-              <template #dropdown>
-                <Option
-                  v-for="(filterOption, filterIdx) in filter.choices"
-                  :key="filterIdx + '_filterIdx'"
-                  :value="filterOption.choice"
-                  >{{ filterOption.text }}</Option
-                >
-              </template>
-            </select-component>
-          </row-wrapper>
-        </row-container>
-      </column-container>
-    </column-wrapper>
-    <button-container>
-      <main-button
-        v-if="buttonText.apply_view"
-        type="primary"
-        :text="buttonText.apply_view"
-        @click.native="$emit('on-apply-current-view')"
-      />
-      <main-button
-        type="secondary"
-        v-if="buttonText.save_view"
-        :text="buttonText.save_view"
-        @click.native="$emit('on-save-new-view')"
-      />
-      <main-button
-        type="cancel"
-        v-if="buttonText.cancel"
-        :text="buttonText.cancel"
-        @click.native="$emit('on-cancel-view')"
-      />
-    </button-container>
-  </container-wrapper>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import DatePicker from 'vue2-datepicker'
-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 'vue2-datepicker/index.css'
-import 'vue2-datepicker/locale/de'
-import 'vue2-datepicker/locale/en'
-import 'vue2-datepicker/locale/es'
-import 'vue2-datepicker/locale/fr'
-import 'vue2-datepicker/locale/it'
-
-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: 9999;
-  font-size: 13px;
-`
-
-const ColAttrs = { numCols: Number, hasActiveView: Boolean }
-const ColumnWrapper = styled('div', ColAttrs)`
-  display: grid;
-  grid-template-columns: repeat(${(props) => props.numCols}, auto);
-
-  ${({ 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 ButtonContainer = styled.div`
-  display: flex;
-  gap: 10px;
-  padding: 15px;
-`
-
-const ColumnContainer = styled.div``
-
-const DragContainer = styled.div`
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-`
-
-const RowContainer = styled('div', TitleAttrs)`
-  padding: 10px 14px;
-  min-width: 300px;
-
-  ${({ showBorder, theme }) =>
-    showBorder &&
-    `
-    border-right: 1px solid ${theme.colors.grey4};
-  `}
-
-  .ghost {
-    opacity: 0.5;
-    background-color: #e5fcb4;
-  }
-`
-
-const OptionTitle = styled.div`
-  cursor: pointer !important;
-`
-
-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 DropdownCheckboxContainer = styled.div`
-  display: grid;
-  gap: 6px;
-  width: 100%;
-  padding: 12px 10px;
-`
-
-const RowWrapper = styled.div`
-  margin-bottom: 12px;
-`
-
-const DatePickerInput = styled(DatePicker)`
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-  padding: 7px 12px 7px 7px;
-  width: 100%;
-  position: relative;
-
-  &.mx-datepicker {
-    width: 100% !important;
-    max-width: 100%;
-    height: 36px;
-    align-self: flex-end;
-  }
-
-  .mx-input-wrapper {
-    position: unset;
-
-    input {
-      border: none;
-      height: auto;
-      padding: 0;
-      font-size: 13px;
-      box-shadow: none;
-      color: #393939;
-      vertical-align: bottom;
-    }
-
-    .mx-input-append {
-      top: 1px;
-    }
-  }
-
-  .mx-input-append {
-    left: 0;
-    top: 5px;
-    height: auto;
-    cursor: pointer;
-  }
-`
-
-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 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 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;
-`
-
-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,
-    DatePickerInput,
-    RowLabel,
-    SectionContainer,
-    GridContainer,
-    ViewContainer,
-    DeleteIcon,
-    UpperContainer,
-    ResetButton
-  },
-  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
-    }
-  },
-  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)
-    },
-    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 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('-')
-
-      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)
-
-      // 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
-        )
-        if (filteredColumns.length === 1) {
-          isDisabled = true
-        }
-      }
-      return isDisabled
-    },
-    theme() {
-      return theme
-    }
-  }
-}
-</script>
+<template>
+  <container-wrapper @click="$emit('on-container-click')">
+    <upper-container v-if="filterViews && filterViews.length">
+      <view-container :maxWidth="activeView.length">
+        <select-component
+          @click.native.stop
+          selectWidth="100%"
+          selectHeight="36px"
+          fontSize="13px"
+          :label="$gettext('active_filter')"
+          alignItems="vertical"
+        >
+          <template #selector>
+            <option-title>
+              {{ activeView }}
+            </option-title>
+          </template>
+          <template #dropdown>
+            <Option
+              v-for="(item, idx) in filterViews"
+              :key="idx + '_view'"
+              @click.native="$emit('on-view-select', item)"
+              :value="item.name"
+              >{{ item.name }}
+              <delete-icon @click.native.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" />
+        <div>{{ $gettext('reset_filters') }}</div>
+      </reset-button>
+    </upper-container>
+    <column-wrapper
+      :numCols="filterData.length"
+      :hasActiveView="!!filterViews && !!filterViews.length"
+    >
+      <column-container
+        v-for="(item, idx) in filterData"
+        :key="idx + '_filterdata'"
+      >
+        <column-title
+          :showBorder="idx + 1 !== filterData.length"
+          :data-id="`filter_label_project_view_file_manager_${item.type}`"
+        >
+          {{ item.columnName }}
+        </column-title>
+        <row-container v-if="item.type === 'columns'">
+          <checkbox-container>
+            <draggable
+              @change="onDragChange({ data: item.dataOptions })"
+              handle=".drag-container"
+              style="display: contents"
+              ghost-class="ghost"
+              :setData="modifyDragItem"
+              v-model="item.dataOptions"
+            >
+              <checkbox-wrapper
+                v-for="(column, index) in item.dataOptions"
+                :key="index + 'dataOption'"
+              >
+                <drag-container class="drag-container">
+                  <icon :name="'duplicate-1'" size="12px" />
+                </drag-container>
+                <checkbox
+                  :label="column.text"
+                  :isChecked="column.selected"
+                  @on-event-handler="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: column.choice
+                    })
+                  "
+                  size="small"
+                  :isDisabled="column.selected && isCheckboxDisabled"
+                />
+              </checkbox-wrapper>
+            </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'"
+          >
+            <select-component
+              v-if="isMultipleSelector(filter.filter_type)"
+              selectWidth="100%"
+              selectHeight="36px"
+              fontSize="13px"
+              :label="filter.label"
+              :labelDataId="filter.dataId"
+              alignItems="vertical"
+              :disabled="!filter.choices.length"
+            >
+              <template #selector>
+                <option-title> {{ filter.selectedText }} </option-title>
+              </template>
+              <template #dropdown>
+                <dropdown-checkbox-container @click.stop>
+                  <checkbox
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
+                    :label="filterOption.text"
+                    :isChecked="filterOption.selected"
+                    @on-event-handler="
+                      onChange({
+                        dataType: item.type,
+                        value: $event,
+                        choice: filterOption.choice,
+                        field: filter.field
+                      })
+                    "
+                    size="small"
+                  />
+                </dropdown-checkbox-container>
+              </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
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('min') + ' (' + filter.unit + ')'
+                      : $gettext('min')
+                  "
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                  :value="filter.range.start"
+                  @input-change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'start',
+                      field: filter.field
+                    })
+                  "
+                  fontSize="13px"
+                  inputHeight="36px"
+                  :unitName="filter.unit"
+                />
+                <input-number
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('max') + ' (' + filter.unit + ')'
+                      : $gettext('max')
+                  "
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                  :value="filter.range.end"
+                  @input-change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'end',
+                      field: filter.field
+                    })
+                  "
+                  fontSize="13px"
+                  inputHeight="36px"
+                  :unitName="filter.unit"
+                />
+              </grid-container>
+            </section-container>
+            <section-container
+              v-else-if="isDateSelector(filter.filter_type)"
+              @click.stop
+            >
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
+              <grid-container>
+                <date-picker-input
+                  :placeholder="$gettext('Date from')"
+                  :lang="getDatePickerLanguage()"
+                  type="date"
+                  :value="filter.range.start"
+                  @change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'start',
+                      field: filter.field
+                    })
+                  "
+                  @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
+                  format="YYYY-MM-DD"
+                  valueType="format"
+                  :disabled-date="disableFutureDates"
+                />
+                <date-picker-input
+                  :placeholder="$gettext('Date to')"
+                  :lang="getDatePickerLanguage()"
+                  type="date"
+                  :value="filter.range.end"
+                  @change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'end',
+                      field: filter.field
+                    })
+                  "
+                  @focus="onDatepickerFocus(filter.range)"
+                  @close="onDatepickerBlur()"
+                  format="YYYY-MM-DD"
+                  valueType="format"
+                  :disabled-date="disablePastDates"
+                />
+              </grid-container>
+            </section-container>
+            <select-component
+              v-else
+              selectWidth="100%"
+              selectHeight="36px"
+              fontSize="13px"
+              :label="filter.label"
+              alignItems="vertical"
+              :disabled="!filter.choices.length"
+            >
+              <template #selector="{ selectedValue }">
+                <option-title>
+                  {{
+                    getSelectedValue({
+                      value: selectedValue,
+                      options: filter.choices,
+                      filter
+                    })
+                  }}
+                </option-title>
+              </template>
+              <template #dropdown>
+                <Option
+                  v-for="(filterOption, filterIdx) in filter.choices"
+                  :key="filterIdx + '_filterIdx'"
+                  :value="filterOption.choice"
+                  >{{ filterOption.text }}</Option
+                >
+              </template>
+            </select-component>
+          </row-wrapper>
+        </row-container>
+      </column-container>
+    </column-wrapper>
+    <button-container>
+      <main-button
+        v-if="buttonText.apply_view"
+        type="primary"
+        :text="buttonText.apply_view"
+        @click.native="$emit('on-apply-current-view')"
+      />
+      <main-button
+        type="secondary"
+        v-if="buttonText.save_view"
+        :text="buttonText.save_view"
+        @click.native="$emit('on-save-new-view')"
+      />
+      <main-button
+        type="cancel"
+        v-if="buttonText.cancel"
+        :text="buttonText.cancel"
+        @click.native="$emit('on-cancel-view')"
+      />
+    </button-container>
+  </container-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import DatePicker from 'vue2-datepicker'
+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 'vue2-datepicker/index.css'
+import 'vue2-datepicker/locale/de'
+import 'vue2-datepicker/locale/en'
+import 'vue2-datepicker/locale/es'
+import 'vue2-datepicker/locale/fr'
+import 'vue2-datepicker/locale/it'
+
+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: 9999;
+  font-size: 13px;
+`
+
+const ColAttrs = { numCols: Number, hasActiveView: Boolean }
+const ColumnWrapper = styled('div', ColAttrs)`
+  display: grid;
+  grid-template-columns: repeat(${(props) => props.numCols}, auto);
+
+  ${({ 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 ButtonContainer = styled.div`
+  display: flex;
+  gap: 10px;
+  padding: 15px;
+`
+
+const ColumnContainer = styled.div``
+
+const DragContainer = styled.div`
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
+const RowContainer = styled('div', TitleAttrs)`
+  padding: 10px 14px;
+  min-width: 300px;
+
+  ${({ showBorder, theme }) =>
+    showBorder &&
+    `
+    border-right: 1px solid ${theme.colors.grey4};
+  `}
+
+  .ghost {
+    opacity: 0.5;
+    background-color: #e5fcb4;
+  }
+`
+
+const OptionTitle = styled.div`
+  cursor: pointer !important;
+`
+
+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 DropdownCheckboxContainer = styled.div`
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 12px 10px;
+`
+
+const RowWrapper = styled.div`
+  margin-bottom: 12px;
+`
+
+const DatePickerInput = styled(DatePicker)`
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  padding: 7px 12px 7px 7px;
+  width: 100%;
+  position: relative;
+
+  &.mx-datepicker {
+    width: 100% !important;
+    max-width: 100%;
+    height: 36px;
+    align-self: flex-end;
+  }
+
+  .mx-input-wrapper {
+    position: unset;
+
+    input {
+      border: none;
+      height: auto;
+      padding: 0;
+      font-size: 13px;
+      box-shadow: none;
+      color: #393939;
+      vertical-align: bottom;
+    }
+
+    .mx-input-append {
+      top: 1px;
+    }
+  }
+
+  .mx-input-append {
+    left: 0;
+    top: 5px;
+    height: auto;
+    cursor: pointer;
+  }
+`
+
+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 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 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;
+`
+
+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,
+    DatePickerInput,
+    RowLabel,
+    SectionContainer,
+    GridContainer,
+    ViewContainer,
+    DeleteIcon,
+    UpperContainer,
+    ResetButton
+  },
+  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
+    }
+  },
+  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)
+    },
+    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 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('-')
+
+      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)
+
+      // 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
+        )
+        if (filteredColumns.length === 1) {
+          isDisabled = true
+        }
+      }
+      return isDisabled
+    },
+    theme() {
+      return theme
+    }
+  }
+}
+</script>