Sync from Apollo
This commit is contained in:
Cagatay Civici
parent
b7181f62fb
commit
38fc255caf
@ -4,9 +4,9 @@
|
||||
<h5>DataView</h5>
|
||||
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="grid grid-nogutter flex-column md:flex-row justify-content-between">
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between gap-2">
|
||||
<p-dropdown [options]="sortOptions" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
|
||||
<span class="p-input-icon-left mb-2 md:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)">
|
||||
</span>
|
||||
@ -18,10 +18,10 @@
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="flex-1 flex flex-column align-items-center text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{product.name}}</div>
|
||||
<div class="mb-2">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false" styleClass="mb-2"></p-rating>
|
||||
<div class="flex align-items-center mt-2">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
||||
<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></p-button>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" styleClass="mb-2 p-button-sm"></p-button>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,14 +39,14 @@
|
||||
<ng-template let-product pTemplate="gridItem">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card m-3 border-1 surface-border">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
</div>
|
||||
<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="text-center mb-3">
|
||||
<div class="flex flex-column align-items-center text-center mb-3">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
|
||||
<div class="text-2xl font-bold">{{product.name}}</div>
|
||||
<div class="mb-3">{{product.description}}</div>
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="col-12 xl:col-8">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true"
|
||||
@ -75,7 +75,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="col-12 xl:col-4">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="grid">
|
||||
<p-toast></p-toast>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<h5>Dialog</h5>
|
||||
<p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
|
||||
<p class="line-height-3 m-0">
|
||||
@ -16,7 +16,7 @@
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show" style="width:auto;"></button>
|
||||
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -192,41 +192,23 @@
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[5,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
|
||||
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[30,70]">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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>
|
||||
<div class="col flex align-items-center justify-content-center">
|
||||
Panel 1
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
|
||||
<p-splitter layout="vertical" [panelSizes]="[50,50]" [minSizes]="[10,10]">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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.
|
||||
</p>
|
||||
<div class="col flex align-items-center justify-content-center">
|
||||
Panel 2
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
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.
|
||||
</p>
|
||||
<div class="col flex align-items-center justify-content-center">
|
||||
Panel 3
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
|
||||
@ -128,12 +128,12 @@
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="7">No customers found.</td>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="loadingbody">
|
||||
<tr>
|
||||
<td colspan="7">Loading customers data. Please wait.</td>
|
||||
<td colspan="8">Loading customers data. Please wait.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user