Skip to content

Commit a3f679e

Browse files
FxdonadFxdonad
committed
add get my post
1 parent ec1dff2 commit a3f679e

File tree

7 files changed

+696
-5
lines changed

7 files changed

+696
-5
lines changed

‎src/app/core/router-manager/vetical-menu-dynamic/post-vertical-menu.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@ import { SidebarItem } from '../../models/data-handle';
22

33
export function sidebarPosts(roles: string[]): SidebarItem[] {
44
return [
5+
{
6+
id: 'exercise',
7+
path: '/post-features/post-list',
8+
label: 'Quản lý bài viết',
9+
icon: 'fas fa-tasks',
10+
},
511
{
612
id: 'saved-posts',
713
path: '/post-features/saved-posts-list',
814
label: 'Bài viết đã lưu',
9-
icon: 'fas fa-file-alt',
15+
icon: 'fas fa-bookmark',
1016
},
1117
{
12-
id: 'exercise',
13-
path: '/post-features/post-list',
14-
label: 'Quản lý bài viết',
15-
icon: 'fas fa-tasks',
18+
id: 'my-posts',
19+
path: '/post-features/my-posts-list',
20+
label: 'Bài viết của tôi',
21+
icon: 'fas fa-file-alt',
1622
},
1723
];
1824
}

‎src/app/core/services/api-service/post.service.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@ export class PostService {
3838
);
3939
}
4040

