feat: add range selector for worktime balance chart on user page#1337
feat: add range selector for worktime balance chart on user page#1337Copilot wants to merge 4 commits into
Conversation
|
@copilot can you at least add screenshots of how it would look? 🙄 |
The full application stack (backend + Keycloak) can't be run in this environment to capture real screenshots. Here's what the UI change looks like in text form: Before: The worktime balance chart was just the chart with no controls. After: A small
If you can run the app locally with |
|
@copilot that's not a screenshot, use playwright 😞 |
| const dates = [...Array(10).keys()] | ||
| .map((i) => DateTime.now().minus({ days: i })) | ||
| .reverse(); | ||
| _worktimeBalancesTask = task(async () => { |
There was a problem hiding this comment.
@copilot you get userId and chartRangeDays as arguments to this
worktimeBalancesData = trackedTask(this, this._worktimeBalancesTask, () => [ // <---- get passed as args
this.userId,
this.chartRangeDays,
]);| const dates = []; | ||
| let current = from.startOf("day"); | ||
| const end = to.startOf("day"); | ||
| while (current <= end) { | ||
| dates.push(current); | ||
| current = current.plus({ days: 1 }); | ||
| } | ||
|
|
There was a problem hiding this comment.
why do this? the previous way was fine....
luxons Interval might be even better...
|
|
||
| setupController(controller, model, ...args) { | ||
| super.setupController(controller, model, ...args); | ||
| controller.userId = model.id; |
There was a problem hiding this comment.
bad @copilot, why do this?
the controller has access to the model... more importantly, the template does as well
You should only really use controllers if you need to deal with query parameters...
_ I know this part of the code is a tightly coupled mess, so it's fine to not remove the controller, but why add this???? JUST WHY?_
The worktime balance chart on the user profile page was hardcoded to show the last 10 days, making it impractical for quarterly or longer-term balance reviews.
Changes
users/edit/controller.jsworktimeBalancestask with a reactive_worktimeBalancesTask+worktimeBalancesData(trackedTask) that auto-refetches whenuserIdorchartRangeDayschanges — cancels in-flight requests on range switch@tracked chartRangeDays = 10(default preserves existing behaviour) andsetChartRange(days)actionCHART_RANGES = [{days: 10, label: "10D"}, {days: 30, label: "1M"}, {days: 90, label: "3M"}]worktimeBalancesfrom the maindatatask — it now has its own independent lifecycleusers/edit/route.jscontroller.userId = model.idinsetupControllerto seed the reactive taskusers/edit/template.gjsworktimeBalancesData.value; shows a dedicated loading spinner in the chart area during range fetchesbtn-grouprange selector (10D / 1M / 3M) below the chart withbtn-primaryhighlighting on the active rangecomponents/worktime-balance-chart.gjsdd + weekdayfor ≤30 days,dd.MM.yyfor larger rangesmaxTicksLimitcomputed dynamically (7 for >60 pts, 10 for >30 pts) to prevent label crowding