Update folder structure
This commit is contained in:
Çetin
+124
@@ -0,0 +1,124 @@
|
||||
<div class="grid">
|
||||
<p-toast></p-toast>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Dialog</h5>
|
||||
<p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
|
||||
<p class="line-height-3 m-0">
|
||||
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.
|
||||
</p>
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton icon="pi pi-check" (click)="display=false" label="Ok" class="p-button-outlined"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width: '450px'}">
|
||||
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '450px'}">
|
||||
<ng-template pTemplate>
|
||||
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowData let-product>
|
||||
<tr [pSelectableRow]="rowData">
|
||||
<td>{{product.name}}</td>
|
||||
<td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="100" class="shadow-2"/></td>
|
||||
<td>{{formatCurrency(product.price)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-template>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Confirmation</h5>
|
||||
<p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
|
||||
[style]="{width: '350px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Sidebar</h5>
|
||||
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Left Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Right Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Top Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Bottom Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Username</label>
|
||||
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
|
||||
</div>
|
||||
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
|
||||
<p-toast></p-toast>
|
||||
<button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
|
||||
<p-confirmPopup key="confirm2"></p-confirmPopup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ConfirmationService, MessageService} from 'primeng/api';
|
||||
import {Product} from '../../api/product';
|
||||
import {AppMainComponent} from 'src/app/app.main.component';
|
||||
import {ProductService} from '../../service/productservice';
|
||||
|
||||
@Component({
|
||||
templateUrl: './overlays.component.html',
|
||||
providers: [ConfirmationService, MessageService]
|
||||
})
|
||||
export class OverlaysComponent implements OnInit {
|
||||
|
||||
images: any[];
|
||||
|
||||
display: boolean;
|
||||
|
||||
products: Product[];
|
||||
|
||||
selectedProduct: Product;
|
||||
|
||||
visibleSidebar1;
|
||||
|
||||
visibleSidebar2;
|
||||
|
||||
visibleSidebar3;
|
||||
|
||||
visibleSidebar4;
|
||||
|
||||
visibleSidebar5;
|
||||
|
||||
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService, public appMain: AppMainComponent) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => this.products = products);
|
||||
|
||||
this.images = [];
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos1.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos2.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos3.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos4.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
|
||||
});
|
||||
}
|
||||
|
||||
confirm1() {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm1',
|
||||
message: 'Are you sure to perform this action?'
|
||||
});
|
||||
}
|
||||
|
||||
confirm2(event: Event) {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm2',
|
||||
target: event.target,
|
||||
message: 'Are you sure that you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.messageService.add({severity: 'info', summary: 'Confirmed', detail: 'You have accepted'});
|
||||
},
|
||||
reject: () => {
|
||||
this.messageService.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user