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

fix: made quick filters draggable to reorder

Browse Source
This commit is contained in:
Shariq Ansari 2025-02-28 16:31:16 +05:30
parent 6e16869a40
commit 22d2215e4a
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,23 +62,35 @@
v-else-if="customizeQuickFilter" v-else-if="customizeQuickFilter"
class="flex items-center justify-between gap-2 p-5" class="flex items-center justify-between gap-2 p-5"
> >
<FadedScrollableDiv <div class="flex flex-1 items-center overflow-hidden pl-1 gap-2">
class="flex flex-1 items-center gap-2 overflow-x-auto -ml-1" <FadedScrollableDiv
orientation="horizontal" class="flex items-center gap-2 overflow-x-auto -ml-1"
> orientation="horizontal"
<template v-for="filter in newQuickFilters" :key="filter.fieldname"> >
<Tooltip :text="filter.fieldname"> <Draggable
<Button :label="filter.label" class="group whitespace-nowrap"> class="flex gap-2"
<template #suffix> :list="newQuickFilters"
<FeatherIcon group="filters"
class="h-3.5 cursor-pointer group-hover:flex hidden" item-key="fieldname"
name="x" >
@click.stop="removeQuickFilter(filter)" <template #item="{ element: filter }">
/> <Button class="group whitespace-nowrap cursor-grab">
</template> <template #default>
</Button> <Tooltip :text="filter.fieldname">
</Tooltip> <span>{{ filter.label }}</span>
</template> </Tooltip>
</template>
<template #suffix>
<FeatherIcon
class="h-3.5 cursor-pointer group-hover:flex hidden"
name="x"
@click.stop="removeQuickFilter(filter)"
/>
</template>
</Button>
</template>
</Draggable>
</FadedScrollableDiv>
<Autocomplete <Autocomplete
value="" value=""
:options="quickFilterOptions" :options="quickFilterOptions"
@ -86,7 +98,7 @@
> >
<template #target="{ togglePopover }"> <template #target="{ togglePopover }">
<Button <Button
class="whitespace-nowrap mr-4" class="whitespace-nowrap mr-2"
variant="ghost" variant="ghost"
@click="togglePopover()" @click="togglePopover()"
:label="__('Add filter')" :label="__('Add filter')"
@ -104,7 +116,7 @@
</Tooltip> </Tooltip>
</template> </template>
</Autocomplete> </Autocomplete>
</FadedScrollableDiv> </div>
<div class="-ml-2 h-[70%] border-l" /> <div class="-ml-2 h-[70%] border-l" />
<div class="flex gap-1"> <div class="flex gap-1">
<Button <Button
@ -312,6 +324,7 @@ import { computed, ref, onMounted, watch, h, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { useDebounceFn } from '@vueuse/core' import { useDebounceFn } from '@vueuse/core'
import { isMobileView } from '@/composables/settings' import { isMobileView } from '@/composables/settings'
import Draggable from 'vuedraggable'
import _ from 'lodash' import _ from 'lodash'
const props = defineProps({ const props = defineProps({