Skip to content

Commit 35b8584

Browse files
HlibPavlykHlibPavlyk
committed
feat: update get paged albums component
- add pagination - add search filed
1 parent b1ff2e1 commit 35b8584

File tree

8 files changed

+232
-136
lines changed

8 files changed

+232
-136
lines changed

‎src/CoinyProject.Client/public/no-items-found.webp

53.3 KB
Binary file not shown.

‎src/CoinyProject.Client/src/app/album/album-view/album-view.component.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<div class="container mx-auto px-20 py-8">
22
<div class="px-4">
33

4-
<!-- Error message -->
5-
<div *ngIf="errorMessage" class="text-red-600 bg-red-100 p-3 rounded mb-4">
6-
{{ errorMessage }}
4+
<div *ngIf=" !album; else albumSection">
5+
<app-item-no-found></app-item-no-found>
76
</div>
87

8+
<ng-template #albumSection>
9+
910
<div *ngIf="album" class="bg-white shadow-md rounded-lg p-6">
1011

1112
<div class="flex justify-between items-center">
@@ -87,5 +88,6 @@ <h2 class="text-3xl font-bold text-yellow-600">{{ album.name }}</h2>
8788
</div>
8889
</div>
8990
</div>
91+
</ng-template>
9092
</div>
9193
</div>

‎src/CoinyProject.Client/src/app/album/album-view/album-view.component.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {DatePipe, NgClass, NgIf} from "@angular/common";
66
import {ModalComponent} from "../../shared/modal/modal.component";
77
import {AuthService} from "../../services/auth.service";
88
import {UserModel} from "../../services/user.model";
9+
import {ItemNoFoundComponent} from "../../shared/item-no-found/item-no-found.component";
910

