0 Votes

Changes for page Todolist Macro

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

From 6.1 to 7.1 From 24.1 to 24.2

From version

7.1

edited by Ryan C
on 2025/04/24 10:23

Change comment: Todo List item added

To version

24.1

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

Change comment: There is no comment for this version

Raw
Rendered

Summary

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

Details

Page properties

Content

@@ -1,7 +1,9 @@
  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 thing|1
--a second thing|0
++a 3nd thing|0
++adding this thing|0
++adding this thing|0
++refreshed they are still there not even having to save page|0
  {{/todolist}}

XWiki.JavaScriptExtension[0]

Code

@@ -1,257 +1,295 @@
  requirejs.config({
--    //By default load any module IDs from js/lib
--    baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
--    //except, if the module ID starts with "app",
--    //load it from the js/app directory. paths
--    //config is relative to the baseUrl, and
--    //never includes a ".js" extension since
--    //the paths config could be for a directory.
--    paths: {
++  baseUrl: '${xwiki.getDocument("TodoLists.TodoListMacro").getURL("download")}/',
++  paths: {
++    'jquery': 'https://code.jquery.com/jquery-3.6.0.min'  // Updated jQuery version
++  },
++  shim: {
++    'ember-data': {
++      deps: ['ember', 'jquery']
      },
--    shim: {
--        'ember-data': {
--            deps: ['ember', 'jquery']
--        },
--        'ember': {
--            deps: ['jquery']
--        }
++    'ember': {
++      deps: ['jquery']
      }
++  }
  });
--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($) {
++  // 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);
++  // Define the todolist store that will write to the TodoListsService
++  Todos.ApplicationAdapter = DS.Adapter.extend({
++    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) {
++        jQuery.getJSON(
++          "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
++          XWiki.currentSpace + "." + XWiki.currentPage +
++          "&xpage=plain&outputSyntax=plain",
++          query
++        ).then(function(data) {
++          Ember.run(function() {
++            resolve(data);
++          });
++        }, function(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);
++    },
++
++    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) {
++        jQuery.getJSON(
++          "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
++          XWiki.currentSpace + "." + XWiki.currentPage +
++          "&xpage=plain&outputSyntax=plain",
++          query
++        ).then(function(data) {
++          Ember.run(function() {
++            resolve(data);
++          });
++        }, function(jqXHR) {
++          Ember.run(function() {
++            reject(jqXHR);
++          });
++        });
        });
++    },
++
++    updateRecord: function(store, type, record) {
++      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) {
++  jQuery.getJSON(
++    "${xwiki.getURL('TodoLists.TodoListsService')}?page=" +
++    (
++      typeof XWiki !== 'undefined' &&
++      XWiki.currentSpace &&
++      XWiki.currentPage
++        ? XWiki.currentSpace + "." + XWiki.currentPage
++        : document.location.pathname.split('/').pop()
++    ) +
++    "&xpage=plain&outputSyntax=plain",
++    query
++  ).then(function(data) {
++    Ember.run(function() {
++      resolve(data);
      });
--  },
--  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);
--      });
++  }, function(jqXHR) {
++    Ember.run(function() {
++      reject(jqXHR);
      });
--  }
++  });
  });
--// use my own store
--Todos.store = DS.Store.create({
--  adapter: 'ApplicationAdapter'
--});
--// Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
++  // Register the adapter
++  Todos.ApplicationAdapter.reopen({
++    namespace: 'api'
++  });
--// routing
--Todos.Router.map(function() {
--  this.resource('todos', { path: '' }, function() {
--     this.route('active');
--     this.route('completed');
++  // 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.TodosRoute = Ember.Route.extend({
++    model: function() {
++      return this.store.find('todo');
++    }
++  });
--Todos.TodosIndexRoute = Ember.Route.extend({
--  model: function() {
--    return this.modelFor('todos');
--  }
--});
++  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});
--  }
--});
++  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 });
++    }
++  });
--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.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')
--});
++  // 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
-- }
--];
++  // Controller
++  Todos.TodoController = Ember.ObjectController.extend({
++    actions: {
++      editTodo: function() {
++        this.set('isEditing', true);
++      },
++      acceptChanges: function() {
++        this.set('isEditing', false);
--// controler
--Todos.TodoController = Ember.ObjectController.extend({
--  actions: {
--    editTodo: function () {
--      this.set('isEditing', true);
++        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();
++      }
      },
--    acceptChanges: function() {
--    this.set('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();
--  }
--  },
++    isEditing: false,
--  isEditing: false,
++    isCompleted: function(key, value) {
++      var model = this.get('model');
--  isCompleted: function(key, value){
--    var model = this.get('model');
++      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')
++  });
--    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')
--});
++  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; }
--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();
++        // Save the new model
++        todo.save().then(function() {
++          // Force a refresh of the list after saving
++          Ember.run.later(function() {
++            Todos.store.find('todo');
++          }, 100);
++        });
++      },
++
++      clearCompleted: function() {
++        var completed = this.filter(function(todo) {
++          return todo.get('isCompleted');
++        });
++
++        completed.forEach(function(todo) {
++          todo.deleteRecord();
++          todo.save();
++        });
++      }
      },
--    clearCompleted: function () {
--      var completed = this.filterProperty('isCompleted', true);
--      completed.invoke('deleteRecord');
--      completed.invoke('save');
--    }
--  },
--  remaining: function () {
--    return this.filterProperty('isCompleted', false).get('length');
--  }.property('@each.isCompleted'),
++    remaining: 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'),
++    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.filterProperty('isCompleted', true).get('length');
--  }.property('@each.isCompleted'),
++    completed: function() {
++      return this.filter(function(todo) {
++        return todo.get('isCompleted');
++      }).get('length');
++    }.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')
--});
++    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')
++  });
--// editing
--Todos.EditTodoView = Ember.TextField.extend({
--  didInsertElement: function() {
--    this.$().focus();
--  }
--});
++  // Editing
++  Todos.EditTodoView = Ember.TextField.extend({
++    didInsertElement: function() {
++      this.$().focus();
++    }
++  });
--Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
++  Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
  });
++

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

Changes for page Todolist Macro

Summary

Details

Quick Links

Categories