id's toegevoegd pt 2 + fix mattermost pipeline

.github/workflows/deploy-docker-to-tst.yml

@@ -24,6 +24,21 @@ jobs:
         with:
           name: version
           path: version.txt
+      - name: Notify Mattermost via Bot
+        env:
+          VERSION: ${{ VERSION }}
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all 🚀 *Build gestart!* Een nieuwe build ['"$VERSION"'-SNAPSHOT] is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
 
       # Stap 3: Inloggen bij Docker Hub
       - name: Log in to Docker Hub
@@ -72,14 +87,26 @@ jobs:
             echo "Gekozen versie: $VERSION-SNAPSHOT"
 
             # Stop en verwijder de huidige container
-            docker stop paypoint || true
-            docker rm paypoint || true
+            docker stop paypoint-frontend || true
+            docker rm paypoint-frontend || true
 
             # Haal de nieuwste image binnen
             docker pull veenm/paypoint:$VERSION-SNAPSHOT
 
             # Start een nieuwe container
-            docker run -d --name paypoint --restart unless-stopped -p 15001:80 veenm/paypoint:$VERSION-SNAPSHOT
+            docker run -d --name paypoint-frontend --restart unless-stopped -p 15000:80 veenm/paypoint:$VERSION-SNAPSHOT
 
             # Opruimen oude images
             docker image prune -f
+
+      - name: Notify Mattermost via Bot
+        env:
+          VERSION: ${{ VERSION }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer tspcwdn5rbdk8kkmnex6h1nfha" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op https://test-paypoint.melvanveen.nl"
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts

Dockerfile-tst

@@ -11,7 +11,7 @@ RUN npm install -g @angular/cli
 
 COPY . .
 
-RUN ng build --configuration=production
+RUN ng build --configuration=test
 
 # Gebruik een multi-architecture versie van Nginx
 FROM nginx:latest

angular.json

@@ -94,6 +94,9 @@
             },
             "development": {
               "buildTarget": "PayPoint:build:development"
+            },
+            "test": {
+              "buildTarget": "PayPoint:build:test"
             }
           },
           "defaultConfiguration": "development"

src/app/components/details/details.component.html

@@ -32,6 +32,7 @@
     tuiButton
     iconStart="@tui.pencil"
     size="s"
+    id="bewerkAfspraak"
     (click)="showEditModal = true"
     type="button">
     Bewerken
@@ -41,6 +42,7 @@
     tuiButton
     iconStart="@tui.trash-2"
     size="s"
+    id="verwijderAfspraak"
     (click)="showDeleteModal = true"
     type="button">
     Verwijderen
@@ -59,6 +61,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      id="bevestigAfspraakVerwijderen"
       (click)="deleteAppointment()"
       type="button">
       Ja, afspraak verwijderen
@@ -67,6 +70,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      id="annuleerAfspraakVerwijderen"
       (click)="showDeleteModal = false"
       type="button">
       Nee, ga terug

src/app/components/edit-item/edit-item.component.html

@@ -5,6 +5,7 @@
       tuiTextfieldLegacy
       formControlName="title"
       type="text"
+      id="titelBewerken"
     />
   </tui-input>
   <div
@@ -17,6 +18,7 @@
       appearance="outline"
       tuiButton
       size="s"
+      [id]="action + '-bewerken'"
       (click)="addAction(action)"
       type="button">{{ action }}
     </button>
@@ -27,6 +29,7 @@
     <tui-combo-box
       [formControl]="control"
       [stringify]="stringify"
+      id="klantBewerken"
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
@@ -38,6 +41,7 @@
     <button
       size="m"
       tuiButton
+      id="nieuweKlantBewerken"
       (click)="toggleCustomerModal()"
       iconStart="@tui.plus"
       type="button">
@@ -53,6 +57,7 @@
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
+        id="datumBewerken"
         [tuiTextfieldLabelOutside]="false"
       >
         Datum
@@ -63,6 +68,7 @@
         formControlName="startTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="vanBewerken"
         [tuiTextfieldLabelOutside]="false">
         Van
       </tui-input-time>
@@ -72,6 +78,7 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="totBewerken"
         [tuiTextfieldLabelOutside]="false"
       >
         Tot
@@ -79,12 +86,13 @@
     </div>
   </div>
   <br>
