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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 73
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  2. 70
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  3. 76
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
  4. 5
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

73
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 useViewFilters from '~/composables/useViewFilters'
import MdiDeleteIcon from '~icons/mdi/close-box'
import MdiAddIcon from '~icons/mdi/plus'
const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
const meta = inject(MetaInj)
@ -72,13 +72,13 @@ watch(
</script>
<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>
<template v-for="(filter, i) in filters" :key="filter.id || i">
<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 class="d-flex" style="gap: 6px; padding: 0 6px">
<v-icon
<!-- <v-icon
v-if="!filter.readOnly"
:key="`${i}_3`"
small
@ -86,10 +86,18 @@ watch(
@click.stop="deleteFilter(filter, i)"
>
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`" />
<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"
:items="['and', 'or']"
density="compact"
@ -102,7 +110,7 @@ watch(
<!-- <template #item="{ item }"> -->
<!-- <span class="caption font-weight-regular">{{ item }}</span> -->
<!-- </template> -->
</v-select>
</a-select>
</div>
<!-- <column-filter
v-if="filter.id || shared"
@ -134,28 +142,24 @@ watch(
v-if="!filter.readOnly"
class="nc-filter-item-remove-btn text-grey align-self-center"
@click.stop="deleteFilter(filter, i)"
></MdiDeleteIcon>
/>
<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
:key="`${i}_4`"
v-model="filter.logical_op"
class="w-full elevation-0 caption"
:items="['and', 'or']"
density="compact"
variant="solo"
v-model:value="filter.logical_op"
class="h-full"
:options="[
{ value: 'and', text: 'AND' },
{ value: 'or', text: 'OR' },
]"
hide-details
:disabled="filter.readOnly"
@click.stop
@change="filterUpdateCondition(filter, i)"
/>
<!-- <template #item="{ item }">
<span class="caption font-weight-regular">{{ item }}</span>
</template>
</v-select> -->
<FieldListAutoCompleteDropdown
:key="`${i}_6`"
@ -167,10 +171,10 @@ watch(
@change="saveOrUpdate(filter, i)"
/>
<v-select
v-model="filter.comparison_op"
<a-select
v-model:value="filter.comparison_op"
class="caption nc-filter-operation-select text-sm"
:items="comparisonOpList.map((it) => it.value)"
:options="comparisonOpList"
:placeholder="$t('labels.operation')"
density="compact"
variant="solo"
@ -189,21 +193,17 @@ watch(
<!-- </template> -->
<!-- </v-select> -->
<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'"
:key="`${i}_7`"
v-model="filter.value"
v-model:value="filter.value"
dense
:disabled="filter.readOnly"
@change="saveOrUpdate(filter, i)"
/>
<v-text-field
<a-input
v-else
:key="`${i}_7`"
v-model="filter.value"
density="compact"
variant="solo"
hide-details
class="caption text-sm nc-filter-value-select"
:disabled="filter.readOnly"
@click.stop
@ -214,11 +214,14 @@ watch(
</template>
</div>
<v-btn small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</v-btn>
<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> -->
<MdiAddIcon />
<!-- Add Filter -->
{{ $t('activity.addFilter') }}
</div>
</a-button>
<slot />
</div>
</template>

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

@ -16,51 +16,29 @@ const applyChanges = () => {}
</script>
<template>
<v-menu offset-y eager transition="slide-y-transition">
<template #activator="{ props }">
<v-badge :value="filters.length" color="primary" dot overlap>
<a-button
v-t="['c:filter']"
class="nc-filter-menu-btn px-2 nc-remove-border border-0"
:disabled="isLocked"
outlined
size="small"
text
:class="{
'primary lighten-5 grey--text text--darken-3': filters.length,
}"
v-bind="props"
><div class="flex align-center gap-1 text-sm">
<MdiFilterIcon class="text-grey" />
<!-- Filter -->
<span class="text-capitalize">{{ $t('activity.filter') }}</span>
<MdiMenuDownIcon class="text-grey" />
</div>
</a-button>
</v-badge>
<a-dropdown :trigger="['click']">
<v-badge :value="filters.length" color="primary" dot overlap>
<a-button
v-t="['c:filter']"
class="nc-filter-menu-btn px-2 nc-remove-border border-0"
:disabled="isLocked"
outlined
size="small"
text
:class="{
'primary lighten-5 grey--text text--darken-3': filters.length,
}"
>
<div class="flex align-center gap-1 text-sm">
<MdiFilterIcon class="text-grey" />
<!-- Filter -->
<span class="text-capitalize">{{ $t('activity.filter') }}</span>
<MdiMenuDownIcon class="text-grey" />
</div>
</a-button>
</v-badge>
<template #overlay>
<SmartsheetToolbarColumnFilter />
</template>
<SmartsheetToolbarColumnFilter>
<!-- <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>
</a-dropdown>
</template>

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

@ -1,4 +1,6 @@
<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue'
import { computed } from 'vue'
import { MetaInj } from '~/context'
interface Props {
@ -42,37 +44,55 @@ 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>
<template>
<v-autocomplete
ref="field"
v-model="localValue"
class="caption"
:items="meta.columns"
item-value="id"
item-text="title"
:label="$t('objects.field')"
variant="solo"
hide-details
@click.stop
>
<!-- &lt;!&ndash; @change="$emit('change')" &ndash;&gt; -->
<!-- <template #selection="{ item }"> -->
<!-- <v-icon small class="mr-1"> -->
<!-- {{ item.icon }} -->
<!-- </v-icon> -->
<!-- {{ item.title }} -->
<!-- </template> -->
<!-- <template #item="{ item }"> -->
<!-- <span :class="`caption font-weight-regular nc-fld-${item.title}`"> -->
<!-- <v-icon color="grey" small class="mr-1"> -->
<!-- {{ item.icon }} -->
<!-- </v-icon> -->
<!-- {{ item.title }} -->
<!-- </span> -->
<!-- </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"
v-model="localValue"
class="caption"
:items="meta.columns"
item-value="id"
item-text="title"
:label="$t('objects.field')"
variant="solo"
hide-details
@click.stop
>
&lt;!&ndash; &lt;!&ndash; @change="$emit('change')" &ndash;&gt; &ndash;&gt;
&lt;!&ndash; <template #selection="{ item }"> &ndash;&gt;
&lt;!&ndash; <v-icon small class="mr-1"> &ndash;&gt;
&lt;!&ndash; {{ item.icon }} &ndash;&gt;
&lt;!&ndash; </v-icon> &ndash;&gt;
&lt;!&ndash; {{ item.title }} &ndash;&gt;
&lt;!&ndash; </template> &ndash;&gt;
&lt;!&ndash; <template #item="{ item }"> &ndash;&gt;
&lt;!&ndash; <span :class="`caption font-weight-regular nc-fld-${item.title}`"> &ndash;&gt;
&lt;!&ndash; <v-icon color="grey" small class="mr-1"> &ndash;&gt;
&lt;!&ndash; {{ item.icon }} &ndash;&gt;
&lt;!&ndash; </v-icon> &ndash;&gt;
&lt;!&ndash; {{ item.title }} &ndash;&gt;
&lt;!&ndash; </span> &ndash;&gt;
&lt;!&ndash; </template> &ndash;&gt;
</v-autocomplete> -->
</template>
<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);
$e('a:fields:reorder')
}
</script>
<template>
@ -116,9 +115,7 @@ const onMove = (event) => {
</div>
<v-divider class="my-2" />
<div class="p-2 py-1 flex" @click.stop>
<a-checkbox v-model:checked="showSystemFields">
<span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
</a-checkbox>
@ -135,9 +132,7 @@ const onMove = (event) => {
</div>
</div>
</template>
</a-dropdown>
</template>
<style scoped lang="scss">

Write Preview
Loading…
Cancel
Save