1
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
/*
*
* IssuableResource is a pubsub-style service that polls the server for updates to
* an Issuable model and propagates changes to subscribers throughout the page. It is designed
* to update Vue-ized and non-Vue-ized components.
*
* Subscribe by passing in the Issuable property you want to be notified of updates to, and pass
* a callback or render method you will use to render your component's updated state.
*
* Currently this service only handles fetching new data. Eventually it would make sense to
* route more, if not all, Issuable ajax traffic through this class, to prevent conflicts and/or
* unneccessary requests.
*
* JQuery usage:
*
class IssuableAssigneeComponent {
constructor() {
this.$elem = $('#assignee');
gl.IssuableResource.subscribe('assignee_id', (newState) => {
this.renderState(newState);
});
}
renderState(issuable) {
this.$elem.val(issuable.assignee_id);
}
}
Vue usage:
const app = new Vue({
data: {
assignee_id: ''
},
ready: function() {
gl.IssuableResource.subscribe('assignee_id', (newState) => {
this.assignee_id = newState.assignee_id;
});
}
});
* */
//= require vue
//= require vue-resource
((global) => {
let singleton;
class IssuableResource {
constructor(path, issuable) {
if (!singleton) {
singleton = global.IssuableResource = this;
singleton.init(path, issuable);
}
return singleton;
}
init(path, issuable) {
this.state = JSON.parse(issuable);
this.resource = Vue.resource(path);
this.subscribers = {};
this.initPolling();
}
initPolling() {
setInterval(() => {
this.getIssuable();
}, 1000);
}
getIssuable() {
return this.resource.get()
.then((res) => this.updateState(res.data))
.then((newState) => this.publish(newState));
}
putIssuable() {
}
deleteIssuable() {
}
addSubscriber(prop, callback) {
const isNewProp = !this.subscribers.hasOwnProperty(prop);
if (isNewProp) {
this.subscribers[prop] = [];
}
this.subscribers[prop].push(callback);
}
publish(diff) {
// prevent subscribers mutating state
const stateCopy = _.extend({}, this.state);
for (var key in diff) {
const hasSubscribers = this.subscribers.hasOwnProperty(key);
if (hasSubscribers) {
this.subscribers[key].forEach((fn) => {
fn(stateCopy);
});
}
}
}
subscribe(propToWatch, callback) {
this.addSubscriber(propToWatch, callback);
}
updateState(res) {
const diff = {};
if (res.updated_at !== this.state.updated_at) {
for (var key in res) {
const val = res[key];
if (this.state[key] !== val) {
diff[key] = val;
}
}
this.state = _.extend(this.state, diff);
}
return diff;
}
}
global.IssuableResource = IssuableResource;
})(window.gl || (window.gl = {}));
|
