From 847d6af1dc69ae378a5dceaaa4c25e7947526af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 6 Jan 2025 16:12:43 +0300 Subject: [PATCH 1/3] update listdoc --- src/views/uikit/listdoc.ts | 228 +++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 124 deletions(-) diff --git a/src/views/uikit/listdoc.ts b/src/views/uikit/listdoc.ts index 0e8e1d2..84caf02 100644 --- a/src/views/uikit/listdoc.ts +++ b/src/views/uikit/listdoc.ts @@ -11,164 +11,144 @@ import { ButtonModule } from 'primeng/button'; import { Product, ProductService } from '@/src/service/product.service'; @Component({ - standalone:true, + standalone: true, imports: [CommonModule, DataViewModule, FormsModule, SelectButtonModule, PickListModule, OrderListModule, TagModule, ButtonModule], - template: ` -
-
-
DataView
- - -
- - - - - -
- + template: `
+
+
DataView
+ + +
+ + + + + +
+ - -
-
-
-
- - -
-
-
-
- {{ item.category }} -
{{ item.name }}
-
-
-
+
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
- {{ item.rating }} - -
+ > + {{ item.rating }} +
-
- $ {{ item.price }} -
- - -
+
+
+ $ {{ item.price }} +
+ +
- +
+ - -
-
- class="col-span-12 sm:col-span-6 lg:col-span-4 p-2"> -
-
-
- - -
+ +
+
+
+
+
+ +
-
-
-
- {{ item.category }} -
{{ item.name }}
-
-
-
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
- {{ item.rating }} - -
+ > + {{ item.rating }} +
-
- $ {{ item.price }} -
- - -
+
+
+ $ {{ item.price }} +
+ +
- - -
- -
-
-
-
PickList
- - - {{ item.name }} - -
-
+ + +
-
-
-
OrderList
- - - {{ option.name }} - - -
+
+
+
+
PickList
+ + + {{ item.name }} + +
-
`, + +
+
+
OrderList
+ + + {{ option.name }} + + +
+
+
+
`, styles: ` ::ng-deep { - .p-orderlist-list-container{ + .p-orderlist-list-container { width: 100%; } } - `, + `, providers: [ProductService] }) export class ListDoc { - layout: 'list' | 'grid' = 'list'; options = ['list', 'grid']; @@ -181,10 +161,10 @@ export class ListDoc { orderCities: any[] = []; - constructor(private productService: ProductService) { } + constructor(private productService: ProductService) {} ngOnInit() { - this.productService.getProducts().then(data => this.products = data); + this.productService.getProducts().then((data) => (this.products = data)); this.sourceCities = [ { name: 'San Francisco', code: 'SF' }, @@ -193,7 +173,8 @@ export class ListDoc { { name: 'Istanbul', code: 'IST' }, { name: 'Berlin', code: 'BRL' }, { name: 'Barcelona', code: 'BRC' }, - { name: 'Rome', code: 'RM' }]; + { name: 'Rome', code: 'RM' } + ]; this.targetCities = []; @@ -204,11 +185,10 @@ export class ListDoc { { name: 'Istanbul', code: 'IST' }, { name: 'Berlin', code: 'BRL' }, { name: 'Barcelona', code: 'BRC' }, - { name: 'Rome', code: 'RM' }]; - + { name: 'Rome', code: 'RM' } + ]; } - getSeverity(product) { switch (product.inventoryStatus) { case 'INSTOCK': From cc104477dcf7a613a432c8acd596223e1465825a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 6 Jan 2025 16:52:25 +0300 Subject: [PATCH 2/3] update chartdoc --- src/views/uikit/chartdoc.ts | 169 +++++++++++++++--------------------- 1 file changed, 71 insertions(+), 98 deletions(-) diff --git a/src/views/uikit/chartdoc.ts b/src/views/uikit/chartdoc.ts index 8d88219..f7d8a16 100644 --- a/src/views/uikit/chartdoc.ts +++ b/src/views/uikit/chartdoc.ts @@ -6,54 +6,50 @@ import { LayoutService } from '@/src/service/layout.service'; import { FluidModule } from 'primeng/fluid'; @Component({ - standalone:true, - imports: [ - CommonModule, - ChartModule, - FluidModule - ], - template: ` -
-
-
Linear
- + standalone: true, + imports: [CommonModule, ChartModule, FluidModule], + template: ` + +
+
+
Linear
+ +
-
-
-
-
Bar
- +
+
+
Bar
+ +
-
-
-
-
Pie
- +
+
+
Pie
+ +
-
-
-
-
Doughnut
- +
+
+
Doughnut
+ +
-
-
-
-
Polar Area
- +
+
+
Polar Area
+ +
-
-
-
-
Radar
- +
+
+
Radar
+ +
-
- - `, + + ` }) export class ChartDoc { - lineData: any; barData: any; @@ -76,11 +72,9 @@ export class ChartDoc { subscription: Subscription; constructor(private layoutService: LayoutService) { - this.subscription = this.layoutService.configUpdate$ - .pipe(debounceTime(25)) - .subscribe(() => { - this.initCharts(); - }); + this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => { + this.initCharts(); + }); } ngOnInit() { @@ -98,14 +92,14 @@ export class ChartDoc { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--primary-500'), - borderColor: documentStyle.getPropertyValue('--primary-500'), + backgroundColor: documentStyle.getPropertyValue('--p-primary-500'), + borderColor: documentStyle.getPropertyValue('--p-primary-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--primary-200'), - borderColor: documentStyle.getPropertyValue('--primary-200'), + backgroundColor: documentStyle.getPropertyValue('--p-primary-200'), + borderColor: documentStyle.getPropertyValue('--p-primary-200'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -140,7 +134,7 @@ export class ChartDoc { color: surfaceBorder, drawBorder: false } - }, + } } }; @@ -149,17 +143,10 @@ export class ChartDoc { datasets: [ { data: [540, 325, 702], - backgroundColor: [ - documentStyle.getPropertyValue('--indigo-500'), - documentStyle.getPropertyValue('--purple-500'), - documentStyle.getPropertyValue('--teal-500') - ], - hoverBackgroundColor: [ - documentStyle.getPropertyValue('--indigo-400'), - documentStyle.getPropertyValue('--purple-400'), - documentStyle.getPropertyValue('--teal-400') - ] - }] + backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')] + } + ] }; this.pieOptions = { @@ -180,17 +167,17 @@ export class ChartDoc { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, - backgroundColor: documentStyle.getPropertyValue('--primary-500'), - borderColor: documentStyle.getPropertyValue('--primary-500'), - tension: .4 + backgroundColor: documentStyle.getPropertyValue('--p-primary-500'), + borderColor: documentStyle.getPropertyValue('--p-primary-500'), + tension: 0.4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, - backgroundColor: documentStyle.getPropertyValue('--primary-200'), - borderColor: documentStyle.getPropertyValue('--primary-200'), - tension: .4 + backgroundColor: documentStyle.getPropertyValue('--p-primary-200'), + borderColor: documentStyle.getPropertyValue('--p-primary-200'), + tension: 0.4 } ] }; @@ -221,32 +208,19 @@ export class ChartDoc { color: surfaceBorder, drawBorder: false } - }, + } } }; this.polarData = { - datasets: [{ - data: [ - 11, - 16, - 7, - 3 - ], - backgroundColor: [ - documentStyle.getPropertyValue('--indigo-500'), - documentStyle.getPropertyValue('--purple-500'), - documentStyle.getPropertyValue('--teal-500'), - documentStyle.getPropertyValue('--orange-500') - ], - label: 'My dataset' - }], - labels: [ - 'Indigo', - 'Purple', - 'Teal', - 'Orange' - ] + datasets: [ + { + data: [11, 16, 7, 3], + backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')], + label: 'My dataset' + } + ], + labels: ['Indigo', 'Purple', 'Teal', 'Orange'] }; this.polarOptions = { @@ -271,20 +245,20 @@ export class ChartDoc { datasets: [ { label: 'My First dataset', - borderColor: documentStyle.getPropertyValue('--indigo-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'), - pointBorderColor: documentStyle.getPropertyValue('--indigo-400'), + borderColor: documentStyle.getPropertyValue('--p-indigo-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', - borderColor: documentStyle.getPropertyValue('--purple-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'), - pointBorderColor: documentStyle.getPropertyValue('--purple-400'), + borderColor: documentStyle.getPropertyValue('--p-purple-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] @@ -313,5 +287,4 @@ export class ChartDoc { this.subscription.unsubscribe(); } } - } From faf84b8ea2f2644f69655d39cd8864714ed32c55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 6 Jan 2025 16:55:01 +0300 Subject: [PATCH 3/3] update listdoc --- src/views/uikit/listdoc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/uikit/listdoc.ts b/src/views/uikit/listdoc.ts index 84caf02..7dc51d1 100644 --- a/src/views/uikit/listdoc.ts +++ b/src/views/uikit/listdoc.ts @@ -164,7 +164,7 @@ export class ListDoc { constructor(private productService: ProductService) {} ngOnInit() { - this.productService.getProducts().then((data) => (this.products = data)); + this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 6))); this.sourceCities = [ { name: 'San Francisco', code: 'SF' },