Skip to Content
0 Votes

Changes for page Todolist Macro

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