fix: allow editing grid row fields layout
This commit is contained in:
Shariq Ansari
parent
59589759c4
commit
8471cbd044
@ -197,21 +197,14 @@
|
||||
<EditIcon class="h-4 w-4 text-ink-gray-7" />
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog
|
||||
<GridRowModal
|
||||
v-if="showRowList[index]"
|
||||
v-model="showRowList[index]"
|
||||
:options="{
|
||||
title: __('Editing Row {0}', [index + 1]),
|
||||
size: '4xl',
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<FieldLayout
|
||||
v-if="fields?.length"
|
||||
:tabs="fields"
|
||||
:data="row"
|
||||
/>
|
||||
</template>
|
||||
</Dialog>
|
||||
v-model:showGridRowFieldsModal="showGridRowFieldsModal"
|
||||
:index="index"
|
||||
:data="row"
|
||||
:doctype="doctype"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
@ -236,21 +229,21 @@
|
||||
<Button :label="__('Add Row')" @click="addRow" />
|
||||
</div>
|
||||
</div>
|
||||
<GridRowFieldsModal
|
||||
v-if="showGridRowFieldsModal"
|
||||
v-model="showGridRowFieldsModal"
|
||||
:doctype="doctype"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
|
||||
import GridRowModal from '@/components/Controls/GridRowModal.vue'
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import FieldLayout from '@/components/FieldLayout.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { GridColumn, GridRow } from '@/types/controls'
|
||||
import { getRandom, getFormat } from '@/utils'
|
||||
import {
|
||||
Dialog,
|
||||
FormControl,
|
||||
Checkbox,
|
||||
DateTimePicker,
|
||||
DatePicker,
|
||||
} from 'frappe-ui'
|
||||
import { FormControl, Checkbox, DateTimePicker, DatePicker } from 'frappe-ui'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { ref, reactive, computed, PropType } from 'vue'
|
||||
|
||||
@ -258,6 +251,7 @@ const props = defineProps<{
|
||||
label?: string
|
||||
gridFields: GridColumn[]
|
||||
fields: GridColumn[]
|
||||
doctype: string
|
||||
}>()
|
||||
|
||||
const rows = defineModel({
|
||||
@ -267,6 +261,8 @@ const rows = defineModel({
|
||||
const showRowList = ref(new Array(rows.value.length).fill(false))
|
||||
const selectedRows = reactive(new Set<string>())
|
||||
|
||||
const showGridRowFieldsModal = ref(false)
|
||||
|
||||
const gridTemplateColumns = computed(() => {
|
||||
if (!props.gridFields?.length) return '1fr'
|
||||
// for the checkbox & sr no. columns
|
||||
|
||||
125
frontend/src/components/Controls/GridRowFieldsModal.vue
Normal file
125
frontend/src/components/Controls/GridRowFieldsModal.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<Dialog v-model="show" :options="{ size: '3xl' }">
|
||||
<template #body-title>
|
||||
<h3
|
||||
class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
|
||||
>
|
||||
<div>{{ __('Edit Grid Row Fields Layout') }}</div>
|
||||
<Badge
|
||||
v-if="dirty"
|
||||
:label="__('Not Saved')"
|
||||
variant="subtle"
|
||||
theme="orange"
|
||||
/>
|
||||
</h3>
|
||||
</template>
|
||||
<template #body-content>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex justify-between gap-2">
|
||||
<Button
|
||||
:label="preview ? __('Hide preview') : __('Show preview')"
|
||||
@click="preview = !preview"
|
||||
/>
|
||||
<div class="flex flex-row-reverse gap-2">
|
||||
<Button
|
||||
:loading="loading"
|
||||
:label="__('Save')"
|
||||
variant="solid"
|
||||
@click="saveChanges"
|
||||
/>
|
||||
<Button :label="__('Reset')" @click="reload" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tabs?.data">
|
||||
<FieldLayoutEditor
|
||||
v-if="!preview"
|
||||
:tabs="tabs.data"
|
||||
:doctype="_doctype"
|
||||
/>
|
||||
<FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import FieldLayout from '@/components/FieldLayout.vue'
|
||||
import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { capture } from '@/telemetry'
|
||||
import { Dialog, Badge, call, createResource } from 'frappe-ui'
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
doctype: {
|
||||
type: String,
|
||||
default: 'CRM Lead',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['reload'])
|
||||
|
||||
const show = defineModel()
|
||||
const _doctype = ref(props.doctype)
|
||||
const loading = ref(false)
|
||||
const dirty = ref(false)
|
||||
const preview = ref(false)
|
||||
|
||||
function getParams() {
|
||||
return { doctype: _doctype.value, type: 'Grid Row' }
|
||||
}
|
||||
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['GridRowFieldsModal', _doctype.value],
|
||||
params: getParams(),
|
||||
onSuccess(data) {
|
||||
tabs.originalData = JSON.parse(JSON.stringify(data))
|
||||
},
|
||||
})
|
||||
|
||||
watch(
|
||||
() => tabs?.data,
|
||||
() => {
|
||||
dirty.value =
|
||||
JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
onMounted(() => useDebounceFn(reload, 100)())
|
||||
|
||||
function reload() {
|
||||
nextTick(() => {
|
||||
tabs.params = getParams()
|
||||
tabs.reload()
|
||||
})
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
let _tabs = JSON.parse(JSON.stringify(tabs.data))
|
||||
_tabs.forEach((tab) => {
|
||||
if (!tab.sections) return
|
||||
tab.sections.forEach((section) => {
|
||||
if (!section.fields) return
|
||||
section.fields = section.fields.map(
|
||||
(field) => field.fieldname || field.name,
|
||||
)
|
||||
})
|
||||
})
|
||||
loading.value = true
|
||||
call(
|
||||
'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
|
||||
{
|
||||
doctype: _doctype.value,
|
||||
type: 'Grid Row',
|
||||
layout: JSON.stringify(_tabs),
|
||||
},
|
||||
).then(() => {
|
||||
loading.value = false
|
||||
show.value = false
|
||||
capture('data_fields_layout_builder', { doctype: _doctype.value })
|
||||
emit('reload')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
62
frontend/src/components/Controls/GridRowModal.vue
Normal file
62
frontend/src/components/Controls/GridRowModal.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<Dialog v-model="show" :options="{ size: '4xl' }">
|
||||
<template #body>
|
||||
<div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
|
||||
{{ __('Editing Row {0}', [index + 1]) }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
v-if="isManager()"
|
||||
variant="ghost"
|
||||
class="w-7"
|
||||
@click="openGridRowFieldsModal"
|
||||
>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" class="w-7" @click="show = false">
|
||||
<FeatherIcon name="x" class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import FieldLayout from '@/components/FieldLayout.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
index: Number,
|
||||
data: Object,
|
||||
doctype: String,
|
||||
})
|
||||
|
||||
const { isManager } = usersStore()
|
||||
|
||||
const show = defineModel()
|
||||
const showGridRowFieldsModal = defineModel('showGridRowFieldsModal')
|
||||
|
||||
const tabs = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
|
||||
cache: ['GridRow', props.doctype],
|
||||
params: { doctype: props.doctype, type: 'Grid Row' },
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function openGridRowFieldsModal() {
|
||||
showGridRowFieldsModal.value = true
|
||||
nextTick(() => (show.value = false))
|
||||
}
|
||||
</script>
|
||||
@ -81,6 +81,7 @@
|
||||
v-model="data[field.name]"
|
||||
:fields="field.fields"
|
||||
:gridFields="field.gridFields"
|
||||
:doctype="field.options"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.type === 'Select'"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user