161 lines
4.3 KiB
Vue
161 lines
4.3 KiB
Vue
<template lang="pug">
|
|
.list-wrapper.h-full.flex.gap-y-1.flex-col
|
|
.p-4.rounded.background
|
|
q-btn(
|
|
color="primary",
|
|
size="16px",
|
|
label="Создать осмотр",
|
|
no-caps,
|
|
icon="add",
|
|
:style="{width: '100%', height: '40px'}"
|
|
padding="0",
|
|
@click="changeShownCreateModal(true)"
|
|
)
|
|
.p-4.rounded.background.list
|
|
.flex
|
|
base-select(
|
|
:style="{flex: 1}",
|
|
:items="sortingYears",
|
|
v-model="sortingYear",
|
|
clearable
|
|
)
|
|
q-btn.ml-2(
|
|
icon="app:sort-number",
|
|
:style="{width: '40px', height: '40px'}",
|
|
padding="0",
|
|
:class="sortingClass",
|
|
@click="invertSorting"
|
|
)
|
|
.flex.py-4.w-full.color-grey.text-base.justify-center
|
|
span.opacity-50 {{ `Осмотров: ${sortingProtocols?.length}` }}
|
|
.flex.flex-col.gap-y-2
|
|
medical-protocol-card(
|
|
v-for="protocol in sortingProtocols", :key="protocol.id",
|
|
:protocol-data="protocol",
|
|
@click="openInspection"
|
|
)
|
|
base-modal(
|
|
v-model="showModal",
|
|
title="Создание осмотра"
|
|
)
|
|
medical-protocol-create-modal(
|
|
:change-shown-create-modal="changeShownCreateModal",
|
|
:create-inspection="createInspection"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseSelect from "@/components/base/BaseSelect.vue";
|
|
import BaseAvatar from "@/components/base/BaseAvatar.vue";
|
|
import MedicalProtocolCard from "@/pages/newMedicalCard/components/MedicalProtocolCard.vue";
|
|
import BaseModal from "@/components/base/BaseModal.vue";
|
|
import MedicalProtocolCreateModal from "./MedicalProtocolCreateModal.vue";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
name: "MedicalProtocolsList",
|
|
components: {
|
|
BaseSelect,
|
|
BaseAvatar,
|
|
MedicalProtocolCard,
|
|
BaseModal,
|
|
MedicalProtocolCreateModal,
|
|
},
|
|
props: {
|
|
openInspection: Function,
|
|
createInspection: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
sorting: false,
|
|
sortingYear: "",
|
|
activeProtocolId: 1,
|
|
showModal: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
protocolsData: (state) => state.medical.protocolsData,
|
|
}),
|
|
sortingClass() {
|
|
return this.sorting
|
|
? {
|
|
"sort-icon-active": true,
|
|
}
|
|
: {
|
|
"sort-icon-default": true,
|
|
};
|
|
},
|
|
sortingYears() {
|
|
if (!this.protocolsData) return [];
|
|
let years = this.protocolsData
|
|
.map((elem) => {
|
|
return elem?.start.slice(0, 4);
|
|
})
|
|
.sort((first, second) => second - first);
|
|
return this.sorting ? [...new Set(years.reverse())] : [...new Set(years)];
|
|
},
|
|
sortingProtocols() {
|
|
if (!this.protocolsData) return [];
|
|
let protocols = [];
|
|
this.protocolsData.forEach((elem) =>
|
|
protocols.push({
|
|
id: elem.id,
|
|
employee: {
|
|
last_name: elem.employee?.last_name,
|
|
first_name: elem.employee?.first_name,
|
|
patronymic: elem.employee?.patronymic,
|
|
job_title: elem.employee?.job_title,
|
|
photo: elem.employee?.photo,
|
|
},
|
|
start: elem.start,
|
|
end: elem.end,
|
|
status: elem.status,
|
|
})
|
|
);
|
|
if (this.sortingYear) {
|
|
protocols = protocols.filter(
|
|
(elem) => elem.start.slice(0, 4) === this.sortingYear
|
|
);
|
|
}
|
|
let sorted = protocols.sort((first, second) => {
|
|
let firstDate = first?.start.split("T")[0];
|
|
let secondDate = second?.start.split("T")[0];
|
|
if (firstDate > secondDate) return 1;
|
|
if (firstDate < secondDate) return -1;
|
|
return 0;
|
|
});
|
|
if (this.sorting) return sorted;
|
|
return sorted.reverse();
|
|
},
|
|
},
|
|
methods: {
|
|
invertSorting() {
|
|
this.sorting = !this.sorting;
|
|
},
|
|
changeShownCreateModal(value) {
|
|
this.showModal = value;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.list-wrapper
|
|
width: 19.6%
|
|
.list
|
|
height: calc(100% - 76px)
|
|
overflow-y: auto
|
|
&::-webkit-scrollbar
|
|
width: 0
|
|
.background
|
|
background-color: var(--default-white)
|
|
.sort-icon-default
|
|
background-color: var(--bg-light-grey)
|
|
color: var(--font-grey-color)
|
|
.sort-icon-active
|
|
background-color: var(--btn-blue-color)
|
|
color: var(--default-white)
|
|
.color-grey
|
|
color: var(--font-grey-color)
|
|
</style>
|