Skip to content

Commit

Permalink
fix(frontend): style /activities (still buggy)
Browse files Browse the repository at this point in the history
  • Loading branch information
@c0rydoras
c0rydoras committed Oct 2, 2024
1 parent 1d33399 commit b0d8cb7
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 98 deletions.
18 changes: 8 additions & 10 deletions frontend/app/index/activities/edit/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<label hidden for="activity-edit-form">Edit activity</label>
<form
id="activity-edit-form"
class="pl-2"
data-test-activity-edit-form
{{on "submit" this.save}}
>
<div class="card">
<div class="card-header hidden-lg">
<LinkTo @route="index.activities"><FaIcon @icon="chevron-left" /></LinkTo>
</div>
<div class="card-block">
<div class="card grid border">
<div class="card-block gap-2 grid p-2 border-b striped">
<TaskSelection
@initial={{hash task=this.changeset.task}}
@task={{this.changeset.task}}
Expand All @@ -24,7 +22,7 @@
>{{t.task}}</div>
</TaskSelection>
</div>
<div class="card-footer text-right">
<div class="card-footer text-right p-2 striped">
<div class="form-group">
<label hidden for="comment">Comment</label>
<input
Expand All @@ -44,14 +42,14 @@
<CustomerVisibleIcon class="customer-visible-icon" />
{{/if}}
</div>
<div class="form-group checkboxes">
<SyCheckbox
<div class="form-group checkboxes p-2 flex justify-between [&>*]:w-full [&>*]:grid [&>*]:grid-cols-[auto,minmax(0,1fr)] [&>*]:items-center [&>*]:justify-items-start [&>*]:gap-x-2">
<Checkbox
data-test-activity-review
@checked={{this.changeset.review}}
@label="Needs review"
@onChange={{toggle "review" this.changeset}}
/>
<SyCheckbox
<Checkbox
data-test-activity-not-billable
@checked={{this.changeset.notBillable}}
@label="Not billable"
Expand Down Expand Up @@ -85,7 +83,7 @@
</tbody>
</table>
</div>
<div class="card-footer text-right">
<div class="card-footer text-right p-2 border-t flex justify-between striped">
<button
class="btn btn-danger"
type="button"
Expand Down
201 changes: 113 additions & 88 deletions frontend/app/index/activities/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,121 @@
<div class="btn-toolbar btn-toolbar--right form-group">
<button
type="button"
class="btn btn-success"
title="Generate timesheet for all the activities listed above"
{{on "click" this.generateReportsCheck}}
data-test-activity-generate-timesheet
>
Generate timesheet
</button>
</div>
<NavTabs::Button
@onClick={{this.generateReportsCheck}}
title="Generate timesheet for all the activities listed above"
data-test-activity-generate-timesheet
>Generate timesheet</NavTabs::Button>

<div class="activities">
<div class="activities-edit">{{outlet}}</div>
<div class="activities flex flex-row-reverse">
<div
class="activities-edit peer max-lg:[&:not(:empty)]:flex-grow lg:[&:not(:empty)]:basis-1/3"
>{{outlet}}</div>

