Skip to content

Commit 3791f73

Browse files
taslangrahamtaslangraham
committed
pkp/pkp-lib#11576 code cleanup and refactor
1 parent 1aa752b commit 3791f73

10 files changed

+575
-364
lines changed

‎src/components/Icon/Icon.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
122122
import User from './icons/User.vue';
123123
import View from './icons/View.vue';
124124
import Workflow from './icons/Workflow.vue';
125+
import Content from './icons/Content.vue';
125126
126127
const svgIcons = {
127128
Add,
@@ -240,6 +241,7 @@ const svgIcons = {
240241
View,
241242
Workflow,
242243
OrcidUnauthenticated,
244+
Content,
243245
};
244246
245247
const props = defineProps({

‎src/components/Icon/icons/Content.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<svg
3+
width="18"
4+
height="18"
5+
viewBox="0 0 18 18"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M10.029 2.467H16.9042M10.029 4.5295H16.9042M10.029 6.592H16.9042M10.029 11.4048H16.9042M10.029 13.4672H16.9042M10.029 15.5297H16.9042M7.96874 16.219C7.96874 16.4013 7.89638 16.5761 7.76757 16.705C7.63875 16.834 7.46401 16.9066 7.28174 16.9067H1.78124C1.59897 16.9066 1.42423 16.834 1.29541 16.705C1.16659 16.5761 1.09424 16.4013 1.09424 16.219V10.7192C1.09424 10.537 1.16659 10.3622 1.29541 10.2332C1.42423 10.1042 1.59897 10.0317 1.78124 10.0315H7.28249C7.46476 10.0317 7.6395 10.1042 7.76832 10.2332C7.89713 10.3622 7.96949 10.537 7.96949 10.7192L7.96874 16.219ZM7.96874 7.28125C7.96874 7.46352 7.89638 7.63834 7.76757 7.7673C7.63875 7.89625 7.46401 7.9688 7.28174 7.969H1.78124C1.59897 7.9688 1.42423 7.89625 1.29541 7.7673C1.16659 7.63834 1.09424 7.46352 1.09424 7.28125V1.7815C1.09424 1.59923 1.16659 1.42441 1.29541 1.29545C1.42423 1.1665 1.59897 1.09395 1.78124 1.09375H7.28249C7.46476 1.09395 7.6395 1.1665 7.76832 1.29545C7.89713 1.42441 7.96949 1.59923 7.96949 1.7815L7.96874 7.28125Z"
11+
stroke="#006798"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
/>
15+
</svg>
16+
</template>

‎src/pages/userComments/UserCommentDetailModal.vue

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<SideModalBody>
3+
<template #pre-title>
4+
<span>{{ comment.id }}.</span>
5+
<span>{{ comment.publication.authorsStringShort }}</span>
6+
<span>;</span>
7+
<span>{{ comment.publication.fullTitle }}</span>
8+
</template>
9+
<template #title>
10+
{{ t('manager.userComment.viewDetailsCommentBy') }}
11+
</template>
12+
13+
<template #description>
14+
{{ comment.userName }}
15+
</template>
16+
17+
<div class="min-w-fit p-4">
18+
<div class="w-full bg-secondary">
19+
<div class="border-y border-e border-s border-light">
20+
<div class="flex h-full">
21+
<div class="flex-grow border-e border-light p-5">
22+
<Panel>
23+
<PanelSection>
24+
<template #header>
25+
<span class="font-bold text-heading">
26+
{{ t('manager.userComment.commentPreview') }}
27+
</span>
28+
</template>
29+
</PanelSection>
30+
31+
<PanelSection>
32+
<div>
33+
<span class="text-sm-light text-secondary">
34+
{{ formatShortDateTime(comment.createdAt) }}
35+
</span>
36+
37+
<div
38+
v-strip-unsafe-html="comment.commentText"
39+
class="mt-3 text-lg-normal"
40+
></div>
41+
<div class="mt-4">
42+
<div class="text-base-normal font-bold leading-5">
43+
{{ comment.userName }}
44+
</div>
45+
<div
46+
v-if="comment.userOrcidDisplayValue"
47+
class="mb-1 flex items-center"
48+
>
49+
<Icon
50+
:icon="
51+
comment.isUserOrcidAuthenticated
52+
? 'Orcid'
53+
: 'OrcidUnauthenticated'
54+
"
55+
/>
56+
<a
57+
class="text-sm-light text-secondary"
58+
target="_blank"
59+
:href="comment.userOrcidDisplayValue"
60+
>
61+
{{ comment.userOrcidDisplayValue }}
62+
</a>
63+
</div>
64+
65+
<div
66+
v-if="comment.userAffiliation"
67+
class="text-base-normal"
68+
>
69+
{{ comment.userAffiliation }}
70+
</div>
71+
</div>
72+
</div>
73+
</PanelSection>
74+
</Panel>
75+
<div class="mt-6">
76+
<UserCommentReportsTable
77+
:items="userCommentStore.currentCommentReports"
78+
/>
79+
</div>
80+
</div>
81+
<div class="w-96 border-s border-light">
82+
<div class="border-b border-light p-8">
83+
<div class="text-lg-normal">
84+
<span v-if="comment.isApproved">
85+
{{
86+
t('manager.userComment.approved.note', {
87+
approvedBy: comment.approvedByUserName,
88+
approvedAt: formatShortDate(comment.approvedAt),
89+
})
90+
}}
91+
</span>
92+
<span v-else>
93+
{{ t('manager.userComment.approval.warning') }}
94+
</span>
95+
</div>
96+
</div>
97+
<div class="flex flex-col items-start space-y-4 p-4">
98+
<PkpButton
99+
:is-primary="!comment.isApproved"
100+
:is-disabled="comment.isApproved"
101+
@click="userCommentStore.commentToggleApproval(true)"
102+
>
103+
{{ t('manager.userComment.approveComment') }}
104+
</PkpButton>
105+
<PkpButton
106+
:is-warnable="true"
107+
@click="userCommentStore.commentDelete(comment)"
108+
>
109+
{{ t('manager.userComment.deleteComment') }}
110+
</PkpButton>
111+
112+
<PkpButton
113+
:is-disabled="!comment.isApproved"
114+
@click="userCommentStore.commentToggleApproval(false)"
115+
>
116+
{{ t('manager.userComment.hideComment') }}
117+
</PkpButton>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</SideModalBody>
125+
</template>
126+
127+
<script setup>
128+
import SideModalBody from '@/components/Modal/SideModalBody.vue';
129+
import Panel from '@/components/Panel/Panel.vue';
130+
import PanelSection from '@/components/Panel/PanelSection.vue';
131+
import PkpButton from '@/components/Button/Button.vue';
132+
import Icon from '@/components/Icon/Icon.vue';
133+
import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
134+
import {useLocalize} from '@/composables/useLocalize';
135+
import {useDate} from '@/composables/useDate';
136+
import UserCommentReportsTable from '@/pages/userComments/UserCommentReportsTable.vue';
137+
138+
const {formatShortDate, formatShortDateTime} = useDate();
139+
const {t} = useLocalize();
140+
141+
const userCommentStore = useUserCommentStore();
142+
const comment = userCommentStore.currentComment;
143+
</script>

‎src/pages/userComments/UserCommentReportDetail.vue

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/pages/userComments/UserCommentReportDetailModal.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<SideModalBody>
3+
<template #title>
4+
{{ t('manager.userComment.viewReportDetailsBy') }}
5+
</template>
6+
7+
<template #description>
8+
{{ report.userName }}
9+
</template>
10+
11+
<div class="min-w-fit p-4">
12+
<div class="w-full bg-secondary">
13+
<div class="border-y border-e border-s border-light">
14+
<div class="flex h-full">
15+
<div class="flex-grow border-e border-light p-5">
16+
<Panel>
17+
<PanelSection>
18+
<template #header>
19+
<span class="font-bold text-heading">
20+
{{ t('manager.userComment.reportPreview') }}
21+
</span>
22+
</template>
23+
</PanelSection>
24+
25+
<PanelSection>
26+
<div>
27+
<span class="text-sm-light text-secondary">
28+
{{ formatShortDateTime(report.createdAt) }}
29+
</span>
30+
31+
<div
32+
v-strip-unsafe-html="report.note"
33+
class="mt-3 text-lg-normal"
34+
></div>
35+
<div class="mt-4">
36+
<div class="text-base-normal font-bold leading-5">
37+
{{ report.userName }}
38+
</div>
39+
<div
40+
v-if="report.userOrcidDisplayValue"
41+
class="mb-1 flex items-center"
42+
>
43+
<Icon
44+
:icon="
45+
report.isUserOrcidAuthenticated
46+
? 'Orcid'
47+
: 'OrcidUnauthenticated'
48+
"
49+
/>
50+
<a
51+
class="text-sm-light text-secondary"
52+
target="_blank"
53+
:href="report.userOrcidDisplayValue"
54+
>
55+
{{ report.userOrcidDisplayValue }}
56+
</a>
57+
</div>
58+
59+
<div
60+
v-if="report.userAffiliation"
61+
class="text-base-normal"
62+
>
63+
{{ report.userAffiliation }}
64+
</div>
65+
</div>
66+
</div>
67+
</PanelSection>
68+
</Panel>
69+
</div>
70+
<div class="w-96 border-s border-light">
71+
<div class="flex flex-col items-start space-y-4 p-4">
72+
<PkpButton
73+
:is-warnable="true"
74+
@click="userCommentStore.reportDelete(report)"
75+
>
76+
{{ t('manager.userComment.deleteReport') }}
77+
</PkpButton>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</SideModalBody>
85+
</template>
86+
87+
<script setup>
88+
import SideModalBody from '@/components/Modal/SideModalBody.vue';
89+
import {useDate} from '@/composables/useDate';
90+
import PanelSection from '@/components/Panel/PanelSection.vue';
91+
import Icon from '@/components/Icon/Icon.vue';
92+
import Panel from '@/components/Panel/Panel.vue';
93+
import PkpButton from '@/components/Button/Button.vue';
94+
import {useUserCommentStore} from '@/pages/userComments/userCommentStore';
95+
96+
const {formatShortDateTime} = useDate();
97+
98+
defineProps({
99+
/** The report to display information about */
100+
report: {
101+
type: Object,
102+
required: true,
103+
},
104+
});
105+
106+
const userCommentStore = useUserCommentStore();
107+
</script>

0 commit comments

Comments
 (0)