From 22c1cd9a3aa42fe755d8c4b492fe1dab6fbcb56d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 31 Dec 2024 12:58:33 +0300 Subject: [PATCH] uikit / add new files --- src/views/uikit/filedoc.ts | 58 +++++ src/views/uikit/inputdoc.ts | 8 +- src/views/uikit/mediadoc.ts | 132 ++++++++++ src/views/uikit/messagesdoc.ts | 100 ++++++++ src/views/uikit/overlaydoc.ts | 191 ++++++++++++++ src/views/uikit/tabledoc.ts | 456 +++++++++++++++++++++++++++++++++ 6 files changed, 941 insertions(+), 4 deletions(-) create mode 100644 src/views/uikit/filedoc.ts create mode 100644 src/views/uikit/mediadoc.ts create mode 100644 src/views/uikit/messagesdoc.ts create mode 100644 src/views/uikit/overlaydoc.ts create mode 100644 src/views/uikit/tabledoc.ts diff --git a/src/views/uikit/filedoc.ts b/src/views/uikit/filedoc.ts new file mode 100644 index 0000000..61f6878 --- /dev/null +++ b/src/views/uikit/filedoc.ts @@ -0,0 +1,58 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import { MessageService } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { FileUploadModule } from 'primeng/fileupload'; +import { ToastModule } from 'primeng/toast'; + +@Component({ + standalone:true, + imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule], + template: `
+
+
+
Advanced
+ + +
Drag and drop files to here to upload.
+ + +
    +
  • {{ file.name }} - {{ file.size }} bytes
    • +
+ + +
+
+
Basic
+
+ + + +
+
+
+
+
+
`, + providers: [MessageService] +}) +export class FileDoc { + + uploadedFiles: any[] = []; + + constructor(private messageService: MessageService) {} + + onUpload(event: any) { + for (const file of event.files) { + this.uploadedFiles.push(file); + } + + this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded' }); + } + + onBasicUpload() { + this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' }); + } + +} \ No newline at end of file diff --git a/src/views/uikit/inputdoc.ts b/src/views/uikit/inputdoc.ts index 87df946..4347f43 100644 --- a/src/views/uikit/inputdoc.ts +++ b/src/views/uikit/inputdoc.ts @@ -169,20 +169,20 @@ import {NodeService} from "../../app/demo/service/node.service";
MultiSelect
- - +
TreeSelect
diff --git a/src/views/uikit/mediadoc.ts b/src/views/uikit/mediadoc.ts new file mode 100644 index 0000000..101c759 --- /dev/null +++ b/src/views/uikit/mediadoc.ts @@ -0,0 +1,132 @@ +import { Product } from '@/src/app/demo/api/product'; +import { PhotoService } from '@/src/app/demo/service/photo.service'; +import { ProductService } from '@/src/app/demo/service/product.service'; +import { CommonModule } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { CarouselModule } from 'primeng/carousel'; +import { GalleriaModule } from 'primeng/galleria'; +import { ImageModule } from 'primeng/image'; +import { TagModule } from 'primeng/tag'; + +@Component({ + standalone:true, + imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule], + template: `
+
+
+
Carousel
+ + +
+
+
+ + +
+
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
+
+ + +
+
+ +
+
+
Image
+
+ +
+
+
+ +
+
+
Galleria
+ + + + + + + + +
+
+
`, +}) +export class MediaDoc implements OnInit { + + products!: Product[]; + + images!: any[]; + + galleriaResponsiveOptions: any[] = [ + { + breakpoint: '1024px', + numVisible: 5 + }, + { + breakpoint: '960px', + numVisible: 4 + }, + { + breakpoint: '768px', + numVisible: 3 + }, + { + breakpoint: '560px', + numVisible: 1 + } + ]; + + carouselResponsiveOptions: any[] = [ + { + breakpoint: '1024px', + numVisible: 3, + numScroll: 3 + }, + { + breakpoint: '768px', + numVisible: 2, + numScroll: 2 + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1 + } + ]; + + constructor(private productService: ProductService, private photoService: PhotoService) { } + + ngOnInit() { + this.productService.getProductsSmall().then(products => { + this.products = products; + }); + + this.photoService.getImages().then(images => { + this.images = images; + }); + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + +} \ No newline at end of file diff --git a/src/views/uikit/messagesdoc.ts b/src/views/uikit/messagesdoc.ts new file mode 100644 index 0000000..5dff089 --- /dev/null +++ b/src/views/uikit/messagesdoc.ts @@ -0,0 +1,100 @@ +import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; +import {MessageService } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; +import { ToastModule } from 'primeng/toast'; +import { MessageModule } from 'primeng/message'; +import { FormsModule } from '@angular/forms'; + +@Component({ + standalone: true, + imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule], + template:` +
+
+
+
Toast
+
+ + + + +
+ +
Inline
+
+ + Username is required +
+
+ + +
+
+
+
+
+
Message
+
+ Success Message + Info Message + Warn Message + Error Message + Secondary Message + Contrast Message +
+ +
+
+
+ `, + providers: [MessageService] +}) +export class MessagesDoc { + + msgs = []; + + username: string | undefined + + email: string | undefined + + constructor(private service: MessageService) { } + + showInfoViaToast() { + this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' }); + } + + showWarnViaToast() { + this.service.add({ key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' }); + } + + showErrorViaToast() { + this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' }); + } + + showSuccessViaToast() { + this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' }); + } + + showInfoViaMessages() { + this.msgs = []; + this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' }); + } + + showWarnViaMessages() { + this.msgs = []; + this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' }); + } + + showErrorViaMessages() { + this.msgs = []; + this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' }); + } + + showSuccessViaMessages() { + this.msgs = []; + this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' }); + } + +} \ No newline at end of file diff --git a/src/views/uikit/overlaydoc.ts b/src/views/uikit/overlaydoc.ts new file mode 100644 index 0000000..ea16cfb --- /dev/null +++ b/src/views/uikit/overlaydoc.ts @@ -0,0 +1,191 @@ +import { Product } from '@/src/app/demo/api/product'; +import { ProductService } from '@/src/app/demo/service/product.service'; +import { Component, OnInit } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { DialogModule } from 'primeng/dialog'; +import { ToastModule } from 'primeng/toast'; +import { DrawerModule } from 'primeng/drawer'; +import { PopoverModule } from 'primeng/popover'; +import { ConfirmPopupModule } from 'primeng/confirmpopup'; + +@Component({ + standalone: true, + imports:[ToastModule,DialogModule,ButtonModule,DrawerModule, PopoverModule, ConfirmPopupModule], + template:` +
+
+
+
Dialog
+ +

+ 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. +

+ + + + + +
+ +
+
Popover
+
+ + + + +
+
+ +
+
Tooltip
+
+ + +
+
+
+
+
+
Drawer
+ +

+ 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. +

+ + + +

+ 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. +

+ + + +

+ 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. +

+ + + +

+ 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. +

+ + + +

+ 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. +

+ + + + + + + +
+ +
+
ConfirmPopup
+ + +
+ +
+
ConfirmDialog
+ + +
+ + Are you sure you want to proceed? +
+ + + + + +
+
+
`, + providers: [ConfirmationService, MessageService] +}) +export class OverlayDoc implements OnInit { + + images: any[] = []; + + display: boolean = false; + + products: Product[] = []; + + selectedProduct: Product = {}; + + visibleLeft: boolean = false; + + visibleRight: boolean = false; + + visibleTop: boolean = false; + + visibleBottom: boolean = false; + + visibleFull: boolean = false; + + displayConfirmation: boolean = false; + + constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { } + + ngOnInit() { + this.productService.getProductsSmall().then(products => this.products = products); + + this.images = []; + this.images.push({ + source: 'assets/demo/images/sopranos/sopranos1.jpg', + thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1' + }); + this.images.push({ + source: 'assets/demo/images/sopranos/sopranos2.jpg', + thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2' + }); + this.images.push({ + source: 'assets/demo/images/sopranos/sopranos3.jpg', + thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3' + }); + this.images.push({ + source: 'assets/demo/images/sopranos/sopranos4.jpg', + thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4' + }); + } + + confirm1() { + this.confirmationService.confirm({ + key: 'confirm1', + message: 'Are you sure to perform this action?' + }); + } + + confirm2(event: Event) { + this.confirmationService.confirm({ + key: 'confirm2', + target: event.target || new EventTarget, + message: 'Are you sure that you want to proceed?', + icon: 'pi pi-exclamation-triangle', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); + } + }); + } + + formatCurrency(value: number) { + return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + } + +} \ No newline at end of file diff --git a/src/views/uikit/tabledoc.ts b/src/views/uikit/tabledoc.ts new file mode 100644 index 0000000..886f963 --- /dev/null +++ b/src/views/uikit/tabledoc.ts @@ -0,0 +1,456 @@ +import { Product } from '@/src/app/demo/api/product'; +import { ProductService } from '@/src/app/demo/service/product.service'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { InputTextModule } from 'primeng/inputtext'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { SelectModule } from 'primeng/select'; +import { SliderModule } from 'primeng/slider'; +import { Table, TableModule } from 'primeng/table'; +import { ProgressBarModule } from 'primeng/progressbar'; +import { ToggleButtonModule } from 'primeng/togglebutton'; +import { ToastModule } from 'primeng/toast'; +import { Customer, Representative } from '@/src/app/demo/api/customer'; +import { CustomerService } from '@/src/app/demo/service/customer.service'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { ButtonModule } from 'primeng/button'; +import { RatingModule } from 'primeng/rating'; + +interface expandedRows { + [key: string]: boolean; +} + +@Component({ + standalone: true, + imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule], + template:` +
+
+
+
Filter Menu
+ + +
+ + + + + +
+ + + + +
+ Name + +
+ + +
+ Country + +
+ + +
+ Agent + + +
+ Agent Picker +
+ + + + +
+ + {{option.name}} +
+ + + + +
+ + +
+ Date + +
+ + +
+ Balance + +
+ + +
+ Status + + + + + {{option.label}} + + + + +
+ + +
+ Activity + + + +
+ {{activityValues[0]}} + {{activityValues[1]}} +
+ + +
+ + +
+ Verified + +
+ + + + + + + {{customer.name}} + + + + {{customer.country.name}} + + + + {{customer.representative.name}} + + + {{customer.date | date: 'MM/dd/yyyy'}} + + + {{customer.balance | currency:'USD':'symbol'}} + + + {{customer.status}} + + + + + + + + + + + + No customers found. + + + + + Loading customers data. Please wait. + + + +
+ +
+ +
+
+
Frozen Columns
+ + + + + + Name + Id + Country + Date + Company + Status + Activity + Representative + Balance + + + + + {{customer.name}} + {{customer.id}} + + + {{customer.country.name}} + + {{customer.date}} + {{customer.company}} + + {{customer.status}} + + {{customer.activity}} + + + {{customer.representative.name}} + + {{formatCurrency(customer.balance)}} + + + +
+
+ +
+
+
Row Expand
+ + + + +
+
+ + + + + Name + Image + Price + Category + Reviews + Status + + + + + + + + {{product.name}} + + {{product.price | currency:'USD'}} + {{product.category}} + + {{product.inventoryStatus}} + + + + + +
+ + + + Id + Customer + Date + Amount + Status + + + + + + {{order.id}} + {{order.customer}} + {{order.date}} + {{order.amount | currency:'USD'}} + {{order.status}} + + + + + + There are no order for this product yet. + + + +
+ + + + +
+
+ +
+
+
Subheader Grouping
+ + + + Name + Country + Company + Status + Date + + + + + + + {{customer.representative.name}} + + + + + {{customer.name}} + + + + {{customer.country.name}} + + + {{customer.company}} + + + {{customer.status}} + + + {{customer.date}} + + + + +
+
+
+ `, + providers: [ConfirmationService, MessageService] +}) +export class TableDoc implements OnInit { + + customers1: Customer[] = []; + + customers2: Customer[] = []; + + customers3: Customer[] = []; + + selectedCustomers1: Customer[] = []; + + selectedCustomer: Customer = {}; + + representatives: Representative[] = []; + + statuses: any[] = []; + + products: Product[] = []; + + rowGroupMetadata: any; + + expandedRows: expandedRows = {}; + + activityValues: number[] = [0, 100]; + + isExpanded: boolean = false; + + idFrozen: boolean = false; + + loading: boolean = true; + + @ViewChild('filter') filter!: ElementRef; + + constructor(private customerService: CustomerService, private productService: ProductService) { } + + ngOnInit() { + this.customerService.getCustomersLarge().then(customers => { + this.customers1 = customers; + this.loading = false; + + // @ts-ignore + this.customers1.forEach(customer => customer.date = new Date(customer.date)); + }); + this.customerService.getCustomersMedium().then(customers => this.customers2 = customers); + this.customerService.getCustomersLarge().then(customers => this.customers3 = customers); + this.productService.getProductsWithOrdersSmall().then(data => this.products = data); + + this.representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'XuXue Feng', image: 'xuxuefeng.png' } + ]; + + this.statuses = [ + { label: 'Unqualified', value: 'unqualified' }, + { label: 'Qualified', value: 'qualified' }, + { label: 'New', value: 'new' }, + { label: 'Negotiation', value: 'negotiation' }, + { label: 'Renewal', value: 'renewal' }, + { label: 'Proposal', value: 'proposal' } + ]; + } + + onSort() { + this.updateRowGroupMetaData(); + } + + updateRowGroupMetaData() { + this.rowGroupMetadata = {}; + + if (this.customers3) { + for (let i = 0; i < this.customers3.length; i++) { + const rowData = this.customers3[i]; + const representativeName = rowData?.representative?.name || ''; + + if (i === 0) { + this.rowGroupMetadata[representativeName] = { index: 0, size: 1 }; + } + else { + const previousRowData = this.customers3[i - 1]; + const previousRowGroup = previousRowData?.representative?.name; + if (representativeName === previousRowGroup) { + this.rowGroupMetadata[representativeName].size++; + } + else { + this.rowGroupMetadata[representativeName] = { index: i, size: 1 }; + } + } + } + } + } + + expandAll() { + if (!this.isExpanded) { + this.products.forEach(product => product && product.name ? this.expandedRows[product.name] = true : ''); + + } else { + this.expandedRows = {}; + } + this.isExpanded = !this.isExpanded; + } + + formatCurrency(value: number) { + return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + } + + onGlobalFilter(table: Table, event: Event) { + table.filterGlobal((event.target as HTMLInputElement).value, 'contains'); + } + + clear(table: Table) { + table.clear(); + this.filter.nativeElement.value = ''; + } + + +} \ No newline at end of file