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

refactor: improve layout and structure of quick filter components

Browse Source
This commit is contained in:
Shariq Ansari 2025-08-19 00:30:30 +05:30
parent c4065b95b8
commit 1a90876500
1 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,17 +65,18 @@
> >
<div class="flex flex-1 items-center overflow-hidden pl-1 gap-2"> <div class="flex flex-1 items-center overflow-hidden pl-1 gap-2">
<FadedScrollableDiv <FadedScrollableDiv
class="flex items-center gap-2 overflow-x-auto -ml-1" class="flex overflow-x-auto -ml-1"
orientation="horizontal" orientation="horizontal"
> >
<Draggable <Draggable
class="flex gap-2" class="flex w-full gap-2 items-center"
:list="newQuickFilters" :list="newQuickFilters"
group="filters" group="filters"
item-key="fieldname" item-key="fieldname"
> >
<template #item="{ element: filter }"> <template #item="{ element: filter }">
<Button class="group whitespace-nowrap cursor-grab"> <div class="group whitespace-nowrap cursor-grab">
<Button class="cursor-grab">
<template #default> <template #default>
<Tooltip :text="filter.fieldname"> <Tooltip :text="filter.fieldname">
<span>{{ filter.label }}</span> <span>{{ filter.label }}</span>
@ -89,9 +90,11 @@
/> />
</template> </template>
</Button> </Button>
</div>
</template> </template>
</Draggable> </Draggable>
</FadedScrollableDiv> </FadedScrollableDiv>
<div>
<Autocomplete <Autocomplete
value="" value=""
:options="quickFilterOptions" :options="quickFilterOptions"
@ -115,6 +118,7 @@
</template> </template>
</Autocomplete> </Autocomplete>
</div> </div>
</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