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 27.1 to 26.1

From version

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

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,7 +1,7 @@
  requirejs.config({
    baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
    paths: {
--    'jquery': 'https://code.jquery.com/jquery-3.6.0.min'  // Updated jQuery version
++    'jquery': 'https://code.jquery.com/jquery-1.10.2.min'
    },
    shim: {
      'ember-data': {
@@ -13,290 +13,241 @@
    }
  });
--require(['jquery', 'handlebars-v1.2.1', 'ember-data', 'ember'], function($) {
--  // Create app
--  window.Todos = Ember.Application.create({
--    rootElement: '#todoappdiv'
--  });
++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({
--    namespace: 'api', // Moved inside the adapter definition
--
--    createRecord: function(store, type, record) {
--      console.log("createRecord");
--      var data = this.serialize(record, { includeId: true });
--      var query = { create: "1", content: JSON.stringify(data) };
--
--      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);
--          });
--        });
++// create app
++window.Todos = Ember.Application.create({
++  rootElement: '#todoappdiv'
++});
++
++// 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);
        });
--    },
--
--    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);
--          });
--        });
++    });
++  },
++  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);
        });
--    },
--
--    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);
--          });
--        });
++    });
++  },
++  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);
        });
--    }
--  });
--
--  // 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');
--    }
--  });
++// use my own store
++Todos.store = DS.Store.create({
++  adapter: 'ApplicationAdapter'
++});
--  Todos.TodosIndexRoute = Ember.Route.extend({
--    model: function() {
--      return this.modelFor('todos');
--    }
--  });
++// Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
--  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 });
--    }
++// routing
++Todos.Router.map(function() {
++  this.resource('todos', { path: '' }, function() {
++     this.route('active');
++     this.route('completed');
    });
++});
--  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.TodosRoute = Ember.Route.extend({
++  model: function() {
++    return this.store.find('todo');
++  }
++});
--  // Data model
--  Todos.Todo = DS.Model.extend({
--    title: DS.attr('string'),
--    priority: DS.attr('string'),
--    assignee: DS.attr('string'),
--    isCompleted: DS.attr('boolean')
--  });
++Todos.TodosIndexRoute = Ember.Route.extend({
++  model: function() {
++    return this.modelFor('todos');
++  }
++});
--  // Controller
--  Todos.TodoController = Ember.ObjectController.extend({
--    actions: {
--      editTodo: function() {
--        this.set('isEditing', true);
--      },
--      acceptChanges: function() {
--        this.set('isEditing', false);
++// ... 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});
++  }
++});
--        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();
--      }
++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});
++  }
++});
++
++// data model
++Todos.Todo = DS.Model.extend({
++  title: DS.attr('string'),
++  priority: DS.attr('string'),
++  assignee: DS.attr('string'),
++  isCompleted: DS.attr('boolean')
++});
++
++// ... 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
++ }
++];
++
++// controler
++Todos.TodoController = Ember.ObjectController.extend({
++  actions: {
++    editTodo: function () {
++      this.set('isEditing', true);
      },
++    acceptChanges: function() {
++    this.set('isEditing', false);
--    isEditing: false,
++    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();
++  }
++  },
--    isCompleted: function(key, value) {
--      var model = this.get('model');
++  isEditing: false,
--      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')
--  });
++  isCompleted: function(key, value){
++    var model = this.get('model');
--  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; }
++    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')
++});
--        console.log("Creating new todo with title:", title);
++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; }
--        // Create the new Todo model
--        var todo = this.store.createRecord('todo', {
--          title: title,
--          priority: "P3",
--          assignee: "all",
--          isCompleted: false
--        });
++      // Create the new Todo model
++      var todo = this.store.createRecord('todo', {
++        title: title,
++        priority: "P3",
++        assignee: "all",
++        isCompleted: false
++      });
--        // Clear the "New Todo" text field
--        this.set('newTitle', '');
++      // Clear the "New Todo" text field
++      this.set('newTitle', '');
--        // 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();
--        });
--      }
++      // Save the new model
++      todo.save();
      },
++    clearCompleted: function () {
++      var completed = this.filterProperty('isCompleted', true);
++      completed.invoke('deleteRecord');
++      completed.invoke('save');
++    }
++  },
--    remaining: function() {
--      return this.filter(function(todo) {
--        return !todo.get('isCompleted');
--      }).get('length');
--    }.property('@each.isCompleted'),
++  remaining: function () {
++    return this.filterProperty('isCompleted', false).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'),
++  inflection: function () {
++    var remaining = this.get('remaining');
++    return remaining === 1 ? 'item' : 'items';
++  }.property('remaining'),
++  hasCompleted: function () {
++    return this.get('completed') > 0;
++  }.property('completed'),
--    completed: function() {
--      return this.filter(function(todo) {
--        return todo.get('isCompleted');
--      }).get('length');
--    }.property('@each.isCompleted'),
++  completed: function () {
++    return this.filterProperty('isCompleted', true).get('length');
++  }.property('@each.isCompleted'),
--    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')
--  });
++ 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')
++});
--  // Editing
--  Todos.EditTodoView = Ember.TextField.extend({
--    didInsertElement: function() {
--      this.$().focus();
--    }
--  });
--
--  Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
++// editing
++Todos.EditTodoView = Ember.TextField.extend({
++  didInsertElement: function() {
++    this.$().focus();
++  }
  });
++Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
++});