torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance RevenueSection UI and streamline price loading logic

Browse Source 
- Updated the display of city prices in the RevenueSection component to include both city names and formatted price values, improving user experience.
- Removed unnecessary console logs from the loadPricesForAllProducts method to clean up the code and reduce clutter, while maintaining essential functionality.
- Simplified the getBetterPrices method by eliminating redundant logging, enhancing code clarity and performance.
This commit is contained in:
Torsten Schulz (local)
2025-12-03 16:30:10 +01:00
parent a51b8a1ff6
commit d6ea09b3e2
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/falukant/RevenueSection.vue
View File

@@ -32,7 +32,8 @@
<span v-for="city in getBetterPrices(product.id)" :key="city.regionId" <span v-for="city in getBetterPrices(product.id)" :key="city.regionId"
:class="['city-price', getCityPriceClass(city.branchType)]" :class="['city-price', getCityPriceClass(city.branchType)]"
:title="`${city.regionName}: ${formatPrice(city.price)}`"> :title="`${city.regionName}: ${formatPrice(city.price)}`">
{{ city.regionName }} <span class="city-name">{{ city.regionName }}</span>
<span class="city-price-value">({{ formatPrice(city.price) }})</span>
</span> </span>
</div> </div>
<span v-else class="no-better-prices">—</span> <span v-else class="no-better-prices">—</span>
@@ -113,19 +114,15 @@
} }
}, },
async loadPricesForAllProducts() { async loadPricesForAllProducts() {
console.log('[RevenueSection] loadPricesForAllProducts called, currentRegionId:', this.currentRegionId);
if (this.currentRegionId === null || this.currentRegionId === undefined) { if (this.currentRegionId === null || this.currentRegionId === undefined) {
console.log('[RevenueSection] currentRegionId is null/undefined, returning');
return; return;
} }
console.log('[RevenueSection] Loading prices for', this.products.length, 'products');
for (const product of this.products) { for (const product of this.products) {
if (this.loadingPrices.has(product.id)) continue; if (this.loadingPrices.has(product.id)) continue;
this.loadingPrices.add(product.id); this.loadingPrices.add(product.id);
try { try {
// Verwende den gerundeten Preis aus calculateProductRevenue (wie gewollt) // Verwende den gerundeten Preis aus calculateProductRevenue (wie gewollt)
const currentPrice = parseFloat(this.calculateProductRevenue(product).absolute); const currentPrice = parseFloat(this.calculateProductRevenue(product).absolute);
console.log(`[RevenueSection] Loading prices for product ${product.id} (${product.labelTr}), currentPrice: ${currentPrice}`);
const { data } = await apiClient.get('/api/falukant/products/prices-in-cities', { const { data } = await apiClient.get('/api/falukant/products/prices-in-cities', {
params: { params: {
@@ -134,14 +131,12 @@
currentRegionId: this.currentRegionId currentRegionId: this.currentRegionId
} }
}); });
console.log(`[RevenueSection] Received ${data?.length || 0} better prices for product ${product.id}:`, data);
// Speichere betterPrices in einem separaten Map, nicht auf dem product Objekt // Speichere betterPrices in einem separaten Map, nicht auf dem product Objekt
// In Vue 3 müssen wir ein neues Objekt erstellen, um die Reaktivität zu triggern // In Vue 3 müssen wir ein neues Objekt erstellen, um die Reaktivität zu triggern
this.betterPricesMap = { this.betterPricesMap = {
...this.betterPricesMap, ...this.betterPricesMap,
[product.id]: data || [] [product.id]: data || []
}; };
console.log(`[RevenueSection] Updated betterPricesMap for product ${product.id}:`, this.betterPricesMap[product.id]);
} catch (error) { } catch (error) {
console.error(`Error loading prices for product ${product.id}:`, error); console.error(`Error loading prices for product ${product.id}:`, error);
this.betterPricesMap = { this.betterPricesMap = {
@@ -152,12 +147,9 @@
this.loadingPrices.delete(product.id); this.loadingPrices.delete(product.id);
} }
} }
console.log('[RevenueSection] Finished loading prices, betterPricesMap:', this.betterPricesMap);
}, },
getBetterPrices(productId) { getBetterPrices(productId) {
const prices = this.betterPricesMap[productId] || []; return this.betterPricesMap[productId] || [];
console.log(`[RevenueSection] getBetterPrices(${productId}):`, prices, 'full map:', this.betterPricesMap);
return prices;
}, },
getCityPriceClass(branchType) { getCityPriceClass(branchType) {
if (branchType === 'store') return 'city-price-green'; if (branchType === 'store') return 'city-price-green';
@@ -214,6 +206,16 @@
border-radius: 3px; border-radius: 3px;
font-size: 0.85em; font-size: 0.85em;
cursor: help; cursor: help;
display: inline-flex;
align-items: center;
gap: 0.3em;
}
.city-name {
font-weight: 500;
}
.city-price-value {
font-size: 0.9em;
opacity: 0.9;
} }
.city-price-green { .city-price-green {
background-color: #90EE90; background-color: #90EE90;