-  <tui-textarea formControlName="notes">Notities</tui-textarea>
+  <tui-textarea formControlName="notes" id="notitiesBewerken">Notities</tui-textarea>
 </form>
 <br>
 <button
   size="m"
   tuiButton
+  id="afspraakBewerken"
   type="button" (click)="updateAppointment()"
   [tuiAppearanceState]="formIsValid()">
   Afspraak bewerken
@@ -95,54 +103,51 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      id="voornaam-nieuwe-klant"
+      [tuiTextfieldCleaner]="true">
       Voornaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="firstName"
-      />
+        formControlName="firstName"/>
     </tui-input>
     <br>
-
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      id="achternaam-nieuwe-klant"
+      [tuiTextfieldCleaner]="true">
       Achternaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="lastName"
-      />
+        formControlName="lastName"/>
     </tui-input>
     <br>
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      id="email-nieuwe-klant"
+      [tuiTextfieldCleaner]="true">
       Email
       <input
         tuiTextfieldLegacy
         autocomplete="email"
         type="email"
-        formControlName="email"
-      />
+        formControlName="email"/>
     </tui-input>
     <br>
     <button
       appearance="secondary"
       size="m"
       tuiButton
+      id="klant-toevoegen"
+      [loading]=waiting
       (click)="saveCustomer()"
       type="button">
       <tui-icon
         icon="@tui.plus"
-        [style.height.rem]="1"
-      />
+        [style.height.rem]="1"/>
       Klant toevoegen
     </button>
   </form>

src/app/components/edit-item/edit-item.component.ts

@@ -13,7 +13,12 @@ import {
 import {Appointment} from '../../models/appointment';
 import {TuiDay, TuiTime} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
-import {TuiDataListWrapperComponent, TuiFilterByInputPipe, TuiStringifyContentPipe} from '@taiga-ui/kit';
+import {
+  TuiButtonLoading,
+  TuiDataListWrapperComponent,
+  TuiFilterByInputPipe,
+  TuiStringifyContentPipe
+} from '@taiga-ui/kit';
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
@@ -36,7 +41,8 @@ import {ModalComponent} from '../modal/modal.component';
     TuiStringifyContentPipe,
     TuiFilterByInputPipe,
     ModalComponent,
-    TuiIcon
+    TuiIcon,
+    TuiButtonLoading
   ],
   templateUrl: './edit-item.component.html',
   styleUrl: './edit-item.component.scss'

src/app/components/modal/modal.component.html

@@ -8,6 +8,7 @@
       size="xs"
       tuiIconButton
       type="button"
+      id="sluitModal"
       [style.border-radius.%]="100"
       (click)="closeModal()"
     >

src/app/components/new-item/new-item.component.html

@@ -5,6 +5,7 @@
       tuiTextfieldLegacy
       formControlName="title"
       type="text"
+      id="titel"
     />
   </tui-input>
   <div
@@ -16,6 +17,7 @@
       *ngFor="let action of quickActions"
       appearance="outline"
       tuiButton
+      [attr.id]="action"
       size="s"
       (click)="addAction(action)"
       type="button">{{ action }}
@@ -27,6 +29,7 @@
     <tui-combo-box
       [formControl]="customerControl"
       [stringify]="stringify"
+      id="klant"
       tuiTextfieldSize="m">
       Klant
       <tui-data-list-wrapper
@@ -38,6 +41,7 @@
     <button
       size="m"
       tuiButton
+      id="klantToevoegen"
       (click)="toggleCustomerModal()"
       iconStart="@tui.plus"
       type="button">
