Tiny Todolist RC2: New UI and major improvement

[Mohammad]

Announcement: Todolist Plugin

Date: July 16, 2019

Release: 1.0 release candidate 2

Todolist now supports bulk operations to mark all items as done or undone.

You can also archive the completed items for future references.

It was tried to keep it simple, so these options are in access if you click on option button!

The change log is as below.

This version  works both  with TW 5.1.20pr and older version.

1.0.0 – release candidate 2

16th July 2019

• Revert to TW 5.1.19 to support more audiences
• redesign the main UI
  • no table is used in UI
  • flexbox layout for main UI and archive display
• supports multi todo lists in the same wiki
• supports UI width to have custom layout (media query was removed)

Some issues, request received from group have been addressed!

[Mohammad]

What is new in Todolist Pluging 1.0.0 RC 2

1. Create several todo lists in the same wiki, each todo uses a seprate namespace
2. Archive completed tasks (items) for future references! 
3. Selectively remove items in archived tiddler
4. Empty the archive at once

Layout

1. No table in the UI
2. Better design for sidebar
3. pass the required width as macro parameter

Bulk operations

1. Mark all items as done
2. Mark all items as undone
3. Archive completed items
4. Delete permanently items from archive
5. Empty archive at once

Internals

1. Todolist is a PURE Tiddlywiki 5 plugin NO JS
2. Todolist uses several data tiddlers for creating and managing todolost
3. From Plugin page it is possible to see all internals and remove them when they are not required

It is good to support by staring at Gitub

and it worth to send your feedback!

Development and testing took more than 50 hours!

Demo: https://kookma.github.io/TW-Todolist/

Code: https://github.com/kookma/TW-Todolist

Acknowledgement

• Special thanks go to TheODive (https://github.com/TheDiveO/TiddlyWikiPluginSkeleton) or his excellent TiddlyWikiPluginSkeleton which save many hours during development of TW plugins using Node.js

Best wishes

Mohammad

[Julio Peña]

Hello there Mohammad,

Wow...great stuff!

I've been looking for something simple like this to integrate into some of my Tiddlywikis.

Thanks for sharing!

Best regards,

Julio

[Mohammad]

Hi Jullio,

 I happy to hear that! 

Please send me your feedback 

--Cheers

Mohammad

[Mohammad]

[Mat]

Very nice Mohammad!

It makes me realize a "trap" that I would have fallen into had I made this; It feels self evident to me that every item should be a tiddler in these types of checklists. But your implementation makes me realize that, nope, of course they don't have to be and when they are not then the todo string can instead contain links to several relevant tiddlers. 

One small thing could simplify the UI even a tad more: The "check all"and "uncheck all" buttons could be merged into one (by means of the a revealwidget).

<:-)

[passingby]

I like the improvements. Its better not to have a table. And it looks great in the sidebar. 👍

[Mohammad]

Hi Mat!

Many thanks!
There is some explanation in Mechanism (plugin tiddler)!

I use your great comment! I will merge the two buttons in the final release!

I have also removed the created column! I understood most of people likes the very simple Todo list!

--Mohammad

[Mohammad]

One small thing could simplify the UI even a tad more: The "check all"and "uncheck all" buttons could be merged into one (by means of the a revealwidget).

Done! Check the new update.

 

<:-)

[passingby]

I just installed the plugin and embedded a Todolist instance in the left sideBar(from Twaddle). Unfortunately, the Todolist  seems to be wider and its right edge goes behind the story river on the right. I have to set the width of 350px to the leftbar in order for the buttons to be visible. Can the layout be made more fluid?

Second suggestion: Can it be made that we hit enter and an item is added, instead of the + button? If this can be done, then one more thing needless thing can be shaved off from the ui.

Third: Is it possible to drag and re order the list items?

Thanks

Passingby

[TonyM]

Mohammad,

I have an application of this list you may be able to advise me on, or perhaps it will need a minor enhancement to support it.

