mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 18:11:07 +03:30
new C'hnages
This commit is contained in:
saeid
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="app-drawer"
|
||||
v-model="inputValue"
|
||||
app
|
||||
dark
|
||||
floating
|
||||
persistent
|
||||
mobile-break-point="991"
|
||||
width="260"
|
||||
>
|
||||
<v-img
|
||||
:src="image"
|
||||
height="100%"
|
||||
>
|
||||
<v-layout
|
||||
class="fill-height"
|
||||
tag="v-list"
|
||||
column
|
||||
>
|
||||
<v-list-tile avatar>
|
||||
<v-list-tile-avatar
|
||||
color="white"
|
||||
>
|
||||
<!-- <v-img
|
||||
:src="logo"
|
||||
height="34"
|
||||
contain
|
||||
/> -->
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-title class="title">
|
||||
{{ $store.state.user.name }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-divider/>
|
||||
<v-list-tile
|
||||
v-if="responsive"
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input search-input"
|
||||
label="Search..."
|
||||
color="purple"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<template v-for="(link, i) in links" >
|
||||
<v-list-tile
|
||||
v-if="!link.role || $hasRole(link.role)"
|
||||
:key="i"
|
||||
:to="link.to"
|
||||
:active-class="color"
|
||||
avatar
|
||||
class="v-list-item"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ link.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
<!-- <v-list-tile
|
||||
disabled
|
||||
active-class="primary"
|
||||
class="v-list-item v-list__tile--buy"
|
||||
to="/upgrade"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>mdi-package-up</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="font-weight-light">
|
||||
Upgrade To PRO
|
||||
</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-layout>
|
||||
</v-img>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
logo: './img/vuetifylogo.png',
|
||||
links: [
|
||||
{
|
||||
to: {name: 'Dashboard'},
|
||||
icon: 'mdi-view-dashboard',
|
||||
text: 'Dashboard'
|
||||
},
|
||||
{
|
||||
to: {name: 'MyInfo'},
|
||||
icon: 'mdi-account',
|
||||
text: 'My Info'
|
||||
},
|
||||
{
|
||||
to: {name: 'AllResultTest'},
|
||||
icon: 'description',
|
||||
text: 'All Test Result'
|
||||
},
|
||||
{
|
||||
to: {name: 'ManageUsers'},
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Manage Users',
|
||||
role: 'Admin|Supervisor',
|
||||
},
|
||||
{
|
||||
to: {name: 'ListTestType'},
|
||||
icon: 'fas fa-vial',
|
||||
text: 'List Test Type',
|
||||
role: 'Admin'
|
||||
},
|
||||
{
|
||||
to: {name: 'AllItem'},
|
||||
icon: 'done',
|
||||
text: 'Items',
|
||||
role: 'Admin'
|
||||
},
|
||||
{
|
||||
to: {name: 'AllPackage'},
|
||||
icon: 'done',
|
||||
text: 'Packages',
|
||||
role: 'Admin'
|
||||
},
|
||||
{
|
||||
to: {name: 'AllCycle'},
|
||||
icon: 'done',
|
||||
text: 'Cycles',
|
||||
role: 'Admin'
|
||||
},
|
||||
{
|
||||
to: {name: 'Statistics'},
|
||||
icon: 'fas fa-chart-bar',
|
||||
text: 'Statistics',
|
||||
},
|
||||
{
|
||||
to: {name: 'Tickets'},
|
||||
icon: 'fas fa-chart-bar',
|
||||
text: 'Tickets',
|
||||
},
|
||||
],
|
||||
responsive: false
|
||||
}),
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.$store.state.app.drawer
|
||||
},
|
||||
set (val) {
|
||||
this.setDrawer(val)
|
||||
}
|
||||
},
|
||||
items () {
|
||||
return this.$t('Layout.View.items')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
} else {
|
||||
this.responsive = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app-drawer {
|
||||
.v-list__tile {
|
||||
border-radius: 4px;
|
||||
|
||||
&--buy {
|
||||
margin-top: auto;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-image__image--contain {
|
||||
top: 9px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 30px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<v-menu
|
||||
:close-on-content-click="false"
|
||||
bottom
|
||||
left
|
||||
min-width="300"
|
||||
max-width="300"
|
||||
nudge-left="12"
|
||||
offset-x
|
||||
transition="slide-y-transition"
|
||||
>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
class="elevation-0"
|
||||
color="grey"
|
||||
dark
|
||||
fab
|
||||
fixed
|
||||
style="top: 96px;"
|
||||
top
|
||||
>
|
||||
<v-icon>mdi-settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout wrap>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Sidebar Filters</div>
|
||||
|
||||
<v-layout justify-center>
|
||||
<v-avatar
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
:class="[c === color ? 'color-active color-' + c: 'color-' + c]"
|
||||
size="23"
|
||||
|
||||
@click="setColor(c)"
|
||||
/>
|
||||
</v-layout>
|
||||
<v-divider class="mt-3"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Images</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="img in images"
|
||||
:key="img"
|
||||
xs3
|
||||
>
|
||||
<v-img
|
||||
:class="[image === img ? 'image-active' : '']"
|
||||
:src="img"
|
||||
height="120"
|
||||
@click.native="setImage(img)"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://www.creative-tim.com/product/vuetify-material-dashboard"
|
||||
target="_blank"
|
||||
color="success"
|
||||
block
|
||||
>
|
||||
Free Download
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://demos.creative-tim.com/vuetify-material-dashboard/documentation"
|
||||
target="_blank"
|
||||
class="white--text"
|
||||
color="primary"
|
||||
block
|
||||
>
|
||||
Documentation
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase">
|
||||
<div class=" sidebar-filter">
|
||||
Thank You for Sharing!
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
color="indigo"
|
||||
class="mr-2 v-btn-facebook"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="cyan"
|
||||
class="v-btn-twitter"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
colors: [
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger'
|
||||
],
|
||||
images: [
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-1.23832d31.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-3.3a54f533.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-4.3b7e38ed.jpg'
|
||||
]
|
||||
}),
|
||||
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
color () {
|
||||
return this.$store.state.app.color
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setImage']),
|
||||
setColor (color) {
|
||||
this.$store.state.app.color = color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar,
|
||||
.v-responsive {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="core-footer"
|
||||
absolute
|
||||
height="82"
|
||||
>
|
||||
<div class="footer-items">
|
||||
<span
|
||||
v-for="link in links"
|
||||
:key="link.name"
|
||||
>
|
||||
<a
|
||||
:href="link.Link"
|
||||
class="tertiary--text footer-links">{{ link.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<!-- <span class="font-weight-light copyright">
|
||||
©
|
||||
{{ (new Date()).getFullYear() }}
|
||||
<a
|
||||
href="https://www.creative-tim.com/"
|
||||
target="_blank">Creative Tim</a>, made with
|
||||
<v-icon
|
||||
color="tertiary"
|
||||
size="17">mdi-heart</v-icon>
|
||||
for a better web
|
||||
</span> -->
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
// { name: 'Powered By WillaMall', Link: 'https://www.willamall.com' },
|
||||
// { name: 'Home', Link: '/dashboard' },
|
||||
// { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
|
||||
// { name: 'About Us', Link: 'https://creative-tim.com/presentation' },
|
||||
// { name: 'Blog', Link: 'https://blog.creative-tim.com' }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-footer {
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<modal-base :show="getCurrentModal" width="70%" @close="closeModal">
|
||||
<component :is="getCurrentModal" v-bind="getModalProperties"></component>
|
||||
</modal-base>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
showModal: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('modal', [
|
||||
'changeCurrentModal'
|
||||
]),
|
||||
closeModal: function() {
|
||||
this.changeCurrentModal('');
|
||||
},
|
||||
},
|
||||
computed : {
|
||||
...mapGetters('modal',[
|
||||
'getCurrentModal', 'getModalProperties'
|
||||
])
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<v-toolbar
|
||||
id="core-toolbar"
|
||||
|
||||
flat
|
||||
prominent
|
||||
style="background: #eee;"
|
||||
>
|
||||
<div class="v-toolbar-title">
|
||||
<v-toolbar-title
|
||||
class="tertiary--text font-weight-light"
|
||||
>
|
||||
<v-btn
|
||||
v-if="responsive"
|
||||
class="default v-btn--simple"
|
||||
dark
|
||||
icon
|
||||
@click.stop="onClickBtn"
|
||||
>
|
||||
<v-icon>mdi-view-list</v-icon>
|
||||
</v-btn>
|
||||
{{ title }}
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-flex
|
||||
align-center
|
||||
layout
|
||||
py-2
|
||||
>
|
||||
<!-- <v-text-field
|
||||
v-if="responsiveInput"
|
||||
class="mr-4 mt-2 purple-input"
|
||||
label="Search..."
|
||||
hide-details
|
||||
color="purple"
|
||||
/> -->
|
||||
<v-menu
|
||||
:close-on-content-click="false"
|
||||
:nudge-width="200"
|
||||
offset-x
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
|
||||
<v-icon
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
v-on="on"
|
||||
color="tertiary">
|
||||
mdi-account
|
||||
</v-icon>
|
||||
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-tile avatar>
|
||||
<v-list-tile-avatar>
|
||||
<img src="https://cdn.vuetifyjs.com/images/john.jpg" :alt="name">
|
||||
</v-list-tile-avatar>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>{{ name }}</v-list-tile-title>
|
||||
<v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list>
|
||||
<router-link
|
||||
class="toolbar-items"
|
||||
:to="{name: 'MyInfo'}"
|
||||
>
|
||||
<v-list-tile >
|
||||
<v-list-tile-title class="black--text" >My Info</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</router-link>
|
||||
|
||||
|
||||
<router-link
|
||||
class="toolbar-items"
|
||||
:to="{name: 'Tickets'}"
|
||||
>
|
||||
<v-list-tile >
|
||||
<v-list-tile-title class="black--text" >My Ticket</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
</router-link>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
content-class="dropdown-menu"
|
||||
offset-y
|
||||
transition="slide-y-transition">
|
||||
<v-card>
|
||||
<v-list dense>
|
||||
<v-list-tile
|
||||
v-for="notification in notifications"
|
||||
:key="notification"
|
||||
@click="onClick"
|
||||
>
|
||||
<v-list-tile-title
|
||||
v-text="notification"
|
||||
/>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<v-badge class="toolbar-items Pointer" @click.native="submitLogout" >
|
||||
<v-icon color="tertiary">input</v-icon>
|
||||
</v-badge>
|
||||
</v-flex>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapMutations, mapActions
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike, John responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now a friend with Andrew',
|
||||
'Another Notification',
|
||||
'Another One'
|
||||
],
|
||||
title: null,
|
||||
responsive: false,
|
||||
responsiveInput: false,
|
||||
name: '',
|
||||
cell_number: '',
|
||||
}),
|
||||
|
||||
watch: {
|
||||
'$route' (val) {
|
||||
this.title = val.name
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.onResponsiveInverted();
|
||||
window.addEventListener('resize', this.onResponsiveInverted);
|
||||
this.cell_number = this.$store.state.user.cell_number;
|
||||
this.name = this.$store.state.user.name;
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
...mapActions('auth', ['logout']),
|
||||
onClickBtn () {
|
||||
this.setDrawer(!this.$store.state.app.drawer)
|
||||
},
|
||||
submitLogout () {
|
||||
this.logout();
|
||||
},
|
||||
onClick () {
|
||||
//
|
||||
},
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
this.responsiveInput = false
|
||||
} else {
|
||||
this.responsive = false
|
||||
this.responsiveInput = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-toolbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.Pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<div id="core-view">
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
<core-footer v-if="$route.name !== 'Maps'" />
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
metaInfo () {
|
||||
return {
|
||||
title: 'Vuetify Material Dashboard by CreativeTim'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-view {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user