Merge pull request 'pagination-table' (#33) from pagination-table into master

Reviewed-on: #33

api/src/Controller/WorkingHoursController.php

@@ -21,12 +21,6 @@ class WorkingHoursController extends AbstractController
 {
 
     /**
-     * @param Request              $request
-     * @param Response             $response
-     * @param array<string, mixed> $args
-     *
-     * @return Response
-     *
      * @throws HttpBadRequestException
      * @throws HttpNotFoundException
      */
@@ -34,7 +28,7 @@ class WorkingHoursController extends AbstractController
     {
         $body = $request->getParsedBody();
         $repository = new WorkingHoursRepository($this->databases);
-        $model = $this->buildModel($request, $args['id'], $body['workingTime'], $body['isHomeOfficeDay'] ?? false);
+        $model = $this->buildModel($request, $args['id'], $body['workingTime'], $body['isHomeOffice'] ?? false);
         try {
             $repository->update($model);
         } catch (RepositoryRecordNotFoundException $exception) {
@@ -44,12 +38,6 @@ class WorkingHoursController extends AbstractController
     }
 
     /**
-     * @param Request              $request
-     * @param Response             $response
-     * @param array<string, mixed> $args
-     *
-     * @return Response
-     *
      * @throws HttpInternalServerErrorException
      * @throws HttpBadRequestException
      * @noinspection PhpUnusedParameterInspection
@@ -79,12 +67,6 @@ class WorkingHoursController extends AbstractController
     }
 
     /**
-     * @param Request              $request
-     * @param Response             $response
-     * @param array<string, mixed> $args
-     *
-     * @return Response
-     *
      * @throws HttpNotFoundException
      * @throws HttpInternalServerErrorException
      */
@@ -105,12 +87,6 @@ class WorkingHoursController extends AbstractController
     }
 
     /**
-     * @param Request              $request
-     * @param Response             $response
-     * @param array<string, mixed> $args
-     *
-     * @return Response
-     *
      * @throws HttpBadRequestException
      * @throws HttpConflictRequestException
      * @throws HttpInternalServerErrorException
@@ -124,7 +100,7 @@ class WorkingHoursController extends AbstractController
             $request,
             $body['workingDay'],
             $body['workingTime'],
-            $body['isHomeOfficeDay'] ?? false
+            $body['isHomeOffice'] ?? false
         );
         try {
             $repository->insert($model);
@@ -141,11 +117,6 @@ class WorkingHoursController extends AbstractController
     }
 
     /**
-     * @param Request $request
-     * @param string  $date
-     * @param string  $time
-     *
-     * @return WorkingHours
      * @throws HttpBadRequestException
      */
     protected function buildModel(Request $request, string $date, string $time, bool $isHomeOffice): WorkingHours

api/src/Repositories/AbstractWorkingHoursViewRepository.php

@@ -17,8 +17,8 @@ use TorstenHettstedt\TimekeepingApi\Models\WorkingHoursView;
 abstract class AbstractWorkingHoursViewRepository implements RepositoryReaderInterface
 {
 
-    protected const SQL_SELECT = '';
+    protected const string SQL_SELECT = '';
-    protected const SQL_WHERE  = '';
+    protected const string SQL_WHERE  = '';
 
     protected PeriodDesignationEnum $periodDesignation;
 

api/src/Repositories/WorkingHoursMonthlyViewRepository.php

@@ -12,7 +12,7 @@ use TorstenHettstedt\TimekeepingApi\Models\PeriodDesignationEnum;
 class WorkingHoursMonthlyViewRepository extends AbstractWorkingHoursViewRepository
 {
 
-    protected const SQL_SELECT = <<<SQL
+    protected const string SQL_SELECT = <<<SQL
         select
             "Monat" as "period",
             "Gesamtarbeitszeit" as "totalHours",

api/tests/_support/Helper/Api.php

@@ -24,7 +24,7 @@ class Api extends Module
         "periodDesignation" => "string",
         "totalHours"        => self::FORMAT_TIME,
         "workingDays"       => 'integer:>0',
-        'homeOfficeDays'    => 'number:>=0',
+        'homeOfficeDays'    => 'integer:>=0',
         "overtime"          => self::FORMAT_TIME,
     ];
 

api/tests/api/WorkingHours/CreateWorkingHoursCest.php

@@ -36,6 +36,21 @@ class CreateWorkingHoursCest
         $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
     }
 
+    public function createWorkingHoursWithNewValidRecordWithoutHomeOffice(ApiTester $I): void
+    {
+        $I->haveHttpHeader('accept', 'application/json');
+        $I->haveHttpHeader('content-type', 'application/json');
+        $I->haveHttpHeader('Origin', Api::TEST_ORIGIN);
+        $I->sendPost('/working-hours', [
+            'workingDay'  => '2020-04-01',
+            'workingTime' => '08:00:00',
+        ]);
+        $I->seeResponseCodeIs(HttpCode::CREATED);
+        $I->canSeeHttpHeader('Access-Control-Allow-Origin', Api::TEST_ORIGIN);
+        $I->seeResponseIsJson();
+        $I->seeResponseMatchesJsonType(Api::WORKING_HOURS_JSON_FORMAT);
+    }
+
     // tests
     public function createWorkingHoursWithNewInvalidRecord(ApiTester $I): void
     {

api/tests/unit/Controller/WorkingHoursControllerTest.php

@@ -4,6 +4,7 @@ namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Controller;
 
 use Codeception\Attribute\DataProvider;
 use Exception;
+use PHPUnit\Framework\MockObject\Exception as MockException;
 use Psr\Container\ContainerExceptionInterface;
 use Psr\Container\ContainerInterface;
 use Psr\Container\NotFoundExceptionInterface;
@@ -25,7 +26,7 @@ class WorkingHoursControllerTest extends AbstractControllerTest
 
     /**
      * @throws Exception
-     * @throws \PHPUnit\Framework\MockObject\Exception
+     * @throws MockException
      */
     protected function _before(): void
     {
@@ -34,7 +35,7 @@ class WorkingHoursControllerTest extends AbstractControllerTest
             'getParsedBody' => [
                 'workingDay'   => self::EXISTING_DATE,
                 'workingTime'  => self::EXISTING_INTERVAL,
-                'isHomeOfficeDay' => true,
+                'isHomeOffice' => true,
             ],
         ]);
     }
@@ -316,9 +317,6 @@ class WorkingHoursControllerTest extends AbstractControllerTest
     }
 
     /**
-     * @param string $date
-     * @param string $time
-     *
      * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
      * @throws NotFoundExceptionInterface
@@ -331,7 +329,7 @@ class WorkingHoursControllerTest extends AbstractControllerTest
             'getParsedBody' => [
                 'workingDay'   => $date,
                 'workingTime'  => $time,
-                'isHomeOfficeDay' => $isHomeOffice,
+                'isHomeOffice' => $isHomeOffice,
             ],
         ]);
         $controller = new WorkingHoursController($this->container);
@@ -351,7 +349,7 @@ class WorkingHoursControllerTest extends AbstractControllerTest
             'getParsedBody' => [
                 'workingDay'   => self::NEW_DATE,
                 'workingTime'  => self::NEW_INTERVAL,
-                'isHomeOfficeDay' => true,
+                'isHomeOffice' => true,
             ],
         ]);
         $controller = new WorkingHoursController($this->container);
@@ -392,7 +390,7 @@ class WorkingHoursControllerTest extends AbstractControllerTest
             'getParsedBody' => [
                 'workingDay'   => self::EXISTING_DATE,
                 'workingTime'  => self::EXISTING_INTERVAL,
-                'isHomeOfficeDay' => true,
+                'isHomeOffice' => true,
             ],
         ]);
         $controller = new WorkingHoursController($this->container);

resources/test-data/report-1672928012.CSV

@@ -23,7 +23,7 @@ Arbeit;04:16;2021-07-22 07:55;2021-07-22 12:11;
 Arbeit;03:11;2021-07-21 13:37;2021-07-21 16:48;
 Mittagspause ;01:07;2021-07-21 12:29;2021-07-21 13:37;
 Arbeit;04:58;2021-07-21 07:31;2021-07-21 12:29;
-Arbeit;01:17;2021-07-20 18:44;2021-07-20 20:02;
+Verkehr;01:17;2021-07-20 18:44;2021-07-20 20:02;
 Arbeit;03:50;2021-07-20 13:14;2021-07-20 17:04;
 Mittagspause ;00:41;2021-07-20 12:32;2021-07-20 13:14;
 Arbeit;04:55;2021-07-20 07:37;2021-07-20 12:32;

ui/src/lib/Models.svelte.js

@@ -1,9 +1,10 @@
 export class PeriodRecord {
     /**
-     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
+     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; homeOfficeDays: Number }} record
      */
     constructor(record) {
         this.workingDays = Number(record.workingDays)
+        this.homeOfficeDays = Number(record.homeOfficeDays)
         this.totalHours = String(record.totalHours)
         this.period = String(record.period)
         this.overtime = String('##:##:##')

ui/src/lib/TablePagination.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    let {promise_data, actual_records= $bindable(), page_count = 10} = $props();
+    let records: Array<any[]> = $state([])
+    let page_number = $state(0)
+    let max_page_number = $state(0)
+    const setPage = (new_page: number) => {
+        page_number = new_page
+        actual_records = records[page_number - 1]
+    }
+    const init = async () => {
+        let page_records: any[] = []
+        console.log(promise_data, actual_records)
+        for (let index in promise_data) {
+            page_records.push(promise_data[index])
+            if (page_records.length >= page_count) {
+                records.push(page_records.values().toArray())
+                page_records = []
+            }
+        }
+        if (page_records.length > 0) {
+            records.push(page_records.values().toArray())
+        }
+        max_page_number = records.length
+        setPage(1)
+    }
+    init()
+</script>
+<style>
+    div.table-pagination {
+        text-align: center;
+    }
+
+    div.table-pagination > button {
+        display: inline-block;
+        width: 2rem;
+    }
+
+    div.table-pagination > button[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    div.table-pagination > span {
+        display: inline-block;
+        width: 5rem;
+        text-align: center;
+    }
+</style>
+
+<div class="table-pagination">
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(1)}>&ll;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === 1}
+        onclick={() => setPage(page_number - 1)}>&lt;
+    </button>
+    <span>{page_number} von {max_page_number}</span>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(page_number + 1)}>&gt;
+    </button>
+    <button
+        type="button"
+        disabled={page_number === max_page_number}
+        onclick={() => setPage(max_page_number)}>&gg;
+    </button>
+</div>