1011
@Component({
1112
selector: 'app-album-view',
@@ -15,7 +16,8 @@ import {UserModel} from "../../services/user.model";
1516
DatePipe,
1617
NgIf,
1718
ModalComponent,
18-
NgClass
19+
NgClass,
20+
ItemNoFoundComponent
1921
],
2022
templateUrl: './album-view.component.html',
2123
styleUrl: './album-view.component.css'

‎src/CoinyProject.Client/src/app/album/albums-view/albums-view.component.html

+128-95
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
12
<div class="container mx-auto px-4 py-6">
23
<!-- Sorting and Search Section -->
34
<div class="flex flex-wrap justify-between items-center mb-4 space-y-2 space-x-2">
45
<!-- Sort by Buttons -->
6+
7+
58
<div class="sort-buttons flex space-x-1">
69
<!-- Сортування за популярністю -->
710
<button (click)="setSort('rate', true)"
@@ -60,117 +63,147 @@
6063
</div>
6164
</div>
6265

63-
<!-- Search Bar -->
64-
<div class="w-full sm:w-1/3 lg:w-1/3">
65-
<input type="text" [(ngModel)]="searchQuery" (input)="searchAlbums()"
66-
class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-500 focus:outline-none"
66+
<div class="w-full sm:w-1/3 lg:w-1/3 relative">
67+
<!-- Search Input -->
68+
<input type="text" [(ngModel)]="searchQuery" (keydown.enter)="onSearch()"
69+
class="w-full p-2 pr-24 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:outline-none"
6770
placeholder="Search albums..." />
68-
</div>
69-
</div>
70-
71-
72-
<div class="container mx-auto px-4 py-6">
73-
<!-- Album List Section -->
74-
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
75-
<div *ngFor="let album of albums"
76-
[ngClass]="{'bg-gray-300': album.status !== 'Active'}"
77-
class="relative bg-white shadow-md rounded-lg overflow-hidden flex flex-col transition duration-300"
78-
[class.opacity-65]="album.status !== 'Active'">
79-
80-
<div class="relative bg-white shadow-md rounded-lg overflow-hidden flex flex-col">
81-
<!-- Album Image and Content -->
82-
83-
<!-- Status Badge on the Card -->
84-
85-
</div>
86-
87-
88-
<!-- Image Carousel Section -->
89-
<div class="relative w-full aspect-square bg-pastel-red-dark p-4 rounded-t-lg rounded-b-none shadow-md overflow-hidden group">
9071

72+
<!-- Search Button -->
73+
<button (click)="onSearch()"
74+
class="absolute right-0 h-full px-5 py-2 bg-yellow-500 text-white font-semibold rounded-r hover:bg-yellow-600 transition duration-300 shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-1">
75+
Search
76+
</button>
77+
</div>
9178

92-
<!-- Left Arrow -->
93-
<button (click)="getPreviousImage(album)"
94-
class="absolute top-1/2 left-2 transform -translate-y-1/2 text-2xl p-3 bg-gray-300 rounded-full hover:bg-gray-400 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg opacity-0 group-hover:opacity-100 z-10">
95-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 hover:text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
96-
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
97-
</svg>
98-
</button>
9979

100-
<!-- Album Image -->
101-
<a [routerLink]="['/album', album.id]">
102-
<img [src]="album.imagesUrls[album.currentImageIndex]"
103-
alt="Album Image"
104-
class="h-full w-full object-cover rounded-lg transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer"
105-
(error)="onImageError($event)">
106-
</a>
107-
108-
<!-- Right Arrow -->
109-
<button (click)="getNextImage(album)"
110-
class="absolute top-1/2 right-2 transform -translate-y-1/2 text-2xl p-3 bg-gray-300 rounded-full hover:bg-gray-400 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg opacity-0 group-hover:opacity-100 z-10">
111-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 hover:text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
112-
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
113-
</svg>
114-
</button>
80+
<div class="py-6" *ngIf=" errorMessage; else albumsSection">
81+
<app-item-no-found></app-item-no-found>
82+
</div>
11583

116-
<!-- Dots Navigation -->
117-
<div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2 z-10">
84+
<ng-template #albumsSection>
85+
<div class="container mx-auto px-4 py-6">
86+
<!-- Album List Section -->
87+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
88+
<div *ngFor="let album of albums"
89+
[ngClass]="{'bg-gray-300': album.status !== 'Active'}"
90+
class="relative bg-white shadow-md rounded-lg overflow-hidden flex flex-col transition duration-300"
91+
[class.opacity-65]="album.status !== 'Active'">
92+
93+
<!-- Image Carousel Section -->
94+
<div class="relative w-full aspect-square bg-pastel-red-dark p-4 rounded-t-lg rounded-b-none shadow-md overflow-hidden group">
95+
96+
97+
<!-- Left Arrow -->
98+
<button (click)="getPreviousImage(album)"
99+
class="absolute top-1/2 left-2 transform -translate-y-1/2 text-2xl p-3 bg-gray-300 rounded-full hover:bg-gray-400 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg opacity-0 group-hover:opacity-100 z-10">
100+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 hover:text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
101+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
102+
</svg>
103+
</button>
104+
105+
<!-- Album Image -->
106+
<a [routerLink]="['/album', album.id]">
107+
<img [src]="album.imagesUrls[album.currentImageIndex]"
108+
alt="Album Image"
109+
class="h-full w-full object-cover rounded-lg transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer"
110+
(error)="onImageError($event)">
111+
</a>
112+
113+
<!-- Right Arrow -->
114+
<button (click)="getNextImage(album)"
115+
class="absolute top-1/2 right-2 transform -translate-y-1/2 text-2xl p-3 bg-gray-300 rounded-full hover:bg-gray-400 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg opacity-0 group-hover:opacity-100 z-10">
116+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 hover:text-gray-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
117+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
118+
</svg>
119+
</button>
120+
121+
<!-- Dots Navigation -->
122+
<div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2 z-10">
118123
<span *ngFor="let image of album.imagesUrls; let i = index"
119124
(click)="goToImage(album, i)"
120125
class="w-3 h-3 bg-gray-400 rounded-full cursor-pointer hover:bg-gray-600 transition-all duration-300 ease-in-out"
121126
[ngClass]="{'bg-gray-600': album.currentImageIndex === i}">
122127
</span>
123-
</div>
124-
</div>
125-
126-
<!-- Album Details Below Image -->
127-
<div class="p-4 flex-grow bg-yellow-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
128-
129-
130-
<!-- Album Name -->
131-
<h2 class="text-lg font-bold mb-2 truncate text-yellow-600">{{ album.name }}</h2>
132-
133-
<!-- Description -->
134-
<p class="text-gray-700 mb-4 max-h-24 overflow-hidden text-ellipsis">
135-
{{ album.description || 'No description available' }}
136-
</p>
128+
</div>
129+
</div>
130+
131+
<!-- Album Details Below Image -->
132+
<div class="p-4 flex-grow bg-yellow-50 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
133+
134+
135+
<!-- Album Name -->
136+
<h2 class="text-lg font-bold mb-2 truncate text-yellow-600">{{ album.name }}</h2>
137+
138+
<!-- Description -->
139+
<p class="text-gray-700 mb-4 max-h-24 overflow-hidden text-ellipsis">
140+
{{ album.description || 'No description available' }}
141+
</p>
142+
143+
<!-- Rating section -->
144+
<div class="flex items-center mb-4">
145+
<span class="font-bold text-yellow-500">Rate:</span>
146+
<span class="ml-2 text-gray-800">{{ album.rate }}</span>
147+
</div>
148+
149+
<!-- Author section -->
150+
<div class="flex items-center mb-4">
151+
<span class="font-bold text-yellow-600">Author: </span>
152+
<!-- Conditional RouterLink -->
153+
<a
154+
[routerLink]="user?.id === album.author.id ? ['/profile'] : ['/profile', album.author.id]"
155+
[queryParams]="user?.id === album.author.id ? { my: true } : null"
156+
class="ml-2 text-yellow-600 hover:text-yellow-500 transition duration-300">
157+
{{ album.author.username }}
158+
</a>
159+
</div>
160+
161+
<!-- Last Updated Section -->
162+
<div class="flex items-center">
163+
<span class="font-bold text-yellow-500">Updated:</span>
164+
<span class="ml-2 text-gray-800">{{ album.updatedAt | date:'dd MMM yyyy, HH:mm' }}</span>
165+
</div>
166+
</div>
167+
168+
<div *ngIf="album.status !== 'Active'"
169+
class="absolute top-0 right-0 m-2 px-3 py-1 rounded-lg text-xs font-semibold"
170+
[ngClass]="{
171+
'bg-red-500 text-white': album.status === 'Inactive',
172+
'bg-yellow-400 text-gray-800': album.status === 'NotApproved'
173+
}">
174+
{{ album.status === 'Inactive' ? 'Inactive' : 'Not Approved' }}
175+
</div>
137176

