Skip to content

Commit 53a85e4

Browse files
taslangrahamtaslangraham
committed
pkp/pkp-lib#11576 Display comments table within tab
1 parent 944b431 commit 53a85e4

File tree

2 files changed

+105
-91
lines changed

2 files changed

+105
-91
lines changed

‎src/pages/userComments/userCommentStore.js

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import UserCommentReportDetail from '@/pages/userComments/UserCommentReportDetai
1111
const Actions = {
1212
COMMENT_DELETE: 'commentDelete',
1313
REPORT_DELETE: 'reportDelete',
14+
COMMENT_PUBLICATION_VIEW: 'commentPublicationView',
1415
};
1516
export const useUserCommentStore = defineComponentStore(
1617
'userCommentStore',
1718
(props) => {
1819
const {t} = useLocalize();
1920

20-
const selectedCommentStatus = ref('approved');
21+
const activeTab = ref('approved');
2122
const itemsPerPage = props.itemsPerPage;
2223
const currentCommentReportsPage = ref(1);
2324
const currentCommentsPage = ref(1);
@@ -82,7 +83,7 @@ export const useUserCommentStore = defineComponentStore(
8283

8384
const commentsUrl = computed(() => {
8485
let queryParams = '';
85-
switch (selectedCommentStatus.value) {
86+
switch (activeTab.value) {
8687
case 'approved':
8788
queryParams += `?isApproved=${true}`;
8889
break;
@@ -224,6 +225,11 @@ export const useUserCommentStore = defineComponentStore(
224225
*/
225226
function getCommentItemActions(comment) {
226227
const actions = [
228+
{
229+
label: 'View publication',
230+
icon: 'View',
231+
name: Actions.COMMENT_PUBLICATION_VIEW,
232+
},
227233
{
228234
label: t('manager.userComment.deleteComment'),
229235
icon: 'Cancel',
@@ -294,17 +300,17 @@ export const useUserCommentStore = defineComponentStore(
294300
}
295301

296302
/**
297-
* Handle the change of the dropdown selection for comment status.
298-
* @param {string} value - The selected comment status value.
303+
* Handle the change of the tab selection for comment status.
304+
* @param {string} tabId - The selected tab Id.
299305
*/
300-
async function onDropDownChanged(value) {
306+
function onTabUpdate(tabId) {
301307
// Track the current page for each comment table.
302308
// This is useful when the user is switching between tables for different comments(approved, reported, needs approval).
303309
// Instead of always starting from page 1 of the paginated table, we start from the last visited page for that comment table, defaulting to page 1 if there is no previous history.
304-
const pageToStartFrom = trackedCommentPaginationPageHistory[value] ?? 1;
305-
trackedCommentPaginationPageHistory[selectedCommentStatus.value] =
310+
const pageToStartFrom = trackedCommentPaginationPageHistory[tabId] ?? 1;
311+
trackedCommentPaginationPageHistory[activeTab.value] =
306312
currentCommentsPage.value;
307-
selectedCommentStatus.value = value;
313+
activeTab.value = tabId;
308314

309315
setCurrentCommentsPage(pageToStartFrom);
310316
}
@@ -355,19 +361,19 @@ export const useUserCommentStore = defineComponentStore(
355361
/**
356362
* Get the options for comment types(approved, needs approval, reported), to select from to view comments
357363
*/
358-
const commentTypeOptions = computed(() => {
364+
const commentTabOptions = computed(() => {
359365
return [
360366
{
361367
label: t('manager.userComment.approved'),
362-
value: 'approved',
368+
id: 'approved',
363369
},
364370
{
365371
label: t('manager.userComment.needsApproval'),
366-
value: 'needsApproval',
372+
id: 'needsApproval',
367373
},
368374
{
369375
label: t('manager.userComment.reported'),
370-
value: 'reported',
376+
id: 'reported',
371377
},
372378
];
373379
});
@@ -402,29 +408,38 @@ export const useUserCommentStore = defineComponentStore(
402408
return status.join(', ');
403409
}
404410

411+
/**
412+
* Open the publication a given comment was made for.
413+
* @param comment
414+
*/
415+
function commentPublicationView(comment) {
416+
window.open(comment.publicationUrl, '_blank');
417+
}
418+
405419
return {
406420
reportDelete,
407421
toggleCommentApproval,
408422
getCommentItemActions,
409423
openCommentDetail,
410424
setCurrentCommentsPage,
411-
onDropDownChanged,
412425
commentDelete,
413426
getReportItemActions,
414427
setCurrentReportsPage,
415428
openReport,
416429
getCommentStatusText,
430+
commentPublicationView,
431+
onTabUpdate,
417432
commentApprovalOptions,
418-
selectedCommentStatus,
419433
itemsPerPage,
420434
commentsPageColumns,
421435
comments,
422436
commentsPagination,
423437
currentCommentReports,
424438
currentCommentReportsPagination,
425439
reportsTableColumns,
426-
commentTypeOptions,
440+
commentTabOptions,
427441
isCommentsLoading,
442+
activeTab,
428443
};
429444
},
430445
);

‎src/pages/userComments/userCommentsPage.vue

Lines changed: 75 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,86 @@
11
<template>
22
<div>
3-
<PkpTable>
4-
<template #label>
5-
<span class="flex gap-4 text-3xl-bold">
6-
User Comments
7-
<Spinner
8-
v-if="userCommentStore.isCommentsLoading"
9-
size-variant="big"
10-
></Spinner>
11-
</span>
12-
</template>
13-
<template #top-controls>
14-
<FieldSelect
15-
label="Status"
16-
:options="userCommentStore.commentTypeOptions"
17-
primary-locale="en"
18-
size="normal"
19-
:value="userCommentStore.selectedCommentStatus"
20-
@change="
21-
(fieldName, propName, newValue) =>
22-
userCommentStore.onDropDownChanged(newValue)
23-
"
24-
/>
25-
</template>
26-
27-
<TableHeader>
28-
<TableColumn
29-
v-for="(column, i) in userCommentStore.commentsPageColumns"
30-
:key="i"
31-
>
32-
<span :class="column.headerSrOnly ? 'sr-only' : ''">
33-
{{ column.header }}
34-
</span>
35-
</TableColumn>
36-
</TableHeader>
3+
<Tabs
4+
:track-history="true"
5+
:active-tab="userCommentStore.activeTab"
6+
:label="t('manager.userComment.userComments')"
7+
@update:active-tab="($e) => userCommentStore.onTabUpdate($e)"
8+
>
9+
<Tab
10+
v-for="(column, i) in userCommentStore.commentTabOptions"
11+
:id="column.id"
12+
:key="i"
13+
:label="column.label"
14+
>
15+
<Spinner v-if="userCommentStore.isCommentsLoading" size-variant="big" />
16+
<PkpTable>
17+
<TableHeader>
18+
<TableColumn
19+
v-for="(column, i) in userCommentStore.commentsPageColumns"
20+
:key="i"
21+
>
22+
<span :class="column.headerSrOnly ? 'sr-only' : ''">
23+
{{ column.header }}
24+
</span>
25+
</TableColumn>
26+
</TableHeader>
3727

38-
<TableBody>
39-
<TableRow
40-
v-for="(comment, index) in userCommentStore.comments"
41-
:key="index"
42-
>
43-
<TableCell>
44-
<span
45-
v-strip-unsafe-html="comment.commentText.slice(0, 30) + '....'"
46-
class="text-lg-normal"
47-
></span>
48-
</TableCell>
49-
<TableCell>
50-
<span class="text-lg-normal">
51-
{{ comment.userName }}
52-
</span>
53-
</TableCell>
54-
<TableCell>
55-
{{ userCommentStore.getCommentStatusText(comment) }}
56-
</TableCell>
57-
<TableCell>
58-
<PkpButton
59-
:is-link="true"
60-
@click="userCommentStore.openCommentDetail(comment)"
28+
<TableBody>
29+
<TableRow
30+
v-for="(comment, index) in userCommentStore.comments"
31+
:key="index"
6132
>
62-
{{ t('common.view') }}
63-
</PkpButton>
64-
</TableCell>
65-
<TableCell>
66-
<DropdownActions
67-
:label="t('common.moreActions')"
68-
button-variant="ellipsis"
69-
:actions="userCommentStore.getCommentItemActions(comment)"
70-
@action="(actionName) => userCommentStore[actionName](comment)"
71-
/>
72-
</TableCell>
73-
</TableRow>
74-
</TableBody>
75-
</PkpTable>
76-
<TablePagination
77-
:pagination="userCommentStore.commentsPagination"
78-
@set-page="(...args) => userCommentStore.setCurrentCommentsPage(...args)"
79-
></TablePagination>
33+
<TableCell>
34+
<span
35+
v-strip-unsafe-html="
36+
comment.commentText.slice(0, 30) + '....'
37+
"
38+
class="text-lg-normal"
39+
></span>
40+
</TableCell>
41+
<TableCell>
42+
<span class="text-lg-normal">
43+
{{ comment.userName }}
44+
</span>
45+
</TableCell>
46+
<TableCell>
47+
{{ userCommentStore.getCommentStatusText(comment) }}
48+
</TableCell>
49+
<TableCell>
50+
<PkpButton
51+
:is-link="true"
52+
@click="userCommentStore.openCommentDetail(comment)"
53+
>
54+
{{ t('common.view') }}
55+
</PkpButton>
56+
</TableCell>
57+
<TableCell>
58+
<DropdownActions
59+
:label="t('common.moreActions')"
60+
button-variant="ellipsis"
61+
:actions="userCommentStore.getCommentItemActions(comment)"
62+
@action="
63+
(actionName) => userCommentStore[actionName](comment)
64+
"
65+
/>
66+
</TableCell>
67+
</TableRow>
68+
</TableBody>
69+
</PkpTable>
70+
<TablePagination
71+
:pagination="userCommentStore.commentsPagination"
72+
@set-page="
73+
(...args) => userCommentStore.setCurrentCommentsPage(...args)
74+
"
75+
></TablePagination>
76+
</Tab>
77+
</Tabs>
8078
</div>
8179
</template>
8280
<script setup>
8381
import PkpTable from '@/components/Table/Table.vue';
8482
import TableHeader from '@/components/Table/TableHeader.vue';
8583
import TableColumn from '@/components/Table/TableColumn.vue';
86-
import FieldSelect from '@/components/Form/fields/FieldSelect.vue';
8784
import TableBody from '@/components/Table/TableBody.vue';
8885
import TableCell from '@/components/Table/TableCell.vue';
8986
import TableRow from '@/components/Table/TableRow.vue';
@@ -93,6 +90,8 @@ import {useLocalize} from '@/composables/useLocalize';
9390
import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
9491
import TablePagination from '@/components/Table/TablePagination.vue';
9592
import Spinner from '@/components/Spinner/Spinner.vue';
93+
import Tabs from '@/components/Tabs/Tabs.vue';
94+
import Tab from '@/components/Tabs/Tab.vue';
9695
9796
const props = defineProps({
9897
itemsPerPage: {

0 commit comments

Comments
 (0)