mirror of https://github.com/nocodb/nocodb
Pranav C
3 years ago
9 changed files with 214 additions and 313 deletions
@ -0,0 +1,121 @@ |
|||||||
|
<template> |
||||||
|
<v-card min-width="300px" max-width="400px" max-height="95vh" style="overflow: auto" |
||||||
|
class="elevation-0 card"> |
||||||
|
<v-form v-model="valid"> |
||||||
|
<v-container fluid @click.stop.prevent> |
||||||
|
<v-row> |
||||||
|
<v-col cols="12" class="d-flex pb-0"> |
||||||
|
|
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn x-small outlined @click="close">Cancel</v-btn> |
||||||
|
<v-btn x-small color="primary" @click="save" :disabled="!valid">Save</v-btn> |
||||||
|
</v-col> |
||||||
|
<v-col cols="12"> |
||||||
|
<v-text-field |
||||||
|
ref="column" |
||||||
|
hide-details="auto" |
||||||
|
color="primary" |
||||||
|
v-model="newColumn._cn" |
||||||
|
class="caption" |
||||||
|
label="Column name" |
||||||
|
:rules="[ |
||||||
|
v => !!v || 'Required', |
||||||
|
v => !meta || !meta.columns || !column ||meta.columns.every(c => v !== c.cn ) && meta.v.every(c => column && c._cn === column._cn || v !== c._cn ) || 'Duplicate column name' |
||||||
|
]" |
||||||
|
dense outlined></v-text-field> |
||||||
|
</v-col> |
||||||
|
|
||||||
|
|
||||||
|
</v-row> |
||||||
|
</v-container> |
||||||
|
</v-form> |
||||||
|
|
||||||
|
|
||||||
|
</v-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "editVirtualColumn", |
||||||
|
components: {}, |
||||||
|
props: { |
||||||
|
nodes: Object, |
||||||
|
meta: Object, |
||||||
|
value: Boolean, |
||||||
|
column: Object |
||||||
|
}, |
||||||
|
data: () => ({ |
||||||
|
valid: false, |
||||||
|
newColumn: {} |
||||||
|
}), |
||||||
|
async created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
close() { |
||||||
|
this.$emit('close'); |
||||||
|
this.newColumn = {}; |
||||||
|
}, |
||||||
|
async save() { |
||||||
|
try { |
||||||
|
|
||||||
|
} catch (e) { |
||||||
|
console.log(e) |
||||||
|
} |
||||||
|
|
||||||
|
this.$emit('close'); |
||||||
|
}, |
||||||
|
|
||||||
|
focusInput() { |
||||||
|
setTimeout(() => { |
||||||
|
if (this.$refs.column && this.$refs.column.$el) { |
||||||
|
this.$refs.column.$el.querySelector('input').focus() |
||||||
|
} |
||||||
|
}, 100); |
||||||
|
}, |
||||||
|
|
||||||
|
}, mounted() { |
||||||
|
this.newColumn = {...this.column} |
||||||
|
}, watch: { |
||||||
|
column(c) { |
||||||
|
this.newColumn = {...c} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
|
||||||
|
::v-deep { |
||||||
|
|
||||||
|
|
||||||
|
.v-input__slot { |
||||||
|
min-height: auto !important; |
||||||
|
} |
||||||
|
|
||||||
|
.v-input:not(.v-input--is-focused) fieldset { |
||||||
|
border-color: #7f828b33 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.ui-type input { |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.v-input--selection-controls__input > i { |
||||||
|
transform: scale(.83); |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
font-size: 0.75rem !important |
||||||
|
} |
||||||
|
|
||||||
|
.v-text-field--outlined.v-input--dense .v-label:not(.v-label--active) { |
||||||
|
top: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
border: solid 2px #7f828b33; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
Loading…
Reference in new issue