Skip to content

Commit

Permalink
Merge pull request #7175 from ProcessMaker/feature/FOUR-17027
Browse files Browse the repository at this point in the history 
feature/FOUR-17027: A "cancelled" error is displayed when clicking on the ascending and descending options in notifications
  • Loading branch information
@ryancooley
ryancooley authored Aug 9, 2024
2 parents 8284cba + dd1abb9 commit 909da68
Showing 1 changed file with 105 additions and 90 deletions.
195 changes: 105 additions & 90 deletions resources/js/notifications/components/NotificationsList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,125 @@
<template>
<div class="data-table">
<div class="card-deck d-block d-sm-none">
<div
v-for="notification in data.data"
:key="notification.id"
class="card"
>
<div class="card-body shadow">
<div class="d-flex align-items-center mb-3">
<notification-user :notification="notification" />
<data-loading
v-show="loading"
:for="/notifications\?page/"
:empty="$t('No Data Available')"
:empty-desc="$t('')"
empty-icon="noData"
/>
<div v-show="!loading">
<div class="card-deck d-block d-sm-none">
<div
v-for="notification in data.data"
:key="notification.id"
class="card"
>
<div class="card-body shadow">
<div class="d-flex align-items-center mb-3">
<notification-user :notification="notification" />
</div>
<h5 class="card-title">
<notification-message
:notification="notification"
:show-time="showTime"
/>
</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ notification.read_at || 'N/A' }}
</h6>
<a
v-if="notification.data.url"
href="#"
@click="redirectToURL(notification.data.url)"
>More</a>
</div>
<h5 class="card-title">
<notification-message
:notification="notification"
:show-time="showTime"
/>
</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ notification.read_at || 'N/A' }}
</h6>
<a
v-if="notification.data.url"
href="#"
@click="redirectToURL(notification.data.url)"
>More</a>
</div>
</div>
</div>
<div class="card card-body table-card d-none d-sm-block">
<vuetable
:data-manager="dataManager"
:sort-order="sortOrder"
:css="css"
:api-mode="false"
:fields="fields"
:data="data"
data-path="data"
pagination-path="meta"
:no-data-template="$t('No Data Available')"
@vuetable:pagination-data="onPaginationData"
>
<!-- Change Status Slot -->
<template
slot="changeStatus"
slot-scope="props"
<div class="card card-body table-card d-none d-sm-block">
<vuetable
:data-manager="dataManager"
:sort-order="sortOrder"
:css="css"
:api-mode="false"
:fields="fields"
:data="data"
data-path="data"
pagination-path="meta"
:no-data-template="$t('No Data Available')"
@vuetable:pagination-data="onPaginationData"
>
<span
v-if="props.rowData.read_at === null"
style="cursor:pointer"
class="far fa-envelope fa-lg blue-envelope"
@click="read(props.rowData.id)"
/>

<span
v-if="props.rowData.read_at !== null"
style="cursor:pointer"
@click="unread(props.rowData)"
<!-- Change Status Slot -->
<template
slot="changeStatus"
slot-scope="props"
>
<i class="far fa-envelope-open fa-lg gray-envelope" />
</span>
</template>
<span
v-if="props.rowData.read_at === null"
style="cursor:pointer"
class="far fa-envelope fa-lg blue-envelope"
@click="read(props.rowData.id)"
/>

<!-- From Slot -->
<template
slot="from"
slot-scope="props"
>
<notification-user :notification="props.rowData" />
</template>
<span
v-if="props.rowData.read_at !== null"
style="cursor:pointer"
@click="unread(props.rowData)"
>
<i class="far fa-envelope-open fa-lg gray-envelope" />
</span>
</template>

<!-- Subject Slot -->
<template
slot="subject"
slot-scope="props"
>
<a
style="cursor: pointer;"
@click="redirectToURL(props.rowData.data?.url)"
<!-- From Slot -->
<template
slot="from"
slot-scope="props"
>
<span v-if="props.rowData.type === 'FILE_READY'" />
<span v-else>
<notification-message
:notification="props.rowData"
:style="{ fontSize: '14px' }"
/>
</span>
</a>
</template>
</vuetable>
<pagination
ref="pagination"
:single="$t('Task')"
:plural="$t('Tasks')"
:per-page-select-enabled="true"
@changePerPage="changePerPage"
@vuetable-pagination:change-page="onPageChange"
/>
<notification-user :notification="props.rowData" />
</template>

<!-- Subject Slot -->
<template
slot="subject"
slot-scope="props"
>
<a
style="cursor: pointer;"
@click="redirectToURL(props.rowData.data?.url)"
>
<span v-if="props.rowData.type === 'FILE_READY'" />
<span v-else>
<notification-message
:notification="props.rowData"
:style="{ fontSize: '14px' }"
/>
</span>
</a>
</template>
</vuetable>
<pagination
ref="pagination"
:single="$t('Task')"
:plural="$t('Tasks')"
:per-page-select-enabled="true"
@changePerPage="changePerPage"
@vuetable-pagination:change-page="onPageChange"
/>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
import { createUniqIdsMixin } from "vue-uniq-ids";
import datatableMixin from "../../components/common/mixins/datatable";
import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
import AvatarImage from "../../components/AvatarImage";
import NotificationMessage from "./notification-message";
import NotificationUser from "./notification-user";
const uniqIdsMixin = createUniqIdsMixin();
Vue.component("AvatarImage", AvatarImage);
export default {
Expand All @@ -115,13 +128,12 @@ export default {
NotificationUser,
AvatarImage,
},
mixins: [datatableMixin],
mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin],
props: ["filter", "filterComments", "type", "showTime"],
data() {
return {
response: null,
orderBy: "",
showTime: true,
sortOrder: [],
fields: [
{
Expand Down Expand Up @@ -290,6 +302,9 @@ export default {
.then((response) => {
this.response = response;
this.loading = false;
})
.catch(() => {
this.loading = false;
});
},
},
Expand Down

0 comments on commit 909da68

Please sign in to comment.