improve pdf index export to prevent overflows

This commit is contained in:
Gregor Vostrak
2024-12-09 16:58:06 +01:00
parent fdbf88a9a6
commit 67e42a0a54
2 changed files with 70 additions and 56 deletions

View File

@@ -21,6 +21,7 @@ async function submit() {
const newTag = props.createTag(tag.value.name); const newTag = props.createTag(tag.value.name);
if (newTag !== undefined) { if (newTag !== undefined) {
show.value = false; show.value = false;
tag.value.name = '';
} }
} }

View File

@@ -106,7 +106,7 @@
color: #18181b; color: #18181b;
} }
table td, table th{ table td, table th {
font-size: 12px; font-size: 12px;
} }
@@ -127,13 +127,13 @@
</style> </style>
</head> </head>
<body> <body>
<div> <div>
<p style="font-size: 32px; font-weight: 600; margin-bottom: 5px;">Detailed Report</p> <p style="font-size: 32px; font-weight: 600; margin-bottom: 5px;">Detailed Report</p>
<div style="font-size: 16px; font-weight: 600; color: #71717a;"> <div style="font-size: 16px; font-weight: 600; color: #71717a;">
<span>{{ $start->format('d.m.Y') }} - {{ $end->format('d.m.Y') }}</span><br><br> <span>{{ $start->format('d.m.Y') }} - {{ $end->format('d.m.Y') }}</span><br><br>
</div> </div>
</div> </div>
<div class="table-wrapper"> <div class="table-wrapper">
<div <div
style="background-color: #fafafa; border-bottom: 1px #d4d4d8 solid; padding: 5px 14px; display: flex; gap: 20px;"> 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="padding: 8px 12px; border-radius: 8px;">
@@ -152,12 +152,9 @@
<table style="width: 100%;"> <table style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th>Description</th> <th>Time Entry</th>
<th>Task</th>
<th>Project</th>
<th>Client</th>
<th>User</th> <th>User</th>
<th>Time</th> <th style="text-align: center;">Time</th>
<th>Duration</th> <th>Duration</th>
<th>Billable</th> <th>Billable</th>
<th>Tags</th> <th>Tags</th>
@@ -166,25 +163,41 @@
<tbody> <tbody>
@foreach($timeEntries as $timeEntry) @foreach($timeEntries as $timeEntry)
<tr> <tr>
<td>{{ $timeEntry->description === '' ? '-' : $timeEntry->description }}</td> <td style="overflow-wrap: break-word; max-width: 250px;">
<td>{{ $timeEntry->task?->name ?? '-' }}</td> {{ $timeEntry->description === '' ? '-' : $timeEntry->description }} <br>
<td>{{ $timeEntry->project?->name ?? '-' }}</td> @if($timeEntry->task?->name)
<td>{{ $timeEntry->client?->name ?? '-' }}</td> <span style="font-weight: 600;">Task:</span> {{ $timeEntry->task?->name ?? '-' }} <br>
<td>{{ $timeEntry->user->name }}</td> @endif
<td> @if($timeEntry->project?->name)
{{ $timeEntry->start->format('Y-m-d H:i:s') }} - <br> {{ $timeEntry->end->format('Y-m-d H:i:s') }} <span style="font-weight: 600;">Project:</span> {{ $timeEntry->project?->name }} <br>
@endif
@if($timeEntry->client?->name)
<span style="font-weight: 600;">
Client:
</span>{{ $timeEntry->client?->name }} <br>
@endif
</td> </td>
<td> <td style="overflow-wrap: break-word; min-width: 75px;">{{ $timeEntry->user->name }}</td>
<td style="overflow-wrap: break-word; min-width: 150px; text-align: center;">
@if($timeEntry->start->format('Y-m-d') === $timeEntry->end->format('Y-m-d'))
{{ $timeEntry->start->format('Y-m-d') }}
@else
{{ $timeEntry->start->format('Y-m-d') }} - <br> {{ $timeEntry->end->format('Y-m-d') }}
@endif
<br>
{{ $timeEntry->start->format('H:i:s') }} - {{ $timeEntry->end->format('H:i:s') }}
</td>
<td style="overflow-wrap: break-word; min-width: 75px;">
{{ $interval->format($timeEntry->getDuration()) }} {{ $interval->format($timeEntry->getDuration()) }}
</td> </td>
<td>{{ $timeEntry->billable ? 'Yes' : 'No' }}</td> <td style="overflow-wrap: break-word;">{{ $timeEntry->billable ? 'Yes' : 'No' }}</td>
<td>{{ count($timeEntry->tagsRelation) === 0 ? '-' : $timeEntry->tagsRelation->implode('name', ', ') }}</td> <td style="overflow-wrap: break-word; min-width: 75px;">{{ count($timeEntry->tagsRelation) === 0 ? '-' : $timeEntry->tagsRelation->implode('name', ', ') }}</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</body> </body>