carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix list demos

Browse Source
This commit is contained in:
Çetin
2025-01-06 15:53:22 +03:00
parent 6d9dff0075
commit af661fce3a
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/uikit/listdoc.ts
View File

@@ -21,8 +21,8 @@ import { Product, ProductService } from '@/src/service/product.service';
<ng-template #header> <ng-template #header>
<div class="flex justify-end"> <div class="flex justify-end">
<p-select-button [(ngModel)]="layout" [options]="options" [allowEmpty]="false"> <p-select-button [(ngModel)]="layout" [options]="options" [allowEmpty]="false">
<ng-template #option let-option> <ng-template #item let-option>
<i [ngClass]="{'pi pi-bars': option === 'list', 'pi pi-table': option === 'grid'}"></i> <i class="pi " [ngClass]="{'pi-bars': option === 'list', 'pi-table': option === 'grid'}"></i>
</ng-template> </ng-template>
</p-select-button> </p-select-button>
</div> </div>
@@ -64,9 +64,9 @@ import { Product, ProductService } from '@/src/service/product.service';
</div> </div>
</div> </div>
<div class="flex flex-col md:items-end gap-20"> <div class="flex flex-col md:items-end gap-20">
<span class="text-xl font-semibold">{{ item.price }}</span> <span class="text-xl font-semibold">$ {{ item.price }}</span>
<div class="flex flex-row-reverse md:flex-row gap-2"> <div class="flex flex-row-reverse md:flex-row gap-2">
<p-button icon="pi pi-heart" [outlined]="true"></p-button> <p-button icon="pi pi-heart" styleClass="h-full" [outlined]="true"></p-button>
<p-button icon="pi pi-shopping-cart" label="Buy Now" <p-button icon="pi pi-shopping-cart" label="Buy Now"
[disabled]="item.inventoryStatus === 'OUTOFSTOCK'" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"
styleClass="flex-auto md:flex-initial whitespace-nowrap"></p-button> styleClass="flex-auto md:flex-initial whitespace-nowrap"></p-button>
@@ -118,12 +118,12 @@ import { Product, ProductService } from '@/src/service/product.service';
</div> </div>
</div> </div>
<div class="flex flex-col gap-6 mt-6"> <div class="flex flex-col gap-6 mt-6">
<span class="text-2xl font-semibold">{{ item.price }}</span> <span class="text-2xl font-semibold">$ {{ item.price }}</span>
<div class="flex gap-2"> <div class="flex gap-2">
<p-button icon="pi pi-shopping-cart" label="Buy Now" <p-button icon="pi pi-shopping-cart" label="Buy Now"
[disabled]="item.inventoryStatus === 'OUTOFSTOCK'" [disabled]="item.inventoryStatus === 'OUTOFSTOCK'"
class="flex-auto whitespace-nowrap"></p-button> class="flex-auto whitespace-nowrap"></p-button>
<p-button icon="pi pi-heart" [outlined]="true"></p-button> <p-button icon="pi pi-heart" styleClass="h-full" [outlined]="true"></p-button>
</div> </div>
</div> </div>
</div> </div>
@@ -137,7 +137,7 @@ import { Product, ProductService } from '@/src/service/product.service';
<div class="flex flex-col lg:flex-row gap-20"> <div class="flex flex-col lg:flex-row gap-20">
<div class="lg:w-2/3"> <div class="lg:w-2/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-6">PickList</div> <div class="font-semibold text-xl mb-4">PickList</div>
<p-pick-list [source]="sourceCities" [target]="targetCities" breakpoint="1400px"> <p-pick-list [source]="sourceCities" [target]="targetCities" breakpoint="1400px">
<ng-template #item let-item> <ng-template #item let-item>
{{ item.name }} {{ item.name }}
@@ -148,17 +148,23 @@ import { Product, ProductService } from '@/src/service/product.service';
<div class="lg:w-1/3"> <div class="lg:w-1/3">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-6">OrderList</div> <div class="font-semibold text-xl mb-4">OrderList</div>
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" <p-orderlist [value]="orderCities" dataKey="id" breakpoint="575px">
[listStyle]="{'height':'250px'}"> <ng-template #option let-option>
<ng-template #item let-city> {{ option.name }}
<div>{{ city.name }}</div>
</ng-template> </ng-template>
</p-orderList> </p-orderlist>
</div> </div>
</div> </div>
</div> </div>
</div>`, </div>`,
styles: `
::ng-deep {
.p-orderlist-list-container{
width: 100%;
}
}
`,
providers: [ProductService] providers: [ProductService]
}) })
export class ListDoc { export class ListDoc {