Skip to content

Commit 01a99bd

Browse files
bayangbayang
committed
feat: add activity page
1 parent 4d14bf6 commit 01a99bd

File tree

5 files changed

+195
-3
lines changed

5 files changed

+195
-3
lines changed

‎src/jelu-ui/src/App.vue

+18
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,15 @@ const collapseDropdown = () => {
218218
{{ t('nav.history') }}
219219
</router-link>
220220
</li>
221+
<li @click="collapseDropdown()">
222+
<router-link
223+
v-if="isLogged"
224+
:to="{ name: 'reviews' }"
225+
class="font-sans text-base capitalize"
226+
>
227+
{{ t('nav.activity') }}
228+
</router-link>
229+
</li>
221230
<li @click="collapseDropdown()">
222231
<router-link
223232
v-if="isLogged"
@@ -343,6 +352,15 @@ const collapseDropdown = () => {
343352
{{ t('nav.history') }}
344353
</router-link>
345354
</li>
355+
<li>
356+
<router-link
357+
v-if="isLogged"
358+
:to="{ name: 'reviews' }"
359+
class="font-sans text-xl capitalize"
360+
>
361+
{{ t('nav.activity') }}
362+
</router-link>
363+
</li>
346364
<li
347365
v-if="shelves !== null && shelves.length > 0 && isLogged"
348366
class="mr-1"

‎src/jelu-ui/src/components/ReviewBookCard.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ getBook()
4444
<div class="card card-side bg-base-100 shadow-2xl shadow-base-300 review-book-card">
4545
<figure
4646
v-if="book != null"
47-
class="place-self-start"
47+
class="place-self-start h-full"
4848
>
4949
<img
5050
:src="'/files/' + book.image"
51-
alt="Movie"
51+
alt=""
5252
>
5353
</figure>
5454
<div class="card-body p-1 m-1">

‎src/jelu-ui/src/components/ReviewList.vue

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<script setup lang="ts">
2+
import { useThrottleFn, useTitle } from '@vueuse/core';
3+
import { Ref, ref, watch } from "vue";
4+
import { useI18n } from 'vue-i18n';
5+
import usePagination from '../composables/pagination';
6+
import useSort from "../composables/sort";
7+
import { Review } from '../model/Review';
8+
import dataService from "../services/DataService";
9+
import ReviewBookCard from './ReviewBookCard.vue';
10+
11+
const { t } = useI18n({
12+
inheritLocale: true,
13+
useScope: 'global'
14+
})
15+
16+
useTitle('Jelu | ' + t('nav.activity'))
17+
18+
const reviews: Ref<Array<Review>> = ref([]);
19+
20+
const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination(16)
21+
22+
const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('reviewDate,desc')
23+
24+
const getBookIsLoading: Ref<boolean> = ref(false)
25+
26+
watch([page, sortQuery], (newVal, oldVal) => {
27+
console.log("all " + newVal + " " + oldVal)
28+
if (newVal !== oldVal) {
29+
throttledGetReviews()
30+
}
31+
})
32+
33+
const getReviews = () => {
34+
getBookIsLoading.value = true
35+
dataService.findReviews(undefined, undefined, null,
36+
null, null,
37+
pageAsNumber.value - 1, perPage.value, sortQuery.value)
38+
.then(res => {
39+
console.log(res)
40+
total.value = res.totalElements
41+
reviews.value = res.content
42+
if (! res.empty) {
43+
page.value = (res.number + 1).toString(10)
44+
}
45+
else {
46+
page.value = "1"
47+
}
48+
getBookIsLoading.value = false
49+
updatePageLoading(false)
50+
}
51+
)
52+
.catch(e => {
53+
getBookIsLoading.value = false
54+
updatePageLoading(false)
55+
})
56+
57+
};
58+
59+
// watches set above sometimes called twice
60+
// so getBooks was sometimes called twice at the same instant
61+
const throttledGetReviews = useThrottleFn(() => {
62+
getReviews()
63+
}, 100, false)
64+
65+
try {
66+
getReviews();
67+
} catch (error) {
68+
console.log("failed get reviews : " + error);
69+
}
70+
71+
</script>
72+
73+
<template>
74+
<div class="flex flex-row mb-2 justify-center">
75+
<h2 class="text-3xl typewriter capitalize">
76+
<span class="icon">
77+
<i class="mdi mdi-bookshelf" />
78+
</span>
79+
&nbsp; {{ t('nav.activity') }} :
80+
</h2>
81+
</div>
82+
<o-pagination
83+
v-if="reviews.length > 0 && pageCount > 1"
84+
:current="pageAsNumber"
85+
:total="total"
86+
order="centered"
87+
:per-page="perPage"
88+
@change="updatePage"
89+
/>
90+
<div
91+
v-if="reviews.length > 0"
92+
class="flex flex-wrap gap-3 justify-center"
93+
>
94+
<TransitionGroup name="list">
95+
<div
96+
v-for="review in reviews"
97+
:key="review.id"
98+
class="m-1"
99+
>
100+
<ReviewBookCard
101+
:review="review"
102+
:book-reviews-link="true"
103+
:show-user-name="true"
104+
/>
105+
</div>
106+
</TransitionGroup>
107+
</div>
108+
<div
109+
v-else-if="getBookIsLoading"
110+
class="flex flex-row justify-center justify-items-center gap-3"
111+
>
112+
<o-skeleton
113+
class="justify-self-center basis-36"
114+
height="250px"
115+
:animated="true"
116+
/>
117+
<o-skeleton
118+
class="justify-self-center basis-36"
119+
height="250px"
120+
:animated="true"
121+
/>
122+
<o-skeleton
123+
class="justify-self-center basis-36"
124+
height="250px"
125+
:animated="true"
126+
/>
127+
</div>
128+
<div v-else>
129+
<h2 class="text-3xl typewriter capitalize">
130+
{{ t('labels.library_empty') }}
131+
</h2>
132+
<span class="icon">
133+
<i class="mdi mdi-book-open-page-variant-outline mdi-48px" />
134+
</span>
135+
</div>
136+
137+
<o-pagination
138+
v-if="reviews.length > 0"
139+
:current="pageAsNumber"
140+
:total="total"
141+
order="centered"
142+
:per-page="perPage"
143+
@change="updatePage"
144+
/>
145+
<o-loading
146+
v-model:active="getPageIsLoading"
147+
:full-page="true"
148+
:cancelable="true"
149+
/>
150+
</template>
151+
152+
<style scoped>
153+
154+
label.label {
155+
font-weight: bold;
156+
}
157+
158+
.list-enter-active,
159+
.list-leave-active {
160+
transition: all 0.2s ease;
161+
}
162+
.list-enter-from,
163+
.list-leave-to {
164+
opacity: 0;
165+
}
166+
167+
</style>

‎src/jelu-ui/src/locales/en.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"history": "history",
1818
"shelves": "shelves",
1919
"tags-admin" : "tags management",
20-
"data-admin": "data management"
20+
"data-admin": "data management",
21+
"activity": "activity"
2122
},
2223
"labels": {
2324
"search": "Search",

‎src/jelu-ui/src/router.ts

+6
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ const router = createRouter({
9898
component: () => import(/* webpackChunkName: "recommend" */ './components/ReviewDetail.vue'),
9999
name: 'review-detail',
100100
},
101+
{
102+
path: '/reviews',
103+
component: () => import(/* webpackChunkName: "recommend" */ './components/ReviewList.vue'),
104+
name: 'reviews',
105+
beforeEnter: [isLogged]
106+
},
101107
{
102108
path: '/search',
103109
component: () => import(/* webpackChunkName: "recommend" */ './components/SearchResultsDisplay.vue'),

0 commit comments

Comments
 (0)