test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: filter layout in mobile view

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-05 17:59:43 +05:30
parent e30d5bfa31
commit 4de7a27eed
1 changed files with 79 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/components/Filter.vue
View File

@ -1,46 +1,54 @@
<template> <template>
<NestedPopover> <NestedPopover>
<template #target> <template #target>
<div class="flex items-center"> <div class="flex items-center">
<Button <Button
:label="__('Filter')" :label="__('Filter')"
:class="filters?.size ? 'rounded-r-none' : ''" :class="filters?.size ? 'rounded-r-none' : ''"
> >
<template #prefix><FilterIcon class="h-4" /></template> <template #prefix><FilterIcon class="h-4" /></template>
<template v-if="filters?.size" #suffix> <template v-if="filters?.size" #suffix>
<div <div
class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white" class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
> >
{{ filters.size }} {{ filters.size }}
</div>
</template>
</Button>
<Tooltip v-if="filters?.size" :text="__('Clear all Filter')">
<div>
<Button
class="rounded-l-none border-l"
icon="x"
@click.stop="clearfilter(false)"
/>
</div> </div>
</template> </Tooltip>
</Button> </div>
<Tooltip v-if="filters?.size" :text="__('Clear all Filter')">
<div>
<Button
class="rounded-l-none border-l"
icon="x"
@click.stop="clearfilter(false)"
/>
</div>
</Tooltip>
</div>
</template> </template>
<template #body="{ close }"> <template #body="{ close }">
<div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl"> <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
<div class="min-w-[400px] p-2"> <div class="min-w-72 p-2 sm:min-w-[400px]">
<div <div
v-if="filters?.size" v-if="filters?.size"
v-for="(f, i) in filters" v-for="(f, i) in filters"
:key="i" :key="i"
id="filter-list" id="filter-list"
class="mb-3 flex items-center justify-between gap-2" class="sm:mb-3 mb-4"
> >
<div class="flex items-center gap-2"> <div v-if="isMobileView" class="flex flex-col gap-2">
<div class="w-13 pl-2 text-end text-base text-gray-600"> <div class="flex w-full items-center justify-between -mb-2">
{{ i == 0 ? __('Where') : __('And') }} <div class="text-base text-gray-600">
{{ i == 0 ? __('Where') : __('And') }}
</div>
<Button
class="flex"
variant="ghost"
icon="x"
@click="removeFilter(i)"
/>
</div> </div>
<div id="fieldname" class="!min-w-[140px]"> <div id="fieldname" class="w-full">
<Autocomplete <Autocomplete
:value="f.field.fieldname" :value="f.field.fieldname"
:options="filterableFields.data" :options="filterableFields.data"
@ -57,7 +65,7 @@
:placeholder="__('Equals')" :placeholder="__('Equals')"
/> />
</div> </div>
<div id="value" class="!min-w-[140px]"> <div id="value" class="w-full">
<component <component
:is="getValSelect(f)" :is="getValSelect(f)"
v-model="f.value" v-model="f.value"
@ -66,7 +74,46 @@
/> />
</div> </div>
</div> </div>
<Button variant="ghost" icon="x" @click="removeFilter(i)" /> <div v-else class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
<div class="w-13 pl-2 text-end text-base text-gray-600">
{{ i == 0 ? __('Where') : __('And') }}
</div>
<div id="fieldname" class="!min-w-[140px]">
<Autocomplete
:value="f.field.fieldname"
:options="filterableFields.data"
@change="(e) => updateFilter(e, i)"
:placeholder="__('First Name')"
/>
</div>
<div id="operator">
<FormControl
type="select"
v-model="f.operator"
@change="(e) => updateOperator(e, f)"
:options="
getOperators(f.field.fieldtype, f.field.fieldname)
"
:placeholder="__('Equals')"
/>
</div>
<div id="value" class="!min-w-[140px]">
<component
:is="getValSelect(f)"
v-model="f.value"
@change.stop="(v) => updateValue(v, f)"
:placeholder="__('John Doe')"
/>
</div>
</div>
<Button
class="flex"
variant="ghost"
icon="x"
@click="removeFilter(i)"
/>
</div>
</div> </div>
<div <div
v-else v-else
@ -117,6 +164,7 @@ import Link from '@/components/Controls/Link.vue'
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue' import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
import { FormControl, createResource, Tooltip } from 'frappe-ui' import { FormControl, createResource, Tooltip } from 'frappe-ui'
import { h, computed, onMounted } from 'vue' import { h, computed, onMounted } from 'vue'
import { isMobileView } from '@/composables/settings'
const typeCheck = ['Check'] const typeCheck = ['Check']
const typeLink = ['Link', 'Dynamic Link'] const typeLink = ['Link', 'Dynamic Link']