adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve design for time entries index export

Browse Source
This commit is contained in:
Gregor Vostrak
2024-12-08 18:32:55 +01:00
committed by Constantin Graf
parent 4281736a6d
commit e308ca78b1
6 changed files with 196 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/Api/V1/TimeEntryController.php
View File

@@ -241,7 +241,9 @@ class TimeEntryController extends Controller
]);
$request = Gotenberg::chromium(config('services.gotenberg.url'))
->pdf()
->pdfa('PDF/A-3b')
->assets(
Stream::path(resource_path('pdf/Outfit-VariableFont_wght.ttf'), 'outfit.ttf'),
)
->margins(0.39, 0.78, 0.39, 0.39)
->paperSize('8.27', '11.7') // A4
->footer(Stream::string('footer', $footerHtml))

2
app/Service/ColorService.php
View File

@@ -33,7 +33,7 @@ class ColorService
private const string VALID_REGEX = '/^#[0-9a-f]{6}$/';
public function getRandomColor(string $seed = null): string
public function getRandomColor(?string $seed = null): string
{
if ($seed !== null) {
srand(crc32($seed));

4
resources/js/Pages/Reporting.vue
View File

@@ -198,7 +198,9 @@ async function downloadExport(format: ExportFormat) {
'Export successful',
'Export failed'
);
window.open(response.download_url, '_blank')?.focus();
if (response?.download_url) {
window.open(response.download_url as string, '_blank')?.focus();
}
}
}
const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();

5
resources/js/Pages/ReportingDetailed.vue
View File

@@ -233,7 +233,9 @@ async function downloadExport(format: ExportFormat) {
'Export successful',
'Export failed'
);
window.open(response.download_url, '_self')?.focus();
if (response?.download_url) {
window.open(response.download_url as string, '_blank')?.focus();
}
}
}
</script>
@@ -252,6 +254,7 @@ async function downloadExport(format: ExportFormat) {
<ReportingExportButton
:download="downloadExport"></ReportingExportButton>
</MainContainer>
<div class="py-2.5 w-full border-b border-default-background-separator">
<MainContainer
class="sm:flex space-y-4 sm:space-y-0 justify-between">

57
resources/views/reports/time-entry-aggregate/pdf.blade.php
View File

@@ -72,6 +72,10 @@
color: #18181b
}
table {
font-size: 14px;
}
thead {
border-bottom: 1px #d4d4d8 solid;
}
@@ -90,8 +94,15 @@
background-color: #fafafa;
}
.table-wrapper {
border: 1px solid #d4d4d8;
border-radius: 8px;
overflow: hidden;
width: calc(100% - 2px)
}
table tr {
border-bottom: 1px #e4e4e7 solid
border-bottom: 1px #e4e4e7 solid;
}
table tr:last-of-type {
@@ -104,18 +115,6 @@
padding: 6px 12px;
}
.range {
font-size: 24px;
font-weight: bold;
}
.table-wrapper {
border: 1px solid #d4d4d8;
border-radius: 8px;
overflow: hidden;
width: calc(100% - 2px)
}
.data-table {
break-after: auto;
}
@@ -147,7 +146,6 @@
<div class="table-wrapper">
<div
style="background-color: #fafafa; padding: 5px 14px; border-bottom: 1px #d4d4d8 solid; display: flex; gap: 20px;">
<div style="padding: 8px 12px; border-radius: 8px;">
@@ -187,11 +185,18 @@
<tr>
<td style="display: flex; align-items: center;">
<div style="width: 12px; height: 12px; border-radius: 50%; background-color: {{
$group1Entry['color'] ?? $group1Entry['key'] ? $colorService->getRandomColor($group1Entry['key']) : '#CCCCCC'
$group1Entry['color'] ?? ($group1Entry['key'] ? $colorService->getRandomColor($group1Entry['key']) : '#CCCCCC')
}};">
</div>
<span style="padding-left: 8px;">
{{ $group1Entry['description'] ?? $group1Entry['key'] ?? 'No '.Str::lower($group->description()) }}
@if($group->is(\App\Enums\TimeEntryAggregationType::Billable))
{{ $group1Entry['key'] === '1' ? 'Billable' : 'Non-billable' }}
@else
{{ $group1Entry['description'] ?? $group1Entry['key'] ?? 'No '.Str::lower($group->description()) }}
@endif
</span>
</td>
<td style="text-align: left;">
@@ -225,18 +230,18 @@
@foreach($aggregatedData['grouped_data'] as $group1Entry)
<div class="data-table">
<h2 class="no-break"
style="padding-top: 16px; padding-bottom: 8px; font-size: 20px; font-weight: 600; padding-left: 6px; color: #3f3f46;">
@if($group1Entry['key'])
style="padding-top: 16px; padding-bottom: 8px; font-size: 16px; font-weight: 600; padding-left: 6px; color: #3f3f46;">
@if($group->is(\App\Enums\TimeEntryAggregationType::Billable))
{{ $group1Entry['key'] === '1' ? 'Billable' : 'Non-billable' }}
@else
<span style="color: #a1a1aa;">
{{ $group->description() }}:
</span>
{{ $group->description() }}:
</span>
{{ $group1Entry['description'] ?? $group1Entry['key'] ?? 'No '.Str::lower($group->description()) }}
@endif
{{ $group1Entry['description'] ?? $group1Entry['key'] ?? 'No '.Str::lower($group->description()) }}
</h2>
<div class="table-wrapper">
<table style="width: 100%;">
<thead>
<tr>
@@ -266,7 +271,11 @@
@endphp
<tr>
<td>
{{ $group2Entry['description'] ?? $group2Entry['key'] ?? '-' }}
@if($subGroup->is(\App\Enums\TimeEntryAggregationType::Billable))
{{ $group2Entry['key'] === '1' ? 'Billable' : 'Non-billable' }}
@else
{{ $group2Entry['description'] ?? $group2Entry['key'] ?? '-' }}
@endif
</td>
<td>
{{ $interval->format($duration) }}