<div class="activities-list">
<div class="activities-list flex-grow max-lg:peer-[:not(:empty)]:hidden">
{{#if this.activities}}
<table class="table table--striped table--activities">
<tbody>
<table class="table table--striped table--activities w-full">
<tbody class="striped">
{{#each this.sortedActivities as |activity|}}
{{!template-lint-disable no-invalid-interactive}}
<tr
title={{unless activity.transferred "Click to edit"}}
data-test-activity-row
data-test-activity-row-id={{activity.id}}
class="{{if activity.transferred 'transferred' 'pointer'}}
{{if activity.active 'primary'}}
{{if (eq activity.id this.editId) 'selected'}}"
{{on "click" (fn this.editActivity activity)}}
>
<td>
{{moment-format activity.from "HH:mm"}}
-
{{#unless activity.active}}
{{moment-format activity.to "HH:mm"}}
{{/unless}}
</td>
<td
title="{{activity.task.project.customer.name}} > {{activity.task.project.name}} > {{activity.task.name}}"
{{#let (eq activity.id this.editId) as |selected|}}
{{!template-lint-disable no-invalid-interactive}}
<tr
title={{unless activity.transferred "Click to edit"}}
data-test-activity-row
data-test-activity-row-id={{activity.id}}
class="{{if
activity.transferred
'transferred text-foreground-muted'
'cursor-pointer'
}}
{{if
(and activity.active (not selected))
'primary bg-primary/20'
}}
{{if selected 'selected bg-primary text-foreground-primary'}}
{{if
(not
(or
(or activity.transferred activity.active)
(eq activity.id this.editId)
)
)
'striped'
}}
[&>*]:py-1 [&>*]:px-2 shadow-sm"
{{on "click" (fn this.editActivity activity)}}
>
{{#if activity.task}}
<div>
{{activity.task.project.customer.name}}
<strong>&gt;</strong>
{{activity.task.project.name}}
<strong>&gt;</strong>
{{activity.task.name}}
<td>
{{moment-format activity.from "HH:mm"}}
-
{{#unless activity.active}}
{{moment-format activity.to "HH:mm"}}
{{/unless}}
</td>
<td
title="{{activity.task.project.customer.name}} > {{activity.task.project.name}} > {{activity.task.name}}"
>
{{#if activity.task}}
<div>
{{activity.task.project.customer.name}}
<strong>&gt;</strong>
{{activity.task.project.name}}
<strong>&gt;</strong>
{{activity.task.name}}
</div>
{{else}}
<strong>Unknown task</strong>
{{/if}}
</td>
<td title={{activity.comment}}>
<div class="comment-field">{{activity.comment}}</div>
{{#if activity.task.project.customerVisible}}
<CustomerVisibleIcon
class="activity-customer-visible-icon"
/>
{{/if}}
</td>
<td>
<div><SyCheckmark
@checked={{activity.review}}
@highlight={{true}}
/>
Needs review</div>
<div><SyCheckmark
@checked={{activity.notBillable}}
@highlight={{true}}
/>
Not billable</div>
</td>
<td>
{{#if activity.active}}
<DurationSince @from={{activity.from}} />
{{else}}
{{format-duration activity.duration}}
{{/if}}
</td>
<td class="px-4">
<div class="w-full h-full grid place-items-end">
{{#if activity.active}}
<button
type="button"
data-test-stop-activity
class="btn btn-danger"
{{on "click" (fn this.stopActivity activity)}}
>
<FaIcon @icon="stop" @prefix="fas" />
</button>
{{else}}
<button
type="button"
data-test-start-activity
class="btn btn-success"
{{on "click" (fn this.startActivity activity)}}
>
<FaIcon @icon="play" @prefix="fas" />
</button>
{{/if}}
</div>
{{else}}
<strong>Unknown task</strong>
{{/if}}
</td>
<td title={{activity.comment}}>
<div class="comment-field">{{activity.comment}}</div>
{{#if activity.task.project.customerVisible}}
<CustomerVisibleIcon class="activity-customer-visible-icon" />
{{/if}}
</td>
<td>
<div><SyCheckmark @checked={{activity.review}} @highlight={{true}} />
Needs review</div>
<div><SyCheckmark @checked={{activity.notBillable}} @highlight={{true}} />
Not billable</div>
</td>
<td>
{{#if activity.active}}
<DurationSince @from={{activity.from}} />
{{else}}
{{format-duration activity.duration}}
{{/if}}
</td>
<td>
{{#if activity.active}}
<button
type="button"
data-test-stop-activity
class="btn btn-danger"
{{on "click" (fn this.stopActivity activity)}}
>
<FaIcon @icon="stop" @prefix="fas" />
</button>
{{else}}
<button
type="button"
data-test-start-activity
class="btn btn-success"
{{on "click" (fn this.startActivity activity)}}
>
<FaIcon @icon="play" @prefix="fas" />
</button>
{{/if}}
</td>
</tr>
</td>
</tr>
{{/let}}
{{/each}}
</tbody>
</table>
Expand Down Expand Up @@ -166,4 +191,4 @@
}}
>Cancel</button>
</modal.footer>
</SyModal>
</SyModal>

0 comments on commit b0d8cb7

Please sign in to comment.