fix: allow bulk editing for all listview

This commit is contained in:
Shariq Ansari 2024-02-06 18:25:12 +05:30
parent 0177b959ca
commit ff6204e1cd
11 changed files with 176 additions and 26 deletions

View File

@ -62,7 +62,15 @@
</ListRowItem>
</ListRow>
</ListRows>
<ListSelectBanner />
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
</Button>
</template>
</ListSelectBanner>
</ListView>
<ListFooter
v-if="pageLengthCount"
@ -74,9 +82,18 @@
}"
@loadMore="emit('loadMore')"
/>
<EditValueModal
v-model="showEditModal"
v-model:unselectAll="unselectAllAction"
doctype="Contact"
:selectedValues="selectedValues"
@reload="emit('reload')"
/>
</template>
<script setup>
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import EditValueModal from '@/components/Modals/EditValueModal.vue'
import {
Avatar,
ListView,
@ -87,7 +104,7 @@ import {
ListRowItem,
ListFooter,
} from 'frappe-ui'
import { watch } from 'vue'
import { ref, watch } from 'vue'
const props = defineProps({
rows: {
@ -108,7 +125,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
const pageLengthCount = defineModel()
@ -116,4 +133,14 @@ watch(pageLengthCount, (val, old_value) => {
if (val === old_value) return
emit('updatePageCount', val)
})
const showEditModal = ref(false)
const selectedValues = ref([])
const unselectAllAction = ref(() => {})
function editValues(selections, unselectAll) {
selectedValues.value = selections
showEditModal.value = true
unselectAllAction.value = unselectAll
}
</script>

View File

@ -48,12 +48,23 @@
</ListRows>
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button
theme="red"
variant="subtle"
label="Delete"
@click="deleteEmailTemplate(selections, unselectAll)"
/>
<div class="flex gap-2">
<Button
theme="red"
variant="subtle"
label="Delete"
@click="deleteEmailTemplate(selections, unselectAll)"
/>
<Button
variant="subtle"
label="Edit"
@click="editValues(selections, unselectAll)"
>
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
</Button>
</div>
</template>
</ListSelectBanner>
</ListView>
@ -66,8 +77,17 @@
}"
@loadMore="emit('loadMore')"
/>
<EditValueModal
v-model="showEditModal"
v-model:unselectAll="unselectAllAction"
doctype="Email Template"
:selectedValues="selectedValues"
@reload="emit('reload')"
/>
</template>
<script setup>
import EditIcon from '@/components/Icons/EditIcon.vue'
import EditValueModal from '@/components/Modals/EditValueModal.vue'
import { globalStore } from '@/stores/global'
import {
ListView,
@ -79,7 +99,7 @@ import {
ListFooter,
call,
} from 'frappe-ui'
import { defineModel, watch } from 'vue'
import { ref, defineModel, watch } from 'vue'
const props = defineProps({
rows: {
@ -100,7 +120,12 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount', 'showEmailTemplate', 'reload'])
const emit = defineEmits([
'loadMore',
'updatePageCount',
'showEmailTemplate',
'reload',
])
const pageLengthCount = defineModel()
@ -143,4 +168,14 @@ function deleteEmailTemplate(selections, unselectAll) {
],
})
}
const showEditModal = ref(false)
const selectedValues = ref([])
const unselectAllAction = ref(() => {})
function editValues(selections, unselectAll) {
selectedValues.value = selections
showEditModal.value = true
unselectAllAction.value = unselectAll
}
</script>

View File

@ -94,7 +94,15 @@
</ListRowItem>
</ListRow>
</ListRows>
<ListSelectBanner />
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
</Button>
</template>
</ListSelectBanner>
</ListView>
<ListFooter
v-if="pageLengthCount"
@ -106,12 +114,21 @@
}"
@loadMore="emit('loadMore')"
/>
<EditValueModal
v-model="showEditModal"
v-model:unselectAll="unselectAllAction"
doctype="CRM Lead"
:selectedValues="selectedValues"
@reload="emit('reload')"
/>
</template>
<script setup>
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import MultipleAvatar from '@/components/MultipleAvatar.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import EditValueModal from '@/components/Modals/EditValueModal.vue'
import {
Avatar,
ListView,
@ -122,7 +139,7 @@ import {
ListRowItem,
ListFooter,
} from 'frappe-ui'
import { watch } from 'vue'
import { ref, watch } from 'vue'
const props = defineProps({
rows: {
@ -143,7 +160,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
const pageLengthCount = defineModel()
@ -151,4 +168,14 @@ watch(pageLengthCount, (val, old_value) => {
if (val === old_value) return
emit('updatePageCount', val)
})
const showEditModal = ref(false)
const selectedValues = ref([])
const unselectAllAction = ref(() => {})
function editValues(selections, unselectAll) {
selectedValues.value = selections
showEditModal.value = true
unselectAllAction.value = unselectAll
}
</script>

View File

@ -49,7 +49,15 @@
</ListRowItem>
</ListRow>
</ListRows>
<ListSelectBanner />
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button variant="subtle" label="Edit" @click="editValues(selections, unselectAll)">
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
</Button>
</template>
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t px-5 py-2"
@ -60,8 +68,17 @@
}"
@loadMore="emit('loadMore')"
/>
<EditValueModal
v-model="showEditModal"
v-model:unselectAll="unselectAllAction"
doctype="CRM Organization"
:selectedValues="selectedValues"
@reload="emit('reload')"
/>
</template>
<script setup>
import EditIcon from '@/components/Icons/EditIcon.vue'
import EditValueModal from '@/components/Modals/EditValueModal.vue'
import {
Avatar,
ListView,
@ -72,7 +89,7 @@ import {
ListRowItem,
ListFooter,
} from 'frappe-ui'
import { watch } from 'vue'
import { ref, watch } from 'vue'
const props = defineProps({
rows: {
@ -93,7 +110,7 @@ const props = defineProps({
},
})
const emit = defineEmits(['loadMore', 'updatePageCount'])
const emit = defineEmits(['loadMore', 'updatePageCount', 'reload'])
const pageLengthCount = defineModel()
@ -101,4 +118,14 @@ watch(pageLengthCount, (val, old_value) => {
if (val === old_value) return
emit('updatePageCount', val)
})
const showEditModal = ref(false)
const selectedValues = ref([])
const unselectAllAction = ref(() => {})
function editValues(selections, unselectAll) {
selectedValues.value = selections
showEditModal.value = true
unselectAllAction.value = unselectAll
}
</script>

View File

@ -65,12 +65,23 @@
</ListRows>
<ListSelectBanner>
<template #actions="{ selections, unselectAll }">
<Button
theme="red"
variant="subtle"
label="Delete"
@click="deleteTask(selections, unselectAll)"
/>
<div class="flex gap-2">
<Button
theme="red"
variant="subtle"
label="Delete"
@click="deleteTask(selections, unselectAll)"
/>
<Button
variant="subtle"
label="Edit"
@click="editValues(selections, unselectAll)"
>
<template #prefix>
<EditIcon class="h-3 w-3" />
</template>
</Button>
</div>
</template>
</ListSelectBanner>
</ListView>
@ -83,11 +94,20 @@
}"
@loadMore="emit('loadMore')"
/>
<EditValueModal
v-model="showEditModal"
v-model:unselectAll="unselectAllAction"
doctype="CRM Task"
:selectedValues="selectedValues"
@reload="emit('reload')"
/>
</template>
<script setup>
import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import EditValueModal from '@/components/Modals/EditValueModal.vue'
import { dateFormat } from '@/utils'
import { globalStore } from '@/stores/global'
import {
@ -102,7 +122,7 @@ import {
call,
Tooltip,
} from 'frappe-ui'
import { defineModel, watch } from 'vue'
import { ref, defineModel, watch } from 'vue'
const props = defineProps({
rows: {
@ -166,4 +186,14 @@ function deleteTask(selections, unselectAll) {
],
})
}
const showEditModal = ref(false)
const selectedValues = ref([])
const unselectAllAction = ref(() => {})
function editValues(selections, unselectAll) {
selectedValues.value = selections
showEditModal.value = true
unselectAllAction.value = unselectAll
}
</script>

View File

@ -21,6 +21,7 @@
}"
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="callLogs.reload()"
/>
<div
v-else-if="callLogs.data"

View File

@ -26,6 +26,7 @@
}"
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="contacts.reload()"
/>
<div
v-else-if="contacts.data"

View File

@ -27,7 +27,7 @@
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@showEmailTemplate="showEmailTemplate"
@reload="() => emailTemplates.reload()"
@reload="emailTemplates.reload()"
/>
<div
v-else-if="emailTemplates.data"

View File

@ -27,6 +27,7 @@
}"
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="leads.reload()"
/>
<div v-else-if="leads.data" class="flex h-full items-center justify-center">
<div

View File

@ -30,6 +30,7 @@
}"
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@reload="organizations.reload()"
/>
<div
v-else-if="organizations.data"

View File

@ -27,7 +27,7 @@
@loadMore="() => loadMore++"
@updatePageCount="(count) => (updatedPageCount = count)"
@showTask="showTask"
@reload="() => tasks.reload()"
@reload="tasks.reload()"
/>
<div v-else-if="tasks.data" class="flex h-full items-center justify-center">
<div