41+
getAllMyPost(page: number, size: number) {
42+
return this.api.get<ApiResponse<IPaginationResponse<PostResponse[]>>>(
43+
API_CONFIG.ENDPOINTS.GET.GET_MY_POST(page, size)
44+
);
45+
}
46+
4147
//sử dụng postWithFormData
4248
createPost(data: CreatePostRequest) {
4349
const { fileDocument, ...otherData } = data;

‎src/app/core/services/config-service/api.enpoints.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,8 @@ export const API_CONFIG = {
246246
GET_USER_PAYMENT_STATISTICS_ADMIN: (year: number, month: number) =>
247247
`/payment/payment-statistics/daily-statistic?year=${year}&month=${month}`,
248248
GET_SUMMARY_STATISTICS_ADMIN: '/submission/stats/admin/summary',
249+
GET_MY_POST: (page: number, size: number) =>
250+
`/post/my?page=${page}&size=${size}`,
249251
},
250252
POST: {
251253
LOGIN: '/identity/auth/login',

‎src/app/features/post/pages/my-post/my-post.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<div class="post-container">
2+
<div class="post-list-container">
3+
<div class="post-list-control">
4+
<div class="post-list-filter">
5+
<app-input
6+
placeholder="Nhập tên..."
7+
[value]="postname"
8+
(valueChange)="handleInputChange($event)"
9+
[required]="false"
10+
[minLength]="3"
11+
[variant]="'primary'"
12+
[isSvg]="false"
13+
[icon]="'fa fa-search'"
14+
></app-input>
15+
@if (authenticated) {
16+
<div class="post-list-button">
17+
<app-btn-type1
18+
thumb="+"
19+
[thumbSize]="24"
20+
description="Tạo bài viết"
21+
(click)="handleAdd()"
22+
></app-btn-type1>
23+
</div>
24+
}
25+
</div>
26+
</div>
27+
28+
<div class="list-post-card-container">
29+
<!-- Hiển thị bài viết khi có dữ liệu và không đang tải -->
30+
<!-- Đang để tạm hàm fetchPostList(), khi nào có loadnextpage sẽ thay thế -->
31+
@if (posts && posts.length > 0 && !(isLoadingInitial || isLoadingMore ||
32+
isLoading)) {
33+
<div class="list-post-card" appScrollEnd (appScrollEnd)="loadNextPage()">
34+
@for (post of posts; track trackByPostId($index, post)) {
35+
<div>
36+
<app-post-card
37+
[post]="post"
38+
(delete)="openModalDelete(post.id)"
39+
(upvote)="handleUpVote(post.id)"
40+
(downvote)="handleDownVote(post.id)"
41+
(mainClick)="goToDetail($event)"
42+
(save)="handleToggleSave(post.id)"
43+
></app-post-card>
44+
</div>
45+
}
46+
</div>
47+
}
48+
49+
<!-- Hiển thị skeleton loading khi đang tải -->
50+
@if (isLoadingMore || isLoading) {
51+
<div class="list-post-card">
52+
<app-skeleton-loading type="card" [count]="8"></app-skeleton-loading>
53+
</div>
54+
}
55+
56+
<!-- Hiển thị thông báo "Không có dữ liệu" với hình ảnh động khi không có bài viết -->
57+
@if (!isLoading && (!posts || posts.length === 0)) {
58+
<div class="no-data-container">
59+
<ng-lottie
60+
[options]="lottieOptions"
61+
style="width: 200px; height: 200px"
62+
>
63+
</ng-lottie>
64+
<p>Không có dữ liệu</p>
65+
</div>
66+
}
67+
</div>
68+
</div>
69+
</div>

‎src/app/features/post/pages/my-post/my-post.scss‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
.post-container {
2+
display: flex;
3+
width: 100%;
4+
box-sizing: border-box;
5+
overflow: hidden;
6+
min-height: 0;
7+
margin: 12px 0 0 0;
8+
9+
.post-list-container {
10+
flex: 1;
11+
display: flex;
12+
flex-direction: column;
13+
padding: 4px;
14+
gap: 10px;
15+
min-width: 0;
16+
overflow: hidden;
17+
.post-list-control {
18+
display: flex;
19+
20+
.post-list-filter {
21+
display: flex;
22+
flex-wrap: wrap;
23+
width: 100%;
24+
gap: 16px;
25+
app-input {
26+
width: 30%;
27+
height: fit-content;
28+
}
29+
}
30+
.post-list-button {
31+
display: flex;
32+
flex-direction: row;
33+
gap: 16px;
34+
align-items: center;
35+
justify-content: start;
36+
transition: all 0.2s linear;
37+
min-width: 142px;
38+
39+
.button-add {
40+
width: 50px;
41+
height: 50px;
42+
background-color: transparent;
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
46+
align-self: center;
47+
border-radius: 8px;
48+
border: 1px solid var(--primary-color);
49+
50+
svg {
51+
stroke: var(--primary-color);
52+
transition: stroke 0.2s;
53+
}
54+
&:hover {
55+
background-color: var(--button-color-hover);
56+
svg {
57+
stroke: #fff;
58+
}
59+
}
60+
}
61+
}
62+
}
63+
64+
.list-post-card-container {
65+
display: flex;
66+
flex-direction: column;
67+
flex: 1;
68+
overflow: auto;
69+
.list-post-card {
70+
display: grid;
71+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
72+
gap: 24px;
73+
transition: all 0.3s ease;
74+
flex: 1;
75+
max-height: calc(100vh - 220px);
76+
min-height: 0; // ✅ tránh overflow
77+
overflow-y: auto; // ✅ scroll tại đây
78+
// ==== Custom Scrollbar Start ====
79+
scrollbar-width: thin; // Firefox
80+
scrollbar-color: #b5b5b5 transparent;
81+
82+
&::-webkit-scrollbar {
83+
width: 8px; // chiều rộng thanh cuộn
84+
}
85+
86+
&::-webkit-scrollbar-track {
87+
background: transparent; // nền phía sau thanh cuộn
88+
}
89+
&::-webkit-scrollbar-button {
90+
display: none; // ẩn mũi tên hai đầu
91+
height: 0;
92+
width: 0;
93+
}
94+
&::-webkit-scrollbar-button:single-button {
95+
display: none; // ẩn mũi tên ↑ và ↓
96+
height: 0;
97+
width: 0;
98+
}
99+
}
100+
.no-data-container {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
justify-content: center;
105+
height: 100%;
106+
text-align: center;
107+
padding: 20px;
108+
}
109+
110+
.no-data-image {
111+
max-width: 200px; /* Điều chỉnh kích thước theo nhu cầu */
112+
margin-bottom: 20px;
113+
}
114+
115+
.no-data-container p {
116+
font-size: 18px;
117+
color: #666;
118+
}
119+
120+
.list-post-pagination {
121+
flex-shrink: 0;
122+
padding: 8px 0;
123+
}
124+
}
125+
}
126+
127+
.popular {
128+
min-width: 250px;
129+
width: fit-content;
130+
padding: 0 0 10px 10px;
131+
display: flex;
132+
flex-direction: column;
133+
gap: 16px;
134+
align-items: center;
135+
max-height: calc(100vh - 160px);
136+
box-sizing: border-box;
137+
overflow: auto;
138+
&::-webkit-scrollbar {
139+
width: 8px; // chiều rộng thanh cuộn
140+
}
141+
142+
&::-webkit-scrollbar-track {
143+
background: transparent; // nền phía sau thanh cuộn
144+
}
145+
&::-webkit-scrollbar-button {
146+
display: none; // ẩn mũi tên hai đầu
147+
height: 0;
148+
width: 0;
149+
}
150+
&::-webkit-scrollbar-button:single-button {
151+
display: none; // ẩn mũi tên ↑ và ↓
152+
height: 0;
153+
width: 0;
154+
}
155+
.note-card {
156+
width: 300px;
157+
height: 52px;
158+
background-color: oklch(from var(--card-excercize-bg) calc(l + 0.15) c h);
159+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
160+
border-radius: 8px;
161+
display: flex;
162+
justify-content: center;
163+
align-items: center;
164+
flex-direction: row;
165+
.note-card-item {
166+
display: flex;
167+
flex-direction: row;
168+
justify-content: center;
169+
align-items: center;
170+
height: 32px;
171+
width: 100px;
172+
background-color: var(--surface-color);
173+
border: 0px 9px 0px 9px;
174+
gap: 3px;
175+
.line {
176+
width: 2px;
177+
height: 32px;
178+
}
179+
}
180+
}
181+
182+
.popular-content,
183+
.popular-post {
184+
width: 300px;
185+
height: auto;
186+
border-radius: 8px;
187+
display: flex;
188+
align-items: center;
189+
justify-content: center;
190+
box-sizing: border-box;
191+
// color: #888;
192+
// box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
193+
}
194+
}
195+
196+
@media (max-width: 1080px) {
197+
flex-direction: column-reverse;
198+
.popular {
199+
flex-direction: row;
200+
width: 100%;
201+
align-items: center;
202+
justify-content: center;
203+
.popular-content,
204+
.popular-post {
205+
flex: 1;
206+
}
207+
@media (max-width: 540px) {
208+
flex-direction: column;
209+
height: auto;
210+
max-height: none;
211+
}
212+
}
213+
}
214+
}

0 commit comments

Comments
 (0)