New material page

[manuelmeister]

I've created a new version of the material list that is more optimized for the different uses. It is not yet published and should serve as an ground for discussion. I tried optimizing the wording and visual styling so it makes it easier to understand where the data lives. (Period / Material Node)

I'm not yet happy with the period material (our attempt to fix period material, aka "reusable material" from eCamp2). But I would point further discussion to the issue #1245

It is not optimized for speed and is not yet polished for merging. This should serve as POC for my new layout.

Relates to #3576

[github-actions]

⛔ Feature branch deployment currently inactive.

If the PR is still open, you can add the deploy! label to this PR to trigger a feature branch deployment.

[manuelmeister]

What is the problem with this print test? Can someone fix it, so it isn't flakey anymore. I already tried in #3526 but we had to roll back, because firefox did not like it.

[usu]

What is the problem with this print test? Can someone fix it, so it isn't flakey anymore. I already tried in #3526 but we had to roll back, because firefox did not like it.

Did the tests run successfully on your local machine?

[manuelmeister]

In #3526 yes
But in this PR, I did not change anything print related.🤔

[carlobeltrame]

Some thoughts when trying it out on the deployment:

• It confuses me that when adding a new material item (both for activity material and period material), this item is added to the top of the list. In long material lists, my entered data vanishes out of sight. I was genuinely confused to see the UI jump, and then the displayed data of the bottommost item didn't match what I entered.
• I'm not sure about the longer button labels. For one, most camps don't have multiple periods, so could we maybe use a different label, e.g. "Add general material" or "Add to camp" or "Add camp material" in single-period camps?
  • At the same time, I feel like the text on the buttons is too long anyways (on desktop). Could we maybe change the headings so that the buttons can just say "Add" again? (In the schedule entry, if a user changes the instanceName, their chosen instanceName should of course be displayed as the heading. But as long as they don't do so, it could say "Activity material" there by default)
• Now that the material lists are viewable in isolation, I would like to see individual Excel export buttons for each list.
• I don't really like the appearance of the four individual input fields stuck next to each other for creating just a single material item entry. It feels like a lot of effort to create material items. Here are some questions which come to my mind:
  • Is there any way in Google Material Design to simplify the appearance of these fields?
  • Is there anything like Bootstrap's input groups?
  • On mobile, could multiple inputs (not all of them, maybe just amount and unit) be on the same line?
  • On desktop, if you try to forget about the eCamp2-like material table for a moment, how would you design a listing of material items, e.g. in the spirit of refactoring UI (keep in mind this view is not just for editing, but also for reading)?
  • Could we provide an autocomplete dropdown for the "unit" input, or offer any guidance on which material list to put it into (e.g. using AI 😜)?
  • Would it make sense to reorder the inputs so that the article input comes first?
  • Could some of the inputs appear only on demand?
  • Could we add keyboard shortcuts for power users?

[usu]

Haven't read the comments from @carlobeltrame by purpose, to not let me influence. With the risk, that some comments might be double.

• Is reducing network requests scope of this PR? Still seems like a lot of requests are being sent.
• The individual lists split between periods, but the overall view does not. Any specific intention on this?
• The delete button takes away quite some precious space.
• Same the side bar. Should that rather be a dropdown beneath the title (similar as on the picasso with the periods)? Then we could also show the general overview directly, avoid 2 clicks to show the material list.
• On dev, we disallow editing materials from activities. What was our reason to do so?
• On mobile (and md) devices, the last column (period & activity) is in most cases not really readable.

[usu]

Found the issue with the e2e tests

[manuelmeister]

@carlobeltrame Thank you for your review. I tried answering all questions/remarks:

• It confuses me that when adding a new material item (both for activity material and period material), this item is added to the top of the list. …

  I agree. I can try to rewrite the datatable to transition the rows.

• I'm not sure about the longer button labels. For one, most camps don't have multiple periods, so could we maybe use a different label, e.g. "Add general material" or "Add to camp" or "Add camp material" in single-period camps?

  I did some tests and the people were confused, that there is a difference is between activity material and period material. That is why I want to clarify more where you will add the material. I agree to change the wording if there aren't multiple periods.

  I didn't think about the instance name at all. Most of the time the view would be too short anyway to display this. On mobile we don't have space anyway. I will add it to the desktop version and add it readonly to the edit dialog on mobile.

• Now that the material lists are viewable in isolation, I would like to see individual Excel export buttons for each list.

  Would be a great improvement, if this PR is merged we can create a ticket for an individual Excel export.

• don't really like the appearance of the four individual input fields stuck next to each other for creating just a single material item entry. It feels like a lot of effort to create material items.
  …

  I agree. There is no official guidance on combining multiple fields, but I already tried this with the period field on the CampCreate view and I liked the outcome. The problem is, that this is a table and the creation row is a table row. With this my design capabilities are greatly limited, as I don't want to destroy the semantic using a different display mode. My attempt coloring the whole row gray, looked quite bad.

  I've already got the feedback, that unit and quantity are very developer centric (normalized fields) and cumbersome. But I don't want to deviate from these fields so late in development. (also I like normalized data)

  • Generally I like the way the table rows are shown on desktop as well as mobile, as it really is a real table that you can sort, visually compare and navigate accessible.
    On mobile I could try the two fields next to each other in the edit pane.

  • I'm not sure about reordering the inputs, as it is not the way ingredients list are written. If we decide to merge unit and quantity, then I could imagine putting it after the article.

  • This would be cool, but I don't think this would make sense to include in this PR. Also I don't know if it would be worth the effort. I think, if we implement AI somewhere, then I imagine it being useful writing text and not data entry.

  • Again with the table limitation there would be close to no benefit. I don't want to deviate from this table editing experience on desktop.

  • Could you please provide specific examples of where you envision keyboard shortcuts being useful?

[manuelmeister]

@usu thank you for your review. I tried answering all questions/remarks:

• Is reducing network requests scope of this PR? Still seems like a lot of requests are being sent.

  Nope. I tried to improve the performance, but no to the whole extent. I think this should be solved in a separate issue.

• The individual lists split between periods, but the overall view does not. Any specific intention on this?

  Yes. I tried the periodswitcher but was then irritated when I could not see everything at once on the detail pages. For the overview I thought that it would be helpful to see the whole list. Also this way it would be more clear where you attach the material item.

• The delete button takes away quite some precious space.

  I agree. But I struggled even more with the add button. Can you post a screenshot where the delete button is too large compared to the add action in the same column?

• Same the side bar. Should that rather be a dropdown beneath the title (similar as on the picasso with the periods)? Then we could also show the general overview directly, avoid 2 clicks to show the material list.

  On mobile I think it is necessary anyway to have such a list and not directly going to the overview page. On desktop I just thought that it may be beneficial to not load everything (as the page gets unresponsive) and instead let the user choose what should be shown.

• On dev, we disallow editing materials from activities. What was our reason to do so?

  I don't know anymore and don't think it is sensible. Maybe anyone else remembers.

• On mobile (and md) devices, the last column (period & activity) is in most cases not really readable.

  Yes sadly. I tried to improve the overall layout on mobile but struggled, as the space is very limited. I think I'll add an overview in the detail pane about in which activities and instances the material item is defined. I think, sorting by activity is not that common on mobile and the information is not necessary. Otherwise we need to move away from the list/tablerow layout to a card layout which I think is worse.

[manuelmeister]

How should I continue with this PR? Do you agree with my suggestions, or should I try out something else first, before I cleanup and make it ready to be merged.

[carlobeltrame]

Thanks for the thorough answers, I agree with practically everything.

However, I don't agree to keep the table at all costs. The table is the main source of clunkiness for me, and a table in a UI is often a sign that devs have "just" recreated the database structure in UI. If a person would manually write a material list for their camp, I doubt they would start by drawing a table grid on the paper, they would write it more like a bullet list with tabstops after the quantity/unit (at least I would). On ecamp, I would also never want to filter or sort the list by quantity or unit. I would either sort alphabetically, or by activity/period, and filter by material list, nothing else. For the filtering, you already went for a different solution (sidebar) than how classic datatables would do it (dropdown menu in column headers). So if you offer any way to sort, e.g. via two buttons, I see no real reason for the list to be a table anymore.

This is just a suggestion to try to experiment further, I'm not saying my proposal is perfect or even close to the solution. I'm also fine with merging this in the current state (after you fix what you wanted to fix above). It's just that this redesign PR hasn't triggered the "wow" effect for me, like your other redesign PRs have done. I don't quite see the redesigned material list as finished after this PR. But it sure is an improvement already.

[BacLuc]

It looks good, thank you for the proposal.

1. I would remove the List field on the view of the individual material lists. Adding an item adds it to the chosen list.
2. A agree partially with cosinus about not using a table, but it makes it easy to allow for the current 2 sorting orders i think of (by activity/period and alphabetically by name. And if we think of another one, then the table view is better than 3 buttons.
3. Why did you group the individual lists by period, but the overall view not?
4. I don't know if the benefit is that big of allowing to edit the name of the list here inline. And it increases the complexity (e.g. ACL have to be checked)
5. On mobile i can hardly see the activity name. Maybe we need to move away from the table layout there and use a 2 line layout for one row, or another indication of the activity. (Only category and number is not enough i think)
6. I also think that the excel of the individual lists should be downloadable.
7. On first page, i would also expect the button to download the excel that i have the least clicks possible to download the excel.

I think we need to agree how we want to indicate the activity/period, and then you could make this PR merge ready.

[BacLuc]

why do we need this change?

[manuelmeister]

Because this line (blame) was non sensical to begin with and written by me 🫣

[pmattmann]

I like it! I see progress compared to the previous version.
Especially the possibility to display a specific material list makes it clearer.

A few thoughts from my side:

• The first overview of all lists has little additional value compared to when you are in a list. So you could jump directly to the 'General overview' view.
• I would also subdivide 'General overview' by periods.
• Excel export also for individual lists
• After adding an entry to a stock list, the field 'MaterialList' is no longer pre-populated.
• [Delete] and [Add to period] buttons are extremely large
• Maybe we can adjust the order of the columns:
  • Item
  • quantity
  • Unit (default; Stk; in future maybe automatic guess depending on the article)

[manuelmeister]

Core Meeting Discussion

Create a reduced pr with the following subset, to fasttrack improvements:

• Aside Navigation
• General Overview
• Single Lists

[carlobeltrame]

Is there stuff worth keeping in here which wasn't covered in #3797? Or can we close this?

[manuelmeister]

@carlobeltrame I would like to keep it until I've implemented all improvements.

[BacLuc]

referenced in an issue