Skip to content

Commit 69e0c8b

Browse files
jonasjabarijonasjabari
committed
added collection specs and fixed collection implementation
1 parent 55ce360 commit 69e0c8b

File tree

7 files changed

+1242
-238
lines changed

7 files changed

+1242
-238
lines changed

‎app/concepts/matestack/ui/core/collection/content/content.js

Lines changed: 29 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from 'vue/dist/vue.esm'
22

33
import matestackEventHub from 'js/event-hub'
4+
import queryParamsHelper from 'js/helpers/query-params-helper'
45

56
import componentMixin from 'component/component'
67
import asyncMixin from 'async/async'
@@ -11,14 +12,15 @@ const componentDef = {
1112
return {
1213
currentLimit: null,
1314
currentOffset: null,
14-
currentFilteredCount: null
15+
currentFilteredCount: null,
16+
currentBaseCount: null
1517
}
1618
},
1719
methods: {
1820
next: function(){
19-
if (this.currentTo() < this.currentFilteredCount){
21+
if (this.currentTo() < this.currentCount()){
2022
this.currentOffset += this.currentLimit
21-
var url = this.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
23+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
2224
window.history.pushState({matestackApp: true, url: url}, null, url);
2325
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
2426
}
@@ -30,72 +32,36 @@ const componentDef = {
3032
} else {
3133
this.currentOffset -= this.currentLimit
3234
}
33-
var url = this.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
35+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
3436
window.history.pushState({matestackApp: true, url: url}, null, url);
3537
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
3638
}
3739
},
3840
currentTo: function(){
3941
var to = parseInt(this.currentOffset) + parseInt(this.currentLimit)
40-
if (to > parseInt(this.currentFilteredCount)){
41-
return this.currentFilteredCount;
42+
if (to > parseInt(this.currentCount())){
43+
return this.currentCount();
4244
} else {
4345
return to;
4446
}
4547
},
48+
currentCount: function(){
49+
if (this.currentFilteredCount != null || this.currentFilteredCount != undefined){
50+
return this.currentFilteredCount;
51+
} else {
52+
return this.currentBaseCount;
53+
}
54+
},
4655
goToPage: function(page){
4756
this.currentOffset = parseInt(this.currentLimit) * (parseInt(page)-1)
48-
var url = this.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
57+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
4958
window.history.pushState({matestackApp: true, url: url}, null, url);
5059
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
51-
},
52-
updateQueryParams: function (key, value, url) {
53-
if (!url) url = window.location.href;
54-
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
55-
hash;
56-
57-
if (re.test(url)) {
58-
if (typeof value !== 'undefined' && value !== null)
59-
return url.replace(re, '$1' + key + "=" + value + '$2$3');
60-
else {
61-
hash = url.split('#');
62-
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
63-
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
64-
url += '#' + hash[1];
65-
return url;
66-
}
67-
}
68-
else {
69-
if (typeof value !== 'undefined' && value !== null) {
70-
var separator = url.indexOf('?') !== -1 ? '&' : '?';
71-
hash = url.split('#');
72-
url = hash[0] + separator + key + '=' + value;
73-
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
74-
url += '#' + hash[1];
75-
return url;
76-
}
77-
else
78-
return url;
79-
}
80-
},
81-
getQueryParam: function (name, url) {
82-
if (!url) url = window.location.href;
83-
name = name.replace(/[\[\]]/g, '\\$&');
84-
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
85-
results = regex.exec(url);
86-
if (!results) return null;
87-
if (!results[2]) return '';
88-
return decodeURIComponent(results[2].replace(/\+/g, ' '));
89-
}
90-
},
91-
beforeCreate: function() {
92-
if(this.$options.propsData.componentConfig["rerender_on"] == undefined){
93-
this.$options.propsData.componentConfig["rerender_on"] = this.$options.propsData.componentConfig["id"] + "-update"
9460
}
9561
},
9662
mounted: function(){
97-
if(this.getQueryParam(this.componentConfig["id"] + "-offset") != null){
98-
this.currentOffset = parseInt(this.getQueryParam(this.componentConfig["id"] + "-offset"))
63+
if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset") != null){
64+
this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset"))
9965
} else {
10066
if(this.componentConfig["init_offset"] != undefined){
10167
this.currentOffset = this.componentConfig["init_offset"]
@@ -104,8 +70,8 @@ const componentDef = {
10470
}
10571
}
10672

107-
if(this.getQueryParam(this.componentConfig["id"] + "-limit") != null){
108-
this.currentOffset = parseInt(this.getQueryParam(this.componentConfig["id"] + "-limit"))
73+
if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit") != null){
74+
this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit"))
10975
} else {
11076
if(this.componentConfig["init_limit"] != undefined){
11177
this.currentLimit = this.componentConfig["init_limit"]
@@ -116,6 +82,15 @@ const componentDef = {
11682

11783
if(this.componentConfig["filtered_count"] != undefined){
11884
this.currentFilteredCount = this.componentConfig["filtered_count"]
85+
if(this.currentOffset >= this.currentFilteredCount){
86+
this.previous()
87+
}
88+
}
89+
if(this.componentConfig["base_count"] != undefined){
90+
this.currentBaseCount = this.componentConfig["base_count"]
91+
if(this.currentOffset >= this.currentBaseCount){
92+
this.previous()
93+
}
11994
}
12095
}
12196
}

‎app/concepts/matestack/ui/core/collection/filter/filter.js

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from 'vue/dist/vue.esm'
22

33
import matestackEventHub from 'js/event-hub'
4+
import queryParamsHelper from 'js/helpers/query-params-helper'
45

56
import componentMixin from 'component/component'
67

@@ -16,76 +17,26 @@ const componentDef = {
1617
var url;
1718
var filter = this.filter
1819
for (var key in this.filter) {
19-
url = this.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, this.filter[key], url)
20+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, this.filter[key], url)
2021
}
21-
url = this.updateQueryParams(this.componentConfig["id"] + "-offset", 0, url)
22+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", 0, url)
2223
window.history.pushState({matestackApp: true, url: url}, null, url);
2324
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
2425
},
2526
resetFilter: function(){
2627
var url;
2728
for (var key in this.filter) {
28-
url = this.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, null, url)
29+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, null, url)
2930
this.filter[key] = null;
3031
this.$forceUpdate();
3132
}
3233
window.history.pushState({matestackApp: true, url: url}, null, url);
3334
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
34-
},
35-
updateQueryParams: function (key, value, url) {
36-
if (!url) url = window.location.href;
37-
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
38-
hash;
39-
40-
if (re.test(url)) {
41-
if (typeof value !== 'undefined' && value !== null)
42-
return url.replace(re, '$1' + key + "=" + value + '$2$3');
43-
else {
44-
hash = url.split('#');
45-
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
46-
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
47-
url += '#' + hash[1];
48-
return url;
49-
}
50-
}
51-
else {
52-
if (typeof value !== 'undefined' && value !== null) {
53-
var separator = url.indexOf('?') !== -1 ? '&' : '?';
54-
hash = url.split('#');
55-
url = hash[0] + separator + key + '=' + value;
56-
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
57-
url += '#' + hash[1];
58-
return url;
59-
}
60-
else
61-
return url;
62-
}
63-
},
64-
getQueryParam: function (name, url) {
65-
if (!url) url = window.location.href;
66-
name = name.replace(/[\[\]]/g, '\\$&');
67-
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
68-
results = regex.exec(url);
69-
if (!results) return null;
70-
if (!results[2]) return '';
71-
return decodeURIComponent(results[2].replace(/\+/g, ' '));
72-
},
73-
queryParamsToObject: function(){
74-
var search = window.location.search.substring(1);
75-
if(search.length === 0){
76-
return {}
77-
} else {
78-
var result = JSON.parse(
79-
'{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}',
80-
function(key, value) { return key===""?value:decodeURIComponent(value) }
81-
)
82-
return result;
83-
}
8435
}
8536
},
8637
created: function(){
8738
var self = this;
88-
var queryParamsObject = this.queryParamsToObject()
39+
var queryParamsObject = queryParamsHelper.queryParamsToObject()
8940
Object.keys(queryParamsObject).forEach(function(key){
9041
if (key.startsWith(self.componentConfig["id"] + "-filter-")){
9142
self.filter[key.replace(self.componentConfig["id"] + "-filter-", "")] = queryParamsObject[key]

‎app/concepts/matestack/ui/core/collection/helper.rb

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
module Matestack::Ui::Core::Collection
22

3-
CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :filter, :context) do
3+
CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :context) do
44

55
def paginated_data
6-
data
7-
.offset(get_collection_offset)
8-
.limit(get_collection_limit)
6+
resulting_data = data
7+
resulting_data = resulting_data.offset(get_collection_offset) unless get_collection_offset == 0
8+
resulting_data = resulting_data.limit(get_collection_limit) unless get_collection_limit == 0
9+
10+
return resulting_data
911
end
1012

1113
def get_collection_offset
@@ -19,22 +21,35 @@ def get_collection_limit
1921
def pages
2022
offset = get_collection_offset
2123
limit = get_collection_limit
22-
count = filtered_count
24+
if filtered_count.present?
25+
count = filtered_count
26+
else
27+
count = base_count
28+
end
2329
page_count = count/limit
2430
page_count += 1 if count%limit > 0
2531
return (1..page_count).to_a
2632
end
2733

2834
def from
29-
get_collection_offset + 1
35+
return get_collection_offset + 1 if to > 0
36+
return 0 if to == 0
3037
end
3138

3239
def to
3340
current_to = get_collection_offset + get_collection_limit
34-
if current_to > filtered_count
35-
return filtered_count
41+
if filtered_count.present?
42+
if current_to > filtered_count
43+
return filtered_count
44+
else
45+
return current_to
46+
end
3647
else
37-
return current_to
48+
if current_to > base_count
49+
return base_count
50+
else
51+
return current_to
52+
end
3853
end
3954
end
4055

@@ -77,7 +92,7 @@ def get_collection_order collection_id, key=nil
7792
end
7893
end
7994

80-
def set_collection id: nil, init_offset: 0, init_limit: 10, base_count: nil, filtered_count: nil, data: nil
95+
def set_collection id: nil, init_offset: 0, init_limit: nil, base_count: nil, filtered_count: nil, data: nil
8196
@collections = {} if @collections.nil?
8297

8398
collection_config = CollectionConfig.new(
@@ -87,7 +102,6 @@ def set_collection id: nil, init_offset: 0, init_limit: 10, base_count: nil, fil
87102
filtered_count,
88103
base_count,
89104
data,
90-
get_collection_filter(id),
91105
context
92106
)
93107

‎app/concepts/matestack/ui/core/js/helpers/query-params-helper.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const updateQueryParams = (key, value, url) => {
2+
if (!url) url = window.location.href;
3+
let re = new RegExp(`([?&])${key}=.*?(&|#|$)(.*)`, "gi"), hash;
4+
5+
if (re.test(url)) {
6+
if (typeof value !== 'undefined' && value !== null)
7+
return url.replace(re, `$1${key}=${value}$2$3`);
8+
else {
9+
hash = url.split('#');
10+
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
11+
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
12+
url += `#${hash[1]}`;
13+
return url;
14+
}
15+
}
16+
else {
17+
if (typeof value !== 'undefined' && value !== null) {
18+
const separator = url.indexOf('?') !== -1 ? '&' : '?';
19+
hash = url.split('#');
20+
url = `${hash[0]}${separator}${key}=${value}`;
21+
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
22+
url += `#${hash[1]}`;
23+
return url;
24+
}
25+
else
26+
return url;
27+
}
28+
};
29+
30+
const getQueryParam = (name, url) => {
31+
if (!url) url = window.location.href;
32+
name = name.replace(/[\[\]]/g, '\\$&');
33+
const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`), results = regex.exec(url);
34+
if (!results) return null;
35+
if (!results[2]) return '';
36+
return decodeURIComponent(results[2].replace(/\+/g, ' '));
37+
};
38+
39+
const queryParamsToObject = () => {
40+
const search = window.location.search.substring(1);
41+
if(search.length === 0){
42+
return {}
43+
} else {
44+
const result = JSON.parse(
45+
`{"${search.replace(/&/g, '","').replace(/=/g,'":"')}"}`,
46+
(key, value) => { return key===""?value:decodeURIComponent(value) }
47+
);
48+
return result;
49+
}
50+
};
51+
52+
export default {
53+
updateQueryParams: updateQueryParams,
54+
getQueryParam: getQueryParam,
55+
queryParamsToObject: queryParamsToObject
56+
}

0 commit comments

Comments
 (0)