1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

p-confirmDialog cambia el layoyut cuando aparece primeng

Discussion in 'Programming/Internet' started by Paul, Oct 8, 2018.

  1. Paul

    Paul Guest

    Estoy usando angular 6 y tengo un p-confirmDialog, que cuando lo presiono me cambia la estructura de mi página, a continuación pongo el código del dialog.

    <p-confirmDialog header="Confirmación Eliminar" key="confEliminarBici" [baseZIndex]="999" [autoZIndex]="false" icon="pi pi-exclamation-triangle"
    width="425" #cd >
    <p-footer>
    <button type="button" pButton icon="pi pi-check" label="Aceptar" (click)="cd.accept()"></button>
    <button type="button" pButton icon="pi pi-times" label="Cancelar" (click)="cd.reject()"></button>
    </p-footer>
    </p-confirmDialog>


    Esta es la implementación del html :

    <div class="ui-g">
    <!-- column -->
    <div class="ui-g-12">
    <p-panel header="Bicicletas" [style]="{'margin-top':'20px'}">
    <form #form="ngForm" (ngSubmit)="form.valid && guardar()">
    <div class="ui-g">
    <div class="ui-g-12" *ngIf="!editar">
    <p-dataView #dv [value]="bicicletas" [paginator]="true" layout="grid" [rows]="5"
    paginatorPosition="both" filterBy="codigoBien" [sortField]="sortField" [sortOrder]="sortOrder">
    <p-header>
    <div class="ui-helper-clearfix">
    <div class="ui-g">

    <div class="ui-g-6 ui-md-6 filter-container">
    <div style="position:relative">
    <input type="search" pInputText placeholder="Buscar por codigo de bien"
    (keyup)="dv.filter($event.target.value)">
    </div>
    </div>
    <div class="ui-g-6 ui-md-6" style="text-align:right">
    <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
    </div>
    </div>
    </div>
    </p-header>

    <ng-template let-bicicleta pTemplate="listItem">
    <div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
    <div class="ui-g-12 ui-md-3" style="text-align:center">
    <img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicleta.foto}}"
    height="200" width="200">
    </div>
    <div class="ui-g-12 ui-md-8 car-details">
    <div class="ui-g">
    <div class="ui-g-2 ui-sm-6">Id: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicleta.foto}}</b></div>

    <div class="ui-g-2 ui-sm-6">Código: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicleta.codigoBien}}</b></div>

    <div class="ui-g-2 ui-sm-6">Descripción: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicleta.descripcion}}</b></div>

    <div class="ui-g-2 ui-sm-6">Estado: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicleta.estado}}</b></div>

    <div class="ui-g-2 ui-sm-6">Candado: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicleta.candado?.descripcion}}</b></div>
    </div>
    </div>
    <div class="ui-g-12 ui-md-1 search-icon">
    <button pButton type="button" icon="pi pi-search" (click)="ver(bicicleta)"
    class="ui-button-success"></button>
    <button pButton type="button" icon="fa fa-pencil-square-o" (click)="editarBicicleta(bicicleta)"></button>
    <button pButton type="button" icon="fa fa-times" class="ui-button-danger"
    (click)="confirmarEliminar(bicicleta)"></button>

    </div>
    </div>
    </ng-template>
    <ng-template let-bicicleta pTemplate="gridItem">
    <div style="padding:.5em" class="ui-g-12 ui-md-3">
    <p-panel [header]="bicicleta.codigoBien" [style]="{'text-align':'center'}">
    <img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicleta.foto}}"
    width="60">
    <div class="car-detail">{{bicicleta.descripcion}} -
    {{bicicleta.disponibilidad}}</div>
    <hr class="ui-widget-content" style="border-top:0">
    <button pButton type="button" icon="pi pi-search" class="ui-button-success"
    (click)="ver(bicicleta)" style="margin-top:0"></button>
    <button pButton type="button" icon="fa fa-pencil-square-o" (click)="editarBicicleta(bicicleta)"></button>
    <button pButton type="button" icon="fa fa-times" class="ui-button-danger"
    (click)="confirmarEliminar(bicicleta)"></button>

    </p-panel>
    </div>
    </ng-template>
    </p-dataView>
    </div>
    <div class="ui-g-12" *ngIf="editar">


    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px" *ngIf="bicicletaSelecionado!=null">
    <div class="ui-grid-row">
    <div class="ui-grid-col-2">
    {{cols[0].header}} *:
    </div>
    <div class="ui-grid-col-6">
    <input pInputText type="text" name="codigoBien" [(ngModel)]="bicicletaSelecionado.codigoBien"
    required />
    </div>
    <div class="ui-grid-col-4">
    <p-message severity="error" text="Codigo de Bien is requerido" *ngIf="form.submitted && !form.form.controls.codigoBien?.valid"></p-message>
    </div>
    </div>
    <div class="ui-grid-row">
    <div class="ui-grid-col-2">
    {{cols[1].header}} *:
    </div>
    <div class="ui-grid-col-6">
    <p-dropdown [options]="estados" [(ngModel)]="bicicletaSelecionado.estado" name="estado"></p-dropdown>
    </div>
    <div class="ui-grid-col-4">

    </div>
    </div>
    <div class="ui-grid-row">
    <div class="ui-grid-col-2">
    {{cols[2].header}} *:
    </div>
    <div class="ui-grid-col-6">
    <input pInputText type="text" name="descripcion" [(ngModel)]="bicicletaSelecionado.descripcion"
    required />
    </div>
    <div class="ui-grid-col-4">
    <p-message severity="error" text="Descripción de Bien is requerido" *ngIf="form.submitted && !form.form.controls.descripcion?.valid"></p-message>
    </div>
    </div>

    <div class="ui-grid-row">
    <div class="ui-grid-col-2">
    Fotografia *:
    </div>
    <div class="ui-grid-col-6">
    {{bicicletaSelecionado.foto}}
    <input name="file" type="file" id="adjuntar" accept="image/*" class="ui-g-12 ui-md-12 ui-lg-12 inputUpload"
    (change)="fileChangeEvent($event)" placeholder="Subir Imagen..." />

    </div>
    <div class="ui-grid-col-4">
    <p-message severity="error" text="El campo Fotrográfia es requerido" *ngIf="form.submitted && bicicletaSelecionado.id == null && documento == null"></p-message>
    </div>
    </div>
    <div class="ui-grid-row">
    <div class="ui-grid-col-2">
    Candado:
    </div>
    <div class="ui-grid-col-6">
    <p-dropdown [options]="candadosItem" [(ngModel)]="bicicletaSelecionado.candadoId"
    name="candado"></p-dropdown>

    </div>
    <div class="ui-grid-col-4">

    </div>
    </div>




    </div>

    </div>
    <div class="ui-g-12" style="text-align: right">

    <button pButton *ngIf="!editar" type="button" icon="pi pi-plus" label="Nuevo" (click)="form.onReset();nuevo()"
    class="ui-button-info" style="margin-right: .25em"></button>
    <button pButton *ngIf="editar" type="submit" icon="pi pi-save" label="Guardar" class="ui-button-info"
    style="margin-right: .25em"></button>
    <button pButton *ngIf="editar" type="button" icon="pi pi-times" label="Cancelar" (click)="editar=false"
    class="ui-button-info" style="margin-right: .25em"></button>

    </div>

    </div>

    </form>
    </p-panel>

    </div>

    <!-- column -->
    </div>


    <p-confirmDialog header="Confirmación Eliminar" key="confEliminarBici" [baseZIndex]="999" [autoZIndex]="false" icon="pi pi-exclamation-triangle"
    width="425" #cd >
    <p-footer>
    <button type="button" pButton icon="pi pi-check" label="Aceptar" (click)="cd.accept()"></button>
    <button type="button" pButton icon="pi pi-times" label="Cancelar" (click)="cd.reject()"></button>
    </p-footer>
    </p-confirmDialog>



    <p-dialog header="Detalle Bicicleta" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" width="750" >
    <div class="ui-g" *ngIf="bicicletaSelecionado" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
    <!-- <div class="ui-g-12" style="text-align:center">
    <img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png">
    </div> -->

    <div class="ui-g-6 ui-md-6" style="text-align:center">
    <img src="https://s3-us-west-2.amazonaws.com/krfacerekognition/{{bicicletaSelecionado.foto}}" height="200"
    width="200">
    </div>
    <div class="ui-g-6 ui-md-6 car-details">
    <div class="ui-g">
    <div class="ui-g-6 ui-sm-6">Id: </div>
    <div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.foto}}</b></div>

    <div class="ui-g-6 ui-sm-6">Código: </div>
    <div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.codigoBien}}</b></div>

    <div class="ui-g-6 ui-sm-6">Descripción: </div>
    <div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.descripcion}}</b></div>

    <div class="ui-g-6 ui-sm-6">Estado: </div>
    <div class="ui-g-6 ui-sm-6"><b>{{bicicletaSelecionado.estado}}</b></div>

    <div class="ui-g-2 ui-sm-6">Candado: </div>
    <div class="ui-g-10 ui-sm-6"><b>{{bicicletaSelecionado.candado?.descripcion}}</b></div>
    </div>
    </div>
    </div>
    </p-dialog>

    Login To add answer/comment
     

Share This Page