louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: client detail page reloads when navigating between customers

Browse Source 
Extract data loading into loadCustomer() function and watch props.id
for changes. Previously only ran in onMounted — navigating between
clients showed stale data.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-03-30 23:51:34 -04:00
parent 1ed86e37ad
commit dc63462c0c
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/ops/src/pages/ClientDetailPage.vue
View File

@ -508,7 +508,7 @@
</template>
<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { ref, computed, onMounted, reactive, watch } from 'vue'
import draggable from 'vuedraggable'
import { listDocs, getDoc, updateDoc } from 'src/api/erp'
import { authFetch } from 'src/api/auth'
@ -973,17 +973,29 @@ const ticketCols = [
{ name: 'status', label: '', field: 'status', align: 'center', style: 'width:64px;padding:0 4px' },
]
onMounted(async () => {
async function loadCustomer (id) {
loading.value = true
customer.value = null
locations.value = []
subscriptions.value = []
equipment.value = []
tickets.value = []
invoices.value = []
payments.value = []
comments.value = []
contact.value = null
modalOpen.value = false
try {
const cust = await getDoc('Customer', props.id)
const cust = await getDoc('Customer', id)
// Coerce check fields to boolean for q-toggle
for (const f of ['is_commercial', 'is_bad_payer', 'exclude_fees', 'ppa_enabled']) {
cust[f] = !!cust[f]
}
customer.value = cust
const custFilter = { customer: props.id }
const partyFilter = { party_type: 'Customer', party: props.id }
const custFilter = { customer: id }
const partyFilter = { party_type: 'Customer', party: id }
const [locs, subs, equip, tix, invs, pays, ctc, memos] = await Promise.all([
listDocs('Service Location', {
@ -1023,7 +1035,7 @@ onMounted(async () => {
orderBy: 'posting_date desc, name desc',
}),
listDocs('Payment Entry', {
filters: { party_type: 'Customer', party: props.id },
filters: { party_type: 'Customer', party: id },
fields: ['name', 'posting_date', 'paid_amount', 'mode_of_payment', 'reference_no'],
limit: 50,
orderBy: 'posting_date desc',
@ -1036,7 +1048,7 @@ onMounted(async () => {
}).catch(() => []),
// Comments/memos on this customer
listDocs('Comment', {
filters: { reference_doctype: 'Customer', reference_name: props.id, comment_type: 'Comment' },
filters: { reference_doctype: 'Customer', reference_name: id, comment_type: 'Comment' },
fields: ['name', 'content', 'comment_by', 'creation'],
limit: 50,
orderBy: 'creation desc',
@ -1057,7 +1069,7 @@ onMounted(async () => {
// Fetch accurate account balance from server (covers ALL invoices/payments, not just page limit)
try {
const balRes = await authFetch(BASE_URL + '/api/method/customer_balance?customer=' + encodeURIComponent(props.id))
const balRes = await authFetch(BASE_URL + '/api/method/customer_balance?customer=' + encodeURIComponent(id))
if (balRes.ok) {
const balData = await balRes.json()
accountBalance.value = balData.message
@ -1069,7 +1081,11 @@ onMounted(async () => {
} finally {
loading.value = false
}
})
}
// Reload when navigating between clients
watch(() => props.id, (newId) => { if (newId) loadCustomer(newId) })
onMounted(() => loadCustomer(props.id))
</script>
<style lang="scss" scoped>