test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: moved quick filter field in separate component and added debounce

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-30 19:06:18 +05:30
parent 5d234965d5
commit 2c7a4ccd2a
2 changed files with 69 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/components/QuickFilterField.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<FormControl
v-if="filter.type == 'Check'"
:label="filter.label"
type="checkbox"
v-model="filter.value"
@change.stop="updateFilter(filter, $event.target.checked)"
/>
<FormControl
v-else-if="filter.type === 'Select'"
class="form-control cursor-pointer [&_select]:cursor-pointer"
type="select"
v-model="filter.value"
:options="filter.options"
:placeholder="filter.label"
@change.stop="updateFilter(filter, $event.target.value)"
/>
<Link
v-else-if="filter.type === 'Link'"
:value="filter.value"
:doctype="filter.options"
:placeholder="filter.label"
@change="(data) => updateFilter(filter, data)"
/>
<component
v-else-if="['Date', 'Datetime'].includes(filter.type)"
class="border-none"
:is="filter.type === 'Date' ? DatePicker : DatetimePicker"
:value="filter.value"
@change="(v) => updateFilter(filter, v)"
:placeholder="filter.label"
/>
<TextInput
v-else
v-model="filter.value"
type="text"
:placeholder="filter.label"
@input.stop="debouncedFn(filter, $event.target.value)"
/>
</template>
<script setup>
import DatePicker from '@/components/Controls/DatePicker.vue'
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
import Link from '@/components/Controls/Link.vue'
import { TextInput, FormControl } from 'frappe-ui'
import { useDebounceFn } from '@vueuse/core'
const props = defineProps({
filter: {
type: Object,
required: true,
},
})
const emit = defineEmits(['applyQuickFilter'])
const debouncedFn = useDebounceFn((f, value) => {
emit('applyQuickFilter', f, value)
}, 500)
function updateFilter(f, value) {
emit('applyQuickFilter', f, value)
}
</script>

53
frontend/src/components/ViewControls.vue
View File

@ -96,44 +96,9 @@
:key="filter.name"
class="m-1 min-w-36"
>
<FormControl
v-if="filter.type == 'Check'"
:label="filter.label"
type="checkbox"
v-model="filter.value"
@change.stop="applyQuickFilter(filter, $event.target.checked)"
/>
<FormControl
v-else-if="filter.type === 'Select'"
class="form-control cursor-pointer [&_select]:cursor-pointer"
type="select"
v-model="filter.value"
:options="filter.options"
:placeholder="filter.label"
@change.stop="applyQuickFilter(filter, $event.target.value)"
/>
<Link
v-else-if="filter.type === 'Link'"
:value="filter.value"
:doctype="filter.options"
:placeholder="filter.label"
@change="(data) => applyQuickFilter(filter, data)"
/>
<component
v-else-if="['Date', 'Datetime'].includes(filter.type)"
class="border-none"
:is="filter.type === 'Date' ? DatePicker : DatetimePicker"
:value="filter.value"
@change="(v) => applyQuickFilter(filter, v)"
:placeholder="filter.label"
/>
<TextInput
v-else
:value="filter.value"
type="text"
:placeholder="filter.label"
:debounce="500"
@input.stop="applyQuickFilter(filter, $event.target.value)"
<QuickFilterField
:filter="filter"
@applyQuickFilter="(f, v) => applyQuickFilter(f, v)"
/>
</div>
</FadedScrollableDiv>
@ -247,9 +212,7 @@
</Dialog>
</template>
<script setup>
import DatePicker from '@/components/Controls/DatePicker.vue'
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
import Link from '@/components/Controls/Link.vue'
import QuickFilterField from '@/components/QuickFilterField.vue'
import RefreshIcon from '@/components/Icons/RefreshIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import DuplicateIcon from '@/components/Icons/DuplicateIcon.vue'
@ -264,13 +227,7 @@ import { globalStore } from '@/stores/global'
import { viewsStore } from '@/stores/views'
import { usersStore } from '@/stores/users'
import { isEmoji } from '@/utils'
import {
createResource,
Dropdown,
call,
FeatherIcon,
TextInput,
} from 'frappe-ui'
import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
import { computed, ref, onMounted, watch, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDebounceFn } from '@vueuse/core'