Skip to content

Commit 24ba6fb

Browse files
jonasjabarijonasjabari
authored
Merge pull request #98 from basemate/implementing_issue_59
Implementing issue 59 - Collection Component
2 parents ea297e3 + 2e6dc44 commit 24ba6fb

File tree

35 files changed

+2962
-367
lines changed

35 files changed

+2962
-367
lines changed

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

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import Vue from 'vue/dist/vue.esm'
2+
3+
import matestackEventHub from 'js/event-hub'
4+
import queryParamsHelper from 'js/helpers/query-params-helper'
5+
6+
import componentMixin from 'component/component'
7+
import asyncMixin from 'async/async'
8+
9+
const componentDef = {
10+
mixins: [componentMixin, asyncMixin],
11+
data: function(){
12+
return {
13+
currentLimit: null,
14+
currentOffset: null,
15+
currentFilteredCount: null,
16+
currentBaseCount: null
17+
}
18+
},
19+
methods: {
20+
next: function(){
21+
if (this.currentTo() < this.currentCount()){
22+
this.currentOffset += this.currentLimit
23+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
24+
window.history.pushState({matestackApp: true, url: url}, null, url);
25+
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
26+
}
27+
},
28+
previous: function(){
29+
if ((this.currentOffset - this.currentLimit)*-1 != this.currentLimit){
30+
if((this.currentOffset - this.currentLimit) < 0){
31+
this.currentOffset = 0
32+
} else {
33+
this.currentOffset -= this.currentLimit
34+
}
35+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
36+
window.history.pushState({matestackApp: true, url: url}, null, url);
37+
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
38+
}
39+
},
40+
currentTo: function(){
41+
var to = parseInt(this.currentOffset) + parseInt(this.currentLimit)
42+
if (to > parseInt(this.currentCount())){
43+
return this.currentCount();
44+
} else {
45+
return to;
46+
}
47+
},
48+
currentCount: function(){
49+
if (this.currentFilteredCount != null || this.currentFilteredCount != undefined){
50+
return this.currentFilteredCount;
51+
} else {
52+
return this.currentBaseCount;
53+
}
54+
},
55+
goToPage: function(page){
56+
this.currentOffset = parseInt(this.currentLimit) * (parseInt(page)-1)
57+
var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
58+
window.history.pushState({matestackApp: true, url: url}, null, url);
59+
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
60+
}
61+
},
62+
mounted: function(){
63+
if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset") != null){
64+
this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset"))
65+
} else {
66+
if(this.componentConfig["init_offset"] != undefined){
67+
this.currentOffset = this.componentConfig["init_offset"]
68+
} else {
69+
this.currentOffset = 0
70+
}
71+
}
72+
73+
if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit") != null){
74+
this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit"))
75+
} else {
76+
if(this.componentConfig["init_limit"] != undefined){
77+
this.currentLimit = this.componentConfig["init_limit"]
78+
} else {
79+
this.currentLimit = 10
80+
}
81+
}
82+
83+
if(this.componentConfig["filtered_count"] != undefined){
84+
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+
}
94+
}
95+
}
96+
}
97+
98+
let component = Vue.component('matestack-ui-core-collection-content', componentDef)
99+
100+
export default componentDef

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module Matestack::Ui::Core::Collection::Content
2+
class Content < Matestack::Ui::Core::Component::Dynamic
3+
4+
def setup
5+
@rerender = true
6+
@component_config = @component_config.except(:data, :paginated_data)
7+
end
8+
9+
def response
10+
components {
11+
div do
12+
yield_components
13+
end
14+
}
15+
end
16+
17+
end
18+
end

‎app/concepts/matestack/ui/core/collection/content/next/next.haml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
%a{@tag_attributes, "@click": "next()"}
2+
- if block_given?
3+
= yield

‎app/concepts/matestack/ui/core/collection/content/next/next.rb

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module Matestack::Ui::Core::Collection::Content::Next
2+
class Next < Matestack::Ui::Core::Component::Static
3+
4+
end
5+
end

‎app/concepts/matestack/ui/core/collection/content/page/link/link.haml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
%a{@tag_attributes, "@click": "goToPage(#{@options[:page]})"}
2+
- if block_given?
3+
= yield

‎app/concepts/matestack/ui/core/collection/content/page/link/link.rb

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module Matestack::Ui::Core::Collection::Content::Page::Link
2+
class Link < Matestack::Ui::Core::Component::Static
3+
4+
end
5+
end

‎app/concepts/matestack/ui/core/collection/content/previous/previous.haml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
%a{@tag_attributes, "@click": "previous()"}
2+
- if block_given?
3+
= yield

‎app/concepts/matestack/ui/core/collection/content/previous/previous.rb

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module Matestack::Ui::Core::Collection::Content::Previous
2+
class Previous < Matestack::Ui::Core::Component::Static
3+
4+
end
5+
end

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Vue from 'vue/dist/vue.esm'
2+
3+
import matestackEventHub from 'js/event-hub'
4+
import queryParamsHelper from 'js/helpers/query-params-helper'
5+
6+
import componentMixin from 'component/component'
7+
8+
const componentDef = {
9+
mixins: [componentMixin],
10+
data: function(){
11+
return {
12+
filter: {}
13+
}
14+
},
15+
methods: {
16+
submitFilter: function(){
17+
var url;
18+
var filter = this.filter
19+
for (var key in this.filter) {
20+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, this.filter[key], url)
21+
}
22+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", 0, url)
23+
window.history.pushState({matestackApp: true, url: url}, null, url);
24+
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
25+
},
26+
resetFilter: function(){
27+
var url;
28+
for (var key in this.filter) {
29+
url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, null, url)
30+
this.filter[key] = null;
31+
this.$forceUpdate();
32+
}
33+
window.history.pushState({matestackApp: true, url: url}, null, url);
34+
matestackEventHub.$emit(this.componentConfig["id"] + "-update")
35+
}
36+
},
37+
created: function(){
38+
var self = this;
39+
var queryParamsObject = queryParamsHelper.queryParamsToObject()
40+
Object.keys(queryParamsObject).forEach(function(key){
41+
if (key.startsWith(self.componentConfig["id"] + "-filter-")){
42+
self.filter[key.replace(self.componentConfig["id"] + "-filter-", "")] = queryParamsObject[key]
43+
}
44+
})
45+
}
46+
}
47+
48+
let component = Vue.component('matestack-ui-core-collection-filter', componentDef)
49+
50+
export default componentDef

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module Matestack::Ui::Core::Collection::Filter
2+
class Filter < Matestack::Ui::Core::Component::Dynamic
3+
4+
def setup
5+
@component_config = @component_config.except(:data, :paginated_data)
6+
end
7+
8+
def response
9+
components {
10+
div do
11+
yield_components
12+
end
13+
}
14+
end
15+
16+
end
17+
end

0 commit comments

Comments
 (0)