Instead of having to type in exactly the name of events or shifts and
then hope you remembered it right, replace these interactions with the
custom select component that gives a complete list of the available
choices and allows quickly searching for the right one.
When editing the slots of events and shifts there are certain situations
where the event or shift a slot should belong to becomes unclear or
difficult to reliably assign. For example when adding a new slot in the
UI it may be desirable to do so before the user has input the event
or shift the slot should belong to.
In these cases, not being able to store the slot into the schedule makes
the UI logic needlessly complicated. Allow slots to be added that do
not have its assiated relation linked up to make editing and handling
such scenarios easier.
The selection of locations, events, roles, shifts and users using the
native <select> element makes for awkward and difficult interactions.
Add an alternative select control that fixes the issues with the poor
handling and navigation of the control when having many options.
The custom select component can handle the selection of either one or
many entity from a ClientMap of entiteis with a name. Typing into the
text box searches the entities by name, arrow keys can navigate and
enter confirms the chosen entity by toggling it's presence in the
selection.
Instead of merging overlapping events and shifts when displaying them in
the timetable which causes a very confusing display, add new rows when
events overlap so that each event can be fully displayed without any
overlapping in the table.
Use a single mutable location, event, slot, etc, for each unique
resource that keeps track of the local editable client copy and
the server copy of the data contained in it.
This makes it much simpler to update these data structures as I can take
advantage of the v-model bindings in Vue.js and work with the system
instead of against it.
Rename accounts to users to be consistent with the new naming scheme
where account only referes to the logged in user of the session and
implement live updates of users via a user store which listens for
updates from the event stream.
The hour headers indicate the time on the left line of the cell, this
makes them confusing to read. Shift the displayed hour to be in the
middle of the left line of the cell so that it is clear which line is
the start of which hour.
Start component names with the kind of element it creates on the page
(button, input, table, card, etc), then follow it with an hierarchy like
set of parts describing what part of the system it operates on.
This makes related components stick together in the directory listing of
components and auto-complete work better.
Use the ClientSchedule data structure for deserialising and tracking
edit state on the client instead of trying to directly deal with the
ApiSchedule type which is not build for ease of edits or rendering.
Rename and refactor the types passed over the API to be based on an
entity that's either living or a tombstone. A living entity has a
deleted property that's either undefined or false, while a tombstone
has a deleted property set to true. All entities have a numeric id
and an updatedAt timestamp.
To sync entities, an array of replacements are passed around. Living
entities are replaced with tombstones when they're deleted. And
tombstones are replaced with living entities when restored.
The EventCard logic assume interestedIds not being present means the
account can't set events as interested. Fix this logic by checking if
the account is valid instead and always have interestedIds present on
the account store.
Some functions in luxon default to the system's locale while other
functions default to "en-US". Explicitly set the locale everywhere
the luxon objects are created to avoid possible mismatches and
unexpected behaviour should the system's locale be different.
Replace the convoluted useAccountSession composable with a pinia store
that in addition allows for the consolidation of all session related
functions to grouped into one module.
Render the timeslots as an editable table of times with associated
event. When the event it's linked to is edited the time slot is removed
from the original event it belonged to and added to the possibly new
event it now belongs to. This gives a somewhat intutive editing
experience when editing time slots linked to events with multiple times.
Add allowedAccountTypes page metadata which the authenticated middleware
uses to further restrict the types of accounts that can access the page.
If the account type is insufficent to access the page it will return an
HTTP 403 Forbidden status, which is rendered using the error page.
Parse the iso date strings into millseconds from the unix epoch and use
that through the timetable logic instead of reparsing the strings over
and over.
If a user logs out from a device the expectation should be that device
no longer having any association with the user's account. Any existing
push notifications should thefore be removed on server. For this reason
tie push notifications to a session, and remove them when the session is
deleted.
Provide a basic account system with login and server side session store
identified by a cookie. Upon successful login a signed session cookie
is set by the server with the session stored on the server identifying
which account it is logged in as. The client uses a shared useFetch on
the session endpoint to identify if it's logged in and which account it
is logged in as, and refreshes this when loggin in or out.
