Skip to content

Commit

Permalink
pkp/pkp-lib#10618 Styling of email listing and individual notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
jardakotesovec committed Nov 27, 2024
1 parent 93bcb94 commit 138ef8e
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 12 deletions.
6 changes: 5 additions & 1 deletion src/composables/useDate.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,9 @@ export function useDate() {
return moment(dateString).format('DD-MM-YYYY');
}

return {calculateDaysBetweenDates, formatShortDate};
function formatDateAndTime(dateString) {
return moment(dateString).format('YYYY-MM-DD hh:mm A');
}

return {calculateDaysBetweenDates, formatShortDate, formatDateAndTime};
}
27 changes: 19 additions & 8 deletions src/pages/workflow/components/primary/WorkflowListingEmails.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,32 @@
<template>
<div v-if="emails?.length" class="border border-light p-4">
<div v-if="emails?.length" class="border border-light">
<h3 class="lg-bold m-3 text-heading">
{{ t('notification.notifications') }}
</h3>
<ul>
<li v-for="email in emails" :key="email.id">
<span>
<PkpButton is-link @click="openEmail(email.id)">
<li
v-for="email in emails"
:key="email.id"
class="flex items-center border-t border-light px-3 py-1"
>
<span class="flex-1 truncate">
<a
class="text cursor-pointer text-base-normal hover:underline"
@click.prevent="openEmail(email.id)"
>
{{ email.subject }}
</PkpButton>
</a>
</span>
<span class="ms-4 shrink-0 text-base-normal text-secondary">
{{ formatDateAndTime(email.dateSent) }}
</span>
<span>{{ formatShortDate(email.dateSent) }}</span>
</li>
</ul>
</div>
</template>

<script setup>
import {computed, watch} from 'vue';
import PkpButton from '@/components/Button/Button.vue';
import {useUrl} from '@/composables/useUrl';
import {useFetch} from '@/composables/useFetch';
Expand All @@ -29,7 +40,7 @@ const props = defineProps({
});
const {t} = useLocalize();
const {formatShortDate} = useDate();
const {formatDateAndTime} = useDate();
const {apiUrl} = useUrl('emails/authorEmails');
const requestQuery = computed(() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<template>
<div v-if="notificationsToDisplay?.length">
<div v-for="(notification, i) in notificationsToDisplay" :key="i">
{{ notification.text }}
<div v-if="notificationsToDisplay?.length" class="flex flex-row space-y-3">
<div
v-for="(notification, i) in notificationsToDisplay"
:key="i"
class="w-full border border-light p-3"
>
<h3 class="lg-bold text-heading">{{ notification.title }}</h3>
<p class="pt-2 text-base-normal">{{ notification.text }}</p>
</div>
</div>
</template>
Expand Down

0 comments on commit 138ef8e

Please sign in to comment.