Skip to content

A
aeropuertov2-front-framework
Commit bea1ffa4 authored by huriarte's avatar huriarte
Browse files
Options

Seccion 2

parent d101275f
Hide whitespace changes
Inline Side-by-side
Showing with 474 additions and 76 deletions
projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.html
View file @ bea1ffa4
<div class="panel-viewer-wrapper">
<div class="panel-viewer-title">
<i class="fa fa-info-circle"></i>
{{'label.frequent-questions.title' | translate}}
</div>
<div class="panel-viewer-title">
<i class="fa fa-info-circle"></i>
{{'label.frequent-questions.title' | translate}}
</div>
<div class="panel-viewer-body">
<div class="row pt-3 pb-4">
<div class="col-2"></div>
<div class="col-8 border-all">
<div class="row pt-2">
<div class="col-12">
<button mat-mini-fab color="primary" (click)="fileUpload.click()" class="pull-right">
<mat-icon>file_upload</mat-icon>
</button>
<input type="file" #fileUpload name="fileUpload" (change)="uploadFiles($event.target.files)"
accept="{{accept}}" style="display:none;">
</div>
</div>
<div class="row pt-2">
<div class="col-12" style="padding-bottom:15px;">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Load ID -->
<ng-container matColumnDef="idLoad">
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> ID de carga </th>
<td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.idLoad}} </td>
</ng-container>
<!-- Filename -->
<ng-container matColumnDef="filename">
<th mat-header-cell *matHeaderCellDef style="width: 20%;"> Nombre del archivo </th>
<td mat-cell *matCellDef="let element" style="width: 20%;"> {{element.filename}} </td>
</ng-container>
<!-- Status -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Estado </th>
<td mat-cell *matCellDef="let element" style="width: 15%;">
<span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
</td>
</ng-container>
<form [formGroup]="formGroup" autocomplete="off">
<div class="panel-viewer-body">
<div class="row pt-3 pb-4">
<div class="col-3"></div>
<div class="col-6 border-all">
<div class="row pt-2">
<div class="col-12">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
</div>
<div class="col-3"></div>
</div>
<!-- User -->
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Usuario </th>
<td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.user}} </td>
</ng-container>
<!-- Fecha de carga -->
<ng-container matColumnDef="dateLoad">
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Fecha de carga </th>
<td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.dateLoad}} </td>
</ng-container>
<!-- Actions -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="width: 20%;"></th>
<td mat-cell *matCellDef="let element" style="width: 20%;" class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-default btn-sm" (click)="onRowEdited(element)"
[disabled]="!resourceAuth['edit']">
<i class="fa fa-upload"></i>
<span class="visible-md-inline visible-lg-inline visible-xl-inline">
{{'btn.file.upload' | translate}}
</span>
</button>
<button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element)"
[disabled]="!resourceAuth['delete']">
<i class="fa fa-trash"></i>
<span class="visible-md-inline visible-lg-inline visible-xl-inline">
{{'btn.delete' | translate}}
</span>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
</form>
</div>
<div class="col-2"></div>
</div>
</div>
<div class="footer-bar">
<div class="row">
<div class="col-12">
<button mat-stroked-button matStepperPrevious class="pull-left">
<i class="fa fa-chevron-left"></i>
<span class="pl-1">{{'btn.previous' | translate}}</span>
</button>
<button mat-stroked-button (click)="next()" class="pull-right" [disabled]="!dataSource.length">
<span class="pr-1">{{'btn.next' | translate}}</span>
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.scss
View file @ bea1ffa4
table {
width: 100%;
}
$fontcolor: #676a6c;
.content {
width: 100%;
display: flex;
padding-right: 0px !important;
.grid-container, .filter-panel {
.crud-table {
margin-bottom: 0px;
width: 100%;
}
}
.filter-panel {
margin-bottom: 10px;
}
.toolbar-option {
margin-left: 10px;
margin-right: -10px;
}
}
.grid-ibox-content {
// width: calc(100% - 35px);
width: 100%;
}
.grid-ibox-content-options {
width: calc(100% - 35px);
}
.btn-actions {
.btn {
font-size: 10px;
white-space: nowrap;
}
}
.spinner-container {
height: 100%;
width: 100%;
padding-top: 50px;
position: fixed;
}
.spinner-container {
height: 100%;
width: 100%;
padding-top: 50px;
position: fixed;
}
.spinner-container mat-spinner {
margin: -10px auto 0 auto;
}
th.mat-column-actions {
width: 1px !important;
padding-right: 0px !important;
}
td.mat-column-actions {
padding-right: 20px !important;
cursor: default !important;
}
td {
vertical-align: middle !important;
color: $fontcolor;
font-size: 12px;
}
th {
vertical-align: middle !important;
}
tr.mat-header-row {
height: 50px !important;
}
tr.mat-footer-row, tr.mat-row:not(.inner-detail-row) {
height: 40px;
}
.table-toolbar {
right: 10px;
top: 10px;
button {
font-size: 12px;
}
}
.status-button-bar {
button {
font-size: 16px;
}
padding-top: 8px;
padding-left: 15px;
}
.mat-raised-button {
padding: 0px 10px;
}
.icon-centered-button span.mat-button-wrapper {
display: flex;
}
.icon-centered-button mat-icon {
font-size: 15px;
padding-top: 2px;
}
::ng-deep .mat-sort-header-arrow {
visibility: hidden;
}
::ng-deep .mat-sort-header-button {
.mat-icon {
padding-left: 10px;
font-size: 12px;
padding-top: 5px;
}
}
@media (min-width: 576px) {
::ng-deep .d-sm-block {
display: table-cell !important;
}
}
@media (max-width: 576px) {
::ng-deep .mat-paginator-page-size-label {
display: none !important;
}
}
tr.inner-detail-row {
height: 0;
.mat-column-expandedDetail {
padding: 0 10px;
}
}
.inner-element-detail {
overflow: hidden;
display: flex;
}
//@extend
tr.inner-detail-row {
td {
border-bottom: 1px solid #dee2e6;
border-top: 0px;
}
}
tr.inner-element-row.odd, tr.inner-detail-row.odd {
background-color: rgba(0, 0, 0, 0.05);
}
// tr.inner-detail-row {
// cursor: pointer !important;
// }
tr.mat-row-auth:not(.inner-expanded-row):hover {
background-color:#f8f9fa;
cursor: pointer !important;
}
tr.mat-row-auth.inner-expanded-row:hover {
cursor: pointer !important;
}
tr.inner-element-row-expanded td {
border-top: 0px;
border-bottom: 0px;
}
.additional-options-section {
padding: 0;
width: 100%;
display: inline-grid;
button {
margin: 1px 0;
color: inherit;
font-size: inherit;
border-radius: 0px;
}
}
::ng-deep .mat-menu-item {
padding: 0 10px;
}
@media (min-width: 992px) {
.d-t-lg-block {
display: table-cell !important;
}
}
\ No newline at end of file
projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.ts
View file @ bea1ffa4
import { Component, OnInit, Input, ViewContainerRef } from '@angular/core';
import { Component, OnInit, Input, ViewContainerRef, ElementRef, ViewChild } from '@angular/core';
import { Subscription, of } from 'rxjs';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { MatStepper } from '@angular/material';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { animate, trigger, state, transition, style } from '@angular/animations';
import { DomSanitizer } from '@angular/platform-browser';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
import { AuthorizationService } from '@xdf/security';
import { TranslateService } from '@ngx-translate/core';
import { catchError, map } from 'rxjs/operators';
import { HttpEventType, HttpErrorResponse } from '@angular/common/http';
import { UploadService } from '../upload.service';
export interface QuestionFile {
idLoad: number;
filename: string;
status: string;
user: string;
dateLoad: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
const ELEMENT_DATA: QuestionFile[] = [
{ idLoad: 1, filename: 'Questions-1.xlsx', status: 'LO', user: 'lortiz', dateLoad: '09-09-2020' },
{ idLoad: 2, filename: 'Questions-2.xlsx', status: 'LO', user: 'lortiz', dateLoad: '09-09-2020' },
{ idLoad: 3, filename: 'Questions-3.xlsx', status: 'LO', user: 'lortiz', dateLoad: '08-09-2020' },
{ idLoad: 4, filename: 'Questions-4.xlsx', status: 'AC', user: '', dateLoad: '' },
{ idLoad: 5, filename: 'Questions-5.xlsx', status: 'AC', user: '', dateLoad: '' },
{ idLoad: 6, filename: 'Questions-6.xlsx', status: 'AC', user: '', dateLoad: '' }
];
@Component({
......@@ -45,21 +47,55 @@ export class CaFrequentQuestionsComponent implements OnInit {
viewMode: boolean;
formGroup: FormGroup;
questions: any;
questions : any;
public resourceAuth = new Object();
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
displayedColumns: string[] = ['idLoad', 'filename', 'status', 'user', 'dateLoad', 'actions'];
dataSource = ELEMENT_DATA;
constructor() { }
mapStatus = {
"LO": {
"text": "label.status.loaded",
"class": "label label-primary"
},
"AC": {
"text": "label.status.active",
"class": "label label-info"
}
};
files = [];
constructor(protected route: ActivatedRoute,
protected router: Router,
protected vcRef: ViewContainerRef,
protected authorizationService: AuthorizationService,
private translate: TranslateService,
private uploadService: UploadService,
private formBuilder: FormBuilder,
private _activatedRoute: ActivatedRoute,
) {
this.viewMode = this._activatedRoute.snapshot.data.mode === 'view';
}
ngOnInit() {
const keyAuthorization = 'authorization';
const authList = this.route.snapshot.paramMap[keyAuthorization];
if (authList) {
this.resourceAuth = new Object();
authList.forEach(option => {
this.resourceAuth[option] = true;
});
}
}
isDirty() {
return this.formGroup.dirty;
return false;
}
buildForm(questions: any) {
......@@ -85,5 +121,82 @@ export class CaFrequentQuestionsComponent implements OnInit {
*/
}
getClassStatus(status) {
return this.mapStatus[status].class;
}
getTextStatus(status) {
return this.translate.instant(this.mapStatus[status].text);
}
uploadFiles(event) {
for (const i in event) {
if (event[i] instanceof File) {
const reader = new FileReader();
reader.onload = () => {
//this.formGroup.controls['imageAvatar'].setValue(reader.result as string);
};
reader.readAsDataURL(event[i]);
this.files.push({
data: event[i], state: 'in',
inProgress: false, progress: 0, canRetry: false
});
}
}
/*
this.files.forEach(file => {
this.uploadFile(file);
});
*/
}
uploadFile(file) {
const formData = new FormData();
formData.append('file', file.data);
file.inProgress = true;
this.uploadService.upload(formData).pipe(
map(event => {
switch (event.type) {
case HttpEventType.UploadProgress:
file.progress = Math.round(event.loaded * 100 / event.total);
break;
case HttpEventType.Response:
return event;
}
}),
catchError((error: HttpErrorResponse) => {
file.inProgress = false;
return of(`${file.data.name} upload failed.`);
})
).subscribe((event: any) => {
if (typeof (event) === 'object') {
console.log(event.body);
}
});
}
saveQuestions(validateForm: boolean) {
let success = true;
return success;
}
next() {
if (!this.dataSource.length) {
return;
}
if (this.viewMode) {
this.stepper.next();
return;
}
if (this.saveQuestions(true)) {
this.stepper.next();
}
}
}
projects/bytebot-html/src/app/modules/agent/view/components/upload.service.spec.ts 0 → 100644
View file @ bea1ffa4
import { TestBed } from '@angular/core/testing';
import { UploadService } from './upload.service';
describe('UploadService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: UploadService = TestBed.get(UploadService);
expect(service).toBeTruthy();
});
});
projects/bytebot-html/src/app/modules/agent/view/components/upload.service.ts 0 → 100644
View file @ bea1ffa4
import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UploadService {
SERVER_URL: string = "https://file.io/";
constructor(private httpClient: HttpClient) { }
public upload(formData) {
return this.httpClient.post<any>(this.SERVER_URL, formData, {
reportProgress: true,
observe: 'events'
});
}
}
projects/bytebot-html/src/assets/i18n/es.json
View file @ bea1ffa4
......@@ -3,6 +3,7 @@
"home.comments": "Este proyecto presenta una aplicación web típica. Puede usarlo como un marco de referencia para el desarrollo de sus aplicaciones web.",
"btn.previous": "Atrás",
"btn.accept": "Aceptar",
"btn.file.upload" : "Cargar",
"etl_avatar": "Avatar",
"etl_code": "ID",
"etl_name": "Nombre",
......@@ -17,5 +18,8 @@
"label.inactive": "Inactivo",
"label.name": "Nombre",
"label.deployment-channels.configuration": "Canales de despliegue",
"label.deployment-channels.configuration.description": "Seleccione un canal de despliegue"
"label.deployment-channels.configuration.description": "Seleccione un canal de despliegue",
"label.status.active" : "Activo",
"label.status.loaded" : "Cargado",
"label.status.off" : "En Baja"
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment