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

[WIP] Заменил селекты, попровил стили

Browse Source
This commit is contained in:
megavrilinvv
2023-01-20 17:46:26 +03:00
parent 739e94fc00
commit 611558597a
10 changed files with 58 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/HeaderInputs.vue
View File

@@ -13,7 +13,13 @@
.icon-wrapper.mr-2.flex.justify-center
.icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
.flex.items-center {{ filter }}
base-input.p-4(type="text", square, placeholder="Искать ...", borderless)
base-input.p-4(
type="text",
placeholder="Искать ...",
text-color="var(--btn-blue-color)",
borderless,
square
)
</template>
<script>

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

@@ -1,49 +1,35 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.font-semibold.opacity-40(
v-if="label",
:class="labelClass"
) {{ label }}
.base-select(
@click="invertOpen",
:class="{'open': open && !disable, 'border-none': borderNone}",
:style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
ref="select"
base-input-container(:label="label")
q-select(
v-model="value",
:options="items",
:disable="disable",
bg-color="var(--bg-disable-grey-color)"
outlined,
dense,
emit-value,
map-options,
)
.placeholder(
:class="{'value-color': value || placeholderOpacity, ...textClass}",
:style="{'color': !disable || '#9ca3af', 'opacity': 1}"
) {{ value || placeholder }}
.flex.items-center
.select-form-separator.cursor-pointer.mr-4(v-if="separator")
span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
base-menu(v-if="open")
.items-container(
@click="open = false",
v-click-outside="leaveSelect",
:class="textClass"
)
.item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
template(v-slot:selected)
span {{ textSelect }}
</template>
<script>
import BaseMenu from "@/components/base/BaseMenu";
import BaseInputContainer from "@/components/base/BaseInputContainer";
export default {
name: "VSelect",
components: { BaseMenu },
components: { BaseMenu, BaseInputContainer },
props: {
placeholder: String,
modelValue: String,
modelValue: [Object, String],
items: {
type: Array,
default: () => [],
},
borderNone: Boolean,
separator: Boolean,
placeholderOpacity: Boolean,
disable: Boolean,
textStyle: String,
labelStyle: String,
label: String,
},
emits: ["update:modelValue"],
@@ -61,91 +47,9 @@ export default {
this.$emit("update:modelValue", value);
},
},
textClass() {
return this.textStyle
? {
[this.textStyle]: true,
}
: {
"text-base": true,
};
},
labelClass() {
return this.labelStyle
? {
[this.labelStyle]: true,
}
: {
"text-sm": true,
};
},
},
methods: {
clickItem(id) {
this.value = id;
},
leaveSelect() {
this.open = false;
},
invertOpen() {
if (!this.disable) this.open = !this.open;
textSelect() {
return this.value.label ? this.value.label : this.placeholder;
},
},
};
</script>
<style scoped lang="sass">
.base-select
width: 100%
height: 40px
border: 1.5px solid #D3D4DC
border-radius: 4px
padding: 9px 16px
background-color: white
user-select: none
display: flex
justify-content: space-between
align-items: center
gap: 16px
cursor: pointer
&.open
border: 1.5px solid #4772F2
.items-container
box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
border-radius: 4px
background-color: white
margin-top: 4px
.placeholder
color: #090A15
opacity: 0.5
text-overflow: ellipsis
overflow: hidden
.item
padding: 8px 16px
border-bottom: 0.5px solid #D3D4DC
color: #090A15
cursor: pointer
&:hover
background-color: rgba(215, 217, 255, 0.25)
&:last-child
border-bottom: none
.open-icon
font-size: 10px
display: flex
&.open
transform: rotate(180deg)
.separator
background-color: var(--btn-blue-color-3)
height: 24px
width: 1px
border-radius: 1px
.border-none
border: none
.value-color
opacity: 1
.select-form-separator
background-color: var(--btn-blue-color-3)
height: 24px
width: 1px
border-radius: 1px
</style>

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

