cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-11 13:33:17 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix : title of pages

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-04-10 12:39:48 +03:30
parent 78dfba9b24
commit fc029045bc
28 changed files with 1582 additions and 1427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router/index.js
+39 -36
View File
@@ -11,12 +11,12 @@ import Vue from 'vue'
// import VueAnalytics from 'vue-analytics'
import Router from 'vue-router'
import Meta from 'vue-meta'
import { TokenService } from '@/services'
import {TokenService} from '@/services'
// Routes
import paths from './paths'
function route (options) {
function route(options) {
let path = options.path;
let view = options.view;
let name = options.name;
@@ -26,8 +26,8 @@ function route (options) {
path,
meta,
component: (resovle) => import(
`@/views/${view}.vue`
).then(resovle)
`@/views/${view}.vue`
).then(resovle)
}
}
@@ -35,51 +35,54 @@ Vue.use(Router)
// Create a new router
const router = new Router({
mode: 'history',
routes: paths.map(path => route(path)).concat([
{ path: '*', redirect: '/dashboard' }
]),
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
mode: 'history',
routes: paths.map(path => route(path)).concat([
{path: '*', redirect: '/dashboard'}
]),
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.hash) {
return {selector: to.hash}
}
return {x: 0, y: 0}
}
if (to.hash) {
return { selector: to.hash }
}
return { x: 0, y: 0 }
}
})
Vue.use(Meta)
Vue.use(Meta, {
refreshOnceOnNavigation: true
})
import {$hasRole} from '@/services/acl/role';
router.beforeEach((to, from, next) => {
const isPublic = to.matched.some(record => record.meta.public);
const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
const loggedIn = !!TokenService.getToken();
const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
const isPublic = to.matched.some(record => record.meta.public);
const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
const loggedIn = !!TokenService.getToken();
const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
if (to.meta.title) {
document.title = to.meta.title;
}
if (!isPublic && !loggedIn) {
return next({
path:'/login',
query: {redirect: to.fullPath} // Store the full path to redirect the user to after login
});
}
if (!isPublic && !loggedIn) {
return next({
path: '/login',
query: {redirect: to.fullPath} // Store the full path to redirect the user to after login
});
}
// Do not allow user to visit login page or register page if they are logged in
if (loggedIn && onlyWhenLoggedOut ) {
return next('/')
}
// Do not allow user to visit login page or register page if they are logged in
if (loggedIn && onlyWhenLoggedOut) {
return next('/')
}
// Do not allow user to visit Pages then not access roles
if (roles && !$hasRole(roles)) {
return next('/')
}
// Do not allow user to visit Pages then not access roles
if (roles && !$hasRole(roles)) {
return next('/')
}
next();
next();
});
// Bootstrap Analytics
src/router/paths.js
+310 -310
View File
@@ -4,316 +4,316 @@
* official documentation https://router.vuejs.org/en/
*/
export default [
{
path: '/dashboard',
name: 'Dashboard',
view: 'Dashboard',
meta: {
title:'CSSD Dashboard'
}
},
{
path: '/my-info',
name: 'MyInfo',
view: 'User/MyInfo',
meta: {
title:'My Inf | CSSD Dashboard'
}
},
{
path: '/manage-users',
name: 'ManageUsers',
view: 'User/List',
meta: {
roles: 'Admin|Supervisor',
title:'Manage User | CSSD Dashboard'
}
},
{
path: '/test-type/create',
name: 'AddTestType',
view: 'TestType/AddEdit',
meta: {
title:'Add Test Typ | CSSD Dashboard'
}
},
{
path: '/test-type/:testType/edit',
name: 'EditTestType',
view: 'TestType/AddEdit',
meta: {
roles: 'Admin',
title:'Edit Test Typ | CSSD Dashboard'
}
},
{
path: '/test-types',
name: 'ListTestType',
view: 'TestType/List',
meta: {
roles: 'Admin',
title:'List Test Typ | CSSD Dashboard'
}
},
{
path: '/medical-center',
name: 'ManageMedicalCenter',
view: 'MedicalCenter/List',
meta: {
title:'Manage Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/medical-center/create',
name: 'AddMedicalCenter',
view: 'MedicalCenter/AddEdit',
meta: {
title:'Add Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/medical-center/:medicalCenter/edit',
name: 'EditMedicalCenter',
view: 'MedicalCenter/AddEdit',
meta: {
title:'Edit Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/add-operator/:medicalCenter',
name: 'AddOperator',
view: 'Auth/Register',
meta: {
title:'Add Operator | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/operator-list/:medicalCenter',
name: 'OperatorList',
view: 'MedicalCenter/OperatorList',
meta: {
title:'Operator List | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/login',
name: 'Login',
view: 'Auth/Login',
meta: {
title:'Login | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true
}
},
{
path: '/register',
name: 'Register',
view: 'Auth/Register',
meta: {
title:'Register | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true,
roles: 'Admin'
}
},
{
path: '/forgot-password',
name: 'ForgotPassword',
view: 'Auth/ForgotPassword',
meta: {
title:'Forgot Password | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true
{
path: '/dashboard',
name: 'Dashboard',
view: 'Dashboard',
meta: {
title: 'CSSD Dashboard'
}
},
},
{
path: '/ShowTestResult/:testResult',
name: 'ShowTestResult',
view: 'TestResult/Show',
meta: {
title:'Show Test Result | CSSD Dashboard',
public: true,
{
path: '/my-info',
name: 'MyInfo',
view: 'User/MyInfo',
meta: {
title: 'My Info | CSSD Dashboard'
}
},
{
path: '/manage-users',
name: 'ManageUsers',
view: 'User/List',
meta: {
roles: 'Admin|Supervisor',
title: 'Manage User | CSSD Dashboard'
}
},
{
path: '/test-type/create',
name: 'AddTestType',
view: 'TestType/AddEdit',
meta: {
title: 'Add Test Typ | CSSD Dashboard'
}
},
{
path: '/test-type/:testType/edit',
name: 'EditTestType',
view: 'TestType/AddEdit',
meta: {
roles: 'Admin',
title: 'Edit Test Typ | CSSD Dashboard'
}
},
{
path: '/test-types',
name: 'ListTestType',
view: 'TestType/List',
meta: {
roles: 'Admin',
title: 'List Test Typ | CSSD Dashboard'
}
},
{
path: '/medical-center',
name: 'ManageMedicalCenter',
view: 'MedicalCenter/List',
meta: {
title: 'Manage Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/medical-center/create',
name: 'AddMedicalCenter',
view: 'MedicalCenter/AddEdit',
meta: {
title: 'Add Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/medical-center/:medicalCenter/edit',
name: 'EditMedicalCenter',
view: 'MedicalCenter/AddEdit',
meta: {
title: 'Edit Medical Center | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/add-operator/:medicalCenter',
name: 'AddOperator',
view: 'Auth/Register',
meta: {
title: 'Add Operator | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/operator-list/:medicalCenter',
name: 'OperatorList',
view: 'MedicalCenter/OperatorList',
meta: {
title: 'Operator List | CSSD Dashboard',
roles: 'Admin'
}
},
{
path: '/login',
name: 'Login',
view: 'Auth/Login',
meta: {
title: 'Login | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true
}
},
{
path: '/register',
name: 'Register',
view: 'Auth/Register',
meta: {
title: 'Register | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true,
roles: 'Admin'
}
},
{
path: '/forgot-password',
name: 'ForgotPassword',
view: 'Auth/ForgotPassword',
meta: {
title: 'Forgot Password | CSSD Dashboard',
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true
},
},
{
path: '/ShowTestResult/:testResult',
name: 'ShowTestResult',
view: 'TestResult/Show',
meta: {
title: 'Show Test Result | CSSD Dashboard',
public: true,
},
},
{
path: '/result-test',
name: 'AllResultTest',
view: 'TestResult/List',
meta: {
title: 'All Result Test | CSSD Dashboard',
}
},
{
path: '/add-test-result',
name: 'SubmitTestResult',
view: 'TestResult/AddEdit',
meta: {
title: 'Submit Test Result | CSSD Dashboard',
}
},
{
path: '/test-result/:testResult/edit',
name: 'EditTestResult',
view: 'TestResult/AddEdit',
meta: {
title: 'Edit Test Result | CSSD Dashboard',
}
},
{
path: '/test-result/NotVerified',
name: 'NotVerifyTestResult',
view: 'TestResult/List',
meta: {
title: 'Not Verify Test Resul | CSSD Dashboard'
}
},
{
path: '/statistics',
name: 'Statistics',
view: 'Statistics/Chart',
meta: {
title: 'Statistics | CSSD Dashboard',
}
},
{
path: '/add-package',
name: 'AddPackage',
view: 'Package/AddEdit',
meta: {
title: 'Add Package | CSSD Dashboard',
}
},
{
path: '/packages',
name: 'AllPackage',
view: 'Package/List',
meta: {
title: 'All Package | CSSD Dashboard',
}
},
{
path: '/packages/:package/edit',
name: 'EditPackage',
view: 'Package/AddEdit',
meta: {
title: 'Edit Package | CSSD Dashboard',
}
},
{
path: '/add-label',
name: 'AddLabel',
view: 'Label/AddEdit',
meta: {
title: 'Add Label | CSSD Dashboard',
}
},
{
path: '/labels',
name: 'AllLabels',
view: 'Label/List',
meta: {
title: 'All Labels | CSSD Dashboard',
}
},
{
path: '/label/:label/edit',
name: 'EditLabel',
view: 'Label/AddEdit',
meta: {
title: 'Edit Label | CSSD Dashboard',
}
},
{
path: '/add-cycle',
name: 'AddCycle',
view: 'Cycle/AddEdit',
meta: {
title: 'Add Cycle | CSSD Dashboard',
}
},
{
path: '/cycles',
name: 'AllCycle',
view: 'Cycle/List',
meta: {
title: 'All Cycle | CSSD Dashboard',
}
},
{
path: '/cycle/:cycle/edit',
name: 'EditCycle',
view: 'Cycle/AddEdit',
meta: {
title: 'Edit Cycle | CSSD Dashboard',
}
},
{
path: '/add-Item',
name: 'AddItem',
view: 'Item/AddEdit',
meta: {
title: 'Add Item | CSSD Dashboard',
}
},
{
path: '/Items',
name: 'AllItem',
view: 'Item/List',
meta: {
title: 'All Item | CSSD Dashboard',
}
},
{
path: '/Item/:Item/edit',
name: 'EditItem',
view: 'Item/AddEdit',
meta: {
title: 'Edit Item | CSSD Dashboard',
}
},
{
path: '/my-Items',
name: 'MyItem',
view: 'MyItem/List',
meta: {
title: 'My Item | CSSD Dashboard',
}
},
{
path: '/my-Package',
name: 'MyPackage',
view: 'MyPackage/List',
meta: {
title: 'My Package | CSSD Dashboard',
}
},
{
path: '/tickets',
name: 'Tickets',
view: 'Tickets/List',
meta: {
title: 'Tickets | CSSD Dashboard',
}
},
/* {
path: '/ShowPackage/:package',
name: 'ShowPackage',
view: 'Package/ShowPackage',
meta:{
title:'Show Package | CSSD Dashboard',
}
},*/
{
path: '/Intro',
name: 'Intro',
view: 'Intro/Intro',
meta: {
title: 'Intro | CSSD Dashboard',
}
},
},
{
path: '/result-test',
name: 'AllResultTest',
view: 'TestResult/List',
meta:{
title:'All Result Test | CSSD Dashboard',
}
},
{
path: '/add-test-result',
name: 'SubmitTestResult',
view: 'TestResult/AddEdit',
meta:{
title:'Submit Test Result | CSSD Dashboard',
}
},
{
path: '/test-result/:testResult/edit',
name: 'EditTestResult',
view: 'TestResult/AddEdit',
meta:{
title:'Edit Test Result | CSSD Dashboard',
}
},
{
path: '/test-result/NotVerified',
name: 'NotVerifyTestResult',
view: 'TestResult/List',
meta:{
title:'Not Verify Test Resul | CSSD Dashboard'
}
},
{
path: '/statistics',
name: 'Statistics',
view: 'Statistics/Chart',
meta:{
title:'Statistics | CSSD Dashboard',
}
},
{
path: '/add-package',
name: 'AddPackage',
view: 'Package/AddEdit',
meta:{
title:'Add Package | CSSD Dashboard',
}
},
{
path: '/packages',
name: 'AllPackage',
view: 'Package/List',
meta:{
title:'All Package | CSSD Dashboard',
}
},
{
path: '/packages/:package/edit',
name: 'EditPackage',
view: 'Package/AddEdit',
meta:{
title:'Edit Package | CSSD Dashboard',
}
},
{
path: '/add-label',
name: 'AddLabel',
view: 'Label/AddEdit',
meta:{
title:'Add Label | CSSD Dashboard',
}
},
{
path: '/labels',
name: 'AllLabels',
view: 'Label/List',
meta:{
title:'All Labels | CSSD Dashboard',
}
},
{
path: '/label/:label/edit',
name: 'EditLabel',
view: 'Label/AddEdit',
meta:{
title:'Edit Label | CSSD Dashboard',
}
},
{
path: '/add-cycle',
name: 'AddCycle',
view: 'Cycle/AddEdit',
meta:{
title:'Add Cycle | CSSD Dashboard',
}
},
{
path: '/cycles',
name: 'AllCycle',
view: 'Cycle/List',
meta:{
title:'All Cycle | CSSD Dashboard',
}
},
{
path: '/cycle/:cycle/edit',
name: 'EditCycle',
view: 'Cycle/AddEdit',
meta:{
title:'Edit Cycle | CSSD Dashboard',
}
},
{
path: '/add-Item',
name: 'AddItem',
view: 'Item/AddEdit',
meta:{
title:'Add Item | CSSD Dashboard',
}
},
{
path: '/Items',
name: 'AllItem',
view: 'Item/List',
meta:{
title:'All Item | CSSD Dashboard',
}
},
{
path: '/Item/:Item/edit',
name: 'EditItem',
view: 'Item/AddEdit',
meta:{
title:'Edit Item | CSSD Dashboard',
}
},
{
path: '/my-Items',
name: 'MyItem',
view: 'MyItem/List',
meta:{
title:'My Item | CSSD Dashboard',
}
},
{
path: '/my-Package',
name: 'MyPackage',
view: 'MyPackage/List',
meta:{
title:'My Package | CSSD Dashboard',
}
},
{
path: '/tickets',
name: 'Tickets',
view: 'Tickets/List',
meta:{
title:'Tickets | CSSD Dashboard',
}
},
/* {
path: '/ShowPackage/:package',
name: 'ShowPackage',
view: 'Package/ShowPackage',
meta:{
title:'Show Package | CSSD Dashboard',
}
},*/
{
path: '/Intro',
name: 'Intro',
view: 'Intro/Intro',
meta:{
title:'Intro | CSSD Dashboard',
}
},
]
src/views/Auth/ForgotPassword.vue
+69 -62
View File
@@ -1,70 +1,77 @@
<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="Login Page">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="form.cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></v-text-field>
</v-flex>
<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="Login Page">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="form.cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></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="handleSubmit"
>
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Send</span>
</v-btn>
</v-flex>
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
<router-link class="black--text" :to="{name: 'Login'}">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="black--text">Login</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</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="handleSubmit"
>
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Send</span>
</v-btn>
</v-flex>
<v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
<router-link class="black--text" :to="{name: 'Login'}">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="black--text">Login</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-container>
</v-form>
</template>
<script>
import { mapActions, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import {mapActions, mapMutations} from "vuex";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
export default {
data() {
return {
form :{
cell_number: ""
},
rules: {
required: value => !!value || "Required.",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
}
};
},
methods: {
...mapActions("auth", ["forgotPassword"]),
async handleSubmit() {
if (this.$refs.form.validate()) {
this.forgotPassword({form : this.form});
}
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
form: {
cell_number: ""
},
rules: {
required: value => !!value || "Required.",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
}
};
},
methods: {
...mapActions("auth", ["forgotPassword"]),
async handleSubmit() {
if (this.$refs.form.validate()) {
this.forgotPassword({form: this.form});
}
}
}
}
};
</script>
src/views/Auth/Login.vue
+95 -87
View File
@@ -1,96 +1,104 @@
<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="Login Page">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></v-text-field>
</v-flex>
<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="Login Page">
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
v-model="cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
name="password"
label="Password"
v-model="password"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
@click:append="show1 = !show1"
:rules="[rules.required, rules.passCounter]"
color="black"
class="pa-2"
></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="handleSubmit">
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Login</span>
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="text-md-left text-sm-center text-xs-center">
<v-flex xs12 md12 sm12 class="px-4 py-3">
<router-link :to="{name: 'ForgotPassword'}">
<span class="black--text"
style="border-bottom:1px solid #000;">Forgot Password ?</span>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
<v-layout row wrap class="px-3">
<v-flex xs12 md12 sm12>
<v-text-field
name="password"
label="Password"
v-model="password"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
@click:append="show1 = !show1"
:rules="[rules.required, rules.passCounter]"
color="black"
class="pa-2"
></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="handleSubmit">
<v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="white--text">Login</span>
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="text-md-left text-sm-center text-xs-center">
<v-flex xs12 md12 sm12 class="px-4 py-3">
<router-link :to="{name: 'ForgotPassword'}">
<span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-container>
</v-form>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
cell_number: "",
password: "",
show1: false,
rules: {
required: value => !!value || "Required.",
passCounter: value => (value && value.length >= 8) || "Min 8 characters",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
}
};
},
computed: {
...mapGetters('auth', [
'authenticating',
'authenticationError',
'authenticationErrorCode'
])
},
methods: {
...mapActions('auth', [
'login'
]),
async handleSubmit() {
// Perform a simple validation that cell_number and password have been typed in
if (this.$refs.form.validate()) {
const response = await this.login({cell_number: this.cell_number, password: this.password});
import {mapGetters, mapActions} from "vuex";
if (!response.status || response.status !== 200) {
this.password = "";
}
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
}
}
},
data() {
return {
cell_number: "",
password: "",
show1: false,
rules: {
required: value => !!value || "Required.",
passCounter: value => (value && value.length >= 8) || "Min 8 characters",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
}
};
},
computed: {
...mapGetters('auth', [
'authenticating',
'authenticationError',
'authenticationErrorCode'
])
},
methods: {
...mapActions('auth', [
'login'
]),
async handleSubmit() {
// Perform a simple validation that cell_number and password have been typed in
if (this.$refs.form.validate()) {
const response = await this.login({cell_number: this.cell_number, password: this.password});
if (!response.status || response.status !== 200) {
this.password = "";
}
}
}
}
};
</script>
<style lang="scss" scoped>
src/views/Auth/Register.vue
+129 -123
View File
@@ -1,133 +1,139 @@
<template>
<v-form ref="form">
<v-container grid-list-xs>
<v-layout row wrap class="justify-center">
<v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
<material-card color="black" title="Register Page">
<v-layout column>
<v-flex xs12 md2 sm2>
<v-text-field
name="name"
label="Name"
v-model="form.name"
color="black"
class="pa-2"
:rules="[rules.required, rules.nameCounter]"
></v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
:items="items"
label="Gender"
name="gender"
v-model="form.gender"
single-line
class="pa-2"
color="black"
:rules="[rules.required]"
></v-select>
</v-flex>
<v-flex xs2 md2 sm2>
<v-text-field
v-model="form.country_code"
name="country_code"
label="Country Code"
color="black"
:rules="[rules.required, rules.countryCode]"
mask="####"
></v-text-field>
</v-flex>
<v-flex xs10 md10 sm10>
<v-text-field
v-model="form.cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-text-field
name="password"
label="Password"
v-model="form.password"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
@click:append="show1 = !show1"
color="black"
class="pa-2"
:rules="[rules.required, rules.passCounter]"
></v-text-field>
</v-flex>
<v-form ref="form">
<v-container grid-list-xs>
<v-layout row wrap class="justify-center">
<v-flex xs12 md3 sm6 class="WM-WidthScreen-SM WM-WidthScreen-XS">
<material-card color="black" title="Register Page">
<v-layout column>
<v-flex xs12 md2 sm2>
<v-text-field
name="name"
label="Name"
v-model="form.name"
color="black"
class="pa-2"
:rules="[rules.required, rules.nameCounter]"
></v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-select
:items="items"
label="Gender"
name="gender"
v-model="form.gender"
single-line
class="pa-2"
color="black"
:rules="[rules.required]"
></v-select>
</v-flex>
<v-flex xs2 md2 sm2>
<v-text-field
v-model="form.country_code"
name="country_code"
label="Country Code"
color="black"
:rules="[rules.required, rules.countryCode]"
mask="####"
></v-text-field>
</v-flex>
<v-flex xs10 md10 sm10>
<v-text-field
v-model="form.cell_number"
name="cellnumber"
label="Cell Number"
color="black"
:rules="[rules.required, rules.cellNumberCounter]"
mask="#### ### ####"
></v-text-field>
</v-flex>
<v-flex xs12 md2 sm2>
<v-text-field
name="password"
label="Password"
v-model="form.password"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
@click:append="show1 = !show1"
color="black"
class="pa-2"
:rules="[rules.required, rules.passCounter]"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
<v-btn @click="register" 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">Register</span>
</v-btn>
</v-flex>
<v-flex
v-if="!isLogin"
xs12
md6
sm6
class="text-md-right text-sm-center text-xs-center"
>
<router-link to="/login">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="black--text">Login</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
<v-btn @click="register" 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">Register</span>
</v-btn>
</v-flex>
<v-flex
v-if="!isLogin"
xs12
md6
sm6
class="text-md-right text-sm-center text-xs-center"
>
<router-link to="/login">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
<span class="black--text">Login</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-container>
</v-form>
</template>
<script>
import { TokenService, ApiService } from "@/services";
import {TokenService, ApiService} from "@/services";
export default {
data() {
const defaultForm = Object.freeze({
cell_number: "",
password: "",
name: "",
gender: "",
medical_center_id: this.$route.params.medicalCenter
? this.$route.params.medicalCenter
: ''
});
return {
form: Object.assign({}, defaultForm),
show1: false,
items: ["Male", "FeMale"],
isLogin: TokenService.getInfo(),
rules: {
required: value => !!value || "Required.",
nameCounter: value => (value && value.length >= 5) || "Min 5 characters",
passCounter: value => (value && value.length >= 8) || "Min 8 characters",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters",
countryCode: value => (value && value.length == 4) || "must 4 characters for example (0098)"
}
};
},
methods: {
async register() {
if (this.$refs.form.validate()) {
var result = await ApiService.post(`register`, this.form);
if (result && result.status == 200) {
this.$router.push(
{name:`OperatorList`, params: { medicalCenter: this.form.medical_center_id }}
);
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
const defaultForm = Object.freeze({
cell_number: "",
password: "",
name: "",
gender: "",
medical_center_id: this.$route.params.medicalCenter
? this.$route.params.medicalCenter
: ''
});
return {
form: Object.assign({}, defaultForm),
show1: false,
items: ["Male", "FeMale"],
isLogin: TokenService.getInfo(),
rules: {
required: value => !!value || "Required.",
nameCounter: value => (value && value.length >= 5) || "Min 5 characters",
passCounter: value => (value && value.length >= 8) || "Min 8 characters",
cellNumberCounter: value => (value && value.length == 11) || "must 11 characters",
countryCode: value => (value && value.length == 4) || "must 4 characters for example (0098)"
}
};
},
methods: {
async register() {
if (this.$refs.form.validate()) {
var result = await ApiService.post(`register`, this.form);
if (result && result.status == 200) {
this.$router.push(
{name: `OperatorList`, params: {medicalCenter: this.form.medical_center_id}}
);
}
}
}
}
}
}
};
</script>
src/views/Cycle/AddEdit.vue
+6
View File
@@ -111,6 +111,12 @@ import {urls} from "@/config/urls";
import {mapMutations} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
fromMenuDate: false,
src/views/Cycle/List.vue
+6
View File
@@ -143,6 +143,12 @@ import {urls} from "@/config/urls";
import {mapMutations, mapGetters} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "ID", value: "Cycle ID"},
src/views/Dashboard.vue
+6
View File
@@ -54,6 +54,12 @@
<script>
// import { UserService } from '@/services';
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
AdminCards: [
src/views/Intro/Intro.vue
+155 -164
View File
@@ -1,178 +1,169 @@
<template id="">
<div class="">
<v-toolbar color="white">
<v-toolbar-title v-text="title"></v-toolbar-title>
</v-toolbar>
<!-- _______________ Section 2::Begin _______________ -->
<section>
<v-parallax src="https://images.squarespace-cdn.com/content/v1/5bf5d5da506fbea76ffa4abe/1547249524951-CQ5U440SQYT23ODKL23G/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/yenyi.jpg" height="600">
<v-layout
column
align-center
justify-center
class="white--text"
>
<!-- <img src="assets/vuetify.png" alt="Vuetify.js" height="200"> -->
<p class="display-4 mb-5">CSSD-DOC</p>
<h1 class="white--text mb-2 mt-5 display-1 text-center">Central Sterile Supply Department App & Software</h1>
<div class="subheading mb-4 text-center">Management & Traceability & Documentation solution for CSSD / SPD</div>
</v-layout>
</v-parallax>
</section>
<section>
<v-layout
column
wrap
class="my-12"
align-center
>
<v-flex xs12 sm4 class="my-4">
<div class="text-center">
<h2 class="headline">-Sterilization process monitoring</h2>
<span class="subheading">
<div class="">
<v-toolbar color="white">
<v-toolbar-title v-text="title"></v-toolbar-title>
</v-toolbar>
<!-- _______________ Section 2::Begin _______________ -->
<section>
<v-parallax
src="https://images.squarespace-cdn.com/content/v1/5bf5d5da506fbea76ffa4abe/1547249524951-CQ5U440SQYT23ODKL23G/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/yenyi.jpg"
height="600">
<v-layout
column
align-center
justify-center
class="white--text"
>
<!-- <img src="assets/vuetify.png" alt="Vuetify.js" height="200"> -->
<p class="display-4 mb-5">CSSD-DOC</p>
<h1 class="white--text mb-2 mt-5 display-1 text-center">Central Sterile Supply Department App &
Software</h1>
<div class="subheading mb-4 text-center">Management & Traceability & Documentation solution for CSSD
/ SPD
</div>
</v-layout>
</v-parallax>
</section>
<section>
<v-layout
column
wrap
class="my-12"
align-center
>
<v-flex xs12 sm4 class="my-4">
<div class="text-center">
<h2 class="headline">-Sterilization process monitoring</h2>
<span class="subheading">
- Sterilizer test records
</span>
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout row wrap align-left>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items1" :key="i" class="headline text-left">item</p>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items2" :key="i" class="headline text-left">item</p>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items3" :key="i" class="headline text-left" v-text="item"></p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</section>
<!-- _______________ Section 2::End _______________ -->
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout row wrap align-left>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items1" :key="i" class="headline text-left">item</p>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items2" :key="i" class="headline text-left">item</p>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<p v-for="(item , i) in items.items3" :key="i" class="headline text-left"
v-text="item"></p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</section>
<!-- _______________ Section 2::End _______________ -->
<!-- _______________ Section 7::Begin _______________ -->
<section>
<v-layout
column
wrap
class="my-12"
align-center
>
<v-flex xs12 sm4 class="my-4">
<div class="text-center">
<h2 class="headline">Product identification and traceability</h2>
<span class="subheading">
<!-- _______________ Section 7::Begin _______________ -->
<section>
<v-layout
column
wrap
class="my-12"
align-center
>
<v-flex xs12 sm4 class="my-4">
<div class="text-center">
<h2 class="headline">Product identification and traceability</h2>
<span class="subheading">
Cras facilisis mi vitae nunc
</span>
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout row wrap align-center>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-palette</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-center">Item</div>
</v-card-title>
<v-card-text>
Define and identify every instrument.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-flash</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-wrench</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-center">Completely Open Sourced</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</section>
</div>
</v-flex>
<v-flex xs12>
<v-container grid-list-xl>
<v-layout row wrap align-center>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-palette</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-center">Item</div>
</v-card-title>
<v-card-text>
Define and identify every instrument.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-flash</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt.
Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card flat class="transparent">
<v-card-text class="text-center">
<v-icon x-large class="blue--text text--lighten-2">mdi-wrench</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-center">Completely Open Sourced</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt.
Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</section>
</div>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{
items1 : [
'aaaaa',
'aaaaa',
'aaaaaa'
],
},
{
items2 : [
'aaaaa',
'aaaaa',
'aaaaaa'
],
},
{
items3 : [
'aaaaa',
'aaaaa',
'aaaaaa'
],
},
],
disabled: false,
dense: false,
twoLine: false,
threeLine: false,
shaped: false,
flat: false,
subheader: false,
inactive: false,
subGroup: false,
nav: false,
avatar: false,
rounded: false,
}),
components: {
},
created(){
},
data: () => ({
items: [
{items1: ['aaaaa', 'aaaaa', 'aaaaaa'],},
{items2: ['aaaaa', 'aaaaa', 'aaaaaa'],},
{items3: ['aaaaa', 'aaaaa', 'aaaaaa'],},
],
disabled: false,
dense: false,
twoLine: false,
threeLine: false,
shaped: false,
flat: false,
subheader: false,
inactive: false,
subGroup: false,
nav: false,
avatar: false,
rounded: false,
}),
components: {},
created() {
},
}
</script>
src/views/Item/AddEdit.vue
+6
View File
@@ -79,6 +79,12 @@ import {mapMutations} from 'vuex';
import Dropzone from '@/components/core/Dropzone'
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
components: {
'wm-Dropzone': Dropzone,
},
src/views/Item/List.vue
+6
View File
@@ -157,6 +157,12 @@ import {mapMutations, mapGetters} from "vuex";
import toast from "@/services/global/toast.service";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
// {sortable: true,text: "ID",value: "id"},
src/views/Label/AddEdit.vue
+152 -143
View File
@@ -1,61 +1,63 @@
<template>
<v-form ref="form">
<v-container grid-list-xs fluid>
<material-card color="black" title="Add Label on Set ">
<v-layout wrap class="px-5 my-3">
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
v-model="formData.sterilizer_id" class="py-3 pr-3"/>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="cycle_number" label="Preferred Cycle Number" color="black" v-model="formData.cycle_number"
class="py-3 pr-3"/>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
class="py-3 pr-3"/>
</v-flex>
<v-spacer/>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
<template v-slot:chip="{ item }">
{{ item.name }} - {{ item.id }}
</template>
<v-form ref="form">
<v-container grid-list-xs fluid>
<material-card color="black" title="Add Label on Set ">
<v-layout wrap class="px-5 my-3">
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
v-model="formData.sterilizer_id" class="py-3 pr-3"/>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="cycle_number" label="Preferred Cycle Number" color="black"
v-model="formData.cycle_number"
class="py-3 pr-3"/>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
class="py-3 pr-3"/>
</v-flex>
<v-spacer/>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
<template v-slot:chip="{ item }">
{{ item.name }} - {{ item.id }}
</template>
<template v-slot:item="{ item }">
{{ item.name }} - {{ item.id }}
</template>
</v-autocomplete>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenuSterile" style="width: 100%">
<v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
v-model="formData.sterile_date"/>
<v-date-picker color="pink" :min="today" no-title v-model="formData.sterile_date"
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenuExpire" style="width: 100%">
<v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
v-model="formData.expire_date"/>
<v-date-picker :show-current="showCurrent" :min="formData.sterile_date" color="pink" no-title
v-model="formData.expire_date"
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
</v-layout>
<template v-slot:item="{ item }">
{{ item.name }} - {{ item.id }}
</template>
</v-autocomplete>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenuSterile" style="width: 100%">
<v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
v-model="formData.sterile_date"/>
<v-date-picker color="pink" :min="today" no-title v-model="formData.sterile_date"
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenuExpire" style="width: 100%">
<v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
v-model="formData.expire_date"/>
<v-date-picker :show-current="showCurrent" :min="formData.sterile_date" color="pink"
no-title
v-model="formData.expire_date"
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
</v-layout>
<v-layout row wrap justify-center align-center>
<v-layout row wrap justify-center align-center>
<v-flex xs12 sm6 md4 lg3 class="text-md-center text-sm-center text-xs-center">
<router-link :to="{ name: 'AllLabels' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
@@ -64,108 +66,115 @@
</v-btn>
</router-link>
</v-flex>
<v-flex xs12 sm6 md4 lg3 class="text-md-center text-xs-center">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</v-form>
<v-flex xs12 sm6 md4 lg3 class="text-md-center text-xs-center">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
</v-flex>
</v-layout>
</material-card>
</v-container>
</v-form>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
data() {
return {
showCurrent: false,
fromMenuSterile: false,
fromMenuExpire: false,
today: new Date().toISOString().split("T")[0],
formData: {
result: "",
package_id: "",
expire_date: null,
sterilizer_id: '',
cycle_number: '',
sterile_date: new Date().toISOString().substr(0, 10)
},
items: [],
rules: {
required: value => !!value || "Required.",
counter: value =>
!value ||
value.length == 0 ||
value.length >= 5 ||
"Min 5 characters"
}
};
},
created() {
if (this.$route.params.label) {
this.load(this.$route.params.label);
}
this.loadItems();
},
computed: {
lotNumber() {
return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
}
},
methods: {
customFilter(item, queryText) {
const name = item.name.toLowerCase();
const udi = item.udi ? item.udi.toLowerCase() : null;
const searchText = queryText.toLowerCase();
if (udi) {
return name.indexOf(searchText) > -1 ||
udi.indexOf(searchText) > -1
}
return name.indexOf(searchText) > -1
},
async load(id) {
const result = await ApiService.get(urls.editLabel(id));
if (result && result.status == 200) {
this.formData = result.data.data;
}
},
async loadItems() {
const result = await ApiService.get(urls.listAllPackage());
if (result && result.status == 200) {
this.items = result.data.data;
}
},
async submitForm() {
let result;
this.formData['lot_number'] = this.lotNumber;
if (this.$route.params.label) {
result = await ApiService.put(urls.updateLabel(this.$route.params.label), this.formData);
} else {
result = await ApiService.post(urls.storeLabel, this.formData);
}
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
if (result && result.status == 200) {
this.$router.push({ name: 'AllLabels' });
}
}
}
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
showCurrent: false,
fromMenuSterile: false,
fromMenuExpire: false,
today: new Date().toISOString().split("T")[0],
formData: {
result: "",
package_id: "",
expire_date: null,
sterilizer_id: '',
cycle_number: '',
sterile_date: new Date().toISOString().substr(0, 10)
},
items: [],
rules: {
required: value => !!value || "Required.",
counter: value =>
!value ||
value.length == 0 ||
value.length >= 5 ||
"Min 5 characters"
}
};
},
created() {
if (this.$route.params.label) {
this.load(this.$route.params.label);
}
this.loadItems();
},
computed: {
lotNumber() {
return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
}
},
methods: {
customFilter(item, queryText) {
const name = item.name.toLowerCase();
const udi = item.udi ? item.udi.toLowerCase() : null;
const searchText = queryText.toLowerCase();
if (udi) {
return name.indexOf(searchText) > -1 ||
udi.indexOf(searchText) > -1
}
return name.indexOf(searchText) > -1
},
async load(id) {
const result = await ApiService.get(urls.editLabel(id));
if (result && result.status == 200) {
this.formData = result.data.data;
}
},
async loadItems() {
const result = await ApiService.get(urls.listAllPackage());
if (result && result.status == 200) {
this.items = result.data.data;
}
},
async submitForm() {
let result;
this.formData['lot_number'] = this.lotNumber;
if (this.$route.params.label) {
result = await ApiService.put(urls.updateLabel(this.$route.params.label), this.formData);
} else {
result = await ApiService.post(urls.storeLabel, this.formData);
}
if (result && result.status == 200) {
this.$router.push({name: 'AllLabels'});
}
}
}
};
</script>
<style>
.v-btn--floating {
padding: 0 !important;
padding: 0 !important;
}
.theme--light.v-btn.v-btn--flat {
color: rgba(0, 0, 0, .87) !important;
color: rgba(0, 0, 0, .87) !important;
}
.v-btn--floating,
.v-btn--icon:before {
border-radius: 50% !important;
border-radius: 50% !important;
}
</style>
src/views/Label/List.vue
+6
View File
@@ -145,6 +145,12 @@ import {urls} from "@/config/urls";
import {mapMutations, mapGetters} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "ID", value: "Label ID"},
src/views/MedicalCenter/AddEdit.vue
+6
View File
@@ -71,6 +71,12 @@ import {ApiService} from "@/services";
import {urls} from "@/config/urls";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
medicalCenter: {
src/views/MedicalCenter/List.vue
+147 -137
View File
@@ -1,154 +1,164 @@
<template>
<v-container fluid>
<material-card class color="black" title="Medical Centers List" text>
<v-layout wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3 class="pr-3">
<v-text-field label="Name" v-model="filter.name" color="black"/>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-4 my-3">
<v-divider/>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 mt-3">
<v-flex md12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
</template>
<template slot="items" slot-scope="{ item }">
<td class="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
<td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
<td class="title font-weight-light">{{ item.users_count }} Operator</td>
<td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
:to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn>
</router-link>
</template>
<span>Edit</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" :to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)" class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span>
<v-container fluid>
<material-card class color="black" title="Medical Centers List" text>
<v-layout wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3 class="pr-3">
<v-text-field label="Name" v-model="filter.name" color="black"/>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</template>
<span>Remove</span>
</v-tooltip>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider/>
<div class="text-xs-center mt-2" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
</div>
<v-layout row wrap align-center justify-center class="mt-3">
<router-link :to="{ name: 'Dashboard' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-layout>
</material-card>
</v-container>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-4 my-3">
<v-divider/>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 mt-3">
<v-flex md12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
</template>
<template slot="items" slot-scope="{ item }">
<td class="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
<td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
<td class="title font-weight-light">{{ item.users_count }} Operator</td>
<td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
:to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn>
</router-link>
</template>
<span>Edit</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
:to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1"
class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)"
class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span>
</v-btn>
</template>
<span>Remove</span>
</v-tooltip>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider/>
<div class="text-xs-center mt-2" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
</div>
<v-layout row wrap align-center justify-center class="mt-3">
<router-link :to="{ name: 'Dashboard' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-layout>
</material-card>
</v-container>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from 'vuex'
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
import {mapMutations} from 'vuex'
export default {
data: () => ({
headers: [
{sortable: false, text: "Hospital Name", value: "name"},
{sortable: false, text: "Date", value: "date"},
{sortable: false, text: "Operator", value: "operator"},
{sortable: false, text: "Action", value: "action", align: "center",}
],
filter: {
name: ''
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
items: [],
currentPage: 1,
lastPage: 1
}),
created() {
this.load();
},
methods: {
...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
async load(page = 1) {
let filter = `?page=${page}&name=${this.filter.name}`;
const result = await ApiService.get(urls.listMedicalCenter(filter));
this.items = result.data.data.data;
this.currentPage = result.data.data.current_page;
this.lastPage = result.data.data.last_page;
data: () => ({
headers: [
{sortable: false, text: "Hospital Name", value: "name"},
{sortable: false, text: "Date", value: "date"},
{sortable: false, text: "Operator", value: "operator"},
{sortable: false, text: "Action", value: "action", align: "center",}
],
filter: {
name: ''
},
items: [],
currentPage: 1,
lastPage: 1
}),
created() {
this.load();
},
async remove(id) {
this.changeCurrentModal({
modal: "modal-user-confirmation",
properties: {
width: '30'
methods: {
...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
async load(page = 1) {
let filter = `?page=${page}&name=${this.filter.name}`;
const result = await ApiService.get(urls.listMedicalCenter(filter));
this.items = result.data.data.data;
this.currentPage = result.data.data.current_page;
this.lastPage = result.data.data.last_page;
},
success: async () => {
const result = await ApiService.delete(urls.deleteMedicalCenter(id));
this.closeModal();
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items[key].id == id) {
this.items.splice(key, 1);
}
}
}
},
});
async remove(id) {
this.changeCurrentModal({
modal: "modal-user-confirmation",
properties: {
width: '30'
},
success: async () => {
const result = await ApiService.delete(urls.deleteMedicalCenter(id));
this.closeModal();
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items[key].id == id) {
this.items.splice(key, 1);
}
}
}
},
});
}
},
watch: {
currentPage(page) {
this.load(page);
}
}
},
watch: {
currentPage(page) {
this.load(page);
}
}
};
</script>
<style lang="css" scoped>
.WM-ActionButton {
padding: 8px 22px;
padding: 8px 22px;
}
</style>
src/views/MedicalCenter/OperatorList.vue
+175 -186
View File
@@ -1,200 +1,189 @@
<template>
<v-container grid-list-xs>
<material-card class color="black" :title="`Operator List`" text>
<v-layout row wrap class="px-5 mb-3">
<v-flex xs12 md3 xs3>
<v-text-field name="Name" v-model="filter.name" label="Name" class="pa-2" color="black"></v-text-field>
</v-flex>
<v-flex xs12 md3 xs3>
<v-text-field name="cell_number" v-model="filter.cell_number" label="Cell Number" class="pa-2" color="black"></v-text-field>
</v-flex>
<v-flex xs12 md2 xs3>
<v-select :items="roles" name="roles" v-model="filter.role" label="Roles" class="pa-2" color="black"></v-select>
</v-flex>
<v-flex xs12 md2 sm2 class="text-xs-right">
<v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 30px">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 md2 sm2 class="text-xs-right">
<router-link :to="`/add-operator/${$route.params.medicalCenter}`">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
<v-layout row align-center justify-center wrap class="px-5 mt-3">
<v-flex md12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<v-container grid-list-xs>
<material-card class color="black" :title="`Operator List`" text>
<v-layout row wrap class="px-5 mb-3">
<v-flex xs12 md3 xs3>
<v-text-field name="Name" v-model="filter.name" label="Name" class="pa-2"
color="black"></v-text-field>
</v-flex>
<v-flex xs12 md3 xs3>
<v-text-field name="cell_number" v-model="filter.cell_number" label="Cell Number" class="pa-2"
color="black"></v-text-field>
</v-flex>
<v-flex xs12 md2 xs3>
<v-select :items="roles" name="roles" v-model="filter.role" label="Roles" class="pa-2"
color="black"></v-select>
</v-flex>
<v-flex xs12 md2 sm2 class="text-xs-right">
<v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 30px">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 md2 sm2 class="text-xs-right">
<router-link :to="`/add-operator/${$route.params.medicalCenter}`">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
<v-layout row align-center justify-center wrap class="px-5 mt-3">
<v-flex md12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<span
class="subheading font-weight-light text-white text--darken-3"
v-text="header.text"
class="subheading font-weight-light text-white text--darken-3"
v-text="header.text"
/>
</template>
<template slot="items" slot-scope="{ item }">
<td class="headline font-weight-light">{{ item.name }}</td>
<td class="title font-weight-light">
<span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
</td>
<td class="title font-weight-light">{{ item.cell_number }}</td>
<td class="title font-weight-light">{{ item.status }}</td>
<td class="text-xs-right justify-self-end">
<v-btn
:color="item.status == 'Active' ? 'red' : 'green'"
@click="changeStatus(item.id)"
class="mr-2 WM-ActionButton"
>
<template v-if="item.status == 'Active'">
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span v-if="item.status == 'Active'">Suspended</span>
</template>
<template v-else>
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Active</span>
</template>
</v-btn>
<v-btn
color="orange darken-1"
@click="changeRoleModal(item)"
class="mr-2 WM-ActionButton"
>
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Role</span>
</v-btn>
<v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span>
</v-btn>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider/>
<v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/manage-medical-center">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-layout>
</material-card>
</v-container>
</template>
<template slot="items" slot-scope="{ item }">
<td class="headline font-weight-light">{{ item.name }}</td>
<td class="title font-weight-light">
<span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
</td>
<td class="title font-weight-light">{{ item.cell_number }}</td>
<td class="title font-weight-light">{{ item.status }}</td>
<td class="text-xs-right justify-self-end">
<v-btn
:color="item.status == 'Active' ? 'red' : 'green'"
@click="changeStatus(item.id)"
class="mr-2 WM-ActionButton"
>
<template v-if="item.status == 'Active'">
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span v-if="item.status == 'Active'">Suspended</span>
</template>
<template v-else>
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Active</span>
</template>
</v-btn>
<v-btn
color="orange darken-1"
@click="changeRoleModal(item)"
class="mr-2 WM-ActionButton"
>
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Role</span>
</v-btn>
<v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span>
</v-btn>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider/>
<v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/manage-medical-center">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-layout>
</material-card>
</v-container>
</template>
<script>
import { ApiService } from "@/services";
import { mapMutations, mapGetters } from "vuex";
import { urls } from "@/config/urls";
import { roles } from "@/config/utils";
import {ApiService} from "@/services";
import {mapMutations, mapGetters} from "vuex";
import {urls} from "@/config/urls";
import {roles} from "@/config/utils";
export default {
data: () => ({
headers: [
{
sortable: true,
text: "Operator Name",
value: "name"
},
{
sortable: false,
text: "Role",
value: "role"
},
{
sortable: false,
text: "Number",
value: "number"
},
{
sortable: false,
text: "Status",
value: "status"
},
{
sortable: false,
text: "Action",
value: "action",
align: "right"
}
],
filter: {
name: '',
cell_number: '',
role: '',
},
items: [],
name: "",
roles,
}),
created() {
if (this.$route.params.medicalCenter) {
this.load();
}
},
methods: {
async load() {
let medicalCenterId = this.$route.params.medicalCenter;
let filter = "?";
for (const key in this.filter) {
if (this.filter.hasOwnProperty(key)) {
filter += `${key}=${this.filter[key]}&`;
}
}
const result = await ApiService.get(
urls.listOpertorMedicalCenter(medicalCenterId, filter)
);
if (result && result.status == 200) {
this.items = result.data.data.users;
} else {
this.$router.push({name:`Dashboard`});
}
},
async changeStatus(userId) {
const result = await ApiService.post(urls.changeStatusUser(userId));
if (result && result.status == 200) {
for (let user of this.items) {
if (user.id == userId) {
user.status = result.data.data.status;
}
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
} else {
this.$router.push({name:`Dashboard`});
}
},
...mapMutations("modal", ["changeCurrentModal"]),
changeRoleModal(user) {
this.changeCurrentModal({
modal: "modal-user-role",
properties: { user }
});
data: () => ({
headers: [
{sortable: false, text: "Operator Name", value: "name"},
{sortable: false, text: "Role", value: "role"},
{sortable: false, text: "Number", value: "number"},
{sortable: false, text: "Status", value: "status"},
{sortable: false, text: "Action", value: "action", align: "right"}
],
filter: {
name: '',
cell_number: '',
role: '',
},
items: [],
name: "",
roles,
}),
created() {
if (this.$route.params.medicalCenter) {
this.load();
}
},
async remove(userId) {
const result = await ApiService.delete(urls.deleteUser(userId));
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items.hasOwnProperty(key) && this.items[key].id == userId) {
this.items.splice(key, 1);
}
methods: {
async load() {
let medicalCenterId = this.$route.params.medicalCenter;
let filter = "?";
for (const key in this.filter) {
if (this.filter.hasOwnProperty(key)) {
filter += `${key}=${this.filter[key]}&`;
}
}
const result = await ApiService.get(
urls.listOpertorMedicalCenter(medicalCenterId, filter)
);
if (result && result.status == 200) {
this.items = result.data.data.users;
} else {
this.$router.push({name: `Dashboard`});
}
},
async changeStatus(userId) {
const result = await ApiService.post(urls.changeStatusUser(userId));
if (result && result.status == 200) {
for (let user of this.items) {
if (user.id == userId) {
user.status = result.data.data.status;
}
}
} else {
this.$router.push({name: `Dashboard`});
}
},
...mapMutations("modal", ["changeCurrentModal"]),
changeRoleModal(user) {
this.changeCurrentModal({
modal: "modal-user-role",
properties: {user}
});
},
async remove(userId) {
const result = await ApiService.delete(urls.deleteUser(userId));
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items.hasOwnProperty(key) && this.items[key].id == userId) {
this.items.splice(key, 1);
}
}
}
}
}
}
},
computed: {
...mapGetters("modal", ["getModalResult"])
},
watch: {
getModalResult(user) {
for (const userList of this.items) {
if (userList.id == user.id) {
userList.roles = user.roles;
},
computed: {
...mapGetters("modal", ["getModalResult"])
},
watch: {
getModalResult(user) {
for (const userList of this.items) {
if (userList.id == user.id) {
userList.roles = user.roles;
}
}
}
}
}
}
};
</script>
src/views/MyItem/List.vue
+6
View File
@@ -167,6 +167,12 @@ import {mapMutations, mapGetters, mapActions} from "vuex";
import toast from "@/services/global/toast.service";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
// {sortable: true,text: "ID",value: "id"},
src/views/MyPackage/List.vue
+21 -9
View File
@@ -56,10 +56,16 @@
<td class="title font-weight-light">{{ item.status }}</td>
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
<template v-if="$hasRole('Admin|Supervisor')">
<v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom open-on-hover>
<v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom
open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn :color="status.color" class="mr-2" @click="changeStatus(item, status.status)" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption">fas {{ status.icon }}</v-icon>
<v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">fas {{
status.icon
}}
</v-icon>
<span>{{ status.label }}</span>
</v-btn>
</template>
@@ -154,6 +160,12 @@ import {mapMutations, mapGetters} from "vuex";
import toast from "@/services/global/toast.service";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "ID", value: "Package ID"},
@@ -161,7 +173,7 @@ export default {
{sortable: false, text: "Hospital", value: "Hospital"},
{sortable: false, text: "Description", value: "description"},
{sortable: false, text: "Status", value: "status"},
{sortable: false, text: "Action", value: "action", align: "center",width:'20%'}
{sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
],
filter: {
name: '',
@@ -191,8 +203,8 @@ export default {
if (result && result.status == 200) {
const {data, meta} = result.data;
this.items = data;
this.currentPage = meta? meta.current_page : 1;
this.lastPage =meta? meta.last_page : 1;
this.currentPage = meta ? meta.current_page : 1;
this.lastPage = meta ? meta.last_page : 1;
}
this.loadMedicalCenters();
},
@@ -227,8 +239,8 @@ export default {
getStatus(item) {
if (item.status === 'pending') {
return [
{ status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close' },
{ status: 'approved', label: 'approve', color: 'green', icon: 'fa-check' }
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
]
} else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -243,7 +255,7 @@ export default {
}
},
async changeStatus(item, status) {
const result = await ApiService.post(urls.changePackageStatus(item.id), { status })
const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
if (result?.data?.data?.status) {
const newStatus = result.data.data.status
src/views/Package/AddEdit.vue
+6
View File
@@ -118,6 +118,12 @@ import {urls} from "@/config/urls";
import {mapMutations} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
formData: {
src/views/Package/List.vue
+6
View File
@@ -160,6 +160,12 @@ import {mapMutations, mapGetters} from "vuex";
import toast from "@/services/global/toast.service";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "ID", value: "Package ID"},
src/views/Statistics/Chart.vue
+186 -169
View File
@@ -1,195 +1,212 @@
<template>
<div>
<v-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Search Result">
<v-layout align-center justify-center wrap class="px-5 my-3">
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenterId" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="fromMenu"
>
<v-text-field
required
slot="activator"
label="FromDate"
color="black"
v-model="form.fromPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.fromPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="upToMenu"
>
<v-text-field
required
slot="activator"
label="UpToDate"
color="black"
v-model="form.upToPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.upToPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
style="padding:10px 60px;"
@click="submitForm"
>
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
<span class="black--text">GO</span>
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-divider></v-divider>
</v-layout>
</material-card>
</v-container>
</v-form>
<div v-if="chart" class="small">
<pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
<bar-chart v-else :chart-data="datacollection"></bar-chart>
<div>
<v-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Search Result">
<v-layout align-center justify-center wrap class="px-5 my-3">
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="medicalCenters" item-text="name" item-value="id"
v-model="form.medicalCenterId" @change="fillUsers" label="Hospital"
color="black" class="pa-2"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId"
label="User" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="testTypes" item-text="name" item-value="id"
v-model="form.testTypeId" label="TestType" color="black"
class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="result" v-model="form.result" label="Result" color="black"
class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black"
class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="type" v-model="form.type" label="Type" color="black"
class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="fromMenu"
>
<v-text-field
required
slot="activator"
label="FromDate"
color="black"
v-model="form.fromPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.fromPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="upToMenu"
>
<v-text-field
required
slot="activator"
label="UpToDate"
color="black"
v-model="form.upToPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.upToPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
style="padding:10px 60px;"
@click="submitForm"
>
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
<span class="black--text">GO</span>
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-divider></v-divider>
</v-layout>
</material-card>
</v-container>
</v-form>
<div v-if="chart" class="small">
<pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
<bar-chart v-else :chart-data="datacollection"></bar-chart>
</div>
</div>
</div>
</template>
<script>
import BarChart from "@/plugins/chart/BarChart.js";
import PieChart from "@/plugins/chart/PieChart.js";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
export default {
components: {
BarChart,
PieChart
},
data() {
return {
datacollection: null,
fromMenu: '',
upToMenu: '',
verify: ['Verified', 'NotVerified'],
result: ['Accept', 'Failed'],
type: ['BarChart', 'PieChart'],
users: [],
medicalCenters: [],
testTypes: [],
form: {
medicalCenterId: null,
userId: null,
testTypeId: null,
result: null,
verify: null,
type: 'PieChart',
fromPicker: '',
upToPicker: '',
},
chart: false
};
},
created() {
this.load();
},
methods: {
fillData(options) {
this.datacollection = {
labels: options.labels,
// labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: "Data One",
backgroundColor: ["#f87979", "#ccc"],
data: options.data,
// data: [this.getRandomInt(), this.getRandomInt()],
}
]
};
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
async load() {
const result = await ApiService.get(urls.listFilterItemsTestResult);
if (result && result.status == 200) {
this.medicalCenters = result.data.data.MedicalCenters;
this.testTypes = result.data.data.TestTypes;
}
components: {
BarChart,
PieChart
},
async fillUsers() {
const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
if (result && result.status == 200) {
this.users = result.data.data.users;
}
data() {
return {
datacollection: null,
fromMenu: '',
upToMenu: '',
verify: ['Verified', 'NotVerified'],
result: ['Accept', 'Failed'],
type: ['BarChart', 'PieChart'],
users: [],
medicalCenters: [],
testTypes: [],
form: {
medicalCenterId: null,
userId: null,
testTypeId: null,
result: null,
verify: null,
type: 'PieChart',
fromPicker: '',
upToPicker: '',
},
chart: false
};
},
async submitForm() {
const result = await ApiService.post(urls.statistics, this.form);
if (result && result.status == 200) {
this.fillData(result.data.data);
this.chart = true;
}
created() {
this.load();
},
}
methods: {
fillData(options) {
this.datacollection = {
labels: options.labels,
// labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: "Data One",
backgroundColor: ["#f87979", "#ccc"],
data: options.data,
// data: [this.getRandomInt(), this.getRandomInt()],
}
]
};
},
async load() {
const result = await ApiService.get(urls.listFilterItemsTestResult);
if (result && result.status == 200) {
this.medicalCenters = result.data.data.MedicalCenters;
this.testTypes = result.data.data.TestTypes;
}
},
async fillUsers() {
const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
if (result && result.status == 200) {
this.users = result.data.data.users;
}
},
async submitForm() {
const result = await ApiService.post(urls.statistics, this.form);
if (result && result.status == 200) {
this.fillData(result.data.data);
this.chart = true;
}
},
}
};
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
max-width: 600px;
margin: 150px auto;
}
.v-btn--floating {
padding: 0!important;
padding: 0 !important;
}
.theme--light.v-btn.v-btn--flat {
color: rgba(0,0,0,.87)!important;
color: rgba(0, 0, 0, .87) !important;
}
.v-btn--floating, .v-btn--icon:before {
border-radius: 50%!important;
border-radius: 50% !important;
}
</style>
src/views/TestResult/AddEdit.vue
+6
View File
@@ -416,6 +416,12 @@ import {ApiService} from "@/services";
import {urls} from "@/config/urls";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
components: {
'wm-Dropzone': Dropzone,
},
src/views/TestResult/List.vue
+6
View File
@@ -186,6 +186,12 @@ import {
} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "ID", value: "name"},
src/views/TestResult/Show.vue
+6
View File
@@ -126,6 +126,12 @@ import { mapGetters, mapMutations } from "vuex";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
data: {
user: {
src/views/TestType/AddEdit.vue
+8 -1
View File
@@ -266,7 +266,8 @@
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
REMOVE
</v-btn>
<v-layout row wrap align-center justify-center class="mt-4" v-if="(form.info.length -1) == keyForm">
<v-layout row wrap align-center justify-center class="mt-4"
v-if="(form.info.length -1) == keyForm">
<v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="white--text">Add</span>
@@ -301,6 +302,12 @@ import {ApiService} from "@/services";
import {urls} from "@/config/urls";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
form: {
src/views/TestType/List.vue
+6
View File
@@ -150,6 +150,12 @@ import {urls} from "@/config/urls";
import {mapMutations, mapGetters} from "vuex";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{sortable: false, text: "TestType Name", value: "name"},
src/views/User/List.vue
+6
View File
@@ -144,6 +144,12 @@ import {mapMutations, mapGetters} from "vuex";
import {roles} from "@/config/utils";
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data: () => ({
headers: [
{
src/views/User/MyInfo.vue
+6
View File
@@ -96,6 +96,12 @@ import {urls} from "@/config/urls";
import {mapMutations} from 'vuex';
export default {
metaInfo() {
return {
title: this.$route.meta.title,
meta: this.$route.meta.metaTags || []
}
},
data() {
return {
user: {