diff --git a/package-lock.json b/package-lock.json index b368f52540c42a780cd698836f48554d70eeb0af..64d91b8d2214a11445fb4d61c237d4dd3743aa3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "@fortawesome/free-regular-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@ng-bootstrap/ng-bootstrap": "^9.1.0", - "bootstrap": "^4.5.0", + "bootstrap": "^5.0.0-beta3", "jwt-decode": "^3.1.2", "rxjs": "~6.6.0", "tslib": "^2.0.0", @@ -2171,6 +2171,16 @@ "node": ">=10" } }, + "node_modules/@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@schematics/angular": { "version": "11.2.12", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.2.12.tgz", @@ -3312,9 +3322,16 @@ "dev": true }, "node_modules/bootstrap": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", - "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==" + "version": "5.0.0-beta3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz", + "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.9.1" + } }, "node_modules/brace-expansion": { "version": "1.1.11", @@ -18162,6 +18179,12 @@ } } }, + "@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "peer": true + }, "@schematics/angular": { "version": "11.2.12", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.2.12.tgz", @@ -19164,9 +19187,10 @@ "dev": true }, "bootstrap": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", - "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==" + "version": "5.0.0-beta3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz", + "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg==", + "requires": {} }, "brace-expansion": { "version": "1.1.11", diff --git a/package.json b/package.json index 3681eb46c8ae065126019cb0d2112da65cdcc50a..b41a457bf44375fc395f51bf0a625166641e3311 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@fortawesome/free-regular-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@ng-bootstrap/ng-bootstrap": "^9.1.0", - "bootstrap": "^4.5.0", + "bootstrap": "^5.0.0-beta3", "jwt-decode": "^3.1.2", "rxjs": "~6.6.0", "tslib": "^2.0.0", diff --git a/src/app/core/service-detail/service-detail.component.css b/src/app/core/service-detail/service-detail.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f294588ea18aadff978ed41a0dce9916a67ad218 100644 --- a/src/app/core/service-detail/service-detail.component.css +++ b/src/app/core/service-detail/service-detail.component.css @@ -0,0 +1,19 @@ +.check-icon { + color: green; +} + +.times-icon { + color: red; +} + +.trash-icon { + color: red; +} + +.trash-icon:hover { + color: hsl(0, 100%, 40%); +} + +.ordering-arrow { + color: gray; +} \ No newline at end of file diff --git a/src/app/core/service-detail/service-detail.component.html b/src/app/core/service-detail/service-detail.component.html index d0ceaa8650da14dc594a324ea42ce793c517ef8f..dff025edee1111e088e82cadb49a2b9c0f2bf371 100644 --- a/src/app/core/service-detail/service-detail.component.html +++ b/src/app/core/service-detail/service-detail.component.html @@ -6,11 +6,11 @@ </h5> <div> <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.EDIT_SERVICE)'> - Szerkesztés + <fa-icon [icon]='faEdit'></fa-icon> </button> <button class='btn btn-link' *ngIf='isLoggedIn' (click)='updateState(serviceDetailComponentState.DELETE_SERVICE)'> - Törlés + <fa-icon [icon]='faTrashAlt' class="trash-icon"></fa-icon> </button> </div> </div> @@ -42,9 +42,11 @@ formControlName='description'> </div> <div class='mb-3'> - <label for='editServiceFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label> - <input type='checkbox' class='form-control' id='editServiceFormIsOkay' aria-describedby='description' - formControlName='isOkay'> + <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label> + <div class="d-flex justify-content-center"> + <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description' + formControlName='isOkay'> + </div> </div> <div class='d-flex justify-content-end align-items-center mt-2'> <button class='btn btn-secondary' (click)='updateState(serviceDetailComponentState.NONE)' @@ -56,14 +58,18 @@ </form> </div> </div> - <div> - neve: {{service.name}} + <div class="d-flex flex-sm-row flex-column pb-3"> + <b>Név: </b> + {{service.name}} </div> - <div> - leiras: {{service.description}} + <div class="d-flex flex-sm-row flex-column pb-3"> + <b>Leírás: </b> + {{service.description}} </div> - <div> - jelenleg rendben van-e: {{service.isOkay ? "Igen" : "Nem"}} + <div class="d-flex flex-sm-row flex-column"> + <b>Státusz: </b> + <fa-icon *ngIf='service.isOkay' [icon]='faCheckCircle' class='check-icon'></fa-icon> + <fa-icon *ngIf='!service.isOkay' [icon]='faTimesCircle' class='times-icon'></fa-icon> </div> </div> <app-loader *ngIf='isLoading'></app-loader> @@ -75,18 +81,20 @@ <h5 class='base_container_header'> Története </h5> - <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && !isLoggedIn' - (click)='toggleHistoryOrder(historyOrderState.Ascending)'> - ↑ - </button> - <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && !isLoggedIn' - (click)='toggleHistoryOrder(historyOrderState.Descending)'> - ↓ - </button> - <button class='btn btn-link' *ngIf='isLoggedIn' - (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'> - Új hozzáadása - </button> + <div> + <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2' + (click)='toggleHistoryOrder(historyOrderState.Ascending)'> + <fa-icon [icon]='faArrowUp' class="ordering-arrow"></fa-icon> + </button> + <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && service.history.length >= 2' + (click)='toggleHistoryOrder(historyOrderState.Descending)'> + <fa-icon [icon]='faArrowDown' class="ordering-arrow"></fa-icon> + </button> + <button class='btn btn-link' *ngIf='isLoggedIn' + (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'> + <fa-icon [icon]='faPlusSquare'></fa-icon> + </button> + </div> </div> @@ -141,30 +149,32 @@ </div> </div> - <div class='border-top mt-3 pt-3' *ngIf='!service.history'> + <div class='border-top mt-3 pt-3' *ngIf='service.history.length === 0'> Nincs </div> - <div class='border-top mt-3 pt-3 d-flex flex-row align-items-center' + <div class='border-top mt-3 pt-3 align-items-center d-flex flex-row' *ngFor='let history of sortByCreation(service.history, currentHistoryOrderState); TrackBy: trackById'> - <div> + <div class="flex-grow-1"> {{history.description}} </div> - <div class="container"> - <div class="row justify-content-end"> - <div class="col-md-100 p-1" style="white-space: nowrap;"> - {{history.createdAt | date: 'yyyy. MMM dd.'}} - </div> - <div class="col-md-100 p-1" style="white-space: nowrap;"> - {{history.createdAt | date: 'hh:mm:ss'}} - </div> + <div class="d-flex flex-md-row flex-column p-3"> + <div class="pr-sm-1" style="white-space: nowrap;"> + {{history.createdAt | date: 'yyyy. MMM dd.'}} </div> + <div class="pl-sm-1" style="white-space: nowrap;"> + {{history.createdAt | date: 'hh:mm:ss'}} + </div> + </div> + <div class="d-flex flex-row"> + <button class='btn btn-link' *ngIf='isLoggedIn' + (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'> + <fa-icon [icon]='faEdit'></fa-icon> + </button> + <button class='btn btn-link' *ngIf='isLoggedIn' + (click)='updateState(serviceDetailComponentState.DELETE_HISTORY, history.id)'> + <fa-icon [icon]='faTrashAlt' class="trash-icon"></fa-icon> + </button> </div> - <button class='btn btn-link' *ngIf='isLoggedIn' - (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'>Szerkesztés - </button> - <button class='btn btn-link' *ngIf='isLoggedIn' - (click)='updateState(serviceDetailComponentState.DELETE_HISTORY, history.id)'>Törlés - </button> </div> </div> <div class='mt-3'> diff --git a/src/app/core/service-detail/service-detail.component.ts b/src/app/core/service-detail/service-detail.component.ts index 02e86c724a9faddb2c81e37376523c314ffe1f87..1ad84bbcefd3579bebdf84353b865888ac2d5de9 100644 --- a/src/app/core/service-detail/service-detail.component.ts +++ b/src/app/core/service-detail/service-detail.component.ts @@ -1,5 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import { faCaretLeft } from '@fortawesome/free-solid-svg-icons'; +import { faCheckCircle, + faTimesCircle, + faEdit, + faTrashAlt, + faPlusSquare + } from '@fortawesome/free-regular-svg-icons'; +import { faCaretLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons'; import { ActivatedRoute, Router } from '@angular/router'; import { Service } from '../../models/service.model'; import { ServicesService } from '../../services/services.service'; @@ -38,10 +44,38 @@ export enum HistoryOrderState { styleUrls: ['./service-detail.component.css'], }) export class ServiceDetailComponent implements OnInit { + /** + * OK icon + */ + faCheckCircle = faCheckCircle; + /** + * NOT OK icon + */ + faTimesCircle = faTimesCircle; + /** + * EDIT icon + */ + faEdit = faEdit; + /** + * DELETE icon + */ + faTrashAlt = faTrashAlt; /** * Fontawesome left arrow icon */ faCaretLeft = faCaretLeft; + /** + * ADD icon + */ + faPlusSquare = faPlusSquare; + /** + * ARROW UP icon + */ + faArrowUp = faArrowUp; + /** + * ARROW DOWN icon + */ + faArrowDown = faArrowDown; /** * Current service that is displayed */ @@ -130,6 +164,9 @@ export class ServiceDetailComponent implements OnInit { this.servicesService.getServiceById(this.id).subscribe( (s) => { this.service = s; + if (this.service.history == null) { + this.service.history = new Array; + } this.isLoading = false; }, (error) => { diff --git a/src/app/core/service-list/service-list.component.html b/src/app/core/service-list/service-list.component.html index 19fcf08e501b708a19cc85fd15bcf7b6cda25e9a..123c18ee537d31ab960422c29f047cfc5479f4b9 100644 --- a/src/app/core/service-list/service-list.component.html +++ b/src/app/core/service-list/service-list.component.html @@ -35,9 +35,11 @@ formControlName='description'> </div> <div class='mb-3'> - <label for='createFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label> - <input type='checkbox' class='form-control' id='createFormIsOkay' aria-describedby='description' - formControlName='isOkay'> + <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label> + <div class="d-flex justify-content-center"> + <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description' + formControlName='isOkay'> + </div> </div> <div class='d-flex justify-content-end align-items-center mt-2'> <button class='btn btn-secondary' (click)='updateState(serviceListComponentState.NONE)' [class.mr-1]='true'> @@ -57,12 +59,14 @@ <div class='mb-3'> <label for='editFormDescription' class='form-label'>Szolgáltatás rövid leírása</label> <input type='text' class='form-control' id='editFormDescription' aria-describedby='description' - formControlName='description'> + formControlName='description'> </div> <div class='mb-3'> - <label for='editFormIsOkay' class='form-label'>Rendben van a szolgáltatás?</label> - <input type='checkbox' class='form-control' id='editFormIsOkay' aria-describedby='description' - formControlName='isOkay'> + <label for='editServiceFormIsOkay' class='form-label'>Rendben van-e a szolgáltatás?</label> + <div class="d-flex justify-content-center"> + <input type='checkbox' class='form-check-input' id='editServiceFormIsOkay' aria-describedby='description' + formControlName='isOkay'> + </div> </div> <div class='d-flex justify-content-end align-items-center mt-2'> <button class='btn btn-secondary' (click)='updateState(serviceListComponentState.NONE)' [class.mr-1]='true'>