Skip to Content

Register
Log-in
Search
- The Free Speech / Pro White Wiki
- Page Index
- User Index
- Global
- What's New
- Wiki Index

0.0
1
2
3
4
5

0 Votes

Changes for page Todolist Macro

Last modified by Ryan C on 2025/04/30 07:54

From 10.1 to 9.1 From 29.1 to 28.1

From version

edited by Ryan C
on 2025/04/24 11:28

Change comment: There is no comment for this version

To version

edited by Ryan C
on 2025/04/24 11:00

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- XWiki.JavaScriptExtension[0]

Details

Page properties

Content

@@ -1,9 +1,7 @@
  Macro to display todo-lists using emberjs. This code is based on the emberjs demo. You can see an example below
  {{todolist width="50%" center="1"}}
--a 3nd thing|0
--adding this thing|0
--adding this thing|0
--refreshed they are still there not even having to save page|0
++a thing|1
++a second thing|0
  {{/todolist}}

XWiki.JavaScriptExtension[0]

Code

@@ -1,333 +1,253 @@
  requirejs.config({
    baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
    paths: {
--    'jquery-1.10.2': 'https://code.jquery.com/jquery-1.10.2.min'
++    'jquery': 'https://code.jquery.com/jquery-1.10.2.min'
    },
    shim: {
      'ember-data': {
--      deps: ['ember']
++      deps: ['ember', 'jquery']
      },
      'ember': {
--      deps: ['jquery-1.10.2']
++      deps: ['jquery']
      }
    }
  });
