feat: Adopts more Vue-specific features

[ChristianKienle]

Howdy.

Last weekend I had a closer look at this example and noticed that it does not use some of Vue's useful features. This PR changes the sample project so that it makes more use of Vue-specific features. For example:

TodoList is not rendering the TodoItems itself. Instead the consumer of TodoList has to render the item. TodoList merely provides the todo item which has to be rendered via scoped slots. This allows the consumer to have full control over the todo list item which comes in handy later when deletion and editing of todo items come into play:

<TodoList :todos="doneTodos" @selectionchange="$event.done = false">
  <template #todo="{todo}">
    <TodoItem
      :todo="todo"
      @delete="handleRemove(todo)"
      @edit="handleEdit(todo)"
    />
  </template>
</TodoList>

As you can see: Now the consumer has the actual todo within the same scope and thus can use this to register for delete- and edit-events. This means that the deleted/edited todo-item has no longer to be determined by looking it up in the local state. It is just there.

TodoList still emits a selectionchange-event but it includes the todo in question in the event's payload. This allows the consumer (App.vue) to react on selection-changes by simply accessing the payload via $event. In the snipped above you can see that $event.done is set to false when the selection changes.

Also, App no longer has two different todo-arrays. Instead there is one list called allTodos. Each todo has an additional property called done. Then there are two computed props:

• todos: Contains all todos where done = false
• doneTodos: Contains all todos where done = true

This simplifies the lookup of todos. Only one list has to be consulted in order to find a todo by a given id.

You can simply move a todo from one computed list to another list by changing it's done-prop.

I have also removed most refs, since this is usually only something that should be used as a last resort in Vue.

I have removed most refs by using v-bind and v-on.

A word of caution:

The sample no longer works properly. You will notice that you sometimes have to click twice in order to move todos.

Also you will notice errors beeing logged.

I have noticed that the ui5-list does not emit selectionChange when something is deselected. Which might explain the need for multiple clicks.

Also I have noticed that there was seemingly a bug in the ui5 text area which was fixed just recently.

It may also very well be that I simply introduced additional bugs. :D

If you think the merits of this PR are good I suggest we work together on the issues this PR has. I would love to know why the sample does not behave as nicely as before my changes. So do you have time to go through my changes with me together? I am sure all issues could be fixed or somehow explained by working together. :)

~ Chris

[CLAassistant]

All committers have signed the CLA.

[pskelin]

Hi Chris,

thanks for the PR, your experience is much appreciated. Let's work on getting the functionality stable, other than that your proposal looks much better than the initial sample.

Based on your description, we'll have a look to see what are the issues with the web components. Feel free to also open an issue there directly, if you find the APIs or events lacking for the improved Vue consumption code.

Thanks,
Peter

[ilhan007]

Hello @ChristianKienle currently if you add a new todo, the completed todo is gone.
I think the root cause might be in these few lines. Can we use allTodos for those manipulations:

const id = this.allTodos.length + 1;
this.allTodos = [...this.allTodos, {

[ilhan007]

And could you init and reset the deadline property with "", instead of null, it seems this breaks functionality within the DatePicker, that we should look into, but just to get the app working properly : )

[ilhan007]

I found out that editing the todo deadline stopped working as well.

A bit misleading I have to admit, but the ui5-datepicker event is liveChange,
(while the ui5-input fires input) so this should be changed to:
@liveChange="todoBeingEdited.deadline = $event.target.value"
and you have to add listener for the "change" event as well
@change="todoBeingEdited.deadline = $event.target.value"

Currently if you change the deadline in the edit dialog, the todo deadline is not being updated.

I created an issue to address the name inconsistency
SAP/ui5-webcomponents#365

[ilhan007]

I found out that when I tried to "undone" the single todo from the second list with completed items, the todo item remains in the completed section.

If you "undone" it, the onSelectionChange handler would be called, the event.detail.items would be empty array, which is expected, as there are no selected items.

Then, In the following lines of code, you are getting a selected item and if there is no such item, you return, but that item (that you "undone") remains in the completed section, you have to "undone" it (update its done property).

const selectedItem = event.detail.items[0];
if(selectedItem == null) { return; }

Possible solution:
From the event.detail.items, you know which todo items are selected,
then you have to loop through the todos and set the "done" property to false to the rest of the todos

I created an issue to enhance the selectionChange event to provide the previously selected item(s):
SAP/ui5-webcomponents#367