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:
DwCay
2022-10-26 16:11:56 +03:00
parent a9ae13b943
commit a2715a712f
21 changed files with 515 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,14 @@
<template lang="pug">
.flex.justify-between.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
.flex.justify-between.box-border.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
.relative.flex.flex-col
.not-italic.text-base.select.cursor-pointer.w-full {{optionData}}
.absolute.options(v-show="isSelectOpen" :id="id")
.not-italic.text-base.option(v-for="(responsible, index) in listData" @click="(e) => chooseOption(e)" :key="index" :id="index") {{responsible}}
.select-form-separator.cursor-pointer(v-if="withSeparator" )
.text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
.not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
.absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
.not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible" :id="responsible") {{responsible}}
.not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
.absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
.not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :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}")
</template>
<script>
@@ -23,6 +26,7 @@ export default {
optionData: String,
listData: Array,
chooseOption: Function,
forNetworks: Boolean,
},
data() {
return {
@@ -33,9 +37,6 @@ export default {
openSelect() {
this.isSelectOpen = !this.isSelectOpen;
},
closeSelect() {
this.isSelectOpen = false;
},
},
};
</script>
@@ -46,7 +47,7 @@ export default {
width: fit-content
background-color: var(--bg-ligth-blue-color)
&.border
background-color: rgba(255, 255, 255, 0)
background-color: var(--default-white)
border: 2px solid var(--border-light-grey-color)
.select
appearance: none
@@ -60,9 +61,14 @@ export default {
.options
z-index: 3
width: max-content
background-color: var(--bg-ligth-blue-color)
background-color: var(--default-white)
border: 2px solid var(--border-light-grey-color)
border-top: none
border-radius: 0 0 4px 4px
left: -18px
.option
color: var(--font-black-color)
border-bottom: 1px solid var(--border-light-grey-color)
&:hover
background-color: var(--btn-blue-color)
.select-form-separator