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

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

@ -65,55 +65,59 @@
> >
<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">
<template #default> <Button class="cursor-grab">
<Tooltip :text="filter.fieldname"> <template #default>
<span>{{ filter.label }}</span> <Tooltip :text="filter.fieldname">
</Tooltip> <span>{{ filter.label }}</span>
</template> </Tooltip>
<template #suffix> </template>
<FeatherIcon <template #suffix>
class="h-3.5 cursor-pointer group-hover:flex hidden" <FeatherIcon
name="x" class="h-3.5 cursor-pointer group-hover:flex hidden"
@click.stop="removeQuickFilter(filter)" name="x"
/> @click.stop="removeQuickFilter(filter)"
</template> />
</Button> </template>
</Button>
</div>
</template> </template>
</Draggable> </Draggable>
</FadedScrollableDiv> </FadedScrollableDiv>
<Autocomplete <div>
value="" <Autocomplete
:options="quickFilterOptions" value=""
@change="(e) => addQuickFilter(e)" :options="quickFilterOptions"
> @change="(e) => addQuickFilter(e)"
<template #target="{ togglePopover }"> >
<Button <template #target="{ togglePopover }">
class="whitespace-nowrap mr-2" <Button
variant="ghost" class="whitespace-nowrap mr-2"
:label="__('Add filter')" variant="ghost"
iconLeft="plus" :label="__('Add filter')"
@click="togglePopover()" iconLeft="plus"
/> @click="togglePopover()"
</template> />
<template #item-label="{ option }"> </template>
<Tooltip :text="option.value" :hover-delay="1"> <template #item-label="{ option }">
<div class="flex-1 truncate text-ink-gray-7"> <Tooltip :text="option.value" :hover-delay="1">
{{ option.label }} <div class="flex-1 truncate text-ink-gray-7">
</div> {{ option.label }}
</Tooltip> </div>
</template> </Tooltip>
</Autocomplete> </template>
</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">