Skip to Content
0 Votes

Changes for page Todolist Macro

Last modified by Ryan C on 2025/04/30 07:54
From version 9.1
edited by Ryan C
on 2025/04/24 10:29
Change comment: There is no comment for this version
To version 24.1
edited by Ryan C
on 2025/04/24 11:16
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,7 +1,9 @@
1 1  Macro to display todo-lists using emberjs. This code is based on the emberjs demo. You can see an example below
2 2  
3 3  {{todolist width="50%" center="1"}}
4 -a thing|1
5 -a second thing|0
4 +a 3nd thing|0
5 +adding this thing|0
6 +adding this thing|0
7 +refreshed they are still there not even having to save page|0
6 6  
7 7  {{/todolist}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,257 +1,295 @@
1 1  requirejs.config({
2 - //By default load any module IDs from js/lib
3 - baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
4 - //except, if the module ID starts with "app",
5 - //load it from the js/app directory. paths
6 - //config is relative to the baseUrl, and
7 - //never includes a ".js" extension since
8 - //the paths config could be for a directory.
9 - paths: {
2 + baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
3 + paths: {
4 + 'jquery': 'https://code.jquery.com/jquery-3.6.0.min' // Updated jQuery version
5 + },
6 + shim: {
7 + 'ember-data': {
8 + deps: ['ember', 'jquery']
10 10   },
11 - shim: {
12 - 'ember-data': {
13 - deps: ['ember', 'jquery']
14 - },
15 - 'ember': {
16 - deps: ['jquery']
17 - }
10 + 'ember': {
11 + deps: ['jquery']
18 18   }
13 + }
19 19  });
20 -require(['jquery', 'handlebars-v1.2.1', 'ember-data', 'ember' ], function ($) {
21 21  
22 -// create app
23 -window.Todos = Ember.Application.create({
24 - rootElement: '#todoappdiv'
25 -});
16 +require(['jquery', 'handlebars-v1.2.1', 'ember-data', 'ember'], function($) {
17 + // Create app
18 + window.Todos = Ember.Application.create({
19 + rootElement: '#todoappdiv'
20 + });
26 26  
27 -// define the todolist store that will write to the TodoListsService
28 -Todos.ApplicationAdapter = DS.Adapter.extend({
29 - createRecord: function(store, type, record) {
30 - console.log("createRecord");
31 - var query = { create: "1", content : JSON.stringify(record) };
32 - return new Ember.RSVP.Promise(function(resolve, reject) {
33 - jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
34 - Ember.run(null, resolve, data);
35 - }, function(jqXHR) {
36 - jqXHR.then = null; // tame jQuery's ill mannered promises
37 - Ember.run(null, reject, jqXHR);
22 + // Define the todolist store that will write to the TodoListsService
23 + Todos.ApplicationAdapter = DS.Adapter.extend({
24 + createRecord: function(store, type, record) {
25 + console.log("createRecord");
26 + var data = this.serialize(record, { includeId: true });
27 + var query = { create: "1", content: JSON.stringify(data) };
28 +
29 + return new Ember.RSVP.Promise(function(resolve, reject) {
30 + jQuery.getJSON(
31 + "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
32 + XWiki.currentSpace + "." + XWiki.currentPage +
33 + "&xpage=plain&outputSyntax=plain",
34 + query
35 + ).then(function(data) {
36 + Ember.run(function() {
37 + resolve(data);
38 + });
39 + }, function(jqXHR) {
40 + Ember.run(function() {
41 + reject(jqXHR);
42 + });
43 + });
38 38   });
39 - });
40 - },
41 - deleteRecord: function(store, type, record) {
42 - console.log("deleteRecord");
43 - return this.saveAll(store.recordArrayManager.recordArraysForRecord(record).list[0].content);
44 - },
45 - find: function(store, type, id) {
46 - console.log("find");
47 - return;
48 - },
49 - findAll: function(store, type, sinceToken) {
50 - console.log("findAll");
51 - var query = { since: sinceToken };
52 - return new Ember.RSVP.Promise(function(resolve, reject) {
53 - jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
54 - Ember.run(null, resolve, data);
55 - }, function(jqXHR) {
56 - jqXHR.then = null; // tame jQuery's ill mannered promises
57 - Ember.run(null, reject, jqXHR);
45 + },
46 +
47 + deleteRecord: function(store, type, record) {
48 + console.log("deleteRecord");
49 + var recordArrays = store.recordArrayManager.recordArraysForRecord(record);
50 + if (recordArrays && recordArrays.list && recordArrays.list[0]) {
51 + return this.saveAll(recordArrays.list[0].content);
52 + }
53 + return Ember.RSVP.resolve();
54 + },
55 +
56 + find: function(store, type, id) {
57 + console.log("find");
58 + return Ember.RSVP.resolve();
59 + },
60 +
61 + findAll: function(store, type, sinceToken) {
62 + console.log("findAll");
63 + var query = { since: sinceToken };
64 +
65 + return new Ember.RSVP.Promise(function(resolve, reject) {
66 + jQuery.getJSON(
67 + "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
68 + XWiki.currentSpace + "." + XWiki.currentPage +
69 + "&xpage=plain&outputSyntax=plain",
70 + query
71 + ).then(function(data) {
72 + Ember.run(function() {
73 + resolve(data);
74 + });
75 + }, function(jqXHR) {
76 + Ember.run(function() {
77 + reject(jqXHR);
78 + });
79 + });
58 58   });
81 + },
82 +
83 + updateRecord: function(store, type, record) {
84 + var recordArrays = store.recordArrayManager.recordArraysForRecord(record);
85 + if (recordArrays && recordArrays.list && recordArrays.list[0]) {
86 + return this.saveAll(recordArrays.list[0].content);
87 + }
88 + return Ember.RSVP.resolve();
89 + },
90 + saveAll: function(alldata) {
91 + console.log("saveAll");
92 + var query = { save: "1", content: JSON.stringify(alldata) };
93 +return new Ember.RSVP.Promise(function(resolve, reject) {
94 + jQuery.getJSON(
95 + "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
96 + (
97 + typeof XWiki !== 'undefined' &&
98 + XWiki.currentSpace &&
99 + XWiki.currentPage
100 + ? XWiki.currentSpace + "." + XWiki.currentPage
101 + : document.location.pathname.split('/').pop()
102 + ) +
103 + "&xpage=plain&outputSyntax=plain",
104 + query
105 + ).then(function(data) {
106 + Ember.run(function() {
107 + resolve(data);
59 59   });
60 - },
61 - updateRecord: function(store, type, record) {
62 - return this.saveAll(store.recordArrayManager.recordArraysForRecord(record).list[0].content);
63 - },
64 - saveAll: function(alldata) {
65 - console.log("updateRecord");
66 - var query = { save: "1", content : JSON.stringify(alldata) };
67 - return new Ember.RSVP.Promise(function(resolve, reject) {
68 - jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
69 - Ember.run(null, resolve, data);
70 - }, function(jqXHR) {
71 - jqXHR.then = null; // tame jQuery's ill mannered promises
72 - Ember.run(null, reject, jqXHR);
73 - });
109 + }, function(jqXHR) {
110 + Ember.run(function() {
111 + reject(jqXHR);
74 74   });
75 - }
113 + });
76 76  });
77 77  
78 -// use my own store
79 -Todos.store = DS.Store.create({
80 - adapter: 'ApplicationAdapter'
81 -});
82 82  
83 -// Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
117 + // Register the adapter
118 + Todos.ApplicationAdapter.reopen({
119 + namespace: 'api'
120 + });
84 84  
85 -// routing
86 -Todos.Router.map(function() {
87 - this.resource('todos', { path: '' }, function() {
88 - this.route('active');
89 - this.route('completed');
122 + // Routing
123 + Todos.Router.map(function() {
124 + this.resource('todos', { path: '' }, function() {
125 + this.route('active');
126 + this.route('completed');
127 + });
90 90   });
91 -});
92 92  
93 -Todos.TodosRoute = Ember.Route.extend({
94 - model: function() {
95 - return this.store.find('todo');
96 - }
97 -});
130 + Todos.TodosRoute = Ember.Route.extend({
131 + model: function() {
132 + return this.store.find('todo');
133 + }
134 + });
98 98  
99 -Todos.TodosIndexRoute = Ember.Route.extend({
100 - model: function() {
101 - return this.modelFor('todos');
102 - }
103 -});
136 + Todos.TodosIndexRoute = Ember.Route.extend({
137 + model: function() {
138 + return this.modelFor('todos');
139 + }
140 + });
104 104  
105 -// ... additional lines truncated for brevity ...
106 -Todos.TodosActiveRoute = Ember.Route.extend({
107 - model: function(){
108 - return this.store.filter('todo', function(todo) {
109 - return !todo.get('isCompleted');
110 - });
111 - },
112 - renderTemplate: function(controller) {
113 - this.render('todos/index', {controller: controller});
114 - }
115 -});
142 + Todos.TodosActiveRoute = Ember.Route.extend({
143 + model: function() {
144 + return this.store.filter('todo', function(todo) {
145 + return !todo.get('isCompleted');
146 + });
147 + },
148 + renderTemplate: function(controller) {
149 + this.render('todos/index', { controller: controller });
150 + }
151 + });
116 116  
117 -Todos.TodosCompletedRoute = Ember.Route.extend({
118 - model: function(){
119 - return this.store.filter('todo', function (todo) {
120 - return todo.get('isCompleted');
121 - });
122 - },
123 - renderTemplate: function(controller){
124 - this.render('todos/index', {controller: controller});
125 - }
126 -});
153 + Todos.TodosCompletedRoute = Ember.Route.extend({
154 + model: function() {
155 + return this.store.filter('todo', function(todo) {
156 + return todo.get('isCompleted');
157 + });
158 + },
159 + renderTemplate: function(controller) {
160 + this.render('todos/index', { controller: controller });
161 + }
162 + });
127 127  
128 -// data model
129 -Todos.Todo = DS.Model.extend({
130 - title: DS.attr('string'),
131 - priority: DS.attr('string'),
132 - assignee: DS.attr('string'),
133 - isCompleted: DS.attr('boolean')
134 -});
164 + // Data model
165 + Todos.Todo = DS.Model.extend({
166 + title: DS.attr('string'),
167 + priority: DS.attr('string'),
168 + assignee: DS.attr('string'),
169 + isCompleted: DS.attr('boolean')
170 + });
135 135  
136 -// ... additional lines truncated for brevity ...
137 -Todos.Todo.FIXTURES = [
138 - {
139 - id: 1,
140 - title: 'Learn Ember.js X',
141 - isCompleted: true
142 - },
143 - {
144 - id: 2,
145 - title: '...',
146 - isCompleted: false
147 - },
148 - {
149 - id: 3,
150 - title: 'Profit!',
151 - isCompleted: false
152 - }
153 -];
172 + // Controller
173 + Todos.TodoController = Ember.ObjectController.extend({
174 + actions: {
175 + editTodo: function() {
176 + this.set('isEditing', true);
177 + },
178 + acceptChanges: function() {
179 + this.set('isEditing', false);
154 154  
155 -// controler
156 -Todos.TodoController = Ember.ObjectController.extend({
157 - actions: {
158 - editTodo: function () {
159 - this.set('isEditing', true);
181 + if (Ember.isEmpty(this.get('model.title'))) {
182 + this.send('removeTodo');
183 + } else {
184 + this.get('model').save();
185 + }
186 + },
187 + removeTodo: function() {
188 + var todo = this.get('model');
189 + todo.deleteRecord();
190 + todo.save();
191 + }
160 160   },
161 - acceptChanges: function() {
162 - this.set('isEditing', false);
163 163  
164 - if (Ember.isEmpty(this.get('model.title'))) {
165 - this.send('removeTodo');
166 - } else {
167 - this.get('model').save();
168 - }
169 - },
170 - removeTodo: function() {
171 - var todo = this.get('model');
172 - todo.deleteRecord();
173 - todo.save();
174 - }
175 - },
194 + isEditing: false,
176 176  
177 - isEditing: false,
196 + isCompleted: function(key, value) {
197 + var model = this.get('model');
178 178  
179 - isCompleted: function(key, value){
180 - var model = this.get('model');
199 + if (value === undefined) {
200 + // Property being used as a getter
201 + return model.get('isCompleted');
202 + } else {
203 + // Property being used as setter
204 + model.set('isCompleted', value);
205 + model.save();
206 + return value;
207 + }
208 + }.property('model.isCompleted')
209 + });
181 181  
182 - if (value === undefined) {
183 - // property being used as a getter
184 - return model.get('isCompleted');
185 - } else {
186 - // property being used as setter
187 - model.set('isCompleted', value);
188 - model.save();
189 - return value;
190 - }
191 - }.property('model.isCompleted')
192 -});
211 + Todos.TodosController = Ember.ArrayController.extend({
212 + actions: {
213 + createTodo: function() {
214 + // Get the todo title set by the "New Todo" text field
215 + var title = this.get('newTitle');
216 + if (!title || !title.trim()) { return; }
193 193  
194 -Todos.TodosController = Ember.ArrayController.extend({
195 - actions: {
196 - createTodo: function () {
197 - // Get the todo title set by the "New Todo" text field
198 - var title = this.get('newTitle');
199 - if (!title.trim()) { return; }
218 + // Create the new Todo model
219 + var todo = this.store.createRecord('todo', {
220 + title: title,
221 + priority: "P3",
222 + assignee: "all",
223 + isCompleted: false
224 + });
200 200  
201 - // Create the new Todo model
202 - var todo = this.store.createRecord('todo', {
203 - title: title,
204 - priority: "P3",
205 - assignee: "all",
206 - isCompleted: false
207 - });
226 + // Clear the "New Todo" text field
227 + this.set('newTitle', '');
208 208  
209 - // Clear the "New Todo" text field
210 - this.set('newTitle', '');
211 -
212 - // Save the new model
213 - todo.save();
229 + // Save the new model
230 + todo.save().then(function() {
231 + // Force a refresh of the list after saving
232 + Ember.run.later(function() {
233 + Todos.store.find('todo');
234 + }, 100);
235 + });
236 + },
237 +
238 + clearCompleted: function() {
239 + var completed = this.filter(function(todo) {
240 + return todo.get('isCompleted');
241 + });
242 +
243 + completed.forEach(function(todo) {
244 + todo.deleteRecord();
245 + todo.save();
246 + });
247 + }
214 214   },
215 - clearCompleted: function () {
216 - var completed = this.filterProperty('isCompleted', true);
217 - completed.invoke('deleteRecord');
218 - completed.invoke('save');
219 - }
220 - },
221 221  
222 - remaining: function () {
223 - return this.filterProperty('isCompleted', false).get('length');
224 - }.property('@each.isCompleted'),
250 + remaining: function() {
251 + return this.filter(function(todo) {
252 + return !todo.get('isCompleted');
253 + }).get('length');
254 + }.property('@each.isCompleted'),
225 225  
226 - inflection: function () {
227 - var remaining = this.get('remaining');
228 - return remaining === 1 ? 'item' : 'items';
229 - }.property('remaining'),
230 - hasCompleted: function () {
231 - return this.get('completed') > 0;
232 - }.property('completed'),
256 + inflection: function() {
257 + var remaining = this.get('remaining');
258 + return remaining === 1 ? 'item' : 'items';
259 + }.property('remaining'),
260 +
261 + hasCompleted: function() {
262 + return this.get('completed') > 0;
263 + }.property('completed'),
233 233  
234 - completed: function () {
235 - return this.filterProperty('isCompleted', true).get('length');
236 - }.property('@each.isCompleted'),
265 + completed: function() {
266 + return this.filter(function(todo) {
267 + return todo.get('isCompleted');
268 + }).get('length');
269 + }.property('@each.isCompleted'),
237 237  
238 - allAreDone: function(key, value) {
239 - if (value === undefined) {
240 - return !!this.get('length') && this.everyProperty('isCompleted', true);
241 - } else {
242 - this.setEach('isCompleted', value);
243 - this.invoke('save');
244 - return value;
245 - }
246 -}.property('@each.isCompleted')
247 -});
271 + allAreDone: function(key, value) {
272 + if (value === undefined) {
273 + return this.get('length') > 0 && this.every(function(todo) {
274 + return todo.get('isCompleted');
275 + });
276 + } else {
277 + this.forEach(function(todo) {
278 + todo.set('isCompleted', value);
279 + todo.save();
280 + });
281 + return value;
282 + }
283 + }.property('@each.isCompleted')
284 + });
248 248  
249 -// editing
250 -Todos.EditTodoView = Ember.TextField.extend({
251 - didInsertElement: function() {
252 - this.$().focus();
253 - }
254 -});
286 + // Editing
287 + Todos.EditTodoView = Ember.TextField.extend({
288 + didInsertElement: function() {
289 + this.$().focus();
290 + }
291 + });
255 255  
256 -Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
293 + Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
257 257  });
295 +
XWiki.WikiMacroClass[0]
Cached
... ... @@ -1,0 +1,1 @@
1 +No
Context elements
... ... @@ -1,0 +1,1 @@
1 +User
Asynchronous rendering
... ... @@ -1,0 +1,1 @@
1 +No