new Changes

This commit is contained in:
saeid
2019-08-21 13:59:18 +04:30
parent b9cadbedc5
commit f7c3e87e5f
127 changed files with 216 additions and 21 deletions
-199
View File
@@ -1,199 +0,0 @@
<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: '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>
-161
View File
@@ -1,161 +0,0 @@
<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>
@@ -1,50 +0,0 @@
<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">
&copy;
{{ (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>
@@ -1,33 +0,0 @@
<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>
@@ -1,195 +0,0 @@
<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>
-26
View File
@@ -1,26 +0,0 @@
<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>
@@ -1,49 +0,0 @@
<template>
<div
:style="styles"
:class="classes"
class="v-offset"
>
<slot />
</div>
</template>
<script>
export default {
props: {
fullWidth: {
type: Boolean,
default: false
},
offset: {
type: [Number, String],
default: 0
}
},
computed: {
classes () {
return {
'v-offset--full-width': this.fullWidth
}
},
styles () {
return {
top: `-${this.offset}px`,
marginBottom: `-${this.offset}px`
}
}
}
}
</script>
<style>
.v-offset {
margin: 0 auto;
max-width: calc(100% - 32px);
position: relative;
}
.v-offset--full-width {
max-width: 100%;
}
</style>
-16
View File
@@ -1,16 +0,0 @@
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
'@/components', true, /\.vue$/
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
)
Vue.component(componentName, componentConfig.default || componentConfig)
})
@@ -1,118 +0,0 @@
<template>
<v-card
v-bind="$attrs"
:style="styles"
v-on="$listeners"
>
<helper-offset
v-if="hasOffset"
:inline="inline"
:full-width="fullWidth"
:offset="offset"
>
<v-card
v-if="!$slots.offset"
:color="color"
:class="`elevation-${elevation}`"
class="v-card--material__header"
dark
>
<slot
v-if="!title && !text"
name="header"
/>
<span v-else>
<h4
class="title font-weight-light mb-2"
v-text="title"
/>
<p
class="category font-weight-thin"
v-text="text"
/>
</span>
</v-card>
<slot
v-else
name="offset"
/>
</helper-offset>
<v-card-text>
<slot />
</v-card-text>
<v-divider
v-if="$slots.actions"
class="mx-3"
/>
<v-card-actions v-if="$slots.actions">
<slot name="actions" />
</v-card-actions>
</v-card>
</template>
<script>
export default {
inheritAttrs: false,
props: {
color: {
type: String,
default: 'secondary'
},
elevation: {
type: [Number, String],
default: 10
},
inline: {
type: Boolean,
default: false
},
fullWidth: {
type: Boolean,
default: false
},
offset: {
type: [Number, String],
default: 24
},
title: {
type: String,
default: undefined
},
text: {
type: String,
default: undefined
}
},
computed: {
hasOffset () {
return this.$slots.header ||
this.$slots.offset ||
this.title ||
this.text
},
styles () {
if (!this.hasOffset) return null
return {
marginBottom: `${this.offset}px`,
marginTop: `${this.offset * 2}px`
}
}
}
}
</script>
<style lang="scss">
.v-card--material {
&__header {
&.v-card {
border-radius: 4px;
}
}
}
</style>
@@ -1,67 +0,0 @@
<template>
<v-card :class="color">
<v-container>
<v-layout row wrap>
<v-flex xs7>
<v-card-text primary-text :class="aligntext">
<div>
<div class="headline WM-NoLetterSpacing-7">{{title}}</div>
<div class="subheading WM-LightGray-color">{{text}}</div>
<div></div>
</div>
</v-card-text>
</v-flex>
<v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'150px'}">
</v-flex>
</v-layout>
</v-container>
</v-card>
</template>
<script>
export default {
props: {
bordercolor: {
type: String,
default: () => ''
},
title: {
type: String,
default: () => ''
},
text: {
type: String,
default: () => ''
},
icon: {
type: String,
default: () => ''
},
color : {
type: String,
default: () => ''
},
column : {
type: String,
default: () => ''
},
aligntext : {
type: String,
default: () => ''
},
alignimg : {
type: String,
default: () => ''
}
},
data () {
return {
}
},
computed: {
}
}
</script>
@@ -1,85 +0,0 @@
<template>
<material-card
v-bind="$attrs"
class="v-card--material-chart"
v-on="$listeners"
>
<chartist
slot="header"
:data="data"
:event-handlers="eventHandlers"
:options="options"
:ratio="ratio"
:responsive-options="responsiveOptions"
:type="type"
/>
<slot />
<slot
slot="actions"
name="actions"
/>
</material-card>
</template>
<script>
export default {
inheritAttrs: false,
props: {
data: {
type: Object,
default: () => ({})
},
eventHandlers: {
type: Array,
default: () => ([])
},
options: {
type: Object,
default: () => ({})
},
ratio: {
type: String,
default: undefined
},
responsiveOptions: {
type: Array,
default: () => ([])
},
type: {
type: String,
required: true,
validator: v => ['Bar', 'Line', 'Pie'].includes(v)
}
}
}
</script>
<style lang="scss">
.v-card--material-chart {
.v-card--material__header {
.ct-label {
color: inherit;
opacity: .7;
font-size: 0.975rem;
font-weight: 100;
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut {
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area {
fill: rgba(255,255,255,.4);
}
}
}
</style>
@@ -1,35 +0,0 @@
<template>
<v-alert
v-bind="$attrs"
:class="[`elevation-${elevation}`]"
:value="value"
class="v-alert--notification"
v-on="$listeners"
>
<slot />
</v-alert>
</template>
<script>
export default {
inheritAttrs: false,
props: {
elevation: {
type: [Number, String],
default: 6
},
value: {
type: Boolean,
default: true
}
}
}
</script>
<style>
.v-alert--notification {
border-radius: 4px !important;
border-top: none !important;
}
</style>
@@ -1,126 +0,0 @@
<template>
<material-card
v-bind="$attrs"
class="v-card--material-stats"
v-on="$listeners"
>
<v-card
slot="offset"
:class="`elevation-${elevation}`"
:color="color"
class="pa-4"
dark
>
<v-icon
size="40"
>
{{ icon }}
</v-icon>
</v-card>
<div class="text-xs-right">
<p
class="category grey--text font-weight-light"
v-text="title"
/>
<h3
class="title display-1 font-weight-light">
{{ value }} <small>{{ smallValue }}</small>
</h3>
</div>
<template slot="actions">
<v-icon
:color="subIconColor"
size="20"
class="mr-2"
>
{{ subIcon }}
</v-icon>
<span
:class="subTextColor"
class="caption font-weight-light"
v-text="subText"
/>
</template>
</material-card>
</template>
<script>
import Card from './Card'
export default {
inheritAttrs: false,
props: {
...Card.props,
icon: {
type: String,
required: true
},
subIcon: {
type: String,
default: undefined
},
subIconColor: {
type: String,
default: undefined
},
subTextColor: {
type: String,
default: undefined
},
subText: {
type: String,
default: undefined
},
title: {
type: String,
default: undefined
},
value: {
type: String,
default: undefined
},
smallValue: {
type: String,
default: undefined
}
}
}
</script>
<style lang="scss">
.v-card--material-stats {
display: flex;
flex-wrap: wrap;
position: relative;
.v-offset {
display: inline-block;
flex: 0 1;
margin-top: 0;
margin-left: 0;
margin-right: auto;
margin-bottom: 0 !important;
max-width: auto;
padding: 0 16px 0;
}
.v-card {
border-radius: 4px;
flex: 0 1 auto;
}
.v-card__text {
display: inline-block;
position: absolute;
top: 0;
right: 0;
width: 100%;
}
.v-card__actions {
flex: 1 0 100%;
}
}
</style>
@@ -1,76 +0,0 @@
<template>
<transition name="fade">
<div class="mng-modal" @click="close" v-show="show">
<transition name="slide">
<div class="mng-modal-container" :style="{'width':width}" v-if="show" @click.stop>
<slot>this is sample content</slot>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
props: ["show", "width"],
methods: {
close: function() {
this.$emit("close");
}
},
mounted: function() {
document.addEventListener("keydown", e => {
if (this.show && e.keyCode == 27) {
this.close();
}
});
}
};
</script>
<style lang="scss">
.mng-modal {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
overflow-y: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 10000001;
}
.mng-modal-container {
margin: 30px auto;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .15s linear;
-webkit-transition: opacity .15s linear;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.slide-enter,
.slide-leave-to {
-webkit-transform: translate(0, -35%);
-ms-transform: translate(0, -35%);
-o-transform: translate(0, -35%);
transform: translate(0, -35%);
}
.slide-enter-active,
.slide-leave-active {
transition: transform .3s ease-out;
}
.slide-enter-to,
.slide-leave {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
</style>
@@ -1,77 +0,0 @@
<template>
<v-form ref="form">
<v-container grid-list-xs>
<v-layout row wrap class="justify-center">
<v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
<material-card color="black" title="Change Password">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="form.password"
label="Password"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
@click:append="show1 = !show1"
:rules="[rules.required, rules.passCounter]"
color="black"
></v-text-field>
</v-flex>
<v-flex xs12 md12 sm12>
<v-text-field
v-model="form.password_confirmation"
label="Confirm Password"
color="black"
:type="show2 ? 'text' : 'password'"
:append-icon="show2 ? 'visibility' : 'visibility_off'"
@click:append="show2 = !show2"
:rules="[rules.required, rules.passCounter, rules.confirm]"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="px-3">
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
<v-btn
class="WM-CyanBlueGradient-BG"
style="padding:10px 60px"
@click="submitChangePassword"
>
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Submit</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
</v-container>
</v-form>
</template>
<script>
import { mapActions } from "vuex";
export default {
data() {
return {
show1: false,
show2: false,
rules: {
required: value => !!value || "Required.",
confirm: value => this.form.password_confirmation == this.form.password || "Your Passwords do not match.",
passCounter: value =>
(value && value.length >= 8) || "Min 8 characters"
},
form: {
password: "",
password_confirmation: ""
}
};
},
methods: {
...mapActions("auth", ["changePassword"]),
submitChangePassword() {
if (this.$refs.form.validate()) {
this.changePassword({ form: this.form });
}
}
}
};
</script>
@@ -1,53 +0,0 @@
<template>
<v-form >
<v-container grid-list-xs>
<v-layout row wrap class="justify-center">
<v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
<material-card
color="black"
title="Verify Code">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="form.code"
label="Verify Code Number"
color="black"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="px-3">
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitVerifyCode">
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Submit</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
</v-container>
</v-form>
</template>
<script>
import { mapActions } from "vuex";
export default {
data() {
return {
form: {
code: "",
}
};
},
methods: {
...mapActions('auth', [
'verifyCodeSMS'
]),
submitVerifyCode() {
if (this.form.code != '') {
this.verifyCodeSMS({form: this.form});
}
}
}
};
</script>
@@ -1,54 +0,0 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Barcode Image">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Barcode And QRCode Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<img :src="barcodeimg">
</v-flex>
</v-layout>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<img :src="QRCodeimg">
</v-flex>
</v-layout>
</v-layout>
<v-layout row wrap align-center justify-center>
<v-flex class xs12 md2 sm2 @click="print" >
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
<span class="white--text">Print</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data: () => ({
barcodeimg : {},
QRCodeimg : {}
}),
created() {
this.barcodeimg = this.getModalProperties.result.data.data.Barcode;
this.QRCodeimg = this.getModalProperties.result.data.data.QRCode;
},
computed: {
...mapGetters("modal", ["getModalProperties"])
},
methods: {
print() {
let popup = window.open();
popup.document.write(`<img src="${this.barcodeimg}" style="padding:50px" /><img src="${this.QRCodeimg}" />`);
popup.focus();
popup.print();
}
}
};
</script>
@@ -1,124 +0,0 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Show Cycle">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Common Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class>
<span class="title">UniqueId :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.unique_id }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Name :</span>
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Result :</span>
<v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
<v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">verify :</span>
<v-icon v-if="data.verified == 'Verified'" class="green--text ml-2 caption">fas fa-check</v-icon>
<v-icon v-if="data.verified == 'NotVerified'" class="pink--text ml-2 caption">fas fa-times</v-icon>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Register User :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Date :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Packages</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class v-for="(packag, key) in data.packages" :key="key">
<span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + packag.name }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
<v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
<v-flex
class
xs12
md2
sm2
v-if="data.verified == 'NotVerified'"
@click="verify(data.id)"
>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">Verify</span>
</v-btn>
</v-flex>
<v-flex class xs12 md2 sm2 v-else>
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
@click="verify(data.id)"
>
<v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
<span class="black--text">UnVerify</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</template>
<script>
export default {
data: () => ({
data: {}
})
};
</script>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data: () => ({
data : {}
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id) {
const result = await ApiService.post(urls.verifyCycle(id));
if (result && result.status == 200) {
this.setResultModal(result.data.data);
this.closeModal();
}
}
},
created() {
this.data = this.getModalProperties.result.data.data;
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>
@@ -1,66 +0,0 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Show Item">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Common Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Name :</span>
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Result :</span>
<v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
<v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Register User :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Date :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
</material-card>
</v-container>
</template>
<script>
export default {
data: () => ({
data: {}
})
};
</script>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data: () => ({
data : {}
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
},
created() {
this.data = this.getModalProperties.result.data.data;
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>
@@ -1,124 +0,0 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Show Package">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Common Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class>
<span class="title">UniqueId :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.unique_id }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Name :</span>
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Result :</span>
<v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
<v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">verify :</span>
<v-icon v-if="data.verified == 'Verified'" class="green--text ml-2 caption">fas fa-check</v-icon>
<v-icon v-if="data.verified == 'NotVerified'" class="pink--text ml-2 caption">fas fa-times</v-icon>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Register User :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Date :</span>
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Items</h3>
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class v-for="(item, key) in data.items" :key="key">
<span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + item.name }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
<v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
<v-flex
class
xs12
md2
sm2
v-if="data.verified == 'NotVerified'"
@click="verify(data.id)"
>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">Verify</span>
</v-btn>
</v-flex>
<v-flex class xs12 md2 sm2 v-else>
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
@click="verify(data.id)"
>
<v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
<span class="black--text">UnVerify</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</template>
<script>
export default {
data: () => ({
data: {}
})
};
</script>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data: () => ({
data : {}
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id) {
const result = await ApiService.post(urls.verifyPackage(id));
if (result && result.status == 200) {
this.setResultModal(result.data.data);
this.closeModal();
}
}
},
created() {
this.data = this.getModalProperties.result.data.data;
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>
@@ -1,250 +0,0 @@
<template>
<v-container grid-list-xs>
<material-card color="black" title="Show Test Result" id="printMe">
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Common Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6>
<div class>
<span class="title">{{ data.device_label || 'AutoclaveID' }} :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.device_id }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Result :</span>
<v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
<span
class="headline ml-1"
style="letter-spacing:0 !important"
>{{ data.result }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">verify :</span>
<v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
<span
class="headline ml-1"
style="letter-spacing:0 !important"
>{{ data.verified }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Register User :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.user.name }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Date :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.created_at }}</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title">Medical Center :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{ data.user.medical_center.name }}</span>
</div>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Special Info</h3>
<v-flex xs12>
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap class="ml-4">
<template v-if="data.inputs">
<v-flex
xs12
md12
sm12
v-for="(inputData, keyInputs) in data.inputs"
:key="keyInputs"
>
<span class="title">{{keyInputs}} :</span>
<span
class="headline ml-2"
style="letter-spacing:0 !important"
>{{inputData}}</span>
</v-flex>
</template>
<template v-if="data.options">
<v-flex
xs12
md12
sm12
v-for="(optionData, keyOptions) in data.options"
:key="keyOptions"
>
<span class="title">{{keyOptions}} :</span>
<span
style="letter-spacing:0 !important"
class="headline ml-2"
v-for="(data, dataKey) in optionData"
:key="dataKey"
>{{data}},</span>
</v-flex>
</template>
<template v-if="data.children">
<v-flex
xs12
md12
sm12
v-for="(formData, keyForm) in data.children"
:key="keyForm"
>
<h3 class="ml-3">{{keyForm}}</h3>
<div v-for="(childData, keyChild) in formData" :key="keyChild">
<div class="ml-4">
<span class="title">{{keyChild}} :</span>
<template v-if="Array.isArray(childData)">
<span
style="letter-spacing:0 !important"
class="headline ml-2"
v-for="(data, dataKey) in childData"
:key="dataKey"
>{{data}},</span>
</template>
<template v-else>
<span class="headline ml-2">{{childData}}</span>
</template>
</div>
</div>
</v-flex>
</template>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="px-5 my-3">
<h3 class="ml-3">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light" />
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
<img :src="'/'+img.path" style="width: 100%" />
</v-flex>
</v-layout>
</v-layout>
</material-card>
<material-card>
<v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
<v-flex
class
xs12
md2
sm2
v-if="data.verified == 'NotVerified'"
@click="verify(data.id)"
>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">Verify</span>
</v-btn>
</v-flex>
<v-flex class xs12 md2 sm2 v-else>
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
@click="verify(data.id)"
>
<v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
<span class="black--text">UnVerify</span>
</v-btn>
</v-flex>
<v-flex class xs12 md2 sm2>
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
@click="print"
>
<v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
<span class="black--text">Print</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</template>
<script>
export default {
data: () => ({
data: {}
})
};
</script>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data: () => ({}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id) {
const result = await ApiService.post(urls.verifyTestResult(id));
if (result && result.status == 200) {
this.setResultModal(result.data.data);
this.closeModal();
}
},
print() {
const prtHtml = document.getElementById("printMe").innerHTML;
// Get all stylesheets HTML
let stylesHtml = "";
for (const node of [
...document.querySelectorAll('link[rel="stylesheet"], style')
]) {
stylesHtml += node.outerHTML;
}
// Open the print window
const WinPrint = window.open(
"",
"",
"left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
);
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
},
created() {
this.data = this.getModalProperties.result.data.data;
console.log(this.data);
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>
@@ -1,59 +0,0 @@
<template>
<div>
<v-container>
<material-card class color="black" title="New Message" text>
<v-layout wrap class="px-4 mb-3">
<v-flex xs12 sm12 md12>
<v-autocomplete
:items="items"
:loading="loading"
:search-input.sync="search"
v-model="user_id"
item-text="name"
item-value="id"
label="Search"
persistent-hint
prepend-icon="fas fa-search"
color="black"
></v-autocomplete>
</v-flex>
</v-layout>
<ticket-send-message :user-id="user_id" />
</material-card>
</v-container>
</div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data() {
return {
loading: false,
items: [],
search: "",
user_id: 0
};
},
watch: {
search(val) {
val && val.length > 2 && this.querySelections(val);
}
},
methods: {
async querySelections(val) {
if (!this.loading) {
this.loading = true;
const result = await ApiService.get(urls.userSearch(val));
if (result && result.data.data) {
this.items = result.data.data;
this.loading = false;
}
}
}
}
};
</script>
<style lang="scss" scoped>
</style>
@@ -1,81 +0,0 @@
<template>
<div>
<v-container>
<material-card class color="black" title="Show Message" text max-width="600px">
<v-layout row wrap>
<v-flex xs12>
<div
class="mx-2 my-3"
v-for="item in items"
:key="item.id"
>
<div class="Chat White" v-if="item.sender_user_id == user_id">
<span>{{ item.text }}</span>
<span class="caption"></span>
</div>
<div class="Chat Cyan" style="float:right" v-else>
<span >{{ item.text }}</span>
<span class="caption"></span>
</div>
</div>
</v-flex>
</v-layout>
<ticket-send-message :user-id="user_id" />
</material-card>
</v-container>
</div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapGetters } from "vuex";
export default {
data() {
return {
user_id: 0,
items: {}
}
},
created() {
this.user_id = this.getModalProperties.user_id;
this.load();
},
computed: {
...mapGetters("modal", ["getModalProperties"])
},
methods: {
async load() {
const result = await ApiService.get(
urls.showMessages(this.user_id)
);
if (result && result.data.data) {
this.items = result.data.data;
}
}
}
};
</script>
<style lang="scss" scoped>
.Chat {
padding: 10px 15px;
margin: 1% 0;
color: white;
border-radius: 10px;
width: fit-content;
display: block;
box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
}
.Chat.Cyan {
background: cornflowerblue;
text-align: right;
float: right;
clear: right;
}
.Chat.White {
background: #fff;
color: black;
float: left;
clear: left;
}
</style>
@@ -1,56 +0,0 @@
<template>
<v-form>
<v-container grid-list-xs fluid>
<material-card class color="black" title="Role">
<v-layout row align-center justify-center wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3>
<v-select :items="items" v-model="data.roles" label="Roles" color="black"></v-select>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-layout align-center justify-center wrap class="px-5 mt-2">
<v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="white--text">Add</span>
</v-btn>
<v-btn
@click="closeModal"
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"
>
<v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
<span class="black--text">Close</span>
</v-btn>
</v-layout>
</v-layout>
</material-card>
</v-container>
</v-form>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { roles } from "@/config/utils";
import { urls } from "@/config/urls";
export default {
data: () => ({
items: roles,
data: { roles: "" }
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async changeRole() {
const result = await ApiService.post(
urls.changeRoleUser(this.getModalProperties.user.id),
this.data
);
if (result && result.status == 200) {
this.setResultModal(result.data.data);
this.closeModal();
}
}
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>
@@ -1,72 +0,0 @@
<template>
<div>
<v-card-text>
<v-container grid-list-md>
<v-flex xs12 sm12 md12>
<v-textarea name="input-7-1" v-model="form.message" color="black" label="Message" hint="Hint text"></v-textarea>
</v-flex>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-layout row wrap>
<v-btn color="black" class="mr-2 WM-ActionButton" @click="register()">
<v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
<span>Send</span>
</v-btn>
</v-layout>
</v-card-actions>
</div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import toast from "@/services/global/toast.service";
import { mapMutations, mapGetters } from "vuex";
export default {
data() {
return {
form : {
message: '',
user_id : '',
}
};
},
props: {
userId: {
type : Number,
default : 0
},
message: {
type : String,
default : ''
},
},
mounted() {
this.form.user_id = this.userId;
},
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async register() {
if(this.userId > 0) {
const result = await ApiService.post( urls.storeMessages, this.form );
if (result && result.status == 200) {
this.setResultModal(Math.random(12));
this.closeModal();
}
} else {
toast.error('please Select User');
}
}
},
watch: {
userId(val) {
this.form.user_id = val;
}
},
computed: {
...mapGetters("modal", ["getModalProperties"])
}
};
</script>