ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update folder structure

Browse Source
This commit is contained in:
Çetin
2021-12-28 13:29:25 +03:00
parent e0762fdeb0
commit ab8f627bb3
71 changed files with 189 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/list/list.component.html
+88
View File
@@ -0,0 +1,88 @@
<div class="grid">
<div class="col-12">
<div class="card">
<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">
<div class="col-6 text-left">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
</div>
<div class="col-6 text-right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
</ng-template>
<ng-template let-product pTemplate="listItem">
<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="font-bold text-2xl">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></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>
</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">
<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>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
</div>
</div>
</ng-template>
<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">
<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>
</div>
<div class="text-center">
<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>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</div>
<div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
</div>
<div class="col-12 lg:col-8">
<div class="card">
<h5>PickList</h5>
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" dragdrop="true"
[responsive]="true">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>
</p-pickList>
</div>
</div>
<div class="col-12 lg:col-4">
<div class="card">
<h5>OrderList</h5>
<p-orderList [value]="orderCities" header="Cities" dragdrop="true">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>
</p-orderList>
</div>
</div>
</div>
src/app/components/list/list.component.ts
+67
View File
@@ -0,0 +1,67 @@
import {Component, OnInit} from '@angular/core';
import {SelectItem} from 'primeng/api';
import {Product} from '../../api/product';
import {ProductService} from '../../service/productservice';
@Component({
templateUrl: './list.component.html',
styleUrls: ['../../../assets/demo/badges.scss']
})
export class ListComponent implements OnInit {
products: Product[];
sortOptions: SelectItem[];
sortOrder: number;
sortField: string;
sourceCities: any[];
targetCities: any[];
orderCities: any[];
constructor(private productService: ProductService) {}
ngOnInit() {
this.productService.getProducts().then(data => this.products = data);
this.sourceCities = [
{name: 'San Francisco', code: 'SF'},
{name: 'London', code: 'LDN'},
{name: 'Paris', code: 'PRS'},
{name: 'Istanbul', code: 'IST'},
{name: 'Berlin', code: 'BRL'},
{name: 'Barcelona', code: 'BRC'},
{name: 'Rome', code: 'RM'}];
this.targetCities = [];
this.orderCities = [
{name: 'San Francisco', code: 'SF'},
{name: 'London', code: 'LDN'},
{name: 'Paris', code: 'PRS'},
{name: 'Istanbul', code: 'IST'},
{name: 'Berlin', code: 'BRL'},
{name: 'Barcelona', code: 'BRC'},
{name: 'Rome', code: 'RM'}];
this.sortOptions = [
{label: 'Price High to Low', value: '!price'},
{label: 'Price Low to High', value: 'price'}
];
}
onSortChange(event) {
const value = event.value;
if (value.indexOf('!') === 0) {
this.sortOrder = -1;
this.sortField = value.substring(1, value.length);
} else {
this.sortOrder = 1;
this.sortField = value;
}
}
}