From dac6aba840a01b3a6b85f7ce2f914bc44b8f7137 Mon Sep 17 00:00:00 2001 From: manuelinho96 Date: Wed, 31 Oct 2018 14:11:25 -0400 Subject: [PATCH 1/3] Added crud with all functionalities for preparadores. Update base.service --- src/app/app.base.service.ts | 154 +++++++----- .../preparadores/preparadores.component.html | 133 ++++++++++ .../preparadores/preparadores.component.scss | 29 +++ .../preparadores/preparadores.component.ts | 227 ++++++++++++++++++ .../preparadores/preparadores.model.ts | 13 + .../preparadores/preparadores.service.ts | 108 +++++++++ src/app/pages/pages-menu.ts | 9 + src/app/pages/pages-routing.module.ts | 12 +- src/app/pages/pages.module.ts | 6 + 9 files changed, 627 insertions(+), 64 deletions(-) create mode 100644 src/app/pages/catalog/preparadores/preparadores.component.html create mode 100644 src/app/pages/catalog/preparadores/preparadores.component.scss create mode 100644 src/app/pages/catalog/preparadores/preparadores.component.ts create mode 100644 src/app/pages/catalog/preparadores/preparadores.model.ts create mode 100644 src/app/pages/catalog/preparadores/preparadores.service.ts diff --git a/src/app/app.base.service.ts b/src/app/app.base.service.ts index dc49e6c..d45a56e 100644 --- a/src/app/app.base.service.ts +++ b/src/app/app.base.service.ts @@ -1,77 +1,109 @@ +import { of, Observable } from 'rxjs'; import { Injectable } from '@angular/core'; -import { Http, Headers, RequestOptions } from '@angular/http'; +import { catchError, tap } from 'rxjs/operators' +import { HttpHeaders, HttpClient } from '@angular/common/http' + +const httpOptions = { + headers: new HttpHeaders({'Content-Type': 'application/json'}) +} -// Import RxJs required methods -import 'rxjs/add/operator/map'; /** - * Base service to do GET and POST methods globaly. + * Service with methods to add, edit or + * delete elements to backend. + * * @export * @class BaseService */ @Injectable() export class BaseService { - // Variables Declaration. - base_path: string = ''; // Route to server. - json_path: string = ''; // Route to JSON (Only for testing). + API_URL:string = "https://mactaquilla.herokuapp.com/taquilla-api/" - /** - * Creates an instance of BaseService. - * @param {Http} http // Method to establish the http connection. - * @memberof BaseService - */ - constructor(private http: Http) {} + /** + *Creates an instance of BaseService. + * @param {HttpClient} http + * @memberof BaseService + */ + constructor( + private http: HttpClient + ){} + + /** + * Method to get elements from backend + * + * @param {string} endpoint // Provides the endpoint to access backend. + * @returns {Observable} Return list of elements + * if everything is ok or error if not + * @memberof BaseService + */ + getBase(endpoint: string):Observable{ + let apiURL = `${this.API_URL}${endpoint}` + return this.http.get(apiURL).pipe( + catchError(this.handleError('getBase')) + ) + } - /** - * Get's data from backend. - * @param {string} endpoint // Provides the endpoint to access backend. - * @memberof BaseService - */ - getBase( - endpoint: string - ):Object { - return this.http.get(this.base_path + endpoint, null) - .map((res: any) => { - return res.json(); - } - ) - } + /** + * Method to add element to backend + * + * @param {object} element to be added + * @param {string} endpoint // Provides the endpoint to access backend. + * @returns {Observable} Return element if everything is ok + * or error if not + * @memberof BaseService + */ + addBase(element: Object, endpoint: string):Observable{ + let apiURL = `${this.API_URL}${endpoint}` + return this.http.post(apiURL, element, httpOptions).pipe( + catchError(this.handleError('addBase')) + ) + } - /** - * Get's data from local JSON. Only for testing purposes. - * @param {string} endpoint // Provides the endpoint to access backend. - * @memberof BaseService - */ - getJSON( - endpoint: string - ):Object { - return this.http.get(this.json_path + endpoint, null) - .map((res: any) => { - return res.json(); - } - ) - } + /** + * Method to edit element + * + * @param {Object} element to be edited + * @param {string} endpoint // Provides the endpoint to access backend. + * @returns {Observable} return element if everythings is ok + * or error if not + * @memberof BaseService + */ + updateBase(element: Object, endpoint: string):Observable{ + let apiURL = `${this.API_URL}${endpoint}` + return this.http.put(apiURL, element, httpOptions).pipe( + catchError(this.handleError('updateBase')) + ) + } - /** - * Does modifications on backend. (Edit, Delete). - * @param {string} endpoint // Provides the endpoint to access backend. - * @param {Object} payload // JSON data to do modifications in backend data. - * @param {ResquestOptions} options // Configuration for permissions. - * @memberof BaseService - */ - postBase( - endpoint: string, - payload: Object, - options: RequestOptions = null, - ):Object { - let headers = new Headers({ 'Content-Type': 'application/json' }); - options = new RequestOptions({ headers: headers }); - return this.http.post(this.base_path + endpoint, payload, options) - .map((res: any) => { - return res.json(); - } - ) - }; + /** + * Method to delete element + * + * @param {Object} element to be deleted + * @returns {Observable} return null if everythings is ok + * or error if not + * @memberof BaseService + */ + deleteBase(element: Object, endpoint:string):Observable{ + let apiURL = `${this.API_URL}${endpoint}` + return this.http.delete(apiURL, httpOptions).pipe( + catchError(this.handleError('deleteBase')) + ) + } + + /** + * Method to handle errors + * + * @private + * @template T + * @param {string} [operation='operation'] operation that generates the error + * @returns Observable with error info + * @memberof BaseService + */ + private handleError(operation = 'operation'){ + return (error_object: any):Observable =>{ + return of(error_object) + } + } } \ No newline at end of file diff --git a/src/app/pages/catalog/preparadores/preparadores.component.html b/src/app/pages/catalog/preparadores/preparadores.component.html new file mode 100644 index 0000000..56adfae --- /dev/null +++ b/src/app/pages/catalog/preparadores/preparadores.component.html @@ -0,0 +1,133 @@ + + + Preparadores CRUD + + + + + + + + + + + + + +
+ + +
+
+ + + + + + + diff --git a/src/app/pages/catalog/preparadores/preparadores.component.scss b/src/app/pages/catalog/preparadores/preparadores.component.scss new file mode 100644 index 0000000..33a91ed --- /dev/null +++ b/src/app/pages/catalog/preparadores/preparadores.component.scss @@ -0,0 +1,29 @@ +@import '../../../@theme/styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; + +@include nb-install-component() { + + nb-card-footer { + padding-bottom: 0.25rem; + + button { + @include nb-ltr(margin, 0 1rem 1rem 0); + @include nb-rtl(margin, 0 0 1rem 1rem); + } + } + + /* stylelint-disable */ + toaster-container /deep/ { + #toast-container .toast-close-button { + right: 0; + } + } + /* stylelint-enable */ + + @include media-breakpoint-down(xs) { + .dropdown-toggle { + font-size: 0.75rem; + } + } +} \ No newline at end of file diff --git a/src/app/pages/catalog/preparadores/preparadores.component.ts b/src/app/pages/catalog/preparadores/preparadores.component.ts new file mode 100644 index 0000000..a6dc904 --- /dev/null +++ b/src/app/pages/catalog/preparadores/preparadores.component.ts @@ -0,0 +1,227 @@ +import { Component, OnInit } from '@angular/core'; +import { LocalDataSource } from 'ng2-smart-table'; +import { Preparadormodel } from './preparadores.model'; +import { SmartTableService } from '../../../@core/data/smart-table.service'; +import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap'; +import { error } from '@angular/compiler/src/util'; +import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster'; +import 'style-loader!angular2-toaster/toaster.css'; +import { BaseService } from '../../../app.base.service' + +/** + * Component for crud of preparadores + * + * @export + * @class PreparadoresComponent + */ +@Component({ + selector: 'mac-preparadores', + templateUrl: './preparadores.component.html', + styles: ['./preparadores.component.scss'], + providers: [BaseService] +}) + +export class PreparadoresComponent { + + // smart-table settings + settings = { + mode: 'external', + actions: { + position: 'right' + }, + add: { + addButtonContent: '' + }, + edit: { + editButtonContent: '' + }, + delete: { + deleteButtonContent: '' + }, + columns: { + cedula: { + title: 'Id', + type: 'string', + editable: false + }, + iniciales: { + title: 'Initials', + type: 'string', + }, + nombre: { + title: 'Name', + type: 'string', + }, + apellido: { + title: 'Last name', + type: 'string', + }, + correo: { + title: 'Email', + type: 'string', + }, + }, + }; + + source: LocalDataSource = new LocalDataSource(); + preparadormodel: Preparadormodel = new Preparadormodel(); + activeModal: any; + apiurl = "preparador/" + config:ToasterConfig = new ToasterConfig({ + positionClass: 'toast-top-full-width', + timeout: 30000, + tapToDismiss: true, + showCloseButton: true + }); + edit: boolean = false; + + + /** + *Creates an instance of PreparadoresComponent. + * @param {SmartTableService} service + * @param {BaseService} preparadoresService + * @param {NgbModal} modalService + * @param {ToasterService} toasterService + * @memberof PreparadoresComponent + */ + constructor(private service: SmartTableService, + private preparadoresService: BaseService, + private modalService: NgbModal, + private toasterService: ToasterService) { + this.getPreparadores() + } + + /** + * Get preparadores and show their info on smart-table + * + * @memberof PreparadoresComponent + */ + getPreparadores(): void{ + this.preparadoresService.getBase(this.apiurl).subscribe(preparadores => + this.source.load(preparadores)) + } + + /** + * Confirm method for delete preparador + * + * @param {preparadormodel} preparador to be deleted + * @memberof PreparadoresComponent + */ + onDeleteConfirm(preparador: Preparadormodel): void { + let apiurl = `${this.apiurl}${preparador.cedula}/` + this.preparadoresService.deleteBase(preparador, apiurl).subscribe(preparador =>{ + if (preparador == null){ + this.activeModal.dismiss() + this.getPreparadores() + }else{ + this.showErrorMessage(preparador.error) + } + }) + } + + /** + * Method that makes the update for a preparador info + * + * @memberof PreparadoresComponent + */ + editPreparador():void { + let apiurl = `${this.apiurl}${this.preparadormodel.cedula}/` + this.preparadoresService.updateBase(this.preparadormodel, apiurl).subscribe(preparador =>{ + if (!preparador.error){ + console.log(preparador) + this.activeModal.dismiss() + this.getPreparadores() + }else{ + this.showErrorMessage(preparador.error) + } + } + ) + } + + /** + * Activate create preparador modal + * + * @param {*} content Template to be render + * @memberof PreparadoresComponent + */ + createPreparadorModal(content): void{ + this.activeModal = this.modalService.open(content, { size: 'lg'}) + } + + /** + * Activate edit preparador modal + * + * @param {*} content Template to be render + * @param {*} event with preparador info + * @memberof PreparadoresComponent + */ + editPreparadorModal(content, event): void{ + this.edit = true + Object.assign(this.preparadormodel, event.data) + const modal_options : NgbModalOptions = { + size: 'lg', + beforeDismiss: () => { + this.preparadormodel = new Preparadormodel(); + this.edit = false + return true + } + } + this.activeModal = this.modalService.open(content, modal_options) + } + + /** + * Delete preparador modal + * + * @param {*} content to be render + * @param {*} event with preparador info + * @memberof PreparadoresComponent + */ + deletePreparadorModal(content, event): void{ + Object.assign(this.preparadormodel, event.data) + const modal_options : NgbModalOptions = { + size: 'lg', + beforeDismiss: () => { + this.preparadormodel = new Preparadormodel(); + return true + } + } + this.activeModal = this.modalService.open(content, modal_options) + } + + /** + * Add preparador to DB + * + * @memberof PreparadoresComponent + */ + createPreparador(): void{ + this.preparadoresService.addBase(this.preparadormodel, this.apiurl).subscribe(preparador =>{ + if(preparador){ + if(!preparador.error){ + this.activeModal.dismiss() + this.getPreparadores() + }else{ + this.showErrorMessage(preparador.error) + } + } + } + ) + } + + /** + * Method to show notifications + * when some error occurs + * + * @param {*} object with error info + * @memberof PreparadoresComponent + */ + showErrorMessage(object): void{ + let error_message = "" + for ( var key in object){ + if (object.hasOwnProperty(key)){ + error_message += object[key] + "\n" + } + } + this.toasterService.pop('warning', 'Your request has the following errors:\n', + error_message) + } +} diff --git a/src/app/pages/catalog/preparadores/preparadores.model.ts b/src/app/pages/catalog/preparadores/preparadores.model.ts new file mode 100644 index 0000000..3e8b5bd --- /dev/null +++ b/src/app/pages/catalog/preparadores/preparadores.model.ts @@ -0,0 +1,13 @@ +/** + * @export + * @class Preparadormodel + */ +export class Preparadormodel { + cedula: string; + iniciales: string; + nombre: string; + apellido: string; + cantidad_deuda: number; + fecha_deuda: string; + correo: string; +} diff --git a/src/app/pages/catalog/preparadores/preparadores.service.ts b/src/app/pages/catalog/preparadores/preparadores.service.ts new file mode 100644 index 0000000..9aab229 --- /dev/null +++ b/src/app/pages/catalog/preparadores/preparadores.service.ts @@ -0,0 +1,108 @@ +import { of, Observable } from 'rxjs'; +import { Injectable } from '@angular/core'; +import { Preparadormodel } from './preparadores.model'; +import { catchError, tap } from 'rxjs/operators' +import { HttpHeaders, HttpClient } from '@angular/common/http' + +const httpOptions = { + headers: new HttpHeaders({'Content-Type': 'application/json'}) +} + + +/** + * Service with methods to add, edit or + * delete preparadores. + * + * @export + * @class PreparadorService + */ +@Injectable() +export class PreparadorService { + + API_URL:string = "https://mactaquilla.herokuapp.com/taquilla-api" + + /** + *Creates an instance of PreparadorService. + * @param {HttpClient} http + * @memberof PreparadorService + */ + constructor( + private http: HttpClient + ){} + + /** + * Method to get all Preparadores + * + * @returns {Observable} Return list of Preparadores + * if everything is ok or error if not + * @memberof PreparadorService + */ + getPreparadores():Observable{ + let apiURL = `${this.API_URL}/preparador/` + return this.http.get(apiURL).pipe( + catchError(this.handleError('getPreparadores')) + ) + } + + /** + * Method to add Preparador + * + * @param {Preparadormodel} preparador to be added + * @returns {Observable} Return Preparador if everything is ok + * or error if not + * @memberof PreparadorService + */ + addPreparador(preparador: Preparadormodel):Observable{ + let apiURL = `${this.API_URL}/preparador/` + return this.http.post(apiURL, preparador, httpOptions).pipe( + catchError(this.handleError('addPreparadores')) + ) + } + + /** + * Method to edit Preparador + * + * @param {Preparadormodel} Preparador to be edited + * @returns {Observable} return Preparador if everythings is ok + * or error if not + * @memberof PreparadorService + */ + updatePreparador(preparador: Preparadormodel):Observable{ + let apiURL = `${this.API_URL}/preparador/${preparador.cedula}/` + return this.http.put(apiURL, preparador, httpOptions).pipe( + tap(_ => console.log(`update preparador ${preparador.cedula}`)), + catchError(this.handleError('updatePreparador')) + ) + } + + /** + * Method to delete preparador + * + * @param {Preparadormodel} Preparador to be deleted + * @returns {Observable} return null if everythings is ok + * or error if not + * @memberof PreparadorService + */ + deletePreparador(preparador: Preparadormodel):Observable{ + let apiURL = `${this.API_URL}/preparador/${preparador.cedula}/` + return this.http.delete(apiURL, httpOptions).pipe( + catchError(this.handleError('deletePreparador')) + ) + } + + + /** + * Method to handle errors + * + * @private + * @template T + * @param {string} [operation='operation'] operation that generates the error + * @returns Observable with error info + * @memberof PreparadorService + */ + private handleError(operation = 'operation'){ + return (error_object: any):Observable =>{ + return of(error_object) + } + } +} \ No newline at end of file diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 34bd495..5fd1eab 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -11,6 +11,15 @@ export const MENU_ITEMS: NbMenuItem[] = [ title: 'FEATURES', group: true, }, + { + title: 'Catalog', + children: [ + { + title: 'Prearadores', + link: '/pages/preparadores', + }, + ], + }, { title: 'UI Features', icon: 'nb-keypad', diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index d714eca..50b1600 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { NotFoundComponent } from './miscellaneous/not-found/not-found.component'; +import { PreparadoresComponent } from './catalog/preparadores/preparadores.component'; const routes: Routes = [{ path: '', @@ -35,14 +36,19 @@ const routes: Routes = [{ }, { path: 'miscellaneous', loadChildren: './miscellaneous/miscellaneous.module#MiscellaneousModule', - }, { + },{ + path: 'preparadores', + component: PreparadoresComponent, + },{ path: '', redirectTo: 'dashboard', pathMatch: 'full', - }, { + },{ path: '**', component: NotFoundComponent, - }], + }, + + ], }]; @NgModule({ diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index adcae4a..3dc5b8b 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -5,9 +5,13 @@ import { DashboardModule } from './dashboard/dashboard.module'; import { PagesRoutingModule } from './pages-routing.module'; import { ThemeModule } from '../@theme/theme.module'; import { MiscellaneousModule } from './miscellaneous/miscellaneous.module'; +import { PreparadoresComponent } from './catalog/preparadores/preparadores.component'; +import { Ng2SmartTableModule } from 'ng2-smart-table'; +import { ToasterModule } from 'angular2-toaster'; const PAGES_COMPONENTS = [ PagesComponent, + PreparadoresComponent, ]; @NgModule({ @@ -16,6 +20,8 @@ const PAGES_COMPONENTS = [ ThemeModule, DashboardModule, MiscellaneousModule, + Ng2SmartTableModule, + ToasterModule.forRoot(), ], declarations: [ ...PAGES_COMPONENTS, From b6b9155712fc77560703cd08e1cf8c060009bcda Mon Sep 17 00:00:00 2001 From: manuelinho96 Date: Sat, 3 Nov 2018 17:47:32 -0400 Subject: [PATCH 2/3] Translate UI to spanish --- .../preparadores/preparadores.component.html | 40 +++++++++---------- .../preparadores/preparadores.component.ts | 12 +++--- src/app/pages/pages-menu.ts | 2 +- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/app/pages/catalog/preparadores/preparadores.component.html b/src/app/pages/catalog/preparadores/preparadores.component.html index 56adfae..978a231 100644 --- a/src/app/pages/catalog/preparadores/preparadores.component.html +++ b/src/app/pages/catalog/preparadores/preparadores.component.html @@ -16,8 +16,8 @@