mirror of https://github.com/nocodb/nocodb
Pranav C
3 years ago
7 changed files with 600 additions and 163 deletions
@ -0,0 +1,31 @@ |
|||||||
|
<template> |
||||||
|
<div |
||||||
|
ref="editable" |
||||||
|
contenteditable |
||||||
|
v-on="listeners" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
listeners() { |
||||||
|
return { ...this.$listeners, input: this.onInput } |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$refs.editable.innerText = this.value |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onInput(e) { |
||||||
|
this.$emit('input', e.target.innerText) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,359 @@ |
|||||||
|
<template> |
||||||
|
<v-container fluid class="h-100 backgroundColor"> |
||||||
|
<v-row class="h-100"> |
||||||
|
<v-col cols="3"> |
||||||
|
<v-card class="h-100 pa-2 backgroundColor elevation-0"> |
||||||
|
<div class="d-flex grey--text"> |
||||||
|
<span class="">Fields</span> |
||||||
|
<v-spacer /> |
||||||
|
<span class="caption mr-2 font-weight-bold" style="border-bottom: 2px solid grey">add all</span> |
||||||
|
<span class="caption font-weight-bold" style="border-bottom: 2px solid grey">remove all</span> |
||||||
|
</div> |
||||||
|
<draggable |
||||||
|
v-model="hiddenColumns" |
||||||
|
draggable=".item" |
||||||
|
group="form-inputs" |
||||||
|
@start="drag=true" |
||||||
|
@end="drag=false" |
||||||
|
> |
||||||
|
<v-card |
||||||
|
v-for="(col) in hiddenColumns" |
||||||
|
:key="col.alias" |
||||||
|
class="pa-2 my-2 item pointer elevation-0" |
||||||
|
@mousedown="moved=false" |
||||||
|
@mousemove="moved=false" |
||||||
|
@mouseup="handleMouseUp(col)" |
||||||
|
> |
||||||
|
<div class="d-flex"> |
||||||
|
<label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1"> |
||||||
|
<virtual-header-cell |
||||||
|
v-if="col.virtual" |
||||||
|
:column="col" |
||||||
|
:nodes="nodes" |
||||||
|
:is-form="true" |
||||||
|
:meta="meta" |
||||||
|
/> |
||||||
|
<header-cell |
||||||
|
v-else |
||||||
|
:is-form="true" |
||||||
|
:value="col._cn" |
||||||
|
:column="col" |
||||||
|
:sql-ui="sqlUi" |
||||||
|
/> |
||||||
|
|
||||||
|
</label> |
||||||
|
<v-icon color="grey"> |
||||||
|
mdi-drag |
||||||
|
</v-icon> |
||||||
|
</div> |
||||||
|
</v-card> |
||||||
|
<div class="nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1"> |
||||||
|
Drag and drop field here to hide |
||||||
|
</div> |
||||||
|
</draggable> |
||||||
|
<div class="grey--text caption text-center mt-4"> |
||||||
|
<v-icon samll color="grey"> |
||||||
|
mdi-plus |
||||||
|
</v-icon> |
||||||
|
Add new field to this table |
||||||
|
</div> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
<v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9"> |
||||||
|
<!-- <div class="my-14 d-flex align-center justify-center">--> |
||||||
|
<!-- <v-chip>Add cover image</v-chip>--> |
||||||
|
<!-- </div>--> |
||||||
|
<div class="my-10 d-flex align-center justify-center flex-column"> |
||||||
|
<editable |
||||||
|
v-model="localParams.name" |
||||||
|
class="title nc-meta-inputs text-center" |
||||||
|
/> |
||||||
|
|
||||||
|
<editable |
||||||
|
v-model="localParams.description" |
||||||
|
class="caption nc-meta-inputs text-center" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="max-width:600px" class="mx-auto"> |
||||||
|
<draggable |
||||||
|
v-model="columns" |
||||||
|
draggable=".item" |
||||||
|
group="form-inputs" |
||||||
|
class="h-100" |
||||||
|
@start="drag=true" |
||||||
|
@end="drag=false" |
||||||
|
> |
||||||
|
<div |
||||||
|
v-for="(col,i) in columns" |
||||||
|
:key="col.alias" |
||||||
|
class="nc-field-wrapper item pa-2" |
||||||
|
> |
||||||
|
<v-overlay |
||||||
|
:value="true" |
||||||
|
absolute |
||||||
|
:color="$store.state.windows.darkTheme ? 'black': 'white'" |
||||||
|
opacity="0.1" |
||||||
|
/> |
||||||
|
<v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)"> |
||||||
|
mdi-eye-off-outline |
||||||
|
</v-icon> |
||||||
|
<!-- <v-card--> |
||||||
|
<!-- outlined--> |
||||||
|
<!-- class="pa-2 my-2 "--> |
||||||
|
<!-- >--> |
||||||
|
<div |
||||||
|
v-if="!col.lk" |
||||||
|
:key="i" |
||||||
|
:class="{ |
||||||
|
'active-row' : active === col._cn |
||||||
|
}" |
||||||
|
class="row-col my-4" |
||||||
|
> |
||||||
|
<div> |
||||||
|
<label :for="`data-table-form-${col._cn}`" class="body-2 mt-n1 text-capitalize"> |
||||||
|
<virtual-header-cell |
||||||
|
v-if="col.virtual" |
||||||
|
:column="col" |
||||||
|
:nodes="nodes" |
||||||
|
:is-form="true" |
||||||
|
:meta="meta" |
||||||
|
/> |
||||||
|
<header-cell |
||||||
|
v-else |
||||||
|
:is-form="true" |
||||||
|
:value="col._cn" |
||||||
|
:column="col" |
||||||
|
:sql-ui="sqlUi" |
||||||
|
/> |
||||||
|
|
||||||
|
</label> |
||||||
|
<virtual-cell |
||||||
|
v-if="col.virtual" |
||||||
|
ref="virtual" |
||||||
|
:column="col" |
||||||
|
:row="localState" |
||||||
|
:nodes="nodes" |
||||||
|
:meta="meta" |
||||||
|
:api="api" |
||||||
|
:active="false" |
||||||
|
:sql-ui="sqlUi" |
||||||
|
:is-form="true" |
||||||
|
:dummy="true" |
||||||
|
/> |
||||||
|
<editable-cell |
||||||
|
v-else |
||||||
|
:id="`data-table-form-${col._cn}`" |
||||||
|
v-model="localState[col._cn]" |
||||||
|
:db-alias="dbAlias" |
||||||
|
:column="col" |
||||||
|
class="xc-input body-2" |
||||||
|
:meta="meta" |
||||||
|
:sql-ui="sqlUi" |
||||||
|
is-form |
||||||
|
:dummy="true" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- </v-card>--> |
||||||
|
</div> |
||||||
|
</draggable> |
||||||
|
<div class="my-10 text-center"> |
||||||
|
<v-btn color="primary"> |
||||||
|
Submit |
||||||
|
</v-btn> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
</v-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import draggable from 'vuedraggable' |
||||||
|
import VirtualHeaderCell from '../components/virtualHeaderCell' |
||||||
|
import HeaderCell from '../components/headerCell' |
||||||
|
import VirtualCell from '../components/virtualCell' |
||||||
|
import EditableCell from '../components/editableCell' |
||||||
|
import Editable from '../components/editable' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'FormView', |
||||||
|
components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable }, |
||||||
|
props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'], |
||||||
|
data: () => ({ |
||||||
|
localState: {}, |
||||||
|
moved: false |
||||||
|
// hiddenColumns: [] |
||||||
|
}), |
||||||
|
computed: { |
||||||
|
localParams: { |
||||||
|
get() { |
||||||
|
return this.formParams || {} |
||||||
|
}, |
||||||
|
set(params) { |
||||||
|
this.$emit('update:formParams', params) |
||||||
|
} |
||||||
|
}, |
||||||
|
hiddenColumns: { |
||||||
|
get() { |
||||||
|
return this.allColumns.filter(c => !this.showFields[c.alias]) |
||||||
|
} |
||||||
|
}, |
||||||
|
columns: { |
||||||
|
get() { |
||||||
|
return this.allColumns.filter(c => this.showFields[c.alias]) |
||||||
|
}, |
||||||
|
set(val) { |
||||||
|
const showFields = val.reduce((o, v) => { |
||||||
|
o[v.alias] = true |
||||||
|
return o |
||||||
|
}, {}) |
||||||
|
console.log(showFields, this.showFields) |
||||||
|
const fieldsOrder = val.map(v => v.alias) |
||||||
|
// debugger |
||||||
|
this.$emit('update:showFields', showFields) |
||||||
|
this.$emit('update:fieldsOrder', fieldsOrder) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// visibleColumns: { |
||||||
|
// handler(val) { |
||||||
|
// |
||||||
|
// }, |
||||||
|
// deep: true |
||||||
|
// } |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.localParams) |
||||||
|
// this.columns = [...this.availableColumns] |
||||||
|
// this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn)) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleMouseUp(col) { |
||||||
|
if (!this.moved) { |
||||||
|
this.columns = [...this.columns, col] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
.nc-field-wrapper { |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
.nc-field-remove-icon { |
||||||
|
opacity: 0; |
||||||
|
position: absolute; |
||||||
|
right: 10px; |
||||||
|
top: 10px; |
||||||
|
transition: 200ms opacity; |
||||||
|
z-index: 9 |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: var(--v-backgroundColorDefault-base); |
||||||
|
|
||||||
|
.nc-field-remove-icon { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.row-col > label { |
||||||
|
color: grey; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.row-col:focus > label, .active-row > label { |
||||||
|
color: var(--v-primary-base); |
||||||
|
} |
||||||
|
|
||||||
|
.title.text-center { |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep { |
||||||
|
|
||||||
|
.v-breadcrumbs__item:nth-child(odd) { |
||||||
|
font-size: .72rem; |
||||||
|
color: grey; |
||||||
|
} |
||||||
|
|
||||||
|
.v-breadcrumbs li:nth-child(even) { |
||||||
|
padding: 0 6px; |
||||||
|
font-size: .72rem; |
||||||
|
color: var(--v-textColor-base); |
||||||
|
} |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
.comment-icon { |
||||||
|
position: absolute; |
||||||
|
right: 60px; |
||||||
|
bottom: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
div > input, |
||||||
|
div > .xc-input > input, |
||||||
|
div > .xc-input > div > input, |
||||||
|
div > select, |
||||||
|
div > .xc-input > select, |
||||||
|
div textarea:not(.inputarea) { |
||||||
|
border: 1px solid #7f828b33; |
||||||
|
padding: 1px 5px; |
||||||
|
font-size: .8rem; |
||||||
|
border-radius: 4px; |
||||||
|
min-height: 44px; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
border: 1px solid var(--v-primary-base); |
||||||
|
} |
||||||
|
|
||||||
|
&:hover:not(:focus) { |
||||||
|
box-shadow: 0 0 2px dimgrey; |
||||||
|
} |
||||||
|
|
||||||
|
background: var(--v-backgroundColorDefault-base); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.required > div > label + * { |
||||||
|
border: 1px solid red; |
||||||
|
border-radius: 4px; |
||||||
|
background: var(--v-backgroundColorDefault-base); |
||||||
|
} |
||||||
|
|
||||||
|
.nc-meta-inputs { |
||||||
|
width: 400px; |
||||||
|
min-height: 40px; |
||||||
|
border-radius: 4px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: var(--v-backgroundColor-base); |
||||||
|
} |
||||||
|
|
||||||
|
&:active, &:focus { |
||||||
|
border: 1px solid #7f828b33; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nc-drag-n-drop-to-hide { |
||||||
|
border: 2px dotted #a1a1a1; |
||||||
|
border-radius: 4px; |
||||||
|
font-size: .6rem; |
||||||
|
color: grey |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue