@eturnity/eturnity_reusable_components 6.43.9-EPDM-6751.1 → 6.43.9-EPDM-6751.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eturnity/eturnity_reusable_components",
|
|
3
|
-
"version": "6.43.9-EPDM-6751.
|
|
3
|
+
"version": "6.43.9-EPDM-6751.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vue-cli-service serve",
|
|
@@ -63,4 +63,4 @@
|
|
|
63
63
|
"author": "Aaron Enser",
|
|
64
64
|
"license": "ISC",
|
|
65
65
|
"homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
|
|
66
|
-
}
|
|
66
|
+
}
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
? $gettext('min') + ' (' + filter.unit + ')'
|
|
126
126
|
: $gettext('min')
|
|
127
127
|
"
|
|
128
|
-
:numberPrecision="2"
|
|
128
|
+
:numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
|
129
129
|
:value="filter.range.start"
|
|
130
130
|
@input-change="
|
|
131
131
|
onChange({
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
? $gettext('max') + ' (' + filter.unit + ')'
|
|
146
146
|
: $gettext('max')
|
|
147
147
|
"
|
|
148
|
-
:numberPrecision="2"
|
|
148
|
+
:numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
|
149
149
|
:value="filter.range.end"
|
|
150
150
|
@input-change="
|
|
151
151
|
onChange({
|
|
@@ -615,6 +615,9 @@ export default {
|
|
|
615
615
|
isRangeSelector(type) {
|
|
616
616
|
return type === 'integer_range' || type === 'number_range'
|
|
617
617
|
},
|
|
618
|
+
isIntegerRange(type) {
|
|
619
|
+
return type === 'integer_range'
|
|
620
|
+
},
|
|
618
621
|
isDateSelector(type) {
|
|
619
622
|
return type === 'datetime'
|
|
620
623
|
}
|
|
@@ -1,137 +1,129 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
import styled from
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
-ms-flex-pack: end;
|
|
77
|
-
justify-content: flex-end;
|
|
78
|
-
-webkit-box-align: center;
|
|
79
|
-
-ms-flex-align: center;
|
|
80
|
-
align-items: center;
|
|
81
|
-
margin-bottom: 2px;
|
|
82
|
-
margin-top: 10px;
|
|
2
|
+
<!-- Check, if pages more than 1 -->
|
|
3
|
+
<paginationWrapper v-if="paginationParams.pages > 1">
|
|
4
|
+
<!-- Back button -->
|
|
5
|
+
<paginationLink
|
|
6
|
+
v-if="paginationParams.previous"
|
|
7
|
+
@click="fetchPage(paginationParams.previous)"
|
|
8
|
+
>
|
|
9
|
+
<arrowIconContainer>
|
|
10
|
+
<icon name="arrow_left" color="#0068de" size="12px" />
|
|
11
|
+
</arrowIconContainer>
|
|
12
|
+
<arrowText>{{ $gettext('back') }}</arrowText>
|
|
13
|
+
</paginationLink>
|
|
14
|
+
|
|
15
|
+
<!-- First page -->
|
|
16
|
+
<paginationLink
|
|
17
|
+
v-if="currentPage > 2 && paginationParams.pages > 3"
|
|
18
|
+
@click="fetchPage(1)"
|
|
19
|
+
>1</paginationLink
|
|
20
|
+
>
|
|
21
|
+
|
|
22
|
+
<!-- Back tree dots -->
|
|
23
|
+
<span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
|
|
24
|
+
|
|
25
|
+
<!-- Current block -->
|
|
26
|
+
<paginationLink
|
|
27
|
+
v-for="number in paginationNumbers()"
|
|
28
|
+
:key="number"
|
|
29
|
+
:class="[currentPage === number ? 'active' : '']"
|
|
30
|
+
@click="fetchPage(number)"
|
|
31
|
+
>{{ number }}</paginationLink
|
|
32
|
+
>
|
|
33
|
+
|
|
34
|
+
<!-- Forward tree dots -->
|
|
35
|
+
<span
|
|
36
|
+
v-if="
|
|
37
|
+
paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
|
|
38
|
+
"
|
|
39
|
+
>...</span
|
|
40
|
+
>
|
|
41
|
+
|
|
42
|
+
<!-- End page -->
|
|
43
|
+
<paginationLink
|
|
44
|
+
v-if="
|
|
45
|
+
paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
|
|
46
|
+
"
|
|
47
|
+
@click="fetchPage(paginationParams.pages)"
|
|
48
|
+
>{{ paginationParams.pages }}</paginationLink
|
|
49
|
+
>
|
|
50
|
+
|
|
51
|
+
<!-- Forward button -->
|
|
52
|
+
<paginationLink
|
|
53
|
+
v-if="paginationParams.next"
|
|
54
|
+
@click="fetchPage(paginationParams.next)"
|
|
55
|
+
>
|
|
56
|
+
<arrowText>{{ $gettext('forward') }}</arrowText>
|
|
57
|
+
<arrowIconContainer>
|
|
58
|
+
<icon name="arrow_right" color="#0068de" size="12px" />
|
|
59
|
+
</arrowIconContainer>
|
|
60
|
+
</paginationLink>
|
|
61
|
+
</paginationWrapper>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script>
|
|
65
|
+
import styled from 'vue-styled-components'
|
|
66
|
+
import icon from '../icon'
|
|
67
|
+
const paginationWrapper = styled.nav`
|
|
68
|
+
color: #0068de;
|
|
69
|
+
font-size: 13px;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
justify-content: flex-end;
|
|
73
|
+
align-items: center;
|
|
74
|
+
margin-bottom: 2px;
|
|
75
|
+
margin-top: 10px;
|
|
83
76
|
`
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
77
|
+
const paginationLink = styled.div`
|
|
78
|
+
display: flex;
|
|
79
|
+
padding: 0px 5px;
|
|
80
|
+
margin: 0 2px;
|
|
81
|
+
text-align: center;
|
|
82
|
+
border-radius: 3px;
|
|
83
|
+
white-space: nowrap;
|
|
84
|
+
cursor: pointer;
|
|
92
85
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
86
|
+
&.active {
|
|
87
|
+
color: #fff;
|
|
88
|
+
background-color: #5c67ac;
|
|
89
|
+
padding: 7px 12px;
|
|
90
|
+
border-radius: 4px;
|
|
91
|
+
}
|
|
92
|
+
`
|
|
93
|
+
const arrowText = styled.div``
|
|
94
|
+
const arrowIconContainer = styled.div`
|
|
95
|
+
margin: 0 10px;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
`
|
|
99
|
+
export default {
|
|
100
|
+
name: 'pagination-component',
|
|
101
|
+
components: {
|
|
102
|
+
paginationWrapper,
|
|
103
|
+
paginationLink,
|
|
104
|
+
icon,
|
|
105
|
+
arrowText,
|
|
106
|
+
arrowIconContainer
|
|
107
|
+
},
|
|
108
|
+
props: ['fetchPage', 'currentPage', 'paginationParams'],
|
|
109
|
+
methods: {
|
|
110
|
+
getNewProjects(num) {
|
|
111
|
+
this.$emit('on-pagination-change', num)
|
|
114
112
|
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
return prev
|
|
128
|
-
? next
|
|
129
|
-
? [n - 1, n, n + 1]
|
|
130
|
-
: [n - 2, n - 1, n]
|
|
131
|
-
: [n, n + 1, n + 2]
|
|
132
|
-
}
|
|
113
|
+
paginationNumbers() {
|
|
114
|
+
const prev = this.paginationParams.previous
|
|
115
|
+
const next = this.paginationParams.next
|
|
116
|
+
const n = prev + 1 || next - 1
|
|
117
|
+
if (this.paginationParams.pages === 2) {
|
|
118
|
+
return prev ? [n - 1, n] : [n, n + 1]
|
|
119
|
+
} else {
|
|
120
|
+
return prev
|
|
121
|
+
? next
|
|
122
|
+
? [n - 1, n, n + 1]
|
|
123
|
+
: [n - 2, n - 1, n]
|
|
124
|
+
: [n, n + 1, n + 2]
|
|
133
125
|
}
|
|
134
126
|
}
|
|
135
127
|
}
|
|
136
|
-
|
|
137
|
-
|
|
128
|
+
}
|
|
129
|
+
</script>
|