310 lines
8.6 KiB
Vue
310 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-row>
|
|
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
|
|
{{ obj }}
|
|
<v-col rows="12">
|
|
<v-timeline :dense="$vuetify.breakpoint.smAndDown">
|
|
<v-timeline-item v-for="i in obj" :key="i.id" fill-dot>
|
|
<v-card :outlined="$store.state.darkMode">
|
|
<v-card-title>{{ i.name }}</v-card-title>
|
|
<v-card-subtitle
|
|
>{{ i.uicreated }} - {{ i.uievent }}</v-card-subtitle
|
|
>
|
|
<v-card-text
|
|
><v-icon large class="mr-2">{{ i.icon }}</v-icon
|
|
>{{ i.uiayatype }}
|
|
<div class="mt-4" v-if="i.message">{{ i.message }}</div>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn text @click="deleteItem(i)">{{ $ay.t("Delete") }}</v-btn>
|
|
<v-btn text @click="openSubscription(i)">{{
|
|
$ay.t("NotifySubscription")
|
|
}}</v-btn>
|
|
<v-btn text @click="openItem(i)">{{ $ay.t("Open") }}</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!--
|
|
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
|
|
|
|
|
|
<v-list three-line>
|
|
<template v-for="item in obj">
|
|
<v-list-item :key="item.id">
|
|
<v-list-item-avatar>
|
|
<v-icon @click="openItem(item)" large>{{ item.icon }}</v-icon>
|
|
</v-list-item-avatar>
|
|
<v-list-item-content>
|
|
<v-list-item-title
|
|
>{{ item.uiayatype }} {{ item.uicreated }}</v-list-item-title
|
|
>
|
|
<v-list-item-subtitle
|
|
v-html="subtitleHtml(item)"
|
|
></v-list-item-subtitle>
|
|
<div>
|
|
<v-icon>fa-trash-alt</v-icon>
|
|
<v-icon>fa-bell</v-icon>
|
|
</div>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</template>
|
|
</v-list> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const FORM_KEY = "notification-subscriptions";
|
|
export default {
|
|
async created() {
|
|
let vm = this;
|
|
try {
|
|
await initForm(vm);
|
|
|
|
window.$gz.eventBus.$on("menu-click", clickHandler);
|
|
generateMenu(vm, false);
|
|
await vm.getDataFromApi();
|
|
} catch (err) {
|
|
window.$gz.errorHandler.handleFormError(err, vm);
|
|
} finally {
|
|
vm.formState.ready = true;
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
window.$gz.eventBus.$off("menu-click", clickHandler);
|
|
},
|
|
data() {
|
|
return {
|
|
selectLists: {
|
|
eventTypes: {},
|
|
ayaTypes: {}
|
|
},
|
|
obj: [],
|
|
formState: {
|
|
ready: false,
|
|
dirty: false,
|
|
valid: true,
|
|
readOnly: false,
|
|
loading: true,
|
|
errorBoxMessage: null,
|
|
appError: null,
|
|
serverError: {}
|
|
},
|
|
rights: window.$gz.role.defaultRightsObject()
|
|
};
|
|
},
|
|
methods: {
|
|
openItem(item) {
|
|
window.$gz.eventBus.$emit("openobject", {
|
|
type: item.ayaType,
|
|
id: item.objectId
|
|
});
|
|
},
|
|
openSubscription(item) {
|
|
window.$gz.eventBus.$emit("openobject", {
|
|
type: window.$gz.type.NotifySubscription,
|
|
id: item.notifySubscriptionId
|
|
});
|
|
},
|
|
deleteItem(item) {},
|
|
|
|
async getDataFromApi() {
|
|
let vm = this;
|
|
|
|
try {
|
|
window.$gz.form.deleteAllErrorBoxErrors(vm);
|
|
|
|
let res = await window.$gz.api.get("notify/app-notifications");
|
|
|
|
if (res.error) {
|
|
//Not found?
|
|
if (res.error.code == "2010") {
|
|
//notify not found error then navigate backwards
|
|
window.$gz.eventBus.$emit("notify-error", vm.$ay.t("ErrorAPI2010"));
|
|
// navigate backwards
|
|
window.$gz._.delay(function() {
|
|
vm.$router.go(-1);
|
|
}, 2000);
|
|
}
|
|
vm.formState.serverError = res.error;
|
|
window.$gz.form.setErrorBoxErrors(vm);
|
|
} else {
|
|
//pre-make the display list object
|
|
//source object:
|
|
//[ { "id": 1, "concurrency": 18835104, "userId": 1, "created": "2020-07-20T19:35:49.665888Z", "ayaType": 2,
|
|
// "objectId": 101, "eventType": 2, "notifySubscriptionId": 1, "message": null, "fetched": true } ]
|
|
//display object:
|
|
//{event:"",objectname:"",objecttype:null,icon:null,eventdate:null,openurl:null,suburl:null,eventid}
|
|
|
|
let temp = res.data;
|
|
|
|
let timeZoneName = window.$gz.locale.getBrowserTimeZoneName();
|
|
let languageName = window.$gz.locale.getBrowserLanguages();
|
|
let hour12 = window.$gz.store.state.locale.hour12;
|
|
for (let i = 0; i < temp.length; i++) {
|
|
temp[
|
|
i
|
|
].uicreated = window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
|
temp[i].created,
|
|
timeZoneName,
|
|
languageName,
|
|
hour12
|
|
);
|
|
|
|
temp[i]["uievent"] = vm.selectLists.eventTypes.find(
|
|
z => z.id == temp[i].eventType
|
|
).name;
|
|
|
|
temp[i]["uiayatype"] = vm.selectLists.ayaTypes.find(
|
|
z => z.id == temp[i].ayaType
|
|
).name;
|
|
|
|
temp[i].icon = window.$gz.util.iconForType(temp[i].ayaType);
|
|
|
|
if (!temp[i].message) {
|
|
temp[i].message =
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique aliquam luctus. Suspendisse molestie lacus ac varius cursus. Praesent facilisis sem quam, vitae tincidunt ligula porttitor maximus. Sed quis mi commodo, dictum nunc sed, elementum leo. In tincidunt porta risus, et tristique orci congue at.";
|
|
}
|
|
}
|
|
|
|
vm.obj = [...temp];
|
|
|
|
//modify the menu as necessary
|
|
generateMenu(vm);
|
|
//Update the form status
|
|
window.$gz.form.setFormState({
|
|
vm: vm,
|
|
dirty: false,
|
|
valid: true,
|
|
loading: false
|
|
});
|
|
}
|
|
} catch (error) {
|
|
window.$gz.errorHandler.handleFormError(error, vm);
|
|
} finally {
|
|
window.$gz.form.setFormState({
|
|
vm: vm,
|
|
loading: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/////////////////////////////
|
|
//
|
|
//
|
|
async function clickHandler(menuItem) {
|
|
if (!menuItem) {
|
|
return;
|
|
}
|
|
let m = window.$gz.menu.parseMenuItem(menuItem);
|
|
if (m.owner == FORM_KEY && !m.disabled) {
|
|
switch (m.key) {
|
|
// case "new":
|
|
// m.vm.$router.push({
|
|
// name: "home-notify-subscription",
|
|
// params: { recordid: 0 }
|
|
// });
|
|
// break;
|
|
// case "extensions":
|
|
// let res = await m.vm.$refs.extensions.open();
|
|
// break;
|
|
|
|
default:
|
|
window.$gz.eventBus.$emit(
|
|
"notify-warning",
|
|
FORM_KEY + "::context click: [" + m.key + "]"
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
//////////////////////
|
|
//
|
|
//
|
|
function generateMenu(vm) {
|
|
let menuOptions = {
|
|
isMain: true,
|
|
icon: "fa-bell",
|
|
title: "Notifications",
|
|
helpUrl: "form-home-notifications",
|
|
menuItems: []
|
|
};
|
|
|
|
// if (vm.rights.change) {
|
|
// menuOptions.menuItems.push({
|
|
// title: "New",
|
|
// icon: "fa-plus",
|
|
// surface: true,
|
|
// key: FORM_KEY + ":new",
|
|
// vm: vm
|
|
// });
|
|
// }
|
|
|
|
// //STUB REPORTS
|
|
// //Report not Print, print is a further option
|
|
// menuOptions.menuItems.push({
|
|
// title: "Report",
|
|
// icon: "fa-file-alt",
|
|
// key: FORM_KEY + ":report",
|
|
// vm: vm
|
|
// });
|
|
|
|
// menuOptions.menuItems.push({
|
|
// title: "stub: Last report used",
|
|
// icon: "fa-file-alt",
|
|
// key: FORM_KEY + ":report:STUBlastusedreportid",
|
|
// vm: vm
|
|
// });
|
|
|
|
// menuOptions.menuItems.push({
|
|
// title: "Extensions",
|
|
// icon: "fa-puzzle-piece",
|
|
// key: FORM_KEY + ":extensions",
|
|
// vm: vm
|
|
// });
|
|
window.$gz.eventBus.$emit("menu-change", menuOptions);
|
|
}
|
|
/////////////////////////////////
|
|
//
|
|
//
|
|
async function initForm(vm) {
|
|
await fetchTranslatedText(vm);
|
|
await populateSelectionLists(vm);
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////
|
|
//
|
|
// Ensures UI translated text is available
|
|
//
|
|
async function fetchTranslatedText(vm) {
|
|
await window.$gz.translation.cacheTranslations(["NotifySubscription"]);
|
|
}
|
|
|
|
//////////////////////
|
|
//
|
|
//
|
|
async function populateSelectionLists(vm) {
|
|
//ensure the pick lists required are pre-fetched
|
|
await window.$gz.enums.fetchEnumList("NotifyEventType");
|
|
|
|
vm.selectLists.eventTypes = window.$gz.enums.getSelectionList(
|
|
"NotifyEventType"
|
|
);
|
|
|
|
// await window.$gz.enums.fetchEnumList("NotifyDeliveryMethod");
|
|
// vm.selectLists.deliveryMethods = window.$gz.enums.getSelectionList(
|
|
// "NotifyDeliveryMethod"
|
|
// );
|
|
|
|
await window.$gz.enums.fetchEnumList("ayatype");
|
|
vm.selectLists.ayaTypes = window.$gz.enums.getSelectionList("ayatype");
|
|
}
|
|
</script>
|