Streamline UI for creating activities #2585
Conversation
So back works properly..
... event if the feature is not enabled
I changed how the backend handles that...
|
This branch has some commits from other branches listed, but it should merge nicely. I have two test failures that I couldn't resolve today:
|
|
Review from clicking around: edit activity menuReally nice! When it's a one-time-activity, it still says "Only this activity" which was a bit confusing to me. I first thought that it's part of a series, but just didn't let me edit the series (hence also linking me to manage activities), as the "only this activity" sort of implied there could be more. So, maybe if it's a one-time-activity it just says "This activity" instead of "Only this activity" ... perhaps having a little icon to show that something is part of a series is useful too? also, should disable the edit icon when in preview mode. activity create modalthe place could use the place list looks a random order? couldn't tell by looking, and no autocomplete feature (which is probably needed for some groups). after creating, if it wasn't visible on the page behind me, it felt like nothing had happened, ideally we might scroll to it, but maybe a toast is good enough, to give some indication something happened. |
| unelevated | ||
| padding="0px 13px" | ||
| :title="$t('BUTTON.CREATE')" | ||
| > |
There was a problem hiding this comment.
I don't love the non-round-ness of this button, the "place edit" circular button looks nicer to me. I don't think this needs changing though, would make more sense as a general UI-rationalization.
| :options="places.map(({ name, id, placeType }) => ({ label: name, value: id, icon: getPlaceTypeById(placeType).icon }))" | ||
| :label="$t('CREATEACTIVITY.PLACE')" | ||
| emit-value | ||
| map-options |
There was a problem hiding this comment.
add outline as in other comment.
There was a problem hiding this comment.
... and maybe ordered
... and maybe autocomplete
There was a problem hiding this comment.
... or even better, if we can make a PlaceSelect component - such that it can be used for the activity filter too (that already has autocomplete, ordering, and "show favourite places at the top" feature), all of which would also be useful here.
your one has the added "place type icon" feature which would also be nice for the activity filter.
| onSuccess () { | ||
| isOpen.value = false | ||
| }, | ||
| }) |
There was a problem hiding this comment.
I think I did use this pattern in places (passing the opts like onSuccess through), I actually came to prefer using the mutateAsync function, then having a local function call it, e.g.
const {
mutateAsync: createActivity,
status: createActivityStatus,
reset: resetNewActivity,
} = useCreateActivityMutation()
async function saveNewActivity (data) {
await createActivity(data)
isOpen.value = false
}... which can then keep the onSuccess usable inside the mutation definition if there is a reason to do something at that level (which there sometimes is).
(Additionally, the non-async mutate function can take options, including onSuccess, but with a caveat, which is in-part what led me to prefer the async method)
There was a problem hiding this comment.
(... not suggesting we need to change the style right now though)
|
Thanks, good to know! I made some changes, gonna fix the tests and then merge :) |
Codecov Report
@@ Coverage Diff @@
## master #2585 +/- ##
==========================================
+ Coverage 76.43% 76.86% +0.42%
==========================================
Files 360 362 +2
Lines 38005 38480 +475
Branches 1868 1899 +31
==========================================
+ Hits 29048 29576 +528
+ Misses 8957 8904 -53
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
Adds a button to create new activities and series on the group activities page! Behavior is quite similar to the "Manage Activities" page, in fact I reused some of the components.
Each activity also now has a pencil button for editing!
Creating new activities
You click the "plus" button, then select the activity type. A dialog opens, select the place and if a series should be created.
streamline.webm
Editing activities
Click the small "pencil" icon on an activity, then choose from the menu if you want to edit the activity or the whole series (only if the activity is part of a series). There's also the option to jump to the "Manage Activities" page of the store for better overview.
streamline.edit.webm