@eturnity/eturnity_reusable_components 1.2.85-EPDM-3013.1 → 1.2.85-EPDM-3013.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.85-EPDM-3013.1",
+  "version": "1.2.85-EPDM-3013.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/subdirectory.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 13H12v5l6-6-6-6v5H4V2H2v11z"/></svg>

package/src/assets/svgIcons/upload_image_tool.svg

@@ -0,0 +1,7 @@
+<svg fill="none" height="20" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 13H27V14.5556H13V13Z" fill="#B2B9C5"></path>
+<path d="M13 21.5556H27V23.1111H13V21.5556Z" fill="#B2B9C5"></path>
+<path d="M13 13H14.5556V22.3333H13V13Z" fill="#B2B9C5"></path>
+<path d="M25.4444 13L27 13V22.3333H25.4444V13Z" fill="#B2B9C5"></path>
+<path d="M23.8889 19.6111H16.1111L18.0556 16.1111L20.7778 18.0556L21.5556 17.2778L23.8889 19.6111Z" fill="#B2B9C5"></path>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -1,7 +1,41 @@
 <template>
   <container-wrapper>
-    <column-wrapper :numCols="filterData.length">
-      <column-container v-for="(item, idx) in filterData" :key="idx">
+    <view-container
+      v-if="filterViews && filterViews.length"
+      :maxWidth="activeView.length"
+    >
+      <select-component
+        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>
+    <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>
@@ -16,8 +50,8 @@
               v-model="item.dataOptions"
             >
               <checkbox-wrapper
-                v-for="column in item.dataOptions"
-                :key="column.choice"
+                v-for="(column, index) in item.dataOptions"
+                :key="index + 'dataOption'"
               >
                 <drag-container class="drag-container">
                   <icon :name="'duplicate-1'" size="12px" />
@@ -39,8 +73,11 @@
             </draggable>
           </checkbox-container>
         </row-container>
-        <row-container v-if="item.type === 'filter'">
-          <row-wrapper v-for="filter in item.dataOptions" :key="filter.field">
+        <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%"
@@ -58,8 +95,8 @@
               <template #dropdown>
                 <dropdown-checkbox-container @click.stop>
                   <checkbox
-                    v-for="filterOption in filter.choices"
-                    :key="filterOption.choice"
+                    v-for="(filterOption, optionIdx) in filter.choices"
+                    :key="optionIdx + 'optionIdx'"
                     :label="filterOption.text"
                     :isChecked="filterOption.selected"
                     @on-event-handler="
@@ -75,103 +112,97 @@
                 </dropdown-checkbox-container>
               </template>
             </select-component>
-            <select-component
-              v-else-if="isRangeSelector(filter.filter_type)"
-              selectWidth="100%"
-              selectHeight="36px"
-              fontSize="13px"
-              :label="filter.label"
-              alignItems="vertical"
+            <section-container v-else-if="isRangeSelector(filter.filter_type)">
+              <row-label>{{ filter.label }}</row-label>
+              <grid-container>
+                <input-number
+                  :placeholder="
+                    filter.unit
+                      ? $gettext('min_amount') + ' (' + filter.unit + ')'
+                      : $gettext('min_amount')
+                  "
+                  :numberPrecision="0"
+                  :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_amount') + ' (' + filter.unit + ')'
+                      : $gettext('max_amount')
+                  "
+                  :numberPrecision="0"
+                  :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
             >
-              <template #selector>
-                <option-title>
-                  {{ filter.selectedText }}
-                </option-title>
-              </template>
-              <template #dropdown>
-                <dropdown-checkbox-container @click.stop>
-                  <input-number
-                    :placeholder="settingsTranslations.start"
-                    :numberPrecision="0"
-                    :value="filter.range.start"
-                    @input-change="
-                      onChange({
-                        dataType: item.type,
-                        value: $event,
-                        choice: 'start',
-                        field: filter.field
-                      })
-                    "
-                    fontSize="13px"
-                    :labelText="settingsTranslations.start"
-                  />
-                  <input-number
-                    :placeholder="settingsTranslations.end"
-                    :numberPrecision="0"
-                    :value="filter.range.end"
-                    @input-change="
-                      onChange({
-                        dataType: item.type,
-                        value: $event,
-                        choice: 'end',
-                        field: filter.field
-                      })
-                    "
-                    fontSize="13px"
-                    :labelText="settingsTranslations.end"
-                  />
-                </dropdown-checkbox-container>
-              </template>
-            </select-component>
-            <calendar-container v-else-if="isDateSelector(filter.filter_type)">
-              <row-label
-                v-if="settingsTranslations && settingsTranslations.start"
-                >{{ settingsTranslations.start }}</row-label
-              >
-              <date-picker-input
-                :placeholder="'-'"
-                :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"
-              />
-              <row-label
-                :marginTop="true"
-                v-if="settingsTranslations && settingsTranslations.end"
-                >{{ settingsTranslations.end }}</row-label
-              >
-              <date-picker-input
-                :placeholder="'-'"
-                :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"
-              />
-            </calendar-container>
+              <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%"
@@ -194,8 +225,8 @@
               </template>
               <template #dropdown>
                 <Option
