fix: removed detailMode code from Organization modal

This commit is contained in:
Shariq Ansari 2024-12-10 17:17:58 +05:30
parent 35a299b4d8
commit b6006ce22f
3 changed files with 29 additions and 100 deletions

View File

@ -34,7 +34,7 @@
variant="ghost" variant="ghost"
class="w-full !justify-start" class="w-full !justify-start"
:label="__('Create New')" :label="__('Create New')"
@click="attrs.onCreate(value, close)" @click="() => attrs.onCreate(value, close)"
> >
<template #prefix> <template #prefix>
<FeatherIcon name="plus" class="h-4" /> <FeatherIcon name="plus" class="h-4" />

View File

@ -10,10 +10,10 @@
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<Button <Button
v-if="isManager() || detailMode" v-if="isManager()"
variant="ghost" variant="ghost"
class="w-7" class="w-7"
@click="detailMode ? (detailMode = false) : openQuickEntryModal()" @click="openQuickEntryModal"
> >
<EditIcon class="h-4 w-4" /> <EditIcon class="h-4 w-4" />
</Button> </Button>
@ -23,55 +23,42 @@
</div> </div>
</div> </div>
<div> <div>
<div v-if="detailMode" class="flex flex-col gap-3.5">
<div
class="flex h-7 items-center gap-2 text-base text-ink-gray-8"
v-for="field in fields"
:key="field.name"
>
<div class="grid w-7 place-content-center">
<component :is="field.icon" />
</div>
<div>{{ field.value }}</div>
</div>
</div>
<FieldLayout <FieldLayout
v-else-if="filteredSections.length" v-if="filteredSections.length"
:tabs="filteredSections" :tabs="filteredSections"
:data="_organization" :data="_organization"
/> />
</div> </div>
</div> </div>
<div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6"> <div class="px-4 pb-7 pt-4 sm:px-6">
<div class="space-y-2"> <Button
<Button class="w-full"
class="w-full" v-for="action in dialogOptions.actions"
v-for="action in dialogOptions.actions" :key="action.label"
:key="action.label" v-bind="action"
v-bind="action" :label="__(action.label)"
:label="__(action.label)" :loading="loading"
:loading="loading" />
/>
</div>
</div> </div>
</template> </template>
</Dialog> </Dialog>
<AddressModal v-model="showAddressModal" v-model:address="_address" /> <AddressModal v-model="showAddressModal" v-model:address="_address" />
<QuickEntryModal
v-if="showQuickEntryModal"
v-model="showQuickEntryModal"
doctype="CRM Organization"
/>
</template> </template>
<script setup> <script setup>
import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
import FieldLayout from '@/components/FieldLayout.vue' import FieldLayout from '@/components/FieldLayout.vue'
import AddressModal from '@/components/Modals/AddressModal.vue' import AddressModal from '@/components/Modals/AddressModal.vue'
import EditIcon from '@/components/Icons/EditIcon.vue' import EditIcon from '@/components/Icons/EditIcon.vue'
import MoneyIcon from '@/components/Icons/MoneyIcon.vue'
import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
import TerritoryIcon from '@/components/Icons/TerritoryIcon.vue'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { formatNumberIntoCurrency } from '@/utils'
import { capture } from '@/telemetry' import { capture } from '@/telemetry'
import { call, FeatherIcon, createResource } from 'frappe-ui' import { call, FeatherIcon, createResource } from 'frappe-ui'
import { ref, nextTick, watch, computed, h } from 'vue' import { ref, nextTick, watch, computed } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const props = defineProps({ const props = defineProps({
@ -79,7 +66,6 @@ const props = defineProps({
type: Object, type: Object,
default: { default: {
redirect: true, redirect: true,
detailMode: false,
afterInsert: () => {}, afterInsert: () => {},
}, },
}, },
@ -93,7 +79,6 @@ const organization = defineModel('organization')
const loading = ref(false) const loading = ref(false)
const title = ref(null) const title = ref(null)
const detailMode = ref(false)
const editMode = ref(false) const editMode = ref(false)
let _address = ref({}) let _address = ref({})
let _organization = ref({ let _organization = ref({
@ -186,59 +171,16 @@ const dialogOptions = computed(() => {
let title = !editMode.value let title = !editMode.value
? __('New Organization') ? __('New Organization')
: __(_organization.value.organization_name) : __(_organization.value.organization_name)
let size = detailMode.value ? '' : 'xl' let size = 'xl'
let actions = detailMode.value let actions = [
? []
: [
{
label: editMode.value ? __('Save') : __('Create'),
variant: 'solid',
onClick: () =>
editMode.value ? updateOrganization() : callInsertDoc(),
},
]
return { title, size, actions }
})
const fields = computed(() => {
let details = [
{ {
icon: OrganizationsIcon, label: editMode.value ? __('Save') : __('Create'),
name: 'organization_name', variant: 'solid',
value: _organization.value.organization_name, onClick: () => (editMode.value ? updateOrganization() : callInsertDoc()),
},
{
icon: WebsiteIcon,
name: 'website',
value: _organization.value.website,
},
{
icon: TerritoryIcon,
name: 'territory',
value: _organization.value.territory,
},
{
icon: MoneyIcon,
name: 'annual_revenue',
value: formatNumberIntoCurrency(
_organization.value.annual_revenue,
_organization.value.currency,
),
},
{
icon: h(FeatherIcon, { name: 'hash', class: 'h-4 w-4' }),
name: 'no_of_employees',
value: _organization.value.no_of_employees,
},
{
icon: h(FeatherIcon, { name: 'briefcase', class: 'h-4 w-4' }),
name: 'industry',
value: _organization.value.industry,
}, },
] ]
return details.filter((field) => field.value) return { title, size, actions }
}) })
const tabs = createResource({ const tabs = createResource({
@ -280,7 +222,6 @@ watch(
(value) => { (value) => {
if (!value) return if (!value) return
editMode.value = false editMode.value = false
detailMode.value = props.options.detailMode
nextTick(() => { nextTick(() => {
// TODO: Issue with FormControl // TODO: Issue with FormControl
// title.value.el.focus() // title.value.el.focus()
@ -293,12 +234,10 @@ watch(
}, },
) )
const showQuickEntryModal = defineModel('quickEntry') const showQuickEntryModal = ref(false)
function openQuickEntryModal() { function openQuickEntryModal() {
showQuickEntryModal.value = true showQuickEntryModal.value = true
nextTick(() => { nextTick(() => (show.value = false))
show.value = false
})
} }
</script> </script>

View File

@ -59,15 +59,7 @@
</Button> </Button>
</div> </div>
</div> </div>
<OrganizationModal <OrganizationModal v-model="showOrganizationModal" />
v-model="showOrganizationModal"
v-model:quickEntry="showQuickEntryModal"
/>
<QuickEntryModal
v-if="showQuickEntryModal"
v-model="showQuickEntryModal"
doctype="CRM Organization"
/>
</template> </template>
<script setup> <script setup>
import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue' import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@ -75,7 +67,6 @@ import CustomActions from '@/components/CustomActions.vue'
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue' import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue' import LayoutHeader from '@/components/LayoutHeader.vue'
import OrganizationModal from '@/components/Modals/OrganizationModal.vue' import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue' import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
import ViewControls from '@/components/ViewControls.vue' import ViewControls from '@/components/ViewControls.vue'
import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils' import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
@ -83,7 +74,6 @@ import { ref, computed } from 'vue'
const organizationsListView = ref(null) const organizationsListView = ref(null)
const showOrganizationModal = ref(false) const showOrganizationModal = ref(false)
const showQuickEntryModal = ref(false)
// organizations data is loaded in the ViewControls component // organizations data is loaded in the ViewControls component
const organizations = ref({}) const organizations = ref({})