github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: migrate checkbox cell 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 2 years ago
parent
489b7377fa
commit
471253cabc
3 changed files with 165 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      packages/nc-gui-v2/components/editable-cell/Boolean.vue
  2. 221
      packages/nc-gui-v2/components/smartsheet/EditableCell.vue
  3. 3
      packages/nc-gui-v2/components/smartsheet/Grid.vue

42
packages/nc-gui-v2/components/editable-cell/Boolean.vue
Unescape View File

@ -1,5 +1,38 @@
<script> <script setup lang="ts">
export default {
import { ColumnType } from "nocodb-sdk";
import { computed } from "vue";
const column = inject<ColumnType & { meta?: any }>("column");
const isForm =inject<boolean>('isForm')
const { modelValue:value } = defineProps<{ modelValue: any }>()
const emit = defineEmits(["update:modelValue"]);
const checkboxMeta = computed(() => {
return {
icon: {
checked: "mdi-check-circle-outline",
unchecked: "mdi-checkbox-blank-circle-outline"
},
color: "primary",
// ...(column?.meta || {})
};
});
const localState = $computed({
get() {
return value;
}, set(val) {
emit("update:modelValue", val);
}
});
const toggle = () => {
localState = !localState
}
/*export default {
name: 'BooleanCell', name: 'BooleanCell',
props: { props: {
column: Object, column: Object,
@ -42,11 +75,12 @@ export default {
this.localState = !this.localState this.localState = !this.localState
}, },
}, },
} }*/
</script> </script>
<template> <template>
<div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }"> <div
class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
<v-icon small :color="checkboxMeta.color" @click="toggle"> <v-icon small :color="checkboxMeta.color" @click="toggle">
{{ localState ? checkedIcon : uncheckedIcon }} {{ localState ? checkedIcon : uncheckedIcon }}
</v-icon> </v-icon>

221
packages/nc-gui-v2/components/smartsheet/EditableCell.vue
Unescape View File