I would like to introduce the todo list via the view template to all People and Office tiddlers in a solution I am building however I do not want any change on the current tiddler.

I seems to be as simple as 

<<todolist-ui caption:"Do here" width:"" base:"$(currentTiddler)$">>

This seems to work, but I think you can evaluate the result better than me.

Thanks in advance

Tony

[Mohammad]

Hi Tony,

 This is a great use case! Thank you!

So a viewtemplate like this 

created: 20190717032355377

modified: 20190717032832272

tags: $:/tags/ViewTemplate

title: tempelate/todolist

<$list filter="[all[current]tag[office]]">

<<todolist-ui caption:"Do here" width:"" base:"$(currentTiddler)$">>

</$list>

Will add a todo list at the bottom of all tiddlers tagged with office!

You always give neat ideas!

Cheers

Mohammad

[Mohammad]

Hi Passinby

On Wednesday, July 17, 2019 at 1:57:56 AM UTC+4:30, passingby wrote:

I just installed the plugin and embedded a Todolist instance in the left sideBar(from Twaddle). Unfortunately, the Todolist  seems to be wider and its right edge goes behind the story river on the right. I have to set the width of 350px to the leftbar in order for the buttons to be visible. Can the layout be made more fluid?

Todolist needs 400px width to work properly! By the way you can  open the main.css and change the min-width!

 

Second suggestion: Can it be made that we hit enter and an item is added, instead of the + button? If this can be done, then one more thing needless thing can be shaved off from the ui.

Users with touch screen needs the add button! For adding shortcut keyboards I will ask BTC to see if it is possible to implement. I personally support this feature!

Third: Is it possible to drag and re order the list items?

This is difficult! The todo items are index/value pairs and the draggable widget seems not work for them, but I welcome any suggestion by you or other user have any solution for this!

 

Thanks

Passingby

[TonyM]

Mohammad

This is difficult! The todo items are index/value pairs and the draggable widget seems not work for them, but I welcome any suggestion by you or other user have any solution for this!

This is a great spin off idea which I can imagine how to do but it may be better as a core widget or plugin using core javascript like for the current list draggable. The Idea would be to import the list into a draggable list, allow reordering, then press a button and commit the new order back to the data tiddler (write the whole thing again) including the values.

Regards

Tony

[passingby]

Hi Mohammed,

Noted all the points. 

I have put the TodoLIst in my main Sidebar(right side). Expanded the width of the SideBar to 400 px. I have gotten rid of the LeftBar. Put everything in the Right SideBar. I was getting irritated with 2 bar on the page. Also I got rid of the Site Title, Sub title, Page Controls as well as the Search Bar. They were hogging up space for no good use of mine. I put all of them in a Sidebar tab. Made everything look minimalistic. And the SideBar shifted up the page too. My TOC is  on the Sidebar Tab. Looks good now. Will report if any more issues crop up.

Thanks

PassingBy

[passingby]

Tony,

Wow, that's creative. I like the idea.

[TonyM]

Mohammad,

FYI: I am using the todo list as follows in the view template (But also if it is a particular object-type field of tiddler)

     <$list filter="[{$:/config/wiki-mode}] -[[read-only]] -[[view]]" variable=null><<null>>
       <!-- Update and Edit mode Mode only -->
            <<todolist-ui caption:" " width:"" base:"$(currentTiddler)$">>
      </$list>

This works well, however I realised I need to look at the tiddler in question to see its items.

Would you be able to design an independent macro todolist-all that lists the tiddler with todos, and the todo list for each. So we could see in a glance where todo items exist? ands action them there?

I could do this but I ask if you could please because it would be quicker for you and you can share it in the published one.

Thanks

Tony

[Mohammad]

Tony!
 What makes to create different todolist is the base (e.g. the name space)!

If you want to have all todo items at one place then use the same namespace! The good is you have all the todo items at one place the bad is you have all items in every tiddler have a todolist via viewtemplate!

