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

Добавил список сотрудников в сайдбаре

Browse Source
This commit is contained in:
megavrilinvv
2022-10-26 11:44:19 +03:00
parent 6233604d5c
commit 8f55985cb4
2 changed files with 36 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/calendar/TheCalendar.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.calendar-container.flex
calendar-sidebar(@width="changeWidth" :team="team")
calendar-sidebar(@width="changeWidth" :team-data="teamData")
calendar-schedule(
:current-date="currentDate"
:time-information="timeInformation"
@@ -16,7 +16,6 @@
import * as moment from "moment/moment";
import CalendarSchedule from "./components/CalendarSchedule.vue";
import CalendarSidebar from "./components/CalendarSidebar.vue";
import img from "../../assets/images/team-member.svg";
export default {
name: "TheCalendar",
components: { CalendarSchedule, CalendarSidebar },
@@ -30,36 +29,7 @@ export default {
dayEndTime: "20:00",
},
eventsData: [],
team: [
{
id: 1,
last_name: "Гагарин",
first_name: "Юрий",
patronymic: "Алексеевич",
avatar: img,
},
{
id: 2,
last_name: "Константинопольская",
first_name: "Юлия",
patronymic: "Витальевна",
avatar: img,
},
{
id: 3,
last_name: "Коломойцев",
first_name: "Игорь",
patronymic: "Константинович",
avatar: img,
},
{
id: 4,
last_name: "Зайцев",
first_name: "Валерий",
patronymic: "Сергеевич",
avatar: img,
},
],
teamData: [],
};
},
methods: {
@@ -75,10 +45,16 @@ export default {
saveEventsData(res) {
this.eventsData = res.results;
},
saveTeamData(res) {
this.teamData = res.results;
},
fetchEventsData() {
fetch("/registry/event/")
.then((res) => res.json())
.then((res) => this.saveEventsData(res));
fetch("http://45.84.227.122:8080/general/employee/")
.then((res) => res.json())
.then((res) => this.saveTeamData(res));
},
changeWidth(value) {
this.sidebarWidth = value;

42
src/pages/calendar/components/CalendarSidebar.vue
View File

@@ -4,7 +4,12 @@
.sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
base-button-plus(:size="40" v-if="!isOpen")
.create-event.flex.items-center.justify-center(v-else)
base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
text-styled="createEvent"
:icon-size="10"
text="Создать событие"
:with-icon="true"
icon-position="right")
.flex.flex-col.items-center(v-if="!isOpen")
base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
.flex.flex-col.gap-y-2.items-center.mt-4
@@ -16,22 +21,26 @@
base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
.flex.flex-col.gap-y-2
.relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
:placeholder="event.name"
:key="event.id")
.event-type(:style="{ background: event.color }")
span.icon-edit.cursor-pointer
.flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
.team-card(v-for="teammate in team" :key="teammate.id")
img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
.team-card(v-for="teammate in teamData" :key="teammate.id")
img.avatar-wrapper(:src="avatar" alt="Team member")
.flex.flex-col.gap-y-4(v-else)
.events-wrapper.flex.items-center.justify-between
.flex {{ "Команды" }}
base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
.box-team.flex.flex-col.gap-y-2
.team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
.team-card.flex.items-center.justify-between.cursor-pointer(
v-for="teammate in teamData"
:key="teammate.id")
.flex.items-center
img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
.flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
img.avatar-wrapper(:src="avatar" alt="Team member")
.flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
span.icon-change-place.cursor-pointer.w-5
base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
</template>
@@ -40,6 +49,8 @@
import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
import img from "../../../assets/images/team-member.svg";
export default {
name: "CalendarSidebar",
components: {
@@ -48,7 +59,7 @@ export default {
BaseCreateButton,
},
props: {
team: Array,
teamData: Array,
},
data() {
return {
@@ -63,6 +74,7 @@ export default {
isOpen: false,
turnButton: "180deg",
maxLengthLastName: 13,
avatar: img,
};
},
computed: {
@@ -96,13 +108,15 @@ export default {
);
this.turnButton = this.isOpen ? "0deg" : "180deg";
},
changeLastName(lastName) {
changeName(lastName, fitstName, patronymic) {
return lastName.length > this.maxLengthLastName
? lastName.substr(0, this.maxLengthLastName) + "... "
: lastName + " ";
},
changeInitials(firstName, patronymic) {
return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
? lastName.slice(0, this.maxLengthLastName) + "... "
: lastName +
" " +
fitstName.slice(0, 1) +
"." +
patronymic.slice(0, 1) +
".";
},
},
};