Browse Source

feat(gui-v2): add fields filter

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2860/head
Pranav C 2 years ago
parent
commit
5ca62c5ae9
  1. 24
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

24
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@ -80,12 +80,12 @@ const onMove = (event: unknown) => {
<template> <template>
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
<v-badge :value="isAnyFieldHidden" color="primary" dot overlap> <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
<a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small"> <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
<div class="flex align-center gap-1"> <div class="flex align-center gap-1">
<!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> --> <!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
<MdiEyeIcon class="text-grey"></MdiEyeIcon> <MdiEyeIcon class="text-grey"></MdiEyeIcon>
<!-- Fields --> <!-- Fields -->
<span class="text-sm text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span> <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
<MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon> <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
</div> </div>
</a-button> </a-button>
@ -93,6 +93,15 @@ const onMove = (event: unknown) => {
<template #overlay> <template #overlay>
<div class="pt-0 min-w-[280px] bg-white shadow" @click.stop> <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
<div
class="p-1"
@click.stop>
<a-input
size="small"
v-model:value="filterQuery"
:placeholder="$t('placeholder.searchFields')"/>
</div>
<div class="nc-fields-list py-1"> <div class="nc-fields-list py-1">
<Draggable :list="fields" @change="onMove($event)"> <Draggable :list="fields" @change="onMove($event)">
<template #item="{ element: field }"> <template #item="{ element: field }">
@ -114,11 +123,11 @@ const onMove = (event: unknown) => {
</a-checkbox> </a-checkbox>
</div> </div>
<div class="p-2 flex gap-2" @click.stop> <div class="p-2 flex gap-2" @click.stop>
<a-button size="small" class="text-gray-500 text-sm text-capitalize" @click.stop="showAll"> <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="showAll">
<!-- Show All --> <!-- Show All -->
{{ $t('general.showAll') }} {{ $t('general.showAll') }}
</a-button> </a-button>
<a-button size="small" class="text-gray-500 text-sm text-capitalize" @click.stop="hideAll"> <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="hideAll">
<!-- Hide All --> <!-- Hide All -->
{{ $t('general.hideAll') }} {{ $t('general.hideAll') }}
</a-button> </a-button>
@ -129,7 +138,10 @@ const onMove = (event: unknown) => {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.ant-checkbox-input) { :deep(.ant-checkbox-inner) {
transform: scale(0.7); @apply transform scale-60;
}
:deep(::placeholder){
@apply !text-xs
} }
</style> </style>

Loading…
Cancel
Save