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

feat(gui-v2): filter layout 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2819/head
Pranav C 2 years ago
parent
ec448b5710
commit
ce8156fe68
4 changed files with 110 additions and 114 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. 67
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  2. 34
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  3. 54
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
  4. 5
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

67
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
Unescape View File

@ -7,7 +7,7 @@ import { comparisonOpList } from '~/utils/filterUtils'
import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context' import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
import useViewFilters from '~/composables/useViewFilters' import useViewFilters from '~/composables/useViewFilters'
import MdiDeleteIcon from '~icons/mdi/close-box' import MdiDeleteIcon from '~icons/mdi/close-box'
import MdiAddIcon from '~icons/mdi/plus'
const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>() const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
const meta = inject(MetaInj) const meta = inject(MetaInj)
@ -72,13 +72,13 @@ watch(
</script> </script>
<template> <template>
<div class="backgroundColor pa-2 menu-filter-dropdown bg-background" :style="{ width: nested ? '100%' : '630px' }"> <div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }">
<div v-if="filters && filters.length" class="grid" @click.stop> <div v-if="filters && filters.length" class="grid" @click.stop>
<template v-for="(filter, i) in filters" :key="filter.id || i"> <template v-for="(filter, i) in filters" :key="filter.id || i">
<template v-if="filter.status !== 'delete'"> <template v-if="filter.status !== 'delete'">
<div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding: 6px" class="elevation-4"> <div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding: 6px" class="elevation-4">
<div class="d-flex" style="gap: 6px; padding: 0 6px"> <div class="d-flex" style="gap: 6px; padding: 0 6px">
<v-icon <!-- <v-icon
v-if="!filter.readOnly" v-if="!filter.readOnly"
:key="`${i}_3`" :key="`${i}_3`"
small small
@ -86,10 +86,18 @@ watch(
@click.stop="deleteFilter(filter, i)" @click.stop="deleteFilter(filter, i)"
> >
mdi-close-box mdi-close-box
</v-icon> </v-icon> -->
<MdiDeleteIcon
v-if="!filter.readOnly"
small
class="nc-filter-item-remove-btn"
@click.stop="deleteFilter(filter, i)"
/>
<span v-else :key="`${i}_1`" /> <span v-else :key="`${i}_1`" />
<v-select
v-model="filter.logical_op" <a-select
v-model:value="filter.logical_op"
class="flex-shrink-1 flex-grow-0 elevation-0 caption" class="flex-shrink-1 flex-grow-0 elevation-0 caption"
:items="['and', 'or']" :items="['and', 'or']"
density="compact" density="compact"
@ -102,7 +110,7 @@ watch(
<!-- <template #item="{ item }"> --> <!-- <template #item="{ item }"> -->
<!-- <span class="caption font-weight-regular">{{ item }}</span> --> <!-- <span class="caption font-weight-regular">{{ item }}</span> -->
<!-- </template> --> <!-- </template> -->
</v-select> </a-select>
</div> </div>
<!-- <column-filter <!-- <column-filter
v-if="filter.id || shared" v-if="filter.id || shared"
@ -134,28 +142,24 @@ watch(
v-if="!filter.readOnly" v-if="!filter.readOnly"
class="nc-filter-item-remove-btn text-grey align-self-center" class="nc-filter-item-remove-btn text-grey align-self-center"
@click.stop="deleteFilter(filter, i)" @click.stop="deleteFilter(filter, i)"
></MdiDeleteIcon> />
<span v-else /> <span v-else />
<span v-if="!i" :key="`${i}_2`" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span> <span v-if="!i" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span>
<v-select <a-select
v-else v-else
:key="`${i}_4`" v-model:value="filter.logical_op"
v-model="filter.logical_op" class="h-full"
class="w-full elevation-0 caption" :options="[
:items="['and', 'or']" { value: 'and', text: 'AND' },
density="compact" { value: 'or', text: 'OR' },
variant="solo" ]"
hide-details hide-details
:disabled="filter.readOnly" :disabled="filter.readOnly"
@click.stop @click.stop
@change="filterUpdateCondition(filter, i)" @change="filterUpdateCondition(filter, i)"
/> />
<!-- <template #item="{ item }">
<span class="caption font-weight-regular">{{ item }}</span>
</template>
</v-select> -->
<FieldListAutoCompleteDropdown <FieldListAutoCompleteDropdown
:key="`${i}_6`" :key="`${i}_6`"
@ -167,10 +171,10 @@ watch(
@change="saveOrUpdate(filter, i)" @change="saveOrUpdate(filter, i)"
/> />
<v-select <a-select
v-model="filter.comparison_op" v-model:value="filter.comparison_op"
class="caption nc-filter-operation-select text-sm" class="caption nc-filter-operation-select text-sm"
:items="comparisonOpList.map((it) => it.value)" :options="comparisonOpList"
:placeholder="$t('labels.operation')" :placeholder="$t('labels.operation')"
density="compact" density="compact"
variant="solo" variant="solo"
@ -189,21 +193,17 @@ watch(
<!-- </template> --> <!-- </template> -->
<!-- </v-select> --> <!-- </v-select> -->
<span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" /> <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" />
<v-checkbox <a-checkbox
v-else-if="types[filter.field] === 'boolean'" v-else-if="types[filter.field] === 'boolean'"
:key="`${i}_7`" v-model:value="filter.value"
v-model="filter.value"
dense dense
:disabled="filter.readOnly" :disabled="filter.readOnly"
@change="saveOrUpdate(filter, i)" @change="saveOrUpdate(filter, i)"
/> />
<v-text-field <a-input
v-else v-else
:key="`${i}_7`" :key="`${i}_7`"
v-model="filter.value" v-model="filter.value"
density="compact"
variant="solo"
hide-details
class="caption text-sm nc-filter-value-select" class="caption text-sm nc-filter-value-select"
:disabled="filter.readOnly" :disabled="filter.readOnly"
@click.stop @click.stop
@ -214,11 +214,14 @@ watch(
</template> </template>
</div> </div>
<v-btn small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter"> <a-button small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
<div class="flex align-center gap-1">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> <!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<MdiAddIcon />
<!-- Add Filter --> <!-- Add Filter -->
{{ $t('activity.addFilter') }} {{ $t('activity.addFilter') }}
</v-btn> </div>
</a-button>
<slot /> <slot />
</div> </div>
</template> </template>

34
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
Unescape View File

@ -16,8 +16,7 @@ const applyChanges = () => {}
</script> </script>
<template> <template>
<v-menu offset-y eager transition="slide-y-transition"> <a-dropdown :trigger="['click']">
<template #activator="{ props }">
<v-badge :value="filters.length" color="primary" dot overlap> <v-badge :value="filters.length" color="primary" dot overlap>
<a-button <a-button
v-t="['c:filter']" v-t="['c:filter']"
@ -29,8 +28,8 @@ const applyChanges = () => {}
:class="{ :class="{
'primary lighten-5 grey--text text--darken-3': filters.length, 'primary lighten-5 grey--text text--darken-3': filters.length,
}" }"
v-bind="props" >
><div class="flex align-center gap-1 text-sm"> <div class="flex align-center gap-1 text-sm">
<MdiFilterIcon class="text-grey" /> <MdiFilterIcon class="text-grey" />
<!-- Filter --> <!-- Filter -->
<span class="text-capitalize">{{ $t('activity.filter') }}</span> <span class="text-capitalize">{{ $t('activity.filter') }}</span>
@ -38,29 +37,8 @@ const applyChanges = () => {}
</div> </div>
</a-button> </a-button>
</v-badge> </v-badge>
<template #overlay>
<SmartsheetToolbarColumnFilter />
</template> </template>
<SmartsheetToolbarColumnFilter> </a-dropdown>
<!-- <div class="d-flex align-center mx-2" @click.stop>
<v-checkbox
id="col-filter-checkbox"
v-model="autoApplyFilter"
class="col-filter-checkbox"
hide-details
dense
type="checkbox"
color="grey"
>
<template #label>
<span class="grey&#45;&#45;text caption">
{{ $t('msg.info.filterAutoApply') }}
&lt;!&ndash; Auto apply &ndash;&gt;
</span>
</template>
</v-checkbox>
<v-spacer />
<v-btn v-show="!autoApplyFilter" color="primary" small class="caption ml-2" @click="applyChanges"> Apply changes </v-btn>
</div> -->
</SmartsheetToolbarColumnFilter>
</v-menu>
</template> </template>

54
packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
Unescape View File

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SelectProps } from 'ant-design-vue'
import { computed } from 'vue'
import { MetaInj } from '~/context' import { MetaInj } from '~/context'
interface Props { interface Props {
@ -42,10 +44,28 @@ const localValue = computed({
}, },
}, },
} */ } */
const options = computed<SelectProps['options']>(() =>
meta?.value?.columns?.map((c) => ({
value: c.id,
label: c.title,
})),
)
const filterOption = (input: string, option: any) => {
return option.value.toLowerCase()?.includes(input.toLowerCase())
}
</script> </script>
<template> <template>
<v-autocomplete <a-select
v-model:value="localValue"
show-search
placeholder="Select a field"
:options="options"
:filter-option="filterOption"
></a-select>
<!-- <v-autocomplete
ref="field" ref="field"
v-model="localValue" v-model="localValue"
class="caption" class="caption"
@ -57,22 +77,22 @@ const localValue = computed({
hide-details hide-details
@click.stop @click.stop
> >
<!-- &lt;!&ndash; @change="$emit('change')" &ndash;&gt; --> &lt;!&ndash; &lt;!&ndash; @change="$emit('change')" &ndash;&gt; &ndash;&gt;
<!-- <template #selection="{ item }"> --> &lt;!&ndash; <template #selection="{ item }"> &ndash;&gt;
<!-- <v-icon small class="mr-1"> --> &lt;!&ndash; <v-icon small class="mr-1"> &ndash;&gt;
<!-- {{ item.icon }} --> &lt;!&ndash; {{ item.icon }} &ndash;&gt;
<!-- </v-icon> --> &lt;!&ndash; </v-icon> &ndash;&gt;
<!-- {{ item.title }} --> &lt;!&ndash; {{ item.title }} &ndash;&gt;
<!-- </template> --> &lt;!&ndash; </template> &ndash;&gt;
<!-- <template #item="{ item }"> --> &lt;!&ndash; <template #item="{ item }"> &ndash;&gt;
<!-- <span :class="`caption font-weight-regular nc-fld-${item.title}`"> --> &lt;!&ndash; <span :class="`caption font-weight-regular nc-fld-${item.title}`"> &ndash;&gt;
<!-- <v-icon color="grey" small class="mr-1"> --> &lt;!&ndash; <v-icon color="grey" small class="mr-1"> &ndash;&gt;
<!-- {{ item.icon }} --> &lt;!&ndash; {{ item.icon }} &ndash;&gt;
<!-- </v-icon> --> &lt;!&ndash; </v-icon> &ndash;&gt;
<!-- {{ item.title }} --> &lt;!&ndash; {{ item.title }} &ndash;&gt;
<!-- </span> --> &lt;!&ndash; </span> &ndash;&gt;
<!-- </template> --> &lt;!&ndash; </template> &ndash;&gt;
</v-autocomplete> </v-autocomplete> -->
</template> </template>
<style scoped></style> <style scoped></style>

5
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
Unescape View File

@ -72,7 +72,6 @@ const onMove = (event) => {
// saveOrUpdate(sortedFields[event.moved.newIndex], event.moved.newIndex); // saveOrUpdate(sortedFields[event.moved.newIndex], event.moved.newIndex);
$e('a:fields:reorder') $e('a:fields:reorder')
} }
</script> </script>
<template> <template>
@ -116,9 +115,7 @@ const onMove = (event) => {
</div> </div>
<v-divider class="my-2" /> <v-divider class="my-2" />
<div class="p-2 py-1 flex" @click.stop> <div class="p-2 py-1 flex" @click.stop>
<a-checkbox v-model:checked="showSystemFields"> <a-checkbox v-model:checked="showSystemFields">
<span class="text-xs"> {{ $t('activity.showSystemFields') }}</span> <span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
</a-checkbox> </a-checkbox>
@ -135,9 +132,7 @@ const onMove = (event) => {
</div> </div>
</div> </div>
</template> </template>
</a-dropdown> </a-dropdown>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save