fix: removed detailMode code from Organization modal
This commit is contained in:
parent
35a299b4d8
commit
b6006ce22f
@ -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" />
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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({})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user