@eturnity/eturnity_reusable_components 8.13.12 → 8.13.13-EPDM-9631.0

package/src/components/filter/filterSettings.vue

@@ -1,670 +1,670 @@
-<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%"
-          @click.stop
-        >
-          <template #selector>
-            <OptionTitle>
-              {{ activeView }}
-            </OptionTitle>
-          </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>
-          </template>
-        </SelectComponent>
-      </ViewContainer>
-      <ResetButton @click="$emit('on-reset-filters')">
-        <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
-        <div>{{ $gettext('reset_filters') }}</div>
-      </ResetButton>
-    </UpperContainer>
-    <ColumnWrapper
-      :has-active-view="!!filterViews && !!filterViews.length"
-      :num-cols="filterData.length"
-    >
-      <ColumnContainer
-        v-for="(item, idx) in filterData"
-        :key="idx + '_filterdata'"
-      >
-        <ColumnTitle
-          :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"
-              handle=".drag-container"
-              item-key="choice"
-              :set-data="modifyDragItem"
-              style="display: contents"
-              @change="onDragChange({ data: item.dataOptions })"
-            >
-              <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"
-                    :label="column.text"
-                    size="small"
-                    @on-event-handler="
-                      onChange({
-                        dataType: item.type,
-                        value: $event,
-                        choice: column.choice,
-                      })
-                    "
-                  />
-                </CheckboxWrapper>
-              </template>
-            </Draggable>
-          </CheckboxContainer>
-        </RowContainer>
-        <RowContainer v-if="item.type === 'filter'" show-border>
-          <RowWrapper
-            v-for="(filter, index) in item.dataOptions"
-            :key="index + '_field'"
-          >
-            <SelectComponent
-              v-if="
-                isMultipleSelector(filter.filter_type) ||
-                isSingleSelector(filter.filter_type)
-              "
-              align-items="vertical"
-              :disabled="!filter.choices.length"
-              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>
-                <OptionTitle> {{ filter.selectedText }} </OptionTitle>
-              </template>
-              <template #dropdown>
-                <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,
-                      })
-                    "
-                  >
-                    {{ 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>
-            </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')
-                  "
-                  :unit-name="filter.unit"
-                  :value="filter.range.start"
-                  @input-change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'start',
-                      field: filter.field,
-                    })
-                  "
-                />
-                <InputNumber
-                  font-size="13px"
-                  input-height="36px"
-                  :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
-                  :placeholder="
-                    filter.unit
-                      ? $gettext('max') + ' (' + filter.unit + ')'
-                      : $gettext('max')
-                  "
-                  :unit-name="filter.unit"
-                  :value="filter.range.end"
-                  @input-change="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'end',
-                      field: filter.field,
-                    })
-                  "
-                />
-              </GridContainer>
-            </SectionContainer>
-            <SectionContainer
-              v-else-if="isDateSelector(filter.filter_type)"
-              @click.stop
-            >
-              <RowLabel :data-id="filter.dataId">
-                {{ filter.label }}
-              </RowLabel>
-              <GridContainer>
-                <VueDatePicker
-                  :auto-apply="true"
-                  :clearable="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)"
-                  @update:model-value="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'start',
-                      field: filter.field,
-                    })
-                  "
-                />
-                <VueDatePicker
-                  :auto-apply="true"
-                  :clearable="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)"
-                  @update:model-value="
-                    onChange({
-                      dataType: item.type,
-                      value: $event,
-                      choice: 'end',
-                      field: filter.field,
-                    })
-                  "
-                />
-              </GridContainer>
-            </SectionContainer>
-            <SelectComponent
-              v-else
-              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 }">
-                <OptionTitle>
-                  {{
-                    getSelectedValue({
-                      value: selectedValue,
-                      options: filter.choices,
-                      filter,
-                    })
-                  }}
-                </OptionTitle>
-              </template>
-              <template #dropdown>
-                <Option
-                  v-for="(filterOption, filterIdx) in filter.choices"
-                  :key="filterIdx + '_filterIdx'"
-                  :value="filterOption.choice"
-                >
-                  {{ filterOption.text }}
-                </Option>
-              </template>
-            </SelectComponent>
-          </RowWrapper>
-        </RowContainer>
-      </ColumnContainer>
-    </ColumnWrapper>
-    <ButtonContainer>
-      <MainButton
-        v-if="buttonText.apply_view"
-        :text="buttonText.apply_view"
-        type="primary"
-        @click="$emit('on-apply-current-view')"
-      />
-      <MainButton
-        v-if="buttonText.save_view"
-        :text="buttonText.save_view"
-        type="secondary"
-        @click="$emit('on-save-new-view')"
-      />
-      <MainButton
-        v-if="buttonText.cancel"
-        :text="buttonText.cancel"
-        type="primary"
-        variant="cancel"
-        @click="$emit('on-cancel-view')"
-      />
-      <ResetContainer v-if="!filterViews || !filterViews.length">
-        <ResetButton @click="$emit('on-reset-filters')">
-          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
-          <div>{{ $gettext('reset_filters') }}</div>
-        </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'
-
-  const ContainerWrapper = styled.div`
-    position: absolute;
-    margin-top: 4px;
-    max-height: 70vh;
-    overflow-y: auto;
-    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: 1;
-    font-size: 13px;
-  `
-
-  const ColAttrs = { numCols: Number, hasActiveView: Boolean }
-  const ColumnWrapper = styled('div', ColAttrs)`
-    display: grid;
-    max-height: 50vh;
-    overflow-y: auto;
-    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 ResetContainer = styled.div`
-    display: grid;
-    align-content: center;
-    margin-left: auto;
-    div {
-      margin-top: 0;
-      align-self: center;
-    }
-  `
-
-  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%;
-    overflow-wrap: anywhere;
-    padding: 7px 10px;
-    background: ${(props) => props.theme.colors.grey5};
-  `
-
-  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 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.primary};
-    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,
-    },
-    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,
-      }
-    },
-    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
-      },
-    },
-    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
-      },
-      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'
-      },
-    },
-  }
-</script>
+<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%"
+          @click.stop
+        >
+          <template #selector>
+            <OptionTitle>
+              {{ activeView }}
+            </OptionTitle>
+          </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>
+          </template>
+        </SelectComponent>
+      </ViewContainer>
+      <ResetButton @click="$emit('on-reset-filters')">
+        <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
+        <div>{{ $gettext('reset_filters') }}</div>
+      </ResetButton>
+    </UpperContainer>
+    <ColumnWrapper
+      :has-active-view="!!filterViews && !!filterViews.length"
+      :num-cols="filterData.length"
+    >
+      <ColumnContainer
+        v-for="(item, idx) in filterData"
+        :key="idx + '_filterdata'"
+      >
+        <ColumnTitle
+          :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"
+              handle=".drag-container"
+              item-key="choice"
+              :set-data="modifyDragItem"
+              style="display: contents"
+              @change="onDragChange({ data: item.dataOptions })"
+            >
+              <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"
+                    :label="column.text"
+                    size="small"
+                    @on-event-handler="
+                      onChange({
+                        dataType: item.type,
+                        value: $event,
+                        choice: column.choice,
+                      })
+                    "
+                  />
+                </CheckboxWrapper>
+              </template>
+            </Draggable>
+          </CheckboxContainer>
+        </RowContainer>
+        <RowContainer v-if="item.type === 'filter'" show-border>
+          <RowWrapper
+            v-for="(filter, index) in item.dataOptions"
+            :key="index + '_field'"
+          >
+            <SelectComponent
+              v-if="
+                isMultipleSelector(filter.filter_type) ||
+                isSingleSelector(filter.filter_type)
+              "
+              align-items="vertical"
+              :disabled="!filter.choices.length"
+              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>
+                <OptionTitle> {{ filter.selectedText }} </OptionTitle>
+              </template>
+              <template #dropdown>
+                <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,
+                      })
+                    "
+                  >
+                    {{ 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>
+            </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')
+                  "
+                  :unit-name="filter.unit"
+                  :value="filter.range.start"
+                  @input-change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'start',
+                      field: filter.field,
+                    })
+                  "
+                />
+                <InputNumber
+                  font-size="13px"
+                  input-height="36px"
+                  :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('max') + ' (' + filter.unit + ')'
+                      : $gettext('max')
+                  "
+                  :unit-name="filter.unit"
+                  :value="filter.range.end"
+                  @input-change="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'end',
+                      field: filter.field,
+                    })
+                  "
+                />
+              </GridContainer>
+            </SectionContainer>
+            <SectionContainer
+              v-else-if="isDateSelector(filter.filter_type)"
+              @click.stop
+            >
+              <RowLabel :data-id="filter.dataId">
+                {{ filter.label }}
+              </RowLabel>
+              <GridContainer>
+                <VueDatePicker
+                  :auto-apply="true"
+                  :clearable="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)"
+                  @update:model-value="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'start',
+                      field: filter.field,
+                    })
+                  "
+                />
+                <VueDatePicker
+                  :auto-apply="true"
+                  :clearable="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)"
+                  @update:model-value="
+                    onChange({
+                      dataType: item.type,
+                      value: $event,
+                      choice: 'end',
+                      field: filter.field,
+                    })
+                  "
+                />
+              </GridContainer>
+            </SectionContainer>
+            <SelectComponent
+              v-else
+              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 }">
+                <OptionTitle>
+                  {{
+                    getSelectedValue({
+                      value: selectedValue,
+                      options: filter.choices,
+                      filter,
+                    })
+                  }}
+                </OptionTitle>
+              </template>
+              <template #dropdown>
+                <Option
+                  v-for="(filterOption, filterIdx) in filter.choices"
+                  :key="filterIdx + '_filterIdx'"
+                  :value="filterOption.choice"
+                >
+                  {{ filterOption.text }}
+                </Option>
+              </template>
+            </SelectComponent>
+          </RowWrapper>
+        </RowContainer>
+      </ColumnContainer>
+    </ColumnWrapper>
+    <ButtonContainer>
+      <MainButton
+        v-if="buttonText.apply_view"
+        :text="buttonText.apply_view"
+        type="primary"
+        @click="$emit('on-apply-current-view')"
+      />
+      <MainButton
+        v-if="buttonText.save_view"
+        :text="buttonText.save_view"
+        type="secondary"
+        @click="$emit('on-save-new-view')"
+      />
+      <MainButton
+        v-if="buttonText.cancel"
+        :text="buttonText.cancel"
+        type="primary"
+        variant="cancel"
+        @click="$emit('on-cancel-view')"
+      />
+      <ResetContainer v-if="!filterViews || !filterViews.length">
+        <ResetButton @click="$emit('on-reset-filters')">
+          <Icon :color="theme.colors.primary" :name="'update'" size="14px" />
+          <div>{{ $gettext('reset_filters') }}</div>
+        </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'
+
+  const ContainerWrapper = styled.div`
+    position: absolute;
+    margin-top: 4px;
+    max-height: 70vh;
+    overflow-y: auto;
+    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: 1;
+    font-size: 13px;
+  `
+
+  const ColAttrs = { numCols: Number, hasActiveView: Boolean }
+  const ColumnWrapper = styled('div', ColAttrs)`
+    display: grid;
+    max-height: 50vh;
+    overflow-y: auto;
+    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 ResetContainer = styled.div`
+    display: grid;
+    align-content: center;
+    margin-left: auto;
+    div {
+      margin-top: 0;
+      align-self: center;
+    }
+  `
+
+  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%;
+    overflow-wrap: anywhere;
+    padding: 7px 10px;
+    background: ${(props) => props.theme.colors.grey5};
+  `
+
+  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 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.primary};
+    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,
+    },
+    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,
+      }
+    },
+    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
+      },
+    },
+    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
+      },
+      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'
+      },
+    },
+  }
+</script>