This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.component("close-ticket-count", { | |
props: ["hdCloseCount"], | |
template: ` | |
<v-card max-width="344" class="mx-auto" color="info"> | |
<v-card-title><span class="white--text">Closed</span></v-card-title> | |
<v-card-text><span class="white--text">{{hdCloseCount}}</span></v-card-text> | |
</v-card> | |
` | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.component("notstarted-ticket-count", { | |
props: ["hdNotStarted"], | |
template: ` | |
<v-card max-width="344" class="mx-auto" color="warning"> | |
<v-card-title><span class="white--text">Not Started</span></v-card-title> | |
<v-card-text><span class="white--text">{{hdNotStarted}}</span></v-card-text> | |
</v-card> | |
` | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.component("open-ticket-count", { | |
props: ["hdOpenCount"], | |
template: `<v-card max-width="344" class="mx-auto" color="success"> | |
<v-card-title><span class="white--text">Open</span></v-card-title> | |
<v-card-text><span class="white--text">{{hdOpenCount}}</span></v-card-text> | |
</v-card> | |
` | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Vue.component("tbl-in-progress", { | |
props: ["helpDesk"], | |
template: `<v-simple-table dense> | |
<thead> | |
<tr> | |
<th class="text-left">Name</th> | |
<th class="text-left">OfficePhone</th> | |
<th class="text-left">Location</th> | |
<th class="text-left">Email</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr v-for='item in helpDesk'> | |
<td>{{item.Title}}</td> | |
<td>{{item.OfficePhone}}</td> | |
<td>{{item.Location}}</td> | |
<td>{{item.Email}}</td> | |
</tr> | |
</tbody> | |
</v-simple-table> | |
` | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<title></title> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" /> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" /> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.css" /> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" | |
integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" /> | |
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.js"></script> | |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
<style> | |
/* This style changes all the colors to a light grey*/ | |
.v-application--wrap { | |
background-color: #eeeeee; | |
} | |
#contentRow { | |
background-color: #eeeeee; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="app"> | |
<v-app id="inspire"> | |
<v-app-bar color="deep-purple accent-4" dense app clipped-left dark> | |
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon> | |
<v-toolbar-title>Help Desk Dashboard</v-toolbar-title> | |
<v-spacer></v-spacer> | |
<!-- <v-btn icon> | |
<v-icon>mdi-heart</v-icon> | |
</v-btn> --> | |
<v-btn icon @click="search"> | |
<v-icon>mdi-magnify</v-icon> | |
</v-btn> | |
</v-app-bar> | |
<!--- Navigation Drawer Begins ---> | |
<v-navigation-drawer v-model="drawer" height="initial" clipped app> | |
<v-list-item> | |
<v-list-item-content> | |
<v-list-item-title class="title"> | |
Application | |
</v-list-item-title> | |
<v-list-item-subtitle> | |
subtext | |
</v-list-item-subtitle> | |
</v-list-item-content> | |
</v-list-item> | |
<v-divider></v-divider> | |
<v-list dense nav> | |
<v-list-item v-for="item in items" :key="item.title" link> | |
<v-list-item-icon> | |
<a :href="item.url"> | |
<v-icon>{{ item.icon }}</v-icon> | |
</a> | |
</v-list-item-icon> | |
<v-list-item-content> | |
<v-list-item-title>{{ item.title }}</v-list-item-title> | |
</v-list-item-content> | |
</v-list-item> | |
</v-list> | |
</v-navigation-drawer> | |
<!--- Navigation Drawer Ends ---> | |
<v-content> | |
<v-container class="grey lighten-2"> | |
<v-row no-gutters dense> | |
<v-col> | |
<open-ticket-count v-bind:hd-open-count="counts.open"></open-ticket-count> | |
</v-col> | |
<v-col> | |
<notstarted-ticket-count v-bind:hd-not-started="counts.notStarted"> | |
</notstarted-ticket-count> | |
</v-col> | |
<v-col> | |
<close-ticket-count :hd-close-count="counts.closed"></close-ticket-count> | |
</v-col> | |
</v-row> | |
<v-row> | |
<v-col> | |
<v-card> | |
<tbl-in-progress v-bind:help-desk="helpDeskData"></tbl-in-progress> | |
</v-card> | |
</v-col> | |
</v-row> | |
</v-container> | |
</v-content> | |
</v-app> | |
</div> | |
</body> | |
<script type="text/javascript" | |
src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdeskDashboard/components/c-notstarted.js"></script> | |
<script type="text/javascript" | |
src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdeskDashboard/components/c-close.js"></script> | |
<script type="text/javascript" | |
src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdeskDashboard/components/c-open.js"></script> | |
<script type="text/javascript" | |
src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdeskDashboard/components/c-tblProgress.js"></script> | |
<script type="text/javascript" | |
src="/sites/SharePointSaturdays/SPSaturday/webpart/helpdeskDashboard/helpDeskDashBoard.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Hide all elements on the page. Needs to be blank | |
document.getElementById("DeltaPlaceHolderPageTitleInTitleArea").style.display = "none" | |
document.getElementById("sideNavBox").style.display = "none"; | |
document.getElementById("s4-titlerow").style.display = "none"; | |
document.getElementById("RibbonContainer").style.display = "none"; | |
document.getElementById("s4-ribbonrow").style.display = "none"; | |
document.getElementById("suiteBarTop").style.display = "none"; | |
document.getElementById("DeltaSiteLogo").style.display = "none"; | |
new Vue({ | |
el: '#app', | |
vuetify: new Vuetify(), | |
data() { | |
return { | |
drawer: false, | |
helpDeskData: [], | |
openCount: 0, | |
notStartedCount: 0, | |
closeCount: 0, | |
items: [ | |
{ title: 'Home', icon: 'fas fa-home', url: 'https://isogunro.sharepoint.com/sites/SharePointSaturdays/SPSaturday/SitePages/SharePoint-Saturday-Demo.aspx' }, | |
{ title: 'Help Desk List', icon: 'fas fa-desktop', url: 'https://isogunro.sharepoint.com/sites/SharePointSaturdays/SPSaturday/Lists/helpdesk/AllItems.aspx' }, | |
{ title: 'Help Desk Form', icon: 'mdi-help-box', url: 'https://isogunro.sharepoint.com/sites/SharePointSaturdays/SPSaturday/SitePages/helpdesk.aspx' }, | |
{ title: 'Another Dashboard', icon: 'fas fa-chart-line', url: 'https://isogunro.sharepoint.com/sites/SharePointSaturdays/SPSaturday/SitePages/toolbarnavigations.aspx' } | |
], | |
right: null, | |
} | |
}, | |
created: async function () { | |
await this.getListData(); | |
}, | |
methods: { | |
getListData: async function () { | |
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('helpdesk')/items"; | |
var vm = this; | |
await axios.get(endPointUrl).then(function (response) { | |
vm.helpDeskData = response.data.value; | |
console.log(vm.helpDeskData) | |
}) | |
.catch(function (error) { | |
console.log(error); | |
}) | |
.then(function () { | |
console.log("Always executes") | |
}) | |
}, | |
search: function () { | |
alert("Develop Search Functionality...") | |
} | |
}, | |
computed: { | |
counts() { | |
return this.helpDeskData.reduce((acc, item) => { | |
const status = item.Status.toUpperCase() | |
if (status === 'OPEN') { | |
acc.open++ | |
} else if (status === 'NOT STARTED') { | |
acc.notStarted++ | |
} else if (status === 'CLOSE') { | |
acc.closed++ | |
} | |
return acc | |
}, { | |
open: 0, | |
notStarted: 0, | |
closed: 0 | |
}) | |
} | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment