From 6b49604d4b14b0f511544a992fa8693d30443bf2 Mon Sep 17 00:00:00 2001 From: Eduardo Quiros Date: Sun, 24 Jul 2022 22:38:48 -0600 Subject: [PATCH] run formatter for first time --- api-gateway/src/app.controller.ts | 188 +-- api-gateway/src/app.module.ts | 102 +- api-gateway/src/app.service.ts | 424 +++--- package.json | 4 +- service-a/src/app.module.ts | 8 +- service-a/src/books/books.controller.ts | 8 +- service-a/src/books/books.module.ts | 4 +- service-a/src/books/books.service.ts | 10 +- service-a/src/books/dto/create-book.dto.ts | 10 +- service-a/src/books/schemas/book.schema.ts | 12 +- service-a/src/main.ts | 8 +- servicio-areas-comunes/src/app.module.ts | 20 +- .../common_areas/common_areas.controller.ts | 10 +- .../src/common_areas/common_areas.module.ts | 6 +- .../src/common_areas/common_areas.service.ts | 12 +- servicio-areas-comunes/src/main.ts | 20 +- .../src/schemas/common_area.schema.ts | 25 +- .../src/app.module.ts | 22 +- .../src/communities/communities.controller.ts | 12 +- .../src/communities/communities.module.ts | 19 +- .../src/communities/communities.service.ts | 42 +- servicio-comunidad-viviendas/src/main.ts | 22 +- .../src/schemas/admin.entity.ts | 6 +- .../src/schemas/community.schema.ts | 49 +- .../src/schemas/house.schema.ts | 18 +- .../src/schemas/tenant.schema.ts | 8 +- .../src/app.module.ts | 32 +- servicio-foro-comunicaciones/src/main.ts | 18 +- .../post-comments/post-comments.controller.ts | 3 +- .../src/post-comments/post-comments.module.ts | 4 +- .../post-comments/post-comments.service.ts | 13 +- .../src/posts/posts.controller.ts | 3 +- .../src/posts/posts.module.ts | 4 +- .../src/posts/posts.service.ts | 11 +- .../src/schemas/post-comment.schema.ts | 22 +- .../src/schemas/post.schema.ts | 21 +- servicio-invitados/src/app.module.ts | 20 +- .../src/guests/guests.controller.ts | 12 +- .../src/guests/guests.module.ts | 4 +- .../src/guests/guests.service.ts | 9 +- servicio-invitados/src/main.ts | 18 +- .../src/schemas/guest.schema.ts | 43 +- servicio-notificaciones/src/app.controller.ts | 2 +- servicio-notificaciones/src/app.module.ts | 16 +- .../src/auth/auth.service.ts | 3 +- .../src/email.controller.ts | 69 +- servicio-notificaciones/src/main.ts | 20 +- .../notifications/notifications.controller.ts | 15 +- .../src/notifications/notifications.module.ts | 2 +- .../src/user/user.entity.ts | 6 +- servicio-pagos/src/app.module.ts | 20 +- servicio-pagos/src/main.ts | 18 +- .../src/payments/payments.controller.ts | 14 +- .../src/payments/payments.module.ts | 5 +- .../src/payments/payments.service.ts | 13 +- servicio-pagos/src/schemas/payment.schema.ts | 33 +- servicio-reportes/src/app.module.ts | 23 +- servicio-reportes/src/main.ts | 18 +- .../src/reports/reports.controller.ts | 1 - .../src/reports/reports.module.ts | 4 +- .../src/reports/reports.service.ts | 18 +- .../src/schemas/report.schema.ts | 23 +- servicio-reservaciones/src/app.module.ts | 19 +- servicio-reservaciones/src/main.ts | 20 +- .../reservations/reservations.controller.ts | 7 +- .../src/reservations/reservations.module.ts | 8 +- .../src/reservations/reservations.service.ts | 14 +- .../src/schemas/reservation.schema.ts | 29 +- servicio-usuarios/src/app.module.ts | 19 +- servicio-usuarios/src/main.ts | 18 +- servicio-usuarios/src/schemas/user.schema.ts | 49 +- .../src/users/users.controller.ts | 15 +- servicio-usuarios/src/users/users.module.ts | 16 +- servicio-usuarios/src/users/users.service.ts | 41 +- web-ui/web-react/src/App.js | 603 +++++---- web-ui/web-react/src/App.scss | 1 - web-ui/web-react/src/App.test.js | 4 +- web-ui/web-react/src/AppConfig.js | 990 +++++++++----- web-ui/web-react/src/AppFooter.js | 26 +- web-ui/web-react/src/AppMenu.js | 254 ++-- web-ui/web-react/src/AppTopbar.js | 50 +- web-ui/web-react/src/BlockViewer.js | 94 +- web-ui/web-react/src/ScrollToTop.js | 13 +- web-ui/web-react/src/assets/demo/Badge.scss | 140 +- .../src/assets/demo/BlockViewer.scss | 260 ++-- web-ui/web-react/src/assets/demo/Demos.scss | 2 +- .../src/assets/demo/Documentation.scss | 99 +- .../web-react/src/assets/demo/MediaDemo.scss | 26 +- .../web-react/src/assets/demo/TableDemo.scss | 22 +- .../src/assets/demo/TimelineDemo.scss | 40 +- .../web-react/src/assets/demo/flags/flags.css | 741 ++++++++++- .../src/assets/layout/_overrides.scss | 2 +- .../src/assets/layout/_variables.scss | 6 +- .../web-react/src/assets/layout/layout.scss | 6 +- .../src/assets/layout/sass/_config.scss | 187 +-- .../src/assets/layout/sass/_content.scss | 14 +- .../src/assets/layout/sass/_footer.scss | 12 +- .../src/assets/layout/sass/_layout.scss | 22 +- .../src/assets/layout/sass/_main.scss | 31 +- .../src/assets/layout/sass/_menu.scss | 225 ++-- .../src/assets/layout/sass/_mixins.scss | 16 +- .../src/assets/layout/sass/_responsive.scss | 154 +-- .../src/assets/layout/sass/_splash.scss | 81 +- .../src/assets/layout/sass/_topbar.scss | 272 ++-- .../src/assets/layout/sass/_typography.scss | 65 +- .../src/assets/layout/sass/_utils.scss | 17 +- .../components/AdministradoresComunidad.js | 936 ++++++++----- .../src/components/AdministradoresSistema.js | 743 +++++++---- .../src/components/ComunidadViviendas.js | 1173 ++++++++++------- .../src/components/GuardasSeguridad.js | 233 ++-- web-ui/web-react/src/components/Inquilinos.js | 41 +- web-ui/web-react/src/components/LogIn.js | 47 +- web-ui/web-react/src/index.js | 16 +- web-ui/web-react/src/pages/Crud.js | 945 ++++++++----- web-ui/web-react/src/pages/EmptyPage.js | 25 +- web-ui/web-react/src/pages/TimelineDemo.js | 138 +- .../web-react/src/service/CountryService.js | 14 +- .../web-react/src/service/CustomerService.js | 23 +- web-ui/web-react/src/service/EventService.js | 10 +- web-ui/web-react/src/service/NodeService.js | 18 +- web-ui/web-react/src/service/PhotoService.js | 9 +- .../web-react/src/service/ProductService.js | 27 +- web-ui/web-react/src/serviceWorker.js | 20 +- web-ui/web-react/src/templates/BlocksDemo.js | 1039 +++++++++------ web-ui/web-react/src/templates/ButtonDemo.js | 542 +++++--- web-ui/web-react/src/templates/ChartDemo.js | 738 ++++++----- .../web-react/src/templates/CodeHighlight.js | 33 +- web-ui/web-react/src/templates/Dashboard.js | 815 +++++++----- .../web-react/src/templates/Documentation.js | 137 +- web-ui/web-react/src/templates/FileDemo.js | 53 +- .../web-react/src/templates/FloatLabelDemo.js | 296 +++-- .../web-react/src/templates/FormLayoutDemo.js | 247 ++-- web-ui/web-react/src/templates/IconsDemo.js | 219 +-- web-ui/web-react/src/templates/InputDemo.js | 765 ++++++----- .../src/templates/InvalidStateDemo.js | 250 ++-- web-ui/web-react/src/templates/ListDemo.js | 341 +++-- web-ui/web-react/src/templates/MediaDemo.js | 244 ++-- web-ui/web-react/src/templates/MenuDemo.js | 1124 ++++++++-------- .../web-react/src/templates/MessagesDemo.js | 255 ++-- web-ui/web-react/src/templates/MiscDemo.js | 510 ++++--- web-ui/web-react/src/templates/OverlayDemo.js | 512 ++++--- web-ui/web-react/src/templates/PanelDemo.js | 563 ++++---- web-ui/web-react/src/templates/TableDemo.js | 1055 ++++++++++----- web-ui/web-react/src/templates/TreeDemo.js | 73 +- .../src/templates/menu/ConfirmationDemo.js | 16 +- .../src/templates/menu/PaymentDemo.js | 14 +- .../src/templates/menu/PersonalDemo.js | 14 +- .../web-react/src/templates/menu/SeatDemo.js | 14 +- 148 files changed, 12443 insertions(+), 8203 deletions(-) diff --git a/api-gateway/src/app.controller.ts b/api-gateway/src/app.controller.ts index 2d02bfe4..9017c566 100644 --- a/api-gateway/src/app.controller.ts +++ b/api-gateway/src/app.controller.ts @@ -1,8 +1,8 @@ import { Controller, Get, Post, Body, Param, Delete } from '@nestjs/common'; -import { AppService } from "./app.service"; +import { AppService } from './app.service'; @Controller() export class AppController { - constructor(private readonly appService: AppService) { } + constructor(private readonly appService: AppService) {} // #==== API Users @Post('user/createAdminSystem') createAdminSystem( @@ -16,8 +16,17 @@ export class AppController { @Body('status') status: string, @Body('date_entry') date_entry: Date, ) { - return this.appService.createAdminSystem(dni, name, last_name, email, phone, password, - user_type, status, date_entry); + return this.appService.createAdminSystem( + dni, + name, + last_name, + email, + phone, + password, + user_type, + status, + date_entry, + ); } @Post('user/createGuard') @@ -32,10 +41,20 @@ export class AppController { @Body('user_type') user_type: string, @Body('status') status: string, @Body('date_entry') date_entry: Date, - @Body('community_id') community_id:string + @Body('community_id') community_id: string, ) { - return this.appService.createGuard(dni, name, last_name, email, phone, password, - user_type, status, date_entry,community_id); + return this.appService.createGuard( + dni, + name, + last_name, + email, + phone, + password, + user_type, + status, + date_entry, + community_id, + ); } @Post('user/createUser') @@ -51,8 +70,18 @@ export class AppController { @Body('date_entry') date_entry: Date, @Body('community_id') community_id: string, ) { - return this.appService.createUser(dni, name, last_name, email, phone, password, - user_type, status, date_entry, community_id); + return this.appService.createUser( + dni, + name, + last_name, + email, + phone, + password, + user_type, + status, + date_entry, + community_id, + ); } @Get('user/allUsers') @@ -65,7 +94,7 @@ export class AppController { @Body('email') pEmail: string, @Body('password') pPassword: string, ) { - return this.appService.inicioSesion(pEmail,pPassword); + return this.appService.inicioSesion(pEmail, pPassword); } @Get('user/findAdminSistema') @@ -78,24 +107,17 @@ export class AppController { return this.appService.allUsersAdminComunidad(); } @Get('user/findGuards/:community') - findGuardsCommunity( - @Param('community_id') community_id: string - ) { + findGuardsCommunity(@Param('community_id') community_id: string) { return this.appService.findGuardsCommunity(community_id); } @Get('user/find/:dni') - findUser( - @Param('dni') paramUserDNI: string - ) { + findUser(@Param('dni') paramUserDNI: string) { return this.appService.findUser(paramUserDNI); } - @Delete('user/deleteAdminSystem/:id') - deleteAdminSystem( - @Param('id') id: string, - ) { + deleteAdminSystem(@Param('id') id: string) { return this.appService.deleteAdminSystem(id); } @@ -111,11 +133,18 @@ export class AppController { @Body('status') status: string, @Body('date_entry') date_entry: Date, @Body('houses') houses: [], - ) { - return this.appService.createCommunity(name, province, canton, - district, num_houses, phone, - status, date_entry, houses); + return this.appService.createCommunity( + name, + province, + canton, + district, + num_houses, + phone, + status, + date_entry, + houses, + ); } @Get('community/allCommunities') @@ -124,25 +153,17 @@ export class AppController { } @Get('community/findCommunity/:id') - findCommunity( - @Param('id') paramCommunityId: string - ) { + findCommunity(@Param('id') paramCommunityId: string) { return this.appService.findCommunity(paramCommunityId); } @Get('community/findCommunityName/:id') - findCommunityName( - @Param('id') paramCommunityId: string - ) { + findCommunityName(@Param('id') paramCommunityId: string) { return this.appService.findCommunityName(paramCommunityId); } - - @Post('community/findCommunityAdmin') - findCommunityAdmin( - @Body('community_id') community_id: string, - ) { + findCommunityAdmin(@Body('community_id') community_id: string) { return this.appService.findCommunityAdmin(community_id); } @@ -155,22 +176,22 @@ export class AppController { @Body('bookable') bookable: number, @Body('community_id') community_id: string, ) { - - return this.appService.createCommonArea(name, hourMin, hourMax, - bookable, community_id); + return this.appService.createCommonArea( + name, + hourMin, + hourMax, + bookable, + community_id, + ); } - @Get('commonArea/allCommonAreas') allCommonAreas() { return this.appService.allCommonAreas(); } - @Get('commonArea/findCommonArea/:id') - findCommonArea( - @Param('id') paramCommonAreaId: string - ) { + findCommonArea(@Param('id') paramCommonAreaId: string) { return this.appService.findCommonArea(paramCommonAreaId); } @@ -186,7 +207,15 @@ export class AppController { @Body('status') status: string, @Body('date_entry') date_entry: Date, ) { - return this.appService.createGuest(name, last_name, dni, number_plate, phone, status, date_entry); + return this.appService.createGuest( + name, + last_name, + dni, + number_plate, + phone, + status, + date_entry, + ); } @Get('guest/allGuests') @@ -195,13 +224,10 @@ export class AppController { } @Get('guest/find/:dni') - findGuest( - @Param('dni') paramGuestDNI: string - ) { + findGuest(@Param('dni') paramGuestDNI: string) { return this.appService.findGuest(paramGuestDNI); } - // #==== API Payment @Post('payment/createPayment') @@ -214,8 +240,15 @@ export class AppController { @Body('user_id') user_id: string, @Body('communty_id') communty_id: string, ) { - return this.appService.createPayment(date_payment, mount, description, - period, status, user_id, communty_id); + return this.appService.createPayment( + date_payment, + mount, + description, + period, + status, + user_id, + communty_id, + ); } @Get('payment/allPayments') @@ -224,9 +257,7 @@ export class AppController { } @Get('payment/find/:dni') - findPayment( - @Param('dni') paramPaymentDNI: string - ) { + findPayment(@Param('dni') paramPaymentDNI: string) { return this.appService.findPayment(paramPaymentDNI); } @@ -241,8 +272,14 @@ export class AppController { @Body('user_id') user_id: string, @Body('common_area_id') common_area_id: string, ) { - return this.appService.createReservation(start_time, finish_time, status, - date_entry, user_id, common_area_id); + return this.appService.createReservation( + start_time, + finish_time, + status, + date_entry, + user_id, + common_area_id, + ); } @Get('reservation/allReservations') @@ -251,13 +288,10 @@ export class AppController { } @Get('reservation/find/:id') - findReservation( - @Param('id') paramReservation: string - ) { + findReservation(@Param('id') paramReservation: string) { return this.appService.findReservation(paramReservation); } - // #==== API Post @Post('post/createPost') @@ -276,13 +310,10 @@ export class AppController { } @Get('post/find/:id') - findPost( - @Param('id') paramPost: string - ) { + findPost(@Param('id') paramPost: string) { return this.appService.findPost(paramPost); } - // #==== API Comment @Post('post/createComment') @@ -301,14 +332,10 @@ export class AppController { } @Get('post/findComment/:id') - findComment( - @Param('id') paramComment: string - ) { + findComment(@Param('id') paramComment: string) { return this.appService.findComment(paramComment); } - - // #==== API Report @Post('report/createReport') @@ -318,7 +345,12 @@ export class AppController { @Body('date_entry') date_entry: Date, @Body('user_id') user_id: string, ) { - return this.appService.createReport(action, description, date_entry, user_id); + return this.appService.createReport( + action, + description, + date_entry, + user_id, + ); } @Get('report/allReports') @@ -327,26 +359,16 @@ export class AppController { } @Get('report/find/:id') - findReport( - @Param('id') paramReport: string - ) { + findReport(@Param('id') paramReport: string) { return this.appService.findReport(paramReport); } - @Post('email/sendMail') - senMail( - @Body('email') email: string, - ) { - + senMail(@Body('email') email: string) { return this.appService.sendMail(email); } @Post('email/html') - html( - @Body('email') email: string, - @Body('name') name: string, - ) { - + html(@Body('email') email: string, @Body('name') name: string) { return this.appService.html(email, name); } -} \ No newline at end of file +} diff --git a/api-gateway/src/app.module.ts b/api-gateway/src/app.module.ts index b15e44b3..64618c01 100644 --- a/api-gateway/src/app.module.ts +++ b/api-gateway/src/app.module.ts @@ -1,99 +1,99 @@ import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { AppService } from './app.service'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_USUARIOS", + name: 'SERVICIO_USUARIOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3001 - } - } + host: '127.0.0.1', + port: 3001, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_COMUNIDADES", + name: 'SERVICIO_COMUNIDADES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3002 - } - } + host: '127.0.0.1', + port: 3002, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_AREAS_COMUNES", + name: 'SERVICIO_AREAS_COMUNES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3003 - } - } + host: '127.0.0.1', + port: 3003, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_INVITADOS", + name: 'SERVICIO_INVITADOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3004 - } - } + host: '127.0.0.1', + port: 3004, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_PAGOS", + name: 'SERVICIO_PAGOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3005 - } - } + host: '127.0.0.1', + port: 3005, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_RESERVACIONES", + name: 'SERVICIO_RESERVACIONES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3006 - } - } + host: '127.0.0.1', + port: 3006, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_POSTS", + name: 'SERVICIO_POSTS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3007 - } - } - ]), - ClientsModule.register([ - { - name: "SERVICIO_REPORTES", - transport: Transport.TCP, - options: { - host: "127.0.0.1", - port: 3008 - } - } + host: '127.0.0.1', + port: 3007, + }, + }, ]), ClientsModule.register([ { - name: "SERVICIO_NOTIFICACIONES", + name: 'SERVICIO_REPORTES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3009 - } - } + host: '127.0.0.1', + port: 3008, + }, + }, + ]), + ClientsModule.register([ + { + name: 'SERVICIO_NOTIFICACIONES', + transport: Transport.TCP, + options: { + host: '127.0.0.1', + port: 3009, + }, + }, ]), ], controllers: [AppController], diff --git a/api-gateway/src/app.service.ts b/api-gateway/src/app.service.ts index 65ebd4f8..c61d0df8 100644 --- a/api-gateway/src/app.service.ts +++ b/api-gateway/src/app.service.ts @@ -1,68 +1,115 @@ import { Injectable, Inject } from '@nestjs/common'; -import { ClientProxy } from "@nestjs/microservices"; -import { map } from "rxjs/operators"; - +import { ClientProxy } from '@nestjs/microservices'; +import { map } from 'rxjs/operators'; @Injectable() export class AppService { constructor( @Inject('SERVICIO_USUARIOS') private readonly clientUserApp: ClientProxy, - @Inject('SERVICIO_COMUNIDADES') private readonly clientCommunityApp: ClientProxy, - @Inject('SERVICIO_AREAS_COMUNES') private readonly clientCommonAreaApp: ClientProxy, + @Inject('SERVICIO_COMUNIDADES') + private readonly clientCommunityApp: ClientProxy, + @Inject('SERVICIO_AREAS_COMUNES') + private readonly clientCommonAreaApp: ClientProxy, @Inject('SERVICIO_INVITADOS') private readonly clientGuestApp: ClientProxy, @Inject('SERVICIO_PAGOS') private readonly clientPaymentApp: ClientProxy, - @Inject('SERVICIO_RESERVACIONES') private readonly clientReservationApp: ClientProxy, + @Inject('SERVICIO_RESERVACIONES') + private readonly clientReservationApp: ClientProxy, @Inject('SERVICIO_POSTS') private readonly clientPostApp: ClientProxy, @Inject('SERVICIO_REPORTES') private readonly clientReportApp: ClientProxy, - @Inject('SERVICIO_NOTIFICACIONES') private readonly clientNotificationtApp: ClientProxy, - ) { } + @Inject('SERVICIO_NOTIFICACIONES') + private readonly clientNotificationtApp: ClientProxy, + ) {} - // ====================== USERS =============================== + // ====================== USERS =============================== //POST parameter from API - createUser(dni: string, name: string, last_name: string, email: string, phone: number - , password: string, user_type: string, status: string, date_entry: Date, community_id: string) { + createUser( + dni: string, + name: string, + last_name: string, + email: string, + phone: number, + password: string, + user_type: string, + status: string, + date_entry: Date, + community_id: string, + ) { const pattern = { cmd: 'createUser' }; const payload = { - dni: dni, name: name, last_name: last_name, email: email, phone: phone, - password: password, user_type: user_type, status: status, date_entry: date_entry, - community_id: community_id + dni: dni, + name: name, + last_name: last_name, + email: email, + phone: phone, + password: password, + user_type: user_type, + status: status, + date_entry: date_entry, + community_id: community_id, }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //POST parameter from API - createAdminSystem(dni: string, name: string, last_name: string, email: string, phone: number - , password: string, user_type: string, status: string, date_entry: Date) { + createAdminSystem( + dni: string, + name: string, + last_name: string, + email: string, + phone: number, + password: string, + user_type: string, + status: string, + date_entry: Date, + ) { const pattern = { cmd: 'createAdminSystem' }; const payload = { - dni: dni, name: name, last_name: last_name, email: email, phone: phone, - password: password, user_type: user_type, status: status, date_entry: date_entry + dni: dni, + name: name, + last_name: last_name, + email: email, + phone: phone, + password: password, + user_type: user_type, + status: status, + date_entry: date_entry, }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - createGuard(dni: string, name: string, last_name: string, email: string, phone: number - , password: string, user_type: string, status: string, date_entry: Date, community_id: string) { + createGuard( + dni: string, + name: string, + last_name: string, + email: string, + phone: number, + password: string, + user_type: string, + status: string, + date_entry: Date, + community_id: string, + ) { const pattern = { cmd: 'createGuard' }; const payload = { - dni: dni, name: name, last_name: last_name, email: email, phone: phone, - password: password, user_type: user_type, status: status, date_entry: date_entry, community_id - + dni: dni, + name: name, + last_name: last_name, + email: email, + phone: phone, + password: password, + user_type: user_type, + status: status, + date_entry: date_entry, + community_id, }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allUsers() { @@ -70,9 +117,7 @@ export class AppService { const payload = {}; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allUsersAdminSistema() { @@ -80,9 +125,7 @@ export class AppService { const payload = {}; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allUsersAdminComunidad() { @@ -90,9 +133,7 @@ export class AppService { const payload = {}; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -101,9 +142,7 @@ export class AppService { const payload = { dni: paramUserDNI }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } findGuardsCommunity(community_id: string) { @@ -111,59 +150,63 @@ export class AppService { const payload = { community_id: community_id }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - deleteAdminSystem(id: string) { const pattern = { cmd: 'deleteAdminSystem' }; const payload = { id: id }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } inicioSesion(pEmail: string, pPassword: string) { const pattern = { cmd: 'loginUser' }; - const payload = { email: pEmail, password: pPassword}; + const payload = { email: pEmail, password: pPassword }; return this.clientUserApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - //GET parameter from API findCommunityAdmin(community_id: string) { const pattern = { cmd: 'findCommunityAdmin' }; const payload = { community_id: community_id }; return this.clientCommunityApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - // ====================== COMMUNITIES =============================== + // ====================== COMMUNITIES =============================== //POST parameter from API - createCommunity(name: string, province: string, canton: string, district: string - , num_houses: number, phone: string, status: string, date_entry: Date, houses: []) { + createCommunity( + name: string, + province: string, + canton: string, + district: string, + num_houses: number, + phone: string, + status: string, + date_entry: Date, + houses: [], + ) { const pattern = { cmd: 'createCommunity' }; const payload = { - name: name, province: province, canton: canton, district: district, num_houses: num_houses, - phone: phone, status: status, date_entry: date_entry, houses: houses + name: name, + province: province, + canton: canton, + district: district, + num_houses: num_houses, + phone: phone, + status: status, + date_entry: date_entry, + houses: houses, }; return this.clientCommunityApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allCommunities() { @@ -171,9 +214,7 @@ export class AppService { const payload = {}; return this.clientCommunityApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -182,9 +223,7 @@ export class AppService { const payload = { id: paramCommunityId }; return this.clientCommunityApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } findCommunityName(paramCommunityId: string) { @@ -192,27 +231,29 @@ export class AppService { const payload = { id: paramCommunityId }; return this.clientCommunityApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - - - // ====================== COMMON AREAS =============================== + // ====================== COMMON AREAS =============================== //POST parameter from API - createCommonArea(name: string, hourMin: string, hourMax: string, - bookable: number, community_id: string) { + createCommonArea( + name: string, + hourMin: string, + hourMax: string, + bookable: number, + community_id: string, + ) { const pattern = { cmd: 'createCommonArea' }; const payload = { - name: name, hourMin: hourMin, hourMax: hourMax, bookable: bookable, - community_id: community_id + name: name, + hourMin: hourMin, + hourMax: hourMax, + bookable: bookable, + community_id: community_id, }; return this.clientCommonAreaApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allCommonAreas() { @@ -220,9 +261,7 @@ export class AppService { const payload = {}; return this.clientCommonAreaApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -231,28 +270,34 @@ export class AppService { const payload = { id: paramCommonAreaId }; return this.clientCommonAreaApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - - // ====================== GUESTS =============================== - + // ====================== GUESTS =============================== //POST parameter from API - createGuest(name: string, last_name: string, dni: string, number_plate: string, phone: number - , status: string, date_entry: Date) { + createGuest( + name: string, + last_name: string, + dni: string, + number_plate: string, + phone: number, + status: string, + date_entry: Date, + ) { const pattern = { cmd: 'createGuest' }; const payload = { - name: name, last_name: last_name, dni: dni, number_plate: number_plate, phone: phone, - status: status, date_entry: date_entry + name: name, + last_name: last_name, + dni: dni, + number_plate: number_plate, + phone: phone, + status: status, + date_entry: date_entry, }; return this.clientGuestApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allGuests() { @@ -260,9 +305,7 @@ export class AppService { const payload = {}; return this.clientGuestApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -271,26 +314,34 @@ export class AppService { const payload = { dni: paramGuestDNI }; return this.clientGuestApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - // ====================== PAYMENTS =============================== + // ====================== PAYMENTS =============================== //POST parameter from API - createPayment(date_payment: Date, mount: number, description: string, period: string - , status: string, user_id: string, communty_id: string) { + createPayment( + date_payment: Date, + mount: number, + description: string, + period: string, + status: string, + user_id: string, + communty_id: string, + ) { const pattern = { cmd: 'createPayment' }; const payload = { - date_payment: date_payment, mount: mount, description: description, - period: period, status: status, user_id: user_id, communty_id: communty_id + date_payment: date_payment, + mount: mount, + description: description, + period: period, + status: status, + user_id: user_id, + communty_id: communty_id, }; return this.clientPaymentApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allPayments() { @@ -298,9 +349,7 @@ export class AppService { const payload = {}; return this.clientPaymentApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -309,27 +358,32 @@ export class AppService { const payload = { id: paramPaymentId }; return this.clientPaymentApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - - // ====================== RESERVATIONS =============================== + // ====================== RESERVATIONS =============================== //POST parameter from API - createReservation(start_time: string, finish_time: string, status: string, - date_entry: Date, user_id: string, common_area_id: string) { + createReservation( + start_time: string, + finish_time: string, + status: string, + date_entry: Date, + user_id: string, + common_area_id: string, + ) { const pattern = { cmd: 'createReservation' }; const payload = { - start_time: start_time, finish_time: finish_time, status: status, - date_entry: date_entry, user_id: user_id, common_area_id: common_area_id + start_time: start_time, + finish_time: finish_time, + status: status, + date_entry: date_entry, + user_id: user_id, + common_area_id: common_area_id, }; return this.clientReservationApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allReservations() { @@ -337,9 +391,7 @@ export class AppService { const payload = {}; return this.clientReservationApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -348,27 +400,28 @@ export class AppService { const payload = { id: paramReservationId }; return this.clientReservationApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - - // ====================== POSTS =============================== + // ====================== POSTS =============================== //POST parameter from API - createPost(post: string, date_entry: Date, user_id: string, - community_id: string) { + createPost( + post: string, + date_entry: Date, + user_id: string, + community_id: string, + ) { const pattern = { cmd: 'createPost' }; const payload = { - post: post, date_entry: date_entry, user_id: user_id, - community_id: community_id + post: post, + date_entry: date_entry, + user_id: user_id, + community_id: community_id, }; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allPosts() { @@ -376,9 +429,7 @@ export class AppService { const payload = {}; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -387,26 +438,28 @@ export class AppService { const payload = { id: paramPostId }; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - // ====================== COMMNENT POSTS =============================== + // ====================== COMMNENT POSTS =============================== //Comment parameter from API - createComment(comment: string, date_entry: Date, user_id: string, - post_id: string) { + createComment( + comment: string, + date_entry: Date, + user_id: string, + post_id: string, + ) { const pattern = { cmd: 'createComment' }; const payload = { - comment: comment, date_entry: date_entry, user_id: user_id, - post_id: post_id + comment: comment, + date_entry: date_entry, + user_id: user_id, + post_id: post_id, }; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allComments() { @@ -414,9 +467,7 @@ export class AppService { const payload = {}; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -425,26 +476,28 @@ export class AppService { const payload = { id: paramCommentId }; return this.clientPostApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - // ====================== REPORTS =============================== + // ====================== REPORTS =============================== //Report parameter from API - createReport(action: string, description: string, date_entry: Date, - user_id: string) { + createReport( + action: string, + description: string, + date_entry: Date, + user_id: string, + ) { const pattern = { cmd: 'createReport' }; const payload = { - action: action, description: description, date_entry: date_entry, - user_id: user_id + action: action, + description: description, + date_entry: date_entry, + user_id: user_id, }; return this.clientReportApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } allReports() { @@ -452,9 +505,7 @@ export class AppService { const payload = {}; return this.clientReportApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } //GET parameter from API @@ -463,29 +514,22 @@ export class AppService { const payload = { id: paramReportId }; return this.clientReportApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - sendMail(email: string) { const pattern = { cmd: 'sendMail' }; - const payload = { email: email}; + const payload = { email: email }; return this.clientNotificationtApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } html(email: string, name: string) { const pattern = { cmd: 'html' }; - const payload = { email: email, name: name}; + const payload = { email: email, name: name }; return this.clientNotificationtApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } -} \ No newline at end of file +} diff --git a/package.json b/package.json index c2649881..752a9d13 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ }, "scripts": { "format": "npm run format:prettier && npm run format:html", - "format:prettier": "prettier --config .prettierrc \"src/**/*.{ts,css,less,scss,js}\" --write", - "format:html": "js-beautify --config .jsbeautifyrc --type 'html' --file 'src/**/*.html' --replace" + "format:prettier": "prettier --config .prettierrc \"**/src/**/*.{ts,css,less,scss,js}\" --write", + "format:html": "js-beautify --config .jsbeautifyrc --type 'html' --file '**/src/**/*.html' --replace" }, "husky": { "hooks": { diff --git a/service-a/src/app.module.ts b/service-a/src/app.module.ts index 541eebc9..fe8def72 100644 --- a/service-a/src/app.module.ts +++ b/service-a/src/app.module.ts @@ -5,9 +5,11 @@ import { MongooseModule } from '@nestjs/mongoose'; import { BooksModule } from './books/books.module'; @Module({ - imports: [ - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_books?retryWrites=true&w=majority`), - BooksModule, + imports: [ + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_books?retryWrites=true&w=majority`, + ), + BooksModule, ], controllers: [AppController], providers: [AppService], diff --git a/service-a/src/books/books.controller.ts b/service-a/src/books/books.controller.ts index 109fa967..f8eb86eb 100644 --- a/service-a/src/books/books.controller.ts +++ b/service-a/src/books/books.controller.ts @@ -9,7 +9,7 @@ import { Delete, } from '@nestjs/common'; import { ApiTags } from '@nestjs/swagger'; -import { Request } from 'express'; +import { Request } from 'express'; import { BooksService } from './books.service'; import { CreateBookDto } from './dto/create-book.dto'; import { UpdateBookDto } from './dto/update-book.dto'; @@ -26,8 +26,8 @@ export class BooksController { } @Get() - findAll(@Req() request: Request) { - return this.booksService.findAll(request); + findAll(@Req() request: Request) { + return this.booksService.findAll(request); } @Get(':id') @@ -44,4 +44,4 @@ export class BooksController { remove(@Param('id') id: string) { return this.booksService.remove(id); } -} \ No newline at end of file +} diff --git a/service-a/src/books/books.module.ts b/service-a/src/books/books.module.ts index 4fb71072..114a27ad 100644 --- a/service-a/src/books/books.module.ts +++ b/service-a/src/books/books.module.ts @@ -6,9 +6,9 @@ import { Book, BookSchema } from './schemas/book.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Book.name, schema: BookSchema }]), + MongooseModule.forFeature([{ name: Book.name, schema: BookSchema }]), ], controllers: [BooksController], - providers: [BooksService] + providers: [BooksService], }) export class BooksModule {} diff --git a/service-a/src/books/books.service.ts b/service-a/src/books/books.service.ts index d506c6c0..1c879732 100644 --- a/service-a/src/books/books.service.ts +++ b/service-a/src/books/books.service.ts @@ -4,7 +4,7 @@ import { UpdateBookDto } from './dto/update-book.dto'; import { InjectModel } from '@nestjs/mongoose'; import { Book, BookDocument } from './schemas/book.schema'; import { Model } from 'mongoose'; -import { Request } from 'express'; +import { Request } from 'express'; @Injectable() export class BooksService { @@ -16,10 +16,10 @@ export class BooksService { return this.bookModel.create(book); } - async findAll(request: Request): Promise { + async findAll(request: Request): Promise { return this.bookModel - .find(request.query) - .setOptions({ sanitizeFilter: true }) + .find(request.query) + .setOptions({ sanitizeFilter: true }) .exec(); } @@ -36,4 +36,4 @@ export class BooksService { async remove(id: string) { return this.bookModel.findByIdAndRemove({ _id: id }).exec(); } -} \ No newline at end of file +} diff --git a/service-a/src/books/dto/create-book.dto.ts b/service-a/src/books/dto/create-book.dto.ts index ca062f4a..bbead49e 100644 --- a/service-a/src/books/dto/create-book.dto.ts +++ b/service-a/src/books/dto/create-book.dto.ts @@ -1,12 +1,10 @@ import { ApiProperty } from '@nestjs/swagger'; - - export class CreateBookDto { - @ApiProperty({ + @ApiProperty({ example: 'Nest.js: A Progressive Node.js Framework (English Edition)', }) - readonly title: string; + readonly title: string; @ApiProperty({ example: 'Web Development' }) readonly genre: string; @@ -28,6 +26,6 @@ export class CreateBookDto { }) readonly image_url: string; - @ApiProperty({ example: ['NestJS', 'REST API'] }) + @ApiProperty({ example: ['NestJS', 'REST API'] }) readonly keywords: string[]; -} \ No newline at end of file +} diff --git a/service-a/src/books/schemas/book.schema.ts b/service-a/src/books/schemas/book.schema.ts index b63a3651..a2c7d4a7 100644 --- a/service-a/src/books/schemas/book.schema.ts +++ b/service-a/src/books/schemas/book.schema.ts @@ -1,11 +1,11 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; -import { Document } from 'mongoose'; +import { Document } from 'mongoose'; -export type BookDocument = Book & Document; +export type BookDocument = Book & Document; -@Schema() +@Schema() export class Book { - @Prop() + @Prop() genre: string; @Prop() @@ -20,8 +20,8 @@ export class Book { @Prop() image_url: string; - @Prop([String]) + @Prop([String]) keywords: string[]; } -export const BookSchema = SchemaFactory.createForClass(Book); \ No newline at end of file +export const BookSchema = SchemaFactory.createForClass(Book); diff --git a/service-a/src/main.ts b/service-a/src/main.ts index 5429b231..e94a0a88 100644 --- a/service-a/src/main.ts +++ b/service-a/src/main.ts @@ -6,16 +6,16 @@ async function bootstrap() { const app = await NestFactory.create(AppModule); // Configurar títulos de documentación - const options = new DocumentBuilder() + const options = new DocumentBuilder() .setTitle('MongoDB Book REST API') .setDescription('API REST para libros con MongoDB') .setVersion('1.0') .build(); - const document = SwaggerModule.createDocument(app, options); + const document = SwaggerModule.createDocument(app, options); // La ruta en que se sirve la documentación - SwaggerModule.setup('docs', app, document); + SwaggerModule.setup('docs', app, document); await app.listen(3000); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-areas-comunes/src/app.module.ts b/servicio-areas-comunes/src/app.module.ts index df28f9f9..ef3e9549 100644 --- a/servicio-areas-comunes/src/app.module.ts +++ b/servicio-areas-comunes/src/app.module.ts @@ -1,23 +1,25 @@ import { Module } from '@nestjs/common'; import { CommonAreasModule } from './common_areas/common_areas.module'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; - +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_AREAS_COMUNES", + name: 'SERVICIO_AREAS_COMUNES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3003 - } - } + host: '127.0.0.1', + port: 3003, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_areas_comunes?retryWrites=true&w=majority`), - CommonAreasModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_areas_comunes?retryWrites=true&w=majority`, + ), + CommonAreasModule, + ], controllers: [], providers: [], }) diff --git a/servicio-areas-comunes/src/common_areas/common_areas.controller.ts b/servicio-areas-comunes/src/common_areas/common_areas.controller.ts index b00fefc5..3fa8e1c6 100644 --- a/servicio-areas-comunes/src/common_areas/common_areas.controller.ts +++ b/servicio-areas-comunes/src/common_areas/common_areas.controller.ts @@ -7,28 +7,28 @@ import { CommonAreasService } from './common_areas.service'; export class CommonAreasController { constructor(private readonly commonAreasService: CommonAreasService) {} - @MessagePattern({cmd: 'createCommonArea'}) + @MessagePattern({ cmd: 'createCommonArea' }) create(@Payload() commonArea: CommonAreaDocument) { return this.commonAreasService.create(commonArea); } - @MessagePattern({cmd: 'findAllCommonAreas'}) + @MessagePattern({ cmd: 'findAllCommonAreas' }) findAll() { return this.commonAreasService.findAll(); } - @MessagePattern({cmd: 'findOneCommonArea'}) + @MessagePattern({ cmd: 'findOneCommonArea' }) findOne(@Payload() id: string) { let _id = id['_id']; return this.commonAreasService.findOne(_id); } - @MessagePattern({cmd: 'updateCommonArea'}) + @MessagePattern({ cmd: 'updateCommonArea' }) update(@Payload() commonArea: CommonAreaDocument) { return this.commonAreasService.update(commonArea.id, commonArea); } - @MessagePattern({cmd: 'removeCommonArea'}) + @MessagePattern({ cmd: 'removeCommonArea' }) remove(@Payload() id: string) { let _id = id['_id']; return this.commonAreasService.remove(_id); diff --git a/servicio-areas-comunes/src/common_areas/common_areas.module.ts b/servicio-areas-comunes/src/common_areas/common_areas.module.ts index f0420e37..5fada4ed 100644 --- a/servicio-areas-comunes/src/common_areas/common_areas.module.ts +++ b/servicio-areas-comunes/src/common_areas/common_areas.module.ts @@ -6,9 +6,11 @@ import { MongooseModule } from '@nestjs/mongoose'; import { CommonArea, CommonAreaSchema } from '../schemas/common_area.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: CommonArea.name, schema: CommonAreaSchema }]), + MongooseModule.forFeature([ + { name: CommonArea.name, schema: CommonAreaSchema }, + ]), ], controllers: [CommonAreasController], - providers: [CommonAreasService] + providers: [CommonAreasService], }) export class CommonAreasModule {} diff --git a/servicio-areas-comunes/src/common_areas/common_areas.service.ts b/servicio-areas-comunes/src/common_areas/common_areas.service.ts index 9e0ec1c4..a632a829 100644 --- a/servicio-areas-comunes/src/common_areas/common_areas.service.ts +++ b/servicio-areas-comunes/src/common_areas/common_areas.service.ts @@ -1,23 +1,23 @@ import { Injectable } from '@nestjs/common'; -import { CommonArea, CommonAreaDocument } from 'src/schemas/common_area.schema'; +import { CommonArea, CommonAreaDocument } from 'src/schemas/common_area.schema'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; @Injectable() export class CommonAreasService { - constructor( - @InjectModel(CommonArea.name) private readonly commonAreaModel: Model, + @InjectModel(CommonArea.name) + private readonly commonAreaModel: Model, ) {} async create(commonArea: CommonAreaDocument): Promise { return this.commonAreaModel.create(commonArea); } - async findAll(): Promise { + async findAll(): Promise { return this.commonAreaModel - .find() - .setOptions({ sanitizeFilter: true }) + .find() + .setOptions({ sanitizeFilter: true }) .exec(); } diff --git a/servicio-areas-comunes/src/main.ts b/servicio-areas-comunes/src/main.ts index ece9658e..6dd16c3b 100644 --- a/servicio-areas-comunes/src/main.ts +++ b/servicio-areas-comunes/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,12 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3003 - } + host: '127.0.0.1', + port: 3003, + }, }); - app.listen().then(() => logger.log("Microservice Áreas Comunes is listening" )); + app + .listen() + .then(() => logger.log('Microservice Áreas Comunes is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-areas-comunes/src/schemas/common_area.schema.ts b/servicio-areas-comunes/src/schemas/common_area.schema.ts index 23e51916..c01a32d8 100644 --- a/servicio-areas-comunes/src/schemas/common_area.schema.ts +++ b/servicio-areas-comunes/src/schemas/common_area.schema.ts @@ -1,29 +1,26 @@ - import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document } from 'mongoose'; import { Timestamp } from 'rxjs'; import { TimerOptions } from 'timers'; - export type CommonAreaDocument = CommonArea & Document; @Schema({ collection: 'common_areas' }) export class CommonArea { + @Prop() + name: string; - @Prop() - name: string; + @Prop() + hourMin: string; //hora militar, separado por dos puntos - @Prop() - hourMin: string; //hora militar, separado por dos puntos + @Prop() + hourMax: string; //hora militar, separado por dos puntos - @Prop() - hourMax: string; //hora militar, separado por dos puntos + @Prop() + bookable: number; //saber si es necesario reservarlo o no - @Prop() - bookable: number; //saber si es necesario reservarlo o no - - @Prop() - community_id: string; + @Prop() + community_id: string; } -export const CommonAreaSchema = SchemaFactory.createForClass(CommonArea); \ No newline at end of file +export const CommonAreaSchema = SchemaFactory.createForClass(CommonArea); diff --git a/servicio-comunidad-viviendas/src/app.module.ts b/servicio-comunidad-viviendas/src/app.module.ts index fed96129..7a407e87 100644 --- a/servicio-comunidad-viviendas/src/app.module.ts +++ b/servicio-comunidad-viviendas/src/app.module.ts @@ -1,24 +1,26 @@ import { Module } from '@nestjs/common'; import { CommunitiesModule } from './communities/communities.module'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; - +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_COMUNIDADES", + name: 'SERVICIO_COMUNIDADES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3002 - } - } + host: '127.0.0.1', + port: 3002, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_comunidades?retryWrites=true&w=majority`), - CommunitiesModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_comunidades?retryWrites=true&w=majority`, + ), + CommunitiesModule, + ], controllers: [], providers: [], }) -export class AppModule { } +export class AppModule {} diff --git a/servicio-comunidad-viviendas/src/communities/communities.controller.ts b/servicio-comunidad-viviendas/src/communities/communities.controller.ts index a4e29859..16af1dda 100644 --- a/servicio-comunidad-viviendas/src/communities/communities.controller.ts +++ b/servicio-comunidad-viviendas/src/communities/communities.controller.ts @@ -12,35 +12,35 @@ export class CommunitiesController { return this.communitiesService.create(community); } - @MessagePattern({cmd: 'findAllCommunities'}) + @MessagePattern({ cmd: 'findAllCommunities' }) findAll() { return this.communitiesService.findAll(); } - @MessagePattern({cmd: 'findOneCommunity'}) + @MessagePattern({ cmd: 'findOneCommunity' }) findOne(@Payload() id: string) { let _id = id['_id']; return this.communitiesService.findOne(_id); } - @MessagePattern({cmd: 'findCommunityName'}) + @MessagePattern({ cmd: 'findCommunityName' }) findOneName(@Payload() id: string) { let _id = id['id']; return this.communitiesService.findOneName(_id); } - /* @MessagePattern({cmd: 'findCommunityAdmin'}) + /* @MessagePattern({cmd: 'findCommunityAdmin'}) findCommunityAdmin(@Payload() community: any) { let _community = community['community_id']; return this.communitiesService.findCommunityAdmin(_community, "2"); }*/ - @MessagePattern({cmd: 'updateCommunity'}) + @MessagePattern({ cmd: 'updateCommunity' }) update(@Payload() community: CommunityDocument) { return this.communitiesService.update(community.id, community); } - @MessagePattern({cmd: 'removeCommunity'}) + @MessagePattern({ cmd: 'removeCommunity' }) remove(@Payload() id: string) { let _id = id['_id']; return this.communitiesService.remove(_id); diff --git a/servicio-comunidad-viviendas/src/communities/communities.module.ts b/servicio-comunidad-viviendas/src/communities/communities.module.ts index 30c0d9b0..8b24e5e1 100644 --- a/servicio-comunidad-viviendas/src/communities/communities.module.ts +++ b/servicio-comunidad-viviendas/src/communities/communities.module.ts @@ -2,26 +2,27 @@ import { Module } from '@nestjs/common'; import { CommunitiesService } from './communities.service'; import { CommunitiesController } from './communities.controller'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { Community, CommunitySchema } from '../schemas/community.schema'; - @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_USUARIOS", + name: 'SERVICIO_USUARIOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3001 - } - } + host: '127.0.0.1', + port: 3001, + }, + }, + ]), + MongooseModule.forFeature([ + { name: Community.name, schema: CommunitySchema }, ]), - MongooseModule.forFeature([{ name: Community.name, schema: CommunitySchema }]), ], controllers: [CommunitiesController], - providers: [CommunitiesService] + providers: [CommunitiesService], }) export class CommunitiesModule {} diff --git a/servicio-comunidad-viviendas/src/communities/communities.service.ts b/servicio-comunidad-viviendas/src/communities/communities.service.ts index 0ef3e060..06792ef5 100644 --- a/servicio-comunidad-viviendas/src/communities/communities.service.ts +++ b/servicio-comunidad-viviendas/src/communities/communities.service.ts @@ -7,40 +7,39 @@ import { from, lastValueFrom, map, scan, mergeMap } from 'rxjs'; import { Admin } from 'src/schemas/admin.entity'; import { appendFileSync } from 'fs'; - @Injectable() export class CommunitiesService { - constructor( - @InjectModel(Community.name) private readonly communityModel: Model, + @InjectModel(Community.name) + private readonly communityModel: Model, @Inject('SERVICIO_USUARIOS') private readonly clientUserApp: ClientProxy, - - ) { } + ) {} async create(community: CommunityDocument): Promise { return this.communityModel.create(community); } async findAll(): Promise { - return await this.communityModel .find() .setOptions({ sanitizeFilter: true }) .exec() - .then(async community => { + .then(async (community) => { if (community) { - await Promise.all(community.map(async c => { - //buscar al usuario con el id de la comunidad anexado - let admin = await this.findCommunityAdmin(c["_id"], "2") - if (admin) { - c["id_admin"] = admin["_id"] - c["name_admin"] = admin["name"] - } - return c - })) + await Promise.all( + community.map(async (c) => { + //buscar al usuario con el id de la comunidad anexado + let admin = await this.findCommunityAdmin(c['_id'], '2'); + if (admin) { + c['id_admin'] = admin['_id']; + c['name_admin'] = admin['name']; + } + return c; + }), + ); } return community; - }) + }); } findOne(id: string): Promise { @@ -61,17 +60,14 @@ export class CommunitiesService { } async findCommunityAdmin(community: string, user_type: string) { - const pattern = { cmd: 'findOneCommunityUser' } - const payload = { community_id: community, user_type: user_type } + const pattern = { cmd: 'findOneCommunityUser' }; + const payload = { community_id: community, user_type: user_type }; let callback = await this.clientUserApp .send(pattern, payload) - .pipe( - map((response: string) => ({ response })) - ) + .pipe(map((response: string) => ({ response }))); const finalValue = await lastValueFrom(callback); return finalValue['response']; - } } diff --git a/servicio-comunidad-viviendas/src/main.ts b/servicio-comunidad-viviendas/src/main.ts index 3e597780..77367b10 100644 --- a/servicio-comunidad-viviendas/src/main.ts +++ b/servicio-comunidad-viviendas/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,14 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3002 - } + host: '127.0.0.1', + port: 3002, + }, }); - app.listen().then(() => logger.log("Microservice Comunidades de vivienda is listening" )); + app + .listen() + .then(() => + logger.log('Microservice Comunidades de vivienda is listening'), + ); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-comunidad-viviendas/src/schemas/admin.entity.ts b/servicio-comunidad-viviendas/src/schemas/admin.entity.ts index c9648048..cfe32341 100644 --- a/servicio-comunidad-viviendas/src/schemas/admin.entity.ts +++ b/servicio-comunidad-viviendas/src/schemas/admin.entity.ts @@ -1,4 +1,4 @@ export interface Admin { - id_community: string; - user_type: string; -} \ No newline at end of file + id_community: string; + user_type: string; +} diff --git a/servicio-comunidad-viviendas/src/schemas/community.schema.ts b/servicio-comunidad-viviendas/src/schemas/community.schema.ts index e1f1cdd0..10f54c7f 100644 --- a/servicio-comunidad-viviendas/src/schemas/community.schema.ts +++ b/servicio-comunidad-viviendas/src/schemas/community.schema.ts @@ -2,45 +2,42 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document } from 'mongoose'; import { House, HouseSchema } from './house.schema'; - export type CommunityDocument = Community & Document; @Schema({ collection: 'communities' }) export class Community { - @Prop() - id_admin: string; + @Prop() + id_admin: string; - @Prop() - name_admin: string ; + @Prop() + name_admin: string; - @Prop() - name: string; + @Prop() + name: string; - @Prop() - province: string; + @Prop() + province: string; - @Prop() - canton: string; + @Prop() + canton: string; - @Prop() - district: string; + @Prop() + district: string; - @Prop() - num_houses: number; + @Prop() + num_houses: number; - @Prop() - phone: string; + @Prop() + phone: string; - @Prop() - status: string; + @Prop() + status: string; - @Prop() - date_entry: Date; - - @Prop({ type: [HouseSchema] }) - houses: Array; + @Prop() + date_entry: Date; + @Prop({ type: [HouseSchema] }) + houses: Array; } - -export const CommunitySchema = SchemaFactory.createForClass(Community); \ No newline at end of file +export const CommunitySchema = SchemaFactory.createForClass(Community); diff --git a/servicio-comunidad-viviendas/src/schemas/house.schema.ts b/servicio-comunidad-viviendas/src/schemas/house.schema.ts index cae12f9d..d85c31c6 100644 --- a/servicio-comunidad-viviendas/src/schemas/house.schema.ts +++ b/servicio-comunidad-viviendas/src/schemas/house.schema.ts @@ -4,17 +4,15 @@ import { Document } from 'mongoose'; import { empty } from 'rxjs'; import { Tenant, TenantSchema } from './tenant.schema'; - - @Schema() -export class House extends Document { - @Prop({ default: " " }) - number_house: string; +export class House extends Document { + @Prop({ default: ' ' }) + number_house: string; - @Prop({ default: "desocupada" }) - state: string; + @Prop({ default: 'desocupada' }) + state: string; - @Prop({ type: TenantSchema }) - tenants: Tenant; + @Prop({ type: TenantSchema }) + tenants: Tenant; } -export const HouseSchema = SchemaFactory.createForClass(House); \ No newline at end of file +export const HouseSchema = SchemaFactory.createForClass(House); diff --git a/servicio-comunidad-viviendas/src/schemas/tenant.schema.ts b/servicio-comunidad-viviendas/src/schemas/tenant.schema.ts index c0e66ec5..a1ac09de 100644 --- a/servicio-comunidad-viviendas/src/schemas/tenant.schema.ts +++ b/servicio-comunidad-viviendas/src/schemas/tenant.schema.ts @@ -1,11 +1,9 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; - - @Schema() export class Tenant { - @Prop( {default: ''}) - tenant_id: string; + @Prop({ default: '' }) + tenant_id: string; } -export const TenantSchema = SchemaFactory.createForClass(Tenant); \ No newline at end of file +export const TenantSchema = SchemaFactory.createForClass(Tenant); diff --git a/servicio-foro-comunicaciones/src/app.module.ts b/servicio-foro-comunicaciones/src/app.module.ts index 1d4a7a7a..042e438d 100644 --- a/servicio-foro-comunicaciones/src/app.module.ts +++ b/servicio-foro-comunicaciones/src/app.module.ts @@ -1,23 +1,27 @@ import { Module } from '@nestjs/common'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { PostsModule } from './posts/posts.module'; import { PostCommentsModule } from './post-comments/post-comments.module'; @Module({ - imports: [ ClientsModule.register([ - { - name: "SERVICIO_POSTS", - transport: Transport.TCP, - options: { - host: "127.0.0.1", - port: 3007 - } - } - ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_posts?retryWrites=true&w=majority`), - PostsModule, - PostCommentsModule], + imports: [ + ClientsModule.register([ + { + name: 'SERVICIO_POSTS', + transport: Transport.TCP, + options: { + host: '127.0.0.1', + port: 3007, + }, + }, + ]), + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_posts?retryWrites=true&w=majority`, + ), + PostsModule, + PostCommentsModule, + ], controllers: [], providers: [], }) diff --git a/servicio-foro-comunicaciones/src/main.ts b/servicio-foro-comunicaciones/src/main.ts index e6451292..b3a55454 100644 --- a/servicio-foro-comunicaciones/src/main.ts +++ b/servicio-foro-comunicaciones/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,10 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3007 - } + host: '127.0.0.1', + port: 3007, + }, }); - app.listen().then(() => logger.log("Microservice Comunicados is listening" )); + app.listen().then(() => logger.log('Microservice Comunicados is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-foro-comunicaciones/src/post-comments/post-comments.controller.ts b/servicio-foro-comunicaciones/src/post-comments/post-comments.controller.ts index 8d999b8b..14113432 100644 --- a/servicio-foro-comunicaciones/src/post-comments/post-comments.controller.ts +++ b/servicio-foro-comunicaciones/src/post-comments/post-comments.controller.ts @@ -3,7 +3,6 @@ import { MessagePattern, Payload } from '@nestjs/microservices'; import { PostCommentsService } from './post-comments.service'; import { Comment, CommentDocument } from '../schemas/post-comment.schema'; - @Controller() export class PostCommentsController { constructor(private readonly postCommentsService: PostCommentsService) {} @@ -18,7 +17,7 @@ export class PostCommentsController { return this.postCommentsService.findAll(); } - @MessagePattern({cmd: 'findOneComment'}) + @MessagePattern({ cmd: 'findOneComment' }) findOne(@Payload() id: string) { let _id = id['id']; return this.postCommentsService.findOne(_id); diff --git a/servicio-foro-comunicaciones/src/post-comments/post-comments.module.ts b/servicio-foro-comunicaciones/src/post-comments/post-comments.module.ts index 70b26350..89304321 100644 --- a/servicio-foro-comunicaciones/src/post-comments/post-comments.module.ts +++ b/servicio-foro-comunicaciones/src/post-comments/post-comments.module.ts @@ -6,9 +6,9 @@ import { Comment, CommentSchema } from '../schemas/post-comment.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Comment.name, schema: CommentSchema }]), + MongooseModule.forFeature([{ name: Comment.name, schema: CommentSchema }]), ], controllers: [PostCommentsController], - providers: [PostCommentsService] + providers: [PostCommentsService], }) export class PostCommentsModule {} diff --git a/servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts b/servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts index 525697d3..4b8a0c0a 100644 --- a/servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts +++ b/servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts @@ -3,24 +3,21 @@ import { Comment, CommentDocument } from '../schemas/post-comment.schema'; import { Model } from 'mongoose'; import { InjectModel } from '@nestjs/mongoose'; - @Injectable() export class PostCommentsService { constructor( - @InjectModel(Comment.name) private readonly commentModel: Model, + @InjectModel(Comment.name) + private readonly commentModel: Model, ) {} async create(comment: CommentDocument): Promise { return this.commentModel.create(comment); } - async findAll(): Promise { - return this.commentModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + async findAll(): Promise { + return this.commentModel.find().setOptions({ sanitizeFilter: true }).exec(); } - + async findOne(id: string): Promise { return this.commentModel.findOne({ _id: id }).exec(); } diff --git a/servicio-foro-comunicaciones/src/posts/posts.controller.ts b/servicio-foro-comunicaciones/src/posts/posts.controller.ts index 6779d5ca..9872892c 100644 --- a/servicio-foro-comunicaciones/src/posts/posts.controller.ts +++ b/servicio-foro-comunicaciones/src/posts/posts.controller.ts @@ -3,10 +3,9 @@ import { MessagePattern, Payload } from '@nestjs/microservices'; import { PostsService } from './posts.service'; import { Post, PostDocument } from '../schemas/post.schema'; - @Controller() export class PostsController { - constructor(private readonly postsService: PostsService) { } + constructor(private readonly postsService: PostsService) {} @MessagePattern({ cmd: 'createPost' }) create(@Payload() post: PostDocument) { diff --git a/servicio-foro-comunicaciones/src/posts/posts.module.ts b/servicio-foro-comunicaciones/src/posts/posts.module.ts index d47c06aa..0b89da25 100644 --- a/servicio-foro-comunicaciones/src/posts/posts.module.ts +++ b/servicio-foro-comunicaciones/src/posts/posts.module.ts @@ -6,9 +6,9 @@ import { MongooseModule } from '@nestjs/mongoose'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Post.name, schema: PostSchema }]), + MongooseModule.forFeature([{ name: Post.name, schema: PostSchema }]), ], controllers: [PostsController], - providers: [PostsService] + providers: [PostsService], }) export class PostsModule {} diff --git a/servicio-foro-comunicaciones/src/posts/posts.service.ts b/servicio-foro-comunicaciones/src/posts/posts.service.ts index 9442a198..7423aec2 100644 --- a/servicio-foro-comunicaciones/src/posts/posts.service.ts +++ b/servicio-foro-comunicaciones/src/posts/posts.service.ts @@ -7,19 +7,16 @@ import { InjectModel } from '@nestjs/mongoose'; export class PostsService { constructor( @InjectModel(Post.name) private readonly postModel: Model, - ) { } + ) {} async create(post: PostDocument): Promise { return this.postModel.create(post); } - async findAll(): Promise { - return this.postModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + async findAll(): Promise { + return this.postModel.find().setOptions({ sanitizeFilter: true }).exec(); } - + async findOne(id: string): Promise { return this.postModel.findOne({ _id: id }).exec(); } diff --git a/servicio-foro-comunicaciones/src/schemas/post-comment.schema.ts b/servicio-foro-comunicaciones/src/schemas/post-comment.schema.ts index 8ba0d65f..293e50f9 100644 --- a/servicio-foro-comunicaciones/src/schemas/post-comment.schema.ts +++ b/servicio-foro-comunicaciones/src/schemas/post-comment.schema.ts @@ -1,25 +1,21 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document, ObjectId } from 'mongoose'; - export type CommentDocument = Comment & Document; @Schema({ collection: 'comments' }) export class Comment { - - @Prop() - comment: string; + @Prop() + comment: string; - @Prop() - date_entry: Date; + @Prop() + date_entry: Date; - @Prop() - user_id: string - - @Prop() - post_id: string; + @Prop() + user_id: string; + @Prop() + post_id: string; } - -export const CommentSchema = SchemaFactory.createForClass(Comment); \ No newline at end of file +export const CommentSchema = SchemaFactory.createForClass(Comment); diff --git a/servicio-foro-comunicaciones/src/schemas/post.schema.ts b/servicio-foro-comunicaciones/src/schemas/post.schema.ts index d76f724f..5289a489 100644 --- a/servicio-foro-comunicaciones/src/schemas/post.schema.ts +++ b/servicio-foro-comunicaciones/src/schemas/post.schema.ts @@ -1,24 +1,21 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document, ObjectId } from 'mongoose'; - export type PostDocument = Post & Document; @Schema({ collection: 'posts' }) export class Post { - - @Prop() - post: string; + @Prop() + post: string; - @Prop() - date_entry: Date; + @Prop() + date_entry: Date; - @Prop() - user_id: string + @Prop() + user_id: string; - @Prop() - community_id: string // id de la comunidad + @Prop() + community_id: string; // id de la comunidad } - -export const PostSchema = SchemaFactory.createForClass(Post); \ No newline at end of file +export const PostSchema = SchemaFactory.createForClass(Post); diff --git a/servicio-invitados/src/app.module.ts b/servicio-invitados/src/app.module.ts index 174c7ba4..06f35bde 100644 --- a/servicio-invitados/src/app.module.ts +++ b/servicio-invitados/src/app.module.ts @@ -1,23 +1,25 @@ import { Module } from '@nestjs/common'; import { GuestsModule } from './guests/guests.module'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; - +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_INVITADOS", + name: 'SERVICIO_INVITADOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3004 - } - } + host: '127.0.0.1', + port: 3004, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_invitados?retryWrites=true&w=majority`), - GuestsModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_invitados?retryWrites=true&w=majority`, + ), + GuestsModule, + ], controllers: [], providers: [], }) diff --git a/servicio-invitados/src/guests/guests.controller.ts b/servicio-invitados/src/guests/guests.controller.ts index 05f370c0..c9b67ad2 100644 --- a/servicio-invitados/src/guests/guests.controller.ts +++ b/servicio-invitados/src/guests/guests.controller.ts @@ -7,34 +7,34 @@ import { Guest, GuestDocument } from 'src/schemas/guest.schema'; export class GuestsController { constructor(private readonly guestsService: GuestsService) {} - @MessagePattern( {cmd:'createGuest'}) + @MessagePattern({ cmd: 'createGuest' }) create(@Payload() guest: GuestDocument) { return this.guestsService.create(guest); } - @MessagePattern( {cmd:'findAllGuests'}) + @MessagePattern({ cmd: 'findAllGuests' }) findAll() { return this.guestsService.findAll(); } - @MessagePattern( {cmd:'findOneGuest'}) + @MessagePattern({ cmd: 'findOneGuest' }) findOneById(@Payload() id: string) { let _id = id['_id']; return this.guestsService.findOneId(_id); } - @MessagePattern( {cmd:'findGuestDNI'}) + @MessagePattern({ cmd: 'findGuestDNI' }) findOneByDNI(@Payload() id: string) { let dni = id['dni']; return this.guestsService.findOne(dni); } - @MessagePattern( {cmd:'updateGuest'}) + @MessagePattern({ cmd: 'updateGuest' }) update(@Payload() guest: GuestDocument) { return this.guestsService.update(guest.id, guest); } - @MessagePattern( {cmd:'removeGuest'}) + @MessagePattern({ cmd: 'removeGuest' }) remove(@Payload() id: string) { let dni = id['dni']; return this.guestsService.remove(dni); diff --git a/servicio-invitados/src/guests/guests.module.ts b/servicio-invitados/src/guests/guests.module.ts index 8d64ad14..b04a10df 100644 --- a/servicio-invitados/src/guests/guests.module.ts +++ b/servicio-invitados/src/guests/guests.module.ts @@ -5,9 +5,9 @@ import { MongooseModule } from '@nestjs/mongoose'; import { Guest, GuestSchema } from 'src/schemas/guest.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Guest.name, schema: GuestSchema }]), + MongooseModule.forFeature([{ name: Guest.name, schema: GuestSchema }]), ], controllers: [GuestsController], - providers: [GuestsService] + providers: [GuestsService], }) export class GuestsModule {} diff --git a/servicio-invitados/src/guests/guests.service.ts b/servicio-invitados/src/guests/guests.service.ts index db6bc9d5..97e1c4bd 100644 --- a/servicio-invitados/src/guests/guests.service.ts +++ b/servicio-invitados/src/guests/guests.service.ts @@ -13,19 +13,14 @@ export class GuestsService { return this.guestModel.create(guest); } - async findAll(): Promise { - return this.guestModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + async findAll(): Promise { + return this.guestModel.find().setOptions({ sanitizeFilter: true }).exec(); } - findOneId(id: string): Promise { return this.guestModel.findOne({ _id: id }).exec(); } - findOne(id: string): Promise { return this.guestModel.findOne({ dni: id }).exec(); } diff --git a/servicio-invitados/src/main.ts b/servicio-invitados/src/main.ts index 49b5c536..ee0f542c 100644 --- a/servicio-invitados/src/main.ts +++ b/servicio-invitados/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,10 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3004 - } + host: '127.0.0.1', + port: 3004, + }, }); - app.listen().then(() => logger.log("Microservice Invitados is listening" )); + app.listen().then(() => logger.log('Microservice Invitados is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-invitados/src/schemas/guest.schema.ts b/servicio-invitados/src/schemas/guest.schema.ts index 99cff0fe..c381254a 100644 --- a/servicio-invitados/src/schemas/guest.schema.ts +++ b/servicio-invitados/src/schemas/guest.schema.ts @@ -1,40 +1,37 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document } from 'mongoose'; - export type GuestDocument = Guest & Document; @Schema({ collection: 'guests' }) export class Guest { + @Prop() + name: string; - @Prop() - name: string; + @Prop() + last_name: string; - @Prop() - last_name: string; + @Prop() + dni: string; - @Prop() - dni: string; + @Prop() + phone: number; - @Prop() - phone: number; + @Prop() + number_plate: string; - @Prop() - number_plate: string; + @Prop() + status: string; - @Prop() - status: string; + @Prop() + date_entry: Date; - @Prop() - date_entry: Date; + @Prop() + tenant_id: string; - @Prop() - tenant_id: string; - - @Prop() - community_id: string; ///creo que se debe de agregar para facilitar al guarda ver - // ver los invitados de x comunidad + @Prop() + community_id: string; ///creo que se debe de agregar para facilitar al guarda ver + // ver los invitados de x comunidad } - -export const GuestSchema = SchemaFactory.createForClass(Guest); +export const GuestSchema = SchemaFactory.createForClass(Guest); diff --git a/servicio-notificaciones/src/app.controller.ts b/servicio-notificaciones/src/app.controller.ts index a361ad7e..1059f4b1 100644 --- a/servicio-notificaciones/src/app.controller.ts +++ b/servicio-notificaciones/src/app.controller.ts @@ -6,6 +6,6 @@ export class AppController { @Get() getHello(): string { - return "hola"; + return 'hola'; } } diff --git a/servicio-notificaciones/src/app.module.ts b/servicio-notificaciones/src/app.module.ts index 9ce4e8cc..513da4aa 100644 --- a/servicio-notificaciones/src/app.module.ts +++ b/servicio-notificaciones/src/app.module.ts @@ -1,14 +1,13 @@ import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { MailerModule } from '@nestjs-modules/mailer'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { AuthModule } from './auth/auth.module'; import { EmailController } from './email.controller'; import { join } from 'path'; import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter'; import { ConfigModule, ConfigService } from '@nestjs/config'; - @Module({ imports: [ MailerModule.forRootAsync({ @@ -42,15 +41,16 @@ import { ConfigModule, ConfigService } from '@nestjs/config'; }), ClientsModule.register([ { - name: "SERVICIO_NOTIFICACIONES", + name: 'SERVICIO_NOTIFICACIONES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3009 - } - } + host: '127.0.0.1', + port: 3009, + }, + }, ]), - AuthModule], + AuthModule, + ], controllers: [AppController, EmailController], providers: [], }) diff --git a/servicio-notificaciones/src/auth/auth.service.ts b/servicio-notificaciones/src/auth/auth.service.ts index 015d7181..3adcbc76 100644 --- a/servicio-notificaciones/src/auth/auth.service.ts +++ b/servicio-notificaciones/src/auth/auth.service.ts @@ -3,11 +3,10 @@ import { User } from './../user/user.entity'; @Injectable() export class AuthService { - async signUp(user: User) { const token = Math.floor(1000 + Math.random() * 9000).toString(); // create user in db // ... // send confirmation mail } -} \ No newline at end of file +} diff --git a/servicio-notificaciones/src/email.controller.ts b/servicio-notificaciones/src/email.controller.ts index c18340a0..7af1d7ad 100644 --- a/servicio-notificaciones/src/email.controller.ts +++ b/servicio-notificaciones/src/email.controller.ts @@ -6,41 +6,40 @@ import { User } from './user/user.entity'; @Controller() export class EmailController { - constructor(private mailService: MailerService) { } + constructor(private mailService: MailerService) {} - @MessagePattern({ cmd: 'sendMail' }) - sendMail(@Payload() toEmail: string) { + @MessagePattern({ cmd: 'sendMail' }) + sendMail(@Payload() toEmail: string) { + var response = this.mailService.sendMail({ + to: toEmail['email'], + from: 'mbonilla.guti@gmail.com', + subject: 'Plain Text Email ✔', + text: 'Welcome NestJS Email Sending Tutorial', + }); + return response; + } - var response = this.mailService.sendMail({ - to: toEmail["email"], - from: "mbonilla.guti@gmail.com", - subject: 'Plain Text Email ✔', - text: 'Welcome NestJS Email Sending Tutorial', - }); - return response; - } - - @MessagePattern({ cmd: 'html' }) - async postHTMLEmail(@Payload() user: any) { - const url = "http://localhost:3000/"; - const image = "images/email.ong"; - var response = await this.mailService.sendMail({ - to: user["email"], - from: "mbonilla.guti@gmail.com", - subject: 'HTML Dynamic Template', - template: 'templateEmail', - context: { - name: user["name"], - url - }, - attachments: [ - { - filename: 'email.png', - path: __dirname +'/mails/images/email.png', - cid: 'logo' //my mistake was putting "cid:logo@cid" here! - } - ] - }); - return response; - } + @MessagePattern({ cmd: 'html' }) + async postHTMLEmail(@Payload() user: any) { + const url = 'http://localhost:3000/'; + const image = 'images/email.ong'; + var response = await this.mailService.sendMail({ + to: user['email'], + from: 'mbonilla.guti@gmail.com', + subject: 'HTML Dynamic Template', + template: 'templateEmail', + context: { + name: user['name'], + url, + }, + attachments: [ + { + filename: 'email.png', + path: __dirname + '/mails/images/email.png', + cid: 'logo', //my mistake was putting "cid:logo@cid" here! + }, + ], + }); + return response; + } } diff --git a/servicio-notificaciones/src/main.ts b/servicio-notificaciones/src/main.ts index 86642811..09892810 100644 --- a/servicio-notificaciones/src/main.ts +++ b/servicio-notificaciones/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,12 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3009 - } + host: '127.0.0.1', + port: 3009, + }, }); - app.listen().then(() => logger.log("Microservice Notificaciones is listening" )); + app + .listen() + .then(() => logger.log('Microservice Notificaciones is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-notificaciones/src/notifications/notifications.controller.ts b/servicio-notificaciones/src/notifications/notifications.controller.ts index 063bf4fd..4d8484f7 100644 --- a/servicio-notificaciones/src/notifications/notifications.controller.ts +++ b/servicio-notificaciones/src/notifications/notifications.controller.ts @@ -8,27 +8,30 @@ import { UpdateNotificationDto } from './dto/update-notification.dto'; export class NotificationsController { constructor(private readonly notificationsService: NotificationsService) {} - @MessagePattern({cmd: 'createNotification'}) + @MessagePattern({ cmd: 'createNotification' }) create(@Payload() createNotificationDto: CreateNotificationDto) { return this.notificationsService.create(createNotificationDto); } - @MessagePattern({cmd: 'findAllNotifications'}) + @MessagePattern({ cmd: 'findAllNotifications' }) findAll() { return this.notificationsService.findAll(); } - @MessagePattern({cmd: 'findOneNotification'}) + @MessagePattern({ cmd: 'findOneNotification' }) findOne(@Payload() id: number) { return this.notificationsService.findOne(id); } - @MessagePattern({cmd: 'updateNotification'}) + @MessagePattern({ cmd: 'updateNotification' }) update(@Payload() updateNotificationDto: UpdateNotificationDto) { - return this.notificationsService.update(updateNotificationDto.id, updateNotificationDto); + return this.notificationsService.update( + updateNotificationDto.id, + updateNotificationDto, + ); } - @MessagePattern({cmd: 'removeNotification'}) + @MessagePattern({ cmd: 'removeNotification' }) remove(@Payload() id: number) { return this.notificationsService.remove(id); } diff --git a/servicio-notificaciones/src/notifications/notifications.module.ts b/servicio-notificaciones/src/notifications/notifications.module.ts index d7449eda..a3b7b79c 100644 --- a/servicio-notificaciones/src/notifications/notifications.module.ts +++ b/servicio-notificaciones/src/notifications/notifications.module.ts @@ -4,6 +4,6 @@ import { NotificationsController } from './notifications.controller'; @Module({ controllers: [NotificationsController], - providers: [NotificationsService] + providers: [NotificationsService], }) export class NotificationsModule {} diff --git a/servicio-notificaciones/src/user/user.entity.ts b/servicio-notificaciones/src/user/user.entity.ts index 95547694..8b134a80 100644 --- a/servicio-notificaciones/src/user/user.entity.ts +++ b/servicio-notificaciones/src/user/user.entity.ts @@ -1,4 +1,4 @@ export interface User { - email: string; - name: string; -} \ No newline at end of file + email: string; + name: string; +} diff --git a/servicio-pagos/src/app.module.ts b/servicio-pagos/src/app.module.ts index 54966eb4..cdfd2c9b 100644 --- a/servicio-pagos/src/app.module.ts +++ b/servicio-pagos/src/app.module.ts @@ -1,23 +1,25 @@ import { Module } from '@nestjs/common'; import { PaymentsModule } from './payments/payments.module'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; - +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_PAGOS", + name: 'SERVICIO_PAGOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3005 - } - } + host: '127.0.0.1', + port: 3005, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_pagos?retryWrites=true&w=majority`), - PaymentsModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_pagos?retryWrites=true&w=majority`, + ), + PaymentsModule, + ], controllers: [], providers: [], }) diff --git a/servicio-pagos/src/main.ts b/servicio-pagos/src/main.ts index 40f8c1af..8f087914 100644 --- a/servicio-pagos/src/main.ts +++ b/servicio-pagos/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,10 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3005 - } + host: '127.0.0.1', + port: 3005, + }, }); - app.listen().then(() => logger.log("Microservice Invitados is listening" )); + app.listen().then(() => logger.log('Microservice Invitados is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-pagos/src/payments/payments.controller.ts b/servicio-pagos/src/payments/payments.controller.ts index 04a170ac..e8578fbd 100644 --- a/servicio-pagos/src/payments/payments.controller.ts +++ b/servicio-pagos/src/payments/payments.controller.ts @@ -7,40 +7,40 @@ import { Payment, PaymentDocument } from 'src/schemas/payment.schema'; export class PaymentsController { constructor(private readonly paymentsService: PaymentsService) {} - @MessagePattern({cmd: 'createPayment'}) + @MessagePattern({ cmd: 'createPayment' }) create(@Payload() payment: PaymentDocument) { return this.paymentsService.create(payment); } - @MessagePattern({cmd: 'findAllPayments'}) + @MessagePattern({ cmd: 'findAllPayments' }) findAll() { return this.paymentsService.findAll(); } - @MessagePattern({cmd: 'findOnePayment'}) + @MessagePattern({ cmd: 'findOnePayment' }) findOne(@Payload() id: string) { let _id = id['_id']; return this.paymentsService.findOneId(_id); } - @MessagePattern({cmd: 'findPaymentsByUser'}) + @MessagePattern({ cmd: 'findPaymentsByUser' }) findByUser(@Payload() id: string) { let user_id = id['user_id']; return this.paymentsService.findByUser(user_id); } - @MessagePattern({cmd: 'findPaymentsByCommunity'}) + @MessagePattern({ cmd: 'findPaymentsByCommunity' }) findByCommunity(@Payload() id: string) { let community_id = id['community_id']; return this.paymentsService.findByUser(community_id); } - @MessagePattern({cmd: 'updatePayment'}) + @MessagePattern({ cmd: 'updatePayment' }) update(@Payload() payment: PaymentDocument) { return this.paymentsService.update(payment.id, payment); } - @MessagePattern({cmd: 'removePayment'}) + @MessagePattern({ cmd: 'removePayment' }) remove(@Payload() id: string) { let _id = id['_id']; return this.paymentsService.remove(_id); diff --git a/servicio-pagos/src/payments/payments.module.ts b/servicio-pagos/src/payments/payments.module.ts index 9af09c19..25238832 100644 --- a/servicio-pagos/src/payments/payments.module.ts +++ b/servicio-pagos/src/payments/payments.module.ts @@ -4,12 +4,11 @@ import { PaymentsController } from './payments.controller'; import { MongooseModule } from '@nestjs/mongoose'; import { Payment, PaymentSchema } from 'src/schemas/payment.schema'; - @Module({ imports: [ - MongooseModule.forFeature([{ name: Payment.name, schema: PaymentSchema }]), + MongooseModule.forFeature([{ name: Payment.name, schema: PaymentSchema }]), ], controllers: [PaymentsController], - providers: [PaymentsService] + providers: [PaymentsService], }) export class PaymentsModule {} diff --git a/servicio-pagos/src/payments/payments.service.ts b/servicio-pagos/src/payments/payments.service.ts index 2c9bbe2c..0f621f86 100644 --- a/servicio-pagos/src/payments/payments.service.ts +++ b/servicio-pagos/src/payments/payments.service.ts @@ -3,30 +3,25 @@ import { Payment, PaymentDocument } from 'src/schemas/payment.schema'; import { Model } from 'mongoose'; import { InjectModel } from '@nestjs/mongoose'; - @Injectable() export class PaymentsService { constructor( - @InjectModel(Payment.name) private readonly paymentModel: Model, + @InjectModel(Payment.name) + private readonly paymentModel: Model, ) {} async create(payment: PaymentDocument): Promise { return this.paymentModel.create(payment); } - async findAll(): Promise { - return this.paymentModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + async findAll(): Promise { + return this.paymentModel.find().setOptions({ sanitizeFilter: true }).exec(); } - findOneId(id: string): Promise { return this.paymentModel.findOne({ _id: id }).exec(); } - findByUser(id: string): Promise { return this.paymentModel.findOne({ user_id: id }).exec(); } diff --git a/servicio-pagos/src/schemas/payment.schema.ts b/servicio-pagos/src/schemas/payment.schema.ts index 41e7ef94..b3f0267d 100644 --- a/servicio-pagos/src/schemas/payment.schema.ts +++ b/servicio-pagos/src/schemas/payment.schema.ts @@ -1,33 +1,30 @@ - import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document } from 'mongoose'; - export type PaymentDocument = Payment & Document; @Schema({ collection: 'payments' }) export class Payment { + @Prop() + date_payment: Date; - @Prop() - date_payment: Date; + @Prop() + mount: number; - @Prop() - mount: number; + @Prop() + description: string; - @Prop() - description: string; + @Prop() + period: string; - @Prop() - period: string; + @Prop() + status: string; - @Prop() - status: string; + @Prop() + user_id: string; - @Prop() - user_id: string; - - @Prop() - communty_id: string; + @Prop() + communty_id: string; } -export const PaymentSchema = SchemaFactory.createForClass(Payment); +export const PaymentSchema = SchemaFactory.createForClass(Payment); diff --git a/servicio-reportes/src/app.module.ts b/servicio-reportes/src/app.module.ts index 099c3d4b..c8504403 100644 --- a/servicio-reportes/src/app.module.ts +++ b/servicio-reportes/src/app.module.ts @@ -1,25 +1,26 @@ import { Module } from '@nestjs/common'; import { ReportsModule } from './reports/reports.module'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; - - +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_REPORTES", + name: 'SERVICIO_REPORTES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3008 - } - } + host: '127.0.0.1', + port: 3008, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_reportes?retryWrites=true&w=majority`), - ReportsModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_reportes?retryWrites=true&w=majority`, + ), + ReportsModule, + ], controllers: [], providers: [], }) -export class AppModule { } +export class AppModule {} diff --git a/servicio-reportes/src/main.ts b/servicio-reportes/src/main.ts index 38819543..81aece7f 100644 --- a/servicio-reportes/src/main.ts +++ b/servicio-reportes/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,10 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3008 - } + host: '127.0.0.1', + port: 3008, + }, }); - app.listen().then(() => logger.log("Microservice Reportes is listening" )); + app.listen().then(() => logger.log('Microservice Reportes is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-reportes/src/reports/reports.controller.ts b/servicio-reportes/src/reports/reports.controller.ts index e2454c74..d08cb6de 100644 --- a/servicio-reportes/src/reports/reports.controller.ts +++ b/servicio-reportes/src/reports/reports.controller.ts @@ -7,7 +7,6 @@ import { Report, ReportDocument } from '../schemas/report.schema'; export class ReportsController { constructor(private readonly reportsService: ReportsService) {} - @MessagePattern({ cmd: 'createReport' }) create(@Payload() report: ReportDocument) { return this.reportsService.create(report); diff --git a/servicio-reportes/src/reports/reports.module.ts b/servicio-reportes/src/reports/reports.module.ts index a070c768..c2b6460d 100644 --- a/servicio-reportes/src/reports/reports.module.ts +++ b/servicio-reportes/src/reports/reports.module.ts @@ -6,9 +6,9 @@ import { Report, ReportSchema } from '../schemas/report.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Report.name, schema:ReportSchema }]), + MongooseModule.forFeature([{ name: Report.name, schema: ReportSchema }]), ], controllers: [ReportsController], - providers: [ReportsService] + providers: [ReportsService], }) export class ReportsModule {} diff --git a/servicio-reportes/src/reports/reports.service.ts b/servicio-reportes/src/reports/reports.service.ts index 1ab3e4b7..1197d840 100644 --- a/servicio-reportes/src/reports/reports.service.ts +++ b/servicio-reportes/src/reports/reports.service.ts @@ -1,34 +1,30 @@ import { Injectable, Inject } from '@nestjs/common'; -import { ClientProxy } from "@nestjs/microservices"; +import { ClientProxy } from '@nestjs/microservices'; import { Model } from 'mongoose'; import { InjectModel } from '@nestjs/mongoose'; import { Report, ReportDocument } from '../schemas/report.schema'; -import { map } from "rxjs/operators"; +import { map } from 'rxjs/operators'; @Injectable() export class ReportsService { constructor( - @InjectModel(Report.name) private readonly reportModel: Model, - - // - ) { } + @InjectModel(Report.name) + private readonly reportModel: Model, + ) // + {} async create(report: ReportDocument): Promise { return this.reportModel.create(report); } async findAll(): Promise { - return this.reportModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + return this.reportModel.find().setOptions({ sanitizeFilter: true }).exec(); } async findOne(id: string): Promise { return this.reportModel.findOne({ _id: id }).exec(); } - async update(id: string, report: ReportDocument) { return this.reportModel.findOneAndUpdate({ _id: id }, report, { new: true, diff --git a/servicio-reportes/src/schemas/report.schema.ts b/servicio-reportes/src/schemas/report.schema.ts index c2817f38..7859092b 100644 --- a/servicio-reportes/src/schemas/report.schema.ts +++ b/servicio-reportes/src/schemas/report.schema.ts @@ -1,24 +1,21 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document, ObjectId } from 'mongoose'; - export type ReportDocument = Report & Document; @Schema({ collection: 'reports' }) export class Report { - - @Prop() - action: string; - - @Prop() - description: string; + @Prop() + action: string; - @Prop() - date_entry: Date; + @Prop() + description: string; - @Prop() - user_id: string + @Prop() + date_entry: Date; + + @Prop() + user_id: string; } - -export const ReportSchema = SchemaFactory.createForClass(Report); \ No newline at end of file +export const ReportSchema = SchemaFactory.createForClass(Report); diff --git a/servicio-reservaciones/src/app.module.ts b/servicio-reservaciones/src/app.module.ts index 02131836..e085fd9a 100644 --- a/servicio-reservaciones/src/app.module.ts +++ b/servicio-reservaciones/src/app.module.ts @@ -1,22 +1,25 @@ import { Module } from '@nestjs/common'; import { ReservationsModule } from './reservations/reservations.module'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { MongooseModule } from '@nestjs/mongoose'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_RESERVACIONES", + name: 'SERVICIO_RESERVACIONES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3006 - } - } + host: '127.0.0.1', + port: 3006, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_reservaciones?retryWrites=true&w=majority`), - ReservationsModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_reservaciones?retryWrites=true&w=majority`, + ), + ReservationsModule, + ], controllers: [], providers: [], }) diff --git a/servicio-reservaciones/src/main.ts b/servicio-reservaciones/src/main.ts index 4abbc966..8f3f7d1c 100644 --- a/servicio-reservaciones/src/main.ts +++ b/servicio-reservaciones/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,12 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3006 - } + host: '127.0.0.1', + port: 3006, + }, }); - app.listen().then(() => logger.log("Microservice Reservaciones is listening" )); + app + .listen() + .then(() => logger.log('Microservice Reservaciones is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-reservaciones/src/reservations/reservations.controller.ts b/servicio-reservaciones/src/reservations/reservations.controller.ts index a608315f..49621768 100644 --- a/servicio-reservaciones/src/reservations/reservations.controller.ts +++ b/servicio-reservaciones/src/reservations/reservations.controller.ts @@ -1,11 +1,14 @@ import { Controller } from '@nestjs/common'; import { MessagePattern, Payload } from '@nestjs/microservices'; import { ReservationsService } from './reservations.service'; -import { Reservation, ReservationDocument } from '../schemas/reservation.schema'; +import { + Reservation, + ReservationDocument, +} from '../schemas/reservation.schema'; @Controller() export class ReservationsController { - constructor(private readonly reservationsService: ReservationsService) { } + constructor(private readonly reservationsService: ReservationsService) {} @MessagePattern({ cmd: 'createReservation' }) create(@Payload() reservation: ReservationDocument) { diff --git a/servicio-reservaciones/src/reservations/reservations.module.ts b/servicio-reservaciones/src/reservations/reservations.module.ts index 3592b785..29470c6f 100644 --- a/servicio-reservaciones/src/reservations/reservations.module.ts +++ b/servicio-reservaciones/src/reservations/reservations.module.ts @@ -3,13 +3,15 @@ import { ReservationsService } from './reservations.service'; import { MongooseModule } from '@nestjs/mongoose'; import { ReservationsController } from './reservations.controller'; -import { Reservation, ReservationSchema} from '../schemas/reservation.schema'; +import { Reservation, ReservationSchema } from '../schemas/reservation.schema'; @Module({ imports: [ - MongooseModule.forFeature([{ name: Reservation.name, schema: ReservationSchema }]), + MongooseModule.forFeature([ + { name: Reservation.name, schema: ReservationSchema }, + ]), ], controllers: [ReservationsController], - providers: [ReservationsService] + providers: [ReservationsService], }) export class ReservationsModule {} diff --git a/servicio-reservaciones/src/reservations/reservations.service.ts b/servicio-reservaciones/src/reservations/reservations.service.ts index 1c93b63f..8a681cd3 100644 --- a/servicio-reservaciones/src/reservations/reservations.service.ts +++ b/servicio-reservaciones/src/reservations/reservations.service.ts @@ -1,12 +1,16 @@ import { Injectable } from '@nestjs/common'; -import { Reservation, ReservationDocument} from '../schemas/reservation.schema'; +import { + Reservation, + ReservationDocument, +} from '../schemas/reservation.schema'; import { Model } from 'mongoose'; import { InjectModel } from '@nestjs/mongoose'; @Injectable() export class ReservationsService { constructor( - @InjectModel(Reservation.name) private readonly reservationModel: Model, + @InjectModel(Reservation.name) + private readonly reservationModel: Model, ) {} create(reservation: ReservationDocument) { @@ -15,10 +19,10 @@ export class ReservationsService { return this.reservationModel.create(reservation); } - async findAll(): Promise { + async findAll(): Promise { return this.reservationModel - .find() - .setOptions({ sanitizeFilter: true }) + .find() + .setOptions({ sanitizeFilter: true }) .exec(); } diff --git a/servicio-reservaciones/src/schemas/reservation.schema.ts b/servicio-reservaciones/src/schemas/reservation.schema.ts index db3fd227..542eb422 100644 --- a/servicio-reservaciones/src/schemas/reservation.schema.ts +++ b/servicio-reservaciones/src/schemas/reservation.schema.ts @@ -1,30 +1,27 @@ import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document, ObjectId } from 'mongoose'; - export type ReservationDocument = Reservation & Document; @Schema({ collection: 'reservations' }) export class Reservation { - - @Prop() - start_time: string; + @Prop() + start_time: string; - @Prop() - finish_time: string; + @Prop() + finish_time: string; - @Prop() - status: string; + @Prop() + status: string; - @Prop() - date_entry: Date; + @Prop() + date_entry: Date; - @Prop() - common_area_id: string; + @Prop() + common_area_id: string; - @Prop() - user_id: string + @Prop() + user_id: string; } - -export const ReservationSchema = SchemaFactory.createForClass(Reservation); \ No newline at end of file +export const ReservationSchema = SchemaFactory.createForClass(Reservation); diff --git a/servicio-usuarios/src/app.module.ts b/servicio-usuarios/src/app.module.ts index 8aaf93a8..2387d113 100644 --- a/servicio-usuarios/src/app.module.ts +++ b/servicio-usuarios/src/app.module.ts @@ -1,22 +1,25 @@ import { Module } from '@nestjs/common'; import { MongooseModule } from '@nestjs/mongoose'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; import { UsersModule } from './users/users.module'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_USUARIOS", + name: 'SERVICIO_USUARIOS', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3001 - } - } + host: '127.0.0.1', + port: 3001, + }, + }, ]), - MongooseModule.forRoot(`mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`), - UsersModule], + MongooseModule.forRoot( + `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`, + ), + UsersModule, + ], controllers: [], providers: [], }) diff --git a/servicio-usuarios/src/main.ts b/servicio-usuarios/src/main.ts index cfd3353c..4df61d7f 100644 --- a/servicio-usuarios/src/main.ts +++ b/servicio-usuarios/src/main.ts @@ -1,7 +1,7 @@ -import { NestFactory } from "@nestjs/core"; -import { Transport } from "@nestjs/microservices"; -import { AppModule } from "./app.module"; -import { Logger } from "@nestjs/common"; +import { NestFactory } from '@nestjs/core'; +import { Transport } from '@nestjs/microservices'; +import { AppModule } from './app.module'; +import { Logger } from '@nestjs/common'; const logger = new Logger(); @@ -9,10 +9,10 @@ async function bootstrap() { const app = await NestFactory.createMicroservice(AppModule, { transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3001 - } + host: '127.0.0.1', + port: 3001, + }, }); - app.listen().then(() => logger.log("Microservice Usuarios is listening" )); + app.listen().then(() => logger.log('Microservice Usuarios is listening')); } -bootstrap(); \ No newline at end of file +bootstrap(); diff --git a/servicio-usuarios/src/schemas/user.schema.ts b/servicio-usuarios/src/schemas/user.schema.ts index a96ddee8..5ede1165 100644 --- a/servicio-usuarios/src/schemas/user.schema.ts +++ b/servicio-usuarios/src/schemas/user.schema.ts @@ -1,46 +1,39 @@ - import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose'; import { Document } from 'mongoose'; - export type UserDocument = User & Document; - @Schema({ collection: 'users' }) export class User { + @Prop() + dni: string; - @Prop() - dni: string; + @Prop() + name: string; - @Prop() - name: string; + @Prop() + last_name: string; - @Prop() - last_name: string; + @Prop() + email: string; - @Prop() - email: string; + @Prop() + phone: number; - @Prop() - phone: number; + @Prop() + password: string; - @Prop() - password: string; + @Prop() + user_type: string; - @Prop() - user_type: string; + @Prop() + status: string; - @Prop() - status: string; + @Prop() + date_entry: Date; - @Prop() - date_entry: Date; - - - @Prop() - community_id?: string; + @Prop() + community_id?: string; } - - -export const UserSchema = SchemaFactory.createForClass(User); \ No newline at end of file +export const UserSchema = SchemaFactory.createForClass(User); diff --git a/servicio-usuarios/src/users/users.controller.ts b/servicio-usuarios/src/users/users.controller.ts index ea3c70a9..8fd67095 100644 --- a/servicio-usuarios/src/users/users.controller.ts +++ b/servicio-usuarios/src/users/users.controller.ts @@ -5,7 +5,7 @@ import { UsersService } from './users.service'; @Controller() export class UsersController { - constructor(private readonly userService: UsersService) { } + constructor(private readonly userService: UsersService) {} @MessagePattern({ cmd: 'createUser' }) create(@Payload() user: UserDocument) { @@ -22,7 +22,6 @@ export class UsersController { return this.userService.create(user); } - @MessagePattern({ cmd: 'findAllUsers' }) findAll() { return this.userService.findAll(); @@ -39,7 +38,6 @@ export class UsersController { let pcommunity_id = community_id['community_id']; return this.userService.findGuardsCommunity(pcommunity_id); } - @MessagePattern({ cmd: 'updateUser' }) update(@Payload() user: UserDocument) { @@ -81,15 +79,16 @@ export class UsersController { //buscar usuario de una comunidad @MessagePattern({ cmd: 'findOneCommunityUser' }) findCommunityUser(@Payload() user: any) { - return this.userService.findCommunityUser(user["community_id"], user["user_type"]); + return this.userService.findCommunityUser( + user['community_id'], + user['user_type'], + ); } @MessagePattern({ cmd: 'deleteAdminSystem' }) deleteAdminSystem(@Payload() user: any) { - console.log("entró") + console.log('entró'); - return this.userService.deleteAdminSystem(user["id"]); + return this.userService.deleteAdminSystem(user['id']); } - } - diff --git a/servicio-usuarios/src/users/users.module.ts b/servicio-usuarios/src/users/users.module.ts index 75fc3bd5..fd466bb2 100644 --- a/servicio-usuarios/src/users/users.module.ts +++ b/servicio-usuarios/src/users/users.module.ts @@ -4,23 +4,23 @@ import { MongooseModule } from '@nestjs/mongoose'; import { UsersController } from './users.controller'; import { User, UserSchema } from '../schemas/user.schema'; -import { ClientsModule, Transport } from "@nestjs/microservices"; +import { ClientsModule, Transport } from '@nestjs/microservices'; @Module({ imports: [ ClientsModule.register([ { - name: "SERVICIO_NOTIFICACIONES", + name: 'SERVICIO_NOTIFICACIONES', transport: Transport.TCP, options: { - host: "127.0.0.1", - port: 3009 - } - } + host: '127.0.0.1', + port: 3009, + }, + }, ]), - MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]), + MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]), ], controllers: [UsersController], - providers: [UsersService] + providers: [UsersService], }) export class UsersModule {} diff --git a/servicio-usuarios/src/users/users.service.ts b/servicio-usuarios/src/users/users.service.ts index edaf2ed0..07141e7d 100644 --- a/servicio-usuarios/src/users/users.service.ts +++ b/servicio-usuarios/src/users/users.service.ts @@ -2,20 +2,18 @@ import { Injectable, Inject } from '@nestjs/common'; import { Model } from 'mongoose'; import { User, UserDocument } from '../schemas/user.schema'; import { InjectModel } from '@nestjs/mongoose'; -import { Md5 } from "md5-typescript"; +import { Md5 } from 'md5-typescript'; import { map } from 'rxjs/operators'; import { RpcException, ClientProxy } from '@nestjs/microservices'; - - @Injectable() export class UsersService { constructor( @InjectModel(User.name) private readonly userModel: Model, - @Inject('SERVICIO_NOTIFICACIONES') private readonly clientNotificationtApp: ClientProxy, - - ) { } + @Inject('SERVICIO_NOTIFICACIONES') + private readonly clientNotificationtApp: ClientProxy, + ) {} private publicKey: string; async create(user: UserDocument): Promise { let passwordEncriptada = Md5.init(user.password); @@ -24,10 +22,7 @@ export class UsersService { } async findAll(): Promise { - return this.userModel - .find() - .setOptions({ sanitizeFilter: true }) - .exec(); + return this.userModel.find().setOptions({ sanitizeFilter: true }).exec(); } async findOne(id: string): Promise { return this.userModel.findOne({ _id: id }).exec(); @@ -56,13 +51,11 @@ export class UsersService { repo.find({ email: email }).exec((err, res) => { if (err) { reject(err); - } - else { + } else { let passwordEncriptada = Md5.init(password); if (res[0].password == passwordEncriptada) { resolve(res[0]); - } - else { + } else { resolve(null); } } @@ -77,7 +70,6 @@ export class UsersService { return this.userModel.find({ user_type: 1 }).exec(); } - //find admin del sistema async findGuardsCommunity(pcommunity_id: string): Promise { return this.userModel.find({ user_type: 4 }).exec(); @@ -87,11 +79,10 @@ export class UsersService { return this.userModel.find({ user_type: 2 }).exec(); } - async testSendMail(user: UserDocument) { let passwordEncriptada = Md5.init(user.password); user.password = passwordEncriptada; - this.userModel.create(user) + this.userModel.create(user); /*.then(() => { } );*/ @@ -100,17 +91,19 @@ export class UsersService { const payload = { email: user['email'], name: user['name'] }; return this.clientNotificationtApp .send(pattern, payload) - .pipe( - map((message: string) => ({ message })), - ); + .pipe(map((message: string) => ({ message }))); } - async findCommunityUser(community_id: string, user_type: number): Promise { - return this.userModel.findOne({ community_id: community_id, user_type: user_type }).exec(); + async findCommunityUser( + community_id: string, + user_type: number, + ): Promise { + return this.userModel + .findOne({ community_id: community_id, user_type: user_type }) + .exec(); } async deleteAdminSystem(id: string) { - return this.userModel.deleteOne({_id: id}).exec(); + return this.userModel.deleteOne({ _id: id }).exec(); } - } diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js index b9b8d48c..1fef97b4 100644 --- a/web-ui/web-react/src/App.js +++ b/web-ui/web-react/src/App.js @@ -50,303 +50,394 @@ import './assets/demo/Demos.scss'; import './assets/layout/layout.scss'; import './App.scss'; import LogIn from './components/LogIn'; -import {PrimeIcons} from 'primereact/api'; +import { PrimeIcons } from 'primereact/api'; const App = () => { - const [layoutMode, setLayoutMode] = useState('static'); - const [layoutColorMode, setLayoutColorMode] = useState('light') - const [inputStyle, setInputStyle] = useState('outlined'); - const [ripple, setRipple] = useState(true); - const [staticMenuInactive, setStaticMenuInactive] = useState(false); - const [overlayMenuActive, setOverlayMenuActive] = useState(false); - const [mobileMenuActive, setMobileMenuActive] = useState(false); - const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false); - const copyTooltipRef = useRef(); - const location = useLocation(); + const [layoutMode, setLayoutMode] = useState('static'); + const [layoutColorMode, setLayoutColorMode] = useState('light'); + const [inputStyle, setInputStyle] = useState('outlined'); + const [ripple, setRipple] = useState(true); + const [staticMenuInactive, setStaticMenuInactive] = useState(false); + const [overlayMenuActive, setOverlayMenuActive] = useState(false); + const [mobileMenuActive, setMobileMenuActive] = useState(false); + const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false); + const copyTooltipRef = useRef(); + const location = useLocation(); - PrimeReact.ripple = true; + PrimeReact.ripple = true; - let menuClick = false; - let mobileTopbarMenuClick = false; + let menuClick = false; + let mobileTopbarMenuClick = false; - useEffect(() => { - if (mobileMenuActive) { - addClass(document.body, "body-overflow-hidden"); - } else { - removeClass(document.body, "body-overflow-hidden"); - } - }, [mobileMenuActive]); + useEffect(() => { + if (mobileMenuActive) { + addClass(document.body, 'body-overflow-hidden'); + } else { + removeClass(document.body, 'body-overflow-hidden'); + } + }, [mobileMenuActive]); - useEffect(() => { - copyTooltipRef && copyTooltipRef.current && copyTooltipRef.current.updateTargetEvents(); - }, [location]); + useEffect(() => { + copyTooltipRef && + copyTooltipRef.current && + copyTooltipRef.current.updateTargetEvents(); + }, [location]); - const onInputStyleChange = (inputStyle) => { - setInputStyle(inputStyle); + const onInputStyleChange = (inputStyle) => { + setInputStyle(inputStyle); + }; + + const onRipple = (e) => { + PrimeReact.ripple = e.value; + setRipple(e.value); + }; + + const onLayoutModeChange = (mode) => { + setLayoutMode(mode); + }; + + const onColorModeChange = (mode) => { + setLayoutColorMode(mode); + }; + + const onWrapperClick = (event) => { + if (!menuClick) { + setOverlayMenuActive(false); + setMobileMenuActive(false); } - const onRipple = (e) => { - PrimeReact.ripple = e.value; - setRipple(e.value) + if (!mobileTopbarMenuClick) { + setMobileTopbarMenuActive(false); } - const onLayoutModeChange = (mode) => { - setLayoutMode(mode) - } + mobileTopbarMenuClick = false; + menuClick = false; + }; - const onColorModeChange = (mode) => { - setLayoutColorMode(mode) - } + const onToggleMenuClick = (event) => { + menuClick = true; - const onWrapperClick = (event) => { - if (!menuClick) { - setOverlayMenuActive(false); - setMobileMenuActive(false); + if (isDesktop()) { + if (layoutMode === 'overlay') { + if (mobileMenuActive === true) { + setOverlayMenuActive(true); } - if (!mobileTopbarMenuClick) { - setMobileTopbarMenuActive(false); - } - - mobileTopbarMenuClick = false; - menuClick = false; + setOverlayMenuActive((prevState) => !prevState); + setMobileMenuActive(false); + } else if (layoutMode === 'static') { + setStaticMenuInactive((prevState) => !prevState); + } + } else { + setMobileMenuActive((prevState) => !prevState); } - const onToggleMenuClick = (event) => { - menuClick = true; + event.preventDefault(); + }; - if (isDesktop()) { - if (layoutMode === 'overlay') { - if (mobileMenuActive === true) { - setOverlayMenuActive(true); - } + const onSidebarClick = () => { + menuClick = true; + }; - setOverlayMenuActive((prevState) => !prevState); - setMobileMenuActive(false); - } - else if (layoutMode === 'static') { - setStaticMenuInactive((prevState) => !prevState); - } - } - else { - setMobileMenuActive((prevState) => !prevState); - } + const onMobileTopbarMenuClick = (event) => { + mobileTopbarMenuClick = true; - event.preventDefault(); + setMobileTopbarMenuActive((prevState) => !prevState); + event.preventDefault(); + }; + + const onMobileSubTopbarMenuClick = (event) => { + mobileTopbarMenuClick = true; + + event.preventDefault(); + }; + + const onMenuItemClick = (event) => { + if (!event.item.items) { + setOverlayMenuActive(false); + setMobileMenuActive(false); } + }; + const isDesktop = () => { + return window.innerWidth >= 992; + }; - const onSidebarClick = () => { - menuClick = true; - } - - const onMobileTopbarMenuClick = (event) => { - mobileTopbarMenuClick = true; - - setMobileTopbarMenuActive((prevState) => !prevState); - event.preventDefault(); - } - - const onMobileSubTopbarMenuClick = (event) => { - mobileTopbarMenuClick = true; - - event.preventDefault(); - } - - const onMenuItemClick = (event) => { - if (!event.item.items) { - setOverlayMenuActive(false); - setMobileMenuActive(false); - } - } - const isDesktop = () => { - return window.innerWidth >= 992; - } - - const menu = [ + const menu = [ + { + label: 'Home', + items: [ + { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }, { - label: 'Home', - items: [ - {label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/'}, - {label: 'Administradores del sistema', icon: PrimeIcons.USERS, to: '/administradoresSistema'}, - {label: 'Administradores de comunidad', icon: PrimeIcons.USERS, to: '/administradoresComunidad'}, - {label: 'Guardas de seguridad', icon: PrimeIcons.LOCK, to: '/guardasSeguridad'}, - {label: 'Comunidadades', icon: PrimeIcons.BUILDING, to: '/comunidadesViviendas'}, - {label: 'Inquilinos', icon: PrimeIcons.USER, to: '/inquilinos'}, - {label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn'} - ] + label: 'Administradores del sistema', + icon: PrimeIcons.USERS, + to: '/administradoresSistema', }, { - label: 'UI Components', icon: 'pi pi-fw pi-sitemap', - items: [ - { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout' }, - { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' }, - { label: "Float Label", icon: "pi pi-fw pi-bookmark", to: "/floatlabel" }, - { label: "Invalid State", icon: "pi pi-fw pi-exclamation-circle", to: "invalidstate" }, - { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' }, - { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' }, - { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' }, - { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' }, - { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' }, - { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' }, - { label: "Media", icon: "pi pi-fw pi-image", to: "/media" }, - { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' }, - { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' }, - { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' }, - { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' }, - { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' }, - ] + label: 'Administradores de comunidad', + icon: PrimeIcons.USERS, + to: '/administradoresComunidad', }, { - label: 'UI Blocks', - items: [ - { label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: "NEW" }, - { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-react' } - ] + label: 'Guardas de seguridad', + icon: PrimeIcons.LOCK, + to: '/guardasSeguridad', }, { - label: 'Icons', - items: [ - { label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' } - ] + label: 'Comunidadades', + icon: PrimeIcons.BUILDING, + to: '/comunidadesViviendas', + }, + { label: 'Inquilinos', icon: PrimeIcons.USER, to: '/inquilinos' }, + { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' }, + ], + }, + { + label: 'UI Components', + icon: 'pi pi-fw pi-sitemap', + items: [ + { + label: 'Form Layout', + icon: 'pi pi-fw pi-id-card', + to: '/formlayout', + }, + { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' }, + { + label: 'Float Label', + icon: 'pi pi-fw pi-bookmark', + to: '/floatlabel', }, { - label: 'Pages', icon: 'pi pi-fw pi-clone', - items: [ - { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' }, - { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' }, - { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' } - ] + label: 'Invalid State', + icon: 'pi pi-fw pi-exclamation-circle', + to: 'invalidstate', + }, + { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' }, + { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' }, + { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' }, + { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' }, + { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' }, + { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' }, + { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' }, + { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' }, + { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' }, + { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' }, + { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' }, + { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' }, + ], + }, + { + label: 'UI Blocks', + items: [ + { + label: 'Free Blocks', + icon: 'pi pi-fw pi-eye', + to: '/blocks', + badge: 'NEW', }, { - label: 'Menu Hierarchy', icon: 'pi pi-fw pi-search', - items: [ - { - label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark', - items: [ - { - label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark', - items: [ - { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }, - ] - }, - { - label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark', - items: [ - { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' } - ] - }, - ] - }, - { - label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark', - items: [ - { - label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark', - items: [ - { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' }, - ] - }, - { - label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark', - items: [ - { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' } - ] - } - ] - } - ] - } - ]; + label: 'All Blocks', + icon: 'pi pi-fw pi-globe', + url: 'https://www.primefaces.org/primeblocks-react', + }, + ], + }, + { + label: 'Icons', + items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }], + }, + { + label: 'Pages', + icon: 'pi pi-fw pi-clone', + items: [ + { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' }, + { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' }, + { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' }, + ], + }, + { + label: 'Menu Hierarchy', + icon: 'pi pi-fw pi-search', + items: [ + { + label: 'Submenu 1', + icon: 'pi pi-fw pi-bookmark', + items: [ + { + label: 'Submenu 1.1', + icon: 'pi pi-fw pi-bookmark', + items: [ + { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }, + ], + }, + { + label: 'Submenu 1.2', + icon: 'pi pi-fw pi-bookmark', + items: [ + { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' }, + ], + }, + ], + }, + { + label: 'Submenu 2', + icon: 'pi pi-fw pi-bookmark', + items: [ + { + label: 'Submenu 2.1', + icon: 'pi pi-fw pi-bookmark', + items: [ + { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' }, + ], + }, + { + label: 'Submenu 2.2', + icon: 'pi pi-fw pi-bookmark', + items: [ + { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' }, + ], + }, + ], + }, + ], + }, + ]; - const addClass = (element, className) => { - if (element.classList) - element.classList.add(className); - else - element.className += ' ' + className; - } + const addClass = (element, className) => { + if (element.classList) element.classList.add(className); + else element.className += ' ' + className; + }; - const removeClass = (element, className) => { - if (element.classList) - element.classList.remove(className); - else - element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); - } + const removeClass = (element, className) => { + if (element.classList) element.classList.remove(className); + else + element.className = element.className.replace( + new RegExp( + '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', + 'gi', + ), + ' ', + ); + }; - const wrapperClass = classNames('layout-wrapper', { - 'layout-overlay': layoutMode === 'overlay', - 'layout-static': layoutMode === 'static', - 'layout-static-sidebar-inactive': staticMenuInactive && layoutMode === 'static', - 'layout-overlay-sidebar-active': overlayMenuActive && layoutMode === 'overlay', - 'layout-mobile-sidebar-active': mobileMenuActive, - 'p-input-filled': inputStyle === 'filled', - 'p-ripple-disabled': ripple === false, - 'layout-theme-light': layoutColorMode === 'light' - }); + const wrapperClass = classNames('layout-wrapper', { + 'layout-overlay': layoutMode === 'overlay', + 'layout-static': layoutMode === 'static', + 'layout-static-sidebar-inactive': + staticMenuInactive && layoutMode === 'static', + 'layout-overlay-sidebar-active': + overlayMenuActive && layoutMode === 'overlay', + 'layout-mobile-sidebar-active': mobileMenuActive, + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false, + 'layout-theme-light': layoutColorMode === 'light', + }); - return ( -
- + return ( +
+ - - -
- -
- -
-
- } /> - - - - - - - - - - - - - - - - - } /> - - - - - - - - - - - -
- - -
- - - - -
- + +
+ +
+
+
+ ( + + )} + /> + + + + + + + + + + + + + + + + + ( + + )} + /> + + + + + + + + + + +
- ); -} + +
+ + + + +
+ +
+ ); +}; export default App; diff --git a/web-ui/web-react/src/App.scss b/web-ui/web-react/src/App.scss index 8b137891..e69de29b 100644 --- a/web-ui/web-react/src/App.scss +++ b/web-ui/web-react/src/App.scss @@ -1 +0,0 @@ - diff --git a/web-ui/web-react/src/App.test.js b/web-ui/web-react/src/App.test.js index 9299f0e7..9a2c4929 100644 --- a/web-ui/web-react/src/App.test.js +++ b/web-ui/web-react/src/App.test.js @@ -3,6 +3,6 @@ import ReactDOM from 'react-dom'; import AppLayout from './App'; it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); + const div = document.createElement('div'); + ReactDOM.render(, div); }); diff --git a/web-ui/web-react/src/AppConfig.js b/web-ui/web-react/src/AppConfig.js index bc0bdb95..8c80ccfd 100644 --- a/web-ui/web-react/src/AppConfig.js +++ b/web-ui/web-react/src/AppConfig.js @@ -2,374 +2,646 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { RadioButton } from 'primereact/radiobutton'; import { InputSwitch } from 'primereact/inputswitch'; import classNames from 'classnames'; -import { Button } from "primereact/button"; +import { Button } from 'primereact/button'; export const AppConfig = (props) => { + const [active, setActive] = useState(false); + const [scale, setScale] = useState(14); + const [scales] = useState([12, 13, 14, 15, 16]); + const [theme, setTheme] = useState('khaki'); + const config = useRef(null); + let outsideClickListener = useRef(null); - const [active, setActive] = useState(false); - const [scale, setScale] = useState(14); - const [scales] = useState([12, 13, 14, 15, 16]); - const [theme, setTheme] = useState('khaki'); - const config = useRef(null); - let outsideClickListener = useRef(null); - - const unbindOutsideClickListener = useCallback(() => { - if (outsideClickListener.current) { - document.removeEventListener('click', outsideClickListener.current); - outsideClickListener.current = null; - } - }, []); - - const hideConfigurator = useCallback((event) => { - setActive(false); - unbindOutsideClickListener(); - event.preventDefault(); - }, [unbindOutsideClickListener]); - - const bindOutsideClickListener = useCallback(() => { - if (!outsideClickListener.current) { - outsideClickListener.current = (event) => { - if (active && isOutsideClicked(event)) { - hideConfigurator(event); - } - }; - document.addEventListener('click', outsideClickListener.current); - } - }, [active, hideConfigurator]); - - useEffect(() => { - if (active) { - bindOutsideClickListener() - } - else { - unbindOutsideClickListener() - } - }, [active, bindOutsideClickListener, unbindOutsideClickListener]); - - const isOutsideClicked = (event) => { - return !(config.current.isSameNode(event.target) || config.current.contains(event.target)); + const unbindOutsideClickListener = useCallback(() => { + if (outsideClickListener.current) { + document.removeEventListener('click', outsideClickListener.current); + outsideClickListener.current = null; } + }, []); - const decrementScale = () => { - setScale((prevState) => --prevState); - } + const hideConfigurator = useCallback( + (event) => { + setActive(false); + unbindOutsideClickListener(); + event.preventDefault(); + }, + [unbindOutsideClickListener], + ); - const incrementScale = () => { - setScale((prevState) => ++prevState); - } - - useEffect(() => { - document.documentElement.style.fontSize = scale + 'px'; - }, [scale]) - - const toggleConfigurator = (event) => { - setActive(prevState => !prevState); - } - - const configClassName = classNames('layout-config', { - 'layout-config-active': active - }) - - const replaceLink = useCallback((linkElement, href, callback) => { - if (isIE()) { - linkElement.setAttribute('href', href); - - if (callback) { - callback(); - } + const bindOutsideClickListener = useCallback(() => { + if (!outsideClickListener.current) { + outsideClickListener.current = (event) => { + if (active && isOutsideClicked(event)) { + hideConfigurator(event); } - else { - const id = linkElement.getAttribute('id'); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', href); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - - if (callback) { - callback(); - } - }); - } - }, []) - - useEffect(() => { - let themeElement = document.getElementById('theme-link'); - const themeHref = 'assets/themes/' + theme + '/theme.css'; - replaceLink(themeElement, themeHref); - - }, [theme, replaceLink]) - - const isIE = () => { - return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent) + }; + document.addEventListener('click', outsideClickListener.current); } + }, [active, hideConfigurator]); - const changeTheme = (e, theme, scheme) => { - props.onColorModeChange(scheme); - setTheme(theme); + useEffect(() => { + if (active) { + bindOutsideClickListener(); + } else { + unbindOutsideClickListener(); } + }, [active, bindOutsideClickListener, unbindOutsideClickListener]); - return ( -
- -
- -
Input Style
-
-
- props.onInputStyleChange(e.value)} checked={props.inputStyle === 'outlined'} /> - -
-
- props.onInputStyleChange(e.value)} checked={props.inputStyle === 'filled'} /> - -
-
- -
Ripple Effect
- - -
Menu Type
-
-
- props.onLayoutModeChange(e.value)} checked={props.layoutMode === 'static'} /> - -
-
- props.onLayoutModeChange(e.value)} checked={props.layoutMode === 'overlay'} /> - -
-
- -
Themes
-
Bootstrap
-
-
- -
-
- -
-
- -
-
- -
-
- -
Material Design
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Material Design Compact
-
-
- -
-
- -
-
- -
-
- -
-
- -
Tailwind
-
-
- -
-
- -
Fluent UI
-
-
- -
-
- -
PrimeOne Design - 2022
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
PrimeOne Design - 2021
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- + const isOutsideClicked = (event) => { + return !( + config.current.isSameNode(event.target) || + config.current.contains(event.target) ); -} + }; + + const decrementScale = () => { + setScale((prevState) => --prevState); + }; + + const incrementScale = () => { + setScale((prevState) => ++prevState); + }; + + useEffect(() => { + document.documentElement.style.fontSize = scale + 'px'; + }, [scale]); + + const toggleConfigurator = (event) => { + setActive((prevState) => !prevState); + }; + + const configClassName = classNames('layout-config', { + 'layout-config-active': active, + }); + + const replaceLink = useCallback((linkElement, href, callback) => { + if (isIE()) { + linkElement.setAttribute('href', href); + + if (callback) { + callback(); + } + } else { + const id = linkElement.getAttribute('id'); + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('href', href); + cloneLinkElement.setAttribute('id', id + '-clone'); + + linkElement.parentNode.insertBefore( + cloneLinkElement, + linkElement.nextSibling, + ); + + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', id); + + if (callback) { + callback(); + } + }); + } + }, []); + + useEffect(() => { + let themeElement = document.getElementById('theme-link'); + const themeHref = 'assets/themes/' + theme + '/theme.css'; + replaceLink(themeElement, themeHref); + }, [theme, replaceLink]); + + const isIE = () => { + return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent); + }; + + const changeTheme = (e, theme, scheme) => { + props.onColorModeChange(scheme); + setTheme(theme); + }; + + return ( +
+ +
+ +
Input Style
+
+
+ props.onInputStyleChange(e.value)} + checked={props.inputStyle === 'outlined'} + /> + +
+
+ props.onInputStyleChange(e.value)} + checked={props.inputStyle === 'filled'} + /> + +
+
+ +
Ripple Effect
+ + +
Menu Type
+
+
+ props.onLayoutModeChange(e.value)} + checked={props.layoutMode === 'static'} + /> + +
+
+ props.onLayoutModeChange(e.value)} + checked={props.layoutMode === 'overlay'} + /> + +
+
+ +
Themes
+
Bootstrap
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Material Design
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Material Design Compact
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Tailwind
+
+
+ +
+
+ +
Fluent UI
+
+
+ +
+
+ +
PrimeOne Design - 2022
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
PrimeOne Design - 2021
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + ); +}; diff --git a/web-ui/web-react/src/AppFooter.js b/web-ui/web-react/src/AppFooter.js index 78b4f54e..fb9f6951 100644 --- a/web-ui/web-react/src/AppFooter.js +++ b/web-ui/web-react/src/AppFooter.js @@ -1,12 +1,20 @@ import React from 'react'; export const AppFooter = (props) => { - - return ( -
- Logo - by - PrimeReact -
- ); -} + return ( +
+ Logo + by + PrimeReact +
+ ); +}; diff --git a/web-ui/web-react/src/AppMenu.js b/web-ui/web-react/src/AppMenu.js index 7ee0e07e..3d9fe782 100644 --- a/web-ui/web-react/src/AppMenu.js +++ b/web-ui/web-react/src/AppMenu.js @@ -2,117 +2,175 @@ import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; import { CSSTransition } from 'react-transition-group'; import classNames from 'classnames'; -import {Ripple} from "primereact/ripple"; +import { Ripple } from 'primereact/ripple'; import { Badge } from 'primereact/badge'; const AppSubmenu = (props) => { + const [activeIndex, setActiveIndex] = useState(null); - const [activeIndex, setActiveIndex] = useState(null) - - const onMenuItemClick = (event, item, index) => { - //avoid processing disabled items - if (item.disabled) { - event.preventDefault(); - return true; - } - - //execute command - if (item.command) { - item.command({ originalEvent: event, item: item }); - } - - if (index === activeIndex) - setActiveIndex(null); - else - setActiveIndex(index); - - if (props.onMenuItemClick) { - props.onMenuItemClick({ - originalEvent: event, - item: item - }); - } + const onMenuItemClick = (event, item, index) => { + //avoid processing disabled items + if (item.disabled) { + event.preventDefault(); + return true; } - const onKeyDown = (event) => { - if (event.code === 'Enter' || event.code === 'Space'){ - event.preventDefault(); - event.target.click(); - } + //execute command + if (item.command) { + item.command({ originalEvent: event, item: item }); } - const renderLinkContent = (item) => { - let submenuIcon = item.items && ; - let badge = item.badge && + if (index === activeIndex) setActiveIndex(null); + else setActiveIndex(index); - return ( - - - {item.label} - {submenuIcon} - {badge} - - - ); + if (props.onMenuItemClick) { + props.onMenuItemClick({ + originalEvent: event, + item: item, + }); } + }; - const renderLink = (item, i) => { - let content = renderLinkContent(item); - - if (item.to) { - return ( - onMenuItemClick(e, item, i)} exact target={item.target}> - {content} - - ) - } - else { - return ( - onMenuItemClick(e, item, i)} target={item.target}> - {content} - - ); - } + const onKeyDown = (event) => { + if (event.code === 'Enter' || event.code === 'Space') { + event.preventDefault(); + event.target.click(); } + }; - let items = props.items && props.items.map((item, i) => { - let active = activeIndex === i; - let styleClass = classNames(item.badgeStyleClass, {'layout-menuitem-category': props.root, 'active-menuitem': active && !item.to }); - - if(props.root) { - return ( -
  • - {props.root === true && -
    {item.label}
    - -     } -
    • - ); - } - else { - return ( -
  • - {renderLink(item, i)} - - - -
    • - ); - } - }); - - return items ?
      {items}
    : null; -} - -export const AppMenu = (props) => { + const renderLinkContent = (item) => { + let submenuIcon = item.items && ( + + ); + let badge = item.badge && ; return ( -
    - - - primeblocks - -
    + + + {item.label} + {submenuIcon} + {badge} + + ); -} + }; + + const renderLink = (item, i) => { + let content = renderLinkContent(item); + + if (item.to) { + return ( + onMenuItemClick(e, item, i)} + exact + target={item.target} + > + {content} + + ); + } else { + return ( + onMenuItemClick(e, item, i)} + target={item.target} + > + {content} + + ); + } + }; + + let items = + props.items && + props.items.map((item, i) => { + let active = activeIndex === i; + let styleClass = classNames(item.badgeStyleClass, { + 'layout-menuitem-category': props.root, + 'active-menuitem': active && !item.to, + }); + + if (props.root) { + return ( +
  • + {props.root === true && ( + +
    + {item.label} +
    + +     + )} +
    • + ); + } else { + return ( +
  • + {renderLink(item, i)} + + + +
    • + ); + } + }); + + return items ? ( +
      + {items} +
    + ) : null; +}; + +export const AppMenu = (props) => { + return ( +
    + + + primeblocks + +
    + ); +}; diff --git a/web-ui/web-react/src/AppTopbar.js b/web-ui/web-react/src/AppTopbar.js index 40e350b1..037432da 100644 --- a/web-ui/web-react/src/AppTopbar.js +++ b/web-ui/web-react/src/AppTopbar.js @@ -3,42 +3,44 @@ import { Link } from 'react-router-dom'; import classNames from 'classnames'; export const AppTopbar = (props) => { + return ( +
    + + logo + KATOIKIA + - return ( -
    - - logo - KATOIKIA - - - {/* */} - + -
      - {/*
    • +
        + {/*
        • */} - {/*
      • + {/*
        • */} -
      • - -
        • -
      -
    - ); -} +
  • + +
    • + +
    + ); +}; diff --git a/web-ui/web-react/src/BlockViewer.js b/web-ui/web-react/src/BlockViewer.js index 2e440d6d..8fb61ae8 100644 --- a/web-ui/web-react/src/BlockViewer.js +++ b/web-ui/web-react/src/BlockViewer.js @@ -3,47 +3,63 @@ import { classNames } from 'primereact/utils'; import { CodeHighlight } from './templates/CodeHighlight'; const BlockViewer = (props) => { + const [blockView, setBlockView] = useState('PREVIEW'); - const [blockView, setBlockView] = useState('PREVIEW') + const copyCode = async (event) => { + await navigator.clipboard.writeText(props.code); + event.preventDefault(); + }; - const copyCode = async (event) => { - await navigator.clipboard.writeText(props.code); - event.preventDefault(); - } - - return ( -
    -
    -
    - - {props.header} - {props.new && New} - -
    - - - -
    -
    -
    - {blockView === 'PREVIEW' && -
    - {props.children} -
    } - - {blockView === 'CODE' && - - {props.code} - - } -
    -
    + return ( +
    +
    +
    + + {props.header} + {props.new && New} + +
    + + + +
    - ) -} +
    + {blockView === 'PREVIEW' && ( +
    + {props.children} +
    + )} + + {blockView === 'CODE' && {props.code}} +
    +
    +
    + ); +}; export default BlockViewer; diff --git a/web-ui/web-react/src/ScrollToTop.js b/web-ui/web-react/src/ScrollToTop.js index e4313de7..04ad222c 100644 --- a/web-ui/web-react/src/ScrollToTop.js +++ b/web-ui/web-react/src/ScrollToTop.js @@ -2,14 +2,13 @@ import { useEffect } from 'react'; import { useLocation, withRouter } from 'react-router-dom'; const ScrollToTop = (props) => { + let location = useLocation(); - let location = useLocation(); + useEffect(() => { + window.scrollTo(0, 0); + }, [location]); - useEffect(() => { - window.scrollTo(0, 0) - }, [location]); - - return props.children; -} + return props.children; +}; export default withRouter(ScrollToTop); diff --git a/web-ui/web-react/src/assets/demo/Badge.scss b/web-ui/web-react/src/assets/demo/Badge.scss index e61e59de..e8016853 100644 --- a/web-ui/web-react/src/assets/demo/Badge.scss +++ b/web-ui/web-react/src/assets/demo/Badge.scss @@ -1,95 +1,95 @@ .customer-badge, .product-badge, .order-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; } .customer-badge { - &.status-qualified { - background: #C8E6C9; - color: #256029; - } + &.status-qualified { + background: #c8e6c9; + color: #256029; + } - &.status-unqualified { - background: #FFCDD2; - color: #C63737; - } + &.status-unqualified { + background: #ffcdd2; + color: #c63737; + } - &.status-negotiation { - background: #FEEDAF; - color: #8A5340; - } + &.status-negotiation { + background: #feedaf; + color: #8a5340; + } - &.status-new { - background: #B3E5FC; - color: #23547B; - } + &.status-new { + background: #b3e5fc; + color: #23547b; + } - &.status-renewal { - background: #ECCFFF; - color: #694382; - } + &.status-renewal { + background: #eccfff; + color: #694382; + } - &.status-proposal { - background: #FFD8B2; - color: #805B36; - } + &.status-proposal { + background: #ffd8b2; + color: #805b36; + } } .product-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; - &.status-instock { - background: #C8E6C9; - color: #256029; - } + &.status-instock { + background: #c8e6c9; + color: #256029; + } - &.status-outofstock { - background: #FFCDD2; - color: #C63737; - } + &.status-outofstock { + background: #ffcdd2; + color: #c63737; + } - &.status-lowstock { - background: #FEEDAF; - color: #8A5340; - } + &.status-lowstock { + background: #feedaf; + color: #8a5340; + } } .order-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; - &.order-delivered { - background: #C8E6C9; - color: #256029; - } + &.order-delivered { + background: #c8e6c9; + color: #256029; + } - &.order-cancelled { - background: #FFCDD2; - color: #C63737; - } + &.order-cancelled { + background: #ffcdd2; + color: #c63737; + } - &.order-pending { - background: #FEEDAF; - color: #8A5340; - } + &.order-pending { + background: #feedaf; + color: #8a5340; + } - &.order-returned { - background: #ECCFFF; - color: #694382; - } + &.order-returned { + background: #eccfff; + color: #694382; + } } diff --git a/web-ui/web-react/src/assets/demo/BlockViewer.scss b/web-ui/web-react/src/assets/demo/BlockViewer.scss index 39b996c1..f9d3e345 100644 --- a/web-ui/web-react/src/assets/demo/BlockViewer.scss +++ b/web-ui/web-react/src/assets/demo/BlockViewer.scss @@ -1,147 +1,149 @@ .block-viewer { - .block-section { - margin-bottom: 4rem; - overflow: hidden; + .block-section { + margin-bottom: 4rem; + overflow: hidden; + } + + .block-header { + padding: 1rem 2rem; + background-color: var(--surface-section); + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border: 1px solid var(--surface-d); + display: flex; + align-items: center; + justify-content: space-between; + + .block-title { + font-weight: 700; + display: inline-flex; + align-items: center; + + .badge-free { + border-radius: 4px; + padding: 0.25rem 0.5rem; + background-color: var(--orange-500); + color: white; + margin-left: 1rem; + font-weight: 700; + font-size: 0.875rem; + } } - .block-header { - padding: 1rem 2rem; - background-color: var(--surface-section); - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border:1px solid var(--surface-d); + .block-actions { + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; + margin-left: 1rem; + + a, + button { display: flex; align-items: center; - justify-content: space-between; + margin-right: 0.75rem; + padding: 0.5rem 1rem; + border-radius: 4px; + font-weight: 600; + border: 1px solid transparent; + transition: background-color 0.2s; + cursor: pointer; - .block-title { - font-weight: 700; - display: inline-flex; - align-items: center; - - .badge-free { - border-radius: 4px; - padding: .25rem .5rem; - background-color: var(--orange-500); - color: white; - margin-left: 1rem; - font-weight: 700; - font-size: .875rem; - } + &:last-child { + margin-right: 0; } - .block-actions { - display: flex; - align-items: center; - justify-content: space-between; - user-select: none; - margin-left: 1rem; - - a,button { - display: flex; - align-items: center; - margin-right: .75rem; - padding: .5rem 1rem; - border-radius: 4px; - font-weight: 600; - border: 1px solid transparent; - transition: background-color .2s; - cursor: pointer; - - &:last-child { - margin-right: 0; - } - - &:not(.block-action-disabled):hover { - background-color: var(--surface-c); - } - - &.block-action-active { - border-color: var(--primary-color); - color: var(--primary-color); - } - - &.block-action-copy { - i { - color: var(--primary-color); - font-size: 1.25rem; - margin: 0; - } - } - - &.block-action-disabled { - opacity: .6; - cursor: auto !important; - } - - i { - margin-right: .5rem; - } - } - } - } - - .block-content { - padding: 0; - border:1px solid var(--surface-d); - border-top: 0 none; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - overflow: hidden; - } - - pre[class*="language-"] { - margin: 0 !important; - - &:before, &:after { - display: none !important; + &:not(.block-action-disabled):hover { + background-color: var(--surface-c); } - code { - border-left: 0 none !important; - box-shadow: none !important; - background: var(--surface-e) !important; + &.block-action-active { + border-color: var(--primary-color); + color: var(--primary-color); + } + + &.block-action-copy { + i { + color: var(--primary-color); + font-size: 1.25rem; margin: 0; - color: var(--text-color); - font-size: 14px; - padding: 0 2rem !important; - - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } - - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } - - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.string { - background: transparent; - } - } + } } + + &.block-action-disabled { + opacity: 0.6; + cursor: auto !important; + } + + i { + margin-right: 0.5rem; + } + } + } + } + + .block-content { + padding: 0; + border: 1px solid var(--surface-d); + border-top: 0 none; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + overflow: hidden; + } + + pre[class*='language-'] { + margin: 0 !important; + + &:before, + &:after { + display: none !important; } - @media screen and (max-width: 575px) { - .block-header { - flex-direction: column; - align-items: start; + code { + border-left: 0 none !important; + box-shadow: none !important; + background: var(--surface-e) !important; + margin: 0; + color: var(--text-color); + font-size: 14px; + padding: 0 2rem !important; - .block-actions { - margin-top: 1rem; - margin-left: 0; - } + .token { + &.tag, + &.keyword { + color: #2196f3 !important; } + + &.attr-name, + &.attr-string { + color: #2196f3 !important; + } + + &.attr-value { + color: #4caf50 !important; + } + + &.punctuation { + color: var(--text-color); + } + + &.operator, + &.string { + background: transparent; + } + } } + } + + @media screen and (max-width: 575px) { + .block-header { + flex-direction: column; + align-items: start; + + .block-actions { + margin-top: 1rem; + margin-left: 0; + } + } + } } diff --git a/web-ui/web-react/src/assets/demo/Demos.scss b/web-ui/web-react/src/assets/demo/Demos.scss index a4036b84..07d55104 100644 --- a/web-ui/web-react/src/assets/demo/Demos.scss +++ b/web-ui/web-react/src/assets/demo/Demos.scss @@ -3,4 +3,4 @@ @import './MediaDemo.scss'; @import './TableDemo.scss'; @import './TimelineDemo.scss'; -@import './Badge.scss'; \ No newline at end of file +@import './Badge.scss'; diff --git a/web-ui/web-react/src/assets/demo/Documentation.scss b/web-ui/web-react/src/assets/demo/Documentation.scss index 61110e84..205bc20e 100644 --- a/web-ui/web-react/src/assets/demo/Documentation.scss +++ b/web-ui/web-react/src/assets/demo/Documentation.scss @@ -1,60 +1,61 @@ .docs { - i:not([class~="pi"]) { - background-color: transparent; - color: #2196f3; - font-family: Monaco, courier, monospace; - font-style: normal; - font-size: 12px; - font-weight: 500; - padding: 0 4px; - letter-spacing: .5px; - font-weight: 600; - margin: 0 2px; - display: inline-flex; + i:not([class~='pi']) { + background-color: transparent; + color: #2196f3; + font-family: Monaco, courier, monospace; + font-style: normal; + font-size: 12px; + font-weight: 500; + padding: 0 4px; + letter-spacing: 0.5px; + font-weight: 600; + margin: 0 2px; + display: inline-flex; + } + + a { + font-weight: 500; + } + + pre[class*='language-'] { + &:before, + &:after { + display: none !important; } - a { - font-weight: 500; + code { + border-left: 6px solid var(--surface-border) !important; + box-shadow: none !important; + background: var(--surface-ground) !important; + margin: 1em 0; + color: var(--text-color); + font-size: 14px; } - pre[class*="language-"] { - &:before, &:after { - display: none !important; - } + .token { + &.tag, + &.keyword { + color: #2196f3 !important; + } - code { - border-left: 6px solid var(--surface-border) !important; - box-shadow: none !important; - background: var(--surface-ground) !important; - margin: 1em 0; - color: var(--text-color); - font-size: 14px; - } + &.attr-name, + &.attr-string { + color: #2196f3 !important; + } - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } + &.attr-value { + color: #4caf50 !important; + } - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } + &.punctuation { + color: var(--text-color); + } - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.variable, - &.string { - background: transparent; - } - } + &.operator, + &.variable, + &.string { + background: transparent; + } } + } } diff --git a/web-ui/web-react/src/assets/demo/MediaDemo.scss b/web-ui/web-react/src/assets/demo/MediaDemo.scss index 43ad7ab1..412cc03e 100644 --- a/web-ui/web-react/src/assets/demo/MediaDemo.scss +++ b/web-ui/web-react/src/assets/demo/MediaDemo.scss @@ -1,16 +1,16 @@ .media-demo { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: 0.3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - } + .product-item { + .product-item-content { + border: 1px solid var(--surface-d); + border-radius: 3px; + margin: 0.3rem; + text-align: center; + padding: 2rem 0; } + + .product-image { + width: 50%; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + } + } } diff --git a/web-ui/web-react/src/assets/demo/TableDemo.scss b/web-ui/web-react/src/assets/demo/TableDemo.scss index 75193929..f5fc5816 100644 --- a/web-ui/web-react/src/assets/demo/TableDemo.scss +++ b/web-ui/web-react/src/assets/demo/TableDemo.scss @@ -1,16 +1,16 @@ .table-demo { - .p-datatable-frozen-tbody { - font-weight: bold; - } + .p-datatable-frozen-tbody { + font-weight: bold; + } - .p-datatable-scrollable { - .p-frozen-column { - font-weight: bold; - } + .p-datatable-scrollable { + .p-frozen-column { + font-weight: bold; } + } - .image-text { - vertical-align: middle; - margin-left: .5rem; - } + .image-text { + vertical-align: middle; + margin-left: 0.5rem; + } } diff --git a/web-ui/web-react/src/assets/demo/TimelineDemo.scss b/web-ui/web-react/src/assets/demo/TimelineDemo.scss index 8be2c5aa..b01f93a5 100644 --- a/web-ui/web-react/src/assets/demo/TimelineDemo.scss +++ b/web-ui/web-react/src/assets/demo/TimelineDemo.scss @@ -1,26 +1,26 @@ .timeline-demo { - .p-timeline-event-content, - .p-timeline-event-opposite { - line-height: 1; - } + .p-timeline-event-content, + .p-timeline-event-opposite { + line-height: 1; + } - @media screen and (max-width: 960px) { - .customized-timeline { - .p-timeline-event:nth-child(even) { - flex-direction: row !important; + @media screen and (max-width: 960px) { + .customized-timeline { + .p-timeline-event:nth-child(even) { + flex-direction: row !important; - .p-timeline-event-content { - text-align: left !important; - } - } - - .p-timeline-event-opposite { - flex: 0; - } - - .p-card { - margin-top: 1rem; - } + .p-timeline-event-content { + text-align: left !important; } + } + + .p-timeline-event-opposite { + flex: 0; + } + + .p-card { + margin-top: 1rem; + } } + } } diff --git a/web-ui/web-react/src/assets/demo/flags/flags.css b/web-ui/web-react/src/assets/demo/flags/flags.css index 592d5757..81849bc4 100755 --- a/web-ui/web-react/src/assets/demo/flags/flags.css +++ b/web-ui/web-react/src/assets/demo/flags/flags.css @@ -1 +1,740 @@ -span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%} +span.flag { + width: 44px; + height: 30px; + display: inline-block; +} +img.flag { + width: 30px; +} +.flag { + background: url(flags_responsive.png) no-repeat; + background-size: 100%; + vertical-align: middle; +} +.flag-ad { + background-position: 0 0.413223%; +} +.flag-ae { + background-position: 0 0.826446%; +} +.flag-af { + background-position: 0 1.239669%; +} +.flag-ag { + background-position: 0 1.652893%; +} +.flag-ai { + background-position: 0 2.066116%; +} +.flag-al { + background-position: 0 2.479339%; +} +.flag-am { + background-position: 0 2.892562%; +} +.flag-an { + background-position: 0 3.305785%; +} +.flag-ao { + background-position: 0 3.719008%; +} +.flag-aq { + background-position: 0 4.132231%; +} +.flag-ar { + background-position: 0 4.545455%; +} +.flag-as { + background-position: 0 4.958678%; +} +.flag-at { + background-position: 0 5.371901%; +} +.flag-au { + background-position: 0 5.785124%; +} +.flag-aw { + background-position: 0 6.198347%; +} +.flag-az { + background-position: 0 6.61157%; +} +.flag-ba { + background-position: 0 7.024793%; +} +.flag-bb { + background-position: 0 7.438017%; +} +.flag-bd { + background-position: 0 7.85124%; +} +.flag-be { + background-position: 0 8.264463%; +} +.flag-bf { + background-position: 0 8.677686%; +} +.flag-bg { + background-position: 0 9.090909%; +} +.flag-bh { + background-position: 0 9.504132%; +} +.flag-bi { + background-position: 0 9.917355%; +} +.flag-bj { + background-position: 0 10.330579%; +} +.flag-bm { + background-position: 0 10.743802%; +} +.flag-bn { + background-position: 0 11.157025%; +} +.flag-bo { + background-position: 0 11.570248%; +} +.flag-br { + background-position: 0 11.983471%; +} +.flag-bs { + background-position: 0 12.396694%; +} +.flag-bt { + background-position: 0 12.809917%; +} +.flag-bv { + background-position: 0 13.22314%; +} +.flag-bw { + background-position: 0 13.636364%; +} +.flag-by { + background-position: 0 14.049587%; +} +.flag-bz { + background-position: 0 14.46281%; +} +.flag-ca { + background-position: 0 14.876033%; +} +.flag-cc { + background-position: 0 15.289256%; +} +.flag-cd { + background-position: 0 15.702479%; +} +.flag-cf { + background-position: 0 16.115702%; +} +.flag-cg { + background-position: 0 16.528926%; +} +.flag-ch { + background-position: 0 16.942149%; +} +.flag-ci { + background-position: 0 17.355372%; +} +.flag-ck { + background-position: 0 17.768595%; +} +.flag-cl { + background-position: 0 18.181818%; +} +.flag-cm { + background-position: 0 18.595041%; +} +.flag-cn { + background-position: 0 19.008264%; +} +.flag-co { + background-position: 0 19.421488%; +} +.flag-cr { + background-position: 0 19.834711%; +} +.flag-cu { + background-position: 0 20.247934%; +} +.flag-cv { + background-position: 0 20.661157%; +} +.flag-cx { + background-position: 0 21.07438%; +} +.flag-cy { + background-position: 0 21.487603%; +} +.flag-cz { + background-position: 0 21.900826%; +} +.flag-de { + background-position: 0 22.31405%; +} +.flag-dj { + background-position: 0 22.727273%; +} +.flag-dk { + background-position: 0 23.140496%; +} +.flag-dm { + background-position: 0 23.553719%; +} +.flag-do { + background-position: 0 23.966942%; +} +.flag-dz { + background-position: 0 24.380165%; +} +.flag-ec { + background-position: 0 24.793388%; +} +.flag-ee { + background-position: 0 25.206612%; +} +.flag-eg { + background-position: 0 25.619835%; +} +.flag-eh { + background-position: 0 26.033058%; +} +.flag-er { + background-position: 0 26.446281%; +} +.flag-es { + background-position: 0 26.859504%; +} +.flag-et { + background-position: 0 27.272727%; +} +.flag-fi { + background-position: 0 27.68595%; +} +.flag-fj { + background-position: 0 28.099174%; +} +.flag-fk { + background-position: 0 28.512397%; +} +.flag-fm { + background-position: 0 28.92562%; +} +.flag-fo { + background-position: 0 29.338843%; +} +.flag-fr { + background-position: 0 29.752066%; +} +.flag-ga { + background-position: 0 30.165289%; +} +.flag-gd { + background-position: 0 30.578512%; +} +.flag-ge { + background-position: 0 30.991736%; +} +.flag-gf { + background-position: 0 31.404959%; +} +.flag-gh { + background-position: 0 31.818182%; +} +.flag-gi { + background-position: 0 32.231405%; +} +.flag-gl { + background-position: 0 32.644628%; +} +.flag-gm { + background-position: 0 33.057851%; +} +.flag-gn { + background-position: 0 33.471074%; +} +.flag-gp { + background-position: 0 33.884298%; +} +.flag-gq { + background-position: 0 34.297521%; +} +.flag-gr { + background-position: 0 34.710744%; +} +.flag-gs { + background-position: 0 35.123967%; +} +.flag-gt { + background-position: 0 35.53719%; +} +.flag-gu { + background-position: 0 35.950413%; +} +.flag-gw { + background-position: 0 36.363636%; +} +.flag-gy { + background-position: 0 36.77686%; +} +.flag-hk { + background-position: 0 37.190083%; +} +.flag-hm { + background-position: 0 37.603306%; +} +.flag-hn { + background-position: 0 38.016529%; +} +.flag-hr { + background-position: 0 38.429752%; +} +.flag-ht { + background-position: 0 38.842975%; +} +.flag-hu { + background-position: 0 39.256198%; +} +.flag-id { + background-position: 0 39.669421%; +} +.flag-ie { + background-position: 0 40.082645%; +} +.flag-il { + background-position: 0 40.495868%; +} +.flag-in { + background-position: 0 40.909091%; +} +.flag-io { + background-position: 0 41.322314%; +} +.flag-iq { + background-position: 0 41.735537%; +} +.flag-ir { + background-position: 0 42.14876%; +} +.flag-is { + background-position: 0 42.561983%; +} +.flag-it { + background-position: 0 42.975207%; +} +.flag-jm { + background-position: 0 43.38843%; +} +.flag-jo { + background-position: 0 43.801653%; +} +.flag-jp { + background-position: 0 44.214876%; +} +.flag-ke { + background-position: 0 44.628099%; +} +.flag-kg { + background-position: 0 45.041322%; +} +.flag-kh { + background-position: 0 45.454545%; +} +.flag-ki { + background-position: 0 45.867769%; +} +.flag-km { + background-position: 0 46.280992%; +} +.flag-kn { + background-position: 0 46.694215%; +} +.flag-kp { + background-position: 0 47.107438%; +} +.flag-kr { + background-position: 0 47.520661%; +} +.flag-kw { + background-position: 0 47.933884%; +} +.flag-ky { + background-position: 0 48.347107%; +} +.flag-kz { + background-position: 0 48.760331%; +} +.flag-la { + background-position: 0 49.173554%; +} +.flag-lb { + background-position: 0 49.586777%; +} +.flag-lc { + background-position: 0 50%; +} +.flag-li { + background-position: 0 50.413223%; +} +.flag-lk { + background-position: 0 50.826446%; +} +.flag-lr { + background-position: 0 51.239669%; +} +.flag-ls { + background-position: 0 51.652893%; +} +.flag-lt { + background-position: 0 52.066116%; +} +.flag-lu { + background-position: 0 52.479339%; +} +.flag-lv { + background-position: 0 52.892562%; +} +.flag-ly { + background-position: 0 53.305785%; +} +.flag-ma { + background-position: 0 53.719008%; +} +.flag-mc { + background-position: 0 54.132231%; +} +.flag-md { + background-position: 0 54.545455%; +} +.flag-me { + background-position: 0 54.958678%; +} +.flag-mg { + background-position: 0 55.371901%; +} +.flag-mh { + background-position: 0 55.785124%; +} +.flag-mk { + background-position: 0 56.198347%; +} +.flag-ml { + background-position: 0 56.61157%; +} +.flag-mm { + background-position: 0 57.024793%; +} +.flag-mn { + background-position: 0 57.438017%; +} +.flag-mo { + background-position: 0 57.85124%; +} +.flag-mp { + background-position: 0 58.264463%; +} +.flag-mq { + background-position: 0 58.677686%; +} +.flag-mr { + background-position: 0 59.090909%; +} +.flag-ms { + background-position: 0 59.504132%; +} +.flag-mt { + background-position: 0 59.917355%; +} +.flag-mu { + background-position: 0 60.330579%; +} +.flag-mv { + background-position: 0 60.743802%; +} +.flag-mw { + background-position: 0 61.157025%; +} +.flag-mx { + background-position: 0 61.570248%; +} +.flag-my { + background-position: 0 61.983471%; +} +.flag-mz { + background-position: 0 62.396694%; +} +.flag-na { + background-position: 0 62.809917%; +} +.flag-nc { + background-position: 0 63.22314%; +} +.flag-ne { + background-position: 0 63.636364%; +} +.flag-nf { + background-position: 0 64.049587%; +} +.flag-ng { + background-position: 0 64.46281%; +} +.flag-ni { + background-position: 0 64.876033%; +} +.flag-nl { + background-position: 0 65.289256%; +} +.flag-no { + background-position: 0 65.702479%; +} +.flag-np { + background-position: 0 66.115702%; +} +.flag-nr { + background-position: 0 66.528926%; +} +.flag-nu { + background-position: 0 66.942149%; +} +.flag-nz { + background-position: 0 67.355372%; +} +.flag-om { + background-position: 0 67.768595%; +} +.flag-pa { + background-position: 0 68.181818%; +} +.flag-pe { + background-position: 0 68.595041%; +} +.flag-pf { + background-position: 0 69.008264%; +} +.flag-pg { + background-position: 0 69.421488%; +} +.flag-ph { + background-position: 0 69.834711%; +} +.flag-pk { + background-position: 0 70.247934%; +} +.flag-pl { + background-position: 0 70.661157%; +} +.flag-pm { + background-position: 0 71.07438%; +} +.flag-pn { + background-position: 0 71.487603%; +} +.flag-pr { + background-position: 0 71.900826%; +} +.flag-pt { + background-position: 0 72.31405%; +} +.flag-pw { + background-position: 0 72.727273%; +} +.flag-py { + background-position: 0 73.140496%; +} +.flag-qa { + background-position: 0 73.553719%; +} +.flag-re { + background-position: 0 73.966942%; +} +.flag-ro { + background-position: 0 74.380165%; +} +.flag-rs { + background-position: 0 74.793388%; +} +.flag-ru { + background-position: 0 75.206612%; +} +.flag-rw { + background-position: 0 75.619835%; +} +.flag-sa { + background-position: 0 76.033058%; +} +.flag-sb { + background-position: 0 76.446281%; +} +.flag-sc { + background-position: 0 76.859504%; +} +.flag-sd { + background-position: 0 77.272727%; +} +.flag-se { + background-position: 0 77.68595%; +} +.flag-sg { + background-position: 0 78.099174%; +} +.flag-sh { + background-position: 0 78.512397%; +} +.flag-si { + background-position: 0 78.92562%; +} +.flag-sj { + background-position: 0 79.338843%; +} +.flag-sk { + background-position: 0 79.752066%; +} +.flag-sl { + background-position: 0 80.165289%; +} +.flag-sm { + background-position: 0 80.578512%; +} +.flag-sn { + background-position: 0 80.991736%; +} +.flag-so { + background-position: 0 81.404959%; +} +.flag-sr { + background-position: 0 81.818182%; +} +.flag-ss { + background-position: 0 82.231405%; +} +.flag-st { + background-position: 0 82.644628%; +} +.flag-sv { + background-position: 0 83.057851%; +} +.flag-sy { + background-position: 0 83.471074%; +} +.flag-sz { + background-position: 0 83.884298%; +} +.flag-tc { + background-position: 0 84.297521%; +} +.flag-td { + background-position: 0 84.710744%; +} +.flag-tf { + background-position: 0 85.123967%; +} +.flag-tg { + background-position: 0 85.53719%; +} +.flag-th { + background-position: 0 85.950413%; +} +.flag-tj { + background-position: 0 86.363636%; +} +.flag-tk { + background-position: 0 86.77686%; +} +.flag-tl { + background-position: 0 87.190083%; +} +.flag-tm { + background-position: 0 87.603306%; +} +.flag-tn { + background-position: 0 88.016529%; +} +.flag-to { + background-position: 0 88.429752%; +} +.flag-tp { + background-position: 0 88.842975%; +} +.flag-tr { + background-position: 0 89.256198%; +} +.flag-tt { + background-position: 0 89.669421%; +} +.flag-tv { + background-position: 0 90.082645%; +} +.flag-tw { + background-position: 0 90.495868%; +} +.flag-ty { + background-position: 0 90.909091%; +} +.flag-tz { + background-position: 0 91.322314%; +} +.flag-ua { + background-position: 0 91.735537%; +} +.flag-ug { + background-position: 0 92.14876%; +} +.flag-gb, +.flag-uk { + background-position: 0 92.561983%; +} +.flag-um { + background-position: 0 92.975207%; +} +.flag-us { + background-position: 0 93.38843%; +} +.flag-uy { + background-position: 0 93.801653%; +} +.flag-uz { + background-position: 0 94.214876%; +} +.flag-va { + background-position: 0 94.628099%; +} +.flag-vc { + background-position: 0 95.041322%; +} +.flag-ve { + background-position: 0 95.454545%; +} +.flag-vg { + background-position: 0 95.867769%; +} +.flag-vi { + background-position: 0 96.280992%; +} +.flag-vn { + background-position: 0 96.694215%; +} +.flag-vu { + background-position: 0 97.107438%; +} +.flag-wf { + background-position: 0 97.520661%; +} +.flag-ws { + background-position: 0 97.933884%; +} +.flag-ye { + background-position: 0 98.347107%; +} +.flag-za { + background-position: 0 98.760331%; +} +.flag-zm { + background-position: 0 99.173554%; +} +.flag-zr { + background-position: 0 99.586777%; +} +.flag-zw { + background-position: 0 100%; +} diff --git a/web-ui/web-react/src/assets/layout/_overrides.scss b/web-ui/web-react/src/assets/layout/_overrides.scss index 850b92b1..e6b931c3 100644 --- a/web-ui/web-react/src/assets/layout/_overrides.scss +++ b/web-ui/web-react/src/assets/layout/_overrides.scss @@ -1 +1 @@ -//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future \ No newline at end of file +//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future diff --git a/web-ui/web-react/src/assets/layout/_variables.scss b/web-ui/web-react/src/assets/layout/_variables.scss index 3886613d..54a65a75 100644 --- a/web-ui/web-react/src/assets/layout/_variables.scss +++ b/web-ui/web-react/src/assets/layout/_variables.scss @@ -1,4 +1,4 @@ /* General */ -$fontSize:10px; -$borderRadius:12px; -$transitionDuration:.2s; +$fontSize: 10px; +$borderRadius: 12px; +$transitionDuration: 0.2s; diff --git a/web-ui/web-react/src/assets/layout/layout.scss b/web-ui/web-react/src/assets/layout/layout.scss index 5980a637..772e4ee7 100644 --- a/web-ui/web-react/src/assets/layout/layout.scss +++ b/web-ui/web-react/src/assets/layout/layout.scss @@ -1,3 +1,3 @@ -@import "./_variables"; -@import "./sass/_layout"; -@import "./_overrides"; \ No newline at end of file +@import './_variables'; +@import './sass/_layout'; +@import './_overrides'; diff --git a/web-ui/web-react/src/assets/layout/sass/_config.scss b/web-ui/web-react/src/assets/layout/sass/_config.scss index 76bf2a28..466271c3 100644 --- a/web-ui/web-react/src/assets/layout/sass/_config.scss +++ b/web-ui/web-react/src/assets/layout/sass/_config.scss @@ -1,103 +1,104 @@ .layout-config { - position: fixed; - top: 0; - padding: 0; - right: 0; - width: 20rem; - z-index: 999; + position: fixed; + top: 0; + padding: 0; + right: 0; + width: 20rem; + z-index: 999; + height: 100vh; + transform: translateX(100%); + transition: transform $transitionDuration; + backface-visibility: hidden; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08) !important; + color: var(--text-color); + background-color: var(--surface-overlay); + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + + &.layout-config-active { + transform: translateX(0); + } + + .layout-config-button { + display: block; + position: absolute; + width: 52px; + height: 52px; + line-height: 52px; + background-color: var(--primary-color); + color: var(--primary-color-text); + text-align: center; + top: 230px; + left: -52px; + z-index: -1; + overflow: hidden; + cursor: pointer; + border-top-left-radius: $borderRadius; + border-bottom-left-radius: $borderRadius; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + transition: background-color $transitionDuration; + + i { + font-size: 32px; + line-height: inherit; + cursor: pointer; + transform: rotate(0deg); + transition: color $transitionDuration, transform 1s; + } + } + + .layout-config-close { + position: absolute; + right: 1rem; + top: 1rem; + z-index: 1; + } + + .layout-config-content { + position: relative; + overflow: auto; height: 100vh; - transform: translateX(100%); - transition: transform $transitionDuration; - backface-visibility: hidden; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) !important; - color: var(--text-color); - background-color: var(--surface-overlay); - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + padding: 2rem; + } - &.layout-config-active { - transform: translateX(0); + .config-scale { + display: flex; + align-items: center; + margin: 1rem 0 2rem 0; + + .p-button { + margin-right: 0.5rem; } - .layout-config-button { - display: block; - position: absolute; - width: 52px; - height: 52px; - line-height: 52px; - background-color: var(--primary-color); - color: var(--primary-color-text); - text-align: center; - top: 230px; - left: -52px; - z-index: -1; - overflow: hidden; - cursor: pointer; - border-top-left-radius: $borderRadius; - border-bottom-left-radius: $borderRadius; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - transition: background-color $transitionDuration; + i { + margin-right: 0.5rem; + font-size: 0.75rem; + color: var(--text-color-secondary); - i { - font-size: 32px; - line-height: inherit; - cursor: pointer; - transform: rotate(0deg); - transition: color $transitionDuration, transform 1s; - } + &.scale-active { + font-size: 1.25rem; + color: var(--primary-color); + } + } + } + + .free-themes { + img { + width: 2rem; + border-radius: 4px; + transition: transform 0.2s; + display: block; + + &:hover { + transform: scale(1.1); + } } - .layout-config-close { - position: absolute; - right: 1rem; - top: 1rem; - z-index: 1; - } - - .layout-config-content { - position: relative; - overflow: auto; - height: 100vh; - padding: 2rem; - } - - .config-scale { - display: flex; - align-items: center; - margin: 1rem 0 2rem 0; - - .p-button { - margin-right: .5rem; - } - - i { - margin-right: .5rem; - font-size: .75rem; - color: var(--text-color-secondary); - - &.scale-active { - font-size: 1.25rem; - color: var(--primary-color); - } - } - } - - .free-themes { - img { - width: 2rem; - border-radius: 4px; - transition: transform .2s; - display: block; - - &:hover { - transform: scale(1.1); - } - } - - span { - font-size: .75rem; - margin-top: .25rem; - } + span { + font-size: 0.75rem; + margin-top: 0.25rem; } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_content.scss b/web-ui/web-react/src/assets/layout/sass/_content.scss index 2c40e1da..5bf68c26 100644 --- a/web-ui/web-react/src/assets/layout/sass/_content.scss +++ b/web-ui/web-react/src/assets/layout/sass/_content.scss @@ -1,12 +1,12 @@ .layout-main-container { - display: flex; - flex-direction: column; - min-height: 100vh; - justify-content: space-between; - padding: 7rem 2rem 2rem 4rem; - transition: margin-left $transitionDuration; + display: flex; + flex-direction: column; + min-height: 100vh; + justify-content: space-between; + padding: 7rem 2rem 2rem 4rem; + transition: margin-left $transitionDuration; } .layout-main { - flex: 1 1 auto; + flex: 1 1 auto; } diff --git a/web-ui/web-react/src/assets/layout/sass/_footer.scss b/web-ui/web-react/src/assets/layout/sass/_footer.scss index 367d3128..4b988613 100644 --- a/web-ui/web-react/src/assets/layout/sass/_footer.scss +++ b/web-ui/web-react/src/assets/layout/sass/_footer.scss @@ -1,8 +1,8 @@ .layout-footer { - transition: margin-left $transitionDuration; - display: flex; - align-items: center; - justify-content: center; - padding-top: 1rem; - border-top: 1px solid var(--surface-border); + transition: margin-left $transitionDuration; + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + border-top: 1px solid var(--surface-border); } diff --git a/web-ui/web-react/src/assets/layout/sass/_layout.scss b/web-ui/web-react/src/assets/layout/sass/_layout.scss index ec73f06a..908c2f42 100644 --- a/web-ui/web-react/src/assets/layout/sass/_layout.scss +++ b/web-ui/web-react/src/assets/layout/sass/_layout.scss @@ -1,11 +1,11 @@ -@import "./_mixins"; -@import "./_splash"; -@import "./_main"; -@import "./_topbar"; -@import "./_menu"; -@import "./_config"; -@import "./_content"; -@import "./_footer"; -@import "./_responsive"; -@import "./_utils"; -@import "./_typography"; +@import './_mixins'; +@import './_splash'; +@import './_main'; +@import './_topbar'; +@import './_menu'; +@import './_config'; +@import './_content'; +@import './_footer'; +@import './_responsive'; +@import './_utils'; +@import './_typography'; diff --git a/web-ui/web-react/src/assets/layout/sass/_main.scss b/web-ui/web-react/src/assets/layout/sass/_main.scss index 6edf0076..fa3adfdf 100644 --- a/web-ui/web-react/src/assets/layout/sass/_main.scss +++ b/web-ui/web-react/src/assets/layout/sass/_main.scss @@ -1,28 +1,29 @@ * { - box-sizing: border-box; + box-sizing: border-box; } html { - height: 100%; - font-size: $fontSize; + height: 100%; + font-size: $fontSize; } body { - font-family: var(--font-family); - color: var(--text-color); - background-color: var(--surface-ground); - margin: 0; - padding: 0; - min-height: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: var(--font-family); + color: var(--text-color); + background-color: var(--surface-ground); + margin: 0; + padding: 0; + min-height: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -a, button { - text-decoration: none; - color: var(--primary-color); +a, +button { + text-decoration: none; + color: var(--primary-color); } .layout-theme-light { - background-color: #edf1f5; + background-color: #edf1f5; } diff --git a/web-ui/web-react/src/assets/layout/sass/_menu.scss b/web-ui/web-react/src/assets/layout/sass/_menu.scss index a7bff896..55e7174f 100644 --- a/web-ui/web-react/src/assets/layout/sass/_menu.scss +++ b/web-ui/web-react/src/assets/layout/sass/_menu.scss @@ -1,120 +1,121 @@ .layout-sidebar { - position: fixed; - width: 300px; - height: calc(100vh - 9rem); - z-index: 999; - overflow-y: auto; - user-select: none; - top: 7rem; - left: 2rem; - transition: transform $transitionDuration, left $transitionDuration; - background-color: var(--surface-overlay); - border-radius: 12px; - padding: 1.5rem; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) + position: fixed; + width: 300px; + height: calc(100vh - 9rem); + z-index: 999; + overflow-y: auto; + user-select: none; + top: 7rem; + left: 2rem; + transition: transform $transitionDuration, left $transitionDuration; + background-color: var(--surface-overlay); + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); } .layout-menu { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; - li { - &.layout-menuitem-category { - margin-top: .75rem; + li { + &.layout-menuitem-category { + margin-top: 0.75rem; - &:first-child { - margin-top: 0; - } - } - - .layout-menuitem-root-text { - text-transform: uppercase; - color:var(--surface-900); - font-weight: 600; - margin-bottom: .5rem; - font-size: .875rem; - } - - a { - cursor: pointer; - text-decoration: none; - display: flex; - align-items: center; - color:var(--text-color); - transition: color $transitionDuration; - border-radius: $borderRadius; - padding: .75rem 1rem; - transition: background-color .15s; - - span { - margin-left: 0.5rem; - } - - .menuitem-toggle-icon { - margin-left: auto; - } - - &:focus { - @include focused-inset(); - } - - &:hover { - background-color: var(--surface-hover); - } - - &.router-link-exact-active { - font-weight: 700; - color: var(--primary-color); - } - - .p-badge { - margin-left: auto; - } - } - - &.active-menuitem { - > a { - .menuitem-toggle-icon { - &:before { - content: '\e933'; - } - } - } - } - - ul { - list-style-type: none; - margin: 0; - padding: 0; - - &.layout-submenu-wrapper-enter { - max-height: 0; - } - - &.layout-submenu-wrapper-enter-active { - overflow: hidden; - max-height: 1000px; - transition: max-height 1s ease-in-out; - } - - &.layout-submenu-wrapper-enter-done { - transform: none; - } - - &.layout-submenu-wrapper-exit { - max-height: 1000px; - } - - &.layout-submenu-wrapper-exit-active { - overflow: hidden; - max-height: 0; - transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1); - } - - ul { - padding-left: 1rem; - } - } + &:first-child { + margin-top: 0; + } } + + .layout-menuitem-root-text { + text-transform: uppercase; + color: var(--surface-900); + font-weight: 600; + margin-bottom: 0.5rem; + font-size: 0.875rem; + } + + a { + cursor: pointer; + text-decoration: none; + display: flex; + align-items: center; + color: var(--text-color); + transition: color $transitionDuration; + border-radius: $borderRadius; + padding: 0.75rem 1rem; + transition: background-color 0.15s; + + span { + margin-left: 0.5rem; + } + + .menuitem-toggle-icon { + margin-left: auto; + } + + &:focus { + @include focused-inset(); + } + + &:hover { + background-color: var(--surface-hover); + } + + &.router-link-exact-active { + font-weight: 700; + color: var(--primary-color); + } + + .p-badge { + margin-left: auto; + } + } + + &.active-menuitem { + > a { + .menuitem-toggle-icon { + &:before { + content: '\e933'; + } + } + } + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + + &.layout-submenu-wrapper-enter { + max-height: 0; + } + + &.layout-submenu-wrapper-enter-active { + overflow: hidden; + max-height: 1000px; + transition: max-height 1s ease-in-out; + } + + &.layout-submenu-wrapper-enter-done { + transform: none; + } + + &.layout-submenu-wrapper-exit { + max-height: 1000px; + } + + &.layout-submenu-wrapper-exit-active { + overflow: hidden; + max-height: 0; + transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1); + } + + ul { + padding-left: 1rem; + } + } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_mixins.scss b/web-ui/web-react/src/assets/layout/sass/_mixins.scss index ec26860a..65e74e5f 100644 --- a/web-ui/web-react/src/assets/layout/sass/_mixins.scss +++ b/web-ui/web-react/src/assets/layout/sass/_mixins.scss @@ -1,13 +1,13 @@ @mixin focused() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: var(--focus-ring); + outline: 0 none; + outline-offset: 0; + transition: box-shadow 0.2s; + box-shadow: var(--focus-ring); } @mixin focused-inset() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: inset var(--focus-ring); + outline: 0 none; + outline-offset: 0; + transition: box-shadow 0.2s; + box-shadow: inset var(--focus-ring); } diff --git a/web-ui/web-react/src/assets/layout/sass/_responsive.scss b/web-ui/web-react/src/assets/layout/sass/_responsive.scss index d94d09c8..fc470cd2 100644 --- a/web-ui/web-react/src/assets/layout/sass/_responsive.scss +++ b/web-ui/web-react/src/assets/layout/sass/_responsive.scss @@ -1,89 +1,89 @@ @media (min-width: 992px) { - .layout-wrapper { - &.layout-overlay { - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } + .layout-wrapper { + &.layout-overlay { + .layout-main-container { + margin-left: 0; + padding-left: 2rem; + } - .layout-sidebar { - transform: translateX(-100%); - left: 0; - top: 0; - height: 100vh; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + .layout-sidebar { + transform: translateX(-100%); + left: 0; + top: 0; + height: 100vh; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } - &.layout-overlay-sidebar-active { - .layout-sidebar { - transform: translateX(0); - } - } - } - - &.layout-static { - .layout-main-container { - margin-left: 300px; - } - - &.layout-static-sidebar-inactive { - .layout-sidebar { - transform: translateX(-100%); - left: 0; - } - - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } - } - } - - .layout-mask { - display: none; + &.layout-overlay-sidebar-active { + .layout-sidebar { + transform: translateX(0); } + } } + + &.layout-static { + .layout-main-container { + margin-left: 300px; + } + + &.layout-static-sidebar-inactive { + .layout-sidebar { + transform: translateX(-100%); + left: 0; + } + + .layout-main-container { + margin-left: 0; + padding-left: 2rem; + } + } + } + + .layout-mask { + display: none; + } + } } @media (max-width: 991px) { - .layout-wrapper { - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } - - .layout-sidebar { - transform: translateX(-100%); - left: 0; - top: 0; - height: 100vh; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .layout-mask { - z-index: 998; - background-color: var(--mask-bg); - - &.layout-mask-enter-from, - &.layout-mask-leave-to { - background-color: transparent; - } - } - - &.layout-mobile-sidebar-active { - .layout-sidebar { - transform: translateX(0); - } - - .layout-mask { - display: block; - } - } + .layout-wrapper { + .layout-main-container { + margin-left: 0; + padding-left: 2rem; } - .body-overflow-hidden { - overflow: hidden; + .layout-sidebar { + transform: translateX(-100%); + left: 0; + top: 0; + height: 100vh; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + + .layout-mask { + z-index: 998; + background-color: var(--mask-bg); + + &.layout-mask-enter-from, + &.layout-mask-leave-to { + background-color: transparent; + } + } + + &.layout-mobile-sidebar-active { + .layout-sidebar { + transform: translateX(0); + } + + .layout-mask { + display: block; + } + } + } + + .body-overflow-hidden { + overflow: hidden; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_splash.scss b/web-ui/web-react/src/assets/layout/sass/_splash.scss index a8141044..f3ff3e7e 100644 --- a/web-ui/web-react/src/assets/layout/sass/_splash.scss +++ b/web-ui/web-react/src/assets/layout/sass/_splash.scss @@ -1,47 +1,48 @@ .preloader { - position: fixed; - z-index: 999999; - background: #edf1f5; - width: 100%; - height: 100%; + position: fixed; + z-index: 999999; + background: #edf1f5; + width: 100%; + height: 100%; } .preloader-content { - border: 0 solid transparent; - border-radius: 50%; - width: 150px; - height: 150px; - position: absolute; - top: calc(50vh - 75px); - left: calc(50vw - 75px); + border: 0 solid transparent; + border-radius: 50%; + width: 150px; + height: 150px; + position: absolute; + top: calc(50vh - 75px); + left: calc(50vw - 75px); } -.preloader-content:before, .preloader-content:after{ - content: ''; - border: 1em solid var(--primary-color); - border-radius: 50%; - width: inherit; - height: inherit; - position: absolute; - top: 0; - left: 0; - animation: loader 2s linear infinite; +.preloader-content:before, +.preloader-content:after { + content: ''; + border: 1em solid var(--primary-color); + border-radius: 50%; + width: inherit; + height: inherit; + position: absolute; + top: 0; + left: 0; + animation: loader 2s linear infinite; + opacity: 0; +} + +.preloader-content:before { + animation-delay: 0.5s; +} + +@keyframes loader { + 0% { + transform: scale(0); opacity: 0; -} - -.preloader-content:before{ - animation-delay: 0.5s; -} - -@keyframes loader{ - 0%{ - transform: scale(0); - opacity: 0; - } - 50%{ - opacity: 1; - } - 100%{ - transform: scale(1); - opacity: 0; - } + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_topbar.scss b/web-ui/web-react/src/assets/layout/sass/_topbar.scss index 79402366..3984dd7d 100644 --- a/web-ui/web-react/src/assets/layout/sass/_topbar.scss +++ b/web-ui/web-react/src/assets/layout/sass/_topbar.scss @@ -1,149 +1,151 @@ .layout-topbar { - position: fixed; - height: 5rem; - z-index: 997; - left: 0; - top: 0; - width: 100%; - padding: 0 2rem; - background-color: var(--surface-card); - transition: left $transitionDuration; + position: fixed; + height: 5rem; + z-index: 997; + left: 0; + top: 0; + width: 100%; + padding: 0 2rem; + background-color: var(--surface-card); + transition: left $transitionDuration; + display: flex; + align-items: center; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); + + .layout-topbar-logo { display: flex; align-items: center; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + color: var(--surface-900); + font-size: 1.5rem; + font-weight: 500; + width: 300px; + border-radius: 12px; - .layout-topbar-logo { - display: flex; - align-items: center; - color: var(--surface-900); - font-size: 1.5rem; - font-weight: 500; - width: 300px; - border-radius: 12px; - - img { - height: 2.5rem; - margin-right: .5rem; - } - - &:focus { - @include focused(); - } + img { + height: 2.5rem; + margin-right: 0.5rem; } + &:focus { + @include focused(); + } + } + + .layout-topbar-button { + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + color: var(--text-color-secondary); + border-radius: 50%; + width: 3rem; + height: 3rem; + cursor: pointer; + transition: background-color $transitionDuration; + + &:hover { + color: var(--text-color); + background-color: var(--surface-hover); + } + + &:focus { + @include focused(); + } + + i { + font-size: 1.5rem; + } + + span { + font-size: 1rem; + display: none; + } + } + + .layout-menu-button { + margin-left: 2rem; + } + + .layout-topbar-menu-button { + display: none; + + i { + font-size: 1.25rem; + } + } + + .layout-topbar-menu { + margin: 0 0 0 auto; + padding: 0; + list-style: none; + display: flex; + .layout-topbar-button { - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - color: var(--text-color-secondary); - border-radius: 50%; - width: 3rem; - height: 3rem; - cursor: pointer; - transition: background-color $transitionDuration; - - &:hover { - color: var(--text-color); - background-color: var(--surface-hover); - } - - &:focus { - @include focused(); - } - - i { - font-size: 1.5rem; - } - - span { - font-size: 1rem; - display: none; - } - } - - .layout-menu-button { - margin-left: 2rem; - } - - .layout-topbar-menu-button { - display: none; - - i { - font-size: 1.25rem; - } - } - - .layout-topbar-menu { - margin: 0 0 0 auto; - padding: 0; - list-style: none; - display: flex; - - .layout-topbar-button { - margin-left: 1rem; - } + margin-left: 1rem; } + } } @media (max-width: 991px) { - .layout-topbar { - justify-content: space-between; + .layout-topbar { + justify-content: space-between; - .layout-topbar-logo { - width: auto; - order: 2; - } - - .layout-menu-button { - margin-left: 0; - order: 1; - } - - .layout-topbar-menu-button { - display: inline-flex; - margin-left: 0; - order: 3; - } - - .layout-topbar-menu { - margin-left: 0; - position: absolute; - flex-direction: column; - background-color: var(--surface-overlay); - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); - border-radius: 12px; - padding: 1rem; - right: 2rem; - top: 5rem; - min-width: 15rem; - display: none; - -webkit-animation: scalein 0.15s linear; - animation: scalein 0.15s linear; - - &.layout-topbar-menu-mobile-active { - display: block - } - - .layout-topbar-button { - margin-left: 0; - display: flex; - width: 100%; - height: auto; - justify-content: flex-start; - border-radius: 12px; - padding: 1rem; - - i { - font-size: 1rem; - margin-right: .5rem; - } - - span { - font-weight: medium; - display: block; - } - } - } + .layout-topbar-logo { + width: auto; + order: 2; } + + .layout-menu-button { + margin-left: 0; + order: 1; + } + + .layout-topbar-menu-button { + display: inline-flex; + margin-left: 0; + order: 3; + } + + .layout-topbar-menu { + margin-left: 0; + position: absolute; + flex-direction: column; + background-color: var(--surface-overlay); + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), + 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08); + border-radius: 12px; + padding: 1rem; + right: 2rem; + top: 5rem; + min-width: 15rem; + display: none; + -webkit-animation: scalein 0.15s linear; + animation: scalein 0.15s linear; + + &.layout-topbar-menu-mobile-active { + display: block; + } + + .layout-topbar-button { + margin-left: 0; + display: flex; + width: 100%; + height: auto; + justify-content: flex-start; + border-radius: 12px; + padding: 1rem; + + i { + font-size: 1rem; + margin-right: 0.5rem; + } + + span { + font-weight: medium; + display: block; + } + } + } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_typography.scss b/web-ui/web-react/src/assets/layout/sass/_typography.scss index 5cd89d25..3cb2d648 100644 --- a/web-ui/web-react/src/assets/layout/sass/_typography.scss +++ b/web-ui/web-react/src/assets/layout/sass/_typography.scss @@ -1,63 +1,68 @@ -h1, h2, h3, h4, h5, h6 { - margin: 1.5rem 0 1rem 0; - font-family: inherit; - font-weight: 500; - line-height: 1.2; - color: inherit; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1.5rem 0 1rem 0; + font-family: inherit; + font-weight: 500; + line-height: 1.2; + color: inherit; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } h1 { - font-size: 2.5rem; + font-size: 2.5rem; } h2 { - font-size: 2rem; + font-size: 2rem; } h3 { - font-size: 1.75rem; + font-size: 1.75rem; } h4 { - font-size: 1.5rem; + font-size: 1.5rem; } h5 { - font-size: 1.25rem; + font-size: 1.25rem; } h6 { - font-size: 1rem; + font-size: 1rem; } mark { - background: #FFF8E1; - padding: .25rem .4rem; - border-radius: $borderRadius; - font-family: monospace; + background: #fff8e1; + padding: 0.25rem 0.4rem; + border-radius: $borderRadius; + font-family: monospace; } blockquote { - margin: 1rem 0; - padding: 0 2rem; - border-left: 4px solid #90A4AE; + margin: 1rem 0; + padding: 0 2rem; + border-left: 4px solid #90a4ae; } hr { - border-top: solid var(--surface-border); - border-width: 1px 0 0 0; - margin: 1rem 0; + border-top: solid var(--surface-border); + border-width: 1px 0 0 0; + margin: 1rem 0; } p { - margin: 0 0 1rem 0; - line-height: 1.5; + margin: 0 0 1rem 0; + line-height: 1.5; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_utils.scss b/web-ui/web-react/src/assets/layout/sass/_utils.scss index 93bdb6c9..49ce2848 100644 --- a/web-ui/web-react/src/assets/layout/sass/_utils.scss +++ b/web-ui/web-react/src/assets/layout/sass/_utils.scss @@ -1,11 +1,12 @@ .card { - background-color: var(--surface-card); - padding: 1.5rem; - margin-bottom: 1rem; - border-radius: $borderRadius; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) !important; + background-color: var(--surface-card); + padding: 1.5rem; + margin-bottom: 1rem; + border-radius: $borderRadius; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08) !important; - &.card-w-title { - padding-bottom: 2rem; - } + &.card-w-title { + padding-bottom: 2rem; + } } diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js index 06416d5d..c1ec59c4 100644 --- a/web-ui/web-react/src/components/AdministradoresComunidad.js +++ b/web-ui/web-react/src/components/AdministradoresComunidad.js @@ -6,7 +6,7 @@ import { Column } from 'primereact/column'; import { Toast } from 'primereact/toast'; import { Dialog } from 'primereact/dialog'; import { Toolbar } from 'primereact/toolbar'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons'; import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; import { faAt } from '@fortawesome/free-solid-svg-icons'; @@ -14,74 +14,84 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; import { faHomeAlt } from '@fortawesome/free-solid-svg-icons'; - const AdministradoresComunidad = () => { + const [listaAdmins, setListaAdmins] = useState([]); + const [listaAdminComunidad, setListaAdminComunidad] = useState([]); + const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); + const [selectedAdminsCommunities, setSelectedAdminsCommunities] = + useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = + useState(false); + const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = + useState(false); + const toast = useRef(null); + const dt = useRef(null); - const [listaAdmins, setListaAdmins] = useState([]); - const [listaAdminComunidad, setListaAdminComunidad] = useState([]); - const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); - const [selectedAdminsCommunities, setSelectedAdminsCommunities] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = useState(false); - const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = useState(false); - const toast = useRef(null); - const dt = useRef(null); + let emptyAdminCommunity = { + _id: null, + dni: '', + name: '', + last_name: '', + email: '', + phone: '', + password: '', + community_id: '', + community_name: '', + user_type: '2', + status: '', + }; - let emptyAdminCommunity = { - _id: null, - dni: '', - name: '', - last_name: '', - email: '', - phone: '', - password: '', - community_id: '', - community_name: '', - user_type: '2', - status: '' - }; + async function listaAdmin() { + let nombres = await fetch( + 'http://localhost:4000/user/findAdminComunidad/', + { method: 'GET' }, + ) + .then((response) => response.json()) + .then((data) => { + return Promise.all( + data.message.map((item) => { + //item.full_name returns the repositorie name + return fetch( + `http://localhost:4000/community/findCommunityName/${item.community_id}`, + { method: 'GET' }, + ) + .then((response2) => response2.json()) + .then((data) => { + console.log(data.message.name); + item.community_name = data.message.name; + return item; + }); + }), + ); + }) + .then((data) => setListaAdmins(data)); + } - async function listaAdmin() { - let nombres = await fetch('http://localhost:4000/user/findAdminComunidad/', { method: 'GET' }) - .then((response) => response.json()) - .then((data) => { - return Promise.all(data.message.map(item => { - //item.full_name returns the repositorie name - return fetch(`http://localhost:4000/community/findCommunityName/${item.community_id}`, { method: 'GET' }) - .then((response2) => response2.json()) - .then(data => { - console.log(data.message.name); - item.community_name = data.message.name - return item - }) - })); - }).then(data => setListaAdmins(data) - ); + async function nombreComunidad(id) { + let nombres = await fetch( + 'http://localhost:4000/community/findCommunityName/' + id, + { method: 'GET' }, + ); + let nombresRes = await nombres.json(); + return await nombresRes.message['name']; + } - } + async function setNameCommunities() { + Promise.all( + listaAdmins.map(async function (administrador) { + // await listaComunidades(administrador.community_id); + administrador.community_id = await listaAdminComunidad.name; + }), + ); + } - async function nombreComunidad(id) { - let nombres = await fetch('http://localhost:4000/community/findCommunityName/' + id, { method: 'GET' }); - let nombresRes = await nombres.json(); - return await nombresRes.message['name']; - } + useEffect(() => { + listaAdmin(); + }, []); - - async function setNameCommunities() { - Promise.all(listaAdmins.map(async function (administrador) { - // await listaComunidades(administrador.community_id); - administrador.community_id = await listaAdminComunidad.name; - })) - } - - useEffect(() => { - listaAdmin(); - - }, []) - - - const deleteAdminCommunity = () => { - /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { + const deleteAdminCommunity = () => { + /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { cache: 'no-cache', method: 'DELETE', headers: { @@ -113,16 +123,24 @@ const AdministradoresComunidad = () => { } ); */ - let _administrators = listaAdmins.filter(val => val._id !== adminCommunity._id); - setListaAdmins(_administrators); - setDeleteAdminCommunityDialog(false); - setAdminCommunity(emptyAdminCommunity); - toast.current.show({ severity: 'success', summary: 'Administrador de Comunidad Eliminada', life: 3000 }); - } + let _administrators = listaAdmins.filter( + (val) => val._id !== adminCommunity._id, + ); + setListaAdmins(_administrators); + setDeleteAdminCommunityDialog(false); + setAdminCommunity(emptyAdminCommunity); + toast.current.show({ + severity: 'success', + summary: 'Administrador de Comunidad Eliminada', + life: 3000, + }); + }; - const deleteSelectedAdminsCommunity = () => { - let _admins = listaAdmins.filter(val => !selectedAdminsCommunities.includes(val)); - /* selectedCommunities.map((item) => { + const deleteSelectedAdminsCommunity = () => { + let _admins = listaAdmins.filter( + (val) => !selectedAdminsCommunities.includes(val), + ); + /* selectedCommunities.map((item) => { fetch('http://localhost:4000/user/deleteCommunity/' + item._id, { cache: 'no-cache', method: 'DELETE', @@ -131,285 +149,515 @@ const AdministradoresComunidad = () => { } }) })*/ - setListaAdmins(_admins); - setDeleteAdminsCommunitiesDialog(false); - setSelectedAdminsCommunities(null); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores de Comunidad de Viviendas Eliminado', life: 3000 }); - } + setListaAdmins(_admins); + setDeleteAdminsCommunitiesDialog(false); + setSelectedAdminsCommunities(null); + toast.current.show({ + severity: 'success', + summary: 'Éxito', + detail: 'Administradores de Comunidad de Viviendas Eliminado', + life: 3000, + }); + }; + const hideDeleteAdminCommunityDialog = () => { + setDeleteAdminCommunityDialog(false); + }; + const hideDeleteAdminsCommunitysDialog = () => { + setDeleteAdminsCommunitiesDialog(false); + }; - const hideDeleteAdminCommunityDialog = () => { - setDeleteAdminCommunityDialog(false); - } - - const hideDeleteAdminsCommunitysDialog = () => { - setDeleteAdminsCommunitiesDialog(false); - } - - const confirmDeleteAdminCommunity = (adminCommunity) => { - setAdminCommunity(adminCommunity); - setDeleteAdminCommunityDialog(true); - } - - const confirmDeleteSelected = () => { - setDeleteAdminsCommunitiesDialog(true); - } - - const actionsAdminCommunity = (rowData) => { - return ( -
    -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - - - - +
    +
    + ); + }; + + const leftToolbarTemplate = () => { + return ( + +
    +
    - ) -} +     + ); + }; + + const rightToolbarTemplate = () => { + return ( + + + + + + + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(AdministradoresSistema, comparisonFn); diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js index 4dd54733..7fc4e7ad 100644 --- a/web-ui/web-react/src/components/ComunidadViviendas.js +++ b/web-ui/web-react/src/components/ComunidadViviendas.js @@ -8,255 +8,255 @@ import { Toast } from 'primereact/toast'; import classNames from 'classnames'; import { Dialog } from 'primereact/dialog'; import { Toolbar } from 'primereact/toolbar'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHome } from '@fortawesome/free-solid-svg-icons'; import { faMapLocationDot } from '@fortawesome/free-solid-svg-icons'; import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; const Communities = () => { + let emptyCommunity = { + _id: null, + name: '', + province: provinciaId, + canton: cantonId, + district: districtId, + phone: '', + num_houses: 0, + status: 'activo', + date_entry: new Date(), + houses: [], + }; - let emptyCommunity = { - _id: null, - name: '', - province: provinciaId, - canton: cantonId, - district: districtId, - phone: '', - num_houses: 0, - status: 'activo', - date_entry: new Date(), - houses: [], - }; + const [communitiesList, setCommunitiesList] = useState([]); + const [community, setCommunity] = useState(emptyCommunity); + const [housesList, setHousesList] = useState([]); + const [provincesList, setProvincesList] = useState([]); + const [provinciaId, setProvinciaId] = useState(null); + const [cantonsList, setCantonsList] = useState([]); + const [cantonId, setCantonId] = useState(null); + const [districtsList, setDistrictsList] = useState([]); + const [districtId, setDistrictId] = useState(null); + const [codeHouses, setCodeHouses] = useState(''); + const [submitted, setSubmitted] = useState(false); + const [selectedCommunities, setSelectedCommunities] = useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false); + const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false); + const toast = useRef(null); + const dt = useRef(null); - const [communitiesList, setCommunitiesList] = useState([]); - const [community, setCommunity] = useState(emptyCommunity); + const p = provincesList.map((item) => ({ + label: item.name, + value: item.code, + })); - const [housesList, setHousesList] = useState([]); - const [provincesList, setProvincesList] = useState([]); - const [provinciaId, setProvinciaId] = useState(null); - const [cantonsList, setCantonsList] = useState([]); - const [cantonId, setCantonId] = useState(null); - const [districtsList, setDistrictsList] = useState([]); - const [districtId, setDistrictId] = useState(null); - const [codeHouses, setCodeHouses] = useState(''); - const [submitted, setSubmitted] = useState(false); - const [selectedCommunities, setSelectedCommunities] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false); - const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false); - const toast = useRef(null); - const dt = useRef(null); + const c = cantonsList.map((item) => ({ + label: item.name, + value: item.code, + parent: item.parentCode, + })); + const d = districtsList.map((item) => ({ + label: item.name, + value: item.code, + parent: item.parentCode, + })); + useEffect(() => { + fillProvinces(); + }, []); - const p = provincesList.map((item) => ({ - label: item.name, - value: item.code - })) + useEffect(() => { + fillCantons(); + }, [provinciaId]); + useEffect(() => { + fillDistricts(); + }, [cantonId]); - const c = cantonsList.map((item) => ({ - label: item.name, - value: item.code, - parent: item.parentCode - })) + async function getProvinces() { + const response = await fetch('assets/demo/data/provincias.json', { + method: 'GET', + }); + return await response.json(); + } - const d = districtsList.map((item) => ({ - label: item.name, - value: item.code, - parent: item.parentCode - })) + async function fillProvinces() { + const getP = await getProvinces(); + setProvincesList(await getP); + } + async function getCantons() { + const response = await fetch('assets/demo/data/cantones.json', { + method: 'GET', + }); + return await response.json(); + } + async function fillCantons() { + const resJson = await getCantons(); + const cantones = await resJson.filter(function (i, n) { + return i.parentCode === provinciaId; + }); + setCantonsList(await cantones); + } - useEffect(() => { - fillProvinces(); + async function getDistricts() { + const response = await fetch('assets/demo/data/distritos.json', { + method: 'GET', + }); + return await response.json(); + } - }, []) + async function fillDistricts() { + const resJson = await getDistricts(); + const districts = await resJson.filter(function (i, n) { + return i.parentCode === cantonId; + }); + setDistrictsList(await districts); + } - useEffect(() => { - fillCantons(); - }, [provinciaId]) + const handleProvinces = (event) => { + const getprovinciaId = event.target.value; + setProvinciaId(getprovinciaId); + }; - useEffect(() => { - fillDistricts(); - }, [cantonId]) + const handleCanton = (event) => { + const getCantonId = event.target.value; + setCantonId(getCantonId); + }; - async function getProvinces() { - const response = await fetch('assets/demo/data/provincias.json', { method: 'GET' }); - return await response.json(); - } + const handleDistrict = (event) => { + const getDistrictId = event.target.value; + setDistrictId(getDistrictId); + }; - async function fillProvinces() { - const getP = await getProvinces(); - setProvincesList(await getP); - } + const handleCodeHouses = (event) => { + const getcodehouse = event.target.value; + setCodeHouses(getcodehouse); + }; - async function getCantons() { - const response = await fetch('assets/demo/data/cantones.json', { method: 'GET' }); - return await response.json(); - } + async function getCommunites() { + let response = await fetch( + 'http://localhost:4000/community/allCommunities', + { method: 'GET' }, + ); + let resJson = await response.json(); + let pList = await getProvinces(); + let cList = await getCantons(); + let dList = await getDistricts(); + await resJson.message.map((item) => { + item.province = pList.find((p) => p.code === item.province).name; + item.canton = cList.find((p) => p.code === item.canton).name; + item.district = dList.find((p) => p.code === item.district).name; + if (!item.id_admin) { + item.name_admin = 'Sin Administrador'; + } + }); + setCommunitiesList(await resJson.message); + } - async function fillCantons() { - const resJson = await getCantons(); - const cantones = await resJson.filter(function (i, n) { - return i.parentCode === provinciaId; + useEffect(() => { + getCommunites(); + }, []); + + const saveCommunity = () => { + if ( + community.name && + community.num_houses > 0 && + provinciaId && + cantonId && + districtId && + community.phone + ) { + let _communities = [...communitiesList]; + let _community = { ...community }; + _community.province = provinciaId; + _community.canton = cantonId; + _community.district = districtId; + + for (let i = 0; i < _community.num_houses; i++) { + _community.houses.push({ + number_house: codeHouses + (i + 1), }); - setCantonsList(await cantones); - } - - async function getDistricts() { - const response = await fetch('assets/demo/data/distritos.json', { method: 'GET' }); - return await response.json(); - } - - async function fillDistricts() { - const resJson = await getDistricts(); - const districts = await resJson.filter(function (i, n) { - return i.parentCode === cantonId; - }); - setDistrictsList(await districts); - } - - const handleProvinces = (event) => { - const getprovinciaId = event.target.value; - setProvinciaId(getprovinciaId); - } - - const handleCanton = (event) => { - const getCantonId = event.target.value; - setCantonId(getCantonId); - } - - const handleDistrict = (event) => { - const getDistrictId = event.target.value; - setDistrictId(getDistrictId); - } - - - const handleCodeHouses = (event) => { - const getcodehouse = event.target.value; - setCodeHouses(getcodehouse); - } - - async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); - let resJson = await response.json(); - let pList = await getProvinces(); - let cList = await getCantons(); - let dList = await getDistricts(); - await resJson.message.map((item) => { - item.province = pList.find(p => p.code === item.province).name - item.canton = cList.find(p => p.code === item.canton).name - item.district = dList.find(p => p.code === item.district).name - if (!item.id_admin) { - item.name_admin = "Sin Administrador" - } + } + // console.log(houses) + fetch('http://localhost:4000/community/createCommunity', { + cache: 'no-cache', + method: 'POST', + body: JSON.stringify(_community), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else return response.json(); }) - setCommunitiesList(await resJson.message); + .then(() => { + _community.province = provincesList.find( + (p) => p.code === _community.province, + ).name; + _community.canton = cantonsList.find( + (p) => p.code === _community.canton, + ).name; + _community.district = districtsList.find( + (p) => p.code === _community.district, + ).name; + + _communities.push(_community); + toast.current.show({ + severity: 'success', + summary: 'Registro exitoso', + detail: 'Comunidad de vivienda Creada', + life: 3000, + }); + + setCommunitiesList(_communities); + + setProvinciaId(''); + setCantonId(''); + setDistrictId(''); + setCodeHouses(''); + + setCommunity(emptyCommunity); + }) + .catch((err) => console.log('Ocurrió un error con el fetch', err)); + } else { + setSubmitted(true); } + }; - useEffect(() => { - getCommunites(); - }, []) + const onInputChange = (e, name) => { + const val = (e.target && e.target.value) || ''; + let _community = { ...community }; + _community[`${name}`] = val; + setCommunity(_community); + }; - const saveCommunity = () => { + const hideDeleteCommunityDialog = () => { + setDeleteCommunityDialog(false); + }; - if (community.name && community.num_houses > 0 && provinciaId && cantonId && districtId && community.phone) { - let _communities = [...communitiesList]; - let _community = { ...community }; - _community.province = provinciaId; - _community.canton = cantonId; - _community.district = districtId; + const hideDeleteCommunitiesDialog = () => { + setDeleteCommunitiesDialog(false); + }; + const confirmDeleteCommunity = (community) => { + setCommunity(community); + setDeleteCommunityDialog(true); + }; + const confirmDeleteSelected = () => { + setDeleteCommunitiesDialog(true); + }; - for (let i = 0; i < _community.num_houses; i++) { - _community.houses.push({ - number_house: codeHouses + (i + 1), - }) - } - // console.log(houses) - fetch('http://localhost:4000/community/createCommunity', { - cache: 'no-cache', - method: 'POST', - body: JSON.stringify(_community), - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then(() => { - - _community.province = provincesList.find(p => p.code === _community.province).name - _community.canton = cantonsList.find(p => p.code === _community.canton).name - _community.district = districtsList.find(p => p.code === _community.district).name - - _communities.push(_community); - toast.current.show({ severity: 'success', summary: 'Registro exitoso', detail: 'Comunidad de vivienda Creada', life: 3000 }); - - setCommunitiesList(_communities); - - - setProvinciaId(''); - setCantonId(''); - setDistrictId(''); - setCodeHouses(''); - - setCommunity(emptyCommunity); - - }) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); - - - } else { - setSubmitted(true); - - } - - } - - const onInputChange = (e, name) => { - const val = (e.target && e.target.value) || ''; - let _community = { ...community }; - _community[`${name}`] = val; - - setCommunity(_community); - } - - - const hideDeleteCommunityDialog = () => { - setDeleteCommunityDialog(false); - } - - const hideDeleteCommunitiesDialog = () => { - setDeleteCommunitiesDialog(false); - } - - const confirmDeleteCommunity = (community) => { - setCommunity(community); - setDeleteCommunityDialog(true); - } - - const confirmDeleteSelected = () => { - setDeleteCommunitiesDialog(true); - } - - const deleteCommunity = () => { - - /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { + const deleteCommunity = () => { + /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { cache: 'no-cache', method: 'DELETE', headers: { @@ -288,16 +288,23 @@ const Communities = () => { } ); */ - let _community = communitiesList.filter(val => val._id !== community._id); - setCommunitiesList(_community); - setDeleteCommunityDialog(false); - setCommunity(emptyCommunity); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidad de Viviendas Eliminada', life: 3000 }); - } + let _community = communitiesList.filter((val) => val._id !== community._id); + setCommunitiesList(_community); + setDeleteCommunityDialog(false); + setCommunity(emptyCommunity); + toast.current.show({ + severity: 'success', + summary: 'Éxito', + detail: 'Comunidad de Viviendas Eliminada', + life: 3000, + }); + }; - const deleteSelectedCommunities = () => { - let _communities = communitiesList.filter(val => !selectedCommunities.includes(val)); - /* selectedCommunities.map((item) => { + const deleteSelectedCommunities = () => { + let _communities = communitiesList.filter( + (val) => !selectedCommunities.includes(val), + ); + /* selectedCommunities.map((item) => { fetch('http://localhost:4000/user/deleteCommunity/' + item._id, { cache: 'no-cache', method: 'DELETE', @@ -306,246 +313,492 @@ const Communities = () => { } }) })*/ - setCommunitiesList(_communities); - setDeleteCommunitiesDialog(false); - setSelectedCommunities(null); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidades de Viviendas Eliminadas', life: 3000 }); - } - - const actionsCommunity = (rowData) => { - return ( -
    -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - - - - - + + +
    + + {selectedCommunities && ( + + ¿Está seguro eliminar los adminsitradores del sistema + seleccionados? + + )}
    - +     + + +
    +
    +
    Registro de comunidad de viviendas
    +
    +
    + +
    +
    + + + + onInputChange(e, 'name')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.name === '', + })} + /> +
    + {submitted && community.name === '' && ( + Nombre es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !provinciaId && ( + Provincia es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !cantonId && ( + Cantón es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !districtId && ( + Distrito es requirido. + )} +
    +
    +
    + +
    +
    + + + + onInputChange(e, 'phone')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.phone === '', + })} + /> +
    + {submitted && community.phone === '' && ( + + Número de teléfono es requirido. + + )} +
    +
    +
    + +
    +
    + + + + onInputChange(e, 'num_houses')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.num_houses < 1, + })} + /> +
    + {submitted && community.num_houses < 1 && ( + + Número de viviendas es requirido y debe ser mayor que 0. + + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && codeHouses === '' && ( + + El código para las viviendas es requirido. + + )} +
    +
    +
    + +
    +
    +
    +
    + + ); +}; - - ) -} - -export default React.memo(Communities); \ No newline at end of file +export default React.memo(Communities); diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js index bc4ec2f8..836d8647 100644 --- a/web-ui/web-react/src/components/GuardasSeguridad.js +++ b/web-ui/web-react/src/components/GuardasSeguridad.js @@ -5,117 +5,136 @@ import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; const GuardasSeguridad = () => { - - const [pokemones,setPokemones]=useState([]); - const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134'); - async function fetchP(){ - let nombres=await fetch(urlFetch, {method:'GET'}); - let pokemonesRes= await nombres.json(); + const [pokemones, setPokemones] = useState([]); + const [urlFetch, setUrlFetch] = useState( + 'http://localhost:4000/user/findGuards/62be68215692582bbfd77134', + ); + async function fetchP() { + let nombres = await fetch(urlFetch, { method: 'GET' }); + let pokemonesRes = await nombres.json(); setPokemones(pokemonesRes.message); console.log(pokemones); - } - useEffect(()=>{ - fetchP(); - },[]) + } + useEffect(() => { + fetchP(); + }, []); - function registrarGuarda() { - var data = { - dni: document.getElementById('identificacion').value, - name: document.getElementById('nombre').value, - last_name: document.getElementById('apellidos').value, - email: document.getElementById('correo_electronico').value, - phone: document.getElementById('telefono').value, - password: document.getElementById('correo_electronico').value, - user_type: "4", //4 es guarda - status: "1", - community_id:"62be68215692582bbfd77134" - }; - var data2={ - dni: "98765", - name: "Danielito", - last_name: "Rodriguez", - email: "danirodriguez@gmail.com", - phone: 84664515, - password: "1203", - user_type: "2", - status: "4", - community_id:"62be68215692582bbfd77134" - } - console.log(data2); + function registrarGuarda() { + var data = { + dni: document.getElementById('identificacion').value, + name: document.getElementById('nombre').value, + last_name: document.getElementById('apellidos').value, + email: document.getElementById('correo_electronico').value, + phone: document.getElementById('telefono').value, + password: document.getElementById('correo_electronico').value, + user_type: '4', //4 es guarda + status: '1', + community_id: '62be68215692582bbfd77134', + }; + var data2 = { + dni: '98765', + name: 'Danielito', + last_name: 'Rodriguez', + email: 'danirodriguez@gmail.com', + phone: 84664515, + password: '1203', + user_type: '2', + status: '4', + community_id: '62be68215692582bbfd77134', + }; + console.log(data2); - fetch('http://localhost:4000/user/createGuard', { - cache: 'no-cache', - method: 'POST', - mode:'cors', - body: JSON.stringify(data2), - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then( - function (response) { - fetchP(); - } - ) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); - } + fetch('http://localhost:4000/user/createGuard', { + cache: 'no-cache', + method: 'POST', + mode: 'cors', + body: JSON.stringify(data2), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else return response.json(); + }) + .then(function (response) { + fetchP(); + }) + .catch((err) => console.log('Ocurrió un error con el fetch', err)); + } - return ( -
    -
    -
    -
    Guardas de seguridad
    - - - - - - - -
    -
    -
    -
    -
    Registro de un guarda de seguridad
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    -
    -
    + return ( +
    +
    +
    +
    Guardas de seguridad
    + + + + + + +
    +
    +
    +
    +
    Registro de un guarda de seguridad
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    + ); +}; - - ) -} - -export default React.memo(GuardasSeguridad); \ No newline at end of file +export default React.memo(GuardasSeguridad); diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js index 608a0a6b..280cf83a 100644 --- a/web-ui/web-react/src/components/Inquilinos.js +++ b/web-ui/web-react/src/components/Inquilinos.js @@ -1,27 +1,30 @@ import { Button } from 'primereact/button'; import { Dropdown } from 'primereact/dropdown'; -import { InputText } from 'primereact/inputtext' -import React, { useEffect, useState } from 'react' +import { InputText } from 'primereact/inputtext'; +import React, { useEffect, useState } from 'react'; const Inquilinos = () => { const [communitiesList, setCommunitiesList] = useState([]); - const communityIdList = communitiesList.map(community => community.id); + const communityIdList = communitiesList.map((community) => community.id); async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); + let response = await fetch( + 'http://localhost:4000/community/allCommunities', + { method: 'GET' }, + ); let list = await response.json(); setCommunitiesList(list.message); } useEffect(() => { getCommunites(); - }, []) + }, []); function registrarInquilino() { let data = { email: document.getElementById('correo_electronico').value, community_id: document.getElementById('numero_vivienda').value, user_type: '3', status: '1', - } + }; fetch('http://localhost:3000/api/createUser', { method: 'POST', @@ -32,11 +35,11 @@ const Inquilinos = () => { }, }).then((response) => { if (response.ok) { - alert('Inquilino registrado correctamente') + alert('Inquilino registrado correctamente'); } else { - alert('Error al registrar inquilino') + alert('Error al registrar inquilino'); } - }) + }); } return ( @@ -47,18 +50,26 @@ const Inquilinos = () => {
    - +
    - +
    -
    - ) -} + ); +}; -export default React.memo(Inquilinos); \ No newline at end of file +export default React.memo(Inquilinos); diff --git a/web-ui/web-react/src/components/LogIn.js b/web-ui/web-react/src/components/LogIn.js index 10c58bd6..22808d70 100644 --- a/web-ui/web-react/src/components/LogIn.js +++ b/web-ui/web-react/src/components/LogIn.js @@ -2,32 +2,29 @@ import React from 'react'; import { InputText } from 'primereact/inputtext'; const LogIn = () => { - - return ( -
    -
    -
    -
    Iniciar Sesión
    -
    -
    - - -
    -
    - - -
    - - {/* */} -
    -
    + return ( +
    +
    +
    +
    Iniciar Sesión
    +
    +
    + + +
    +
    + +
    -
    - ) -} -export default LogIn + {/* */} +
    +
    +
    +
    + ); +}; + +export default LogIn; /* image 1 */ - - diff --git a/web-ui/web-react/src/index.js b/web-ui/web-react/src/index.js index fb5e7a3f..9a5f6b56 100644 --- a/web-ui/web-react/src/index.js +++ b/web-ui/web-react/src/index.js @@ -3,19 +3,19 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; //import * as serviceWorker from './serviceWorker'; -import { HashRouter } from 'react-router-dom' +import { HashRouter } from 'react-router-dom'; import ScrollToTop from './ScrollToTop'; ReactDOM.render( - - - - - , - document.getElementById('root') + + + + + , + document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA -//serviceWorker.unregister(); \ No newline at end of file +//serviceWorker.unregister(); diff --git a/web-ui/web-react/src/pages/Crud.js b/web-ui/web-react/src/pages/Crud.js index cfe3081f..58e9780b 100644 --- a/web-ui/web-react/src/pages/Crud.js +++ b/web-ui/web-react/src/pages/Crud.js @@ -15,370 +15,623 @@ import { InputText } from 'primereact/inputtext'; import { ProductService } from '../service/ProductService'; const Crud = () => { - let emptyProduct = { - id: null, - name: '', - image: null, - description: '', - category: null, - price: 0, - quantity: 0, - rating: 0, - inventoryStatus: 'INSTOCK' - }; + let emptyProduct = { + id: null, + name: '', + image: null, + description: '', + category: null, + price: 0, + quantity: 0, + rating: 0, + inventoryStatus: 'INSTOCK', + }; - const [products, setProducts] = useState(null); - const [productDialog, setProductDialog] = useState(false); - const [deleteProductDialog, setDeleteProductDialog] = useState(false); - const [deleteProductsDialog, setDeleteProductsDialog] = useState(false); - const [product, setProduct] = useState(emptyProduct); - const [selectedProducts, setSelectedProducts] = useState(null); - const [submitted, setSubmitted] = useState(false); - const [globalFilter, setGlobalFilter] = useState(null); - const toast = useRef(null); - const dt = useRef(null); + const [products, setProducts] = useState(null); + const [productDialog, setProductDialog] = useState(false); + const [deleteProductDialog, setDeleteProductDialog] = useState(false); + const [deleteProductsDialog, setDeleteProductsDialog] = useState(false); + const [product, setProduct] = useState(emptyProduct); + const [selectedProducts, setSelectedProducts] = useState(null); + const [submitted, setSubmitted] = useState(false); + const [globalFilter, setGlobalFilter] = useState(null); + const toast = useRef(null); + const dt = useRef(null); - useEffect(() => { - const productService = new ProductService(); - productService.getProducts().then(data => setProducts(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProducts().then((data) => setProducts(data)); + }, []); - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; + + const openNew = () => { + setProduct(emptyProduct); + setSubmitted(false); + setProductDialog(true); + }; + + const hideDialog = () => { + setSubmitted(false); + setProductDialog(false); + }; + + const hideDeleteProductDialog = () => { + setDeleteProductDialog(false); + }; + + const hideDeleteProductsDialog = () => { + setDeleteProductsDialog(false); + }; + + const saveProduct = () => { + setSubmitted(true); + + if (product.name.trim()) { + let _products = [...products]; + let _product = { ...product }; + if (product.id) { + const index = findIndexById(product.id); + + _products[index] = _product; + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Updated', + life: 3000, + }); + } else { + _product.id = createId(); + _product.image = 'product-placeholder.svg'; + _products.push(_product); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Created', + life: 3000, + }); + } + + setProducts(_products); + setProductDialog(false); + setProduct(emptyProduct); + } + }; + + const editProduct = (product) => { + setProduct({ ...product }); + setProductDialog(true); + }; + + const confirmDeleteProduct = (product) => { + setProduct(product); + setDeleteProductDialog(true); + }; + + const deleteProduct = () => { + let _products = products.filter((val) => val.id !== product.id); + setProducts(_products); + setDeleteProductDialog(false); + setProduct(emptyProduct); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Deleted', + life: 3000, + }); + }; + + const findIndexById = (id) => { + let index = -1; + for (let i = 0; i < products.length; i++) { + if (products[i].id === id) { + index = i; + break; + } } - const openNew = () => { - setProduct(emptyProduct); - setSubmitted(false); - setProductDialog(true); + return index; + }; + + const createId = () => { + let id = ''; + let chars = + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < 5; i++) { + id += chars.charAt(Math.floor(Math.random() * chars.length)); } + return id; + }; - const hideDialog = () => { - setSubmitted(false); - setProductDialog(false); - } + const exportCSV = () => { + dt.current.exportCSV(); + }; - const hideDeleteProductDialog = () => { - setDeleteProductDialog(false); - } + const confirmDeleteSelected = () => { + setDeleteProductsDialog(true); + }; - const hideDeleteProductsDialog = () => { - setDeleteProductsDialog(false); - } + const deleteSelectedProducts = () => { + let _products = products.filter((val) => !selectedProducts.includes(val)); + setProducts(_products); + setDeleteProductsDialog(false); + setSelectedProducts(null); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Products Deleted', + life: 3000, + }); + }; - const saveProduct = () => { - setSubmitted(true); + const onCategoryChange = (e) => { + let _product = { ...product }; + _product['category'] = e.value; + setProduct(_product); + }; - if (product.name.trim()) { - let _products = [...products]; - let _product = { ...product }; - if (product.id) { - const index = findIndexById(product.id); + const onInputChange = (e, name) => { + const val = (e.target && e.target.value) || ''; + let _product = { ...product }; + _product[`${name}`] = val; - _products[index] = _product; - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 }); - } - else { - _product.id = createId(); - _product.image = 'product-placeholder.svg'; - _products.push(_product); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 }); - } + setProduct(_product); + }; - setProducts(_products); - setProductDialog(false); - setProduct(emptyProduct); - } - } + const onInputNumberChange = (e, name) => { + const val = e.value || 0; + let _product = { ...product }; + _product[`${name}`] = val; - const editProduct = (product) => { - setProduct({ ...product }); - setProductDialog(true); - } - - const confirmDeleteProduct = (product) => { - setProduct(product); - setDeleteProductDialog(true); - } - - const deleteProduct = () => { - let _products = products.filter(val => val.id !== product.id); - setProducts(_products); - setDeleteProductDialog(false); - setProduct(emptyProduct); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 }); - } - - const findIndexById = (id) => { - let index = -1; - for (let i = 0; i < products.length; i++) { - if (products[i].id === id) { - index = i; - break; - } - } - - return index; - } - - const createId = () => { - let id = ''; - let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (let i = 0; i < 5; i++) { - id += chars.charAt(Math.floor(Math.random() * chars.length)); - } - return id; - } - - const exportCSV = () => { - dt.current.exportCSV(); - } - - const confirmDeleteSelected = () => { - setDeleteProductsDialog(true); - } - - const deleteSelectedProducts = () => { - let _products = products.filter(val => !selectedProducts.includes(val)); - setProducts(_products); - setDeleteProductsDialog(false); - setSelectedProducts(null); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); - } - - const onCategoryChange = (e) => { - let _product = { ...product }; - _product['category'] = e.value; - setProduct(_product); - } - - const onInputChange = (e, name) => { - const val = (e.target && e.target.value) || ''; - let _product = { ...product }; - _product[`${name}`] = val; - - setProduct(_product); - } - - const onInputNumberChange = (e, name) => { - const val = e.value || 0; - let _product = { ...product }; - _product[`${name}`] = val; - - setProduct(_product); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - -
    - ); - } - - const header = ( -
    -
    Manage Products
    - - - setGlobalFilter(e.target.value)} placeholder="Search..." /> - -
    - ); - - const productDialogFooter = ( - <> - + + ); + }; - const customizedContent = (item) => { - return ( - - { item.image && e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-2 mb-3" />} -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

    - -     - ); - }; + const customizedMarker = (item) => { + return ( + + + + ); + }; - const customizedMarker = (item) => { - return ( - - - - ); - }; + return ( +
    +
    +
    +

    Timeline

    - return
    -
    -
    -

    Timeline

    +
    Custom Timeline
    + -
    Custom Timeline
    - - -
    Horizontal - Alternate Align
    - item} opposite={ } /> -
    +
    Horizontal - Alternate Align
    + item} + opposite={ } + />
    +
    -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + ); }; -export default React.memo(TimelineDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(TimelineDemo, comparisonFn); diff --git a/web-ui/web-react/src/service/CountryService.js b/web-ui/web-react/src/service/CountryService.js index 43532da9..f8c58103 100644 --- a/web-ui/web-react/src/service/CountryService.js +++ b/web-ui/web-react/src/service/CountryService.js @@ -1,9 +1,9 @@ -import axios from 'axios' +import axios from 'axios'; export class CountryService { - - getCountries() { - return axios.get('assets/demo/data/countries.json') - .then(res => res.data.data); - } -} \ No newline at end of file + getCountries() { + return axios + .get('assets/demo/data/countries.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/service/CustomerService.js b/web-ui/web-react/src/service/CustomerService.js index 257ae3c6..4958a90c 100644 --- a/web-ui/web-react/src/service/CustomerService.js +++ b/web-ui/web-react/src/service/CustomerService.js @@ -1,14 +1,15 @@ -import axios from 'axios' +import axios from 'axios'; export class CustomerService { - getCustomersMedium() { - return axios.get('assets/demo/data/customers-medium.json') - .then(res => res.data.data); - } + getCustomersMedium() { + return axios + .get('assets/demo/data/customers-medium.json') + .then((res) => res.data.data); + } - getCustomersLarge() { - return axios.get('assets/demo/data/customers-large.json') - .then(res => res.data.data); - } - -} \ No newline at end of file + getCustomersLarge() { + return axios + .get('assets/demo/data/customers-large.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/service/EventService.js b/web-ui/web-react/src/service/EventService.js index cd486b3e..7cc65488 100644 --- a/web-ui/web-react/src/service/EventService.js +++ b/web-ui/web-react/src/service/EventService.js @@ -1,9 +1,9 @@ import axios from 'axios'; export class EventService { - - getEvents() { - return axios.get('assets/demo/data/events.json') - .then(res => res.data.data); - } + getEvents() { + return axios + .get('assets/demo/data/events.json') + .then((res) => res.data.data); + } } diff --git a/web-ui/web-react/src/service/NodeService.js b/web-ui/web-react/src/service/NodeService.js index 2d0f2828..a26bf091 100644 --- a/web-ui/web-react/src/service/NodeService.js +++ b/web-ui/web-react/src/service/NodeService.js @@ -1,13 +1,15 @@ import axios from 'axios'; export class NodeService { - getTreeNodes() { - return axios.get('assets/demo/data/treenodes.json') - .then(res => res.data.root); - } + getTreeNodes() { + return axios + .get('assets/demo/data/treenodes.json') + .then((res) => res.data.root); + } - getTreeTableNodes() { - return axios.get('assets/demo/data/treetablenodes.json') - .then(res => res.data.root); - } + getTreeTableNodes() { + return axios + .get('assets/demo/data/treetablenodes.json') + .then((res) => res.data.root); + } } diff --git a/web-ui/web-react/src/service/PhotoService.js b/web-ui/web-react/src/service/PhotoService.js index 30614faa..0e138506 100644 --- a/web-ui/web-react/src/service/PhotoService.js +++ b/web-ui/web-react/src/service/PhotoService.js @@ -1,8 +1,9 @@ import axios from 'axios'; export class PhotoService { - - getImages() { - return axios.get('assets/demo/data/photos.json').then(res => res.data.data); - } + getImages() { + return axios + .get('assets/demo/data/photos.json') + .then((res) => res.data.data); + } } diff --git a/web-ui/web-react/src/service/ProductService.js b/web-ui/web-react/src/service/ProductService.js index ce8a229e..da658536 100644 --- a/web-ui/web-react/src/service/ProductService.js +++ b/web-ui/web-react/src/service/ProductService.js @@ -1,16 +1,21 @@ import axios from 'axios'; export class ProductService { + getProductsSmall() { + return axios + .get('assets/demo/data/products-small.json') + .then((res) => res.data.data); + } - getProductsSmall() { - return axios.get('assets/demo/data/products-small.json').then(res => res.data.data); - } + getProducts() { + return axios + .get('assets/demo/data/products.json') + .then((res) => res.data.data); + } - getProducts() { - return axios.get('assets/demo/data/products.json').then(res => res.data.data); - } - - getProductsWithOrdersSmall() { - return axios.get('assets/demo/data/products-orders-small.json').then(res => res.data.data); - } -} \ No newline at end of file + getProductsWithOrdersSmall() { + return axios + .get('assets/demo/data/products-orders-small.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/serviceWorker.js b/web-ui/web-react/src/serviceWorker.js index 2283ff9c..f17645e5 100755 --- a/web-ui/web-react/src/serviceWorker.js +++ b/web-ui/web-react/src/serviceWorker.js @@ -16,8 +16,8 @@ const isLocalhost = Boolean( window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, + ), ); export function register(config) { @@ -43,7 +43,7 @@ export function register(config) { navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit http://bit.ly/CRA-PWA' + 'worker. To learn more, visit http://bit.ly/CRA-PWA', ); }); } else { @@ -57,7 +57,7 @@ export function register(config) { function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) - .then(registration => { + .then((registration) => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { @@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) { // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.', ); // Execute callback @@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) { }; }; }) - .catch(error => { + .catch((error) => { console.error('Error during service worker registration:', error); }); } @@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) { function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) - .then(response => { + .then((response) => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( @@ -109,7 +109,7 @@ function checkValidServiceWorker(swUrl, config) { (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister().then(() => { window.location.reload(); }); @@ -121,14 +121,14 @@ function checkValidServiceWorker(swUrl, config) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + 'No internet connection found. App is running in offline mode.', ); }); } export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister(); }); } diff --git a/web-ui/web-react/src/templates/BlocksDemo.js b/web-ui/web-react/src/templates/BlocksDemo.js index d62d0947..040f9e74 100644 --- a/web-ui/web-react/src/templates/BlocksDemo.js +++ b/web-ui/web-react/src/templates/BlocksDemo.js @@ -6,9 +6,9 @@ import { Checkbox } from 'primereact/checkbox'; import BlockViewer from '../BlockViewer'; const BlocksDemo = () => { - const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(false); - const block1 = ` + const block1 = `
    @@ -26,7 +26,7 @@ const BlocksDemo = () => {
    `; - const block2 = ` + const block2 = `
    One Product, @@ -80,7 +80,7 @@ const BlocksDemo = () => {
    `; - const block3 = ` + const block3 = `
    Pricing Plans
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    @@ -198,7 +198,7 @@ const BlocksDemo = () => {
    `; - const block4 = ` + const block4 = `
     POWERED BY DISCORD
    @@ -209,7 +209,7 @@ const BlocksDemo = () => {
    `; - const block5 = ` + const block5 = `
    🔥 Hot Deals!
    @@ -224,7 +224,7 @@ const BlocksDemo = () => {
    `; - const block6 = ` + const block6 = `
    • @@ -263,7 +263,7 @@ const BlocksDemo = () => {
    `; - const block7 = ` + const block7 = `
    @@ -330,7 +330,7 @@ const BlocksDemo = () => {
    `; - const block8 = ` + const block8 = `
    hyper @@ -359,7 +359,7 @@ const BlocksDemo = () => {
    `; - const block9 = ` + const block9 = `
    Movie Information
    Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
    @@ -409,7 +409,7 @@ const BlocksDemo = () => {
    `; - const block10 = ` + const block10 = `
    Card Title
    Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
    @@ -417,422 +417,639 @@ const BlocksDemo = () => {
    `; - return ( - <> - -
    -
    -
    - Create the screens your -
    your visitors deserve to see
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + return ( + <> + +
    +
    +
    + + Create the screens your + +
    + your visitors deserve to see +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    - - -
    -
    -
    - hero-1 -
    + + +
    +
    +
    + hero-1 +
    +
    +     + + +
    +
    + One Product, + Many Solutions +
    +
    + Ac turpis egestas maecenas pharetra convallis posuere morbi leo + urna. +
    +
    +
    + + + +
    + Built for Developers +
    + + Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + +
    +
    + + + +
    + End-to-End Encryption +
    + + Risus nec feugiat in fermentum posuere urna nec. Posuere + sollicitudin aliquam ultrices sagittis. + +
    +
    + + + +
    Easy to Use
    + + Ornare suspendisse sed nisi lacus sed viverra tellus. Neque + volutpat ac tincidunt vitae semper. + +
    +
    + + + +
    + Fast & Global Support +
    + + Fermentum et sollicitudin ac orci phasellus egestas tellus + rutrum tellus. + +
    +
    + + + +
    Open Source
    + + Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec + adipiscing tristique risus nec feugiat.{' '} + +
    +
    + + + +
    Trusted Securitty
    + + Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus + metus aliquam eleifend. + +
    +
    +
    +     + + +
    +
    + Pricing Plans +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit + numquam eligendi quos. +
    + +
    +
    +
    +
    +
    Basic
    +
    Plan description
    +
    +
    + $9 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    +
    +
    - +
    +
    - -
    -
    - One Product, - Many Solutions -
    -
    Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
    -
    -
    - - - -
    Built for Developers
    - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
    -
    - - - -
    End-to-End Encryption
    - Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis. -
    -
    - - - -
    Easy to Use
    - Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper. -
    -
    - - - -
    Fast & Global Support
    - Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. -
    -
    - - - -
    Open Source
    - Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. -
    -
    - - - -
    Trusted Securitty
    - Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend. -
    -
    +
    +
    +
    +
    + Premium +
    +
    Plan description
    +
    +
    + $29 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    • + + Duis ultricies lacus sed +
      • +
    +
    +
    - +
    +
    - -
    -
    Pricing Plans
    -
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    +
    +
    +
    +
    + Enterprise +
    +
    Plan description
    +
    +
    + $49 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    • + + Duis ultricies lacus sed +
      • +
    • + + Imperdiet proin +
      • +
    • + + Nisi scelerisque +
      • +
    +
    + +
    +
    +
    +
    +
    +     -
    -
    -
    -
    -
    Basic
    -
    Plan description
    -
    -
    - $9 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    -
    - -
    -
    -
    + +
    +
    +
    +  POWERED BY DISCORD +
    +
    + Join Our Design Community +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit + numquam eligendi quos. +
    + +
    +
    +     -
    -
    -
    -
    Premium
    -
    Plan description
    -
    -
    - $29 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    • - - Duis ultricies lacus sed -
      • -
    -
    - -
    -
    -
    + +
    +
    + + 🔥 + {' '} + Hot Deals! +
    +
    + + Libero voluptatum atque exercitationem praesentium provident odit. + +
    + + +
    +     -
    -
    -
    -
    Enterprise
    -
    Plan description
    -
    -
    - $49 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    • - - Duis ultricies lacus sed -
      • -
    • - - Imperdiet proin -
      • -
    • - - Nisi scelerisque -
      • -
    -
    - -
    -
    -
    + +
    +
      +
    • + +
      • +
    • + +
      • +
    • + Analytics +
      • +
    +
    +
    +
    Customers
    +
    +
    + + 332 Active Users +
    +
    + + 9402 Sessions +
    +
    + + 2.32m Avg. Duration +
    +
    +
    +
    +
    +
    +
    +     + + +
    +
    +
    +
    +
    +
    + + Orders + +
    152
    +
    +
    + +
    +
    + 24 new + since last visit +
    +
    +
    +
    +
    +
    + + Revenue + +
    $2.100
    +
    +
    + +
    +
    + %52+ + since last week +
    +
    +
    +
    +
    +
    + + Customers + +
    28441
    +
    +
    + +
    +
    + 520 + newly registered +
    +
    +
    +
    +
    +
    + + Comments + +
    + 152 Unread
    +
    +
    + +
    - + 85 + responded +
    +
    +
    +
    +     - -
    -
    -
     POWERED BY DISCORD
    -
    Join Our Design Community
    -
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    - -
    -
    -     + +
    +
    + hyper +
    + Welcome Back +
    + + Don't have an account? + + +
    - -
    -
    🔥 Hot Deals!
    -
    - Libero voluptatum atque exercitationem praesentium provident odit. -
    - - -
    -     +
    + + - -
    -
      -
    • - -
      • -
    • - -
      • -
    • - Analytics -
      • -
    -
    -
    -
    Customers
    -
    -
    - - 332 Active Users -
    -
    - - 9402 Sessions -
    -
    - - 2.32m Avg. Duration -
    -
    -
    -
    -
    -
    -
    -     + + - -
    -
    -
    -
    -
    -
    - Orders -
    152
    -
    -
    - -
    -
    - 24 new - since last visit -
    -
    -
    -
    -
    -
    - Revenue -
    $2.100
    -
    -
    - -
    -
    - %52+ - since last week -
    -
    -
    -
    -
    -
    - Customers -
    28441
    -
    -
    - -
    -
    - 520 - newly registered -
    -
    -
    -
    -
    -
    - Comments -
    152 Unread
    -
    -
    - -
    -
    - 85 - responded -
    -
    -
    -
    -     +
    +
    + setChecked(e.checked)} + checked={checked} + /> + +
    + +
    - -
    -
    - hyper -
    Welcome Back
    - Don't have an account? - -
    +
    +
    + -
    - - + +
    +
    + Movie Information +
    +
    + Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit + rutrum. +
    +
      +
    • +
      Title
      +
      + Heat +
      +
      +
      +
      • +
    • +
      Genre
      +
      + + + +
      +
      +
      +
      • +
    • +
      Director
      +
      + Michael Mann +
      +
      +
      +
      • +
    • +
      Actors
      +
      + Robert De Niro, Al Pacino +
      +
      +
      +
      • +
    • +
      Plot
      +
      + A group of professional bank robbers start to feel the heat from + police when they unknowingly leave a clue at their latest heist. +
      +
      +
      +
      • +
    +
    +     - - - -
    -
    - setChecked(e.checked)} checked={checked} /> - -
    - -
    - -
    -
    -     - - -
    -
    Movie Information
    -
    Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
    -
      -
    • -
      Title
      -
      Heat
      -
      -
      -
      • -
    • -
      Genre
      -
      - - - -
      -
      -
      -
      • -
    • -
      Director
      -
      Michael Mann
      -
      -
      -
      • -
    • -
      Actors
      -
      Robert De Niro, Al Pacino
      -
      -
      -
      • -
    • -
      Plot
      -
      - A group of professional bank robbers start to feel the heat from police - when they unknowingly leave a clue at their latest heist.
      -
      -
      -
      • -
    -
    -     - - -
    -
    Card Title
    -
    Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
    -
    -
    -     - - ) -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + +
    +
    Card Title
    +
    + Vivamus id nisl interdum, blandit augue sit amet, eleifend mi. +
    +
    +
    +     + + ); }; -export default React.memo(BlocksDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(BlocksDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ButtonDemo.js b/web-ui/web-react/src/templates/ButtonDemo.js index 33d777d3..5fbdc695 100644 --- a/web-ui/web-react/src/templates/ButtonDemo.js +++ b/web-ui/web-react/src/templates/ButtonDemo.js @@ -3,195 +3,381 @@ import { Button } from 'primereact/button'; import { SplitButton } from 'primereact/splitbutton'; const ButtonDemo = () => { - const [loading1, setLoading1] = useState(false); - const [loading2, setLoading2] = useState(false); - const [loading3, setLoading3] = useState(false); - const [loading4, setLoading4] = useState(false); + const [loading1, setLoading1] = useState(false); + const [loading2, setLoading2] = useState(false); + const [loading3, setLoading3] = useState(false); + const [loading4, setLoading4] = useState(false); - const onLoadingClick1 = () => { - setLoading1(true); + const onLoadingClick1 = () => { + setLoading1(true); - setTimeout(() => { - setLoading1(false); - }, 2000); - } + setTimeout(() => { + setLoading1(false); + }, 2000); + }; - const onLoadingClick2 = () => { - setLoading2(true); + const onLoadingClick2 = () => { + setLoading2(true); - setTimeout(() => { - setLoading2(false); - }, 2000); - } + setTimeout(() => { + setLoading2(false); + }, 2000); + }; - const onLoadingClick3 = () => { - setLoading3(true); + const onLoadingClick3 = () => { + setLoading3(true); - setTimeout(() => { - setLoading3(false); - }, 2000); - } + setTimeout(() => { + setLoading3(false); + }, 2000); + }; - const onLoadingClick4 = () => { - setLoading4(true); + const onLoadingClick4 = () => { + setLoading4(true); - setTimeout(() => { - setLoading4(false); - }, 2000); - } + setTimeout(() => { + setLoading4(false); + }, 2000); + }; - const items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'Home', - icon: 'pi pi-home' - } - ]; + const items = [ + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-times', + }, + { + label: 'Home', + icon: 'pi pi-home', + }, + ]; - return ( -
    -
    -
    -
    Default
    - - - -
    - -
    -
    Severities
    -
    - -
    -
    Text
    -
    - -
    -
    Outlined
    -
    - -
    -
    Button Group
    - -
    - -
    -
    SplitButton
    - - - - - -
    -
    - -
    -
    -
    Icons
    - - - -
    - -
    -
    Raised
    -
    - -
    -
    Rounded
    -
    - -
    -
    Rounded Icons
    -
    - -
    -
    Rounded Text
    -
    - -
    -
    Rounded Outlined
    -
    - -
    -
    Loading
    -
    -
    + return ( +
    +
    +
    +
    Default
    + + +
    - ) -} -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    Severities
    +
    + +
    +
    Text
    +
    + +
    +
    Outlined
    +
    + +
    +
    Button Group
    + +
    + +
    +
    SplitButton
    + + + + + +
    +
    + +
    +
    +
    Icons
    + + + +
    + +
    +
    Raised
    +
    + +
    +
    Rounded
    +
    + +
    +
    Rounded Icons
    +
    + +
    +
    Rounded Text
    +
    + +
    +
    Rounded Outlined
    +
    + +
    +
    Loading
    +
    +
    +
    + ); }; -export default React.memo(ButtonDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(ButtonDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ChartDemo.js b/web-ui/web-react/src/templates/ChartDemo.js index 669daaaa..fac867e7 100644 --- a/web-ui/web-react/src/templates/ChartDemo.js +++ b/web-ui/web-react/src/templates/ChartDemo.js @@ -2,406 +2,404 @@ import React, { useEffect, useState } from 'react'; import { Chart } from 'primereact/chart'; const lineData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'First Dataset', - data: [65, 59, 80, 81, 56, 55, 40], - fill: false, - backgroundColor: '#2f4860', - borderColor: '#2f4860', - tension: .4 - }, - { - label: 'Second Dataset', - data: [28, 48, 40, 19, 86, 27, 90], - fill: false, - backgroundColor: '#00bb7e', - borderColor: '#00bb7e', - tension: .4 - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + fill: false, + backgroundColor: '#2f4860', + borderColor: '#2f4860', + tension: 0.4, + }, + { + label: 'Second Dataset', + data: [28, 48, 40, 19, 86, 27, 90], + fill: false, + backgroundColor: '#00bb7e', + borderColor: '#00bb7e', + tension: 0.4, + }, + ], }; const pieData = { - labels: ['A', 'B', 'C'], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ], - hoverBackgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ] - } - ] + labels: ['A', 'B', 'C'], + datasets: [ + { + data: [300, 50, 100], + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + }, + ], }; const polarData = { - datasets: [{ - data: [ - 11, - 16, - 7, - 3, - 14 - ], - backgroundColor: [ - "#FF6384", - "#4BC0C0", - "#FFCE56", - "#E7E9ED", - "#36A2EB" - ], - label: 'My dataset' - }], - labels: [ - "Red", - "Green", - "Yellow", - "Grey", - "Blue" - ] + datasets: [ + { + data: [11, 16, 7, 3, 14], + backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'], + label: 'My dataset', + }, + ], + labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'], }; const barData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: '#2f4860', - data: [65, 59, 80, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: '#00bb7e', - data: [28, 48, 40, 19, 86, 27, 90] - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'My First dataset', + backgroundColor: '#2f4860', + data: [65, 59, 80, 81, 56, 55, 40], + }, + { + label: 'My Second dataset', + backgroundColor: '#00bb7e', + data: [28, 48, 40, 19, 86, 27, 90], + }, + ], }; const doughnutData = { - labels: ['A', 'B', 'C'], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ], - hoverBackgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ] - } - ] + labels: ['A', 'B', 'C'], + datasets: [ + { + data: [300, 50, 100], + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + }, + ], }; const radarData = { - labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - borderColor: 'rgba(179,181,198,1)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] + labels: [ + 'Eating', + 'Drinking', + 'Sleeping', + 'Designing', + 'Coding', + 'Cycling', + 'Running', + ], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + borderColor: 'rgba(179,181,198,1)', + pointBackgroundColor: 'rgba(179,181,198,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(179,181,198,1)', + data: [65, 59, 90, 81, 56, 55, 40], + }, + { + label: 'My Second dataset', + backgroundColor: 'rgba(255,99,132,0.2)', + borderColor: 'rgba(255,99,132,1)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100], + }, + ], }; const ChartDemo = (props) => { - const [lineOptions, setLineOptions] = useState(null) - const [barOptions, setBarOptions] = useState(null) - const [pieOptions, setPieOptions] = useState(null) - const [polarOptions, setPolarOptions] = useState(null) - const [radarOptions, setRadarOptions] = useState(null) + const [lineOptions, setLineOptions] = useState(null); + const [barOptions, setBarOptions] = useState(null); + const [pieOptions, setPieOptions] = useState(null); + const [polarOptions, setPolarOptions] = useState(null); + const [radarOptions, setRadarOptions] = useState(null); - const applyLightTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; + const applyLightTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, + }; - const barOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; + const barOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, + }; - const pieOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - } - }; + const pieOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + }; - const polarOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - r: { - grid: { - color: '#ebedef' - } - } - } - }; + const polarOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + r: { + grid: { + color: '#ebedef', + }, + }, + }, + }; - const radarOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - r: { - grid: { - color: '#ebedef' - } - } - } - }; + const radarOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + r: { + grid: { + color: '#ebedef', + }, + }, + }, + }; - setLineOptions(lineOptions) - setBarOptions(barOptions) - setPieOptions(pieOptions) - setPolarOptions(polarOptions) - setRadarOptions(radarOptions) + setLineOptions(lineOptions); + setBarOptions(barOptions); + setPieOptions(pieOptions); + setPolarOptions(polarOptions); + setRadarOptions(radarOptions); + }; + const applyDarkTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const barOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const pieOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + }; + + const polarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const radarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + setLineOptions(lineOptions); + setBarOptions(barOptions); + setPieOptions(pieOptions); + setPolarOptions(polarOptions); + setRadarOptions(radarOptions); + }; + + useEffect(() => { + if (props.colorMode === 'light') { + applyLightTheme(); + } else { + applyDarkTheme(); } + }, [props.colorMode]); - const applyDarkTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - const barOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - const pieOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - } - }; - - const polarOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - r: { - grid: { - color: 'rgba(160, 167, 181, .3)' - } - } - } - }; - - const radarOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - r: { - grid: { - color: 'rgba(160, 167, 181, .3)' - } - } - } - }; - - setLineOptions(lineOptions) - setBarOptions(barOptions) - setPieOptions(pieOptions) - setPolarOptions(polarOptions) - setRadarOptions(radarOptions) - } - - useEffect(() => { - if (props.colorMode === 'light') { - applyLightTheme(); - } else { - applyDarkTheme(); - } - }, [props.colorMode]); - - return ( -
    -
    -
    -
    Linear Chart
    - -
    - -
    -
    Pie Chart
    - -
    - -
    -
    Polar Area Chart
    - -
    -
    -
    -
    -
    Bar Chart
    - -
    - -
    -
    Doughnut Chart
    - -
    - -
    -
    Radar Chart
    - -
    -
    + return ( +
    +
    +
    +
    Linear Chart
    +
    - ) -} + +
    +
    Pie Chart
    + +
    + +
    +
    Polar Area Chart
    + +
    +
    +
    +
    +
    Bar Chart
    + +
    + +
    +
    Doughnut Chart
    + +
    + +
    +
    Radar Chart
    + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return (prevProps.location.pathname === nextProps.location.pathname) && (prevProps.colorMode === nextProps.colorMode); + return ( + prevProps.location.pathname === nextProps.location.pathname && + prevProps.colorMode === nextProps.colorMode + ); }; export default React.memo(ChartDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/CodeHighlight.js b/web-ui/web-react/src/templates/CodeHighlight.js index e6035c20..19c5fb9b 100644 --- a/web-ui/web-react/src/templates/CodeHighlight.js +++ b/web-ui/web-react/src/templates/CodeHighlight.js @@ -8,25 +8,24 @@ import 'prismjs/components/prism-css'; import 'prismjs/components/prism-scss'; export const CodeHighlight = (props) => { + const codeElement = useRef(null); - const codeElement = useRef(null); + useEffect(() => { + if (Prism) { + Prism.highlightElement(codeElement.current); + } + }, []); - useEffect(() => { - if (Prism) { - Prism.highlightElement(codeElement.current); - } - }, []); - - return ( - 
    -            
-                {props.children} 
-                
-
    - ); -} + return ( + 
    +      
+        {props.children} 
+      
+
    + ); +}; CodeHighlight.defaultProps = { - lang: 'jsx', - style: null + lang: 'jsx', + style: null, }; diff --git a/web-ui/web-react/src/templates/Dashboard.js b/web-ui/web-react/src/templates/Dashboard.js index c332d519..6eef0e5e 100644 --- a/web-ui/web-react/src/templates/Dashboard.js +++ b/web-ui/web-react/src/templates/Dashboard.js @@ -7,348 +7,503 @@ import { Column } from 'primereact/column'; import { ProductService } from '../service/ProductService'; const lineData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'First Dataset', - data: [65, 59, 80, 81, 56, 55, 40], - fill: false, - backgroundColor: '#2f4860', - borderColor: '#2f4860', - tension: .4 - }, - { - label: 'Second Dataset', - data: [28, 48, 40, 19, 86, 27, 90], - fill: false, - backgroundColor: '#00bb7e', - borderColor: '#00bb7e', - tension: .4 - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + fill: false, + backgroundColor: '#2f4860', + borderColor: '#2f4860', + tension: 0.4, + }, + { + label: 'Second Dataset', + data: [28, 48, 40, 19, 86, 27, 90], + fill: false, + backgroundColor: '#00bb7e', + borderColor: '#00bb7e', + tension: 0.4, + }, + ], }; const Dashboard = (props) => { - const [products, setProducts] = useState(null); - const menu1 = useRef(null); - const menu2 = useRef(null); - const [lineOptions, setLineOptions] = useState(null) + const [products, setProducts] = useState(null); + const menu1 = useRef(null); + const menu2 = useRef(null); + const [lineOptions, setLineOptions] = useState(null); - const applyLightTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; - - setLineOptions(lineOptions) - } - - const applyDarkTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - setLineOptions(lineOptions) - } - - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then(data => setProducts(data)); - }, []); - - useEffect(() => { - if (props.colorMode === 'light') { - applyLightTheme(); - } else { - applyDarkTheme(); - } - }, [props.colorMode]); - - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + const applyLightTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, }; - return ( -
    -
    -
    -
    -
    - Orders -
    152
    -
    -
    - -
    -
    - 24 new - since last visit -
    -
    -
    -
    -
    -
    - Revenue -
    $2.100
    -
    -
    - -
    -
    - %52+ - since last week -
    -
    -
    -
    -
    -
    - Customers -
    28441
    -
    -
    - -
    -
    - 520 - newly registered -
    -
    -
    -
    -
    -
    - Comments -
    152 Unread
    -
    -
    - -
    -
    - 85 - responded -
    -
    + setLineOptions(lineOptions); + }; -
    -
    -
    Recent Sales
    - - {data.image}}/> - - formatCurrency(data.price)}/> - ( - <> -
    -
    -
    -
    Best Selling Products
    -
    -
    -
    -
      -
    • -
      - Space T-Shirt -
      Clothing
      -
      -
      -
      -
      -
      - %50 -
      -
      • -
    • -
      - Portal Sticker -
      Accessories
      -
      -
      -
      -
      -
      - %16 -
      -
      • -
    • -
      - Supernova Sticker -
      Accessories
      -
      -
      -
      -
      -
      - %67 -
      -
      • -
    • -
      - Wonders Notebook -
      Office
      -
      -
      -
      -
      -
      - %35 -
      -
      • -
    • -
      - Mat Black Case -
      Accessories
      -
      -
      -
      -
      -
      - %75 -
      -
      • -
    • -
      - Robots T-Shirt -
      Clothing
      -
      -
      -
      -
      -
      - %40 -
      -
      • -
    -
    + const applyDarkTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + setLineOptions(lineOptions); + }; + + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((data) => setProducts(data)); + }, []); + + useEffect(() => { + if (props.colorMode === 'light') { + applyLightTheme(); + } else { + applyDarkTheme(); + } + }, [props.colorMode]); + + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; + + return ( +
    +
    +
    +
    +
    + Orders +
    152
    - -
    -
    -
    Sales Overview
    - -
    - -
    -
    -
    Notifications
    -
    -
    -
    - - TODAY -
      -
    • -
      - -
      - Richard Jones - has purchased a blue t-shirt for 79$ - -
      • -
    • -
      - -
      - Your request for withdrawal of 2500$ has been initiated. -
      • -
    - - YESTERDAY -
      -
    • -
      - -
      - Keyser Wick - has purchased a black jacket for 59$ - -
      • -
    • -
      - -
      - Jane Davis - has posted a new questions about your product. - -
      • -
    -
    -
    -
    -
    TAKE THE NEXT STEP
    -
    Try PrimeBlocks
    -
    - -
    +
    +
    +
    + 24 new + since last visit
    - ); -} +
    +
    +
    +
    +
    + Revenue +
    $2.100
    +
    +
    + +
    +
    + %52+ + since last week +
    +
    +
    +
    +
    +
    + Customers +
    28441
    +
    +
    + +
    +
    + 520 + newly registered +
    +
    +
    +
    +
    +
    + Comments +
    152 Unread
    +
    +
    + +
    +
    + 85 + responded +
    +
    + +
    +
    +
    Recent Sales
    + + ( + {data.image} + )} + /> + + formatCurrency(data.price)} + /> + ( + <> +
    +
    +
    +
    Best Selling Products
    +
    +
    +
    +
      +
    • +
      + + Space T-Shirt + +
      Clothing
      +
      +
      +
      +
      +
      + %50 +
      +
      • +
    • +
      + + Portal Sticker + +
      Accessories
      +
      +
      +
      +
      +
      + %16 +
      +
      • +
    • +
      + + Supernova Sticker + +
      Accessories
      +
      +
      +
      +
      +
      + %67 +
      +
      • +
    • +
      + + Wonders Notebook + +
      Office
      +
      +
      +
      +
      +
      + %35 +
      +
      • +
    • +
      + + Mat Black Case + +
      Accessories
      +
      +
      +
      +
      +
      + %75 +
      +
      • +
    • +
      + + Robots T-Shirt + +
      Clothing
      +
      +
      +
      +
      +
      + %40 +
      +
      • +
    +
    +
    + +
    +
    +
    Sales Overview
    + +
    + +
    +
    +
    Notifications
    +
    +
    +
    + + TODAY +
      +
    • +
      + +
      + + Richard Jones + + {' '} + has purchased a blue t-shirt for{' '} + 79$ + + +
      • +
    • +
      + +
      + + Your request for withdrawal of{' '} + 2500$ has + been initiated. + +
      • +
    + + YESTERDAY +
      +
    • +
      + +
      + + Keyser Wick + + {' '} + has purchased a black jacket for{' '} + 59$ + + +
      • +
    • +
      + +
      + + Jane Davis + + {' '} + has posted a new questions about your product. + + +
      • +
    +
    +
    +
    +
    + TAKE THE NEXT STEP +
    +
    + Try PrimeBlocks +
    +
    + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return (prevProps.location.pathname === nextProps.location.pathname) && (prevProps.colorMode === nextProps.colorMode); + return ( + prevProps.location.pathname === nextProps.location.pathname && + prevProps.colorMode === nextProps.colorMode + ); }; export default React.memo(Dashboard, comparisonFn); diff --git a/web-ui/web-react/src/templates/Documentation.js b/web-ui/web-react/src/templates/Documentation.js index bb47ca8b..f1a2d7cb 100644 --- a/web-ui/web-react/src/templates/Documentation.js +++ b/web-ui/web-react/src/templates/Documentation.js @@ -2,92 +2,123 @@ import React from 'react'; import { CodeHighlight } from './CodeHighlight'; const Documentation = () => { + return ( +
    +
    +
    +

    Current Version

    +

    React 17.x and PrimeReact 7.x

    - return ( -
    -
    -
    -

    Current Version

    -

    React 17.x and PrimeReact 7.x

    - -
    Getting Started
    -

    Sakai is an application template for React based on the popular create-react-app that allows - creating React apps with no configuration. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.

    - -{` +
    Getting Started
    +

    + Sakai is an application template for React based on the popular{' '} + + create-react-app + {' '} + that allows creating React apps with no configuration. To get + started, clone the{' '} + repository{' '} + from GitHub and install the dependencies with npm or yarn. +

    + + {` "npm install" or "yarn" `} - +     -

    Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application. - That is it, you may now start with the development of your application using the Sakai template.

    +

    + Next step is running the application using the start script and + navigate to http://localhost:3000/ to view the application. + That is it, you may now start with the development of your + application using the Sakai template. +

    - -{` + + {` "npm start" or "yarn start" `} - + -
    React Scripts
    -

    Following commands are derived from create-app-app.

    - -{` +
    React Scripts
    +

    Following commands are derived from create-app-app.

    + + {` "npm start" or "yarn start": Starts the development server "npm test" or "yarn test": Runs the tests. "npm run build" or "yarn run build": Creates a production build. `} - +     -
    Dependencies
    -

    Dependencies of Sakai are listed below and needs to be defined at package.json.

    +
    Dependencies
    +

    + Dependencies of Sakai are listed below and needs to be defined at + package.json. +

    - -{` + + {` "primereact": "...", //required: PrimeReact components "primeicons": "...", //required: Icons "primeflex": "...", //optional: Sample pages "react-transition-group": "^4.4.1", //required: PrimeReact animations `} - + -
    Structure
    -

    Sakai consists of 2 main parts; the application layout and the resources. App.js inside src folder is the main component containing the template for the base layout - whereas required resources such as SASS structure for the layout are placed inside the src/layout folder.

    +
    Structure
    +

    + Sakai consists of 2 main parts; the application layout and the + resources. App.js inside src folder is the main component + containing the template for the base layout whereas required + resources such as SASS structure for the layout are placed inside + the src/layout folder. +

    -
    Application Template
    -

    Main layout is the JSX template of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the - App.js component that implements the logic such as menu state, layout modes and so on. -

    +
    Application Template
    +

    + Main layout is the JSX template of the App.js, it is divided into a + couple of child components such as topbar, profile, menu and footer. + Here is render method of the App.js component that implements the + logic such as menu state, layout modes and so on. +

    -
    Menu
    -

    Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems, - navigate to App.js file and define your own model as a nested structure. Here is the menu component from the demo application.

    +
    Menu
    +

    + Menu is a separate component defined in AppMenu.js file based on + PrimeReact MenuModel API. In order to define the menuitems, navigate + to App.js file and define your own model as a nested structure. Here + is the menu component from the demo application. +

    -
    PrimeReact Theme
    -

    Sakai theming is based on the PrimeReact theme being used. Default theme is lara-light-indigo.

    +
    PrimeReact Theme
    +

    + Sakai theming is based on the PrimeReact theme being used. Default + theme is lara-light-indigo. +

    -
    SASS Variables
    -

    In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes - will be reflected instantly at your browser. -

    +
    SASS Variables
    +

    + In case you'd like to customize the main layout variables, open{' '} + _variables.scss file under src/layout folder. Saving the + changes will be reflected instantly at your browser. +

    -
    src/layout/_variables.scss
    - -{` +
    src/layout/_variables.scss
    + + {` /* General */ $fontSize:14px; $borderRadius:12px; $transitionDuration:.2s; `} - -
    -
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(Documentation, comparisonFn); diff --git a/web-ui/web-react/src/templates/FileDemo.js b/web-ui/web-react/src/templates/FileDemo.js index ea6572c2..59f707ad 100644 --- a/web-ui/web-react/src/templates/FileDemo.js +++ b/web-ui/web-react/src/templates/FileDemo.js @@ -2,29 +2,48 @@ import React, { useRef } from 'react'; import { FileUpload } from 'primereact/fileupload'; const FileDemo = () => { - const toast = useRef(null); + const toast = useRef(null); - const onUpload = () => { - toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); - } + const onUpload = () => { + toast.current.show({ + severity: 'info', + summary: 'Success', + detail: 'File Uploaded', + life: 3000, + }); + }; - return ( -
    -
    -
    -
    Advanced
    - + return ( +
    +
    +
    +
    Advanced
    + -
    Basic
    - -
    -
    +
    Basic
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FileDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/FloatLabelDemo.js b/web-ui/web-react/src/templates/FloatLabelDemo.js index 130a354d..7077b1b1 100644 --- a/web-ui/web-react/src/templates/FloatLabelDemo.js +++ b/web-ui/web-react/src/templates/FloatLabelDemo.js @@ -1,134 +1,186 @@ -import React, {useState, useEffect} from 'react'; -import {InputText} from 'primereact/inputtext'; -import {InputTextarea} from 'primereact/inputtextarea'; -import {InputMask} from 'primereact/inputmask'; -import {InputNumber} from 'primereact/inputnumber'; -import {AutoComplete} from 'primereact/autocomplete'; -import {Calendar} from 'primereact/calendar'; -import {Chips} from 'primereact/chips'; -import {Dropdown} from 'primereact/dropdown'; -import {MultiSelect} from 'primereact/multiselect'; -import {CountryService} from '../service/CountryService'; +import React, { useState, useEffect } from 'react'; +import { InputText } from 'primereact/inputtext'; +import { InputTextarea } from 'primereact/inputtextarea'; +import { InputMask } from 'primereact/inputmask'; +import { InputNumber } from 'primereact/inputnumber'; +import { AutoComplete } from 'primereact/autocomplete'; +import { Calendar } from 'primereact/calendar'; +import { Chips } from 'primereact/chips'; +import { Dropdown } from 'primereact/dropdown'; +import { MultiSelect } from 'primereact/multiselect'; +import { CountryService } from '../service/CountryService'; const FloatLabelDemo = () => { - const [countries, setCountries] = useState([]); - const [filteredCountries, setFilteredCountries] = useState(null); - const [value1, setValue1] = useState(''); - const [value2, setValue2] = useState(''); - const [value3, setValue3] = useState(null); - const [value4, setValue4] = useState(''); - const [value5, setValue5] = useState(''); - const [value6, setValue6] = useState(''); - const [value7, setValue7] = useState(''); - const [value8, setValue8] = useState(''); - const [value9, setValue9] = useState([]); - const [value10, setValue10] = useState(null); + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState(null); + const [value1, setValue1] = useState(''); + const [value2, setValue2] = useState(''); + const [value3, setValue3] = useState(null); + const [value4, setValue4] = useState(''); + const [value5, setValue5] = useState(''); + const [value6, setValue6] = useState(''); + const [value7, setValue7] = useState(''); + const [value8, setValue8] = useState(''); + const [value9, setValue9] = useState([]); + const [value10, setValue10] = useState(null); - const cities = [ - {name: 'New York', code: 'NY'}, - {name: 'Rome', code: 'RM'}, - {name: 'London', code: 'LDN'}, - {name: 'Istanbul', code: 'IST'}, - {name: 'Paris', code: 'PRS'}, - ]; + const cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - countryService.getCountries().then((countries) => { - setCountries(countries); - }); - }, []); + useEffect(() => { + const countryService = new CountryService(); + countryService.getCountries().then((countries) => { + setCountries(countries); + }); + }, []); - const searchCountry = (event) => { - // in a real application, make a request to a remote url with the query and - // return filtered results, for demo we filter at client side - const filtered = []; - const query = event.query; - for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { - filtered.push(country); - } - } - setFilteredCountries(filtered); - }; + const searchCountry = (event) => { + // in a real application, make a request to a remote url with the query and + // return filtered results, for demo we filter at client side + const filtered = []; + const query = event.query; + for (let i = 0; i < countries.length; i++) { + const country = countries[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { + filtered.push(country); + } + } + setFilteredCountries(filtered); + }; - return ( -
    -
    Float Label
    -
    -
    - - setValue1(e.target.value)}/> - - -
    -
    - - setValue6(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name"> - - -
    -
    - - setValue7(e.value)}> - - -
    -
    - - setValue9(e.value)}> - - -
    -
    - - setValue2(e.value)}> - - -
    -
    - - setValue3(e.target.value)}> - - -
    -
    -
    - - - - - setValue4(e.target.value)}/> - - -
    -
    -
    - - setValue8(e.value)} optionLabel="name"> - - -
    -
    - - setValue10(e.value)} optionLabel="name"> - - -
    -
    - - setValue5(e.target.value)}> - - -
    -
    + return ( +
    +
    Float Label
    +
    +
    + + setValue1(e.target.value)} + /> + +
    - ) -} +
    + + setValue6(e.value)} + suggestions={filteredCountries} + completeMethod={searchCountry} + field="name" + > + + +
    +
    + + setValue7(e.value)} + > + + +
    +
    + + setValue9(e.value)} + > + + +
    +
    + + setValue2(e.value)} + > + + +
    +
    + + setValue3(e.target.value)} + > + + +
    +
    +
    + + + + + setValue4(e.target.value)} + /> + + +
    +
    +
    + + setValue8(e.value)} + optionLabel="name" + > + + +
    +
    + + setValue10(e.value)} + optionLabel="name" + > + + +
    +
    + + setValue5(e.target.value)} + > + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FloatLabelDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/FormLayoutDemo.js b/web-ui/web-react/src/templates/FormLayoutDemo.js index 03d26aba..224d0239 100644 --- a/web-ui/web-react/src/templates/FormLayoutDemo.js +++ b/web-ui/web-react/src/templates/FormLayoutDemo.js @@ -5,126 +5,141 @@ import { InputTextarea } from 'primereact/inputtextarea'; import { Dropdown } from 'primereact/dropdown'; const FormLayoutDemo = () => { - const [dropdownItem, setDropdownItem] = useState(null); - const dropdownItems = [ - { name: 'Option 1', code: 'Option 1' }, - { name: 'Option 2', code: 'Option 2' }, - { name: 'Option 3', code: 'Option 3' } - ]; + const [dropdownItem, setDropdownItem] = useState(null); + const dropdownItems = [ + { name: 'Option 1', code: 'Option 1' }, + { name: 'Option 2', code: 'Option 2' }, + { name: 'Option 3', code: 'Option 3' }, + ]; - return ( -
    -
    -
    -
    Vertical
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - -
    -
    Vertical Grid
    -
    -
    - - -
    -
    - - -
    -
    -
    -
    - -
    -
    -
    Horizontal
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    Inline
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -
    -
    Help Text
    -
    - - - Enter your username to reset your password. -
    -
    -
    - -
    -
    -
    Advanced
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - setDropdownItem(e.value)} options={dropdownItems} optionLabel="name" placeholder="Select One"> -
    -
    - - -
    -
    -
    -
    + return ( +
    +
    +
    +
    Vertical
    +
    + + +
    +
    + + +
    +
    + + +
    - ) -} + +
    +
    Vertical Grid
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    Horizontal
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    Inline
    +
    +
    + + +
    +
    + + +
    + +
    +
    + +
    +
    Help Text
    +
    + + + Enter your username to reset your password. +
    +
    +
    + +
    +
    +
    Advanced
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + setDropdownItem(e.value)} + options={dropdownItems} + optionLabel="name" + placeholder="Select One" + > +
    +
    + + +
    +
    +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FormLayoutDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/IconsDemo.js b/web-ui/web-react/src/templates/IconsDemo.js index 2b5e0da3..c6a5c16c 100644 --- a/web-ui/web-react/src/templates/IconsDemo.js +++ b/web-ui/web-react/src/templates/IconsDemo.js @@ -4,99 +4,119 @@ import { InputText } from 'primereact/inputtext'; import { CodeHighlight } from './CodeHighlight'; const IconsDemo = () => { - const [icons, setIcons] = useState([]); - const [filteredIcons, setFilteredIcons] = useState([]); + const [icons, setIcons] = useState([]); + const [filteredIcons, setFilteredIcons] = useState([]); - useEffect(() => { - axios.get('assets/demo/data/icons.json').then(res => { - let icons = res.data.icons; - icons.sort((icon1, icon2) => { - if (icon1.properties.name < icon2.properties.name) - return -1; - else if (icon1.properties.name < icon2.properties.name) - return 1; - else - return 0; - }); + useEffect(() => { + axios.get('assets/demo/data/icons.json').then((res) => { + let icons = res.data.icons; + icons.sort((icon1, icon2) => { + if (icon1.properties.name < icon2.properties.name) return -1; + else if (icon1.properties.name < icon2.properties.name) return 1; + else return 0; + }); - setIcons(icons); - setFilteredIcons(icons); - }); - }, []); + setIcons(icons); + setFilteredIcons(icons); + }); + }, []); - const onFilter = (event) => { - if (!event.target.value) { - setFilteredIcons(icons); - } - else { - setFilteredIcons(icons.filter( it => { - return it.icon.tags[0].includes(event.target.value); - })); - } + const onFilter = (event) => { + if (!event.target.value) { + setFilteredIcons(icons); + } else { + setFilteredIcons( + icons.filter((it) => { + return it.icon.tags[0].includes(event.target.value); + }), + ); } + }; - return ( -
    -

    Icons

    -

    PrimeReact components internally use PrimeIcons library, the official icons suite from PrimeTek.

    + return ( +
    +

    Icons

    +

    + PrimeReact components internally use{' '} + + PrimeIcons + {' '} + library, the official icons suite from{' '} + + PrimeTek + + . +

    -
    Download
    -

    PrimeIcons is available at npm, run the following command to download it to your project.

    - -{` +
    Download
    +

    + PrimeIcons is available at npm, run the following command to download it + to your project. +

    + + {` npm install primeicons --save `} - +     -
    Getting Started
    -

    PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. - A standalone icon can be displayed using an element like i or span

    +
    Getting Started
    +

    + PrimeIcons use the pi pi-{icon} syntax such + as pi pi-check. A standalone icon can be displayed + using an element like i or span +

    - -{` + + {` `} - + -
    Size
    -

    Size of the icons can easily be changed using font-size property.

    +
    Size
    +

    Size of the icons can easily be changed using font-size property.

    - -{` + + {` `} - + - + - -{` + + {` `} - + - + -
    Spinning Animation
    -

    Special pi-spin class applies continuous rotation to an icon.

    - -{` +
    Spinning Animation
    +

    Special pi-spin class applies continuous rotation to an icon.

    + + {` `} - +     - + -
    Constants
    -

    PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.

    - -{` +
    Constants
    +

    + PrimeIcons constants API is provided to easily choose an icon with + typescript e.g. when defining a menu model. +

    + + {` `} - - -{` + + + {` import {PrimeIcons} from 'primereact/api'; const items = [ @@ -112,33 +132,52 @@ const items = [ } ] `} - -
    List of Icons
    -

    Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.

    + +
    List of Icons
    +

    + Here is the current list of PrimeIcons, more icons are added + periodically. You may also{' '} + + request new icons + {' '} + at the issue tracker. +

    -
    - -
    -
    - { - filteredIcons && filteredIcons.map(iconMeta => { - const { icon, properties } = iconMeta; +
    + +
    +
    + {filteredIcons && + filteredIcons.map((iconMeta) => { + const { icon, properties } = iconMeta; - return icon.tags.indexOf('deprecate') === -1 && ( -
    - -
    pi-{properties.name}
    -
    - ); - }) - } -
    -
    - ) -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return ( + icon.tags.indexOf('deprecate') === -1 && ( +
    + +
    pi-{properties.name}
    +
    + ) + ); + })} +
    +
    + ); }; -export default React.memo(IconsDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(IconsDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/InputDemo.js b/web-ui/web-react/src/templates/InputDemo.js index 9dcf1bd3..47252b33 100644 --- a/web-ui/web-react/src/templates/InputDemo.js +++ b/web-ui/web-react/src/templates/InputDemo.js @@ -23,332 +23,485 @@ import { CountryService } from '../service/CountryService'; import { NodeService } from '../service/NodeService'; export const InputDemo = () => { - const [floatValue, setFloatValue] = useState(''); - const [autoValue, setAutoValue] = useState(null); - const [selectedAutoValue, setSelectedAutoValue] = useState(null); - const [autoFilteredValue, setAutoFilteredValue] = useState([]); - const [calendarValue, setCalendarValue] = useState(null); - const [inputNumberValue, setInputNumberValue] = useState(null); - const [chipsValue, setChipsValue] = useState([]); - const [sliderValue, setSliderValue] = useState(''); - const [ratingValue, setRatingValue] = useState(null); - const [colorValue, setColorValue] = useState('1976D2'); - const [knobValue, setKnobValue] = useState(20); - const [radioValue, setRadioValue] = useState(null); - const [checkboxValue, setCheckboxValue] = useState([]); - const [switchValue, setSwitchValue] = useState(false); - const [listboxValue, setListboxValue] = useState(null); - const [dropdownValue, setDropdownValue] = useState(null); - const [multiselectValue, setMultiselectValue] = useState(null); - const [toggleValue, setToggleValue] = useState(false); - const [selectButtonValue1, setSelectButtonValue1] = useState(null); - const [selectButtonValue2, setSelectButtonValue2] = useState(null); - const [inputGroupValue, setInputGroupValue] = useState(false); - const [selectedNode, setSelectedNode] = useState(null); - const [treeSelectNodes, setTreeSelectNodes] = useState(null); + const [floatValue, setFloatValue] = useState(''); + const [autoValue, setAutoValue] = useState(null); + const [selectedAutoValue, setSelectedAutoValue] = useState(null); + const [autoFilteredValue, setAutoFilteredValue] = useState([]); + const [calendarValue, setCalendarValue] = useState(null); + const [inputNumberValue, setInputNumberValue] = useState(null); + const [chipsValue, setChipsValue] = useState([]); + const [sliderValue, setSliderValue] = useState(''); + const [ratingValue, setRatingValue] = useState(null); + const [colorValue, setColorValue] = useState('1976D2'); + const [knobValue, setKnobValue] = useState(20); + const [radioValue, setRadioValue] = useState(null); + const [checkboxValue, setCheckboxValue] = useState([]); + const [switchValue, setSwitchValue] = useState(false); + const [listboxValue, setListboxValue] = useState(null); + const [dropdownValue, setDropdownValue] = useState(null); + const [multiselectValue, setMultiselectValue] = useState(null); + const [toggleValue, setToggleValue] = useState(false); + const [selectButtonValue1, setSelectButtonValue1] = useState(null); + const [selectButtonValue2, setSelectButtonValue2] = useState(null); + const [inputGroupValue, setInputGroupValue] = useState(false); + const [selectedNode, setSelectedNode] = useState(null); + const [treeSelectNodes, setTreeSelectNodes] = useState(null); - const listboxValues = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; + const listboxValues = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - const dropdownValues = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; + const dropdownValues = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - const multiselectValues = [ - { name: 'Australia', code: 'AU' }, - { name: 'Brazil', code: 'BR' }, - { name: 'China', code: 'CN' }, - { name: 'Egypt', code: 'EG' }, - { name: 'France', code: 'FR' }, - { name: 'Germany', code: 'DE' }, - { name: 'India', code: 'IN' }, - { name: 'Japan', code: 'JP' }, - { name: 'Spain', code: 'ES' }, - { name: 'United States', code: 'US' } - ]; + const multiselectValues = [ + { name: 'Australia', code: 'AU' }, + { name: 'Brazil', code: 'BR' }, + { name: 'China', code: 'CN' }, + { name: 'Egypt', code: 'EG' }, + { name: 'France', code: 'FR' }, + { name: 'Germany', code: 'DE' }, + { name: 'India', code: 'IN' }, + { name: 'Japan', code: 'JP' }, + { name: 'Spain', code: 'ES' }, + { name: 'United States', code: 'US' }, + ]; - const selectButtonValues1 = [ - { name: 'Option 1', code: 'O1' }, - { name: 'Option 2', code: 'O2' }, - { name: 'Option 3', code: 'O3' }, - ]; + const selectButtonValues1 = [ + { name: 'Option 1', code: 'O1' }, + { name: 'Option 2', code: 'O2' }, + { name: 'Option 3', code: 'O3' }, + ]; - const selectButtonValues2 = [ - { name: 'Option 1', code: 'O1' }, - { name: 'Option 2', code: 'O2' }, - { name: 'Option 3', code: 'O3' }, - ]; + const selectButtonValues2 = [ + { name: 'Option 1', code: 'O1' }, + { name: 'Option 2', code: 'O2' }, + { name: 'Option 3', code: 'O3' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - const nodeService = new NodeService(); - countryService.getCountries().then(data => setAutoValue(data)); - nodeService.getTreeNodes().then(data => setTreeSelectNodes(data)); - }, []); + useEffect(() => { + const countryService = new CountryService(); + const nodeService = new NodeService(); + countryService.getCountries().then((data) => setAutoValue(data)); + nodeService.getTreeNodes().then((data) => setTreeSelectNodes(data)); + }, []); - const searchCountry = (event) => { - setTimeout(() => { - if (!event.query.trim().length) { - setAutoFilteredValue([...autoValue]); - } - else { - setAutoFilteredValue(autoValue.filter((country) => { - return country.name.toLowerCase().startsWith(event.query.toLowerCase()); - })); - } - }, 250); - }; - - const onCheckboxChange = (e) => { - let selectedValue = [...checkboxValue]; - if (e.checked) - selectedValue.push(e.value); - else - selectedValue.splice(selectedValue.indexOf(e.value), 1); - - setCheckboxValue(selectedValue); - }; - - const itemTemplate = (option) => { - return ( -
    - - {option.name} -
    + const searchCountry = (event) => { + setTimeout(() => { + if (!event.query.trim().length) { + setAutoFilteredValue([...autoValue]); + } else { + setAutoFilteredValue( + autoValue.filter((country) => { + return country.name + .toLowerCase() + .startsWith(event.query.toLowerCase()); + }), ); - }; + } + }, 250); + }; - const selectedItemTemplate = (option) => { - if (option) { - return ( -
    - - {option.name} -
    - ); - } + const onCheckboxChange = (e) => { + let selectedValue = [...checkboxValue]; + if (e.checked) selectedValue.push(e.value); + else selectedValue.splice(selectedValue.indexOf(e.value), 1); - return 'Select Countries'; - }; + setCheckboxValue(selectedValue); + }; + const itemTemplate = (option) => { return ( -
    -
    -
    -
    InputText
    -
    -
    - -
    -
    - -
    -
    - -
    -
    +
    + + {option.name} +
    + ); + }; -
    Icons
    -
    -
    - - - - -
    -
    - - - - -
    -
    - - - - - -
    -
    + const selectedItemTemplate = (option) => { + if (option) { + return ( +
    + + {option.name} +
    + ); + } -
    Float Label
    - - setFloatValue(e.target.value)} /> - - + return 'Select Countries'; + }; -
    Textarea
    - - -
    AutoComplete
    - setSelectedAutoValue(e.value)} suggestions={autoFilteredValue} completeMethod={searchCountry} field="name" /> - -
    Calendar
    - setCalendarValue(e.value)}> - -
    InputNumber
    - setInputNumberValue(e.value)} showButtons mode="decimal"> - -
    Chips
    - setChipsValue(e.value)} /> -
    - -
    -
    -
    -
    Slider
    - setSliderValue(parseInt(e.target.value), 10)} /> - setSliderValue(e.value)} /> -
    -
    -
    Rating
    - setRatingValue(e.value)} /> -
    -
    -
    ColorPicker
    - setColorValue(e.value)} style={{ width: '2rem' }} /> -
    -
    -
    Knob
    - setKnobValue(e.value)} step={10} min={-50} max={50} /> -
    -
    -
    + return ( +
    +
    +
    +
    InputText
    +
    +
    +
    - -
    -
    -
    RadioButton
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    - -
    Checkbox
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    - -
    Input Switch
    - setSwitchValue(e.value)} /> -
    - -
    -
    Listbox
    - setListboxValue(e.value)} options={listboxValues} optionLabel="name" filter /> - -
    Dropdown
    - setDropdownValue(e.value)} options={dropdownValues} optionLabel="name" placeholder="Select" /> - -
    MultiSelect
    - setMultiselectValue(e.value)} options={multiselectValues} optionLabel="name" placeholder="Select Countries" filter - itemTemplate={itemTemplate} selectedItemTemplate={selectedItemTemplate} /> - -
    TreeSelect
    - setSelectedNode(e.value)} options={treeSelectNodes} placeholder="Select Item"> -
    - -
    -
    ToggleButton
    - setToggleValue(e.value)} onLabel="Yes" offLabel="No" /> - -
    SelectButton
    - setSelectButtonValue1(e.value)} options={selectButtonValues1} optionLabel="name" /> - -
    SelectButton - Multiple
    - setSelectButtonValue2(e.value)} options={selectButtonValues2} optionLabel="name" multiple /> -
    +
    +
    +
    + +
    +
    +
    Icons
    +
    +
    + + + + +
    +
    + + + + +
    +
    + + + + + +
    +
    + +
    Float Label
    + + setFloatValue(e.target.value)} + /> + + + +
    Textarea
    + + +
    AutoComplete
    + setSelectedAutoValue(e.value)} + suggestions={autoFilteredValue} + completeMethod={searchCountry} + field="name" + /> + +
    Calendar
    + setCalendarValue(e.value)} + > + +
    InputNumber
    + setInputNumberValue(e.value)} + showButtons + mode="decimal" + > + +
    Chips
    + setChipsValue(e.value)} /> +
    + +
    +
    -
    -
    Input Groups
    -
    -
    -
    - - - - -
    -
    - -
    -
    - - - - $ - .00 -
    -
    - -
    -
    -
    -
    - -
    -
    - - setInputGroupValue(e.checked)} binary /> - - -
    -
    -
    -
    +
    Slider
    + setSliderValue(parseInt(e.target.value), 10)} + /> + setSliderValue(e.value)} + />
    -
    - ) -} +
    +
    Rating
    + setRatingValue(e.value)} + /> +
    +
    +
    ColorPicker
    + setColorValue(e.value)} + style={{ width: '2rem' }} + /> +
    +
    +
    Knob
    + setKnobValue(e.value)} + step={10} + min={-50} + max={50} + /> +
    +
    +
    +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    RadioButton
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    + +
    Checkbox
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    Input Switch
    + setSwitchValue(e.value)} + /> +
    + +
    +
    Listbox
    + setListboxValue(e.value)} + options={listboxValues} + optionLabel="name" + filter + /> + +
    Dropdown
    + setDropdownValue(e.value)} + options={dropdownValues} + optionLabel="name" + placeholder="Select" + /> + +
    MultiSelect
    + setMultiselectValue(e.value)} + options={multiselectValues} + optionLabel="name" + placeholder="Select Countries" + filter + itemTemplate={itemTemplate} + selectedItemTemplate={selectedItemTemplate} + /> + +
    TreeSelect
    + setSelectedNode(e.value)} + options={treeSelectNodes} + placeholder="Select Item" + > +
    + +
    +
    ToggleButton
    + setToggleValue(e.value)} + onLabel="Yes" + offLabel="No" + /> + +
    SelectButton
    + setSelectButtonValue1(e.value)} + options={selectButtonValues1} + optionLabel="name" + /> + +
    SelectButton - Multiple
    + setSelectButtonValue2(e.value)} + options={selectButtonValues2} + optionLabel="name" + multiple + /> +
    +
    + +
    +
    +
    Input Groups
    +
    +
    +
    + + + + +
    +
    + +
    +
    + + + + + + + + $ + .00 +
    +
    + +
    +
    +
    +
    + +
    +
    + + setInputGroupValue(e.checked)} + binary + /> + + +
    +
    +
    +
    +
    +
    + ); }; -export default React.memo(InputDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(InputDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/InvalidStateDemo.js b/web-ui/web-react/src/templates/InvalidStateDemo.js index d11d3e75..378f839b 100644 --- a/web-ui/web-react/src/templates/InvalidStateDemo.js +++ b/web-ui/web-react/src/templates/InvalidStateDemo.js @@ -12,108 +12,170 @@ import { Password } from 'primereact/password'; import { CountryService } from '../service/CountryService'; const InvalidStateDemo = () => { - const [countries, setCountries] = useState([]); - const [filteredCountries, setFilteredCountries] = useState(null); - const [value1, setValue1] = useState(''); - const [value2, setValue2] = useState(''); - const [value3, setValue3] = useState(null); - const [value4, setValue4] = useState(''); - const [value5, setValue5] = useState(''); - const [value6, setValue6] = useState(''); - const [value7, setValue7] = useState(''); - const [value8, setValue8] = useState([]); - const [value9, setValue9] = useState(null); - const [value10, setValue10] = useState(''); + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState(null); + const [value1, setValue1] = useState(''); + const [value2, setValue2] = useState(''); + const [value3, setValue3] = useState(null); + const [value4, setValue4] = useState(''); + const [value5, setValue5] = useState(''); + const [value6, setValue6] = useState(''); + const [value7, setValue7] = useState(''); + const [value8, setValue8] = useState([]); + const [value9, setValue9] = useState(null); + const [value10, setValue10] = useState(''); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' }, - ]; + const cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - countryService.getCountries().then((countries) => { - setCountries(countries); - }); - }, []); + useEffect(() => { + const countryService = new CountryService(); + countryService.getCountries().then((countries) => { + setCountries(countries); + }); + }, []); - const searchCountry = (event) => { - // in a real application, make a request to a remote url with the query and - // return filtered results, for demo we filter at client side - const filtered = []; - const query = event.query; - for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { - filtered.push(country); - } - } - setFilteredCountries(filtered); - }; + const searchCountry = (event) => { + // in a real application, make a request to a remote url with the query and + // return filtered results, for demo we filter at client side + const filtered = []; + const query = event.query; + for (let i = 0; i < countries.length; i++) { + const country = countries[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { + filtered.push(country); + } + } + setFilteredCountries(filtered); + }; - return ( -
    -
    -
    -
    Invalid State
    -
    -
    -
    - - setValue1(e.target.value)} className="p-invalid" /> -
    -
    - - setValue5(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name" className="p-invalid"/> -
    -
    - - setValue6(e.value)} className="p-invalid" showIcon/> -
    -
    - - setValue8(e.value)} className="p-invalid"/> -
    -
    - - setValue10(e.target.value)} className="p-invalid" /> -
    -
    - -
    -
    - - setValue2(e.value)} className="p-invalid"/> -
    -
    - - setValue3(e.target.value)} className="p-invalid"/> -
    -
    - - setValue7(e.value)} optionLabel="name" className="p-invalid"/> -
    -
    - - setValue9(e.value)} optionLabel="name" className="p-invalid"/> -
    -
    - - setValue4(e.target.value)} className="p-invalid"/> -
    -
    -
    -
    + return ( +
    +
    +
    +
    Invalid State
    +
    +
    +
    + + setValue1(e.target.value)} + className="p-invalid" + /> +
    +
    + + setValue5(e.value)} + suggestions={filteredCountries} + completeMethod={searchCountry} + field="name" + className="p-invalid" + /> +
    +
    + + setValue6(e.value)} + className="p-invalid" + showIcon + /> +
    +
    + + setValue8(e.value)} + className="p-invalid" + /> +
    +
    + + setValue10(e.target.value)} + className="p-invalid" + /> +
    + +
    +
    + + setValue2(e.value)} + className="p-invalid" + /> +
    +
    + + setValue3(e.target.value)} + className="p-invalid" + /> +
    +
    + + setValue7(e.value)} + optionLabel="name" + className="p-invalid" + /> +
    +
    + + setValue9(e.value)} + optionLabel="name" + className="p-invalid" + /> +
    +
    + + setValue4(e.target.value)} + className="p-invalid" + /> +
    +
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(InvalidStateDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ListDemo.js b/web-ui/web-react/src/templates/ListDemo.js index 2d73aa5b..2ea17526 100644 --- a/web-ui/web-react/src/templates/ListDemo.js +++ b/web-ui/web-react/src/templates/ListDemo.js @@ -8,154 +8,219 @@ import { OrderList } from 'primereact/orderlist'; import { ProductService } from '../service/ProductService'; const ListDemo = () => { - const listValue = [ - { name: 'San Francisco', code: 'SF' }, - { name: 'London', code: 'LDN' }, - { name: 'Paris', code: 'PRS' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Berlin', code: 'BRL' }, - { name: 'Barcelona', code: 'BRC' }, - { name: 'Rome', code: 'RM' }, - ]; + const listValue = [ + { name: 'San Francisco', code: 'SF' }, + { name: 'London', code: 'LDN' }, + { name: 'Paris', code: 'PRS' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Berlin', code: 'BRL' }, + { name: 'Barcelona', code: 'BRC' }, + { name: 'Rome', code: 'RM' }, + ]; - const [picklistSourceValue, setPicklistSourceValue] = useState(listValue); - const [picklistTargetValue, setPicklistTargetValue] = useState([]); - const [orderlistValue, setOrderlistValue] = useState(listValue); - const [dataviewValue, setDataviewValue] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); + const [picklistSourceValue, setPicklistSourceValue] = useState(listValue); + const [picklistTargetValue, setPicklistTargetValue] = useState([]); + const [orderlistValue, setOrderlistValue] = useState(listValue); + const [dataviewValue, setDataviewValue] = useState(null); + const [layout, setLayout] = useState('grid'); + const [sortKey, setSortKey] = useState(null); + const [sortOrder, setSortOrder] = useState(null); + const [sortField, setSortField] = useState(null); - const sortOptions = [ - { label: 'Price High to Low', value: '!price' }, - { label: 'Price Low to High', value: 'price' } - ]; + const sortOptions = [ + { label: 'Price High to Low', value: '!price' }, + { label: 'Price Low to High', value: 'price' }, + ]; - useEffect(() => { - const productService = new ProductService(); - productService.getProducts().then(data => setDataviewValue(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProducts().then((data) => setDataviewValue(data)); + }, []); - const onSortChange = (event) => { - const value = event.value; + const onSortChange = (event) => { + const value = event.value; - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - }; + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } + }; - const dataviewHeader = ( -
    -
    - -
    -
    - setLayout(e.value)} /> -
    -
    - ); - - const dataviewListItem = (data) => { - return ( -
    -
    - {data.name} -
    -
    {data.name}
    -
    {data.description}
    - -
    - - {data.category} -
    -
    -
    - ${data.price} - - {data.inventoryStatus} -
    -
    -
    - ); - }; - - const dataviewGridItem = (data) => { - return ( -
    -
    -
    -
    - - {data.category} -
    - {data.inventoryStatus} -
    -
    - {data.name} -
    {data.name}
    -
    {data.description}
    - -
    -
    - ${data.price} -
    -
    -
    - ); - }; - - const itemTemplate = (data, layout) => { - if (!data) { - return; - } - - if (layout === 'list') { - return dataviewListItem(data); - } - else if (layout === 'grid') { - return dataviewGridItem(data); - } - }; + const dataviewHeader = ( +
    +
    + +
    +
    + setLayout(e.value)} + /> +
    +
    + ); + const dataviewListItem = (data) => { return ( -
    -
    -
    -
    DataView
    - -
    -
    - -
    -
    -
    PickList
    -
    {item.name}
    } - onChange={(e) => { setPicklistSourceValue(e.source); setPicklistTargetValue(e.target) }} sourceStyle={{ height: '200px' }} targetStyle={{ height: '200px' }}>     -
    -
    - -
    -
    -
    OrderList
    -
    {item.name}
    } - onChange={(e) => setOrderlistValue(e.value)}>     -
    +
    +
    + {data.name} +
    +
    {data.name}
    +
    {data.description}
    + +
    + + {data.category}
    +
    +
    + + ${data.price} + + + + {data.inventoryStatus} + +
    - ) -} +
    + ); + }; -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + const dataviewGridItem = (data) => { + return ( +
    +
    +
    +
    + + {data.category} +
    + + {data.inventoryStatus} + +
    +
    + {data.name} +
    {data.name}
    +
    {data.description}
    + +
    +
    + ${data.price} +
    +
    +
    + ); + }; + + const itemTemplate = (data, layout) => { + if (!data) { + return; + } + + if (layout === 'list') { + return dataviewListItem(data); + } else if (layout === 'grid') { + return dataviewGridItem(data); + } + }; + + return ( +
    +
    +
    +
    DataView
    + +
    +
    + +
    +
    +
    PickList
    +
    {item.name}
    } + onChange={(e) => { + setPicklistSourceValue(e.source); + setPicklistTargetValue(e.target); + }} + sourceStyle={{ height: '200px' }} + targetStyle={{ height: '200px' }} + >     +
    +
    + +
    +
    +
    OrderList
    +
    {item.name}
    } + onChange={(e) => setOrderlistValue(e.value)} + >     +
    +
    +
    + ); }; -export default React.memo(ListDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(ListDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MediaDemo.js b/web-ui/web-react/src/templates/MediaDemo.js index c9b74002..6231bdeb 100644 --- a/web-ui/web-react/src/templates/MediaDemo.js +++ b/web-ui/web-react/src/templates/MediaDemo.js @@ -2,115 +2,163 @@ import React, { useEffect, useState } from 'react'; import { Carousel } from 'primereact/carousel'; import { Galleria } from 'primereact/galleria'; import { Button } from 'primereact/button'; -import { Image } from "primereact/image"; +import { Image } from 'primereact/image'; import { ProductService } from '../service/ProductService'; import { PhotoService } from '../service/PhotoService'; const MediaDemo = () => { - const [products, setProducts] = useState([]); - const [images, setImages] = useState([]); - const galleriaResponsiveOptions = [ - { - breakpoint: "1024px", - numVisible: 5, - }, - { - breakpoint: "960px", - numVisible: 4, - }, - { - breakpoint: "768px", - numVisible: 3, - }, - { - breakpoint: "560px", - numVisible: 1, - }, - ]; - const carouselResponsiveOptions = [ - { - breakpoint: "1024px", - numVisible: 3, - numScroll: 3, - }, - { - breakpoint: "768px", - numVisible: 2, - numScroll: 2, - }, - { - breakpoint: "560px", - numVisible: 1, - numScroll: 1, - }, - ]; + const [products, setProducts] = useState([]); + const [images, setImages] = useState([]); + const galleriaResponsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5, + }, + { + breakpoint: '960px', + numVisible: 4, + }, + { + breakpoint: '768px', + numVisible: 3, + }, + { + breakpoint: '560px', + numVisible: 1, + }, + ]; + const carouselResponsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 3, + numScroll: 3, + }, + { + breakpoint: '768px', + numVisible: 2, + numScroll: 2, + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1, + }, + ]; - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then((products) => setProducts(products)); + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((products) => setProducts(products)); - const photoService = new PhotoService(); - photoService.getImages().then((images) => setImages(images)); - }, []); - - const carouselItemTemplate = (product) => { - return ( -
    -
    -
    - {product.name} -
    -
    -

    - {product.name} -

    -
    ${product.price}
    - {product.inventoryStatus} -
    - - - -
    -
    -
    -
    - ); - }; - - const galleriaItemTemplate = (item) => {item.alt} - const galleriaThumbnailTemplate = (item) => {item.alt} + const photoService = new PhotoService(); + photoService.getImages().then((images) => setImages(images)); + }, []); + const carouselItemTemplate = (product) => { return ( -
    -
    -
    -
    Carousel
    - -
    -
    - -
    -
    -
    Galleria
    - -
    -
    - -
    -
    -
    Image
    -
    - galleria -
    -
    +
    +
    +
    + {product.name} +
    +
    +

    {product.name}

    +
    ${product.price}
    + + {product.inventoryStatus} + +
    + + +
    +
    +
    ); -} + }; -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + const galleriaItemTemplate = (item) => ( + {item.alt} + ); + const galleriaThumbnailTemplate = (item) => ( + {item.alt} + ); + + return ( +
    +
    +
    +
    Carousel
    + +
    +
    + +
    +
    +
    Galleria
    + +
    +
    + +
    +
    +
    Image
    +
    + galleria +
    +
    +
    +
    + ); }; -export default React.memo(MediaDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MediaDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MenuDemo.js b/web-ui/web-react/src/templates/MenuDemo.js index 67552d8b..fe7c7667 100644 --- a/web-ui/web-react/src/templates/MenuDemo.js +++ b/web-ui/web-react/src/templates/MenuDemo.js @@ -17,575 +17,623 @@ import { PaymentDemo } from '../templates/menu/PaymentDemo'; import { SeatDemo } from '../templates/menu/SeatDemo'; const MenuDemo = () => { - const [activeIndex, setActiveIndex] = useState(0); + const [activeIndex, setActiveIndex] = useState(0); - const menu = useRef(null); - const contextMenu = useRef(null); - const history = useHistory(); - const location = useLocation(); + const menu = useRef(null); + const contextMenu = useRef(null); + const history = useHistory(); + const location = useLocation(); - const checkActiveIndex = useCallback(() => { - const paths = location.pathname.split('/'); - const currentPath = paths[paths.length - 1]; + const checkActiveIndex = useCallback(() => { + const paths = location.pathname.split('/'); + const currentPath = paths[paths.length - 1]; - switch (currentPath) { - case 'seat': - setActiveIndex(1); - break; - case 'payment': - setActiveIndex(2); - break; - case 'confirmation': - setActiveIndex(3); - break; - default: - break; - } - },[location]) + switch (currentPath) { + case 'seat': + setActiveIndex(1); + break; + case 'payment': + setActiveIndex(2); + break; + case 'confirmation': + setActiveIndex(3); + break; + default: + break; + } + }, [location]); - useEffect(() => { - checkActiveIndex(); - }, [checkActiveIndex]) + useEffect(() => { + checkActiveIndex(); + }, [checkActiveIndex]); - const nestedMenuitems = [ + const nestedMenuitems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ { - label: 'Customers', - icon: 'pi pi-fw pi-table', + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', + }, + { + label: 'Map', + icon: 'pi pi-fw pi-map-marker', + }, + { + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-sign-out', + }, + ]; + + const breadcrumbHome = { icon: 'pi pi-home', to: '/' }; + const breadcrumbItems = [ + { label: 'Computer' }, + { label: 'Notebook' }, + { label: 'Accessories' }, + { label: 'Backpacks' }, + { label: 'Item' }, + ]; + + const wizardItems = [ + { label: 'Personal', command: () => history.push('/menu') }, + { label: 'Seat', command: () => history.push('/menu/seat') }, + { label: 'Payment', command: () => history.push('/menu/payment') }, + { + label: 'Confirmation', + command: () => history.push('/menu/confirmation'), + }, + ]; + + const tieredMenuItems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', + }, + { + label: 'Map', + icon: 'pi pi-fw pi-map-marker', + }, + { + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + { + separator: true, + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-sign-out', + }, + ]; + + const overlayMenuItems = [ + { + label: 'Save', + icon: 'pi pi-save', + }, + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + separator: true, + }, + { + label: 'Home', + icon: 'pi pi-home', + }, + ]; + + const menuitems = [ + { + label: 'Customers', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + ]; + + const contextMenuItems = [ + { + label: 'Save', + icon: 'pi pi-save', + }, + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + separator: true, + }, + { + label: 'Options', + icon: 'pi pi-cog', + }, + ]; + + const megamenuItems = [ + { + label: 'Fashion', + icon: 'pi pi-fw pi-tag', + items: [ + [ + { + label: 'Woman', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - }, - - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', + { label: 'Woman Item' }, + { label: 'Woman Item' }, + { label: 'Woman Item' }, + ], + }, + { + label: 'Men', items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - }, - - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', + { label: 'Men Item' }, + { label: 'Men Item' }, + { label: 'Men Item' }, + ], + }, + ], + [ + { + label: 'Kids', + items: [{ label: 'Kids Item' }, { label: 'Kids Item' }], + }, + { + label: 'Luggage', items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', + { label: 'Luggage Item' }, + { label: 'Luggage Item' }, + { label: 'Luggage Item' }, + ], + }, + ], + ], + }, + { + label: 'Electronics', + icon: 'pi pi-fw pi-desktop', + items: [ + [ + { + label: 'Computer', + items: [{ label: 'Computer Item' }, { label: 'Computer Item' }], + }, + { + label: 'Camcorder', items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-sign-out' - } - ]; - - const breadcrumbHome = { icon: 'pi pi-home', to: '/' }; - const breadcrumbItems = [ - { label: 'Computer' }, - { label: 'Notebook' }, - { label: 'Accessories' }, - { label: 'Backpacks' }, - { label: 'Item' } - ]; - - const wizardItems = [ - { label: 'Personal', command: () => history.push('/menu') }, - { label: 'Seat', command: () => history.push('/menu/seat') }, - { label: 'Payment', command: () => history.push('/menu/payment') }, - { label: 'Confirmation', command: () => history.push('/menu/confirmation') } - ]; - - const tieredMenuItems = [ - { - label: 'Customers', - icon: 'pi pi-fw pi-table', + { label: 'Camcorder Item' }, + { label: 'Camcorder Item' }, + { label: 'Camcorder Item' }, + ], + }, + ], + [ + { + label: 'TV', + items: [{ label: 'TV Item' }, { label: 'TV Item' }], + }, + { + label: 'Audio', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', + { label: 'Audio Item' }, + { label: 'Audio Item' }, + { label: 'Audio Item' }, + ], + }, + ], + [ + { + label: 'Sports.7', + items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }], + }, + ], + ], + }, + { + label: 'Furniture', + icon: 'pi pi-fw pi-image', + items: [ + [ + { + label: 'Living Room', items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', + { label: 'Living Room Item' }, + { label: 'Living Room Item' }, + ], + }, + { + label: 'Kitchen', items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', + { label: 'Kitchen Item' }, + { label: 'Kitchen Item' }, + { label: 'Kitchen Item' }, + ], + }, + ], + [ + { + label: 'Bedroom', + items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }], + }, + { + label: 'Outdoor', items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-sign-out' - } - ]; - - const overlayMenuItems = [ - { - label: 'Save', - icon: 'pi pi-save' - }, - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - separator: true - }, - { - label: 'Home', - icon: 'pi pi-home' - } - ]; - - const menuitems = [ - { - label: 'Customers', + { label: 'Outdoor Item' }, + { label: 'Outdoor Item' }, + { label: 'Outdoor Item' }, + ], + }, + ], + ], + }, + { + label: 'Sports', + icon: 'pi pi-fw pi-star', + items: [ + [ + { + label: 'Basketball', + items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }], + }, + { + label: 'Football', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - } - ]; + { label: 'Football Item' }, + { label: 'Football Item' }, + { label: 'Football Item' }, + ], + }, + ], + [ + { + label: 'Tennis', + items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }], + }, + ], + ], + }, + ]; - const contextMenuItems = [ + const panelMenuitems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ { - label: 'Save', - icon: 'pi pi-save' + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], }, { - label: 'Update', - icon: 'pi pi-refresh' + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', }, { - label: 'Delete', - icon: 'pi pi-trash' + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', }, { - separator: true + label: 'Map', + icon: 'pi pi-fw pi-map-marker', }, { - label: 'Options', - icon: 'pi pi-cog' - } - ]; + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + ]; - const megamenuItems = [ - { - label: 'Fashion', icon: 'pi pi-fw pi-tag', - items: [ - [ - { - label: 'Woman', - items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }] - }, - { - label: 'Men', - items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }] - } - ], - [ - { - label: 'Kids', - items: [{ label: 'Kids Item' }, { label: 'Kids Item' }] - }, - { - label: 'Luggage', - items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }] - } - ] - ] - }, - { - label: 'Electronics', icon: 'pi pi-fw pi-desktop', - items: [ - [ - { - label: 'Computer', - items: [{ label: 'Computer Item' }, { label: 'Computer Item' }] - }, - { - label: 'Camcorder', - items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' },] - }, - ], - [ - { - label: 'TV', - items: [{ label: 'TV Item' }, { label: 'TV Item' }] - }, - { - label: 'Audio', - items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }] - } - ], - [ - { - label: 'Sports.7', - items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }] - } - ] - ] - }, - { - label: 'Furniture', icon: 'pi pi-fw pi-image', - items: [ - [ - { - label: 'Living Room', - items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' },] - }, - { - label: 'Kitchen', - items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }] - } - ], - [ - { - label: 'Bedroom', - items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }] - }, - { - label: 'Outdoor', - items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }] - } - ] - ] - }, - { - label: 'Sports', icon: 'pi pi-fw pi-star', - items: [ - [ - { - label: 'Basketball', - items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }] - }, - { - label: 'Football', - items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }] - } - ], - [ - { - label: 'Tennis', - items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }] - } - ] - ] - } - ]; + const toggleMenu = (event) => { + menu.current.toggle(event); + }; - const panelMenuitems = [ - { - label: 'Customers', - icon: 'pi pi-fw pi-table', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - }, - - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', - items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', - items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - } - ]; - - const toggleMenu = (event) => { - menu.current.toggle(event); - }; - - const onContextRightClick = (event) => { - contextMenu.current.show(event); - }; - - const menubarEndTemplate = () => { - return ( - - - - - ); - }; + const onContextRightClick = (event) => { + contextMenu.current.show(event); + }; + const menubarEndTemplate = () => { return ( -
    -
    -
    -
    Menubar
    - -
    -
    + + + + + ); + }; -
    -
    -
    Breadcrumb
    - -
    -
    - -
    -
    -
    Steps
    - setActiveIndex(e.index)} readOnly={false} /> - - - - -
    -
    - -
    -
    -
    TabMenu
    - setActiveIndex(e.index)} /> - - - - -
    -
    - -
    -
    -
    Tiered Menu
    - -
    -
    - -
    -
    -
    Plain Menu
    - -
    -
    - -
    -
    -
    Overlay Menu
    - - -
    - -
    -
    ContextMenu
    - Right click to display. - -
    -
    - -
    -
    -
    MegaMenu - Horizontal
    - - -
    MegaMenu - Vertical
    - -
    -
    - -
    -
    -
    PanelMenu
    - -
    -
    + return ( +
    +
    +
    +
    Menubar
    +
    - ) -} +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    Breadcrumb
    + +
    +
    + +
    +
    +
    Steps
    + setActiveIndex(e.index)} + readOnly={false} + /> + + + + +
    +
    + +
    +
    +
    TabMenu
    + setActiveIndex(e.index)} + /> + + + + +
    +
    + +
    +
    +
    Tiered Menu
    + +
    +
    + +
    +
    +
    Plain Menu
    + +
    +
    + +
    +
    +
    Overlay Menu
    + + +
    + +
    +
    ContextMenu
    + Right click to display. + +
    +
    + +
    +
    +
    MegaMenu - Horizontal
    + + +
    MegaMenu - Vertical
    + +
    +
    + +
    +
    +
    PanelMenu
    + +
    +
    +
    + ); }; -export default React.memo(MenuDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MenuDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MessagesDemo.js b/web-ui/web-react/src/templates/MessagesDemo.js index c373c20a..04c80672 100644 --- a/web-ui/web-react/src/templates/MessagesDemo.js +++ b/web-ui/web-react/src/templates/MessagesDemo.js @@ -6,105 +6,188 @@ import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; const MessagesDemo = () => { - const [username, setUsername] = useState(''); - const [email, setEmail] = useState(''); - const toast = useRef(); - const message = useRef(); + const [username, setUsername] = useState(''); + const [email, setEmail] = useState(''); + const toast = useRef(); + const message = useRef(); - const addSuccessMessage = () => { - message.current.show({ severity: 'success', content: 'Message Detail' }); - }; + const addSuccessMessage = () => { + message.current.show({ severity: 'success', content: 'Message Detail' }); + }; - const addInfoMessage = () => { - message.current.show({ severity: 'info', content: 'Message Detail' }); - }; + const addInfoMessage = () => { + message.current.show({ severity: 'info', content: 'Message Detail' }); + }; - const addWarnMessage = () => { - message.current.show({ severity: 'warn', content: 'Message Detail' }); - }; + const addWarnMessage = () => { + message.current.show({ severity: 'warn', content: 'Message Detail' }); + }; - const addErrorMessage = () => { - message.current.show({ severity: 'error', content: 'Message Detail' }); - }; + const addErrorMessage = () => { + message.current.show({ severity: 'error', content: 'Message Detail' }); + }; - const showSuccess = () => { - toast.current.show({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 }); - }; + const showSuccess = () => { + toast.current.show({ + severity: 'success', + summary: 'Success Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showInfo = () => { - toast.current.show({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 }); - }; + const showInfo = () => { + toast.current.show({ + severity: 'info', + summary: 'Info Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showWarn = () => { - toast.current.show({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 }); - }; + const showWarn = () => { + toast.current.show({ + severity: 'warn', + summary: 'Warn Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showError = () => { - toast.current.show({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 }); - }; + const showError = () => { + toast.current.show({ + severity: 'error', + summary: 'Error Message', + detail: 'Message Detail', + life: 3000, + }); + }; - return ( -
    -
    -
    -
    Toast
    + return ( +
    +
    +
    +
    Toast
    - -
    -
    - -
    -
    -
    Messages
    - -
    -
    - -
    -
    -
    Inline
    -
    - -
    - setUsername(e.target.value)} required className="p-invalid mr-2"/> - -
    -
    -
    - -
    - setEmail(e.target.value)} required className="p-invalid mr-2"/> - -
    -
    -
    -
    - -
    -
    -
    Help Text
    -
    - - - Enter your username to reset your password. -
    -
    -
    + +
    - ); -} +
    + +
    +
    +
    Messages
    + +
    +
    + +
    +
    +
    Inline
    +
    + +
    + setUsername(e.target.value)} + required + className="p-invalid mr-2" + /> + +
    +
    +
    + +
    + setEmail(e.target.value)} + required + className="p-invalid mr-2" + /> + +
    +
    +
    +
    + +
    +
    +
    Help Text
    +
    + + + + Enter your username to reset your password. + +
    +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(MessagesDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MiscDemo.js b/web-ui/web-react/src/templates/MiscDemo.js index b47318ab..04665ad0 100644 --- a/web-ui/web-react/src/templates/MiscDemo.js +++ b/web-ui/web-react/src/templates/MiscDemo.js @@ -11,195 +11,341 @@ import { ScrollPanel } from 'primereact/scrollpanel'; import { ScrollTop } from 'primereact/scrolltop'; const MiscDemo = () => { - const [value, setValue] = useState(0); - const interval = useRef(null); + const [value, setValue] = useState(0); + const interval = useRef(null); - useEffect(() => { - let val = value; - interval.current = setInterval(() => { - val += Math.floor(Math.random() * 10) + 1; + useEffect(() => { + let val = value; + interval.current = setInterval(() => { + val += Math.floor(Math.random() * 10) + 1; - if (val >= 100) { - val = 100; - clearInterval(interval.current); - } - setValue(val); - }, 2000); + if (val >= 100) { + val = 100; + clearInterval(interval.current); + } + setValue(val); + }, 2000); - return () => { - if (interval.current) { - clearInterval(interval.current); - interval.current = null; - } - } - }, [value]); + return () => { + if (interval.current) { + clearInterval(interval.current); + interval.current = null; + } + }; + }, [value]); - return ( -
    -
    -
    -
    ProgressBar
    -
    -
    - -
    -
    - -
    -
    -
    + return ( +
    +
    +
    +
    ProgressBar
    +
    +
    +
    -
    -
    -

    Badge

    -
    Numbers
    - - - - - - -
    Positioned Badge
    - - - - -
    Button Badge
    - - - -
    Sizes
    - - - -
    - -
    -

    Avatar

    -
    Avatar Group
    - - - - - - - - - -
    Label - Circle
    - - - - -
    Icon - Badge
    - -
    - -
    -

    ScrollTop

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Vitae et leo duis ut diam. - Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. - Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. - Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. - Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. - Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. - Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. - Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. - Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. - Mattis aliquam faucibus purus in massa tempor nec. -

    - -     -
    -
    -
    -
    -

    Tag

    -
    Tags
    - - - - - - -
    Pills
    - - - - - - -
    Icons
    - - - - - -
    - -
    -

    Chip

    -
    Basic
    -
    - - - - -
    - -
    Icon
    -
    - - - - -
    - -
    Image
    -
    - - - - -
    - -
    Styling
    -
    - - - - -
    -
    - -
    -

    Skeleton

    -
    -
    - -
    - - - -
    -
    - -
    - - -
    -
    -
    +
    +
    +
    - ) -} +
    +
    +
    +

    Badge

    +
    Numbers
    + + + + + -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    Positioned Badge
    + + + + + + + + + + +
    Button Badge
    + + + +
    Sizes
    + + + +
    + +
    +

    Avatar

    +
    Avatar Group
    + + + + + + + + + +
    Label - Circle
    + + + + +
    Icon - Badge
    + + + +
    + +
    +

    ScrollTop

    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae + et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget + est lorem. Amet consectetur adipiscing elit ut. Nam libero justo + laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit + dolor magna. Est ultricies integer quis auctor elit sed vulputate. + Consequat ac felis donec et. Tellus orci ac auctor augue mauris. + Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. + Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend + mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut + etiam sit amet nisl purus. Cursus sit amet dictum sit amet. + Tristique senectus et netus et malesuada fames ac turpis egestas. + Et tortor consequat id porta nibh venenatis cras sed. Diam + maecenas ultricies mi eget mauris. Eget egestas purus viverra + accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies + integer. Mattis aliquam faucibus purus in massa tempor nec. +

    + +     +
    +
    +
    +
    +

    Tag

    +
    Tags
    + + + + + + +
    Pills
    + + + + + + +
    Icons
    + + + + + +
    + +
    +

    Chip

    +
    Basic
    +
    + + + + +
    + +
    Icon
    +
    + + + + +
    + +
    Image
    +
    + + + + +
    + +
    Styling
    +
    + + + + +
    +
    + +
    +

    Skeleton

    +
    +
    + +
    + + + +
    +
    + +
    + + +
    +
    +
    +
    +
    + ); }; -export default React.memo(MiscDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MiscDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/OverlayDemo.js b/web-ui/web-react/src/templates/OverlayDemo.js index e5f1cb95..51fddc97 100644 --- a/web-ui/web-react/src/templates/OverlayDemo.js +++ b/web-ui/web-react/src/templates/OverlayDemo.js @@ -11,184 +11,368 @@ import { confirmPopup } from 'primereact/confirmpopup'; import { ProductService } from '../service/ProductService'; const OverlayDemo = () => { - const [displayBasic, setDisplayBasic] = useState(false); - const [displayConfirmation, setDisplayConfirmation] = useState(false); - const [visibleLeft, setVisibleLeft] = useState(false); - const [visibleRight, setVisibleRight] = useState(false); - const [visibleTop, setVisibleTop] = useState(false); - const [visibleBottom, setVisibleBottom] = useState(false); - const [visibleFullScreen, setVisibleFullScreen] = useState(false); - const [products, setProducts] = useState(null); - const [selectedProduct, setSelectedProduct] = useState(null); - const op = useRef(null); - const op2 = useRef(null); - const toast = useRef(null); + const [displayBasic, setDisplayBasic] = useState(false); + const [displayConfirmation, setDisplayConfirmation] = useState(false); + const [visibleLeft, setVisibleLeft] = useState(false); + const [visibleRight, setVisibleRight] = useState(false); + const [visibleTop, setVisibleTop] = useState(false); + const [visibleBottom, setVisibleBottom] = useState(false); + const [visibleFullScreen, setVisibleFullScreen] = useState(false); + const [products, setProducts] = useState(null); + const [selectedProduct, setSelectedProduct] = useState(null); + const op = useRef(null); + const op2 = useRef(null); + const toast = useRef(null); - const accept = () => { - toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); - }; + const accept = () => { + toast.current.show({ + severity: 'info', + summary: 'Confirmed', + detail: 'You have accepted', + life: 3000, + }); + }; - const reject = () => { - toast.current.show({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); - }; + const reject = () => { + toast.current.show({ + severity: 'error', + summary: 'Rejected', + detail: 'You have rejected', + life: 3000, + }); + }; - const confirm = (event) => { - confirmPopup({ - target: event.currentTarget, - message: 'Are you sure you want to proceed?', - icon: 'pi pi-exclamation-triangle', - accept, - reject - }); - }; + const confirm = (event) => { + confirmPopup({ + target: event.currentTarget, + message: 'Are you sure you want to proceed?', + icon: 'pi pi-exclamation-triangle', + accept, + reject, + }); + }; - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then(data => setProducts(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((data) => setProducts(data)); + }, []); - const toggle = (event) => { - op.current.toggle(event); - }; + const toggle = (event) => { + op.current.toggle(event); + }; - const toggleDataTable = (event) => { - op2.current.toggle(event); - }; + const toggleDataTable = (event) => { + op2.current.toggle(event); + }; - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); - }; + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; - const onProductSelect = (event) => { - op2.current.hide(); - toast.current.show({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 }); - }; + const onProductSelect = (event) => { + op2.current.hide(); + toast.current.show({ + severity: 'info', + summary: 'Product Selected', + detail: event.data.name, + life: 3000, + }); + }; - const basicDialogFooter =
    -
    -
    -
    -
    Overlay Panel
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Confirmation
    -
    -
    -
    Sidebar
    - setVisibleLeft(false)} baseZIndex={1000}> -

    Left Sidebar

    -     - - setVisibleRight(false)} baseZIndex={1000} position="right"> -

    Right Sidebar

    -     - - setVisibleTop(false)} baseZIndex={1000} position="top"> -

    Top Sidebar

    -     - - setVisibleBottom(false)} baseZIndex={1000} position="bottom"> -

    Bottom Sidebar

    -     - - setVisibleFullScreen(false)} baseZIndex={1000} fullScreen> -

    Full Screen

    -     - -
    -
    - -
    -
    -
    Tooltip
    -
    -
    - -
    - -
    -
    -
    -
    - - -
    -
    ConfirmPopup
    - -
    -
    +
    +
    +
    +
    +
    Overlay Panel
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Confirmation
    +
    +
    +
    Sidebar
    + setVisibleLeft(false)} + baseZIndex={1000} + > +

    Left Sidebar

    +     - - ) -} + setVisibleRight(false)} + baseZIndex={1000} + position="right" + > +

    Right Sidebar

    +     -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + setVisibleTop(false)} + baseZIndex={1000} + position="top" + > +

    Top Sidebar

    +     + + setVisibleBottom(false)} + baseZIndex={1000} + position="bottom" + > +

    Bottom Sidebar

    +     + + setVisibleFullScreen(false)} + baseZIndex={1000} + fullScreen + > +

    Full Screen

    +     + +
    +
    + +
    +
    +
    Tooltip
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    ConfirmPopup
    + +
    +
    +
    + + ); }; -export default React.memo(OverlayDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(OverlayDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/PanelDemo.js b/web-ui/web-react/src/templates/PanelDemo.js index 7590e4b6..f754b824 100644 --- a/web-ui/web-react/src/templates/PanelDemo.js +++ b/web-ui/web-react/src/templates/PanelDemo.js @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, { useRef } from 'react'; import { Toolbar } from 'primereact/toolbar'; import { Button } from 'primereact/button'; import { SplitButton } from 'primereact/splitbutton'; @@ -11,242 +11,347 @@ import { Divider } from 'primereact/divider'; import { InputText } from 'primereact/inputtext'; import { Splitter, SplitterPanel } from 'primereact/splitter'; import { Password } from 'primereact/password'; -import {Menu} from "primereact/menu"; +import { Menu } from 'primereact/menu'; const PanelDemo = () => { - const menu1 = useRef(null); - const toolbarItems = [ - { - label: 'Save', - icon: 'pi pi-check' - }, - { - label: 'Update', - icon: 'pi pi-upload' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - label: 'Home Page', - icon: 'pi pi-home' - }, - ]; - - const toolbarLeftTemplate = () => { - return ( - <> -
    - ); + const menu1 = useRef(null); + const toolbarItems = [ + { + label: 'Save', + icon: 'pi pi-check', + }, + { + label: 'Update', + icon: 'pi pi-upload', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + label: 'Home Page', + icon: 'pi pi-home', + }, + ]; + const toolbarLeftTemplate = () => { return ( -
    -
    -
    -
    Toolbar
    - -
    -
    -
    -
    -
    AccordionPanel
    - - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     - -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque - ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. - Consectetur, adipisci velit, sed quia non numquam eius modi.

    -     - -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. - Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit - quo minus.

    -     -     -
    -
    -
    TabView
    - - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

     - -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque - ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. - Consectetur, adipisci velit, sed quia non numquam eius modi.

    -     - -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. - Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit - quo minus.

    -     -     -
    -
    -
    -
    -
    Panel
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     -
    -
    -
    Fieldset
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     -
    + <> + -
    -
    -
    - - OR - -
    -
    -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

    + - - Badge - +
    + ); -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum - deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati - cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est - laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

    - - - - - -

    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et - voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur - a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis - doloribus asperiores repellat. - Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. - Morbi dapibus luctus odio.

    -
    -
    -
    -
    - -
    -
    -
    Splitter
    - - -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim - id est laborum. -
    -     - - - -
    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium - doloremque - laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas - sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius - modi. -
    -     - -
    - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias - excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem - rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est - eligendi optio cumque nihil impedit quo minus. -
    -     -     -     -     -
    -
    + return ( +
    +
    +
    +
    Toolbar
    +
    - ) -} +
    +
    +
    +
    AccordionPanel
    + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     + +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    +     + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    +     +     +
    +
    +
    TabView
    + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     + +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    +     + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    +     +     +
    +
    +
    +
    +
    Panel
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     +
    +
    +
    Fieldset
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +     +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    Divider
    +
    +
    +
    +
    + + + + +
    +
    + + + + +
    + +
    +
    +
    + + OR + +
    +
    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    + + + Badge + + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    + + + + + +

    + Temporibus autem quibusdam et aut officiis debitis aut rerum + necessitatibus saepe eveniet ut et voluptates repudiandae sint + et molestiae non recusandae. Itaque earum rerum hic tenetur a + sapiente delectus, ut aut reiciendis voluptatibus maiores alias + consequatur aut perferendis doloribus asperiores repellat. Donec + vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt + eget, egestas vitae sapien. Morbi dapibus luctus odio. +

    +
    +
    +
    +
    + +
    +
    +
    Splitter
    + + +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +     + + + +
    + Sed ut perspiciatis unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et + quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit + aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Consectetur, adipisci + velit, sed quia non numquam eius modi. +
    +     + +
    + At vero eos et accusamus et iusto odio dignissimos ducimus + qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint + occaecati cupiditate non provident, similique sunt in culpa + qui officia deserunt mollitia animi, id est laborum et + dolorum fuga. Et harum quidem rerum facilis est et expedita + distinctio. Nam libero tempore, cum soluta nobis est + eligendi optio cumque nihil impedit quo minus. +
    +     +     +     +     +
    +
    +
    + ); }; -export default React.memo(PanelDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(PanelDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/TableDemo.js b/web-ui/web-react/src/templates/TableDemo.js index 2bebc1ea..51c17544 100644 --- a/web-ui/web-react/src/templates/TableDemo.js +++ b/web-ui/web-react/src/templates/TableDemo.js @@ -17,359 +17,740 @@ import { CustomerService } from '../service/CustomerService'; import { ProductService } from '../service/ProductService'; const TableDemo = () => { - const [customers1, setCustomers1] = useState(null); - const [customers2, setCustomers2] = useState([]); - const [customers3, setCustomers3] = useState([]); - const [filters1, setFilters1] = useState(null); - const [loading1, setLoading1] = useState(true); - const [loading2, setLoading2] = useState(true); - const [idFrozen, setIdFrozen] = useState(false); - const [products, setProducts] = useState([]); - const [expandedRows, setExpandedRows] = useState(null); + const [customers1, setCustomers1] = useState(null); + const [customers2, setCustomers2] = useState([]); + const [customers3, setCustomers3] = useState([]); + const [filters1, setFilters1] = useState(null); + const [loading1, setLoading1] = useState(true); + const [loading2, setLoading2] = useState(true); + const [idFrozen, setIdFrozen] = useState(false); + const [products, setProducts] = useState([]); + const [expandedRows, setExpandedRows] = useState(null); - const representatives = [ - { name: "Amy Elsner", image: 'amyelsner.png' }, - { name: "Anna Fali", image: 'annafali.png' }, - { name: "Asiya Javayant", image: 'asiyajavayant.png' }, - { name: "Bernardo Dominic", image: 'bernardodominic.png' }, - { name: "Elwin Sharvill", image: 'elwinsharvill.png' }, - { name: "Ioni Bowcher", image: 'ionibowcher.png' }, - { name: "Ivan Magalhaes", image: 'ivanmagalhaes.png' }, - { name: "Onyama Limba", image: 'onyamalimba.png' }, - { name: "Stephen Shaw", image: 'stephenshaw.png' }, - { name: "XuXue Feng", image: 'xuxuefeng.png' } - ]; + const representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'XuXue Feng', image: 'xuxuefeng.png' }, + ]; - const statuses = [ - 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal' - ]; + const statuses = [ + 'unqualified', + 'qualified', + 'new', + 'negotiation', + 'renewal', + 'proposal', + ]; - const customerService = new CustomerService(); - const productService = new ProductService(); + const customerService = new CustomerService(); + const productService = new ProductService(); - useEffect(() => { - setLoading2(true); + useEffect(() => { + setLoading2(true); - customerService.getCustomersLarge().then(data => { setCustomers1(getCustomers(data)); setLoading1(false) }); - customerService.getCustomersLarge().then(data => { setCustomers2(getCustomers(data)); setLoading2(false); }); - customerService.getCustomersMedium().then(data => setCustomers3(data)); - productService.getProductsWithOrdersSmall().then(data => setProducts(data)); + customerService.getCustomersLarge().then((data) => { + setCustomers1(getCustomers(data)); + setLoading1(false); + }); + customerService.getCustomersLarge().then((data) => { + setCustomers2(getCustomers(data)); + setLoading2(false); + }); + customerService.getCustomersMedium().then((data) => setCustomers3(data)); + productService + .getProductsWithOrdersSmall() + .then((data) => setProducts(data)); - initFilters1(); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + initFilters1(); + }, []); // eslint-disable-line react-hooks/exhaustive-deps - const balanceTemplate = (rowData) => { - return ( - - {formatCurrency(rowData.balance)} - - ) - } + const balanceTemplate = (rowData) => { + return {formatCurrency(rowData.balance)}; + }; - const getCustomers = (data) => { - return [...data || []].map(d => { - d.date = new Date(d.date); - return d; - }); - } + const getCustomers = (data) => { + return [...(data || [])].map((d) => { + d.date = new Date(d.date); + return d; + }); + }; - const formatDate = (value) => { - return value.toLocaleDateString('en-US', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }); - } + const formatDate = (value) => { + return value.toLocaleDateString('en-US', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }); + }; - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); - } + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; - const initFilters1 = () => { - setFilters1({ - 'global': { value: null, matchMode: FilterMatchMode.CONTAINS }, - 'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }, - 'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }, - 'representative': { value: null, matchMode: FilterMatchMode.IN }, - 'date': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }, - 'balance': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, - 'status': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, - 'activity': { value: null, matchMode: FilterMatchMode.BETWEEN }, - 'verified': { value: null, matchMode: FilterMatchMode.EQUALS } - }); - } - - - const countryBodyTemplate = (rowData) => { - return ( - - flag - {rowData.country.name} - - ); - } - - const filterClearTemplate = (options) => { - return ; - } - - const filterApplyTemplate = (options) => { - return - } - - const representativeBodyTemplate = (rowData) => { - const representative = rowData.representative; - return ( - - {representative.name} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} /> - {representative.name} - - ); - } - - const representativeFilterTemplate = (options) => { - return (<> -
    Agent Picker
    - options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" /> - - ) - } - - const representativesItemTemplate = (option) => { - return ( -
    - {option.name} - {option.name} -
    - ); - } - - const dateBodyTemplate = (rowData) => { - return formatDate(rowData.date); - } - - const dateFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> - } - - const balanceBodyTemplate = (rowData) => { - return formatCurrency(rowData.balance); - } - - const balanceFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" /> - } - - const statusBodyTemplate = (rowData) => { - return {rowData.status}; - } - - const statusFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />; - } - - const statusItemTemplate = (option) => { - return {option}; - } - - const activityBodyTemplate = (rowData) => { - return ; - } - - const activityFilterTemplate = (options) => { - return ( - - options.filterCallback(e.value)} range className="m-3"> -
    - {options.value ? options.value[0] : 0} - {options.value ? options.value[1] : 100} -
    -     - ) - } - - const verifiedBodyTemplate = (rowData) => { - return ; - } - - const verifiedFilterTemplate = (options) => { - return options.filterCallback(e.value)} /> - } - - const expandAll = () => { - let _expandedRows = {}; - products.forEach(p => _expandedRows[`${p.id}`] = true); - - setExpandedRows(_expandedRows); - } - - const collapseAll = () => { - setExpandedRows(null); - } - - const amountBodyTemplate = (rowData) => { - return formatCurrency(rowData.amount); - } - - const statusOrderBodyTemplate = (rowData) => { - return {rowData.status}; - } - - const searchBodyTemplate = () => { - return
    - ); - - const headerTemplate = (data) => { - return ( - - {data.representative.name} - {data.representative.name} - - ); - } - - const footerTemplate = (data) => { - return ( - - Total Customers - {calculateCustomerTotal(data.representative.name)} - - ); - } - - const calculateCustomerTotal = (name) => { - let total = 0; - - if (customers3) { - for (let customer of customers3) { - if (customer.representative.name === name) { - total++; - } - } - } - - return total; - } + const initFilters1 = () => { + setFilters1({ + global: { value: null, matchMode: FilterMatchMode.CONTAINS }, + name: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }], + }, + 'country.name': { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }], + }, + representative: { value: null, matchMode: FilterMatchMode.IN }, + date: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }], + }, + balance: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }], + }, + status: { + operator: FilterOperator.OR, + constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }], + }, + activity: { value: null, matchMode: FilterMatchMode.BETWEEN }, + verified: { value: null, matchMode: FilterMatchMode.EQUALS }, + }); + }; + const countryBodyTemplate = (rowData) => { return ( -
    -
    -
    -
    Filter Menu
    - - - - - - - - - - -
    -
    - -
    -
    - -
    Frozen Columns
    - setIdFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style={{ width: '10rem' }} /> - - - - - - - - - - - - - -
    -
    - -
    -
    -
    Row Expand
    - setExpandedRows(e.data)} responsiveLayout="scroll" - rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}> - - - - - - - - -
    -
    - -
    -
    -
    Subheader Grouping
    - - - - - - - -
    -
    -
    + + flag + + {rowData.country.name} + + ); -} + }; + + const filterClearTemplate = (options) => { + return ( + + ); + }; + + const filterApplyTemplate = (options) => { + return ( + + ); + }; + + const representativeBodyTemplate = (rowData) => { + const representative = rowData.representative; + return ( + + {representative.name} + (e.target.src = + 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png') + } + width={32} + style={{ verticalAlign: 'middle' }} + /> + + {representative.name} + + + ); + }; + + const representativeFilterTemplate = (options) => { + return ( + <> +
    Agent Picker
    + options.filterCallback(e.value)} + optionLabel="name" + placeholder="Any" + className="p-column-filter" + /> + + ); + }; + + const representativesItemTemplate = (option) => { + return ( +
    + {option.name} + + {option.name} + +
    + ); + }; + + const dateBodyTemplate = (rowData) => { + return formatDate(rowData.date); + }; + + const dateFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + dateFormat="mm/dd/yy" + placeholder="mm/dd/yyyy" + mask="99/99/9999" + /> + ); + }; + + const balanceBodyTemplate = (rowData) => { + return formatCurrency(rowData.balance); + }; + + const balanceFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + mode="currency" + currency="USD" + locale="en-US" + /> + ); + }; + + const statusBodyTemplate = (rowData) => { + return ( + + {rowData.status} + + ); + }; + + const statusFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + itemTemplate={statusItemTemplate} + placeholder="Select a Status" + className="p-column-filter" + showClear + /> + ); + }; + + const statusItemTemplate = (option) => { + return {option}; + }; + + const activityBodyTemplate = (rowData) => { + return ( + + ); + }; + + const activityFilterTemplate = (options) => { + return ( + + options.filterCallback(e.value)} + range + className="m-3" + > +
    + {options.value ? options.value[0] : 0} + {options.value ? options.value[1] : 100} +
    +     + ); + }; + + const verifiedBodyTemplate = (rowData) => { + return ( + + ); + }; + + const verifiedFilterTemplate = (options) => { + return ( + options.filterCallback(e.value)} + /> + ); + }; + + const expandAll = () => { + let _expandedRows = {}; + products.forEach((p) => (_expandedRows[`${p.id}`] = true)); + + setExpandedRows(_expandedRows); + }; + + const collapseAll = () => { + setExpandedRows(null); + }; + + const amountBodyTemplate = (rowData) => { + return formatCurrency(rowData.amount); + }; + + const statusOrderBodyTemplate = (rowData) => { + return ( + + {rowData.status} + + ); + }; + + const searchBodyTemplate = () => { + return
    + ); + + const headerTemplate = (data) => { + return ( + + {data.representative.name} + {data.representative.name} + + ); + }; + + const footerTemplate = (data) => { + return ( + + + Total Customers + + {calculateCustomerTotal(data.representative.name)} + + ); + }; + + const calculateCustomerTotal = (name) => { + let total = 0; + + if (customers3) { + for (let customer of customers3) { + if (customer.representative.name === name) { + total++; + } + } + } + + return total; + }; + + return ( +
    +
    +
    +
    Filter Menu
    + + + + + + + + + + +
    +
    + +
    +
    +
    Frozen Columns
    + setIdFrozen(e.value)} + onIcon="pi pi-lock" + offIcon="pi pi-lock-open" + onLabel="Unfreeze Id" + offLabel="Freeze Id" + style={{ width: '10rem' }} + /> + + + + + + + + + + + + + +
    +
    + +
    +
    +
    Row Expand
    + setExpandedRows(e.data)} + responsiveLayout="scroll" + rowExpansionTemplate={rowExpansionTemplate} + dataKey="id" + header={header} + > + + + + + + + + +
    +
    + +
    +
    +
    Subheader Grouping
    + + + + + + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(TableDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/TreeDemo.js b/web-ui/web-react/src/templates/TreeDemo.js index 90e7efdb..82f22823 100644 --- a/web-ui/web-react/src/templates/TreeDemo.js +++ b/web-ui/web-react/src/templates/TreeDemo.js @@ -5,41 +5,54 @@ import { Column } from 'primereact/column'; import { NodeService } from '../service/NodeService'; const TreeDemo = () => { - const [treeNodes, setTreeNodes] = useState([]); - const [selectedTreeNodeKeys, setSelectedTreeNodeKeys] = useState(null); - const [treeTableNodes, setTreeTableNodes] = useState([]); - const [selectedTreeTableNodeKeys, setSelectedTreeTableNodeKeys] = useState([]); + const [treeNodes, setTreeNodes] = useState([]); + const [selectedTreeNodeKeys, setSelectedTreeNodeKeys] = useState(null); + const [treeTableNodes, setTreeTableNodes] = useState([]); + const [selectedTreeTableNodeKeys, setSelectedTreeTableNodeKeys] = useState( + [], + ); - useEffect(() => { - const nodeService = new NodeService(); - nodeService.getTreeNodes().then(data => setTreeNodes(data)); - nodeService.getTreeTableNodes().then(data => setTreeTableNodes(data)); - }, []); + useEffect(() => { + const nodeService = new NodeService(); + nodeService.getTreeNodes().then((data) => setTreeNodes(data)); + nodeService.getTreeTableNodes().then((data) => setTreeTableNodes(data)); + }, []); - return ( -
    -
    -
    -
    Tree
    - setSelectedTreeNodeKeys(e.value)}/> -
    -
    -
    -
    -
    TreeTable
    - setSelectedTreeTableNodeKeys(e.value)}> - - - - -
    -
    + return ( +
    +
    +
    +
    Tree
    + setSelectedTreeNodeKeys(e.value)} + />
    - ) -} +
    +
    +
    +
    TreeTable
    + setSelectedTreeTableNodeKeys(e.value)} + > + + + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(TreeDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/menu/ConfirmationDemo.js b/web-ui/web-react/src/templates/menu/ConfirmationDemo.js index 14556bd3..d5a6dca5 100644 --- a/web-ui/web-react/src/templates/menu/ConfirmationDemo.js +++ b/web-ui/web-react/src/templates/menu/ConfirmationDemo.js @@ -1,10 +1,12 @@ import React from 'react'; export const ConfirmationDemo = () => { - return ( -
    - -

    Confirmation Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    + Confirmation Component Content via Child Route +

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/PaymentDemo.js b/web-ui/web-react/src/templates/menu/PaymentDemo.js index 8a37e836..4afd4bf8 100644 --- a/web-ui/web-react/src/templates/menu/PaymentDemo.js +++ b/web-ui/web-react/src/templates/menu/PaymentDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const PaymentDemo = () => { - return ( -
    - -

    Payment Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Payment Component Content via Child Route

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/PersonalDemo.js b/web-ui/web-react/src/templates/menu/PersonalDemo.js index e9aad639..964df2f5 100644 --- a/web-ui/web-react/src/templates/menu/PersonalDemo.js +++ b/web-ui/web-react/src/templates/menu/PersonalDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const PersonalDemo = () => { - return ( -
    - -

    Personal Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Personal Component Content via Child Route

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/SeatDemo.js b/web-ui/web-react/src/templates/menu/SeatDemo.js index 989dff7c..bd03ea1b 100644 --- a/web-ui/web-react/src/templates/menu/SeatDemo.js +++ b/web-ui/web-react/src/templates/menu/SeatDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const SeatDemo = () => { - return ( -
    - -

    Seat Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Seat Component Content via Child Route

    +
    + ); +};