@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.3 → 6.37.0-EPDM-8148.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0-EPDM-8148.3",
+  "version": "6.37.0-EPDM-8148.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -11,11 +11,14 @@
   },
   "dependencies": {
     "@vueform/slider": "1.0.5",
-    "core-js": "^3.31.1",
     "html-loader": "0.5.5",
+    "postcss": "^8.4.25",
     "v-click-outside": "2.1.4",
     "vue": "2.6.11",
-    "vue-styled-components": "1.6.0"
+    "vue-styled-components": "1.6.0",
+    "vue2-datepicker": "3.11.1",
+    "vuedraggable": "2.24.3",
+    "core-js": "3.31.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "6.2.8",

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    // Add your PostCSS plugins here
+    // Example: require('autoprefixer')
+  }
+}

package/src/App.vue

@@ -1,107 +1,109 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <br />
 
-     {{ alignItems }}
-          <input-number
-            :value="value"
-            :minNumber="0"
-            unitName="mm"
-            :numberPrecision="0"
-            backgroundColor="transparent"
-            borderColor="eturnityGrey"
-            inputHeight="34px"
-            inputWidth="420px"
-            textAlign="left"
-            :isInteractive="true"
-            :interactionStep="1"
-            @on-input="value = $event"
-            @input-change="changeHandler"
-            @input-focus="focusHandler"
-            @input-blur="blurHandler"
-          >
-            <template v-slot:label>
-              <div>Interactive Label</div>
-            </template>
-          </input-number>
-         
-          <dropdown-component openingMode="hover" gap="30px">
-            <template #trigger><i>Click Me</i></template>
-            <template #dropdown>
-              <div>
-              <a href="">test1</a>
-              <button href="">test2</button><br>
-              <p>Text</p>
-              </div>
-            </template>
-          </dropdown-component>
-        
-          <videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
-            playIconColor="red"
-            playIconSize="20px"
-            width="400px"
-            height="600px"
-            />
+      <br/>
+      <input-number
+          :value="value"
+          :minNumber="0"
+          unitName="mm"
+          :numberPrecision="0"
+          backgroundColor="transparent"
+          borderColor="eturnityGrey"
+          inputHeight="34px"
+          inputWidth="420px"
+          textAlign="left"
+          :isInteractive="true"
+          :interactionStep="1"
+          @on-input="value = $event"
+          @input-change="changeHandler"
+          @input-focus="focusHandler"
+          @input-blur="blurHandler"
+      >
+        <template v-slot:label>
+          <div>Interactive Label</div>
+        </template>
+      </input-number>
+
+      <dropdown-component openingMode="hover" gap="30px">
+        <template #trigger><i>Click Me</i></template>
+        <template #dropdown>
+          <div>
+            <a href="">test1</a>
+            <button href="">test2</button>
+            <br>
+            <p>Text</p>
+          </div>
+        </template>
+      </dropdown-component>
+
+      <videoThumbnail
+          src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
+          playIconColor="red"
+          playIconSize="20px"
+          width="400px"
+          height="600px"
+      />
 
-          <SwitchField
-            @on-switch-change="onInputChange($event)"
-            :options="[
+      <SwitchField
+          @on-switch-change="onInputChange($event)"
+          :options="[
               { value: 0, content: 'zero' },
               { value: 1, content: 'one' },
               { value: 2, content: 'two' }
             ]"
-            :value="value"
-            label="label"
-            toggleColor="red"
-            size="large"
-            backgroundColor="blue"
-            labelAlign="left"
-            fontColor="black"
-            :disabled="false"
-          />
-          <icon
-            name="opacity"
-            color="red"
-            hoveredColor="blue"
-            size="60px"
-            cursor="default"
-            isStriked = "true"
-          />
-          <Select
-            :value="value"
-            selectWidth="100%"
-            optionWidth="50%"
-            label="that is a label"
-            alignItems="vertical"
-            colorMode="dark"
-            isSearchable="true"
-            @input-change="value = $event"
-            @search-change="searchValue = $event"
+          :value="value"
+          label="label"
+          toggleColor="red"
+          size="large"
+          backgroundColor="blue"
+          labelAlign="left"
+          fontColor="black"
+          :disabled="false"
+      />
+      <icon
+          name="opacity"
+          color="red"
+          hoveredColor="blue"
+          size="60px"
+          cursor="default"
+          isStriked="true"
+      />
+      <Select
+          :value="value"
+          selectWidth="100%"
+          optionWidth="50%"
+          label="that is a label"
+          alignItems="vertical"
+          colorMode="dark"
+          isSearchable="true"
+          @input-change="value = $event"
+          @search-change="searchValue = $event"
+      >
+        <template #selector="{ selectedValue }">
+          value selected: {{ selectedValue }}
+        </template>
+        <template #dropdown>
+          <Option
+              v-for="opt in filteredOptionList"
+              :key="opt.id"
+              :value="opt.val"
+          >{{ opt.lookFor }}
+          </Option
           >
