@eturnity/eturnity_reusable_components 1.2.84 → 1.2.85-EPDM-3013.2

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

@@ -1,59 +1,68 @@
 <template>
-    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
-        <slot></slot>
-    </optionContainer>
-  </template>
+  <optionContainer
+    :data-value="value"
+    :hoveredBgColor="
+      hoveredBgColor || colorMode == 'dark' ? '#000000' : 'grey5'
+    "
+    @click="clickHandler"
+    @mouseover="hoverHandler"
+  >
+    <slot></slot>
+  </optionContainer>
+</template>
 
-  <script>
+<script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-  import styled from 'vue-styled-components'
-  const optionProps={hoveredBgColor:String}
-  const optionContainer = styled('div',optionProps)`
-    display:flex;
-    cursor: pointer;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 10px;
-    gap: 14px;
-    width:100%;
-    box-sizing:inherit;
-    &:hover{
-      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
-    }
-  `
+import styled from 'vue-styled-components'
+const optionProps = { hoveredBgColor: String }
+const optionContainer = styled('div', optionProps)`
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 10px;
+  gap: 14px;
+  width: 100%;
+  box-sizing: inherit;
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors[props.hoveredBgColor]
+        ? props.theme.colors[props.hoveredBgColor]
+        : props.hoveredBgColor};
+  }
+`
 
-  export default {
-    name: 'RCoption',
+export default {
+  name: 'RCoption',
 
-    props: {
-      value: {
-        required: true
-      },
-      hoveredBgColor:{
-        required:false,
-      },
-      colorMode:{
-        required:false,
-        default:'light'
-      }
+  props: {
+    value: {
+      required: true
+    },
+    hoveredBgColor: {
+      required: false
     },
+    colorMode: {
+      required: false,
+      default: 'light'
+    }
+  },
 
-    components: {optionContainer},
+  components: { optionContainer },
 
-    data() {
-      return {}
-    },
-    methods:{
-        clickHandler(){
-            this.$parent.$emit('option-selected',this.value)
-        },
-        hoverHandler(){
-            this.$parent.$emit('option-hovered',this.value)
-        }
+  data() {
+    return {}
+  },
+  methods: {
+    clickHandler() {
+      this.$parent.$emit('option-selected', this.value)
     },
-    computed: {
+    hoverHandler() {
+      this.$parent.$emit('option-hovered', this.value)
     }
-  }
-  </script>
+  },
+  computed: {}
+}
+</script>

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/tables/mainTable/index.vue

@@ -332,6 +332,7 @@ const TableContainer = styled('table', containerAttrs)`
     font-size: 13px;
     padding: 5px 10px;
     background: #fff;
+    height: unset;
 
     &:focus {
       background: ${(props) => props.theme.colors.grey5};

package/src/helpers/translateLang.js

@@ -66,6 +66,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
   }