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

fix: changed view control layout for mobile view

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-27 12:27:54 +05:30
parent c7a5cf9116
commit 8101533092
1 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,66 @@
<template>
<div class="flex items-center justify-between gap-2 px-5 py-4">
<div
v-if="isMobileView"
class="flex flex-col justify-between gap-2 px-5 py-4"
>
<div class="flex items-center justify-between gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
<Button :label="__(currentView.label)">
<template #prefix>
<div v-if="isEmoji(currentView.icon)">{{ currentView.icon }}</div>
<FeatherIcon v-else :name="currentView.icon" class="h-4" />
</template>
<template #suffix>
<FeatherIcon
:name="open ? 'chevron-up' : 'chevron-down'"
class="h-4 text-gray-600"
/>
</template>
</Button>
</template>
</Dropdown>
<div class="flex gap-2">
<Button :label="__('Refresh')" @click="reload()" :loading="isLoading">
<template #icon>
<RefreshIcon class="h-4 w-4" />
</template>
</Button>
<Dropdown :options="viewActions">
<template #default>
<Button icon="more-horizontal" />
</template>
</Dropdown>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-2">
<Filter
v-model="list"
:doctype="doctype"
:default_filters="filters"
@update="updateFilter"
/>
<div class="flex gap-2">
<SortBy v-model="list" :doctype="doctype" @update="updateSort" />
<ColumnSettings
v-if="!options.hideColumnsButton"
v-model="list"
:doctype="doctype"
@update="(isDefault) => updateColumns(isDefault)"
/>
</div>
</div>
<div
v-if="viewUpdated && route.query.view && (!view.public || isManager())"
class="flex flex-row-reverse items-center gap-2 border-r pr-2"
>
<Button :label="__('Cancel')" @click="cancelChanges" />
<Button :label="__('Save Changes')" @click="saveView" />
</div>
</div>
</div>
<div v-else class="flex items-center justify-between gap-2 px-5 py-4">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
@ -205,6 +266,7 @@ import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
import { computed, ref, onMounted, watch, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDebounceFn } from '@vueuse/core'
import { isMobileView } from '@/stores/settings'
const props = defineProps({
doctype: {