-                  v-for="filterOption in filter.choices"
-                  :key="filterOption.choice"
+                  v-for="(filterOption, filterIdx) in filter.choices"
+                  :key="filterIdx + '_filterIdx'"
                   :value="filterOption.choice"
                   >{{ filterOption.text }}</Option
                 >
@@ -207,15 +238,15 @@
     </column-wrapper>
     <button-container>
       <main-button
-        v-if="buttonText.save_view && hasActiveView"
+        v-if="buttonText.apply_view && hasActiveView"
         type="primary"
-        :text="buttonText.save_view"
-        @click.native="$emit('on-save-current-view')"
+        :text="buttonText.apply_view"
+        @click.native="$emit('on-apply-current-view')"
       />
       <main-button
         type="secondary"
-        v-if="buttonText.save_new_view"
-        :text="buttonText.save_new_view"
+        v-if="buttonText.save_view"
+        :text="buttonText.save_view"
         @click.native="$emit('on-save-new-view')"
       />
       <main-button
@@ -238,6 +269,7 @@ 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 'vue2-datepicker/index.css'
 import 'vue2-datepicker/locale/de'
@@ -258,10 +290,16 @@ const ContainerWrapper = styled.div`
   font-size: 13px;
 `
 
-const ColAttrs = { numCols: Number }
+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 }
@@ -269,8 +307,7 @@ const ColumnTitle = styled('div', TitleAttrs)`
   font-size: 14px;
   font-weight: 700;
   color: ${(props) => props.theme.colors.eturnityGrey};
-  padding: 14px;
-  border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+  padding: 10px 14px;
   ${({ showBorder, theme }) =>
     showBorder &&
     `
@@ -294,9 +331,15 @@ const DragContainer = styled.div`
   }
 `
 