--Mohammad

[Mohammad]

Happy to hear that!
Please send me if there is any issues

--Mohammad

[Mohammad]

On Wednesday, July 17, 2019 at 1:57:56 AM UTC+4:30, passingby wrote:

I just installed the plugin and embedded a Todolist instance in the left sideBar(from Twaddle). Unfortunately, the Todolist  seems to be wider and its right edge goes behind the story river on the right. I have to set the width of 350px to the leftbar in order for the buttons to be visible. Can the layout be made more fluid?

Second suggestion: Can it be made that we hit enter and an item is added, instead of the + button? If this can be done, then one more thing needless thing can be shaved off from the ui.

Good news! This feature is now available in RC 4!

Wait for update tonight or tomorrow morning!

  Horrra!!

--Mohammad

[h0p3]

This is magnificent. It has all the functions I need, it just werx intuitively, namespaces are a godsend, it doesn't show me more than I need, and it fits my sidebar automagically. I finally have a reason to stop building my stupid TDLs by hand. This is another brilliant stunner you've built. I can tell you've put a lot of thought into this; I love the design. Thank you for your gift to us. I have no criticism, but I have some feedback which might be useless to you (if so, sorry).

• I see that it probably isn't possible to manually move items up and down the list in the way that I can arrange objects on the toolbar in the "Open" sidebar tab. Assuming it is safe, I'm still going to make some kind of ghetto button to be able to manually edit the json in $:/plugins/kookma/todolist/data/foobar/tasks. This is what I want to know: I see the members of the list are timestamped, and (if at all) is it a problem for me to put them out of creation order?
• Is it possible to create trees and move entire branches?
• Manually nested metadata and notes to my TDLs have been valuable.
• I just can't use any of the calendars in TW. If there are trees and way to automate the ordering (e.g. YYYY.MM.DD @HH:MM), this tool is a calendar.

[Mohammad]

I am happy you found it useful!

On Wednesday, July 17, 2019 at 10:48:03 PM UTC+4:30, h0p3 wrote:

This is magnificent. It has all the functions I need, it just werx intuitively, namespaces are a godsend, it doesn't show me more than I need, and it fits my sidebar automagically. I finally have a reason to stop building my stupid TDLs by hand. This is another brilliant stunner you've built. I can tell you've put a lot of thought into this; I love the design. Thank you for your gift to us. I have no criticism, but I have some feedback which might be useless to you (if so, sorry).

• I see that it probably isn't possible to manually move items up and down the list in the way that I can arrange objects on the toolbar in the "Open" sidebar tab. Assuming it is safe, I'm still going to make some kind of ghetto button to be able to manually edit the json in $:/plugins/kookma/todolist/data/foobar/tasks. This is what I want to know: I see the members of the list are timestamped, and (if at all) is it a problem for me to put them out of creation order?

I work on this part and I hope I can find a way to change the order!

The key/value is timestamp/note

 

• Is it possible to create trees and move entire branches?
• Manually nested metadata and notes to my TDLs have been valuable.

I am not sure if I can do this! I think TW json file are flat and does not support nesting but there is plugin to do this!

I am not going to use extra plugin but you are free to hack and add that feature

[Watt]

Hi hOp3
I have a rather long-winded method of showing 'tasks' selected by index date. It's not a calendar, more like a diary, but it may give you some ideas to work with. I'm absolutely sure there are more efficient ways to do this but I only started with data tiddlers recently and this evolved out of the learning process.

This works with the data/tasks file produced by Mohammad's todolist.

I have 2 tiddlers of type 'application/x-tiddler-dictionary'.

1 is titled 'months' and has this content;
01:01
02:02
03:03
04:04
05:05
06:06
07:07
08:08
09:09
10:10
11:11
12:12

The second is called 'days' and has the same content but all the way to 31:31

The third tiddler is titled 'mymonths' and creates a transcludable drop down selector for months. It contains;

