admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'page-govno' into 'master'

Browse Source 
Page govno

See merge request andrusyakka/urban-couscous!496
This commit is contained in:
Kirill Andrusyak
2023-08-01 22:58:02 +00:00
parent d1a84fc060 e682136ed8
commit 8ab1d8265e
14 changed files with 216 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@dop/astra-ui": "^0.2.5",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"vue": "^3.2.13",
"vue-router": "^4.1.5",
@@ -7578,8 +7579,7 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.assign": {
"version": "4.2.0",
@@ -17981,8 +17981,7 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.assign": {
"version": "4.2.0",

1
package.json
View File

@@ -11,6 +11,7 @@
"@dop/astra-ui": "^0.2.5",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"vue": "^3.2.13",
"vue-router": "^4.1.5",

8
src/components/LoggedInLayout.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.flex.flex-col.w-full.h-full.gap-y-2.pb-2
.flex.flex-col.w-full.h-full.gap-y-2.pb-2.no-scroll
the-header(
:url="url",
:is-open-form="isOpenForm",
@@ -8,7 +8,7 @@
:set-updated-clients="setUpdatedClients",
:write-created-client-id="writeCreatedClientId"
)
.flex.flex-auto.page-wrapper
.flex.grow.no-scroll
the-sidebar
router-view.mx-2(
:open-form="openForm",
@@ -59,7 +59,3 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.page-wrapper
height: calc(100vh - 56px - 16px)
</style>

2
src/components/TheSidebar.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
.sidebar.flex.flex-col.justify-between.pt-4.px-2.pb-7.rounded
.flex.flex-col.gap-y-4
base-button-sidebar(
v-for="button in pageSettings.filter((el) => el.id !== 'settings')",

60
src/pages/createMedicalCard/TheCreateMedicalCard.vue Normal file
View File

@@ -0,0 +1,60 @@
<template lang="pug">
.w-full.h-full.flex.flex-col
.flex.w-full.gap-x-2.pb-2
medical-header(
v-model="currentMenuItem",
:change-shown-remove-modal="changeShownRemoveModal",
)
medical-records
component(
v-if="currentMenuItem",
v-bind:is="currentMenuItem",
)
base-modal(
v-model="isShownRemoveModal",
title="Удаление медкарты"
)
medical-remove-modal(:change-shown-remove-modal="changeShownRemoveModal")
</template>
<script>
import MedicalHeader from "@/pages/newMedicalCard/components/MedicalHeader.vue";
import MedicalRecords from "@/pages/newMedicalCard/components/MedicalRecords.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import MedicalRemoveModal from "@/pages/newMedicalCard/components/MedicalRemoveModal.vue";
import MedicalBaseInfo from "@/pages/newMedicalCard/components/MedicalBaseInfo.vue";
export default {
name: "TheCreateMedicalCard",
components: {
MedicalRemoveModal,
BaseModal,
MedicalRecords,
MedicalHeader,
MedicalBaseInfo,
},
data() {
return {
isShownRemoveModal: false,
currentMenuItem: "MedicalBaseInfo",
};
},
created() {
this.$store.dispatch("setMedicalCardData", {
created_at: new Date(),
updated_at: new Date(),
type: "new",
number: "новая",
person: {
last_name: "Введите",
first_name: "имя",
patronymic: "пациента",
priority: 4,
allergic: [],
},
});
},
};
</script>
<style scoped lang="sass"></style>

9
src/pages/medcards/TheMedcards.vue
View File

@@ -1,6 +1,5 @@
<template lang="pug">
.medcards-wrapper.flex.flex-col.w-full.gap-y-2.h-full
table-patients
.medcards-wrapper.flex.flex-col.gap-y-2.h-full
medical-card-search
</template>
@@ -13,3 +12,9 @@ export default {
components: { MedicalCardSearch, TablePatients },
};
</script>
<style lang="sass">
.medcards-wrapper
width: calc(100vw - 72px)
overflow: hidden
</style>

12
src/pages/medcards/components/MedicalCardSearch.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.medical-wrapper.flex.h-full.rounded.w-full.flex-col
list-header
.medical-wrapper.rounded
list-header(@search="getMedcards")
list-contents
</template>
@@ -10,10 +10,18 @@ import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue"
export default {
name: "MedicalCardSearch",
components: { ListHeader, ListContents },
methods: {
getMedcards(value) {
console.log(value);
},
},
};
</script>
<style lang="sass" scoped>
.medical-wrapper
background-color: var(--default-white)
display: flex
flex-direction: column
overflow: hidden
</style>

79
src/pages/medcards/components/MedicalCardSearchHeader.vue
View File

@@ -1,42 +1,16 @@
<template lang="pug">
.header-wrapper.flex.w-full.justify-between.p-4
.flex.items-center.justify-center.gap-x-2
base-select.search(
width="438px",
base-input.search(
:width="438",
size="M",
placeholder="Найти медкарту",
placeholder="Введите ФИО или номер телефона",
icon-left,
hide-dropdown-icon,
use-input
:items="filteringMedcardsList",
custom-option,
:filter-fn="filterFn",
:popup-content-style="{height: filteringMedcardsList?.length > 3 ? '216px' : ''}"
v-model="filterString"
)
template(v-slot:iconLeft)
template(#iconLeft)
q-icon.search-icon(name="app:search", size="20px")
template(v-slot:customOption="slotProps")
.w-full.item.px-4.py-2.flex.gap-x-3.cursor-pointer(
v-bind="slotProps.props"
)
q-avatar(size="40px")
img(:src="slotProps.avatar")
.flex.flex-col.gap-y-1
.text-dark.text-sm.font-medium {{ slotProps.label }}
.text-xsx.grey-color Медкарта {{ `#${slotProps.medcard?.split(" ")?.join("")}` }}
template(v-slot:beforeOptions)
.h-10.w-full.px-4.pt-3.pb-2.flex.items-center
span.text-sm.grey-color {{ filteringMedcardsList.length }} результатов
template(v-slot:noOption)
.w-full.px-4.py-3.flex.items-center.text-sm.grey-color.font-medium Результатов по запросу не найдено
base-select(
width="280px",
:items="sortingOptions",
size="M",
placeholder="Сортировать по ...",
v-model="sortingType"
)
base-button(width="216px")
base-button(width="216px", @click="openCreateMedcardPage")
q-icon.plus.mr-2(name="app:plus", size="24px")
span Создать медкарту
</template>
@@ -45,47 +19,26 @@
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import {
medcardsList,
sortingOptions,
} from "@/pages/medcards/utils/medcardsConfig.js";
import debounce from "lodash/debounce";
export default {
name: "MedicalCardSearchHeader",
components: { BaseInput, BaseSelect, BaseButton },
emits: ["search"],
data() {
return {
filteringMedcardsList: null,
sortingOptions: sortingOptions,
sortingType: null,
filterString: "",
};
},
computed: {
serializedMedcardsList() {
return medcardsList.map((elem) => ({
label: `${elem?.last_name} ${elem?.first_name} ${elem?.patronymic}`,
id: elem?.id,
avatar: elem?.avatar,
medcard: elem?.medcard,
}));
},
},
methods: {
filterFn(val, update) {
update(() => {
this.filteringMedcardsList = this.serializedMedcardsList?.filter(
(elem) => {
let reg = new RegExp(`^${val}`, "ig");
if (reg.test(elem.label)) return elem;
}
);
});
},
initializeMedcardsList() {
this.filteringMedcardsList = this.serializedMedcardsList;
openCreateMedcardPage() {
alert("Создать медкарту с ФИО: " + this.filterString);
},
},
mounted() {
this.initializeMedcardsList();
watch: {
filterString: debounce(function (value) {
this.$emit("search", value);
}, 300),
},
};
</script>

44
src/pages/medcards/components/MedicalCardSearchList.vue
View File

@@ -1,20 +1,20 @@
<template lang="pug">
.list-wrapper.rounded.w-full(id="listWrapper")
.w-full.header.h-10.flex
.h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
v-for="field in headerConfig",
:key="field.title",
:style="headerStyle(field)"
) {{ field.title }}
.h-full.w-8(v-if="scrollPresence")
.body.w-full
row(
v-for="medcard in medcardsInfo",
:key="medcard.id"
:scroll-presence="scrollPresence",
:header-style="headerStyle",
:medcard-info="medcard",
)
.scroll-wrapper
.list-wrapper.rounded.w-full(id="listWrapper")
.w-full.header.h-10.flex
.h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
v-for="field in headerConfig",
:key="field.title",
:style="headerStyle(field)"
) {{ field.title }}
.h-full.w-8(v-if="scrollPresence")
.body.w-full
row(
v-for="medcard in medcardsInfo",
:key="medcard.id"
:header-style="headerStyle",
:medcard-info="medcard",
)
</template>
<script>
@@ -36,8 +36,6 @@ export default {
computed: {
scrollPresence() {
return this.medcardsInfo.length > 9;
// const wrapper = document.getElementById("listWrapper");
// return wrapper?.scrollHeight > wrapper?.clientHeight;
},
},
methods: {
@@ -59,13 +57,21 @@ export default {
</script>
<style lang="sass" scoped>
.scroll-wrapper
flex-grow: 1
overflow-y: hidden
.list-wrapper
overflow: hidden
height: 100%
display: flex
flex-direction: column
min-width: min-content
.header
background-color: var(--gray-thirdly)
border-bottom: 1px solid var(--gray-secondary)
.grey-color
color: var(--font-grey-color)
.body
height: calc(100vh - 56px - 24px - 360px - 72px - 40px)
overflow-y: auto
&::-webkit-scrollbar-track
margin: 24px 0 24px 0

3
src/pages/medcards/components/MedicalCardSearchRow.vue
View File

@@ -2,7 +2,7 @@
.w-full.row-wrapper.h-14.flex
.field.gap-x-3(
:style="headerStyle(headerConfig[0])"
)
)
q-avatar(size="36px")
img(:src="medcardInfo.avatar")
span.font-semibold.text-dark {{patientName}}
@@ -39,7 +39,6 @@ export default {
name: "MedicalCardSearchRow",
components: { TheNotificationProvider },
props: {
scrollPresence: Boolean,
headerStyle: Function,
medcardInfo: Object,
},

37
src/pages/newCalendar/components/HeaderRecordForm.vue
View File

@@ -35,15 +35,10 @@
.flex.gap-x-3.items-center
.text.font-semibold Время:
.flex.gap-x-1
.input.flex.items-center.pl-4.rounded-md
.dark-blue.font-medium 13:00 - 14:00
q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
q-icon.icon(name="app:time", size="20px")
base-modal(v-model="isShowTime", title="Время", modal-padding)
base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
base-input.input.no-border(size="XS", mask="##:## - ##:##")
.flex.h-14.gap-x-3.items-center.text-smm
.text.font-semibold Медкарта:
.flex.gap-x-1
.flex.gap-x-1
.name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
.photo.flex.h-10.w-10.items-center.justify-center
img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
@@ -71,10 +66,17 @@ import MedcardsModal from "./MedcardsModal.vue";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import * as moment from "moment/moment";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "HeaderRecordForm",
components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
components: {
BaseInput,
BaseCalendar,
BaseModal,
BaseTimeModal,
MedcardsModal,
},
props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
data() {
return {
@@ -83,7 +85,7 @@ export default {
isShowTime: false,
isShowMedcards: false,
patients: patientList.find(({ id }) => id === 2).data,
times: { from: "8:30", to: "10:30" },
times: { from: "08:30", to: "10:30" },
data: [
{
start: "8:00",
@@ -109,6 +111,18 @@ export default {
this.isShowMedcards = false;
this.patient = medcard;
},
// validateTimeString(value = "") {
// const [start = "", end = ""] = value.split(" - ");
// this.validateTime(start);
// this.times = {
// to: this.validateTime(end),
// from: this.validateTime(start),
// };
// },
// validateTime(value = "") {
// const [h, m = "00"] = value.split(":");
// return moment(`${h}:${m}`, "HH:mm").format("HH:mm");
// },
},
};
</script>
@@ -117,6 +131,11 @@ export default {
.input
width: 200px
border: 1px solid var(--gray-secondary)
& :deep(input)
min-width: 50px
--text-size: 14px
& :deep(.q-field__control)
padding-left: 1rem
.icon :deep(path)
fill: var(--font-grey-color)

50
src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
medical-form-wrapper(
title="Основные данные"
:is-check-change="isCheckChange"
:is-loading-data="isLoadingData"
:is-edit="isEdit"
:save="saveChange"
:cancel="cancelEdit"
:is-check-change="isCheckChange"
:is-loading-data="isLoadingData"
:is-edit="isEdit"
:save="saveChange"
:cancel="cancelEdit"
:open-edit="openEdit"
)
q-form.form-wrap.gap-24.w-full(ref="formBasicData")
@@ -16,8 +16,8 @@
.avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
base-avatar(:size="40")
img.avatar.object-cover(
v-if="basic[data.dataKey][field.key]?.photo"
:src="basic[data.dataKey][field.key].photo"
v-if="basic[data.dataKey][field.key]?.photo"
:src="basic[data.dataKey][field.key].photo"
alt="AV"
)
span(v-else) {{ avatar }}
@@ -25,7 +25,7 @@
base-modal(v-model="showModal" title="Загрузить изображение")
base-upload-photo(
v-model="basic[data.dataKey][field.key]"
:confirm-upload="confirmCahngeAvatar"
:confirm-upload="confirmCahngeAvatar"
)
.select(v-else-if="field.type === 'select'")
base-select(
@@ -49,11 +49,11 @@
)
base-input(
v-else,
:readonly="!isEdit"
:readonly="!isEdit"
v-model="basic[data.dataKey][field.key]"
@update:model-value="checkChangeInput"
:type="field.type"
:name="field.key"
:name="field.key"
:width="302",
size="M",
:rule="field.rules"
@@ -113,6 +113,8 @@ export default {
}),
...mapState({
basic: (state) => state.medical.basicData,
isNew: (state) => state.medical.medicalCard.type === "new",
medicalCard: (state) => state.medical.medicalCard,
}),
},
methods: {
@@ -195,15 +197,22 @@ export default {
const form = this.$refs.formBasicData;
form.validate().then((validate) => {
if (validate) {
this.isLoadingData = true;
let updateBasic = this.updateBasicData();
Promise.allSettled(updateBasic)
.then(() => this.$store.dispatch("getMedicalCardData"))
.then(() => {
this.isLoadingData = false;
this.isEdit = false;
this.isCheckChange = false;
});
let person = this.basic.personalData;
this.$store.dispatch("setMedicalCardData", {
...this.medicalCard,
person: {
...this.medicalCard.person,
...person,
},
});
//let updateBasic = this.updateBasicData();
// Promise.allSettled(updateBasic)
// .then(() => this.$store.dispatch("getMedicalCardData"))
// .then(() => {
// this.isLoadingData = false;
// this.isEdit = false;
// this.isCheckChange = false;
// });
} else {
getFieldsNameUnvalidated(form).forEach((errorKey) => {
addNotification(
@@ -221,6 +230,9 @@ export default {
this.isEdit = true;
},
},
mounted() {
this.isNew && this.openEdit();
},
};
</script>

2
src/router.js
View File

@@ -7,6 +7,7 @@ import TheLogin from "@/pages/login/TheLogin";
import LoggedInLayout from "@/components/LoggedInLayout";
import TheMedicalCard from "@/pages/newMedicalCard/TheMedicalCard";
import { fetchWrapper } from "@/shared/fetchWrapper";
import TheCreateMedicalCard from "@/pages/createMedicalCard/TheCreateMedicalCard.vue";
const ifNotAuthenticated = async (to, from, next) => {
const data = await fetchWrapper.get("users/me");
@@ -41,6 +42,7 @@ export default createRouter({
{ path: "medcards", component: TheMedcards },
{ path: "settings", component: TheSettings },
{ path: "medical-card", component: TheMedicalCard },
{ path: "create-medical-card", component: TheCreateMedicalCard },
],
},
],

44
src/store/modules/medicalCard.js
View File

@@ -255,26 +255,34 @@ const getters = {
};
},
getContactsData(state) {
let phones = state.medicalCard.person.contacts
.filter((el) => el.kind === "PHONE")
.map((el) => ({ ...el }));
let emails = state.medicalCard.person.contacts
.filter((el) => el.kind === "EMAIL")
.map((el) => ({ ...el }));
let networks = state.medicalCard.person.contacts
.filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
.map((el) => ({ ...el }));
let phones =
state.medicalCard?.person?.contacts
?.filter((el) => el.kind === "PHONE")
?.map((el) => ({ ...el })) || [];
let emails =
state.medicalCard?.person?.contacts
?.filter((el) => el.kind === "EMAIL")
?.map((el) => ({ ...el })) || [];
let networks =
state.medicalCard?.person?.contacts
?.filter((el) => el.kind !== "PHONE" && el.kind !== "EMAIL")
?.map((el) => ({ ...el })) || [];
return {
phones: [...phones],
emails: [...emails],
networks: [...networks],
phones,
emails,
networks,
};
},
getAllergiesData(state) {
return [...state.medicalCard.person.allergic.map((el) => ({ ...el }))];
return [
...(state.medicalCard?.person?.allergic?.map((el) => ({ ...el })) || []),
];
},
getConfidantData(state) {
return [...state.medicalCard.confidant.map((el) => getConfidantObject(el))];
return [
...(state.medicalCard?.confidant?.map((el) => getConfidantObject(el)) ||
[]),
];
},
getAvatar(state) {
let lastName = state?.medicalCard?.person?.last_name;
@@ -454,7 +462,7 @@ const actions = {
commit("setAllergiesData");
commit("setConfidantData");
commit("setHealthStateData");
commit("setEventsPersonData", res.person.id);
commit("setEventsPersonData", res?.person?.id);
});
},
getPersonsFiltredList() {
@@ -491,6 +499,12 @@ const actions = {
getProtocolData({ commit }, props) {
commit("setProtocolData", props);
},
setMedicalCardData({ commit }, props) {
commit("setMedicalCard", props);
},
setBasicData({ commit }, props) {
commit("setBasicData", props);
},
};
const mutations = {