<template>
<div class="pt-6">
<table class="w-1/2 mx-auto border-0 m-0 p-0 border-collapse border-spacing-0 text-base">
<thead class="bg-sky-500/75 text-white text-center uppercase">
<th class="p-3">Фамилия</th>
<th class="p-3">Имя</th>
<th class="p-3">Номер</th>
<th class="p-3">Изменить</th>
<th class="p-3">Удалить</th>
</thead>
<tbody>
<tr class="border-b-1 border-b-grey hover:bg-sky-500/10 hover:cursor-pointer transition duration-500 ease-out hover:ease-in"
v-for="employee in GET_EMPLOYEES" :key="employee.id">
<td data-label="Фамилия" class="p-2">{{ employee.lastname }}</td>
<td data-label="Имя" class="p-2">{{ employee.firstname }}</td>
<td data-label="Номер" class="p-2">{{ employee.number }}</td>
<td data-label="Изменить" class="p-2">
<button
class="focus:outline-0"
@click="editModal(employee)"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-pencil-square fill-lightGreen hover:fill-darkGreen transition duration-500" viewBox="0 0 16 16">
<path
d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</button>
</td>
<td data-label="Удалить" class="p-2 flex justify-center items-center">
<button
class="focus:outline-0"
@click="deleteEmployee(employee)"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-trash fill-red-500 hover:fill-red-700 transition duration-500 ease-out"
viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
<employee-create-button />
<employee-modal-update />
</div>
</template>
<script>
import EmployeeCreateButton from './EmployeeCreateButton.vue';
import EmployeeModalUpdate from './EmployeeModalUpdate.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
name: 'EmployeesTable',
components: {
EmployeeCreateButton,
EmployeeModalUpdate
},
props: ['search'],
async mounted() {
await this.getEmployees()
},
methods: {
...mapActions(['getEmployees', 'updateEmployee', 'deleteEmployee']),
...mapMutations(['SET_SHOW_UPDATE_MODAL', 'SET_EMPLOYEE_DATA']),
editModal(employee) {
this.SET_SHOW_UPDATE_MODAL()
this.SET_EMPLOYEE_DATA(employee)
}
},
computed: {
...mapGetters(['GET_EMPLOYEES']),
}
}
</script>import axios from 'axios';
export default ({
state: {
isOpenCreateModal: false,
isOpenUpdateModal: false,
isOpenDeleteModal: false,
employees: null,
employee: {
id: '',
lastname: '',
firstname: '',
number: ''
}
},
getters: {
SHOW_CREATE_MODAL: (state) => state.isOpenCreateModal,
SHOW_UPDATE_MODAL: (state) => state.isOpenUpdateModal,
SHOW_DELETE_MODAL: (state) => state.isOpenDeleteModal,
GET_EMPLOYEES: (state) => state.employees,
GET_ID: (state) => state.employee.id,
GET_LASTNAME: (state) => state.employee.lastname,
GET_FIRSTNAME: (state) => state.employee.firstname,
GET_NUMBER: (state) => state.employee.number,
},
mutations: {
SET_SHOW_CREATE_MODAL: (state) => state.isOpenCreateModal = true,
SET_HIDE_CREATE_MODAL: (state) => state.isOpenCreateModal = false,
SET_SHOW_UPDATE_MODAL: (state) => state.isOpenUpdateModal = true,
SET_HIDE_UPDATE_MODAL: (state) => state.isOpenUpdateModal = false,
SET_SHOW_DELETE_MODAL: (state) => state.isOpenDeleteModal = true,
SET_HIDE_DELETE_MODAL: (state) => state.isOpenDeleteModal = false,
SET_EMPLOYEES: (state, data) => state.employees = data,
SET_EMPLOYEE: (state, employee) => state.employee = employee,
SET_ID: (state, employee) => state.employee.id = employee,
SET_LASTNAME: (state, employee) => state.employee.lastname = employee,
SET_FIRSTNAME: (state, employee) => state.employee.firstname = employee,
SET_NUMBER: (state, employee) => state.employee.number = employee,
SET_ADD_EMPLOYEE: (state, employee) => {
state.employees.unshift({
lastname: employee.lastname,
firstname: employee.firstname,
number: employee.number
})
},
SET_EMPLOYEE_DATA: (state, employee) => {
state.employee.id = employee.id
state.employee.lastname = employee.lastname
state.employee.firstname = employee.firstname
state.employee.number = employee.number
},
UPDATE_EMPLOYEE: (state, update) => {
const idx = state.employees.findIndex(employee => employee.id === update.id)
if (idx !== -1) {
state.employees.splice(idx, 1, update)
}
}
},
actions: {
async getEmployees({ commit }) {
const response = await axios.get('http://127.0.0.1:8000/api/v1/employees/')
commit('SET_EMPLOYEES', response.data)
},
async createEmployee({ commit }, employee) {
const response = await axios.post('http://127.0.0.1:8000/api/v1/employees/', employee)
commit('SET_ADD_EMPLOYEE', response.data)
},
async updateEmployee({ commit }, employee) {
const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${employee.id}/`, employee)
commit('UPDATE_EMPLOYEE', response.data)
},
async deleteEmployee({ dispatch }, employee) {
const response = await axios.delete(`http://127.0.0.1:8000/api/v1/employees/${employee.id}/`, employee)
dispatch('getEmployees', response.data)
}
}
})
<template>
<transition name="fade">
<div class="fixed top-0 left-0 w-full h-full z-10 flex justify-center items-center transition duration-300 ease-out"
v-if="SHOW_UPDATE_MODAL"
>
<div
class="fixed top-0 left-0 w-full h-full bg-bgOverLey"
@click="SET_HIDE_UPDATE_MODAL"
>
</div>
<div class="z-20 px-3 py-14 w-1/3 bg-white shadow-shadowForm relative rounded-lg model-content">
<button
class="absolute top-1 right-1 focus:outline-0"
@click="SET_HIDE_UPDATE_MODAL"
>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
class="bi bi-x fill-grey hover:fill-closeColor transition duration-1000 ease-out"
viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<form class="modal-form" @submit.prevent="updateEmployee(employee)">
<div class="py-2">
<input
type="text"
placeholder="Фамилия"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="lastname"
>
<input
type="text"
placeholder="Имя"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="firstname"
>
<input
type="number"
placeholder="Внутрнний"
class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="number"
>
</div>
<button
class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out"
>Изменить</button>
</form>
</div>
</div>
</transition>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
name: 'EmployeeModalUpdate',
methods: {
...mapMutations(['SET_HIDE_UPDATE_MODAL', 'SET_ID', 'SET_LASTNAME', 'SET_FIRSTNAME', 'SET_NUMBER', 'SET_EMPLOYEES']),
...mapActions(['updateEmployee']),
// Редактировать
},
computed: {
...mapGetters(['SHOW_UPDATE_MODAL']),
employee() {
return this.$store.state.employee
},
id: {
get() {
return this.$store.getters.GET_ID
},
set(employee) {
return this.SET_ID(employee)
}
},
lastname: {
get() {
return this.$store.getters.GET_LASTNAME
},
set(employee) {
return this.SET_LASTNAME(employee)
}
},
firstname: {
get() {
return this.$store.getters.GET_FIRSTNAME
},
set(employee) {
return this.SET_FIRSTNAME(employee)
}
},
number: {
get() {
return this.$store.getters.GET_NUMBER
},
set(employee) {
return this.SET_NUMBER(employee)
}
},
},
}
</script>
<style lang="sass">
.fade-enter-active
opacity: 0
.fade-leave-active
opacity: 0
</style>actions: {
async updateEmployee({ commit }, id, employee) {
const response = await axios.put(`http://127.0.0.1:8000/api/v1/employees/${id}/`, employee )
commit('SET_EMPLOYEES', response.data)
}
}<form class="modal-form" @submit.prevent="updateEmployee(id, employee)">
<div class="py-2">
<input type="text" placeholder="Фамилия" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="lastname">
<input type="text" placeholder="Имя" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="firstname">
<input type="number" placeholder="Внутрнний" class="focus:outline-0 border-1 p-2 my-1 mx-1 w-44 rounded-lg"
v-model="number">
</div>
<button
class="focus:outline-0 bg-lightGreen text-white py-2 px-3 hover:bg-darkGreen transition duration-500 ease-out">Изменить</button>
</form>