-            <template #selector="{ selectedValue }">
-              value selected: {{ selectedValue }}
-            </template>
-            <template #dropdown>
-              <Option
-                v-for="opt in filteredOptionList"
-                :key="opt.id"
-                :value="opt.val"
-                >{{ opt.lookFor }}</Option
-              >
-            </template>
-          </Select>
-         
-          
-          {{ filteredOptionList }}
-        
-      <iconCollection color="red" />
+        </template>
+      </Select>
+
+
+      {{ filteredOptionList }}
+
+      <iconCollection color="red"/>
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
+import {ThemeProvider} from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
@@ -144,14 +146,14 @@ export default {
       value2: 42,
       companyName: 'toto',
       optionList: [
-        { id: 'a', val: 'A', lookFor: 'babababa' },
-        { id: 'b', val: 'B', lookFor: 'abab' },
-        { id: 'c', val: 'C', lookFor: 'ccc' },
-        { id: 'd', val: 'D', lookFor: 'ddd' },
-        { id: 'e', val: 'E', lookFor: 'dddee' },
-        { id: 'f', val: 'F', lookFor: 'ddfff' },
-        { id: 'g', val: 'G', lookFor: 'dggg' },
-        { id: 'h', val: 'H', lookFor: 'dddhhh' },
+        {id: 'a', val: 'A', lookFor: 'babababa'},
+        {id: 'b', val: 'B', lookFor: 'abab'},
+        {id: 'c', val: 'C', lookFor: 'ccc'},
+        {id: 'd', val: 'D', lookFor: 'ddd'},
+        {id: 'e', val: 'E', lookFor: 'dddee'},
+        {id: 'f', val: 'F', lookFor: 'ddfff'},
+        {id: 'g', val: 'G', lookFor: 'dggg'},
+        {id: 'h', val: 'H', lookFor: 'dddhhh'},
       ],
       searchValue: ''
     }
@@ -159,7 +161,7 @@ export default {
   computed: {
     filteredOptionList() {
       return this.optionList.filter((opt) =>
-        opt.lookFor.includes(this.searchValue)
+          opt.lookFor.includes(this.searchValue)
       )
     }
   },
@@ -222,7 +224,7 @@ export default {
       ]
       return items
     },
