Non-input todos

[thombruce]

closes #54

[github-actions[bot]]

Coverage Summary for `./packages/web`

Status	Category	Percentage	Covered / Total
🟢	Lines	92.09% / 60%	897 / 974
🟢	Statements	92.09% / 60%	897 / 974
🟢	Functions	70.83% / 60%	68 / 96
🟢	Branches	89.68% / 60%	113 / 126

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
packages/web/src/components/ActiveInterval.vue	100%	100%	100%	100%
packages/web/src/components/CommentCount.vue	95.45%	100%	50%	95.45%	19
packages/web/src/components/IntervalTimer.vue	73.52%	25%	20%	73.52%	17-19, 22-27
packages/web/src/components/ProjectTag.vue	23.07%	100%	0%	23.07%	4-13
packages/web/src/components/StaticInterval.vue	100%	100%	100%	100%
packages/web/src/components/TallyCounter.vue	100%	100%	50%	100%
packages/web/src/components/TodoItem.vue	84.9%	75%	37.5%	84.9%	14-16, 28, 32-35
packages/web/src/components/TodoList.vue	84.37%	66.66%	33.33%	84.37%	10-14
packages/web/src/components/TodoText.vue	82.6%	75%	50%	82.6%	15-18
packages/web/src/models/Base.ts	94.66%	100%	81.81%	94.66%	34-35, 56-57
packages/web/src/models/BaseCollection.ts	100%	100%	100%	100%
packages/web/src/models/Comment.ts	94.59%	100%	66.66%	94.59%	31-32
packages/web/src/models/CommentCollection.ts	100%	100%	100%	100%
packages/web/src/models/Interval.ts	100%	75%	100%	100%
packages/web/src/models/IntervalCollection.ts	100%	100%	100%	100%
packages/web/src/models/Project.ts	83.63%	100%	66.66%	83.63%	41-47, 51-52
packages/web/src/models/ProjectCollection.ts	100%	100%	100%	100%
packages/web/src/models/Projectable.ts	89.83%	100%	62.5%	89.83%	42-43, 46-47, 55-56
packages/web/src/models/ProjectableCollection.ts	100%	100%	100%	100%
packages/web/src/models/Tally.ts	94.59%	100%	66.66%	94.59%	31-32
packages/web/src/models/TallyCollection.ts	100%	100%	100%	100%
packages/web/src/models/Todo.ts	94.33%	94.11%	75%	94.33%	53-54, 57-58, 61-62
packages/web/src/models/TodoCollection.ts	100%	100%	100%	100%
packages/web/src/plugins/loki.ts	100%	100%	100%	100%
packages/web/src/plugins/pinia.ts	100%	100%	100%	100%
packages/web/src/plugins/timepiece.ts	71.42%	60%	50%	71.42%	14-19
packages/web/src/stores/comments.ts	96.87%	100%	100%	96.87%	14
packages/web/src/stores/globals.ts	100%	100%	100%	100%
packages/web/src/stores/intervals.ts	97.95%	100%	100%	97.95%	17
packages/web/src/stores/projects.ts	97.29%	100%	100%	97.29%	16
packages/web/src/stores/tallies.ts	97.14%	100%	100%	97.14%	15
packages/web/src/stores/todos.ts	97.22%	100%	100%	97.22%	14

[thombruce]

The idea is to be able to decorate tags within a todo. I already have the regular expression for identifying them, so it's just a question of how to decorate them...

Probably replace +pattern in todo.text with <a href="" class="project-tag">+pattern</a>.

[thombruce]

https://github.com/thombruce/toodles/pull/61/commits/4ff307f0aaf88b08724f5d24bbbd7accc252cfb3 is not ideal, but it works.

Would like to move the todo text interface into a separate component. Would like to style the links. And would like to be able to click them without this being captured instead by the contenteditable area.

[thombruce]

Would prefer, rather than parsing and replacing with raw HTML, to:

1. Parse the text into string parts and tag parts
2. Restructure from this array as a Vue component

[thombruce]

https://github.com/thombruce/toodles/pull/61/commits/077c905f5b92d8d237c580c5db6b6f5a1fc3f5bf

This is most of the way there, but it looks like items after splitting the text are not reactive. After input is complete and the todo is saved, the element should act as though whatever new project tag was added had always been there and display it in the highlighted style.

Bonus points if the highlight can be created while in the act of editing. It can. I just need to shift some pieces around.

[thombruce]

Reminder: Toodles is heavily overengineered and in serious need of refactoring. 🙃 I might do this next, particularly if my solution to the above is sloppy.