isogunro/c-close.js

## 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>
    `
});


## 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>
    `
});


## 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>
    `
});


## 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>
    `
});

## 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>

## 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
            })
        }
    }
})

	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>
	`
	});

	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>
	`
	});

	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>
	`
	});
	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>
	`
	});
	<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>

	//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
	})
	}
	}
	})