fix: created ViewControls component which handles all view(filters,sort,columns) releated code
This commit is contained in:
Shariq Ansari
parent
414369ebc7
commit
62fc0bc729
353
frontend/src/components/ViewControls.vue
Normal file
353
frontend/src/components/ViewControls.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between px-5 pb-4 pt-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<Dropdown :options="viewsDropdownOptions">
|
||||
<template #default="{ open }">
|
||||
<Button :label="currentView.label">
|
||||
<template #prefix>
|
||||
<FeatherIcon :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>
|
||||
<div class="flex items-center gap-2">
|
||||
<div v-if="viewUpdated" class="flex items-center gap-2 border-r pr-2">
|
||||
<Button label="Cancel" @click="cancelChanges" />
|
||||
<Button label="Save Changes" @click="saveView" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Filter v-model="list" :doctype="doctype" @update="updateFilter" />
|
||||
<SortBy v-model="list" :doctype="doctype" @update="updateSort" />
|
||||
<ViewSettings
|
||||
v-model="list"
|
||||
:doctype="doctype"
|
||||
@update="(isDefault) => updateColumns(isDefault)"
|
||||
/>
|
||||
<Dropdown :options="viewActions">
|
||||
<template #default>
|
||||
<Button>
|
||||
<FeatherIcon name="more-horizontal" class="h-4 w-4" />
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ViewModal
|
||||
:doctype="doctype"
|
||||
:view="view"
|
||||
:options="{
|
||||
afterCreate: (v) => {
|
||||
viewUpdated = false
|
||||
router.push({ name: route.name, query: { view: v.name } })
|
||||
},
|
||||
afterUpdate: () => (viewUpdated = false),
|
||||
}"
|
||||
v-model="showViewModal"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import ViewModal from '@/components/Modals/ViewModal.vue'
|
||||
import SortBy from '@/components/SortBy.vue'
|
||||
import Filter from '@/components/Filter.vue'
|
||||
import ViewSettings from '@/components/ViewSettings.vue'
|
||||
import { globalStore } from '@/stores/global'
|
||||
import { viewsStore } from '@/stores/views'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { createResource, FeatherIcon, Dropdown, call } from 'frappe-ui'
|
||||
import { computed, ref, defineModel, onMounted, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
const props = defineProps({
|
||||
doctype: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
})
|
||||
|
||||
const { $dialog } = globalStore()
|
||||
const { getView } = viewsStore()
|
||||
|
||||
const list = defineModel()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const defaultParams = ref('')
|
||||
|
||||
const viewUpdated = ref(false)
|
||||
const showViewModal = ref(false)
|
||||
|
||||
const currentView = ref({
|
||||
label: 'List View',
|
||||
icon: 'list',
|
||||
})
|
||||
|
||||
const view = ref({
|
||||
name: '',
|
||||
label: '',
|
||||
filters: props.filters,
|
||||
order_by: 'modified desc',
|
||||
columns: '',
|
||||
rows: '',
|
||||
default_columns: false,
|
||||
})
|
||||
|
||||
function getParams() {
|
||||
let _view = getView(route.query.view)
|
||||
const filters = (_view?.filters && JSON.parse(_view.filters)) || props.filters
|
||||
const order_by = _view?.order_by || 'modified desc'
|
||||
const columns = _view?.columns || ''
|
||||
const rows = _view?.rows || ''
|
||||
|
||||
if (_view) {
|
||||
view.value = {
|
||||
name: _view.name,
|
||||
label: _view.label,
|
||||
filters: _view.filters,
|
||||
order_by: _view.order_by,
|
||||
columns: _view.columns,
|
||||
rows: _view.rows,
|
||||
default_columns: _view.row,
|
||||
}
|
||||
} else {
|
||||
view.value = {
|
||||
name: '',
|
||||
label: '',
|
||||
filters: props.filters,
|
||||
order_by: 'modified desc',
|
||||
columns: '',
|
||||
rows: '',
|
||||
default_columns: true,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
doctype: props.doctype,
|
||||
filters: filters,
|
||||
order_by: order_by,
|
||||
columns: columns,
|
||||
rows: rows,
|
||||
custom_view_name: _view?.name || '',
|
||||
}
|
||||
}
|
||||
|
||||
list.value = createResource({
|
||||
url: 'crm.api.doc.get_list_data',
|
||||
params: getParams(),
|
||||
onSuccess(data) {
|
||||
setupViews(data.views)
|
||||
setupDefaults(data)
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
useDebounceFn(() => reload(), 100)()
|
||||
})
|
||||
|
||||
function reload() {
|
||||
list.value.params = getParams()
|
||||
list.value.reload()
|
||||
}
|
||||
|
||||
const viewsDropdownOptions = ref([])
|
||||
|
||||
const defaultViews = [
|
||||
{
|
||||
label: 'List View',
|
||||
icon: 'list',
|
||||
onClick() {
|
||||
viewUpdated.value = false
|
||||
router.push({ name: route.name })
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function setupViews(views) {
|
||||
viewsDropdownOptions.value = [
|
||||
{
|
||||
group: 'Default Views',
|
||||
hideLabel: true,
|
||||
items: defaultViews,
|
||||
},
|
||||
]
|
||||
|
||||
views?.forEach((view) => {
|
||||
view.icon = view.icon || 'list'
|
||||
view.filters = JSON.parse(view.filters)
|
||||
view.onClick = () => {
|
||||
viewUpdated.value = false
|
||||
router.push({ ...route, query: { view: view.name } })
|
||||
}
|
||||
})
|
||||
|
||||
if (views.length) {
|
||||
viewsDropdownOptions.value.push({
|
||||
group: 'Saved Views',
|
||||
items: views,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function setupDefaults(data) {
|
||||
let cv = getView(route.query.view)
|
||||
currentView.value = {
|
||||
label: cv?.label || 'List View',
|
||||
icon: cv?.icon || 'list',
|
||||
}
|
||||
|
||||
defaultParams.value = {
|
||||
doctype: props.doctype,
|
||||
filters: list.value.params.filters,
|
||||
order_by: list.value.params.order_by,
|
||||
columns: data.columns,
|
||||
rows: data.rows,
|
||||
custom_view_name: cv?.name || '',
|
||||
}
|
||||
|
||||
data._defaultFilters = props.filters
|
||||
}
|
||||
|
||||
function updateFilter(filters) {
|
||||
viewUpdated.value = true
|
||||
if (!defaultParams.value) {
|
||||
defaultParams.value = getParams()
|
||||
}
|
||||
list.value.params = defaultParams.value
|
||||
list.value.params.filters = filters
|
||||
list.value.reload()
|
||||
}
|
||||
|
||||
function updateSort(order_by) {
|
||||
viewUpdated.value = true
|
||||
if (!defaultParams.value) {
|
||||
defaultParams.value = getParams()
|
||||
}
|
||||
list.value.params = defaultParams.value
|
||||
list.value.params.order_by = order_by
|
||||
list.value.reload()
|
||||
}
|
||||
|
||||
function updateColumns(obj) {
|
||||
defaultParams.value.columns = obj.isDefault ? '' : obj.columns
|
||||
defaultParams.value.rows = obj.isDefault ? '' : obj.rows
|
||||
view.value.default_columns = obj.isDefault
|
||||
|
||||
if (obj.reset) {
|
||||
defaultParams.value.columns = getParams().columns
|
||||
defaultParams.value.rows = getParams().rows
|
||||
}
|
||||
|
||||
if (obj.reload) {
|
||||
list.value.params = defaultParams.value
|
||||
list.value.reload()
|
||||
}
|
||||
viewUpdated.value = true
|
||||
}
|
||||
|
||||
// View Actions
|
||||
const viewActions = computed(() => {
|
||||
let o = [
|
||||
{
|
||||
group: 'Default Views',
|
||||
hideLabel: true,
|
||||
items: [
|
||||
{
|
||||
label: 'Duplicate View',
|
||||
icon: 'copy',
|
||||
onClick: () => {
|
||||
view.value.name = ''
|
||||
view.value.label = view.value.label + ' New'
|
||||
showViewModal.value = true
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
if (route.query.view) {
|
||||
o.push({
|
||||
group: 'Delete View',
|
||||
hideLabel: true,
|
||||
items: [
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'trash-2',
|
||||
onClick: () =>
|
||||
$dialog({
|
||||
title: 'Delete View',
|
||||
message: 'Are you sure you want to delete this view?',
|
||||
variant: 'danger',
|
||||
actions: [
|
||||
{
|
||||
label: 'Delete',
|
||||
variant: 'solid',
|
||||
theme: 'red',
|
||||
onClick: (close) => {
|
||||
close()
|
||||
call(
|
||||
'crm.fcrm.doctype.crm_view_settings.crm_view_settings.delete',
|
||||
{
|
||||
name: route.query.view,
|
||||
}
|
||||
).then(() => {
|
||||
router.push({ name: route.name })
|
||||
})
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
return o
|
||||
})
|
||||
|
||||
function cancelChanges() {
|
||||
reload()
|
||||
viewUpdated.value = false
|
||||
}
|
||||
|
||||
function saveView() {
|
||||
view.value = {
|
||||
label: view.value.label,
|
||||
name: view.value.name,
|
||||
filters: defaultParams.value.filters,
|
||||
order_by: defaultParams.value.order_by,
|
||||
columns: defaultParams.value.columns,
|
||||
rows: defaultParams.value.rows,
|
||||
default_columns: view.value.default_columns,
|
||||
}
|
||||
showViewModal.value = true
|
||||
}
|
||||
|
||||
// Watchers
|
||||
watch(
|
||||
() => getView(route.query.view),
|
||||
(value, old_value) => {
|
||||
if (JSON.stringify(value) === JSON.stringify(old_value)) return
|
||||
reload()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => route,
|
||||
(value, old_value) => {
|
||||
if (value === old_value) return
|
||||
reload()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user