f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sync from Apollo

Browse Source
This commit is contained in:
Cagatay Civici 2022-10-22 17:13:40 +03:00
parent b7181f62fb
commit 38fc255caf
4 changed files with 25 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/demo/components/uikit/list/listdemo.component.html
View File

@ -4,9 +4,9 @@
<h5>DataView</h5> <h5>DataView</h5>
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid"> <p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<ng-template pTemplate="header"> <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> <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> <i class="pi pi-search"></i>
<input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)"> <input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)">
</span> </span>
@ -18,10 +18,10 @@
<div class="col-12"> <div class="col-12">
<div class="flex flex-column md:flex-row align-items-center p-3 w-full"> <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"/> <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="font-bold text-2xl">{{product.name}}</div>
<div class="mb-2">{{product.description}}</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"> <div class="flex align-items-center mt-2">
<i class="pi pi-tag mr-2"></i> <i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span> <span class="font-semibold">{{product.category}}</span>
@ -29,7 +29,7 @@
</div> </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"> <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> <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> <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div> </div>
</div> </div>
@ -39,14 +39,14 @@
<ng-template let-product pTemplate="gridItem"> <ng-template let-product pTemplate="gridItem">
<div class="col-12 md:col-4"> <div class="col-12 md:col-4">
<div class="card m-3 border-1 surface-border"> <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"> <div class="flex align-items-center">
<i class="pi pi-tag mr-2"></i> <i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span> <span class="font-semibold">{{product.category}}</span>
</div> </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>
<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"/> <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="text-2xl font-bold">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div> <div class="mb-3">{{product.description}}</div>
@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<div class="col-12 lg:col-8"> <div class="col-12 xl:col-8">
<div class="card"> <div class="card">
<h5>PickList</h5> <h5>PickList</h5>
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true" <p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true"
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-12 xl:col-4">
<div class="card"> <div class="card">
<h5>OrderList</h5> <h5>OrderList</h5>
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}"> <p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}">

4
src/app/demo/components/uikit/overlays/overlaysdemo.component.html
View File

@ -1,7 +1,7 @@
<div class="grid"> <div class="grid">
<p-toast></p-toast> <p-toast></p-toast>
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="card p-fluid"> <div class="card">
<h5>Dialog</h5> <h5>Dialog</h5>
<p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}"> <p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
<p class="line-height-3 m-0"> <p class="line-height-3 m-0">
@ -16,7 +16,7 @@
</p-dialog> </p-dialog>
<div class="grid"> <div class="grid">
<div class="col-12"> <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> </div>
</div> </div>

40
src/app/demo/components/uikit/panels/panelsdemo.component.html
View File

@ -192,41 +192,23 @@
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<h5>Splitter</h5> <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> <ng-template pTemplate>
<p class="col m-3"> <div class="col flex align-items-center justify-content-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Panel 1
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </div>
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> </ng-template>
<ng-template pTemplate> <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> <ng-template pTemplate>
<p class="col m-3"> <div class="col flex align-items-center justify-content-center">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Panel 2
doloremque </div>
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>
</ng-template> </ng-template>
<ng-template pTemplate> <ng-template pTemplate>
<p class="col m-3"> <div class="col flex align-items-center justify-content-center">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis Panel 3
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias </div>
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>
</ng-template> </ng-template>
</p-splitter> </p-splitter>
</ng-template> </ng-template>

4
src/app/demo/components/uikit/table/tabledemo.component.html
View File

@ -128,12 +128,12 @@
</ng-template> </ng-template>
<ng-template pTemplate="emptymessage"> <ng-template pTemplate="emptymessage">
<tr> <tr>
<td colspan="7">No customers found.</td> <td colspan="8">No customers found.</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="loadingbody"> <ng-template pTemplate="loadingbody">
<tr> <tr>
<td colspan="7">Loading customers data. Please wait.</td> <td colspan="8">Loading customers data. Please wait.</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>