@@ -53,6 +57,7 @@
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
+        id="datum"
         [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
@@ -62,6 +67,7 @@
         formControlName="startTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="van"
         [tuiTextfieldLabelOutside]="false">
         Van
       </tui-input-time>
@@ -71,21 +77,22 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
+        id="tot"
         [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
   <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
-      	<tui-error [error]="timeError"/>
+      	<tui-error id="timeError" [error]="timeError"/>
     </span>
   <br>
   <ng-container *ngIf="appointments.length > 0">
     <h3>Geplande afspraken die dag:</h3>
     <div class="appointments-container">
-      <div *ngFor="let appointment of appointments" class="appointment-object">
-        <span class="title">{{ appointment.title }}</span>
-        <span class="name">
+      <div *ngFor="let appointment of appointments" class="appointment-object" [attr.id]="appointment.title + '-' + appointment.customer">
+        <span class="title" id="titel-afspraak">{{ appointment.title }}</span>
+        <span class="name" id="titel-naam">
         <tui-icon
           icon="@tui.user"
           [style.font-size.rem]="1"
@@ -102,7 +109,6 @@
       </div>
     </div>
   </ng-container>
-
   <br>
   <tui-textarea formControlName="notes">Notities</tui-textarea>
 </form>
@@ -111,6 +117,7 @@
   size="m"
   tuiButton
   type="button" (click)="registerAppointment()"
+  id="afspraakMaken"
   [tuiAppearanceState]="formIsValid()">
   Afspraak maken
 </button>
@@ -120,6 +127,7 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
+      id="voornaam-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Voornaam
       <input
@@ -131,6 +139,7 @@
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
+      id="achternaam-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Achternaam
       <input
@@ -142,6 +151,7 @@
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
+      id="email-nieuwe-klant"
       [tuiTextfieldCleaner]="true">
       Email
       <input
@@ -155,6 +165,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="klant-toevoegen"
       [loading]=waiting
       (click)="saveCustomer()"
       type="button">

src/app/pages/agenda/agenda.component.html

@@ -5,21 +5,24 @@
       iconStart="@tui.chevron-left"
       size="m"
       tuiIconButton
+      id="vorigeDag"
       (click)="previousDay()"
       type="button">
     </button>
-    <h1 class="date" (click)="toggleCalendar()">{{ getDate() }}</h1>
+    <h1 class="date" id="geselecteerdeDatum" (click)="toggleCalendar()">{{ getDate() }}</h1>
     <button
       appearance="primary"
       iconStart="@tui.chevron-right"
       size="m"
       tuiIconButton
+      id="volgendeDag"
       (click)="nextDay()"
       type="button">
     </button>
   </div>
   <div class="calendar" *ngIf="showCalendar">
     <tui-calendar
+      id="calenderDatum"
       [value]="value"
       (dayClick)="onDayClick($event)"
     />
@@ -30,6 +33,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="vandaag"
       (click)="setToday()"
       type="button">
       Vandaag
@@ -38,6 +42,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="afspraakMaken"
       (click)="isModalOpen = true"
       type="button">
       <tui-icon
@@ -54,6 +59,7 @@
 
         <div *ngFor="let appointment of getAppointmentsForHour(hour)"
              class="appointment"
+             [attr.id]="'afspraak-'+appointment.id"
              (click)="selectAppointment(appointment)"
              [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
              [ngStyle]="getInlineStyles(appointment)">

src/app/pages/home/home.component.html

@@ -6,13 +6,14 @@
   <div class="navbar">
     <img src="assets/logo-minimal.png" alt="App Logo" class="img-fluid">
     <ul>
-      <li><a routerLink="/home/agenda" routerLinkActive="active">Agenda</a></li>
-      <li><a routerLink="/home/klanten" routerLinkActive="active">Klanten</a></li>
+      <li><a routerLink="/home/agenda" id="agenda" routerLinkActive="active">Agenda</a></li>
+      <li><a routerLink="/home/klanten" id="klanten" routerLinkActive="active">Klanten</a></li>
     </ul>
     <hr/>
     <button
       tuiChevron
       type="button"
+      id="userMenu"
       [tuiDropdown]="dropdownContent"
       [tuiDropdownManual]="open"
       [tuiObscuredEnabled]="open"
@@ -28,6 +29,7 @@
             size="m"
             tuiButton
             type="button"
+            id="uitloggen"
             (click)="logout()"
           >
             Uitloggen

src/app/pages/klanten/klanten.component.html

@@ -8,6 +8,7 @@
         size="m"
         tuiButton
         appearance="secondary"
+        id="klantToevoegen"
         type="button"
         (click)="toggleCustomerModal()"
       >
@@ -26,7 +27,7 @@
       </tr>
       </thead>
       <tbody>
-      <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)">
+      <tr *ngFor="let customer of customers" (click)="selectCustomer(customer)" [id]="customer.id">
         <td>{{ customer.firstName }} {{ customer.lastName }}</td>
         <td>{{ customer.email }}</td>
       </tr>
@@ -47,6 +48,7 @@
       <input
         tuiTextfieldLegacy
         type="text"
+        id="input-voornaam"
         formControlName="firstName"
       />
     </tui-input>
@@ -61,6 +63,7 @@
       <input
         tuiTextfieldLegacy
         type="text"
+        id="input-achternaam"
         formControlName="lastName"
       />
     </tui-input>
@@ -74,6 +77,7 @@
       <input
         tuiTextfieldLegacy
         autocomplete="email"
+        id="input-email"
         type="email"
         formControlName="email"
       />
@@ -83,6 +87,7 @@
       appearance="secondary"
       size="m"
       tuiButton
+      id="opslaanKlant"
       (click)="saveCustomer()"
       [disabled]="customerForm.invalid"
       type="button">

src/app/pages/login/login.component.html

@@ -6,18 +6,20 @@
       </header>
       <tui-textfield>
         <label tuiLabel>Gebruikersnaam</label>
-        <input formControlName="username" placeholder="Voer je gebruikersnaam in" tuiTextfield/>
+        <input formControlName="username" placeholder="Voer je gebruikersnaam in" id="username" tuiTextfield/>
       </tui-textfield>
       <tui-textfield>
         <label tuiLabel>Wachtwoord</label>
-        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" tuiTextfield/>
+        <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" id="password" tuiTextfield/>
       </tui-textfield>
       <tui-error [error]="computedError"/>
       <footer>
-        <button tuiButton class="custom-button" type="submit" [disabled]="form.invalid" (click)="login()">
+        <button tuiButton class="custom-button" id="inloggen" type="submit" [disabled]="form.invalid" (click)="login()">
           Inloggen
         </button>
       </footer>
+<!--      <br>-->
+      <p>{{appVersion}}</p>
     </form>
   </div>
 </div>

src/app/pages/login/login.component.scss

@@ -10,6 +10,10 @@ tui-error {
   text-align: center;
 }
 
+p{
+  text-align: center;
+}
+
 .header {
   text-align: center;
   margin-bottom: 28px;

src/app/pages/login/login.component.ts

@@ -7,6 +7,7 @@ import {AuthService} from '../../services/auth.service';
 import {UserDto} from '../../models/user-dto';
 import {HttpErrorResponse} from '@angular/common/http';
 import {TuiValidationError} from '@taiga-ui/cdk';
+import {environment} from '../../../environments/environment';
 
 @Component({
   selector: 'app-login',
@@ -26,6 +27,7 @@ import {TuiValidationError} from '@taiga-ui/cdk';
 export class LoginComponent {
   form: FormGroup;
   protected enabled = false;
+  appVersion = environment.appVersion;
 
   protected error = new TuiValidationError('Ongeldige gebruikersnaam of wachtwoord.');
 

src/app/services/appointment.service.ts

@@ -1,13 +1,13 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Appointment} from '../models/appointment';
+import {environment} from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AppointmentService {
-  // baseApi = "http://localhost:8080/api/appointments";
-  baseApi = "https://api.melvanveen.nl/api/appointments";
+  baseApi = `${environment.baseApi}/appointments`;
 
   constructor(private http: HttpClient) {
   }

src/app/services/auth.service.ts

@@ -3,13 +3,13 @@ import {HttpClient} from '@angular/common/http';
 import {JwtHelperService} from '@auth0/angular-jwt';
 import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
+import {environment} from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
-  // private baseApi = 'http://localhost:8080/api/auth/login';
-  baseApi = "https://api.melvanveen.nl/api/auth/login";
+  baseApi = `${environment.baseApi}/auth/login`;
   jwtHelper = new JwtHelperService();
 
   constructor(private http: HttpClient) {

src/app/services/customer.service.ts

@@ -2,14 +2,13 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Customer} from '../models/customer';
 import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CustomerService {
-  // baseApi = "http://localhost:8080/api/customers";
-  baseApi = "https://api.melvanveen.nl/api/customers";
-
+  baseApi = `${environment.baseApi}/customers`;
 
   constructor(private http: HttpClient) {
   }

src/environments/environment.development.ts

@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
   baseApi: 'http://localhost:8080/api',
-  production: false
+  production: false,
+  appVersion: version + '-LOCAL'
 };

src/environments/environment.test.ts

@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
-  baseApi: 'http://localhost:8080/api',
-  production: false
+  baseApi: 'https://api-paypoint-test.melvanveen.nl/api',
+  production: false,
+  appVersion: version + '-SNAPSHOT'
 };

src/environments/environment.ts

@@ -1,4 +1,7 @@
+import { version } from '../../package.json';
+
 export const environment = {
   baseApi: 'https://api.melvanveen.nl/api',
-  production: true
+  production: true,
+  appVersion: version
 };