Skip to content

Instantly share code, notes, and snippets.

@isogunro

isogunro/c-close.js

Created September 29, 2019 20:56
Show Gist options
  • Save isogunro/dbfffd156122d5b9a1cc147f34ebd6b7 to your computer and use it in GitHub Desktop.
Save isogunro/dbfffd156122d5b9a1cc147f34ebd6b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
c-close.js
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>
`
});
Raw
c-notstarted.js
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>
`
});
Raw
c-open.js
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>
`
});
Raw
c-tblProgress.js
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>
`
});
Raw
helpDeskDashBoard.html
<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>
Raw
helpDeskDashBoard.js
//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