138-
<!-- Rating section -->
139-
<div class="flex items-center mb-4">
140-
<span class="font-bold text-yellow-500">Rate:</span>
141-
<span class="ml-2 text-gray-800">{{ album.rate }}</span>
142177
</div>
178+
</div>
179+
<!-- Pagination Controls -->
180+
<div class="flex justify-center mt-6 space-x-2">
181+
<!-- Previous Button -->
182+
<button (click)="previousPage()" [disabled]="page === 1"
183+
class="px-4 py-2 bg-yellow-500 text-white font-semibold rounded-lg hover:bg-yellow-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed">
184+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
185+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
186+
</svg>
187+
Previous
188+
</button>
143189

144-
<!-- Author section -->
145-
<div class="flex items-center mb-4">
146-
<span class="font-bold text-yellow-600">Author: </span>
147-
<!-- Conditional RouterLink -->
148-
<a
149-
[routerLink]="user?.id === album.author.id ? ['/profile'] : ['/profile', album.author.id]"
150-
[queryParams]="user?.id === album.author.id ? { my: true } : null"
151-
class="ml-2 text-yellow-600 hover:text-yellow-500 transition duration-300">
152-
{{ album.author.username }}
153-
</a>
154-
</div>
190+
<!-- Display the current page and total pages -->
191+
<span class="px-4 py-2 text-gray-700 font-semibold bg-white border border-yellow-500 rounded-lg">
192+
Page {{ page }} of {{ totalPages }}
193+
</span>
155194

156-
<!-- Last Updated Section -->
157-
<div class="flex items-center">
158-
<span class="font-bold text-yellow-500">Updated:</span>
159-
<span class="ml-2 text-gray-800">{{ album.updatedAt | date:'dd MMM yyyy, HH:mm' }}</span>
160-
</div>
195+
<!-- Next Button -->
196+
<button (click)="nextPage()" [disabled]="page === totalPages"
197+
class="px-4 py-2 bg-yellow-500 text-white font-semibold rounded-lg hover:bg-yellow-600 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed">
198+
Next
199+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
200+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
201+
</svg>
202+
</button>
161203
</div>
204+
</div>
162205

163-
<div *ngIf="album.status !== 'Active'"
164-
class="absolute top-0 right-0 m-2 px-3 py-1 rounded-lg text-xs font-semibold"
165-
[ngClass]="{
166-
'bg-red-500 text-white': album.status === 'Inactive',
167-
'bg-yellow-400 text-gray-800': album.status === 'NotApproved'
168-
}">
169-
{{ album.status === 'Inactive' ? 'Inactive' : 'Not Approved' }}
170-
</div>
206+
</ng-template>
171207

172-
</div>
173-
</div>
174208
</div>
175-
176209
</div>

0 commit comments

Comments
 (0)