166 lines
4.0 KiB
Vue
166 lines
4.0 KiB
Vue
<template lang="pug">
|
|
.header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
|
|
.flex.items-center.box-border.cursor-pointer.mr-auto
|
|
img.logo-img.mr-29_25px(
|
|
src="@/assets/images/logo.svg",
|
|
alt="Logo",
|
|
@click="redirectHomePage"
|
|
)
|
|
header-inputs
|
|
.flex.ml-auto
|
|
q-btn.mr-9(
|
|
color="primary",
|
|
outline,
|
|
dense,
|
|
padding="4px 22px",
|
|
@click="openForm"
|
|
)
|
|
q-icon(
|
|
name="app:icon-plus",
|
|
size="10px",
|
|
style="margin-right: 4px",
|
|
)
|
|
q-icon(
|
|
name="app:icon-person",
|
|
size="18px",
|
|
style="margin-left: 4px"
|
|
)
|
|
base-client-form-create(
|
|
v-model="isOpenFormInternal",
|
|
:set-updated-clients="setUpdatedClients",
|
|
:write-created-client-id="writeCreatedClientId",
|
|
)
|
|
q-btn.mr-8(
|
|
flat,
|
|
dense,
|
|
style="color: var(--font-dark-blue-color)",
|
|
padding="4px 8px",
|
|
icon="app:icon-bell",
|
|
size="18px",
|
|
round,
|
|
)
|
|
.flex.justify-centflexer.items-center.relative
|
|
base-avatar.mr-2(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}
|
|
base-avatar.mr-2(:size="32", v-else)
|
|
img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
|
|
q-btn(
|
|
@click="openPopup"
|
|
flat
|
|
icon="app:icon-down-arrow",
|
|
style="color: var(--font-dark-blue-color)",
|
|
size="10px",
|
|
padding="4px 2px 2px 2px"
|
|
dense,
|
|
)
|
|
q-menu(style="margin-top: 19px !important")
|
|
.menu.p-4
|
|
.text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти
|
|
</template>
|
|
|
|
<script>
|
|
import img from "@/assets/images/avatar.svg";
|
|
import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
|
|
import HeaderInputs from "./HeaderInputs.vue";
|
|
import BaseAvatar from "@/components/base/BaseAvatar";
|
|
import BasePopup from "@/components/base/BasePopup.vue";
|
|
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
|
|
export default {
|
|
name: "TheHeader",
|
|
components: {
|
|
HeaderInputs,
|
|
BaseAvatar,
|
|
BasePopup,
|
|
BaseClientFormCreate,
|
|
},
|
|
props: {
|
|
url: String,
|
|
closeForm: Function,
|
|
openForm: Function,
|
|
isOpenForm: Boolean,
|
|
setUpdatedClients: Function,
|
|
writeCreatedClientId: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
avatarSrc: img,
|
|
chargePersonInfo: {
|
|
avatarSrc: chargePersonAvatar,
|
|
name: "Гордеев Николай Степанович",
|
|
},
|
|
showPopup: false,
|
|
userData: JSON.parse(localStorage.getItem("userData")),
|
|
};
|
|
},
|
|
computed: {
|
|
changeName() {
|
|
return `${this.userData?.last_name || ""} ${
|
|
this.userData?.first_name || ""
|
|
} ${this.userData?.patronymic || ""}`;
|
|
},
|
|
isOpenFormInternal: {
|
|
get() {
|
|
return this.isOpenForm;
|
|
},
|
|
set(val) {
|
|
if (!val) this.closeForm();
|
|
else this.openForm();
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
redirectHomePage() {
|
|
this.$router.push("/calendar");
|
|
},
|
|
logout() {
|
|
localStorage.removeItem("tokenAccess");
|
|
this.$router.go("/login");
|
|
},
|
|
openPopup() {
|
|
this.showPopup = !this.showPopup;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.header-buttons
|
|
outline: none
|
|
border: none
|
|
background-color: transparent
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.header-wrapper
|
|
width: 100%
|
|
height: 56px
|
|
background-color: var(--default-white)
|
|
position: relative
|
|
z-index: 11
|
|
|
|
.logo-img
|
|
height: 32px
|
|
width: 70px
|
|
|
|
.icon-down-arrow
|
|
width: 24px
|
|
height: 24px
|
|
|
|
.icon-bell
|
|
width: 24px
|
|
height: 24px
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.charge-person-container
|
|
position: absolute
|
|
|
|
.text-popup
|
|
color: var(--btn-blue-color)
|
|
&:hover
|
|
opacity: 0.8
|
|
|
|
.menu
|
|
width: 160px
|
|
max-width: 160px !important
|
|
border-radius: 4px
|
|
background-color: var(--default-white)
|
|
</style>
|