@ -55,122 +55,149 @@ const {
v-on="$listeners" v-on="$listeners"
/> --> /> -->
<RatingCell <!-- <RatingCell -->
v-else-if="isRating" <!-- v-if="isRating" -->
v-model="localState" <!-- /> -->
:active="active" <!-- v-model="localState"
:is-form="isForm" :active="active"
:column="column" :is-form="isForm"
:is-public-grid="isPublic && !isForm" :column="column"
:is-public-form="isPublic && isForm" :is-public-grid="isPublic && !isForm"
:is-locked="isLocked" :is-public-form="isPublic && isForm"
v-on="$listeners" :is-locked="isLocked"
/> v-on="$listeners"
/> -->
<DurationCell
v-else-if="isDuration"
v-model="localState"
:active="active"
:is-form="isForm"
:column="column"
:is-locked="isLocked"
v-on="parentListeners"
/>
<BooleanCell
v-else-if="isBoolean"
v-model="localState"
:column="column"
:is-form="isForm"
v-on="parentListeners"
/>
<IntegerCell <!-- <DurationCell -->
v-else-if="isInt" <!-- v-else-if="isDuration" -->
v-model="localState" <!-- /> -->
v-on="parentListeners" <!-- &lt;!&ndash; v-model="localState" -->
/> <!-- :active="active" -->
<!-- :is-form="isForm" -->
<!-- :column="column" -->
<!-- :is-locked="isLocked" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<FloatCell
v-else-if="isFloat"
v-model="localState"
v-on="parentListeners"
/>
<DatePickerCell
v-else-if="isDate"
v-model="localState"
v-on="parentListeners"
/>
<TimePickerCell <!-- <IntegerCell -->
v-else-if="isTime" <!-- v-else-if="isInt" -->
v-model="localState" <!-- /> -->
v-on="parentListeners" <!-- &lt;!&ndash; v-model="localState" -->
@save="$emit('save')" <!-- v-on="parentListeners" -->
/> <!-- />&ndash;&gt; -->
<DateTimePickerCell <!-- <FloatCell -->
v-else-if="isDateTime" <!-- v-else-if="isFloat" -->
v-model="localState" <!-- /> -->
ignore-focus <!-- &lt;!&ndash; v-model="localState" -->
v-on="parentListeners" <!-- v-on="parentListeners" -->
/> <!-- />&ndash;&gt; -->
<EnumCell <!-- <DatePickerCell -->
v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" <!-- v-else-if="isDate" -->
v-model="localState" <!-- /> -->
:column="column" <!-- &lt;!&ndash; v-model="localState" -->
v-on="parentListeners" <!-- v-on="parentListeners" -->
/> <!-- />&ndash;&gt; -->
<EnumListCell
v-else-if="isEnum"
v-model="localState"
:is-form="isForm"
:column="column"
v-on="parentListeners"
/>
<JsonEditableCell <!-- <TimePickerCell -->
v-else-if="isJSON" <!-- v-else-if="isTime" -->
v-model="localState" <!-- /> -->
:is-form="isForm" <!-- &lt;!&ndash; v-model="localState" -->
v-on="parentListeners" <!-- v-on="parentListeners" -->
@input="$emit('save')" <!-- @save="$emit('save')" -->
/> <!-- />&ndash;&gt; -->
<SetListEditableCell <!-- <DateTimePickerCell -->
v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" <!-- v-else-if="isDateTime" -->
v-model="localState" <!-- /> -->
:column="column" <!-- &lt;!&ndash; v-model="localState" -->
v-on="parentListeners" <!-- ignore-focus -->
/> <!-- v-on="parentListeners" -->
<SetListCell <!-- />&ndash;&gt; -->
v-else-if="isSet"
v-model="localState"
:column="column"
v-on="parentListeners"
/>
<EditableUrlCell v-else-if="isURL" v-model="localState" v-on="parentListeners" /> <!-- <EnumCell -->
<!-- v-else-if="isEnum && ((!isForm && !active) || isLocked || (isPublic && !isForm))" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <EnumListCell -->
<!-- v-else-if="isEnum" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState"&ndash;&gt; -->
<!-- &lt;!&ndash; :is-form="isForm"&ndash;&gt; -->
<!-- &lt;!&ndash; :column="column"&ndash;&gt; -->
<!-- &lt;!&ndash; v-on="parentListeners"&ndash;&gt; -->
<!-- &lt;!&ndash; />&ndash;&gt; -->
<!-- <JsonEditableCell -->
<!-- v-else-if="isJSON" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :is-form="isForm" -->
<!-- v-on="parentListeners" -->
<!-- @input="$emit('save')" -->
<!-- />&ndash;&gt; -->
<!-- <SetListEditableCell -->
<!-- v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm)" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <SetListCell -->
<!-- v-else-if="isSet" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<!-- <EditableUrlCell v-else-if="isURL" -->
<!-- /> -->
<!-- &lt;!&ndash; v-model="localState" v-on="parentListeners" &ndash;&gt; -->
<!-- &lt;!&ndash; />&ndash;&gt; -->
<EditableCellText v-if="isString" v-model="localState" />
<!-- v-on="parentListeners"
/>
-->
<EditableCellTextArea v-else-if="isTextArea" v-model="localState" />
<!-- v-model="localState"
:is-form="isForm"
v-on="parentListeners"
/> -->
<TextCell v-else-if="isString" v-model="localState" v-on="parentListeners" />
<TextAreaCell <EditableCellBoolean
v-else-if="isTextArea" v-else-if="isBoolean"
v-model="localState" v-model="localState"
:is-form="isForm"
v-on="parentListeners"
/> />
<!-- &lt;!&ndash; v-model="localState" -->
<!-- :column="column" -->
<!-- :is-form="isForm" -->
<!-- v-on="parentListeners" -->
<!-- />&ndash;&gt; -->
<TextCell v-else v-model="localState" v-on="$listeners" />
<span v-if="hint" class="nc-hint">{{ hint }}</span>
<div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> <EditableCellText v-else v-model="localState" />
<!-- v-on="$listeners" <span v-if="hint" class="nc-hint">{{ hint }}</span> -->
<!-- <div v-if="(isLocked || (isPublic && !isForm)) && !isAttachment" class="nc-locked-overlay" /> -->
</div> </div>
</template> </template>
<style scoped> <style scoped>
textarea {
outline: none;
}
div { div {
width: 100%; width: 100%;
height: 100%; height: 100%;

3
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -13,6 +13,9 @@ const isPublicView = false;
const selected = reactive<{ row?: number | null; col?: number | null }>({}); const selected = reactive<{ row?: number | null; col?: number | null }>({});
const editEnabled = ref(false); const editEnabled = ref(false);
provide('isForm', false)
provide('isGrid', true)
const { loadData, paginationData, formattedData: data } = useViewData(meta); const { loadData, paginationData, formattedData: data } = useViewData(meta);
onMounted(() => loadData({})); onMounted(() => loadData({}));

Write Preview
Loading…
Cancel
Save