Browse Source

feat(gui-v2): filter layout

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2819/head
Pranav C 2 years ago
parent
commit
ce8156fe68
  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

@ -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">
<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') }}
</v-btn>
</div>
</a-button>
<slot />
</div>
</template>

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

@ -16,8 +16,7 @@ const applyChanges = () => {}
</script>
<template>
<v-menu offset-y eager transition="slide-y-transition">
<template #activator="{ props }">
<a-dropdown :trigger="['click']">
<v-badge :value="filters.length" color="primary" dot overlap>
<a-button
v-t="['c:filter']"
@ -29,8 +28,8 @@ const applyChanges = () => {}
:class="{
'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" />
<!-- Filter -->
<span class="text-capitalize">{{ $t('activity.filter') }}</span>
@ -38,29 +37,8 @@ const applyChanges = () => {}
</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>

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

@ -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,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>
<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"
@ -57,22 +77,22 @@ const localValue = computed({
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>
&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

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

Loading…
Cancel
Save