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

Merge pull request #84 from dderbentsov/UC-24

Browse Source 
Изменила baseInput
This commit is contained in:
Daria Golova
2022-10-31 17:39:16 +03:00
committed by GitHub
parent 99e1126863 e34d13614e
commit 319377f689
3 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/base/BaseSelect.vue
View File

@@ -1,38 +1,40 @@
<template lang="pug">
.flex.box-border.w-full.container.items-center.cursor-pointer(
.flex.box-border.container.items-center.cursor-pointer.relative(
@click="openSelect"
:class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
:style="{ minWidth : widthSelect + 'px'}"
)
.relative.flex.flex-col
.not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
.absolute.options(
.flex.mr-2
input.text-base.select.cursor-pointer(
:size="sizeInput"
v-if="!forNetworks"
v-model="optionData"
:placeholder="placeholder"
disabled
)
.absolute.options.top-12.left-0(
v-show="isSelectOpen"
:id="id"
class="left-[-18px]"
:style="{ minWidth : widthSelect + 'px'}"
)
.not-italic.option.pl-4.py-1(
.option.px-4.py-1(
v-for="responsible in listData"
@click="(e) => chooseOption(e)"
:key="responsible"
:id="responsible"
) {{responsible}}
.flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
.flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
.absolute.options.top-5(
v-show="isSelectOpen"
class="left-[-11px]"
:id="id"
:style="{ minWidth : widthSelect + 'px'}")
.flex.not-italic.option.justify-center.py-1.text-xl(
:id="id")
.flex.option.justify-center.py-1.text-xl(
v-for="responsible in listData"
@click="chooseOption"
:key="responsible.network"
:id="responsible.network"
:class="responsible.icon"
)
.select-form-separator.cursor-pointer(v-if="withSeparator")
.text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
.select-form-separator.cursor-pointer.mr-6px(v-if="separator")
.text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
</template>
<script>
@@ -43,14 +45,16 @@ export default {
styleBorder: {
default: false,
},
widthSelect: Number,
withSeparator: {
default: false,
},
separator: Boolean,
optionData: String,
listData: Array,
chooseOption: Function,
forNetworks: Boolean,
placeholder: {
type: String,
default: "",
},
sizeInput: Number,
},
data() {
return {
@@ -69,6 +73,7 @@ export default {
.container
border-radius: 4px
width: fit-content
color: var(--font-dark-blue-color)
background-color: var(--bg-ligth-blue-color)
&.border
background-color: var(--default-white)
@@ -77,25 +82,25 @@ export default {
appearance: none
border: none
outline: none
color: var(--font-black-color-1)
background-color: var(--font-black-color-0)
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
&.networks
color: var(--font-dark-blue-color)
&::placeholder
color: var(--font-black-color-1)
.options
z-index: 3
width: max-content
background-color: var(--default-white)
border: 2px solid var(--border-light-grey-color)
border-top: none
border-radius: 0 0 4px 4px
border-radius: 4px
box-shadow: var(--default-shadow)
width: 100%
.option
color: var(--font-black-color)
border-bottom: 1px solid var(--border-light-grey-color)
&:hover
background-color: var(--btn-blue-color)
color: var(--default-white)
.select-form-separator
background-color: var(--btn-blue-color-3)
height: 24px
@@ -103,8 +108,6 @@ export default {
border-radius: 1px
.icon
color: var(--font-dark-blue-color)
&:hover
color: var(--btn-blue-color)
&.open
transform: rotate(180deg)
</style>

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

@@ -33,7 +33,7 @@ export default {
calendarLayout: "",
currentDate: moment(),
timeInformation: {
dayStartTime: "0:00",
dayStartTime: "00:00",
dayEndTime: "20:00",
},
eventsData: [],

87
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -2,66 +2,61 @@
.flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
.flex.flex-col.gap-y-2
.flex.justify-between.pt-2
span.not-italic.text-xs.opacity-40.leading-3 Ответственный
span.text-xs.opacity-40.font-bold.leading-3 Ответственный
.icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
base-select.ba-sel(
width="205px"
base-select(
:size-input="responsibleInputSize"
:option-data="eventData.responsible"
:list-data="listResponsible"
:choose-option="chooseOptionResponsible"
placeholder="Выберите ответственного"
separator
)
.flex.flex-col.gap-y-2
span.not-italic.text-xs.opacity-40.leading-3 Основная информация
span.text-xs.opacity-40.font-bold.leading-3 Основная информация
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
.time-input.flex.gap-x-2.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="eventData.timeEvent.firstTime"
placeholder ="11:00"
)
span —
.form-item.flex.gap-x-2.px-4.py-2.items-center
input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
.time-input.flex.gap-x-2.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="eventData.timeEvent.secondTime"
placeholder ="12:30"
)
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-text.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
//- .flex.flex-col.gap-y-2(class='additional-information')
//- .flex.gap-x-4.items-center
//- span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
//- button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
//- base-button(
left-icon="icon-plus"
rounded secondary
:size="24"
:icon-left-size="10"
id="addInfo"
@click="(e)=>addFriendInfo(e)")
//- .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
//- span.ml-1 {{info}}
//- .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
//- input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
input.item-input.cursor-text.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
.flex.flex-col.gap-y-2
span.not-italic.text-xs.opacity-40.leading-3 Вид события
span.text-xs.opacity-40.font-bold.leading-3 Вид события
base-select(
width="118px"
:size-input="kindEventSize"
:option-data="eventData.kindEvent"
:list-data="kindEvents"
:choose-option="chooseOptionTypeEvent"
placeholder="Вид события"
separator
)
.flex.flex-col.gap-y-2
.flex.gap-x-4.items-center
span.not-italic.text-xs.opacity-40.leading-3 Контакты
span.text-xs.opacity-40.font-bold.leading-3 Контакты
base-button(
left-icon="icon-plus"
rounded secondary
:size="24"
:icon-left-size="10"
id="addContact"
@click="(e)=>addFriendInfo(e)")
@click="(e)=>addContact(e)")
.flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
.icon-mail.text-xl.icon
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-text.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
base-button.styled-button.not-italic.text-base.font-semibold(
input.item-input.cursor-text.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
base-button.styled-button.text-base.font-semibold(
:size="40"
@click="closeForm"
) Создать событие
@@ -81,18 +76,18 @@ export default {
},
data() {
return {
listFriendInfo: [1],
listContacts: [1],
responsibleInputSize: 22,
kindEventSize: 10,
kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
eventData: {
responsible: "Выберите ответственного",
responsible: "",
eventClient: "",
timeEvent: {
firstTime: "11:00",
secondTime: "12:30",
firstTime: "",
secondTime: "",
},
// friendInfo: {},
kindEvent: "Вид события",
kindEvent: "",
contacts: {},
},
};
@@ -100,16 +95,15 @@ export default {
methods: {
chooseOptionResponsible(e) {
this.eventData.responsible = e.target.id;
this.responsibleInputSize = this.eventData.responsible
.split(" ")
.join("").length;
},
chooseOptionTypeEvent(e) {
this.eventData.kindEvent = e.target.id;
this.kindEventSize = this.eventData.kindEvent.split(" ").join("").length;
},
addFriendInfo(e) {
if (e.currentTarget.id === "addInfo") {
this.listFriendInfo.push(
this.listFriendInfo[this.listFriendInfo.length - 1] + 1
);
}
addContact(e) {
if (e.currentTarget.id === "addContact") {
this.listContacts.push(
this.listContacts[this.listContacts.length - 1] + 1
@@ -121,8 +115,6 @@ export default {
</script>
<style lang="sass" scoped>
.ba-sel
color: red
.event-form
height: fit-content
min-width: 448px
@@ -133,7 +125,7 @@ export default {
.form-item
border-radius: 4px
width: fit-content
width: 344px
background-color: var(--bg-ligth-blue-color)
.item-input
@@ -148,6 +140,11 @@ export default {
&::placeholder
color: var(--font-black-color-1)
.time-input
width: 72px
border-radius: 4px
background-color: var(--bg-ligth-blue-color)
.icon
width: 24px
height: 24px