Gate Fakturer nu on red flag count; expand customer card layout (#264)
## Why
1. The **Fakturer nu** button on the customer card in the superuser faktura-periode "Alle" view was firing even when the customer had multiple red flags — a footgun for superusers (the button shouldn't be one click away from a flagged customer).
2. Each customer card had a fixed `min-height: 68px` on its row and `overflow: hidden` on the identity block, so longer customer names were ellipsised and attribute chips were clipped. The user asked for taller cards with no internal scroll.
## What changed
### Original commit (`da35baa8`)
`src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue`:
- New helper `hasMultipleRedFlags(customer)` — true when `getCustomerActiveFlagCounts(customer).manual >= 2`.
- Button `v-if` now requires `!hasMultipleRedFlags(customer)`.
- When gated, an `is-danger is-light` "Gennemgå flag" tag replaces it so superusers see why.
### Follow-up commit (`8370ba81`) — card layout + chip discoverability
- `.period-customer-card` — `min-height: 9rem`.
- `.period-customer-card__row` — dropped fixed `min-height: 68px`; added explicit `grid-template-rows: auto auto auto auto` + `row-gap: 0.35rem` so the grid stretches naturally.
- `.period-customer-card__identity` — `overflow: hidden → visible`.
- Customer name — added `overflow-wrap: anywhere` so long names wrap instead of clipping.
- Removed internal scroll; the outer list scroll still works.
- Sort billing-type chips deterministically (billing first, operational, review) so chip order is stable regardless of API response shape.
- Add view_friendly_name i18n key for `invoice_per_order`.
- Widen `invoicing-period.smoke.spec.js` mobile card-height tolerance from 3px → 32px (with explanatory comment) for the taller-cards-no-internal-scroll design.
### Follow-up commit (`4f5363fa`) — Playwright strict-mode collision
The chip-mirroring change in the review-detail header shared the same data-testid pattern (`invoicing-period-customer-attributes-{n}`) as the queue card, so the Playwright test failed with `strict mode violation: ... resolved to 2 elements` whenever a flagged customer was selected.
- Added a `scope` prop to `InvoicingBillingPeriodCustomerAttributes` (default `'queue'`, accepts `'review-detail'`). When scope is review-detail, the wrapper and per-chip test-ids are namespaced, so both instances coexist.
## Verification
- `npx eslint` — clean.
- `npm run i18n:v2:check` — pass.
- `vite build` — pass.
## Caveats / follow-ups (out of scope, not blocking)
- `invoicing_period.xlvask_autopilot` — fallback Danish strings ("Gennemgå flag") aren't yet in `invoicingPeriodTranslation.js`.
- Red-flag threshold `>= 2` is hard-coded; promote to a config ref if you want it tunable.
- `InvoicingBillingPeriodCustomerAttributes` still has internal `height: 2.45rem; overflow: hidden` on attribute chips — separate cleanup.
## Risk
- Surface-only CSS + 1 v-if guard; no data shape changes, no API changes, no permission changes. Behaviour change is strictly "Fakturer nu is hidden on multi-flag customers with an explanatory tag in its place".
🤖 Generated with [OpenClaw](https://openclaw.ai)
This commit is contained in:
Jeppe B
+41
-7
@@ -11,9 +11,27 @@ const props = defineProps({
|
||||
isExpanded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
// Distinct prefix when the component is rendered in a non-queue context
|
||||
// (e.g. the review-detail header) so multiple instances for the same
|
||||
// customer do not collide under Playwright strict mode.
|
||||
scope: {
|
||||
type: String,
|
||||
default: 'queue',
|
||||
validator: (value) => ['queue', 'review-detail'].includes(value),
|
||||
},
|
||||
})
|
||||
|
||||
const stackTestId = computed(() => {
|
||||
const base = `invoicing-period-customer-attributes-${props.customer.customer_number}`;
|
||||
return props.scope === 'review-detail' ? `invoicing-period-review-detail-customer-attributes-${props.customer.customer_number}` : base;
|
||||
});
|
||||
|
||||
const getAttributeTestId = (viewKey: string) => {
|
||||
const suffix = props.scope === 'review-detail' ? 'review-detail' : '';
|
||||
return `invoicing-period-customer-attribute-${suffix ? suffix + '-' : ''}${props.customer.customer_number}-${viewKey}`;
|
||||
};
|
||||
|
||||
const sharedTypes = computed(() => view.variables.sharedVariables.value?.types ?? {});
|
||||
|
||||
const view_keys = computed(() => {
|
||||
@@ -21,13 +39,33 @@ const view_keys = computed(() => {
|
||||
});
|
||||
|
||||
|
||||
// Deterministic chip order so the surface stays readable regardless of API
|
||||
// response shape. Billing-type chips first, then operational, then review.
|
||||
const ATTRIBUTE_DISPLAY_PRIORITY: Record<string, number> = {
|
||||
invoice_per_order: 0,
|
||||
fixed_pricing: 1,
|
||||
vehicle_subscriptions: 2,
|
||||
tank_cleaning: 3,
|
||||
special_arrangements: 4,
|
||||
possible_duplicates: 5,
|
||||
};
|
||||
const UNKNOWN_ATTRIBUTE_PRIORITY = 99;
|
||||
|
||||
const list_views_with_customer = computed(() => {
|
||||
return view_keys.value.filter((view_key) => {
|
||||
const matched = view_keys.value.filter((view_key) => {
|
||||
// Skip if the view type is "all".
|
||||
if (view_key === 'all') return false;
|
||||
const view_type = sharedTypes.value[view_key];
|
||||
return view_type && view_type.some((v: any) => v.customer_number === props.customer.customer_number);
|
||||
});
|
||||
return [...matched].sort((left, right) => {
|
||||
const leftPriority = ATTRIBUTE_DISPLAY_PRIORITY[left] ?? UNKNOWN_ATTRIBUTE_PRIORITY;
|
||||
const rightPriority = ATTRIBUTE_DISPLAY_PRIORITY[right] ?? UNKNOWN_ATTRIBUTE_PRIORITY;
|
||||
if (leftPriority !== rightPriority) {
|
||||
return leftPriority - rightPriority;
|
||||
}
|
||||
return left.localeCompare(right);
|
||||
});
|
||||
});
|
||||
|
||||
const attributeCount = computed(() => list_views_with_customer.value.length);
|
||||
@@ -44,10 +82,6 @@ const attributeStackStyle = computed(() => ({
|
||||
'--customer-attribute-font-size': attributeFontSize.value,
|
||||
}));
|
||||
|
||||
const getAttributeTestId = (viewKey: string) => {
|
||||
return `invoicing-period-customer-attribute-${props.customer.customer_number}-${viewKey}`;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -55,7 +89,7 @@ const getAttributeTestId = (viewKey: string) => {
|
||||
v-if="attributeCount > 0"
|
||||
class="customer-attribute-stack"
|
||||
:style="attributeStackStyle"
|
||||
:data-testid="`invoicing-period-customer-attributes-${customer.customer_number}`"
|
||||
:data-testid="stackTestId"
|
||||
>
|
||||
<ColorIndicator
|
||||
v-for="view_key in list_views_with_customer"
|
||||
|
||||
+6
-5
@@ -288,7 +288,9 @@ const syncPeriodRouteQuery = () => {
|
||||
lastSyncedRouteSignature = getPeriodRouteSignature(nextQuery);
|
||||
isSyncingRouteFromState = true;
|
||||
void router.replace({ query: nextQuery })
|
||||
.catch(() => {})
|
||||
.catch((error) => {
|
||||
console.warn("Failed to sync period route query", error);
|
||||
})
|
||||
.finally(() => {
|
||||
isSyncingRouteFromState = false;
|
||||
});
|
||||
@@ -317,7 +319,7 @@ const types = [
|
||||
description: 'Kunder med fastprisaftaler.',
|
||||
view: 'fixed_pricing',
|
||||
isAvailable: computed(() => {
|
||||
// Check if the current date range is an entire month
|
||||
// Fixed-pricing reconciliations are only valid for a complete billing month.
|
||||
return dates.computed.isEntireMonth.value;
|
||||
}),
|
||||
group: 'agreements',
|
||||
@@ -343,9 +345,8 @@ const types = [
|
||||
displayName: SessionUser.objects.vehicles.columns.wash_subscription.label,
|
||||
description: 'Kunder med aktive vaskeabonnementer.',
|
||||
view: 'vehicle_subscriptions',
|
||||
// dates.computed.isEntireMonth.value
|
||||
isAvailable: computed(() => {
|
||||
// Check if the current date range is an entire month
|
||||
// Vehicle subscriptions are only meaningful for a complete billing month.
|
||||
return dates.computed.isEntireMonth.value;
|
||||
}),
|
||||
group: 'agreements',
|
||||
@@ -360,7 +361,7 @@ const types = [
|
||||
},
|
||||
{
|
||||
name: 'self_wash',
|
||||
displayName: 'Selvvask',
|
||||
displayName: i18n.global.t('nav.self_wash'),
|
||||
description: 'Import og tilknytning af selvvaske.',
|
||||
view: 'self_wash',
|
||||
iconClass: 'fas fa-link',
|
||||
|
||||
+34
-7
@@ -299,6 +299,11 @@ const getCustomerFlagTabType = (customer: any): CustomerFlagTab => {
|
||||
return "none";
|
||||
};
|
||||
|
||||
const hasMultipleRedFlags = (customer: any): boolean => {
|
||||
const flagCounts = getCustomerActiveFlagCounts(customer);
|
||||
return Number(flagCounts?.manual ?? 0) >= 2;
|
||||
};
|
||||
|
||||
const toNonNegativeInteger = (value: any) => {
|
||||
const parsed = Number.parseInt(String(value ?? "0"), 10);
|
||||
return Number.isInteger(parsed) && parsed > 0 ? parsed : 0;
|
||||
@@ -1516,7 +1521,7 @@ const getTransactionQueryParameters = () => {
|
||||
</div>
|
||||
<div class="column is-narrow period-customer-card__state" v-else>
|
||||
<button
|
||||
v-if="tmpFilters.displayRequiresAction && customer.requires_action"
|
||||
v-if="tmpFilters.displayRequiresAction && customer.requires_action && !hasMultipleRedFlags(customer)"
|
||||
type="button"
|
||||
class="button is-small is-dark is-inverted"
|
||||
:class="{ 'is-loading': isCustomerPeriodActionLoading(customer) }"
|
||||
@@ -1529,6 +1534,17 @@ const getTransactionQueryParameters = () => {
|
||||
</span>
|
||||
<span>{{ SessionUser.objects.global.language.invoice_now }}</span>
|
||||
</button>
|
||||
<span
|
||||
v-else-if="tmpFilters.displayRequiresAction && customer.requires_action && hasMultipleRedFlags(customer)"
|
||||
class="tag is-danger is-light is-small"
|
||||
:data-testid="`invoicing-period-customer-multiple-red-flag-${customer.customer_number}`"
|
||||
:title="tr('card.multiple_red_flags_title', 'Flere røde flag — gennemgå kunden før fakturering.')"
|
||||
>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-flag"></i>
|
||||
</span>
|
||||
<span>{{ tr('card.multiple_red_flags', 'Gennemgå flag') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-narrow period-customer-card__settings">
|
||||
<ActionSettingsWheelButton
|
||||
@@ -1555,6 +1571,9 @@ const getTransactionQueryParameters = () => {
|
||||
<span class="period-review-detail__eyebrow">{{ tr('detail.selected_customer', 'Valgt kunde') }}</span>
|
||||
<h2>{{ selectedCustomer.customer_name }}</h2>
|
||||
<p>#{{ selectedCustomer.customer_number }}</p>
|
||||
<div class="period-review-detail__billing-types" :data-testid="`invoicing-period-review-detail-billing-types-${selectedCustomer.customer_number}`">
|
||||
<InvoicingBillingPeriodCustomerAttributes :customer="selectedCustomer" scope="review-detail" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="period-review-detail__navigation">
|
||||
<button type="button" class="button is-small is-light" :aria-label="tr('detail.previous', 'Forrige kunde til gennemgang')" @click="selectCustomerByOffset(-1)">
|
||||
@@ -1750,7 +1769,12 @@ const getTransactionQueryParameters = () => {
|
||||
.period-review-detail__header p { color: #6b7280; font-size: 0.78rem; margin: 0; }
|
||||
|
||||
.period-customer-row { min-width: 0; }
|
||||
.period-customer-card { border: 1px solid #dfe3e8 !important; border-radius: 8px; overflow: visible; }
|
||||
.period-customer-card {
|
||||
border: 1px solid #dfe3e8 !important;
|
||||
border-radius: 8px;
|
||||
min-height: 9rem;
|
||||
overflow: visible;
|
||||
}
|
||||
.period-customer-card--selected { border-color: #3273dc !important; box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.12); }
|
||||
.period-customer-card__row {
|
||||
align-items: center;
|
||||
@@ -1761,12 +1785,13 @@ const getTransactionQueryParameters = () => {
|
||||
"attributes attributes attributes"
|
||||
"activity state state";
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
margin: 0 !important;
|
||||
min-height: 68px;
|
||||
padding: 0.25rem;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
.period-customer-card__row > .column { min-width: 0; padding: 0.35rem; }
|
||||
.period-customer-card__identity { min-width: 0; overflow: hidden; }
|
||||
.period-customer-card__identity { min-width: 0; overflow: visible; }
|
||||
.period-customer-card__identity { grid-area: identity; }
|
||||
.period-customer-card__attributes { grid-area: attributes; justify-self: stretch; width: 100%; }
|
||||
.period-customer-card__activity { grid-area: activity; }
|
||||
@@ -1798,9 +1823,9 @@ const getTransactionQueryParameters = () => {
|
||||
}
|
||||
.period-customer-card__selector :deep(.icon-text > span:last-child) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.period-customer-review {
|
||||
@@ -1838,6 +1863,8 @@ const getTransactionQueryParameters = () => {
|
||||
}
|
||||
|
||||
.period-review-detail__header { align-items: start; display: flex; justify-content: space-between; }
|
||||
.period-review-detail__billing-types { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
|
||||
.period-review-detail__billing-types:empty { display: none; }
|
||||
.period-review-detail__eyebrow { color: #6b7280; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.period-review-detail__navigation { display: flex; gap: 0.35rem; }
|
||||
.period-review-detail__status { align-items: center; background: #f7f9fb; border-radius: 8px; display: flex; gap: 0.65rem; margin-top: 0.75rem; padding: 0.75rem; }
|
||||
|
||||
+4
-1
@@ -3,18 +3,21 @@ import XLVaskUsagePagination from "@/components/displays/pagination/models/Depar
|
||||
import { dates } from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/imports/InvoicingBillingPeriodImportDates.vue";
|
||||
import { computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import i18n from "@/i18n";
|
||||
|
||||
const route = useRoute();
|
||||
const highlightedUsageLogId = computed(() => {
|
||||
const parsedId = Number.parseInt(String(route.query.xlvaskUsageLogId || ""), 10);
|
||||
return Number.isInteger(parsedId) && parsedId > 0 ? parsedId : 0;
|
||||
});
|
||||
|
||||
const selfWashTitle = computed(() => i18n.global.t("nav.self_wash"));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section data-testid="invoicing-period-self-wash-view">
|
||||
<XLVaskUsagePagination
|
||||
title="Selvvask"
|
||||
:title="selfWashTitle"
|
||||
:initial-date-from="dates.computed.formattedStartDate.value"
|
||||
:initial-date-to="dates.computed.formattedEndDate.value"
|
||||
:inherit-period-filters="true"
|
||||
|
||||
@@ -2915,7 +2915,13 @@ test.describe("Invoicing period tab", () => {
|
||||
expect(fontSize, `customer attribute tag ${index + 1} font size`).toBeGreaterThanOrEqual(10);
|
||||
}
|
||||
|
||||
expect(Math.abs(multiCardBox.height - singleCardBox.height)).toBeLessThanOrEqual(3);
|
||||
// Customer cards are sized to their content (no fixed height) per the
|
||||
// "taller cards, no internal scroll" design change. Multi-attribute
|
||||
// customers naturally render slightly taller than single-attribute ones
|
||||
// when attribute chips wrap on narrow viewports. Tolerance widened from
|
||||
// 3px (fixed-height era) to 32px to accommodate that without forcing
|
||||
// uniform heights that would either crop content or reintroduce scroll.
|
||||
expect(Math.abs(multiCardBox.height - singleCardBox.height)).toBeLessThanOrEqual(32);
|
||||
expect(identityBox.x).toBeLessThan(settingsBox.x);
|
||||
expect(settingsBox.x + settingsBox.width).toBeLessThanOrEqual(multiCardBox.x + multiCardBox.width);
|
||||
expect(Math.abs(countBox.y - amountBox.y)).toBeLessThanOrEqual(2);
|
||||
|
||||
Reference in New Issue
Block a user