-const RowContainer = styled.div`
-  padding: 15px;
-  width: 260px;
+const RowContainer = styled('div', TitleAttrs)`
+  padding: 10px 14px;
+  width: 300px;
+
+  ${({ showBorder, theme }) =>
+    showBorder &&
+    `
+    border-right: 1px solid ${theme.colors.grey4};
+  `}
 
   .ghost {
     opacity: 0.5;
@@ -316,7 +359,7 @@ const CheckboxContainer = styled.div`
 const CheckboxWrapper = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 6px;
+  gap: 16px;
   padding: 2px;
   align-items: center;
 `
@@ -335,7 +378,7 @@ const RowWrapper = styled.div`
 const DatePickerInput = styled(DatePicker)`
   border: 1px solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
-  padding: 7px 12px 7px 15px;
+  padding: 7px 12px 7px 7px;
   width: 100%;
   position: relative;
 
@@ -355,7 +398,6 @@ const DatePickerInput = styled(DatePicker)`
       padding: 0;
       font-size: 13px;
       box-shadow: none;
-      /* font-family: ${(props) => props.theme.fonts.mainFont}; */
       color: #393939;
       vertical-align: bottom;
     }
@@ -383,6 +425,22 @@ const RowLabel = styled('div', LabelAttrs)`
   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)`
+  padding: 10px 14px;
+
+  max-width: ${(props) =>
+    props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
+`
+
 export default {
   name: 'filter-settings',
   components: {
@@ -406,7 +464,11 @@ export default {
     DragContainer,
     InputNumber,
     DatePickerInput,
-    RowLabel
+    RowLabel,
+    SectionContainer,
+    GridContainer,
+    ViewContainer,
+    DeleteIcon
   },
   props: {
     filterData: {
@@ -424,11 +486,17 @@ export default {
       //   'save_view': '$gettext("save_view")'
       // }
     },
+    filterViews: {
+      required: true
+    },
     activeLanguage: {
       required: false
     },
     settingsTranslations: {
       required: false
+    },
+    activeView: {
+      required: false
     }
   },
   data() {

package/src/components/filter/index.vue

@@ -3,31 +3,23 @@
     <parent-dropdown
       @on-toggle="onToggleDropdown()"
       :isOpen="isDropdownOpen"
-      :dropdownText="activeView ? activeView : 'Default view'"
-      :type="filterType"
-    />
-    <filter-views
-      v-if="
-        filterType === 'views' &&
-        isDropdownOpen &&
-        filterData &&
-        filterData.length
-      "
-      :filterData="filterData"
-      @on-select="onViewSelect($event)"
-      @on-delete="onViewDelete($event)"
+      :dropdownText="dropdownText ? dropdownText : 'Default view'"
     />
     <filter-settings
-      v-if="filterType === 'settings' && isDropdownOpen"
+      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-save-current-view="onSaveCurrentView()"
+      @on-apply-current-view="onApplyCurrentView()"
       @on-prevent-close="onPreventClose($event)"
       :hasActiveView="hasActiveView"
+      :activeView="activeView"
       :activeLanguage="activeLanguage"
       :settingsTranslations="settingsTranslations"
     />
@@ -37,7 +29,6 @@
 <script>
 import styled from 'vue-styled-components'
 import parentDropdown from './parentDropdown'
-import filterViews from './filterViews'
 import filterSettings from './filterSettings'
 
 const PageWrapper = styled.div`
@@ -49,17 +40,18 @@ export default {
   components: {
     parentDropdown,
     PageWrapper,
-    filterViews,
     filterSettings
   },
   props: {
-    filterType: {
-      required: false,
-      default: 'settings' // 'settings', 'views'
-    },
     filterData: {
       required: true
     },
+    dropdownText: {
+      required: false
+    },
+    filterViews: {
+      required: true
+    },
     activeView: {
       required: false,
       default: null
@@ -103,7 +95,11 @@ export default {
       }, 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()
@@ -114,12 +110,11 @@ export default {
       this.$emit('on-filter-view-select', item)
     },
     onViewDelete(item) {
-      this.onToggleDropdown()
       this.$emit('on-filter-view-delete', item)
     },
-    onSaveCurrentView() {
+    onApplyCurrentView() {
       this.onToggleDropdown()
-      this.$emit('on-save-current-view')
+      this.$emit('on-apply-current-view')
     }
   },
   mounted() {

package/src/components/filter/parentDropdown.vue

@@ -1,10 +1,7 @@
 <template>
   <page-wrapper @click="$emit('on-toggle')">
     <icon-wrapper>
-      <icon
-        :name="type === 'settings' ? 'settings' : 'show_in_a_new_tab'"
-        size="18px"
-      />
+      <icon name="settings" size="18px" />
     </icon-wrapper>
     <title-wrapper :isOpen="isOpen">
       <title-text>
@@ -81,10 +78,6 @@ export default {
     ArrowWrapper
   },
   props: {
-    type: {
-      required: false,
-      default: 'settings' // 'settings', 'views'
-    },
     isOpen: {
       required: true,
       default: false

package/src/components/icon/index.vue

@@ -27,7 +27,9 @@ import styled from 'vue-styled-components'
 
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
+  display: flex;
+  align-content: center;
+  justify-content: center;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
   min-width: ${(props) => props.size};

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

@@ -7,7 +7,7 @@
       <label-wrapper v-if="label">
         <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
           label
-        }}</input-label>
+        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -81,7 +81,9 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
-
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
 const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -217,7 +219,8 @@ export default {
     Icon,
     IconWrapper,
     IconContainer,
-    InputErrorWrapper
+    InputErrorWrapper,
+    optionalLabel
   },
   data() {
     return {
@@ -266,6 +269,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     noBorder: {
       required: false,
       default: false

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

@@ -14,8 +14,11 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }}</input-label
-        >
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -45,6 +48,7 @@
             v-if="isSearchBarVisible"
             ref="searchInput"
             tabindex="0"
+            inputHeight="34px"
             :noBorder="true"
             :fontSize="fontSize"
             backgroundColor="transparent"
@@ -140,7 +144,6 @@ const Caret = styled.div`
   min-width: 30px;
   height: 100%;
   align-items: stretch
-  padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -158,6 +161,9 @@ const InputLabel = styled('div', labelAttrs)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
@@ -192,8 +198,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) =>
-    props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px 0 15px'};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -230,7 +235,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    padding:10px;
     border:1px solid ${(props) => props.theme.colors.grey4}
     border-radius:4px;
     display: flex;
@@ -284,6 +288,10 @@ export default {
     label: {
       required: false
     },
+    labelOptional: {
+      required: false,
+      default: false
+    },
     infoTextMessage: {
       required: false
     },
@@ -361,6 +369,7 @@ export default {
     Container,
     InputLabel,
     LabelWrapper,
+    optionalLabel,
     InfoText,
     InputWrapper,
     DropdownWrapper,

package/src/components/pagination/index.vue

@@ -0,0 +1,137 @@
+<template>
+    <!-- Check, if pages more than 1 -->
+    <paginationWrapper v-if="paginationParams.pages > 1">
+        <!-- Back button -->
+        <paginationLink
+          v-if="paginationParams.previous"
+          @click="fetchPage(paginationParams.previous)"
+        >
+        <arrowIconContainer>
+            <icon name="arrow_left" color="#1a237e" size="12px"/>
+        </arrowIconContainer>
+          <arrowText>{{ $gettext('back') }}</arrowText>
+        </paginationLink>
+  
+        <!-- First page -->
+        <paginationLink
+          v-if="currentPage > 2 && paginationParams.pages > 3"
+          @click="fetchPage(1)"
+          >1</paginationLink
+        >
+  
+        <!-- Back tree dots -->
+        <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
+  
+        <!-- Current block -->
+        <paginationLink
+          v-for="number in paginationNumbers()"
+          :key="number"
+          :class="[currentPage === number ? 'active' : '']"
+          @click="fetchPage(number)"
+          >{{ number }}</paginationLink
+        >
+  
+        <!-- Forward tree dots -->
+        <span
+          v-if="
+            paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
+          "
+          >...</span
+        >
+  
+        <!-- End page -->
+        <paginationLink
+          v-if="
+            paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
+          "
+          @click="fetchPage(paginationParams.pages)"
+          >{{ paginationParams.pages }}</paginationLink
+        >
+  
+        <!-- Forward button -->
+        <paginationLink
+          v-if="paginationParams.next"
+          @click="fetchPage(paginationParams.next)"
+        >
+          <arrowText>{{ $gettext('forward') }}</arrowText>
+          <arrowIconContainer>
+            <icon name="arrow_right" color="#1a237e" size="12px" />
+        </arrowIconContainer>
+        </paginationLink>
+    </paginationWrapper>
+  </template>
+  
+  <script>
+import styled from "vue-styled-components"
+  import icon from "../icon"
+  const paginationWrapper=styled.nav`
+    color: #1a237e;
+    font-size: 13px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-bottom: 2px;
+    margin-top: 10px;
+`
+ const paginationLink=styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &.active{
+        color: #fff;
+        background-color: #5c67ac;
+        padding: 7px 12px;
+        border-radius: 4px;
+    }
+    `
+    const arrowText=styled.div``
+    const arrowIconContainer=styled.div`
+    margin:0 10px;
+    display:flex;
+    align-items: center;
+    `
+  export default {
+    name: 'pagination-component',
+    components:{
+        paginationWrapper,
+        paginationLink,
+        icon,
+        arrowText,
+        arrowIconContainer
+    },
+    props: ["fetchPage","currentPage","paginationParams"],
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        const prev = this.paginationParams.previous
+        const next = this.paginationParams.next
+        const n = prev + 1 || next - 1
+        if (this.paginationParams.pages === 2) {
+          return prev ? [n - 1, n] : [n, n + 1]
+        } else {
+          return prev
+            ? next
+              ? [n - 1, n, n + 1]
+              : [n - 2, n - 1, n]
+            : [n, n + 1, n + 2]
+        }
+      }
+    }
+  }
+  </script>
+  

package/src/components/filter/filterViews.vue

@@ -1,63 +0,0 @@
-<template>
-  <container-wrapper>
-    <list-item
-      v-for="(item, idx) in filterData"
-      :key="idx"
-      @click="$emit('on-select', item)"
-    >
-      <list-text>{{ item.name }}</list-text>
-      <delete-icon @click.native.stop="$emit('on-delete', item)" />
-    </list-item>
-  </container-wrapper>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import DeleteIcon from '../deleteIcon'
-
-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 ListItem = styled.div`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  padding: 8px 14px;
-  gap: 6px;
-  font-size: 13px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
-`
-
-const ListText = styled.div``
-
-export default {
-  name: 'filter-views',
-  components: {
-    ContainerWrapper,
-    ListItem,
-    ListText,
-    DeleteIcon
-  },
-  props: {
-    filterData: {
-      required: false,
-      default: () => {
-        '[]'
-      }
-    }
-  }
-}
-</script>