109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-dialog
|
|
v-model="dialogNotification"
|
|
max-width="50vw"
|
|
>
|
|
|
|
<v-card>
|
|
<v-toolbar color="pink" dark>
|
|
<v-toolbar-title>Task List Notification</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-icon>notifications</v-icon>
|
|
</v-toolbar>
|
|
<v-list two-line>
|
|
<template v-for="(item, index) in notification_list">
|
|
<v-list-tile :key="index" avatar ripple @click="updateNotification(item)">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>{{ item.NotificationType }}</v-list-tile-title>
|
|
<!-- <v-list-tile-sub-title class="text--primary">{{ item.headline }}</v-list-tile-sub-title> -->
|
|
<v-list-tile-sub-title v-html="item.NotificationDescription"
|
|
:style="{
|
|
whiteSpace: 'normal',
|
|
wordBreak: 'break-word',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 3,
|
|
WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden'
|
|
}"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
<v-list-tile-action>
|
|
<v-list-tile-action-text>{{ item.time_ago }}</v-list-tile-action-text>
|
|
<!-- <v-icon color="grey lighten-1">star_border</v-icon> -->
|
|
</v-list-tile-action>
|
|
</v-list-tile>
|
|
<v-divider v-if="index + 1 < notification_list.length" :key="`divider-${index}`"></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-card>
|
|
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap-text {
|
|
white-space: normal !important;
|
|
word-break: break-word;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3; /* jumlah baris maksimum */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bread-crumb {
|
|
margin-left: 20px;
|
|
font-weight: normal !important;
|
|
}
|
|
.v-badge__badge {
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
#topbar{
|
|
background-color: #F2E5D3;
|
|
}
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
components: {
|
|
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch("system/getlistnotif")
|
|
},
|
|
computed: {
|
|
notification_list() {
|
|
return this.$store.state.system.notification_list;
|
|
},
|
|
dialogNotification: {
|
|
get() {
|
|
return this.$store.state.system.dialogNotification
|
|
},
|
|
set(val) {
|
|
this.$store.commit("system/update_dialogNotification",val)
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
updateNotification(item) {
|
|
let prm = {
|
|
notif_id: item.NotificationID,
|
|
url: item.NotificationUrl,
|
|
type: item.NotificationType,
|
|
approve_level_id: item.NotificationDetailM_ApproveLevelID
|
|
}
|
|
this.$store.dispatch("system/readnotif", prm);
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
};
|
|
</script>
|