<$select tiddler="$:/_state/dateselector" field="month">
<$list filter='[[months]indexes[]]'>
<$list filter='[[months]getindex<currentTiddler>' variable='<value>']>
<option><<currentTiddler>></option>

</$list>

</$list>

</$select>

<$list filter="[[months]getindex{$:/_state/dateselector!!month}]" variable="value">
</$list>

The fourth tiddler is titled 'mydays' and creates a drop down selector for days. It contains;

<$select tiddler="$:/_state/dateselector" field="day">
<$list filter='[[days]indexes[]]'>
<$list filter='[[days]getindex<currentTiddler>' variable='<value>']>
<option><<currentTiddler>></option>

</$list>

</$list>

</$select>

<$list filter="[[days]getindex{$:/_state/dateselector!!day}]" variable="value">
</$list>

Finally the fifth tiddler is titled 'tasks by date' and allows you to select your tasks by date. It contains;

\define concatdate()
2019.{{$:/_state/dateselector!!month}}.{{$:/_state/dateselector!!day}}
\end

Day: {{mydays}}
Month: {{mymonths}}

<$wikify name="myconcatdate" text=<<concatdate>> >

<b>
<<myconcatdate>></b>

<$list filter="[[$:/plugins/kookma/todolist/data/YOURBASENAME/tasks]indexes[]] +[regexp:title<myconcatdate>]">

<$list filter="[[$:/plugins/kookma/todolist/data/YOURBASENAME/tasks]getindex<currentTiddler>]" variable="value"><<value>>
</$list>
</$list>

</$wikify>

Note that you need to edit YOURBASENAME in 'tasks by date' twice to the base name that you are using in todolist.

I never got around to making a dropdown for years but it would follow the same pattern.

Like I say, longwinded, not a calendar, definitely not a textbook example but it might give you or others ideas and hopefully someone will extend it and correct my slapdash methods.

[h0p3]

Thank you so much! That is very generous of you. I'm still coming to grips with how to plan and modify this tooling in my wiki. I don't know how far this change is going to go, but I am excited.

Also, starred this project.

[Mohammad]

Please have a look at much better alternative here

http://j.d.todo.tiddlyspot.com/

[Mohammad]

Hi h0p3,

 I have uploaded a special edition to support drag and drop for re ordering items in todo list

https://github.com/kookma/TW-Todolist/tree/master/draggable

the index.html is a working demo and the plugin is a tid file.

Enjoy it!

Cheers

Mohammad 

On Wednesday, July 17, 2019 at 10:48:03 PM UTC+4:30, h0p3 wrote:

[Mohammad]

On Wednesday, July 17, 2019 at 1:57:56 AM UTC+4:30, passingby wrote:

Hi passingby,

 This is a special edition supports drag and drop

https://github.com/kookma/TW-Todolist/tree/master/draggable

Good luck

 

Thanks

Passingby

[h0p3]

Thank you! =)

[ILYA]

Hi hOp3 and Mohammad,

It looks like it is possible to create nested structures. Try pasting following as one of the items

```
<$macrocall $name="todolist-ui" caption="parent item" with="" base=<<item>>/>
```

I wish there would be a way to implement button which converts the selected item to regular tiddler when needed.


Best regards,
ILYA

--
Sent from my Android device with K-9 Mail. Please excuse my brevity.

[Mohammad]

Hi Ilya!

 I never thought such amazing todo item :-)

On Friday, July 26, 2019 at 10:43:16 PM UTC+4:30, ILYA wrote:

Hi hOp3 and Mohammad,

It looks like it is possible to create nested structures. Try pasting following as one of the items

```
<$macrocall $name="todolist-ui" caption="parent item" with="" base=<<item>>/>
```

I wish there would be a way to implement button which converts the selected item to regular tiddler when needed.

Why not pass such item as a link on click create a missing tiddler with that item!

One more solution can be a macro to show the item and on click create a tiddler with that contents!

--Mohammad