Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/FOUR-17027: A "cancelled" error is displayed when clicking on the ascending and descending options in notifications #7175

Merged
merged 7 commits into from
Aug 9, 2024
Merged

feature/FOUR-17027: A "cancelled" error is displayed when clicking on the ascending and descending options in notifications #7175

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d4779c
feature/FOUR-17027
luNunezProcessmaker Jul 25, 2024
b1117c2
feature/FOUR-17027
luNunezProcessmaker Jul 25, 2024
a7a9f8b
feature/FOUR-17027
luNunezProcessmaker Jul 26, 2024
d1934e2
feature/FOUR-17027
luNunezProcessmaker Jul 31, 2024
31bd855
feature/FOUR-17027
luNunezProcessmaker Aug 1, 2024
4640723
feature/FOUR-17027
luNunezProcessmaker Aug 1, 2024
dd1abb9
feature/FOUR-17027
luNunezProcessmaker Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 105 additions & 90 deletions resources/js/notifications/components/NotificationsList.vue
View file
Open in desktop
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
Loading