@@ -7,7 +7,7 @@
.flex.pt-2
.icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
.flex.flex-col.gap-y-8
base-custom-select(
base-select(
v-if="selectedEventData.id"
v-model="status",
:items="eventStatuses",
@@ -20,13 +20,13 @@
label="Статус приема",
outlined
)
base-custom-select(
base-select(
:items="ownersList",
v-model="employees.employee",
placeholder="Выберите сотрудника"
label="Сотрудник"
)
base-custom-select(
base-select(
:items="membersList",
v-model="members.person",
placeholder="Выберите клиента",
@@ -79,7 +79,6 @@ import { addNotification } from "@/components/Notifications/notificationContext"
import { fetchWrapper } from "@/shared/fetchWrapper.js";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import * as moment from "moment/moment";
import { statusesDictionary } from "../utils/statusesDictionary.js";
@@ -88,7 +87,6 @@ export default {
components: {
BaseSelect,
BaseInput,
BaseCustomSelect,
TheNotificationProvider,
},
emits: ["clear-selected-event-data", "close-change-form"],

6
src/pages/clients/components/FormCreateBasicInfo.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.wrapper-info.h-full
.grid.grid-cols-2.gap-x-4.gap-y-6
base-custom-select.input-info(
base-select(
:items="priorityList",
placeholder="Приоритет клиента",
v-model="basicInfo.priority",
@@ -46,14 +46,14 @@
import BaseInput from "@/components/base/BaseInput";
import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
import { column } from "@/pages/clients/utils/tableConfig";
import BaseCustomSelect from "@/components/base/BaseCustomSelect";
import BaseSelect from "@/components/base/BaseSelect";
export default {
name: "FormCreateBasicInfo",
components: {
BaseInput,
BaseAddingNetwork,
BaseCustomSelect,
BaseSelect,
},
props: {
choosePriority: Function,

4
src/pages/clients/components/cells/TableCellBodyBirthday.vue
View File

@@ -1,10 +1,10 @@
<template lang="pug">
.flex.box-border.px-4.items-center.w-full.text-sm(
.flex.box-border.px-2.items-center.w-full.text-sm(
:style="{ width : width + 'px'}"
)
span(v-if="!isOpenChange") {{ birthday }}
base-input(
:width="130"
:width="140"
type="date",
v-if="isOpenChange",
@click.stop,

4
src/pages/clients/components/cells/TableCellBodyNetworks.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.network-cell.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
.flex.gap-x-1
.text-xl.icon.relative(
v-for="network in getNetworks",
@@ -117,8 +117,6 @@ export default {
</script>
<style lang="sass" scoped>
.network-cell
column-gap: 2px
.icon
color: var(--btn-blue-color)
&:last-child

7
src/pages/clients/components/cells/TableCellBodyPriority.vue
View File

@@ -6,9 +6,10 @@
.flex.gap-x-2.text-sm(class="w-[164px]")
base-select(
v-if="isOpenChange",
@click.stop :items="getPriorityList",
@click.stop,
:items="getPriorityList",
v-model="value.priority",
textStyle="text-sm"
:placeholder="value.priority"
)
</template>
@@ -32,7 +33,7 @@ export default {
computed: {
getPriorityList() {
return this.prioritySettings.settings.map((el) => {
return { label: el.text, id: el.id };
return el.text;
});
},
},

16
src/pages/schedule/components/FormChangeShift.vue
View File

@@ -8,8 +8,16 @@
.icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
.flex.flex-col.gap-y-6
base-input(label="Дата", type="date", outlined)
base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
base-select(
v-model="currentEmployee",
label="Текущий сотрудник",
placeholder="Выберите сотрудника"
)
base-select(
v-model="currentEmployee",
label="Замена сотрудника",
placeholder="Выберите сотрудника"
)
.time-wrapper.flex.justify-center.gap-x-6
base-input(
type="time",
@@ -34,12 +42,12 @@
</template>
<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "FormChangeShift",
components: { BaseCustomSelect, BaseInput },
components: { BaseSelect, BaseInput },
props: { closeForm: Function, timesShift: Object },
data() {
return {

7
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -31,9 +31,8 @@
style="width: 200px"
)
.graph-template.flex.flex-col.items-center.gap-y-4
base-custom-select(
base-select(
:items="templateList",
center,
v-model="template.item",
placeholder="Шаблоны графиков"
)
@@ -65,14 +64,14 @@
</template>
<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ScheduleBar",
components: {
BaseInput,
BaseCustomSelect,
BaseSelect,
},
props: {
buttons: Array,

9
src/pages/schedule/components/ScheduleTableSelect.vue
View File

@@ -18,12 +18,11 @@
:style="{color: 'var(--btn-blue-color)'}"
)
// TODO: какая-то странная хуйня с v-model, передается пропса
base-custom-select(
base-select(
v-if="!selectEmployee.label",
:items="ownersList",
v-model="selectEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none', justifyContent: 'center'}"
placeholder="Добавить сотрудника"
)
.flex.justify-center(v-else) {{selectEmployee.label}}
.row.flex
@@ -39,11 +38,11 @@
</template>
<script>
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
name: "ScheduleTableSelect",
components: { BaseCustomSelect },
components: { BaseSelect },
props: {
selectEmployee: Object,
result: Array,