Re-presenting: list-rows ~ formatted data in draggable rows

Plugins
1

EDIT: New release as Tids-to-Table, se here.

What!? Didn’t that twaddling guy just release a plugin yesterday?

True. But this one is actually a renamed update of another plugin! Chances are you missed it the first time around because of its horrible name (list-table-draggable - gah!) So, I now proudly present…

        list-rows ~ lists data from filtered tiddlers, formatted into rearrangable table rows.

This macro takes inspiration from the macros list-links, list-tagged-draggable and list-links-draggable. They’re neat but all too limited, basically listing titles in bullet lists. The list-rows macro is more useful:

  • you set a filter for which tiddlers to list
  • the output is a table, each row corresponding to a tiddler
  • each row structuredly displays tiddler data via a template

It is also simple to use!

I’m taking the liberty of quoting fellow @Brian who requested this update:

It’s really top-shelf, lets you do things you otherwise couldn’t, everyone should try it.

(Thanks Brian!)

8 Likes
Please, take this 3 second screen test!
Presenting: Tids-to-Table ~ generate tables from filters
2

This is excellent! Thank you for sharing.

One (minor?) feature request would be a non-draggable header row.

3

Thank you very much,

this is really great , and also similar to the above request , is it actually possible to make one entry non draggable ( so not only the header , but an entry in the table)

4

Hi Mat, I have vague memories that we may have discussed this in the past… here is an example of a template that allows you to have the same behaviour without a link to use as the drag handle:

<$draggable tiddler=<<currentTiddler>> tag="td">
<$text text=<<currentTiddler>>/>
</$draggable>
<td>{{!!number}}</td>
<td>{{!!text}}</td>

This is a quick example of a template using a field on the tiddler to determine if its draggable or not:

<$draggable tiddler=<<currentTiddler>> tag="td" selector=".draghandle">
<span class={{{ [{!!draggable}match[no]then[]else[draghandle tc-draggable]] }}} draggable={{{ [{!!draggable}match[no]then[false]else[true]] }}}><$text text=<<currentTiddler>>/></span>
</$draggable>
<td>{{!!number}}</td>
<td>{{!!text}}</td>

Lastly, here is a slightly tweaked macro to accept an optional parameter headers in title list format:

\define list-rows-drop-actions()
<$action-listops $tiddler=<<tiddler>> $field=<<field>>
$subfilter="""+[enlist<newlist>]"""/>
<$action-listops $tiddler=<<tiddler>> $field=<<field>>
$subfilter="""+[insertbefore:start<actionTiddler>,<currentTiddler>]"""/>
\end

\define list-rows(rowTemplate:"$:/plugins/TWaddle/list-rows/defaultTemplate", tiddler, field:"list", class, headers)
\whitespace trim
<$let
	tiddler={{{ [<__tiddler__>is[blank]then<currentTiddler>else[$tiddler$]] }}}
	field="""$field$"""
>

<!-- SETUP IF UNDEFINED LIST -->
<$list filter="""[<tiddler>!has<field>]""">
<div style="outline:1px solid crimson; padding:1px 18px;">

<$edit-text
	tiddler="$:/temp/list-rows"
	tag=input
	placeholder="enter filter"
	size=40
/>&nbsp;
<$set
	name="listcontent"
	filter={{{ [{$:/temp/list-rows}] }}} >
<$button 
	set="$:/temp/list-rows"
	setTo="">
	<$action-setfield 
		$tiddler=<<tiddler>>
		$field$=<<listcontent>> />
	<$action-setfield 
		$tiddler=<<tiddler>>
		$field$-filter={{$:/temp/list-rows}} />
	populate
</$button>
</$set>
&nbsp;
- Populates the&nbsp;//$field$//&nbsp;field in&nbsp;<$link/>

[[$rowTemplate$]]&nbsp; is the rowTemplate. The currentTiddler variable refers to the current list item:
<br>
<$edit-text tiddler="""$rowTemplate$""" placeholder="""Enter the <td> definitions for $rowTemplate$""" class="list-rows-rt-editor" size="100%"/>

</div>
</$list>
<!-- end SETUP -->

<table class="list-rows $class$">
<$list filter="[<__headers__>!is[blank]]">
<tr>
<$list filter="[enlist<__headers__>]">
<th><$text text=<<currentTiddler>> /></th>
</$list>
</tr>
</$list>
<$let
	targetList={{{ [<tiddler>get<field>] }}}
	targetFilter={{{ [<tiddler>get[$field$-filter]] }}}
>
<$list filter="""[subfilter<targetFilter>sortby<targetList>]""">
<$set name=newlist filter='[subfilter<targetFilter>sortby<targetList>]'>
<$droppable
	actions=<<list-rows-drop-actions>>
	tag="tr">
	<$transclude tiddler="""$rowTemplate$"""/>
