Browse Source

feat: migrate checkbox cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 3 years ago
parent
commit
471253cabc
  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

@ -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

@ -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

@ -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({}));

Loading…
Cancel
Save