205
resources/views/reports/time-entry-index/pdf.blade.php
View File

@@ -9,9 +9,61 @@
<meta charset="utf-8" />
<title>Report</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
@font-face {
font-family: 'Outfit';
src: url('outfit.ttf');
}
body {
font-family: 'Outfit', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #18181b
}
table {
@@ -22,71 +74,118 @@
background-color: #eee;
}
h1 {
font-size: 35px;
font-weight: bold;
.table-wrapper table th {
background-color: #fafafa;
}
h2 {
font-size: 20px;
font-weight: bold;
.table-wrapper {
border: 1px solid #d4d4d8;
border-radius: 8px;
overflow: hidden;
width: calc(100% - 2px)
}
.range {
font-size: 24px;
font-weight: bold;
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
.data {
margin-top: 40px;
thead {
border-bottom: 1px #d4d4d8 solid;
}
tfoot {
border-top: 1px #d4d4d8 solid;
}
table th, table tfoot td {
font-weight: 500;
padding: 6px 12px;
color: #18181b;
}
table td, table th{
font-size: 12px;
}
table tr {
border-bottom: 1px #e4e4e7 solid;
}
table tr:last-of-type {
border-bottom: none;
}
table tr td {
font-weight: 400;
color: #3f3f46;
padding: 6px 12px;
}
</style>
</head>
<body>
<h1>Detailed Report</h1>
<hr>
<div class="range">
<span>{{ $start->format('d.m.Y') }} - {{ $end->format('d.m.Y') }}</span><br><br>
<div>
<p style="font-size: 32px; font-weight: 600; margin-bottom: 5px;">Detailed Report</p>
<div style="font-size: 16px; font-weight: 600; color: #71717a;">
<span>{{ $start->format('d.m.Y') }} - {{ $end->format('d.m.Y') }}</span><br><br>
</div>
</div>
<div class="table-wrapper">
<div
style="background-color: #fafafa; border-bottom: 1px #d4d4d8 solid; padding: 5px 14px; display: flex; gap: 20px;">
<div style="padding: 8px 12px; border-radius: 8px;">
<div style="color: #71717a; font-weight: 600;">Duration</div>
<div
style="font-size: 24px; font-weight: 500; margin-top: 2px;">{{ $interval->format(CarbonInterval::seconds($aggregatedData['seconds'])) }} </div>
</div>
<div style="padding: 8px 12px; border-radius: 8px;">
<div style="color: #71717a; font-weight: 600;">Total cost</div>
<div
style="font-size: 24px; font-weight: 500; margin-top: 2px;">{{ Money::of(BigDecimal::ofUnscaledValue($aggregatedData['cost'], 2)->__toString(), $currency)->formatTo('en_US') }} </div>
</div>
<div class="properties">
<span>Duration: {{ $interval->format(CarbonInterval::seconds($aggregatedData['seconds'])) }}</span><br>
<span>Total cost: {{ Money::of(BigDecimal::ofUnscaledValue($aggregatedData['cost'], 2)->__toString(), $currency)->formatTo('en_US') }}</span><br>
</div>
<div class="data">
<table>
<thead>
<tr>
<th>Description</th>
<th>Task</th>
<th>Project</th>
<th>Client</th>
<th>User</th>
<th>Duration</th>
<th>Billable</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
@foreach($timeEntries as $timeEntry)
</div>
<div>
<table style="width: 100%;">
<thead>
<tr>
<td>{{ $timeEntry->description === '' ? '-' : $timeEntry->description }}</td>
<td>{{ $timeEntry->task?->name ?? '-' }}</td>
<td>{{ $timeEntry->project?->name ?? '-' }}</td>
<td>{{ $timeEntry->client?->name ?? '-' }}</td>
<td>{{ $timeEntry->user->name }}</td>
<td>
{{ $timeEntry->start->format('Y-m-d H:i:s') }} - {{ $timeEntry->end->format('Y-m-d H:i:s') }}
</td>
<td>{{ $timeEntry->billable ? 'Yes' : 'No' }}</td>
<td>{{ count($timeEntry->tagsRelation) === 0 ? '-' : $timeEntry->tagsRelation->implode('name', ', ') }}</td>
<th>Description</th>
<th>Task</th>
<th>Project</th>
<th>Client</th>
<th>User</th>
<th>Time</th>
<th>Duration</th>
<th>Billable</th>
<th>Tags</th>
</tr>
@endforeach
</tbody>
</table>
</thead>
<tbody>
@foreach($timeEntries as $timeEntry)
<tr>
<td>{{ $timeEntry->description === '' ? '-' : $timeEntry->description }}</td>
<td>{{ $timeEntry->task?->name ?? '-' }}</td>
<td>{{ $timeEntry->project?->name ?? '-' }}</td>
<td>{{ $timeEntry->client?->name ?? '-' }}</td>
<td>{{ $timeEntry->user->name }}</td>
<td>
{{ $timeEntry->start->format('Y-m-d H:i:s') }} - <br> {{ $timeEntry->end->format('Y-m-d H:i:s') }}
</td>
<td>
{{ $interval->format($timeEntry->getDuration()) }}
</td>
<td>{{ $timeEntry->billable ? 'Yes' : 'No' }}</td>
<td>{{ count($timeEntry->tagsRelation) === 0 ? '-' : $timeEntry->tagsRelation->implode('name', ', ') }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>