mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 03:31:06 +03:30
106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<template>
|
|
<v-container grid-list-xs>
|
|
<material-card class color="black" :title="`Operator List ${name}`" text>
|
|
<v-layout row wrap class="px-5 mb-3">
|
|
<v-flex xs12 md3 xs3>
|
|
<v-text-field name="Name" label="Name" class="pa-2" color="black" id="id"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 md3 xs3>
|
|
<v-text-field name="cell_number" label="Cell Number" class="pa-2" color="black" id="id"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 md2 sm2 class="text-xs-right">
|
|
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
|
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
|
<span class="white--text">Filter</span>
|
|
</v-btn>
|
|
</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"
|
|
/>
|
|
</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="(key, role) in item.roles" :key="key" >{{ role }}</span></td>
|
|
<td class="title font-weight-light">{{ item.cell_number }}</td>
|
|
<td class="text-xs-right">
|
|
<v-btn 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 to="/role">
|
|
<v-btn color="orange darken-1" class="mr-2 WM-ActionButton">
|
|
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
|
|
<span>Role</span>
|
|
</v-btn>
|
|
</router-link>
|
|
<v-btn color="pink" class="WM-ActionButton">
|
|
<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-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';
|
|
export default {
|
|
data: () => ({
|
|
headers: [
|
|
{
|
|
sortable: false,
|
|
text: "Operator Name",
|
|
value: "name"
|
|
},
|
|
{
|
|
sortable: false,
|
|
text: "Role",
|
|
value: "role"
|
|
},
|
|
{
|
|
sortable: false,
|
|
text: "Number",
|
|
value: "number"
|
|
},
|
|
{
|
|
sortable: false,
|
|
text: "Action",
|
|
value: "action",
|
|
align: "right"
|
|
}
|
|
],
|
|
items: [],
|
|
name : ''
|
|
}),
|
|
created() {
|
|
if (this.$route.params.medicalCenter) {
|
|
this.load(this.$route.params.medicalCenter);
|
|
}
|
|
},
|
|
methods: {
|
|
async load(medicalCenterId) {
|
|
const result = await ApiService.get(`Users/${medicalCenterId}/MedicalCenter`);
|
|
this.items = result.data.users;
|
|
this.name = result.data.name;
|
|
}
|
|
}
|
|
};
|
|
</script> |