</$droppable>
</$set>
</$list>
</$let>
</table>

</$let>
\end
1 Like
5

Thank you Saqimtiaz,

ok i guess what i really meant was not draggable and persistent as well in the table and would not change position in the table ,regardless of other entries in the table being dragged around , is that something possible?

thanks again

6

Hi Paul, my reply was meant more so to provide ideas to Matt rather than be an answer to your specific query.

I am having trouble envisioning how that would look. If you want an entry to never change position you could never drag another from above it to below and vice versa, essentially dividing the table into smaller separate tables… might be doable but I suspect that is far outside the scope of what this plugin attempts to do.

1 Like
7

@saqimtiaz no that’s not what i meant, i apologize again , i guess the correct term to use here is perhaps “shift” , so a non-shiftable entry, meaning that it would not loose its order in the table inspite of any other entries being dragged above it or below it , i hope this makes sense

8

I’m afraid that still doesn’t make sense to me. If there was a single such entity, say noshift in a table/list:

  • first
  • second
  • noshift
  • fourth

then by dragging around first, second and third, we can put noshift in any position, and can in fact achieve any ordering of the elements. So it’s still not clear what you’re looking for.

Is it that if you have noshift-1 and noshift-2, their own relative ordering cannot change?

1 Like
9

Hi,

so if we drag down “second” for example , then you would get this , where “no shift” remains in the 3rd row

  • first
  • noshift
  • second
  • fourth

instead of the normal behaviour where “no shift” is pushed up to take “second” place in the table

of if you drag up “fourth” in the place of " first" , you would get

  • fourth
  • first
  • noshift
  • second

so “no shift” persists in the table and does not respect any reordering happening as a result of dragging other entries

10

Thank you. I almost understand it now (Why does first shift down?). That’s very interesting. I’ve never seen anything like it. Can you explain a use-case for this? It’s behavior I don’t think I’ve seen anywhere.

11

my use case would be a schedule populated by shiftable entries, and non shiftable entries, so draggable tasks to be moved around, and others that cannot/should not be moved around .

i would prefer if “one” actually remains in the first row , i was only assuming that drag and drop will not leave a gap

Note: this is coming btw out of complete ignorance on how drag an drop really works , thats why i originally asked if its actually possible … :slight_smile: so its really more of a question i suppose rather than a request ,i mean hopefully its something that could be done , i just dont know if it could be :slight_smile:

12

Drag-and-drop is just a user gesture with some system-generated visual hints. We can use those to build most any related behavior we desire.

But I guess I’m still not clear on what you’re looking for. (I probably shouldn’t be the one who’s asking; this is @twMat’s project, and I haven’t contributed to it at all. But I’m curious about these requirements.)

Does this capture what you would like?:

Some elements of the list could be flagged as static. These elements will never be dragged themselves, and hence they will remain in the same relative order in the list. (The first static element in the list, for instance, will never end up below the second one.) But the other, non-static, elements could be dragged anywhere between, before, or after these static elements.

13

thank you for your input Scott ,Yes, this is my requirement

14

First off, a big thank you to @saqimtiaz ! Those are some significant modifiation so I’ll be working with them over the next few days.

I’m currently experimenting with the UI to accomodate the request for headers but at the same time other matters because I want the user to not have to think so much, i.e it is better UX if the user does things in the setup area where there is guidance compared to when typing the macro invocation. I’m considering moving everyting into the setup, so that the user more or less only has to remember the command <<list-rows>>

However, regarding @paulgilbert2000 's request I don’t think I will implement it. I see how it can be easily created with two checkbox-lists though, i.e no dragging but simply some fixed position and one list above it with unchecked and below with checked.

2 Likes
15

Thanks for sharing @twMat I am experimenting with the solution as we speak. I think this kind of utility function is very helpful to users, from little things, bigger things grow.

  • It would be great if one day we could drag a row from anywhere in the row, but do not yet see how to do this.

This has come up previously I think the trick would be to have multiple lists, (even if they look like one list), and ensure if a tiddler title is dragged to a different list it is removed from its source list.

Early 

Day Start

Morning

Noon

Afternoon

Day End

Evening

If you had these 7 lists as above the lists name remains fixed and what you place in each list would move.

  • Each “period” in the above list could be its own tiddler, with its own list field.
    • Have a look at the “basket” or Favorites with folders of @Mohammad’s which go a long way to do this.
  • I think as @twMat has done with List-rows a path to achiving this would be to build a few simple and specific tools which can be pulled together for the solution you @paulgilbert2000 ask for.
  • I do hope to address this in full one day, where the items placed in the lists have a time or effort assigned and running totals are calculated, and “time squeezes indicated” (when you have over scheduled).
16

For everyones info, this plugin is now replaced with a superior variant, see here.

Please don’t write more in this thread. Thank you, everyone who participated!