From 76dc6c863608bf0e0b46f96d6bb5a1e95c000a8f Mon Sep 17 00:00:00 2001 From: Arthur Deierlein Date: Mon, 28 Oct 2024 14:30:04 +0100 Subject: [PATCH] draft: WIP changes TODO: properly split/rebase this --- frontend/app/analysis/index/template.hbs | 106 +++++++++------- .../app/components/async-list/template.hbs | 14 +-- .../app/components/balance-donut/component.js | 10 +- .../app/components/balance-donut/template.hbs | 17 +-- frontend/app/components/card.hbs | 3 + frontend/app/components/card/block.hbs | 3 + frontend/app/components/card/footer.hbs | 3 + .../app/components/sort-header/template.hbs | 9 +- .../statistic-list/column/template.hbs | 4 +- .../components/statistic-list/template.hbs | 41 ++++--- frontend/app/components/table.hbs | 3 + frontend/app/components/table/td.hbs | 1 + frontend/app/components/table/tfoot.hbs | 3 + frontend/app/components/table/th.hbs | 6 + frontend/app/components/table/thead.hbs | 3 + frontend/app/components/table/tr.hbs | 1 + .../worktime-balance-chart/component.js | 45 ++++--- .../app/helpers/balance-highlight-class.js | 4 +- .../app/index/activities/edit/template.hbs | 16 +-- frontend/app/statistics/template.hbs | 2 +- frontend/app/styles/utilities.css | 3 + frontend/app/users/edit/index/template.hbs | 115 +++++++++--------- frontend/app/users/edit/template.hbs | 76 ++++++++---- frontend/app/users/index/template.hbs | 45 ++++--- 24 files changed, 313 insertions(+), 220 deletions(-) create mode 100644 frontend/app/components/card.hbs create mode 100644 frontend/app/components/card/block.hbs create mode 100644 frontend/app/components/card/footer.hbs create mode 100644 frontend/app/components/table.hbs create mode 100644 frontend/app/components/table/td.hbs create mode 100644 frontend/app/components/table/tfoot.hbs create mode 100644 frontend/app/components/table/th.hbs create mode 100644 frontend/app/components/table/thead.hbs create mode 100644 frontend/app/components/table/tr.hbs diff --git a/frontend/app/analysis/index/template.hbs b/frontend/app/analysis/index/template.hbs index 1de613969..5c94948af 100644 --- a/frontend/app/analysis/index/template.hbs +++ b/frontend/app/analysis/index/template.hbs @@ -281,6 +281,7 @@ + {{!-- template-lint-disable table-groups --}} @@ -297,8 +298,8 @@ - - + + Verified by - {{! TODO: clean this up (same styles as sort-header minus [cursor-pointer, whitespace-nowrap]) }} - - - - - - + Rejected + Review + Not billable + Billed + +
RejectedReviewNot billableBilled
@@ -367,7 +367,7 @@ {{#each reports as |report|}} {{! template-lint-disable}} - - - - - - - - - - - - - - + /> + {{/each}} {{#if this._canLoadMore}}
{{report.user.username}}{{moment-format report.date "DD.MM.YYYY"}}{{format-duration report.duration false}}{{report.task.project.customer.name}}{{report.task.project.name}}{{report.task.name}}{{report.user.username}} + {{moment-format + report.date + "DD.MM.YYYY" + }} + {{format-duration + report.duration + false + }} + {{report.task.project.customer.name}} + {{report.task.project.name}} + {{report.task.name}} + {{report.comment}}{{if + >{{report.comment}} + {{if report.verifiedBy report.verifiedBy.username - }} + + + +
- +
- - - + + + -
-
- Total: -
- {{#unless this.data.isRunning}} - {{format-duration this.totalTime false}} + + + Total: - Displaying + {{format-duration + this.totalTime + false + }} + Displaying {{reports.length}} of {{this.totalItems}} - reports - {{/unless}}
-
+ reports + + + + +
{{#each this.exportLinks as |link|}}
+ {{else if @data.isError}} -
-
+

Oops... Something went wrong

@@ -12,12 +11,11 @@
Please try refreshing the page.

-
-
+ {{else if (not @data.value.length)}} -
+ {{yield "empty" @data.value}} -
+ {{else}} {{yield "body" @data.value}} {{/if}} diff --git a/frontend/app/components/balance-donut/component.js b/frontend/app/components/balance-donut/component.js index 7d81c3f6c..b6953356a 100644 --- a/frontend/app/components/balance-donut/component.js +++ b/frontend/app/components/balance-donut/component.js @@ -13,20 +13,20 @@ class BalanceDonutComponent extends Component { return abs(this.args.balance.usedDays / this.args.balance.credit); } - get color() { + get strokeClass() { if (this.args.balance.usedDuration) { - return "primary"; + return "stroke-primary"; } if (this.value > 1 || this.value < 0) { - return "danger"; + return "stroke-danger"; } if (this.value === 1) { - return "warning"; + return "stroke-warning"; } - return "success"; + return "stroke-success"; } radius = 100 / (2 * PI); diff --git a/frontend/app/components/balance-donut/template.hbs b/frontend/app/components/balance-donut/template.hbs index 68746a832..a5edbee30 100644 --- a/frontend/app/components/balance-donut/template.hbs +++ b/frontend/app/components/balance-donut/template.hbs @@ -1,10 +1,10 @@ -
-
{{@title}}
+
+
{{@title}}
-
+
-
+
{{#if @balance.usedDuration}} {{format-duration @balance.usedDuration false}} {{else}} {{#if @balance.credit}} -
{{@balance.usedDays}} of {{@balance.credit}}
+
{{@balance.usedDays}} of {{@balance.credit}}
{{#if (gte @balance.credit 1)}}
{{round (mult this.value 100)}}%
{{/if}} diff --git a/frontend/app/components/card.hbs b/frontend/app/components/card.hbs new file mode 100644 index 000000000..149aad916 --- /dev/null +++ b/frontend/app/components/card.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
\ No newline at end of file diff --git a/frontend/app/components/card/block.hbs b/frontend/app/components/card/block.hbs new file mode 100644 index 000000000..44734a3c1 --- /dev/null +++ b/frontend/app/components/card/block.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
\ No newline at end of file diff --git a/frontend/app/components/card/footer.hbs b/frontend/app/components/card/footer.hbs new file mode 100644 index 000000000..cf29502e5 --- /dev/null +++ b/frontend/app/components/card/footer.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
\ No newline at end of file diff --git a/frontend/app/components/sort-header/template.hbs b/frontend/app/components/sort-header/template.hbs index 38792a362..e001c88af 100644 --- a/frontend/app/components/sort-header/template.hbs +++ b/frontend/app/components/sort-header/template.hbs @@ -1,9 +1,14 @@ {{! template-lint-disable}} - + {{yield}} {{#if this.active}} {{else}} {{/if}} - + \ No newline at end of file diff --git a/frontend/app/components/statistic-list/column/template.hbs b/frontend/app/components/statistic-list/column/template.hbs index 7140b9642..e5192ee71 100644 --- a/frontend/app/components/statistic-list/column/template.hbs +++ b/frontend/app/components/statistic-list/column/template.hbs @@ -1,4 +1,4 @@ - + {{#if (eq @layout "DURATION")}} {{humanize-duration @value false}} {{else if (eq @layout "MONTH")}} @@ -6,4 +6,4 @@ {{else}} {{@value}} {{/if}} - + diff --git a/frontend/app/components/statistic-list/template.hbs b/frontend/app/components/statistic-list/template.hbs index 5bf1a3953..df929295b 100644 --- a/frontend/app/components/statistic-list/template.hbs +++ b/frontend/app/components/statistic-list/template.hbs @@ -28,11 +28,11 @@

Maybe try loosening your filters

{{else}} - - - + + {{#each this.columns as |column|}} {{#if column.ordering}} {{else}} - + {{column.title}} {{/if}} {{/each}} - - + + - {{#each this.columns as |column|}} {{/each}} - - + + - - + + {{#each this.columns as |column index|}} - + {{/each}} - - - -
{{column.title}}
+ {{#let (or row.totalRemainingEffort row.mostRecentRemainingEffort) as |remainingEffort| @@ -85,13 +86,13 @@ /> {{/let}} {{/let}} -
+ {{#if (not index)}} Total: @@ -101,11 +102,11 @@ >{{humanize-duration this.total false}} {{/if}} -
+ + + + {{/if}}
\ No newline at end of file diff --git a/frontend/app/components/table.hbs b/frontend/app/components/table.hbs new file mode 100644 index 000000000..5dc02e662 --- /dev/null +++ b/frontend/app/components/table.hbs @@ -0,0 +1,3 @@ + + {{yield}} +
\ No newline at end of file diff --git a/frontend/app/components/table/td.hbs b/frontend/app/components/table/td.hbs new file mode 100644 index 000000000..d3ec6ada2 --- /dev/null +++ b/frontend/app/components/table/td.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/frontend/app/components/table/tfoot.hbs b/frontend/app/components/table/tfoot.hbs new file mode 100644 index 000000000..efa74effa --- /dev/null +++ b/frontend/app/components/table/tfoot.hbs @@ -0,0 +1,3 @@ + + {{yield}} + diff --git a/frontend/app/components/table/th.hbs b/frontend/app/components/table/th.hbs new file mode 100644 index 000000000..873ae91b0 --- /dev/null +++ b/frontend/app/components/table/th.hbs @@ -0,0 +1,6 @@ + + {{yield}} + \ No newline at end of file diff --git a/frontend/app/components/table/thead.hbs b/frontend/app/components/table/thead.hbs new file mode 100644 index 000000000..30205363f --- /dev/null +++ b/frontend/app/components/table/thead.hbs @@ -0,0 +1,3 @@ + + {{yield}} + diff --git a/frontend/app/components/table/tr.hbs b/frontend/app/components/table/tr.hbs new file mode 100644 index 000000000..b71b9467f --- /dev/null +++ b/frontend/app/components/table/tr.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/frontend/app/components/worktime-balance-chart/component.js b/frontend/app/components/worktime-balance-chart/component.js index 5c61b941b..7490f20b3 100644 --- a/frontend/app/components/worktime-balance-chart/component.js +++ b/frontend/app/components/worktime-balance-chart/component.js @@ -2,7 +2,12 @@ import Component from "@glimmer/component"; import moment from "moment"; import humanizeDuration from "timed/utils/humanize-duration"; -const FONT_FAMILY = "Source Sans Pro"; +// TODO: take this from tailwind.config.js +const FONT_SANS = ["Source Sans Pro", "sans-serif"]; +const FONT_MONO = ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"]; + +const cssvar = (name) => + getComputedStyle(document.documentElement).getPropertyValue(name); export default class WorktimeBalanceChart extends Component { type = "line"; @@ -26,20 +31,24 @@ export default class WorktimeBalanceChart extends Component { get options() { return { - lineTension: 0, + tension: 0, + // lineTension: 0, legend: { display: false }, layout: { padding: 10 }, elements: { line: { - borderColor: "rgb(91, 142, 219)", + tension: 0, + borderColor: `rgb(${cssvar("--primary")})`, backgroundColor: "transparent", borderWidth: 2, }, point: { - borderColor: "rgb(91, 142, 219)", - backgroundColor: "rgb(255, 255, 255)", - hoverBackgroundColor: "rgb(0,0,0)", + borderColor: `rgb(${cssvar("--secondary")})`, + backgroundColor: `rgb(${cssvar("--background")})`, + hoverBackgroundColor: `rgb(${cssvar("--background-muted")})`, + hoverBorderColor: `rgb(${cssvar("--primary")})`, borderWidth: 2, + hoverBorderWidth: 2, radius: 3.5, hoverRadius: 3.5, hitRadius: 10, @@ -52,8 +61,9 @@ export default class WorktimeBalanceChart extends Component { callback(value) { return [value.format("DD"), value.format("dd").toUpperCase()]; }, - fontFamily: FONT_FAMILY, - fontColor: "rgb(180, 180, 180)", + fontFamily: FONT_MONO, + fontColor: `rgb(${cssvar("--foreground-muted")})`, + fontSize: 18, }, gridLines: { drawBorder: false, @@ -67,6 +77,8 @@ export default class WorktimeBalanceChart extends Component { display: false, }, gridLines: { + zeroLineColor: `rgb(${cssvar("--foreground-muted")})`, + color: `rgb(${cssvar("--foreground-muted")})`, drawBorder: false, drawTicks: false, borderDash: [5, 5], @@ -75,13 +87,18 @@ export default class WorktimeBalanceChart extends Component { ], }, tooltips: { + // TODO: dry this so foreground-mid doesn't need to be hardcoded + backgroundColor: `color-mix(in oklab, rgb(${cssvar( + "--foreground" + )}), rgb(${cssvar("--foreground-muted")}))`, // foreground-mid + titleFontColor: `rgb(${cssvar("--background")})`, + bodyFontColor: `rgb(${cssvar("--background-muted")})`, displayColors: false, - cornerRadius: 4, - bodyFontFamily: FONT_FAMILY, - bodyFontSize: 12, - titleFontFamily: FONT_FAMILY, - titleFontSize: 14, - titleFontStyle: "normal", + cornerRadius: 2, + bodyFontFamily: FONT_MONO, + bodyFontSize: 16, + titleFontFamily: FONT_SANS, + titleFontSize: 18, titleMarginBottom: 10, xPadding: 10, yPadding: 10, diff --git a/frontend/app/helpers/balance-highlight-class.js b/frontend/app/helpers/balance-highlight-class.js index c3ac54446..bd4d744a4 100644 --- a/frontend/app/helpers/balance-highlight-class.js +++ b/frontend/app/helpers/balance-highlight-class.js @@ -21,9 +21,9 @@ export function balanceHighlightClass([balance]) { const minutes = moment.isDuration(balance) ? balance.asMinutes() : 0; if (minutes > 0) { - return "color-success"; + return "text-success"; } else if (minutes < 0) { - return "color-danger"; + return "text-danger"; } return ""; diff --git a/frontend/app/index/activities/edit/template.hbs b/frontend/app/index/activities/edit/template.hbs index 3d3731448..e556a2626 100644 --- a/frontend/app/index/activities/edit/template.hbs +++ b/frontend/app/index/activities/edit/template.hbs @@ -5,8 +5,8 @@ data-test-activity-edit-form {{on "submit" this.save}} > -
-
+ + {{t.task}}
-
-
+ +
-
-
+ + -
-
+ + diff --git a/frontend/app/statistics/template.hbs b/frontend/app/statistics/template.hbs index a27454029..1c56c9058 100644 --- a/frontend/app/statistics/template.hbs +++ b/frontend/app/statistics/template.hbs @@ -2,7 +2,7 @@ {{else}} -

Statistics

+

Statistics

+
+

General information

-
-
- - + + +
+ @@ -39,104 +40,100 @@ {{/if}} -
Email: {{this.model.email}}
-
-
+ + +

Employments

-
-
+ + {{#if this.employments.isRunning}} -
+ -
+ {{else}} {{#let this.employments.lastSuccessful.value as |employments|}} {{#if employments}} - - - - - - - - - +
LocationPercentageStartEnd
+ + + Location + Percentage + Start + End + + {{#each employments as |employment|}} - - - - - - + }} + {{/each}} -
{{employment.location.name}}{{employment.percentage}}%{{moment-format employment.start "DD.MM.YYYY"}}{{if + + {{employment.location.name}} + {{employment.percentage}}% + {{moment-format employment.start "DD.MM.YYYY"}} + {{if employment.end (moment-format employment.end "DD.MM.YYYY") "-" - }}
+ {{else}} -
-
+

No employments found...

-
-
+ {{/if}} {{/let}} {{/if}} -
-
+ +

Absences

-
-
+ + {{#if this.absences.isRunning}} -
+ -
+ {{else}} {{#let this.absences.lastSuccessful.value as |absences|}} {{#if absences}} - - - - - - - - +
TypeDateComment
+ + + Type + Date + Comment + + {{#each absences as |absence|}} - - - - - + + {{absence.absenceType.name}} + {{moment-format absence.date "DD.MM.YYYY"}} + {{absence.comment}} + {{/each}} -
{{absence.absenceType.name}}{{moment-format absence.date "DD.MM.YYYY"}}{{absence.comment}}
+ {{else}} -
-
+

No absences found...

-
-
+ {{/if}} {{/let}} {{/if}} -
-
+ +
diff --git a/frontend/app/users/edit/template.hbs b/frontend/app/users/edit/template.hbs index 28c07e501..ab4ab7944 100644 --- a/frontend/app/users/edit/template.hbs +++ b/frontend/app/users/edit/template.hbs @@ -1,7 +1,9 @@ -{{#if (can 'read user' this.model)}} -
+{{#if (can "read user" this.model)}} +
-

{{this.model.fullName}}

+

{{this.model.fullName}}

{{#if this.data.isRunning}} @@ -10,40 +12,54 @@
{{else}} {{#unless this.model.activeEmployment.isExternal}} -
-

Worktime balance

+

Worktime balance

-
- {{#let this.data.lastSuccessful.value.worktimeBalanceLastValidTimesheet as |balance|}} -

- {{moment-format balance.date 'DD.MM.YYYY'}} +
+
+ {{#let + this.data.lastSuccessful.value.worktimeBalanceLastValidTimesheet + as |balance| + }} +

+ {{moment-format balance.date "DD.MM.YYYY"}}

-
+
{{format-duration balance.balance false}}
{{/let}}
- +
-
- {{#let this.data.lastSuccessful.value.worktimeBalanceToday as |balance|}} -

Today

-
+
+ {{#let + this.data.lastSuccessful.value.worktimeBalanceToday + as |balance| + }} +

Today

+
{{format-duration balance.balance false}}
{{/let}}
-
+
{{#let this.data.lastSuccessful.value.absenceBalances as |balances|}} {{#each balances as |balance index|}} {{/unless}} {{/if}} +
@@ -68,4 +98,4 @@
{{else}} -{{/if}} +{{/if}} \ No newline at end of file diff --git a/frontend/app/users/index/template.hbs b/frontend/app/users/index/template.hbs index 2e514cc44..c029a3b6a 100644 --- a/frontend/app/users/index/template.hbs +++ b/frontend/app/users/index/template.hbs @@ -47,22 +47,20 @@ {{#if (eq section "empty")}} -
-
+

No users to display

Maybe try loosening your filters

-
-
+ {{else if (eq section "body")}} - - - - - - + + Name + Percentage + Worktime per day + Current worktime balance + - - + {{user.fullName}} {{#if user.activeEmployment}} - - + }} {{else}} - + User has no active employment {{/if}} - - + +
NamePercentageWorktime per dayCurrent worktime balance
{{user.fullName}}{{user.activeEmployment.percentage}}%{{format-duration + {{user.activeEmployment.percentage}}% + {{format-duration user.activeEmployment.worktimePerDay false - }}User has no active employment + {{format-duration user.currentWorktimeBalance.balance false}} -
{{/if}}