-
-
-
-
-
-
•
-
+
+
+
+
+
+
+
+
+
+
+
+
+ →
+
+
+
+
+
+
+
+
+
-
-
-
- →
-
-
-
-
-
+
-
-
+
+
+ Loading grouped items...
+
+
+ No items currently available in this group.
+
+
+
@@ -709,14 +743,28 @@ export function renderStockListPage() {
export function stockListPageData(store) {
return {
- state: createAsyncState(),
- viewMode: 'items',
+ state: {
+ ...createAsyncState(),
+ isRefreshing: false,
+ },
+ viewMode: 'grouped',
entries: [],
+ entriesVersion: 0,
+ itemsLoaded: false,
groupedEntries: [],
+ groupedVersion: 0,
groupedLoaded: false,
+ groupedHydrated: false,
+ groupedHydrating: false,
+ groupedPageSize: GROUPED_PAGE_SIZE,
+ groupedVisibleLimit: GROUPED_PAGE_SIZE,
+ openGroupedCards: {},
+ refreshActivityCount: 0,
locations: [],
+ locationsVersion: 0,
locationMap: {},
locationDescendants: {},
+ locationLineage: {},
editForms: {},
editErrors: {},
levelOptions: LEVEL_OPTIONS,
@@ -730,57 +778,325 @@ export function stockListPageData(store) {
expiration: [],
location: [],
},
+ memo: {
+ filteredEntriesSig: '',
+ filteredEntries: [],
+ filteredGroupedEntriesSig: '',
+ filteredGroupedEntries: [],
+ expirationCountsSig: '',
+ expirationCounts: {},
+ locationCountsSig: '',
+ locationCounts: {},
+ },
+ changeCursor: null,
+ changePollTimer: null,
+ routeChangeHandler: null,
+ isPollingChanges: false,
async init() {
if (!store.isConnected) {
return;
}
- await Promise.all([this.loadLocations(), this.loadEntries()]);
+
+ this.registerRouteCleanup();
+ await Promise.all([
+ this.loadLocations(),
+ this.loadGroupedEntries({ expanded: 0, resetVisible: true }),
+ ]);
+
+ await this.$nextTick();
+ this.hydrateGroupedEntriesInBackground().catch(() => {});
+ await this.primeChangeCursor();
+ this.startChangePolling();
+ },
+ registerRouteCleanup() {
+ if (this.routeChangeHandler) {
+ return;
+ }
+
+ this.routeChangeHandler = () => {
+ if (!this.isStockListRoute()) {
+ this.stopChangePolling();
+ window.removeEventListener('hashchange', this.routeChangeHandler);
+ this.routeChangeHandler = null;
+ }
+ };
+
+ window.addEventListener('hashchange', this.routeChangeHandler);
+ },
+ isStockListRoute() {
+ const route = (window.location.hash || '#/').replace(/^#/, '') || '/';
+ return route === '/stock';
+ },
+ async primeChangeCursor() {
+ try {
+ const payload = await listKitchenChanges(store, { limit: 1 });
+ this.changeCursor = payload.nextCursor || payload.since || this.changeCursor;
+ } catch {
+ this.changeCursor = this.changeCursor || null;
+ }
+ },
+ startChangePolling() {
+ if (this.changePollTimer) {
+ return;
+ }
+
+ this.changePollTimer = window.setInterval(() => {
+ this.pollKitchenChanges().catch(() => {});
+ }, CHANGE_POLL_INTERVAL_MS);
+ },
+ stopChangePolling() {
+ if (this.changePollTimer) {
+ window.clearInterval(this.changePollTimer);
+ this.changePollTimer = null;
+ }
+ },
+ async pollKitchenChanges() {
+ if (this.isPollingChanges || !store.isConnected || !this.isStockListRoute()) {
+ return;
+ }
+
+ this.isPollingChanges = true;
+
+ try {
+ const payload = await listKitchenChanges(store, {
+ since: this.changeCursor || undefined,
+ limit: 25,
+ });
+ this.changeCursor = payload.nextCursor || payload.since || this.changeCursor;
+
+ if (!payload.changes.length) {
+ return;
+ }
+
+ await this.refreshCurrentView({ background: true });
+ } finally {
+ this.isPollingChanges = false;
+ }
+ },
+ showInitialLoader() {
+ if (!this.state.isLoading) {
+ return false;
+ }
+
+ return this.viewMode === 'grouped' ? !this.groupedLoaded : !this.itemsLoaded;
+ },
+ beginBackgroundRefresh() {
+ this.refreshActivityCount += 1;
+ this.state.isRefreshing = true;
+ },
+ endBackgroundRefresh() {
+ this.refreshActivityCount = Math.max(0, this.refreshActivityCount - 1);
+ this.state.isRefreshing = this.refreshActivityCount > 0;
+ },
+ invalidateMemo() {
+ this.memo.filteredEntriesSig = '';
+ this.memo.filteredGroupedEntriesSig = '';
+ this.memo.expirationCountsSig = '';
+ this.memo.locationCountsSig = '';
+ },
+ indexEntry(entry) {
+ const indexed = { ...entry };
+ indexed._searchBlob = searchBlob(indexed, this.locationMap);
+ return indexed;
+ },
+ indexGroup(group) {
+ const indexedItems = Array.isArray(group.items)
+ ? group.items.map((item) => this.indexEntry(item))
+ : [];
+ const indexed = {
+ ...group,
+ items: indexedItems,
+ };
+ indexed._searchBlob = groupSearchBlob(indexed, this.locationMap);
+ return indexed;
+ },
+ reindexSearchData() {
+ if (this.entries.length) {
+ this.entries = this.entries.map((entry) => this.indexEntry(entry));
+ this.entriesVersion += 1;
+ }
+ if (this.groupedEntries.length) {
+ this.groupedEntries = this.groupedEntries.map((group) => this.indexGroup(group));
+ this.groupedVersion += 1;
+ }
+ this.invalidateMemo();
+ },
+ syncEditFormsFromEntries() {
+ this.editForms = Object.fromEntries(
+ this.entries.map((entry) => [
+ entry.id,
+ {
+ level: entry.level || 'plenty',
+ quantity: entry.quantity ?? '',
+ },
+ ]),
+ );
+ this.editErrors = {};
},
async switchView(mode) {
this.viewMode = mode;
- if (mode === 'grouped' && !this.groupedLoaded) {
- await this.loadGroupedEntries();
+ if (mode === 'grouped') {
+ if (!this.groupedLoaded) {
+ await this.loadGroupedEntries({ expanded: 0, resetVisible: true });
+ }
+ this.hydrateGroupedEntriesInBackground().catch(() => {});
+ return;
+ }
+
+ if (!this.itemsLoaded) {
+ await this.loadEntries();
}
},
- async refreshCurrentView() {
+ async refreshCurrentView({ background = false } = {}) {
+ const useBackground = background || (this.viewMode === 'grouped'
+ ? this.groupedLoaded
+ : this.itemsLoaded);
+
if (this.viewMode === 'grouped') {
- await this.loadGroupedEntries();
+ await this.loadGroupedEntries({ expanded: 0, background: useBackground });
+ this.hydrateGroupedEntriesInBackground({ force: true }).catch(() => {});
return;
}
- await this.loadEntries();
+ await this.loadEntries({ background: useBackground });
},
- async loadEntries() {
+ async loadEntries({ background = false } = {}) {
if (!store.isConnected) {
return;
}
- await runAsyncState(this.state, async () => {
+ const shouldBlock = !background && !this.itemsLoaded;
+ if (background) {
+ this.beginBackgroundRefresh();
+ } else if (shouldBlock) {
+ this.state.isLoading = true;
+ this.state.error = '';
+ }
+
+ try {
const loadedEntries = await listStockEntries(store);
- this.entries = sortEntries(loadedEntries);
- this.editForms = Object.fromEntries(
- this.entries.map((entry) => [
- entry.id,
- {
- level: entry.level || 'plenty',
- quantity: entry.quantity ?? '',
- },
- ]),
- );
- this.editErrors = {};
- }).catch(() => {});
+ this.entries = sortEntries(loadedEntries.map((entry) => this.indexEntry(entry)));
+ this.itemsLoaded = true;
+ this.entriesVersion += 1;
+ this.syncEditFormsFromEntries();
+ this.invalidateMemo();
+ } catch (error) {
+ if (!background) {
+ this.state.error = error.message || 'Could not load stock items.';
+ }
+ } finally {
+ if (background) {
+ this.endBackgroundRefresh();
+ } else if (shouldBlock) {
+ this.state.isLoading = false;
+ }
+ }
},
- async loadGroupedEntries() {
+ applyGroupedSummary(loadedGroups, { resetVisible = false } = {}) {
+ const existingById = new Map(this.groupedEntries.map((group) => [group.id, group]));
+ const nextGroups = loadedGroups.map((group) => {
+ const existing = existingById.get(group.id);
+ const preservedItems = Array.isArray(group.items) ? group.items : existing?.items || [];
+ return this.indexGroup({
+ ...existing,
+ ...group,
+ items: preservedItems,
+ });
+ });
+
+ this.groupedEntries = sortGroupedEntries(nextGroups);
+ this.groupedLoaded = true;
+ this.groupedHydrated = false;
+ this.groupedVersion += 1;
+ this.pruneOpenGroupedCards();
+ this.invalidateMemo();
+
+ if (resetVisible) {
+ this.resetGroupedVisibleLimit();
+ }
+ },
+ applyGroupedHydration(loadedGroups) {
+ const existingById = new Map(this.groupedEntries.map((group) => [group.id, group]));
+ const nextGroups = loadedGroups.map((group) => {
+ const existing = existingById.get(group.id);
+ const mergedItems = Array.isArray(group.items) ? group.items : existing?.items || [];
+ return this.indexGroup({
+ ...existing,
+ ...group,
+ items: mergedItems,
+ });
+ });
+
+ this.groupedEntries = sortGroupedEntries(nextGroups);
+ this.groupedLoaded = true;
+ this.groupedHydrated = true;
+ this.groupedVersion += 1;
+ this.pruneOpenGroupedCards();
+ this.invalidateMemo();
+ },
+ async loadGroupedEntries({ expanded = 1, background = false, resetVisible = false } = {}) {
if (!store.isConnected) {
return;
}
- await runAsyncState(this.state, async () => {
- const loadedGroups = await listGroupedStockEntries(store);
- this.groupedEntries = sortGroupedEntries(loadedGroups);
- this.groupedLoaded = true;
- }).catch(() => {});
+ const shouldBlock = !background && !this.groupedLoaded;
+ if (background) {
+ this.beginBackgroundRefresh();
+ } else if (shouldBlock) {
+ this.state.isLoading = true;
+ this.state.error = '';
+ }
+
+ try {
+ const loadedGroups = await listGroupedStockEntries(store, { expanded });
+ if (expanded === 0) {
+ this.applyGroupedSummary(loadedGroups, { resetVisible });
+ return;
+ }
+
+ this.applyGroupedHydration(loadedGroups);
+ } catch (error) {
+ if (!background) {
+ this.state.error = error.message || 'Could not load grouped stock.';
+ }
+ } finally {
+ if (background) {
+ this.endBackgroundRefresh();
+ } else if (shouldBlock) {
+ this.state.isLoading = false;
+ }
+ }
+ },
+ async hydrateGroupedEntriesInBackground({ force = false } = {}) {
+ if (!this.groupedLoaded || this.groupedHydrating) {
+ return;
+ }
+
+ if (this.groupedHydrated && !force) {
+ return;
+ }
+
+ this.groupedHydrating = true;
+ try {
+ await this.loadGroupedEntries({ expanded: 1, background: true });
+ } finally {
+ this.groupedHydrating = false;
+ }
+ },
+ async refreshLoadedViewsInBackground() {
+ const tasks = [];
+ if (this.itemsLoaded) {
+ tasks.push(this.loadEntries({ background: true }));
+ }
+ if (this.groupedLoaded) {
+ tasks.push(
+ this.loadGroupedEntries({ expanded: 0, background: true }).then(() =>
+ this.hydrateGroupedEntriesInBackground({ force: true }),
+ ),
+ );
+ }
+ await Promise.allSettled(tasks);
},
async loadLocations() {
if (!store.isConnected) {
@@ -793,6 +1109,9 @@ export function stockListPageData(store) {
this.locationMap = Object.fromEntries(
flat.map((location) => [location.uuid_b64, location.pathLabel]),
);
+ this.locationLineage = Object.fromEntries(
+ flat.map((location) => [location.uuid_b64, location.lineage_uuid_b64 || []]),
+ );
this.locationDescendants = Object.fromEntries(
flat.map((location) => [
location.uuid_b64,
@@ -804,15 +1123,53 @@ export function stockListPageData(store) {
} catch {
this.locations = [];
this.locationMap = {};
+ this.locationLineage = {};
this.locationDescendants = {};
+ } finally {
+ this.locationsVersion += 1;
+ this.reindexSearchData();
}
},
+ resetGroupedVisibleLimit() {
+ this.groupedVisibleLimit = this.groupedPageSize;
+ },
+ showMoreGroups() {
+ this.groupedVisibleLimit += this.groupedPageSize;
+ },
+ groupItemCount(group) {
+ if (Number.isFinite(group.items_count)) {
+ return group.items_count;
+ }
+ if (Number.isFinite(group.count)) {
+ return group.count;
+ }
+ return Array.isArray(group.items) ? group.items.length : 0;
+ },
+ groupDetailHref(group) {
+ if (group?.uuid_b64) {
+ return this.detailHref(group);
+ }
+ const firstItem = Array.isArray(group?.items) ? group.items[0] : null;
+ return firstItem?.uuid_b64 ? this.detailHref(firstItem) : '';
+ },
+ isGroupedCardOpen(groupId) {
+ return Boolean(this.openGroupedCards[String(groupId)]);
+ },
+ pruneOpenGroupedCards() {
+ const activeIds = new Set(this.groupedEntries.map((group) => String(group.id)));
+ this.openGroupedCards = Object.fromEntries(
+ Object.entries(this.openGroupedCards).filter(
+ ([groupId, isOpen]) => isOpen && activeIds.has(groupId),
+ ),
+ );
+ },
clearFilters() {
this.filters = {
search: '',
expiration: [],
location: [],
};
+ this.resetGroupedVisibleLimit();
},
setOverviewOpen(key, open) {
this.overviewOpen[key] = open;
@@ -852,30 +1209,36 @@ export function stockListPageData(store) {
return key === 'expiration' ? 'col-xl-5' : 'col-xl-7';
},
- expirationFilterSummary() {
- if (this.isAllExpirationSelected()) {
- return 'Show all';
- }
-
- if (!this.filters.expiration.length) {
- return 'No expiration states selected';
- }
-
- if (this.filters.expiration.length === 1) {
- return this.expirationLegend.find((state) => state.key === this.filters.expiration[0])?.label || '1 expiration state';
- }
-
- return `${this.filters.expiration.length} expiration states selected`;
- },
isAllExpirationSelected() {
- return this.filters.expiration.length === 0 || this.filters.expiration.length === EXPIRATION_KEYS.length;
+ return (
+ this.filters.expiration.length === 0
+ || this.filters.expiration.length === EXPIRATION_KEYS.length
+ );
+ },
+ effectiveExpirationFilters() {
+ if (this.isAllExpirationSelected()) {
+ return [];
+ }
+ return [...new Set(this.filters.expiration)];
+ },
+ effectiveLocationFilters() {
+ const unique = [...new Set(this.filters.location)];
+ if (unique.length === 0 || (this.locations.length > 0 && unique.length === this.locations.length)) {
+ return [];
+ }
+ return unique;
+ },
+ normalizedSearchTerm() {
+ return String(this.filters.search || '').trim().toLowerCase();
},
toggleAllExpirationFilters() {
this.filters.expiration = [];
+ this.resetGroupedVisibleLimit();
},
toggleExpirationOverviewFilter(key) {
if (this.isAllExpirationSelected()) {
this.filters.expiration = [key];
+ this.resetGroupedVisibleLimit();
return;
}
@@ -884,48 +1247,46 @@ export function stockListPageData(store) {
toggleExpirationFilter(key) {
if (this.filters.expiration.includes(key)) {
this.filters.expiration = this.filters.expiration.filter((value) => value !== key);
- return;
+ } else {
+ this.filters.expiration = [...this.filters.expiration, key];
}
-
- this.filters.expiration = [...this.filters.expiration, key];
+ this.resetGroupedVisibleLimit();
},
- locationFilterSummary() {
- if (this.isAllLocationsSelected()) {
- return 'All locations';
- }
+ isAllLocationsSelected() {
+ return (
+ this.filters.location.length === 0
+ || (this.locations.length > 0 && this.filters.location.length === this.locations.length)
+ );
+ },
+ toggleAllLocations() {
+ this.filters.location = [];
+ this.resetGroupedVisibleLimit();
+ },
+ toggleLocationFilter(uuid) {
+ const subtree = this.locationSubtree(uuid);
- if (!this.filters.location.length) {
- return 'No locations selected';
+ if (this.filters.location.includes(uuid)) {
+ this.filters.location = this.filters.location.filter((value) => !subtree.includes(value));
+ } else {
+ this.filters.location = [...new Set([...this.filters.location, ...subtree])];
}
-
- if (this.filters.location.length === 1) {
- return this.locationMap[this.filters.location[0]] || '1 location selected';
- }
-
- return `${this.filters.location.length} locations selected`;
+ this.resetGroupedVisibleLimit();
},
selectedLocationSummary() {
if (this.isAllLocationsSelected()) {
return '';
}
-
- if (!this.filters.location.length) {
- return 'No locations selected';
- }
-
return `${this.filters.location.length} selected`;
},
locationOverviewGroups() {
- const byParent = this.locations
+ return this.locations
.filter((location) => location.depth === 0)
.map((parent) => ({
parent,
- items: this.locations.filter((location) =>
- location.lineage_uuid_b64[0] === parent.uuid_b64,
+ items: this.locations.filter(
+ (location) => location.lineage_uuid_b64[0] === parent.uuid_b64,
),
}));
-
- return byParent;
},
balancedLocationOverviewColumns() {
const columns = [[], []];
@@ -940,77 +1301,93 @@ export function stockListPageData(store) {
return columns;
},
- isAllLocationsSelected() {
- return this.filters.location.length === 0 || (this.locations.length > 0 && this.filters.location.length === this.locations.length);
- },
- toggleAllLocations() {
- this.filters.location = [];
- },
- toggleLocationFilter(uuid) {
- const subtree = this.locationSubtree(uuid);
+ get filteredEntries() {
+ const searchTerm = this.normalizedSearchTerm();
+ const expirationFilters = this.effectiveExpirationFilters().slice().sort().join(',');
+ const locationFilters = this.effectiveLocationFilters().slice().sort().join(',');
+ const signature = [
+ this.entriesVersion,
+ this.locationsVersion,
+ searchTerm,
+ expirationFilters,
+ locationFilters,
+ ].join('|');
- if (this.filters.location.includes(uuid)) {
- this.filters.location = this.filters.location.filter((value) => !subtree.includes(value));
- return;
+ if (this.memo.filteredEntriesSig === signature) {
+ return this.memo.filteredEntries;
}
- this.filters.location = [...new Set([...this.filters.location, ...subtree])];
- },
- get filteredEntries() {
- return this.entries.filter((entry) => {
+ const activeExpirationFilters = this.effectiveExpirationFilters();
+ const activeLocationFilters = this.effectiveLocationFilters();
+ const filtered = this.entries.filter((entry) => {
+ if (searchTerm && !(entry._searchBlob || '').includes(searchTerm)) {
+ return false;
+ }
if (
- this.filters.search &&
- !searchBlob(entry, this.locationMap).includes(this.filters.search.toLowerCase())
+ activeExpirationFilters.length
+ && !activeExpirationFilters.includes(expirationInfo(entry).key)
) {
return false;
}
-
if (
- this.filters.expiration.length &&
- this.filters.expiration.length !== EXPIRATION_KEYS.length &&
- !this.filters.expiration.includes(expirationInfo(entry).key)
+ activeLocationFilters.length
+ && !this.locationMatchesAnyFilter(entry.location_initial_uuid_b64, activeLocationFilters)
) {
return false;
}
-
- if (
- this.filters.location.length &&
- this.filters.location.length !== this.locations.length &&
- !this.locationMatchesAnyFilter(entry.location_initial_uuid_b64, this.filters.location)
- ) {
- return false;
- }
-
return true;
});
+
+ this.memo.filteredEntriesSig = signature;
+ this.memo.filteredEntries = filtered;
+ return filtered;
},
get filteredGroupedEntries() {
- return this.groupedEntries.filter((group) => {
+ const searchTerm = this.normalizedSearchTerm();
+ const expirationFilters = this.effectiveExpirationFilters().slice().sort().join(',');
+ const locationFilters = this.effectiveLocationFilters().slice().sort().join(',');
+ const signature = [
+ this.groupedVersion,
+ this.locationsVersion,
+ searchTerm,
+ expirationFilters,
+ locationFilters,
+ ].join('|');
+
+ if (this.memo.filteredGroupedEntriesSig === signature) {
+ return this.memo.filteredGroupedEntries;
+ }
+
+ const activeExpirationFilters = this.effectiveExpirationFilters();
+ const activeLocationFilters = this.effectiveLocationFilters();
+ const filtered = this.groupedEntries.filter((group) => {
+ if (searchTerm && !(group._searchBlob || '').includes(searchTerm)) {
+ return false;
+ }
if (
- this.filters.search &&
- !groupSearchBlob(group, this.locationMap).includes(this.filters.search.toLowerCase())
+ activeExpirationFilters.length
+ && !activeExpirationFilters.includes(expirationInfo(group).key)
) {
return false;
}
-
if (
- this.filters.expiration.length &&
- this.filters.expiration.length !== EXPIRATION_KEYS.length &&
- !this.filters.expiration.includes(expirationInfo(group).key)
+ activeLocationFilters.length
+ && !this.groupMatchesLocationFilters(group, activeLocationFilters)
) {
return false;
}
-
- if (
- this.filters.location.length &&
- this.filters.location.length !== this.locations.length &&
- !this.groupMatchesLocationFilters(group, this.filters.location)
- ) {
- return false;
- }
-
return true;
});
+
+ this.memo.filteredGroupedEntriesSig = signature;
+ this.memo.filteredGroupedEntries = filtered;
+ return filtered;
+ },
+ get visibleGroupedEntries() {
+ return this.filteredGroupedEntries.slice(0, this.groupedVisibleLimit);
+ },
+ get hasMoreGroupedEntries() {
+ return this.filteredGroupedEntries.length > this.visibleGroupedEntries.length;
},
get visibleResultCount() {
return this.viewMode === 'grouped'
@@ -1033,7 +1410,7 @@ export function stockListPageData(store) {
return `expiration-soft-${expirationInfo(entry).key}`;
},
legendClass(key) {
- const hasActiveFilters = this.filters.expiration.length > 0 && !this.isAllExpirationSelected();
+ const hasActiveFilters = !this.isAllExpirationSelected();
return [
`legend-${key}`,
hasActiveFilters && this.isExpirationFilterActive(key) ? 'legend-card-active' : '',
@@ -1042,31 +1419,48 @@ export function stockListPageData(store) {
.filter(Boolean)
.join(' ');
},
- expirationCount(key) {
+ getExpirationCounts() {
+ const searchTerm = this.normalizedSearchTerm();
+ const locationFilters = this.effectiveLocationFilters().slice().sort().join(',');
+ const sourceVersion = this.viewMode === 'grouped' ? this.groupedVersion : this.entriesVersion;
+ const signature = [
+ this.viewMode,
+ sourceVersion,
+ this.locationsVersion,
+ searchTerm,
+ locationFilters,
+ ].join('|');
+
+ if (this.memo.expirationCountsSig === signature) {
+ return this.memo.expirationCounts;
+ }
+
+ const counts = Object.fromEntries(EXPIRATION_KEYS.map((key) => [key, 0]));
+ const activeLocationFilters = this.effectiveLocationFilters();
const source = this.viewMode === 'grouped' ? this.groupedEntries : this.entries;
- return source.filter((entry) => {
- if (
- this.filters.search &&
- !(this.viewMode === 'grouped'
- ? groupSearchBlob(entry, this.locationMap)
- : searchBlob(entry, this.locationMap)
- ).includes(this.filters.search.toLowerCase())
- ) {
- return false;
+ source.forEach((entry) => {
+ const blob = entry._searchBlob || '';
+ if (searchTerm && !blob.includes(searchTerm)) {
+ return;
}
- if (
- this.filters.location.length &&
- this.filters.location.length !== this.locations.length &&
- !(this.viewMode === 'grouped'
- ? this.groupMatchesLocationFilters(entry, this.filters.location)
- : this.locationMatchesAnyFilter(entry.location_initial_uuid_b64, this.filters.location))
- ) {
- return false;
+ const matchesLocation = this.viewMode === 'grouped'
+ ? this.groupMatchesLocationFilters(entry, activeLocationFilters)
+ : this.locationMatchesAnyFilter(entry.location_initial_uuid_b64, activeLocationFilters);
+ if (!matchesLocation) {
+ return;
}
- return expirationInfo(entry).key === key;
- }).length;
+ const key = expirationInfo(entry).key;
+ counts[key] += 1;
+ });
+
+ this.memo.expirationCountsSig = signature;
+ this.memo.expirationCounts = counts;
+ return counts;
+ },
+ expirationCount(key) {
+ return this.getExpirationCounts()[key] || 0;
},
shortId(entry) {
return entry.uuid_b64 ? entry.uuid_b64.slice(0, 10) : 'No id';
@@ -1080,13 +1474,14 @@ export function stockListPageData(store) {
toggleLocationOverviewFilter(uuid) {
if (this.isAllLocationsSelected()) {
this.filters.location = [...this.locationSubtree(uuid)];
+ this.resetGroupedVisibleLimit();
return;
}
this.toggleLocationFilter(uuid);
},
locationOverviewClass(location) {
- const hasActiveFilters = this.filters.location.length > 0 && !this.isAllLocationsSelected();
+ const hasActiveFilters = !this.isAllLocationsSelected();
return [
'location-overview',
`location-type-${location.type || 'unknown'}`,
@@ -1101,31 +1496,78 @@ export function stockListPageData(store) {
const offset = location.depth;
return `margin-left: ${offset}rem; width: calc(100% - ${offset}rem);`;
},
- locationCount(locationUuid) {
+ locationAncestors(locationUuid) {
+ if (!locationUuid) {
+ return [];
+ }
+
+ return this.locationLineage[locationUuid] || [locationUuid];
+ },
+ groupLocationAncestors(group) {
+ const allLocations = new Set();
+ if (group.location_initial_uuid_b64) {
+ allLocations.add(group.location_initial_uuid_b64);
+ }
+ (group.items || []).forEach((item) => {
+ if (item.location_initial_uuid_b64) {
+ allLocations.add(item.location_initial_uuid_b64);
+ }
+ });
+
+ const ancestors = new Set();
+ allLocations.forEach((locationUuid) => {
+ this.locationAncestors(locationUuid).forEach((ancestor) => ancestors.add(ancestor));
+ });
+ return [...ancestors];
+ },
+ getLocationCounts() {
+ const searchTerm = this.normalizedSearchTerm();
+ const expirationFilters = this.effectiveExpirationFilters().slice().sort().join(',');
+ const sourceVersion = this.viewMode === 'grouped' ? this.groupedVersion : this.entriesVersion;
+ const signature = [
+ this.viewMode,
+ sourceVersion,
+ this.locationsVersion,
+ searchTerm,
+ expirationFilters,
+ ].join('|');
+
+ if (this.memo.locationCountsSig === signature) {
+ return this.memo.locationCounts;
+ }
+
+ const counts = Object.fromEntries(this.locations.map((location) => [location.uuid_b64, 0]));
+ const activeExpirationFilters = this.effectiveExpirationFilters();
const source = this.viewMode === 'grouped' ? this.groupedEntries : this.entries;
- return source.filter((entry) => {
+
+ source.forEach((entry) => {
+ const blob = entry._searchBlob || '';
+ if (searchTerm && !blob.includes(searchTerm)) {
+ return;
+ }
if (
- this.filters.search &&
- !(this.viewMode === 'grouped'
- ? groupSearchBlob(entry, this.locationMap)
- : searchBlob(entry, this.locationMap)
- ).includes(this.filters.search.toLowerCase())
+ activeExpirationFilters.length
+ && !activeExpirationFilters.includes(expirationInfo(entry).key)
) {
- return false;
+ return;
}
- if (
- this.filters.expiration.length &&
- this.filters.expiration.length !== EXPIRATION_KEYS.length &&
- !this.filters.expiration.includes(expirationInfo(entry).key)
- ) {
- return false;
- }
+ const ancestors = this.viewMode === 'grouped'
+ ? this.groupLocationAncestors(entry)
+ : this.locationAncestors(entry.location_initial_uuid_b64);
+ ancestors.forEach((ancestorUuid) => {
+ if (counts[ancestorUuid] !== undefined) {
+ counts[ancestorUuid] += 1;
+ }
+ });
+ });
- return this.viewMode === 'grouped'
- ? this.groupMatchesLocationFilter(entry, locationUuid)
- : this.locationMatchesFilter(entry.location_initial_uuid_b64, locationUuid);
- }).length;
+ this.memo.locationCountsSig = signature;
+ this.memo.locationCounts = counts;
+ return counts;
+ },
+ locationCount(locationUuid) {
+ return this.getLocationCounts()[locationUuid] || 0;
},
locationMatchesFilter(entryLocationUuid, selectedLocationUuid) {
if (!selectedLocationUuid) {
@@ -1148,6 +1590,10 @@ export function stockListPageData(store) {
);
},
groupMatchesLocationFilter(group, selectedLocationUuid) {
+ if (!selectedLocationUuid) {
+ return true;
+ }
+
if (this.locationMatchesFilter(group.location_initial_uuid_b64, selectedLocationUuid)) {
return true;
}
@@ -1174,10 +1620,27 @@ export function stockListPageData(store) {
}
details.open = false;
+ if (details.dataset?.groupId) {
+ this.openGroupedCards = {
+ ...this.openGroupedCards,
+ [String(details.dataset.groupId)]: false,
+ };
+ }
},
handleGroupedToggle(event) {
const details = event.target;
- if (!(details instanceof HTMLDetailsElement) || details.open) {
+ if (!(details instanceof HTMLDetailsElement)) {
+ return;
+ }
+
+ if (details.dataset?.groupId) {
+ this.openGroupedCards = {
+ ...this.openGroupedCards,
+ [String(details.dataset.groupId)]: details.open,
+ };
+ }
+
+ if (details.open) {
return;
}
@@ -1208,7 +1671,7 @@ export function stockListPageData(store) {
return entry.uom_symbol ? `Measured in ${entry.uom_symbol}` : 'Measured stock';
},
formatDate,
- async updateBinary(entry, level) {
+ async updateBinary(entry) {
await this.useEntry(entry);
},
async saveLevel(entry) {
@@ -1218,9 +1681,13 @@ export function stockListPageData(store) {
return;
}
- await this.saveEntryUpdate(entry, {
- level,
- }, { level });
+ await this.saveEntryUpdate(
+ entry,
+ {
+ level,
+ },
+ { level },
+ );
},
async saveQuantity(entry) {
const quantity = Number(this.editForms[entry.id]?.quantity);
@@ -1229,9 +1696,13 @@ export function stockListPageData(store) {
return;
}
- await this.saveEntryUpdate(entry, {
- quantity,
- }, { quantity });
+ await this.saveEntryUpdate(
+ entry,
+ {
+ quantity,
+ },
+ { quantity },
+ );
},
async markGone(entry) {
await this.useEntry(entry);
@@ -1243,7 +1714,7 @@ export function stockListPageData(store) {
const result = await useStockItem(store, item.uuid_b64);
const alreadyGone = result.status === 'already_gone';
this.removeGroupedItem(group.id, item.id);
- this.entries = this.entries.filter((candidate) => candidate.id !== item.id);
+ this.removeEntryLocally(item.id);
delete this.editForms[item.id];
delete this.editErrors[item.id];
store.addAlert({
@@ -1252,6 +1723,7 @@ export function stockListPageData(store) {
? `${item.name} was already out of stock and removed from the group.`
: `${item.name} was marked gone and removed from the group.`,
});
+ this.refreshLoadedViewsInBackground().catch(() => {});
} catch (error) {
this.editErrors[item.id] = error.message || 'Mark gone failed.';
}
@@ -1266,6 +1738,7 @@ export function stockListPageData(store) {
type: 'success',
message: `${entry.name} updated successfully.`,
});
+ this.refreshLoadedViewsInBackground().catch(() => {});
} catch (error) {
this.editErrors[entry.id] = error.message || 'Update failed.';
}
@@ -1275,47 +1748,66 @@ export function stockListPageData(store) {
try {
const result = await useStockItem(store, entry.uuid_b64);
- this.entries = this.entries.filter((candidate) => candidate.id !== entry.id);
+ const alreadyGone = result.status === 'already_gone';
+ this.removeEntryLocally(entry.id);
delete this.editForms[entry.id];
delete this.editErrors[entry.id];
- const alreadyGone = result.status === 'already_gone';
store.addAlert({
type: alreadyGone ? 'info' : 'success',
message: alreadyGone
? `${entry.name} was already out of stock and removed from the list.`
: `${entry.name} was marked gone and removed from the list.`,
});
+ this.refreshLoadedViewsInBackground().catch(() => {});
} catch (error) {
this.editErrors[entry.id] = error.message || 'Mark gone failed.';
}
},
+ removeEntryLocally(entryId) {
+ if (!this.entries.length) {
+ return;
+ }
+
+ this.entries = this.entries.filter((entry) => entry.id !== entryId);
+ this.entriesVersion += 1;
+ this.invalidateMemo();
+ },
replaceEntry(entryId, nextEntry) {
this.entries = sortEntries(
- this.entries.map((entry) => (entry.id === entryId ? nextEntry : entry)),
+ this.entries.map((entry) =>
+ entry.id === entryId ? this.indexEntry(nextEntry) : entry,
+ ),
);
+ this.entriesVersion += 1;
+ this.invalidateMemo();
this.editForms[entryId] = {
level: nextEntry.level || 'plenty',
quantity: nextEntry.quantity ?? '',
};
},
removeGroupedItem(groupId, itemId) {
- this.groupedEntries = this.groupedEntries
- .map((group) => {
- if (group.id !== groupId) {
- return group;
- }
+ this.groupedEntries = sortGroupedEntries(
+ this.groupedEntries
+ .map((group) => {
+ if (group.id !== groupId) {
+ return group;
+ }
- const nextItems = (group.items || []).filter((candidate) => candidate.id !== itemId);
- if (!nextItems.length) {
- return null;
- }
+ const nextItems = (group.items || []).filter((candidate) => candidate.id !== itemId);
+ if (!nextItems.length) {
+ return null;
+ }
- return {
- ...group,
- items: nextItems,
- };
- })
- .filter(Boolean);
+ return this.indexGroup({
+ ...group,
+ items: nextItems,
+ });
+ })
+ .filter(Boolean),
+ );
+ this.groupedVersion += 1;
+ this.pruneOpenGroupedCards();
+ this.invalidateMemo();
},
};
}
diff --git a/src/styles/app.css b/src/styles/app.css
index c4048e1..5ae03ea 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -315,9 +315,63 @@ body {
}
.stock-view-switch {
- display: inline-flex;
- flex-wrap: wrap;
- gap: 0.5rem;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.65rem;
+}
+
+.stock-view-switch-wrap {
+ min-width: min(100%, 38rem);
+}
+
+.stock-view-tab {
+ display: grid;
+ align-content: start;
+ gap: 0.2rem;
+ text-align: left;
+ border: 1px solid var(--lonc-border);
+ border-radius: 0.9rem;
+ background: rgba(255, 255, 255, 0.66);
+ color: inherit;
+ padding: 0.65rem 0.85rem;
+ transition:
+ border-color 160ms ease,
+ box-shadow 160ms ease,
+ background-color 160ms ease,
+ transform 160ms ease;
+}
+
+.stock-view-tab:hover {
+ transform: translateY(-1px);
+ border-color: rgba(31, 75, 153, 0.24);
+ box-shadow: 0 8px 16px rgba(24, 42, 79, 0.08);
+}
+
+.stock-view-tab:focus-visible {
+ outline: 2px solid rgba(31, 75, 153, 0.4);
+ outline-offset: 2px;
+}
+
+.stock-view-tab-active {
+ border-color: rgba(31, 75, 153, 0.42);
+ background: rgba(31, 75, 153, 0.1);
+ box-shadow: inset 0 0 0 1px rgba(31, 75, 153, 0.18);
+}
+
+.stock-view-tab-title {
+ font-weight: 700;
+ font-size: 0.95rem;
+}
+
+.stock-view-tab-subtitle {
+ font-size: 0.78rem;
+ color: var(--lonc-muted);
+}
+
+@media (max-width: 767.98px) {
+ .stock-view-switch {
+ grid-template-columns: 1fr;
+ }
}
.overview-row-single-open > [class*='col-'] {
@@ -598,6 +652,28 @@ button.legend-card:focus-visible {
.grouped-stock-summary-meta {
align-items: center;
+ row-gap: 0.35rem;
+}
+
+.grouped-stock-secondary-details {
+ border-top: 1px dashed rgba(31, 39, 64, 0.14);
+ padding-top: 0.75rem;
+}
+
+.grouped-stock-secondary-toggle {
+ border-radius: 0.85rem;
+ border: 1px solid var(--lonc-border);
+ padding: 0.5rem 0.75rem;
+ background: rgba(255, 255, 255, 0.66);
+}
+
+.grouped-stock-secondary-toggle > summary {
+ list-style: none;
+ cursor: pointer;
+}
+
+.grouped-stock-secondary-toggle > summary::-webkit-details-marker {
+ display: none;
}
.grouped-stock-toggle-label {
diff --git a/tests/api/stock.test.js b/tests/api/stock.test.js
index 3ffa1bd..2cd477d 100644
--- a/tests/api/stock.test.js
+++ b/tests/api/stock.test.js
@@ -15,6 +15,8 @@ vi.mock('../../src/api/client.js', () => ({
const {
applyItemUpsert,
+ listGroupedStockEntries,
+ listStockEntries,
lookupItemByIdentifier,
lookupItemDetails,
listKitchenChanges,
@@ -28,6 +30,51 @@ describe('api/stock', () => {
apiRequestMock.mockReset();
});
+ it('listStockEntries forwards optional query filters', async () => {
+ apiRequestMock.mockResolvedValueOnce([]);
+
+ await listStockEntries(
+ { config: { database: 'db' } },
+ { searchName: 'Milk', limit: 20, offset: 40, cursor: 'cursor-1' },
+ );
+
+ expect(apiRequestMock).toHaveBeenCalledWith(
+ { config: { database: 'db' } },
+ 'kitchen/items',
+ {
+ query: {
+ search_name: 'Milk',
+ limit: 20,
+ offset: 40,
+ cursor: 'cursor-1',
+ },
+ },
+ );
+ });
+
+ it('listGroupedStockEntries defaults to expanded=1 and forwards options', async () => {
+ apiRequestMock.mockResolvedValueOnce([]);
+
+ await listGroupedStockEntries(
+ { config: { database: 'db' } },
+ { expanded: 0, searchName: 'Rice', limit: 10, offset: 0, cursor: 'cursor-2' },
+ );
+
+ expect(apiRequestMock).toHaveBeenCalledWith(
+ { config: { database: 'db' } },
+ 'kitchen/items/grouped',
+ {
+ query: {
+ expanded: 0,
+ search_name: 'Rice',
+ limit: 10,
+ offset: 0,
+ cursor: 'cursor-2',
+ },
+ },
+ );
+ });
+
it('listKitchenChanges returns normalized changes payload', async () => {
apiRequestMock.mockResolvedValueOnce({
since: 'cursor-1',
diff --git a/tests/features/stock/mark-gone.test.js b/tests/features/stock/mark-gone.test.js
index 2412e24..531bce2 100644
--- a/tests/features/stock/mark-gone.test.js
+++ b/tests/features/stock/mark-gone.test.js
@@ -70,4 +70,59 @@ describe('stock mark-gone behavior', () => {
message: 'Flour was marked gone and removed from the list.',
});
});
+
+ it('stock list grouped markGone removes item from grouped and flat collections', async () => {
+ useStockItemMock.mockResolvedValueOnce({ status: 'used' });
+ const addAlert = vi.fn();
+ const data = stockListPageData({ addAlert, isConnected: false });
+
+ data.groupedEntries = [
+ {
+ id: 10,
+ uuid_b64: 'group-10',
+ name: 'Beans',
+ stock_type: 'measured',
+ location_initial_uuid_b64: null,
+ date: '2026-04-12',
+ expire_date: '2026-04-20',
+ items: [
+ {
+ id: 11,
+ uuid_b64: 'item-11',
+ name: 'Beans',
+ stock_type: 'measured',
+ quantity: 1,
+ location_initial_uuid_b64: null,
+ date: '2026-04-12',
+ expire_date: '2026-04-20',
+ },
+ ],
+ },
+ ].map((group) => data.indexGroup(group));
+ data.entries = [
+ data.indexEntry({
+ id: 11,
+ uuid_b64: 'item-11',
+ name: 'Beans',
+ stock_type: 'measured',
+ quantity: 1,
+ location_initial_uuid_b64: null,
+ date: '2026-04-12',
+ expire_date: '2026-04-20',
+ }),
+ ];
+ data.entriesVersion = 1;
+ data.groupedVersion = 1;
+ data.editForms = { 11: { level: 'plenty', quantity: 1 } };
+ data.editErrors = {};
+
+ await data.markGoneFromGroup(data.groupedEntries[0].items[0], data.groupedEntries[0]);
+
+ expect(data.entries).toEqual([]);
+ expect(data.groupedEntries).toEqual([]);
+ expect(addAlert).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'Beans was marked gone and removed from the group.',
+ });
+ });
});
diff --git a/tests/features/stock/stock-list-page-grouped.test.js b/tests/features/stock/stock-list-page-grouped.test.js
new file mode 100644
index 0000000..826afc2
--- /dev/null
+++ b/tests/features/stock/stock-list-page-grouped.test.js
@@ -0,0 +1,257 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const listStockEntriesMock = vi.fn();
+const listGroupedStockEntriesMock = vi.fn();
+const listKitchenChangesMock = vi.fn();
+const updateStockItemMock = vi.fn();
+const useStockItemMock = vi.fn();
+const fetchLocationsMock = vi.fn();
+
+vi.mock('../../../src/api/stock.js', () => ({
+ listStockEntries: (...args) => listStockEntriesMock(...args),
+ listGroupedStockEntries: (...args) => listGroupedStockEntriesMock(...args),
+ listKitchenChanges: (...args) => listKitchenChangesMock(...args),
+ updateStockItem: (...args) => updateStockItemMock(...args),
+ useStockItem: (...args) => useStockItemMock(...args),
+}));
+
+vi.mock('../../../src/api/locations.js', () => ({
+ fetchLocations: (...args) => fetchLocationsMock(...args),
+}));
+
+const { stockListPageData } = await import('../../../src/features/stock/stock-list-page.js');
+
+function createGroupedSummary() {
+ return [
+ {
+ id: 10,
+ uuid_b64: 'group-10',
+ name: 'Rice',
+ description: 'Basmati',
+ stock_type: 'measured',
+ level: 'good',
+ quantity: 1,
+ uom_symbol: 'kg',
+ location_initial_uuid_b64: 'loc-root',
+ date: '2026-04-10',
+ expire_date: '2026-04-25',
+ first_expire_date: '2026-04-25',
+ first_production_date: '2026-04-10',
+ items_count: 1,
+ items: [],
+ },
+ ];
+}
+
+function createGroupedExpanded() {
+ return [
+ {
+ ...createGroupedSummary()[0],
+ items: [
+ {
+ id: 100,
+ uuid_b64: 'item-100',
+ name: 'Rice',
+ description: 'Open bag',
+ stock_type: 'measured',
+ level: 'good',
+ quantity: 1,
+ uom_symbol: 'kg',
+ location_initial_uuid_b64: 'loc-root',
+ date: '2026-04-10',
+ expire_date: '2026-04-25',
+ expire_in: 13,
+ },
+ ],
+ },
+ ];
+}
+
+function createWindowMock() {
+ const intervals = new Map();
+ let nextId = 1;
+
+ return {
+ location: { hash: '#/stock' },
+ setInterval: vi.fn((fn) => {
+ const id = nextId;
+ nextId += 1;
+ intervals.set(id, fn);
+ return id;
+ }),
+ clearInterval: vi.fn((id) => {
+ intervals.delete(id);
+ }),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ matchMedia: vi.fn(() => ({ matches: false })),
+ __intervals: intervals,
+ };
+}
+
+describe('stock list grouped-first behavior', () => {
+ beforeEach(() => {
+ listStockEntriesMock.mockReset();
+ listGroupedStockEntriesMock.mockReset();
+ listKitchenChangesMock.mockReset();
+ updateStockItemMock.mockReset();
+ useStockItemMock.mockReset();
+ fetchLocationsMock.mockReset();
+
+ globalThis.window = createWindowMock();
+ globalThis.requestAnimationFrame = (callback) => callback();
+ globalThis.HTMLDetailsElement = class MockDetailsElement {};
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ delete globalThis.window;
+ delete globalThis.requestAnimationFrame;
+ delete globalThis.HTMLDetailsElement;
+ });
+
+ it('defaults to grouped mode and loads grouped summary before lazy item list', async () => {
+ listGroupedStockEntriesMock
+ .mockResolvedValueOnce(createGroupedSummary())
+ .mockResolvedValueOnce(createGroupedExpanded());
+ listStockEntriesMock.mockResolvedValueOnce([]);
+ listKitchenChangesMock.mockResolvedValue({ since: null, nextCursor: null, changes: [] });
+ fetchLocationsMock.mockResolvedValue({ flat: [], tree: [] });
+
+ const store = { isConnected: true, addAlert: vi.fn() };
+ const data = stockListPageData(store);
+ data.$nextTick = vi.fn(async () => {});
+
+ await data.init();
+
+ expect(data.viewMode).toBe('grouped');
+ expect(listGroupedStockEntriesMock).toHaveBeenNthCalledWith(1, store, { expanded: 0 });
+ expect(listStockEntriesMock).not.toHaveBeenCalled();
+
+ await Promise.resolve();
+
+ expect(listGroupedStockEntriesMock).toHaveBeenNthCalledWith(2, store, { expanded: 1 });
+
+ await data.switchView('items');
+ expect(listStockEntriesMock).toHaveBeenCalledTimes(1);
+
+ await data.switchView('grouped');
+ await data.switchView('items');
+ expect(listStockEntriesMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('hydrates grouped children in background and merges into existing groups', async () => {
+ listGroupedStockEntriesMock
+ .mockResolvedValueOnce(createGroupedSummary())
+ .mockResolvedValueOnce(createGroupedExpanded());
+
+ const data = stockListPageData({ isConnected: true, addAlert: vi.fn() });
+ await data.loadGroupedEntries({ expanded: 0, resetVisible: true });
+
+ expect(data.groupedEntries[0].items).toEqual([]);
+
+ await data.hydrateGroupedEntriesInBackground();
+
+ expect(data.groupedHydrated).toBe(true);
+ expect(data.groupedEntries[0].items).toHaveLength(1);
+ });
+
+ it('memoizes filtered results and invalidates when filters change', () => {
+ const data = stockListPageData({ isConnected: true, addAlert: vi.fn() });
+ data.entries = [
+ data.indexEntry({
+ id: 1,
+ uuid_b64: 'item-1',
+ name: 'Milk',
+ description: 'Fresh',
+ location_initial_uuid_b64: null,
+ stock_type: 'binary',
+ level: 'good',
+ }),
+ ];
+ data.entriesVersion = 1;
+
+ const first = data.filteredEntries;
+ const second = data.filteredEntries;
+
+ expect(second).toBe(first);
+
+ data.filters.search = 'milk';
+
+ const third = data.filteredEntries;
+ expect(third).not.toBe(first);
+ expect(third).toHaveLength(1);
+ });
+
+ it('keeps grouped data visible while background summary refresh is in progress', async () => {
+ let resolveRefresh;
+ const refreshPromise = new Promise((resolve) => {
+ resolveRefresh = resolve;
+ });
+
+ listGroupedStockEntriesMock.mockImplementationOnce(() => refreshPromise);
+
+ const data = stockListPageData({ isConnected: true, addAlert: vi.fn() });
+ data.groupedLoaded = true;
+ data.groupedEntries = createGroupedSummary().map((group) => data.indexGroup(group));
+
+ const pending = data.loadGroupedEntries({ expanded: 0, background: true });
+
+ expect(data.state.isRefreshing).toBe(true);
+ expect(data.groupedEntries).toHaveLength(1);
+
+ resolveRefresh(createGroupedSummary());
+ await pending;
+
+ expect(data.state.isRefreshing).toBe(false);
+ expect(data.groupedEntries).toHaveLength(1);
+ });
+
+ it('poll refreshes view only when new changes exist', async () => {
+ listKitchenChangesMock
+ .mockResolvedValueOnce({ since: 'a', nextCursor: 'b', changes: [] })
+ .mockResolvedValueOnce({
+ since: 'b',
+ nextCursor: 'c',
+ changes: [{ type: 'stock', action: 'use', timestamp: '2026-04-12T08:00:00Z' }],
+ });
+
+ const data = stockListPageData({ isConnected: true, addAlert: vi.fn() });
+ const refreshSpy = vi.fn(async () => {});
+ data.refreshCurrentView = refreshSpy;
+
+ await data.pollKitchenChanges();
+ expect(refreshSpy).not.toHaveBeenCalled();
+
+ await data.pollKitchenChanges();
+ expect(refreshSpy).toHaveBeenCalledTimes(1);
+ expect(refreshSpy).toHaveBeenCalledWith({ background: true });
+ });
+
+ it('tracks grouped card open state from details toggle events', () => {
+ const data = stockListPageData({ isConnected: true, addAlert: vi.fn() });
+
+ class MockDetails extends HTMLDetailsElement {
+ constructor() {
+ super();
+ this.open = true;
+ this.dataset = { groupId: '10' };
+ }
+
+ querySelector() {
+ return {
+ scrollIntoView: vi.fn(),
+ };
+ }
+ }
+
+ const details = new MockDetails();
+
+ data.handleGroupedToggle({ target: details });
+ expect(data.isGroupedCardOpen(10)).toBe(true);
+
+ details.open = false;
+ data.handleGroupedToggle({ target: details });
+ expect(data.isGroupedCardOpen(10)).toBe(false);
+ });
+});