test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests 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

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

@ -62,13 +62,24 @@
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"
> >
<div class="flex flex-1 items-center overflow-hidden pl-1 gap-2">
<FadedScrollableDiv <FadedScrollableDiv
class="flex flex-1 items-center gap-2 overflow-x-auto -ml-1" class="flex items-center gap-2 overflow-x-auto -ml-1"
orientation="horizontal" orientation="horizontal"
> >
<template v-for="filter in newQuickFilters" :key="filter.fieldname"> <Draggable
class="flex gap-2"
:list="newQuickFilters"
group="filters"
item-key="fieldname"
>
<template #item="{ element: filter }">
<Button class="group whitespace-nowrap cursor-grab">
<template #default>
<Tooltip :text="filter.fieldname"> <Tooltip :text="filter.fieldname">
<Button :label="filter.label" class="group whitespace-nowrap"> <span>{{ filter.label }}</span>
</Tooltip>
</template>
<template #suffix> <template #suffix>
<FeatherIcon <FeatherIcon
class="h-3.5 cursor-pointer group-hover:flex hidden" class="h-3.5 cursor-pointer group-hover:flex hidden"
@ -77,8 +88,9 @@
/> />
</template> </template>
</Button> </Button>
</Tooltip>
</template> </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({