--// Load jQuery 1.10.2 specifically for Ember, using noConflict mode
--require(['jquery-1.10.2'], function(jQuery) {
--  // Store the original jQuery and $ if they exist
--  var originalJQuery = window.jQuery;
--  var original$ = window.$;
--
--  // Create a new jQuery instance in noConflict mode
--  var emberJQuery = jQuery.noConflict(true);
--
--  // Now load Ember with our specific jQuery
--  require(['handlebars-v1.2.1', 'ember-data', 'ember'], function() {
--    // Make emberJQuery available to Ember
--    window.jQuery = emberJQuery;
--    window.$ = emberJQuery;
--
--    // Initialize Ember app
--    initializeEmberApp(emberJQuery);
--
--    // Restore original jQuery and $ when done
--    window.jQuery = originalJQuery;
--    window.$ = original$;
--  });
--
--  function initializeEmberApp(jQuery) {
--    // Create app with specific jQuery instance
--    window.Todos = Ember.Application.create({
--      rootElement: '#todoappdiv',
--      jQuery: jQuery
--    });
++require(['jquery', 'handlebars-v1.2.1', 'ember-data', 'ember' ], function ($) {
--    // Define the todolist store that will write to the TodoListsService
--    Todos.ApplicationAdapter = DS.Adapter.extend({
--      serialize: function(record, options) {
--        var serialized = record.record.toJSON();
--        if (options && options.includeId) {
--          serialized.id = record.id;
--        }
--        return serialized;
--      },
--
--      createRecord: function(store, type, record) {
--        console.log("createRecord");
--        var serialized = this.serialize(record, { includeId: true });
--        var query = { create: "1", content: JSON.stringify(serialized) };
--
--        return new Ember.RSVP.Promise(function(resolve, reject) {
--          var url = "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
--            XWiki.currentSpace + "." + XWiki.currentPage +
--            "&xpage=plain&outputSyntax=plain";
--          console.log("Creating record, URL:", url);
--
--          jQuery.getJSON(url, query).then(function(data) {
--            console.log("Create success:", data);
--            Ember.run(function() {
--              resolve(data);
--            });
--          }, function(jqXHR) {
--            console.error("Create error:", jqXHR);
--            Ember.run(function() {
--              reject(jqXHR);
--            });
--          });
--        });
--      },
--
--      deleteRecord: function(store, type, record) {
--        console.log("deleteRecord");
--        var recordArrays = store.recordArrayManager.recordArraysForRecord(record);
--        if (recordArrays && recordArrays.list && recordArrays.list[0]) {
--          return this.saveAll(recordArrays.list[0].content);
--        }
--        return Ember.RSVP.resolve();
--      },
--
--      find: function(store, type, id) {
--        console.log("find");
--        return Ember.RSVP.resolve();
--      },
--
--      findAll: function(store, type, sinceToken) {
--        console.log("findAll");
--        var query = { since: sinceToken };
--
--        return new Ember.RSVP.Promise(function(resolve, reject) {
--          var url = "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
--            XWiki.currentSpace + "." + XWiki.currentPage +
--            "&xpage=plain&outputSyntax=plain";
--          console.log("Finding all records, URL:", url);
--
--          jQuery.getJSON(url, query).then(function(data) {
--            console.log("FindAll success:", data);
--            Ember.run(function() {
--              resolve(data);
--            });
--          }, function(jqXHR) {
--            console.error("FindAll error:", jqXHR);
--            Ember.run(function() {
--              reject(jqXHR);
--            });
--          });
--        });
--      },
--
--      updateRecord: function(store, type, record) {
--        console.log("updateRecord");
--        var recordArrays = store.recordArrayManager.recordArraysForRecord(record);
--        if (recordArrays && recordArrays.list && recordArrays.list[0]) {
--          return this.saveAll(recordArrays.list[0].content);
--        }
--        return Ember.RSVP.resolve();
--      },
--
--      saveAll: function(alldata) {
--        console.log("saveAll");
--        var query = { save: "1", content: JSON.stringify(alldata) };
--
--        return new Ember.RSVP.Promise(function(resolve, reject) {
--          var currentPage = XWiki.currentSpace + "." + XWiki.currentPage;
--          var url = "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
--            currentPage + "&xpage=plain&outputSyntax=plain";
--          console.log("Saving all records, URL:", url, "Page:", currentPage);
--
--          jQuery.getJSON(url, query).then(function(data) {
--            console.log("SaveAll success:", data);
--            Ember.run(function() {
--              resolve(data);
--            });
--          }, function(jqXHR) {
--            console.error("SaveAll error:", jqXHR);
--            Ember.run(function() {
--              reject(jqXHR);
--            });
--          });
--        });
--      }
--    });
++// create app
++window.Todos = Ember.Application.create({
++  rootElement: '#todoappdiv'
++});
--    // Routing
--    Todos.Router.map(function() {
--      this.resource('todos', { path: '' }, function() {
--        this.route('active');
--        this.route('completed');
++// define the todolist store that will write to the TodoListsService
++Todos.ApplicationAdapter = DS.Adapter.extend({
++  createRecord: function(store, type, record) {
++    console.log("createRecord");
++    var query = { create: "1", content : JSON.stringify(record) };
++    return new Ember.RSVP.Promise(function(resolve, reject) {
++      jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
++        Ember.run(null, resolve, data);
++      }, function(jqXHR) {
++        jqXHR.then = null; // tame jQuery's ill mannered promises
++        Ember.run(null, reject, jqXHR);
        });
      });
--
--    Todos.TodosRoute = Ember.Route.extend({
--      model: function() {
--        return this.store.find('todo');
--      }
++  },
++  deleteRecord: function(store, type, record) {
++    console.log("deleteRecord");
++    return this.saveAll(store.recordArrayManager.recordArraysForRecord(record).list[0].content);
++  },
++  find: function(store, type, id) {
++    console.log("find");
++    return;
++  },
++  findAll: function(store, type, sinceToken) {
++    console.log("findAll");
++    var query = { since: sinceToken };
++    return new Ember.RSVP.Promise(function(resolve, reject) {
++      jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
++        Ember.run(null, resolve, data);
++      }, function(jqXHR) {
++        jqXHR.then = null; // tame jQuery's ill mannered promises
++        Ember.run(null, reject, jqXHR);
++      });
      });
--
--    Todos.TodosIndexRoute = Ember.Route.extend({
--      model: function() {
--        return this.modelFor('todos');
--      }
++  },
++  updateRecord: function(store, type, record) {
++    return this.saveAll(store.recordArrayManager.recordArraysForRecord(record).list[0].content);
++  },
++  saveAll: function(alldata) {
++    console.log("updateRecord");
++    var query = { save: "1", content : JSON.stringify(alldata) };
++    return new Ember.RSVP.Promise(function(resolve, reject) {
++      jQuery.getJSON("${xwiki.getURL("TodoLists.TodoListsService")}?page=" + XWiki.currentSpace + "." + XWiki.currentPage + "&xpage=plain&outputSyntax=plain", query).then(function(data) {
++        Ember.run(null, resolve, data);
++      }, function(jqXHR) {
++        jqXHR.then = null; // tame jQuery's ill mannered promises
++        Ember.run(null, reject, jqXHR);
++      });
      });
++  }
++});
--    Todos.TodosActiveRoute = Ember.Route.extend({
--      model: function() {
--        return this.store.filter('todo', function(todo) {
--          return !todo.get('isCompleted');
--        });
--      },
--      renderTemplate: function(controller) {
--        this.render('todos/index', { controller: controller });
--      }
--    });
++// use my own store
++Todos.store = DS.Store.create({
++  adapter: 'ApplicationAdapter'
++});
--    Todos.TodosCompletedRoute = Ember.Route.extend({
--      model: function() {
--        return this.store.filter('todo', function(todo) {
--          return todo.get('isCompleted');
--        });
--      },
--      renderTemplate: function(controller) {
--        this.render('todos/index', { controller: controller });
--      }
++// Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
++
++// routing
++Todos.Router.map(function() {
++  this.resource('todos', { path: '' }, function() {
++     this.route('active');
++     this.route('completed');
++  });
++});
++
++Todos.TodosRoute = Ember.Route.extend({
++  model: function() {
++    return this.store.find('todo');
++  }
++});
++
++Todos.TodosIndexRoute = Ember.Route.extend({
++  model: function() {
++    return this.modelFor('todos');
++  }
++});
++
++// ... additional lines truncated for brevity ...
++Todos.TodosActiveRoute = Ember.Route.extend({
++  model: function(){
++    return this.store.filter('todo', function(todo) {
++      return !todo.get('isCompleted');
      });
++  },
++  renderTemplate: function(controller) {
++    this.render('todos/index', {controller: controller});
++  }
++});
--    // Data model
--    Todos.Todo = DS.Model.extend({
--      title: DS.attr('string'),
--      priority: DS.attr('string'),
--      assignee: DS.attr('string'),
--      isCompleted: DS.attr('boolean')
++Todos.TodosCompletedRoute = Ember.Route.extend({
++  model: function(){
++    return this.store.filter('todo', function (todo) {
++      return todo.get('isCompleted');
      });
++  },
++  renderTemplate: function(controller){
++    this.render('todos/index', {controller: controller});
++  }
++});
--    // Controller
--    Todos.TodoController = Ember.ObjectController.extend({
--      actions: {
--        editTodo: function() {
--          this.set('isEditing', true);
--        },
--        acceptChanges: function() {
--          this.set('isEditing', false);
++// data model
++Todos.Todo = DS.Model.extend({
++  title: DS.attr('string'),
++  priority: DS.attr('string'),
++  assignee: DS.attr('string'),
++  isCompleted: DS.attr('boolean')
++});
--          if (Ember.isEmpty(this.get('model.title'))) {
--            this.send('removeTodo');
--          } else {
--            this.get('model').save();
--          }
--        },
--        removeTodo: function() {
--          var todo = this.get('model');
--          todo.deleteRecord();
--          todo.save();
--        }
--      },
++// ... additional lines truncated for brevity ...
++Todos.Todo.FIXTURES = [
++ {
++   id: 1,
++   title: 'Learn Ember.js X',
++   isCompleted: true
++ },
++ {
++   id: 2,
++   title: '...',
++   isCompleted: false
++ },
++ {
++   id: 3,
++   title: 'Profit!',
++   isCompleted: false
++ }
++];
--      isEditing: false,
++// controler
++Todos.TodoController = Ember.ObjectController.extend({
++  actions: {
++    editTodo: function () {
++      this.set('isEditing', true);
++    },
++    acceptChanges: function() {
++    this.set('isEditing', false);
--      isCompleted: function(key, value) {
--        var model = this.get('model');
++    if (Ember.isEmpty(this.get('model.title'))) {
++      this.send('removeTodo');
++    } else {
++      this.get('model').save();
++    }
++   },
++   removeTodo: function() {
++    var todo = this.get('model');
++    todo.deleteRecord();
++    todo.save();
++  }
++  },
--        if (value === undefined) {
--          // Property being used as a getter
--          return model.get('isCompleted');
--        } else {
--          // Property being used as setter
--          model.set('isCompleted', value);
--          model.save();
--          return value;
--        }
--      }.property('model.isCompleted')
--    });
++  isEditing: false,
--    Todos.TodosController = Ember.ArrayController.extend({
--      actions: {
--        createTodo: function() {
--          // Get the todo title set by the "New Todo" text field
--          var title = this.get('newTitle');
--          if (!title || !title.trim()) { return; }
++  isCompleted: function(key, value){
++    var model = this.get('model');
--          console.log("Creating new todo with title:", title);
++    if (value === undefined) {
++      // property being used as a getter
++      return model.get('isCompleted');
++    } else {
++      // property being used as  setter
++      model.set('isCompleted', value);
++      model.save();
++      return value;
++    }
++  }.property('model.isCompleted')
++});
--          // Create the new Todo model
--          var todo = this.store.createRecord('todo', {
--            title: title,
--            priority: "P3",
--            assignee: "all",
--            isCompleted: false
--          });
++Todos.TodosController = Ember.ArrayController.extend({
++  actions: {
++    createTodo: function () {
++      // Get the todo title set by the "New Todo" text field
++      var title = this.get('newTitle');
++      if (!title.trim()) { return; }
--          // Clear the "New Todo" text field
--          this.set('newTitle', '');
++      // Create the new Todo model
++      var todo = this.store.createRecord('todo', {
++        title: title,
++        priority: "P3",
++        assignee: "all",
++        isCompleted: false
++      });
--          // Save the new model
--          todo.save().then(function(savedTodo) {
--            console.log("Todo saved successfully:", savedTodo);
--            // Force a refresh of the list after saving
--            Ember.run.later(function() {
--              console.log("Refreshing todo list");
--              Todos.store.find('todo');
--            }, 100);
--          }, function(error) {
--            console.error("Failed to save todo:", error);
--          });
--        },
--
--        clearCompleted: function() {
--          var completed = this.filter(function(todo) {
--            return todo.get('isCompleted');
--          });
--
--          completed.forEach(function(todo) {
--            todo.deleteRecord();
--            todo.save();
--          });
--        }
--      },
++      // Clear the "New Todo" text field
++      this.set('newTitle', '');
--      remaining: function() {
--        return this.filter(function(todo) {
--          return !todo.get('isCompleted');
--        }).get('length');
--      }.property('@each.isCompleted'),
++      // Save the new model
++      todo.save();
++    },
++    clearCompleted: function () {
++      var completed = this.filterProperty('isCompleted', true);
++      completed.invoke('deleteRecord');
++      completed.invoke('save');
++    }
++  },
--      inflection: function() {
--        var remaining = this.get('remaining');
--        return remaining === 1 ? 'item' : 'items';
--      }.property('remaining'),
--
--      hasCompleted: function() {
--        return this.get('completed') > 0;
--      }.property('completed'),
++  remaining: function () {
++    return this.filterProperty('isCompleted', false).get('length');
++  }.property('@each.isCompleted'),
--      completed: function() {
--        return this.filter(function(todo) {
--          return todo.get('isCompleted');
--        }).get('length');
--      }.property('@each.isCompleted'),
++  inflection: function () {
++    var remaining = this.get('remaining');
++    return remaining === 1 ? 'item' : 'items';
++  }.property('remaining'),
++  hasCompleted: function () {
++    return this.get('completed') > 0;
++  }.property('completed'),
--      allAreDone: function(key, value) {
--        if (value === undefined) {
--          return this.get('length') > 0 && this.every(function(todo) {
--            return todo.get('isCompleted');
--          });
--        } else {
--          this.forEach(function(todo) {
--            todo.set('isCompleted', value);
--            todo.save();
--          });
--          return value;
--        }
--      }.property('@each.isCompleted')
--    });
++  completed: function () {
++    return this.filterProperty('isCompleted', true).get('length');
++  }.property('@each.isCompleted'),
--    // Editing
--    Todos.EditTodoView = Ember.TextField.extend({
--      didInsertElement: function() {
--        this.$().focus();
--      }
--    });
++ allAreDone: function(key, value) {
++  if (value === undefined) {
++    return !!this.get('length') && this.everyProperty('isCompleted', true);
++  } else {
++    this.setEach('isCompleted', value);
++    this.invoke('save');
++    return value;
++  }
++}.property('@each.isCompleted')
++});
--    Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
++// editing
++Todos.EditTodoView = Ember.TextField.extend({
++  didInsertElement: function() {
++    this.$().focus();
    }
  });
++Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
++});