-    getComponentInfo({ row, value }) {
+    getComponentInfo({row, value}) {
       let item
       if (row.selectedValue && row.selectedValue[value]) {
         item = row.selectedValue[value]

package/src/assets/svgIcons/update.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4545 4.45454L8.90909 7H10.8182C10.8182 9.10636 9.10636 10.8182 7 10.8182C6.35727 10.8182 5.74636 10.6591 5.21818 10.3727L4.28909 11.3018C5.07182 11.7982 6.00091 12.0909 7 12.0909C9.81273 12.0909 12.0909 9.81272 12.0909 7H14L11.4545 4.45454ZM3.18182 7C3.18182 4.89363 4.89364 3.18182 7 3.18182C7.64273 3.18182 8.25364 3.34091 8.78182 3.62727L9.71091 2.69818C8.92818 2.20182 7.99909 1.90909 7 1.90909C4.18727 1.90909 1.90909 4.18727 1.90909 7H0L2.54545 9.54545L5.09091 7H3.18182Z" fill="#263238"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -0,0 +1,645 @@
+<template>
+  <container-wrapper>
+    <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">
+          {{ 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"
+              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>{{ filter.label }}</row-label>
+              <grid-container>
+                <input-number
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('min') + ' (' + filter.unit + ')'
+                      : $gettext('min')
+                  "
+                  :numberPrecision="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="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>{{ 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;
+  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'
+    },
+    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>

package/src/components/filter/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <page-wrapper ref="dropdown">
+    <parent-dropdown
+      @on-toggle="onToggleDropdown()"
+      :isOpen="isDropdownOpen"
+      :dropdownText="dropdownText ? dropdownText : 'Default view'"
+    />
+    <filter-settings
+      v-if="isDropdownOpen"
+      :filterData="filterData"
+      :filterViews="filterViews"
+      :buttonText="buttonText"
+      @on-view-select="onViewSelect($event)"
+      @on-view-delete="onViewDelete($event)"
+      @on-save-new-view="$emit('on-save-new-view')"
+      @on-filter-change="onFilterChange($event)"
+      @on-cancel-view="onCancelSettings()"
+      @on-drag-change="$emit('on-drag-change', $event)"
+      @on-apply-current-view="onApplyCurrentView()"
+      @on-prevent-close="onPreventClose($event)"
+      @on-reset-filters="onResetFilters()"
+      :hasActiveView="hasActiveView"
+      :activeView="activeView"
+      :activeLanguage="activeLanguage"
+      :settingsTranslations="settingsTranslations"
+    />
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import parentDropdown from './parentDropdown'
+import filterSettings from './filterSettings'
+
+const PageWrapper = styled.div`
+  position: relative;
+`
+
+export default {
+  name: 'filter-component',
+  components: {
+    parentDropdown,
+    PageWrapper,
+    filterSettings
+  },
+  props: {
+    filterData: {
+      required: true
+    },
+    dropdownText: {
+      required: false
+    },
+    filterViews: {
+      required: true
+    },
+    activeView: {
+      required: false,
+      default: null
+    },
+    buttonText: {
+      required: false
+    },
+    hasActiveView: {
+      required: false
+    },
+    activeLanguage: {
+      required: false,
+      default: 'en-us'
+    },
+    settingsTranslations: {
+      required: false
+    }
+  },
+  data() {
+    return {
+      isDropdownOpen: false,
+      activeFilter: null,
+      preventOutsideClick: false
+    }
+  },
+  methods: {
+    onToggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen
+    },
+    clickOutside(event) {
+      if (
+        !this.$refs.dropdown.$el.contains(event.target) &&
+        !this.preventOutsideClick
+      ) {
+        this.isDropdownOpen = false
+      }
+    },
+    onPreventClose(value) {
+      setTimeout(() => {
+        this.preventOutsideClick = value
+      }, 100)
+    },
+    onFilterChange(data) {
+      // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
+      // because clicking the calendar does not trigger the @focus
+      this.preventOutsideClick = true
+      this.$emit('on-filter-settings-change', data)
+      this.onPreventClose(false)
+    },
+    onCancelSettings() {
+      this.onToggleDropdown()
+      this.$emit('on-cancel-view')
+    },
+    onViewSelect(item) {
+      this.onToggleDropdown()
+      this.$emit('on-filter-view-select', item)
+    },
+    onViewDelete(item) {
+      this.$emit('on-filter-view-delete', item)
+    },
+    onApplyCurrentView() {
+      this.onToggleDropdown()
+      this.$emit('on-apply-current-view')
+    },
+    onResetFilters() {
+      this.onToggleDropdown()
+      this.$emit('on-reset-filters')
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
+  }
+}
+</script>

package/src/components/filter/parentDropdown.vue

@@ -0,0 +1,91 @@
+<template>
+  <page-wrapper @click="$emit('on-toggle')">
+    <icon-wrapper>
+      <icon name="settings" size="18px" />
+    </icon-wrapper>
+    <title-wrapper :isOpen="isOpen">
+      <title-text>
+        {{ dropdownText }}
+      </title-text>
+      <arrow-wrapper>
+        <icon
+          @click.native.stop="$emit('on-toggle')"
+          :name="isOpen ? 'arrow_up' : 'arrow_down'"
+          size="12px"
+        />
+      </arrow-wrapper>
+    </title-wrapper>
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageWrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  cursor: pointer;
+`
+
+const IconWrapper = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px 0px 0px 4px;
+  padding: 6px;
+`
+
+const TitleAttrs = { isOpen: Boolean }
+const TitleWrapper = styled('div', TitleAttrs)`
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-items: center;
+  grid-gap: 10px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  background-color: ${(props) =>
+    props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
+  border-left: none;
+  border-radius: 0px 4px 4px 0px;
+  padding: 6px 14px;
+  user-select: none;
+`
+
+const TitleText = styled.div`
+  font-size: 13px;
+`
+
+const ArrowWrapper = styled.div`
+  display: grid;
+  align-items: center;
+
+  div {
+    height: auto !important;
+    min-height: unset;
+  }
+`
+
+export default {
+  name: 'parent-dropdown',
+  components: {
+    PageWrapper,
+    Icon,
+    IconWrapper,
+    TitleWrapper,
+    TitleText,
+    ArrowWrapper
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
+    },
+    dropdownText: {
+      required: true,
+      default: 'View'
+    }
+  }
+}
+</script>

package/src/components/iconWrapper/index.vue

@@ -112,10 +112,6 @@ export default {
     backgroundColor: {
       required: false
     },
-    hasBorder: {
-      required: false,
-      default: false
-    },
     hoveredBackgroundColor: {
       required: false,
       default: 'transparentWhite1'
@@ -134,15 +130,11 @@ export default {
     },
     borderRadius: {
       required: false,
-      default: '4px'
+      default: '6px'
     },
     isHovered: {
       required: false,
       default: false
-    },
-    isStriked: {
-      required: false,
-      default: false
     }
   },
   data() {

package/src/components/inputs/inputNumber/index.vue

@@ -433,6 +433,10 @@ export default {
     labelFontColor: {
       required: false,
       default: 'eturnityGrey'
+    },
+    focus: {
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -660,7 +664,17 @@ export default {
       })
     }
   },
+  mounted() {
+    if (this.focus) {
+      this.focusInput()
+    }
+  },
   watch: {
+    focus(value) {
+      if (value) {
+        this.focusInput()
+      }
+    },
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue

package/src/components/inputs/searchInput/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <container>
+  <container :inputWidth="inputWidth">
     <input-wrapper>
       <input-container
         ref="inputElement"
@@ -9,6 +9,7 @@
         :disabled="disabled"
         :isDisabled="disabled"
         :inputWidth="inputWidth"
+        :isFilter="isFilter"
         :hasFocus="hasFocus"
       />
       <img
@@ -28,18 +29,24 @@
 //   :disabled="true"
 //   inputWidth="250px"
 //   @on-change="function($event)"
+//   :isFilter="true" // to set the height at 30px
 // />
 import styled from 'vue-styled-components'
 
-const Container = styled.div`
-  width: 100%;
+const inputAttrs = {
+  isDisabled: Boolean,
+  inputWidth: String,
+  isFilter: Boolean
+}
+const Container = styled('div', inputAttrs)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
 `
 
-const inputAttrs = { isDisabled: Boolean, inputWidth: String }
 const InputContainer = styled('input', inputAttrs)`
-  border: 1px solid ${(props) => props.theme.colors.mediumGray};
-  padding: 11px 30px 11px 10px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  padding: ${(props) =>
+    props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
   border-radius: 4px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.black};
@@ -90,6 +97,10 @@ export default {
       required: false,
       default: null
     },
+    isFilter: {
+      required: false,
+      default: false
+    },
     hasFocus: {
       required: false,
       default: false
@@ -99,10 +110,10 @@ export default {
     onChangeHandler(event) {
       this.$emit('on-change', event)
     },
-    focusInputElement(){
+    focusInputElement() {
       this.$nextTick(() => {
-        this.$refs.inputElement.$el.focus();
-      });
+        this.$refs.inputElement.$el.focus()
+      })
     }
   },
   watch: {
@@ -112,6 +123,5 @@ export default {
       }
     }
   }
-  
 }
 </script>

package/src/components/inputs/select/index.vue

@@ -32,6 +32,7 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
+          :height="height"
           :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
@@ -145,7 +146,6 @@ const Caret = styled.div`
   min-width: 30px;
   height: 100%;
   align-items: stretch
-  padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -193,6 +193,7 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
@@ -204,7 +205,14 @@ const selectButton = styled('div', selectButtonAttrs)`
   padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
-  min-height: ${(props) => props.selectMinHeight};
+  min-height: ${(props) =>
+    props.selectHeight
+      ? props.selectHeight
+      : props.selectMinHeight
+      ? props.selectMinHeight
+      : props.height
+      ? props.height
+      : '36px'};
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
@@ -254,8 +262,9 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
-    max-height:300px;
-    overflow-y:auto;
+    max-height: 300px;
+    min-height: 39px;
+    overflow-y: auto;
     & [data-value="${(props) => props.selectedValue}"]{
         backdrop-filter: brightness(1.4);
     }
@@ -309,6 +318,10 @@ export default {
       required: false,
       default: null
     },
+    height: {
+      required: false,
+      default: null
+    },
     selectMinHeight: {
       required: false,
       default: '36px'

package/src/helpers/translateLang.js

@@ -70,6 +70,8 @@ export const datePickerLang = (lang) => {
     return 'fr'
   } else if (lang === 'it-it' || lang === 'it-ch') {
     return 'it'
+  } else if (lang === 'en-us' || lang === 'en-gb') {
+    return 'en'
   } else {
     return lang
   }