ui/src/lib/Views.svelte

@@ -1,16 +1,16 @@
 <script>
     import {PeriodRecord} from './Models.svelte.js'
+    import TablePagination from "$lib/TablePagination.svelte";
 
-    /**
+    let { promise, title } = $props();
-     * @type {{ promise: Promise<object>; title: string;}}
-     */
-    let {params} = $props();
     /** @type PeriodRecord[] **/
     let records = $state([])
+    /** @type PeriodRecord[] **/
+    let actual_records = $state([])
     let isLoading = $state(true)
-    const init = async () => await params.promise.then(
+    const init = async () => await promise.then(
         /**
-         * @param {Array<object>} data
+         * @param {Array<{ workingDays: Number; totalHours: any; overtime: string; period: string; homeOfficeDays: Number; }>} data
          */
         data => {
             records = data.map(row => new PeriodRecord(row))
@@ -21,12 +21,12 @@
 </script>
 
 <svelte:head>
-    <title>{params.title}</title>
+    <title>{title}</title>
 </svelte:head>
 
 <section id="list-records">
     <header>
-        <h1>{params.title}</h1>
+        <h1>{title}</h1>
     </header>
     <article>
         {#if isLoading === true}
@@ -43,20 +43,29 @@
                 <tr>
                     <th>Zeitraum</th>
                     <th>Arbeitstage</th>
+                    <th>davon HomeOffice</th>
                     <th>Arbeitsstunden</th>
                     <th>Über- / Unterstunden</th>
                 </tr>
                 </thead>
                 <tbody>
-                {#each records as record}
+                {#each actual_records as record}
                     <tr>
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
+                        <td>{record.homeOfficeDays}</td>
                         <td>{record.totalHours}</td>
                         <td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
                     </tr>
                 {/each}
                 </tbody>
+                <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records}/>
+                        </td>
+                    </tr>
+                </tfoot>
             </table>
         {/if}
     </article>

ui/src/routes/views/monthly/+page.svelte

@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 

ui/src/routes/views/weekly/+page.svelte

@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 

ui/src/routes/views/yearly/+page.svelte

@@ -3,5 +3,5 @@
     let { data } = $props();
 </script>
 
-<Views params={data}/>
+<Views {...data}/>
 

ui/src/routes/working-hours/+page.server.js

@@ -34,6 +34,7 @@ export const actions = {
         const body_data = {
             workingDay: data.get('workingDay'),
             workingTime: data.get('workingTime'),
+            isHomeOffice: data.get('isHomeOffice'),
         }
         await WorkingHoursRepository.update(env.API_URL, data.get('workingDay'), body_data);
     },
@@ -42,6 +43,7 @@ export const actions = {
         const body_data = {
             workingDay: form_data.get('workingDay'),
             workingTime: form_data.get('workingTime'),
+            isHomeOffice: form_data.get('isHomeOffice'),
         }
         await WorkingHoursRepository.add(env.API_URL, body_data);
     },
@@ -56,13 +58,19 @@ export const actions = {
             actualDayObject.setDate(actualDayObject.getDate() + 1)
         })
         for (const pair of form_data.entries()) {
-            const working_day = day_list[pair[0]] ?? null
+            let key = /(?<day>\w+)\[time]/.exec(pair[0])
-            if (working_day === null) {
+            if (key === null) {
+                continue
+            }
+            let day = key?.groups?.day ?? ''
+            const working_day = day_list[day] ?? null
+            if (working_day === null || pair[1] === '00:00:00' || pair[1] === '00:00') {
                 continue
             }
             const body_data = {
                 workingDay: working_day,
                 workingTime: pair[1],
+                isHomeOffice: form_data.has(day + '[isHomeOffice]')
             }
             await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
         }
@@ -70,10 +78,15 @@ export const actions = {
     'import-csv': async ({ request }) => {
         const form_data = await request.formData();
         for (const pair of form_data.entries()) {
-            const working_day = pair[0]
+            let key = /^(?<day>\d{4}-\d{2}-\d{2})\[time]$/.exec(pair[0])
+            if (key === null) {
+                continue
+            }
+            let working_day = key?.groups?.day ?? ''
             const body_data = {
                 workingDay: working_day,
                 workingTime: pair[1],
+                isHomeOffice: form_data.has(working_day + '[isHomeOffice]')
             }
             await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
         }

ui/src/routes/working-hours/+page.svelte

@@ -2,13 +2,16 @@
     import documentIcon from "@iconify-icons/oi/document.js";
     import wrenchIcon from "@iconify-icons/oi/wrench.js";
     import IconifyIcon from "@iconify/svelte";
+    import TablePagination from "$lib/TablePagination.svelte";
     let { data } = $props();
     const TITLE = "Bearbeitung Einträge"
-    /** @type {{workingDay: String, workingTime: String, }[]|null} **/
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]|null} **/
-    let records = $state([])
+    let records = $state(null)
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} **/
+    let actual_records = $state([])
     const init = async () => await data.promise.then(
         /**
-         * @param {{workingDay: String, workingTime: String, }[]} data
+         * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }[]} data
          */
         data => {
             records = data
@@ -53,14 +56,16 @@
                     <tr>
                         <th>Datum</th>
                         <th>Arbeitsstunden</th>
+                        <th>Zu Hause gearbeitet?</th>
                         <th>Aktionen</th>
                     </tr>
                     </thead>
                     <tbody>
-                    {#each records as record}
+                    {#each actual_records as record}
-                        <tr>
+                        <tr style="{record.isHomeOffice ? 'background: aqua' : ''}">
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
+                            <td>{record.isHomeOffice ? 'ja' : ''}</td>
                             <td>
                                 <button formaction={'/working-hours/' + record.workingDay} type="submit">Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
@@ -69,6 +74,13 @@
                         </tr>
                     {/each}
                     </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="4">
+                            <TablePagination promise_data={records} bind:actual_records={actual_records} page_count={15}/>
+                        </td>
+                    </tr>
+                    </tfoot>
                 </table>
             {/if}
         </form>

ui/src/routes/working-hours/[working_day]/+page.svelte

@@ -4,11 +4,11 @@
     import xIcon from "@iconify-icons/oi/x";
     let { data } = $props();
     const TITLE = "Bearbeitung eines Eintrags"
-    /** @type {{workingDay: String, workingTime: String, }|null} **/
+    /** @type {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }|null} **/
     let activeDate = $state(null)
     const init = async () => await data.promise.then(
         /**
-         * @param {{workingDay: String, workingTime: String, }} data
+         * @param {{workingDay: String, workingTime: String, isHomeOffice: Boolean, }} data
          */
         data => {
             activeDate = data
@@ -42,6 +42,10 @@
                                value="{activeDate.workingTime}"
                                id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                     </div>
+                    <div>
+                        <label for="isHomeOffice">Arbeitszeit</label>
+                        <input name="isHomeOffice" type="checkbox" checked={activeDate.isHomeOffice} id="isHomeOffice">
+                    </div>
                 </fieldset>
             {/if}
             <fieldset name="buttons">

ui/src/routes/working-hours/create-by-day/+page.svelte

@@ -29,6 +29,10 @@
                     <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1" value=""
                            id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                 </div>
+                <div>
+                    <label for="isHomeOffice">Arbeitszeit</label>
+                    <input name="isHomeOffice" type="checkbox" id="isHomeOffice">
+                </div>
             </fieldset>
             <fieldset name="buttons">
                 <button type="submit">Übernehmen und Weiter

ui/src/routes/working-hours/create-by-week/+page.svelte

@@ -14,6 +14,22 @@
     tbody.weekend td input, tbody.weekend td {
         color: red;
     }
+    tbody.weekend label {
+        color: initial;
+    }
+
+    section form fieldset div input {
+        display: inline-block;
+        padding: 0.25rem;
+        border-style: solid;
+        border-width: thin;
+    }
+
+    section form fieldset div input[type=checkbox] {
+        display: inline-block;
+        width: auto;
+        margin: 0 1rem 1.0rem;
+    }
 </style>
 
 
@@ -39,10 +55,19 @@
                                     {day}
                                 </td>
                                 <td>
-                                    <input name="{day}" value="08:00:00" type="time" step="1"
+                                    <input name="{day}[time]" value="08:00:00" type="time" step="1"
                                            required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                </td>
+                                <td>
+                                    <label>wurde zu Hause gearbeitet?
+                                        <input name="{day}[isHomeOffice]" type="checkbox">
+                                    </label>
+                                </td>
+                            </tr>
                         {/each}
                         </tbody>
                         <tbody class="weekend">
@@ -52,10 +77,19 @@
                                     {day}
                                 </td>
                                 <td>
-                                    <input name="{day}" value="00:00:00" type="time" step="1"
+                                    <input name="{day}[time]" value="00:00:00" type="time" step="1"
                                            required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                </td>
+                                <td>
+                                    <label>wurde zu Hause gearbeitet?
+                                        <input name="{day}[isHomeOffice]" type="checkbox">
+                                    </label>
+                                </td>
+                            </tr>
                         {/each}
                         </tbody>
                     </table>

ui/src/routes/working-hours/import-csv/+page.svelte

@@ -8,7 +8,7 @@
 
     const TITLE = "Erstellung neuer Einträge für eine Woche"
 
-    /** @type {{ workingTime: String, workingDay: String, }[]} **/
+    /** @type {{ workingTime: String, workingDay: String, isHomeOffice: Boolean, }[]} **/
     let imported_data = $state([])
 
 
@@ -30,6 +30,8 @@
             complete: results => {
                 /** @type {Object<String, Number>} **/
                 let cash_work_days = {}
+                /** @type {Object<String, Boolean>} **/
+                let home_office_days = {}
                 results.data.forEach(
                     /** @param {Object<String, any>} item **/
                     item => {
@@ -42,6 +44,9 @@
                         let work_to = new Date(item['Bis'])
                         let actual_day = work_from.toISOString().substring(0, 10)
                         let actual_work_hours = (work_to.getTime() - work_from.getTime()) / (1000 * 60 * 60)
+                        if (activity.trim() === 'Verkehr') {
+                            home_office_days[actual_day] = true
+                        }
                         cash_work_days[actual_day] ??= 0
                         cash_work_days[actual_day] += actual_work_hours
                     }
@@ -52,7 +57,11 @@
                     let minutes_digits = Math.round((hours - hours_digits) * 60)
                     let working_time = String(hours_digits).padStart(2, '0') + ':'
                         + String(minutes_digits).padStart(2, '0') + ':00'
-                    imported_data.push({workingTime: working_time, workingDay: day})
+                    imported_data.push({
+                        workingTime: working_time,
+                        workingDay: day,
+                        isHomeOffice: home_office_days[day] ?? false,
+                    })
                 }
             },
         })
@@ -90,7 +99,10 @@
                                         {item.workingDay}
                                     </td>
                                     <td>
-                                        <input type="time" readonly name="{item.workingDay}" value="{item.workingTime}">
+                                        <input type="time" readonly name="{item.workingDay}[time]" value="{item.workingTime}">
+                                    </td>
+                                    <td>
+                                        <input type="checkbox" readonly name="{item.workingDay}[isHomeOffice]" checked={item.isHomeOffice}>
                                     </td>
                                 </tr>
                             {/each}