feat: M2M corrections

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
2021-07-09 19:27:31 +05:30
parent c63c3edee2
commit be2bc9093d
55 changed files with 437 additions and 1210 deletions

View File

@@ -1,70 +0,0 @@
<template>
<div class="d-flex align-center " :class="{'justify-center':!isForm}">
<input v-on="parentListeners" type="checkbox" v-model="localState">
</div>
</template>
<script>
export default {
name: "boolean-cell",
props: {
value: [String,Number, Boolean],
isForm: Boolean
},
mounted() {
this.$el.focus();
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', val);
// this.$emit('update');
}
},
parentListeners() {
const $listeners = {};
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur;
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,76 +0,0 @@
<template>
<v-menu>
<template v-slot:activator="{on}">
<div class="value" v-on="on">{{ localState }}</div>
</template>
<v-date-picker v-on="parentListeners" v-model="localState"></v-date-picker>
</v-menu>
</template>
<script>
export default {
name: "date-picker-cell", props: {
value: [String, Date]
},
mounted() {
if (this.$el && this.$el.$el) {
this.$el.$el.focus();
}
},
computed: {
localState: {
get() {
return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ') : this.value;
},
set(val) {
this.$emit('input', new Date(val).toJSON().slice(0, 10));
}
},
parentListeners() {
const $listeners = {};
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur;
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
.value {
width: 100%;
height: 100%;
min-height:20px;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,92 +0,0 @@
<template>
<v-datetime-picker
v-on="parentListeners"
class="caption xc-date-time-picker"
ref="picker"
:text-field-props="{
class:'caption mt-n1 pt-0'
}"
:time-picker-props="{
format:'24hr'
}"
v-model="localState"
></v-datetime-picker>
</template>
<script>
export default {
name: "date-time-picker-cell",
props: ['value', 'ignoreFocus'],
mounted() {
if (!this.ignoreFocus) {
this.$refs.picker.display = true;
}
},
computed: {
localState: {
get() {
if(/^\d{6,}$/.test(this.value)){
return new Date(+this.value);
}
return /\dT\d/.test(this.value) ? new Date(this.value.replace(/(\d)T(?=\d)/, '$1 ')) : this.value;
},
set(val) {
// if(/^\d{6,}$/.test(this.value)){
// return this.$emit('input', new Date(this.value).getTime());
// }
const uVal = new Date(val).toISOString().slice(0, 19).replace('T', ' ').replace(/(\d{1,2}:\d{1,2}):\d{1,2}$/,'$1');
console.log(val, uVal)
this.$emit('input', uVal);
}
},
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
/deep/ .v-input, /deep/ .v-text-field {
margin-top: 0 !important;
padding-top: 0 !important;
font-size: inherit !important;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,89 +0,0 @@
<template>
<select v-on="parentListeners" v-model="localState">
<option v-for="eVal of enumValues" :key="eVal" :value="eVal">{{ eVal }}</option>
</select>
</template>
<script>
export default {
name: "enum-list-cell",
props: {
value: String,
column: Object
},
mounted() {
this.$el.focus();
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.$el.dispatchEvent(event);
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', val);
this.$emit('update');
}
},
enumValues() {
if (this.column && this.column.dtxp) {
return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
}
return [];
},
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
select {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
-webkit-appearance: menulist;
/*webkit browsers */
-moz-appearance: menulist;
/*Firefox */
appearance: menulist;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,101 +0,0 @@
<template>
<div class="d-flex align-center">
<div>
<div class="item" v-for="(val,i) of enumValues" :key="val">
<input type="radio" :id="`key-radio-${val}`" class="orange--text" v-model="localState" :value="val">
<label class="py-1 px-3 d-inline-block my-1 label" :for="`key-radio-${val}`"
:style="{
background:colors[i % colors.length ]
}"
>{{ val }}</label>
</div>
</div>
</div>
</template>
<script>
import {enumColor as colors} from "@/components/project/spreadsheet/helpers/colors";
export default {
name: "enum-radio-editable-cell",
props: {
value: String,
column: Object
},
mounted() {
// this.$el.focus();
// let event;
// event = document.createEvent('MouseEvents');
// event.initMouseEvent('mousedown', true, true, window);
// this.$el.dispatchEvent(event);
},
computed: {
colors() {
return this.$store.state.windows.darkTheme ? colors.dark : colors.light;
},
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', val);
this.$emit('update');
}
},
enumValues() {
if (this.column && this.column.dtxp) {
return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
}
return [];
},
parentListeners() {
const $listeners = {};
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur;
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
.label {
border-radius: 25px;
}
.item {
white-space: nowrap;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,69 +0,0 @@
<template>
<input v-on="parentListeners" v-model="localState" type="number">
</template>
<script>
export default {
name: "floatCell",
props: {
value: [String,Number]
},
mounted() {
this.$el.focus();
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', val);
}
},
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
input {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,69 +0,0 @@
<template>
<input v-on="parentListeners" v-model="localState" type="number">
</template>
<script>
export default {
name: "integerCell",
props: {
value: [String, Number]
},
mounted() {
this.$el.focus();
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', parseInt(val, 10));
}
},
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
input {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,97 +0,0 @@
<template>
<div @keydown.stop.enter class="cell-container">
<div class="d-flex ma-1" v-if="!isForm">
<v-spacer>
</v-spacer>
<v-btn outlined x-small class="mr-1" @click="$emit('cancel')">Cancel</v-btn>
<v-btn x-small color="primary" @click="save">Save</v-btn>
</div>
<monaco-json-object-editor v-model="localState"
style="width: 300px;min-height: 200px;min-width:100%"></monaco-json-object-editor>
</div>
</template>
<script>
import MonacoJsonEditor from "@/components/monaco/MonacoJsonEditor";
import MonacoJsonObjectEditor from "@/components/monaco/MonacoJsonObjectEditor";
export default {
name: "json-cell",
components: {MonacoJsonObjectEditor, MonacoJsonEditor},
props: {
value: String,
isForm:Boolean
},
data: () => ({
localState: ''
}),
created() {
this.localState = typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
},
mounted() {
}, watch: {
value(val) {
this.localState = typeof val === 'string' ? JSON.parse(val) : val;
},
localState(val){
if(this.isForm){
this.$emit('input', JSON.stringify(val))
}
}
},
methods: {
save() {
this.$emit('input', JSON.stringify(this.localState))
}
},
computed:{
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
.cell-container {
/*margin: 0 -5px;*/
/*position: relative;*/
width: 100%
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,100 +0,0 @@
<template>
<div class="d-flex align-center">
<div>
<div class="" v-for="(val,i) of setValues" :key="val">
<input type="checkbox" :id="`key-check-box-${val}`" class="orange--text" v-model="localState" :value="val">
<label class="py-1 px-3 d-inline-block my-1 label" :for="`key-check-box-${val}`"
:style="{
background:colors[i % colors.length ]
}"
>{{ val }}</label>
</div>
</div>
</div>
</template>
<script>
import colors from "@/components/project/spreadsheet/helpers/colors";
export default {
name: "set-list-checkbox-cell",
props: {
value: String,
column: Object
},
data() {
},
mounted() {
this.$el.focus();
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.$el.dispatchEvent(event);
},
computed: {
colors() {
return this.$store.state.windows.darkTheme ? colors.dark : colors.light;
},
localState: {
get() {
return this.value && this.value.split(',')
},
set(val) {
this.$emit('input', val.join(','));
this.$emit('update');
}
},
setValues() {
if (this.column && this.column.dtxp) {
return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
}
return [];
},
parentListeners() {
const $listeners = {};
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur;
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
.label {
border-radius: 25px;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,91 +0,0 @@
<template>
<div>
<select v-on="parentListeners" v-model="localState" multiple>
<option v-for="val of setValues" :key="val" :value="val">{{ val }}</option>
</select>
</div>
</template>
<script>
export default {
name: "set-list-cell",
props: {
value: String,
column: Object
},
mounted() {
this.$el.focus();
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.$el.dispatchEvent(event);
},
computed: {
localState: {
get() {
return this.value && this.value.split(',')
},
set(val) {
this.$emit('input', val.join(','));
this.$emit('update');
}
},
setValues() {
if (this.column && this.column.dtxp) {
return this.column.dtxp.split(',').map(v => v.replace(/^'|'$/g, ''))
}
return [];
},
parentListeners(){
const $listeners = {};
if(this.$listeners.blur){
$listeners.blur = this.$listeners.blur;
}
if(this.$listeners.focus){
$listeners.focus = this.$listeners.focus;
}
return $listeners;
},
}
}
</script>
<style scoped>
select {
width: 100%;
height: 100%;
color: var(--v-textColor-base);
-webkit-appearance: menulist;
/*webkit browsers */
-moz-appearance: menulist;
/*Firefox */
appearance: menulist;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->

View File

@@ -1,78 +0,0 @@
<template>
<v-menu>
<template v-slot:activator="{on}">
<div class="value" v-on="on">{{ localState }}</div>
</template>
<v-time-picker v-on="parentListeners" v-model="localState"></v-time-picker>
</v-menu>
</template>
<script>
export default {
name: "time-picker-cell",
props: {
value: [String, Date]
},
mounted() {
if (this.$el && this.$el.$el) {
this.$el.$el.focus();
}
},
computed: {
localState: {
get() {
return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ') : this.value;
},
set(val) {
this.$emit('input', (new Date(val).toJSON() || '').slice(0, 10));
}
},
parentListeners() {
const $listeners = {};
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur;
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus;
}
if (this.$listeners.cancel) {
$listeners.cancel = this.$listeners.cancel;
}
return $listeners;
},
}
}
</script>
<style scoped>
.value {
min-height: 20px;
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->