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

Refactor feedback handling across components: Replace alert and confirm calls with centralized feedback functions for improved user experience. Update various components to utilize showError, showSuccess, and confirmAction for consistent messaging and confirmation dialogs. Enhance UI responsiveness and maintainability by streamlining feedback logic.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-03-19 16:18:51 +01:00
parent 2c58ef37c4
commit 1774d7df88
35 changed files with 1097 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/src/views/falukant/OverviewView.vue
View File

@@ -5,7 +5,7 @@
<div>
<span class="falukant-kicker">Falukant</span>
<h2>{{ $t('falukant.overview.title') }}</h2>
<p>Dein Stand in Wirtschaft, Familie und Besitz in einer verdichteten Uebersicht.</p>
<p>Dein Stand in Wirtschaft, Familie und Besitz in einer verdichteten Übersicht.</p>
</div>
</section>
@@ -27,7 +27,7 @@
<article class="summary-card surface-card">
<span class="summary-card__label">Niederlassungen</span>
<strong>{{ branchCount }}</strong>
<p>Direkter Zugriff auf deine wichtigsten Geschaeftsstandorte.</p>
<p>Direkter Zugriff auf deine wichtigsten Geschäftsstandorte.</p>
</article>
<article class="summary-card surface-card">
<span class="summary-card__label">Produktionen aktiv</span>
@@ -37,7 +37,7 @@
<article class="summary-card surface-card">
<span class="summary-card__label">Lagerpositionen</span>
<strong>{{ stockEntryCount }}</strong>
<p>Verdichteter Blick auf Warenbestand ueber alle Regionen.</p>
<p>Verdichteter Blick auf Warenbestand über alle Regionen.</p>
</article>
</section>
@@ -82,92 +82,76 @@
<!-- Normale Übersicht wenn Charakter vorhanden -->
<div v-if="falukantUser?.character" class="overviewcontainer">
<div>
<section class="overview-panel surface-card">
<h3>{{ $t('falukant.overview.metadata.title') }}</h3>
<table>
<tr>
<td>{{ $t('falukant.overview.metadata.name') }}</td>
<td>{{ falukantUser?.character?.definedFirstName?.name }} {{
falukantUser?.character?.definedLastName?.name }}</td>
</tr>
<tr>
<td>{{ $t('falukant.overview.metadata.nobleTitle') }}</td>
<td>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' +
falukantUser?.character?.nobleTitle?.labelTr) }}</td>
</tr>
<tr>
<td>{{ $t('falukant.overview.metadata.money') }}</td>
<td>
<div class="detail-list">
<div class="detail-list__item">
<span>{{ $t('falukant.overview.metadata.name') }}</span>
<strong>{{ falukantUser?.character?.definedFirstName?.name }} {{ falukantUser?.character?.definedLastName?.name }}</strong>
</div>
<div class="detail-list__item">
<span>{{ $t('falukant.overview.metadata.nobleTitle') }}</span>
<strong>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' + falukantUser?.character?.nobleTitle?.labelTr) }}</strong>
</div>
<div class="detail-list__item">
<span>{{ $t('falukant.overview.metadata.money') }}</span>
<strong>
{{ moneyValue != null
? moneyValue.toLocaleString(locale, { style: 'currency', currency: 'EUR' })
: '---' }}
</td>
</tr>
<tr>
<td>{{ $t('falukant.overview.metadata.age') }}</td>
<td>{{ falukantUser?.character?.age }}</td>
</tr>
<tr>
<td>{{ $t('falukant.overview.metadata.mainbranch') }}</td>
<td>{{ falukantUser?.mainBranchRegion?.name }}</td>
</tr>
</table>
</div>
<div>
</strong>
</div>
<div class="detail-list__item">
<span>{{ $t('falukant.overview.metadata.age') }}</span>
<strong>{{ falukantUser?.character?.age }}</strong>
</div>
<div class="detail-list__item">
<span>{{ $t('falukant.overview.metadata.mainbranch') }}</span>
<strong>{{ falukantUser?.mainBranchRegion?.name }}</strong>
</div>
</div>
</section>
<section class="overview-panel surface-card">
<h3>{{ $t('falukant.overview.productions.title') }}</h3>
<table v-if="productions.length > 0">
<thead>
<tr>
<th>{{ $t('falukant.branch.sale.region') }}</th>
<th>{{ $t('falukant.branch.production.product') }}</th>
<th>{{ $t('falukant.branch.production.quantity') }}</th>
<th>{{ $t('falukant.branch.production.ending') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(production, index) in productions" :key="index">
<td>{{ production.cityName }}</td>
<td>{{ $t(`falukant.product.${production.productName}`) }}</td>
<td>{{ production.quantity }}</td>
<td>{{ formatDate(production.endTimestamp) }}</td>
</tr>
</tbody>
</table>
<div v-if="productions.length > 0" class="overview-card-list">
<article v-for="(production, index) in productions" :key="index" class="overview-entry-card">
<strong>{{ $t(`falukant.product.${production.productName}`) }}</strong>
<div class="overview-entry-card__meta">
<span>{{ $t('falukant.branch.sale.region') }}: {{ production.cityName }}</span>
<span>{{ $t('falukant.branch.production.quantity') }}: {{ production.quantity }}</span>
<span>{{ $t('falukant.branch.production.ending') }}: {{ formatDate(production.endTimestamp) }}</span>
</div>
</article>
</div>
<p v-else>{{ $t('falukant.branch.production.noProductions') }}</p>
</div>
<div>
</section>
<section class="overview-panel surface-card">
<h3>{{ $t('falukant.overview.stock.title') }}</h3>
<table v-if="allStock.length > 0">
<thead>
<tr>
<th>{{ $t('falukant.branch.sale.region') }}</th>
<th>{{ $t('falukant.branch.sale.product') }}</th>
<th>{{ $t('falukant.branch.sale.quantity') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in allStock" :key="index">
<td>{{ item.regionName }}</td>
<td>{{ $t(`falukant.product.${item.productLabelTr}`) }}</td>
<td>{{ item.quantity }}</td>
</tr>
</tbody>
</table>
<div v-if="allStock.length > 0" class="overview-card-list">
<article v-for="(item, index) in allStock" :key="index" class="overview-entry-card">
<strong>{{ $t(`falukant.product.${item.productLabelTr}`) }}</strong>
<div class="overview-entry-card__meta">
<span>{{ $t('falukant.branch.sale.region') }}: {{ item.regionName }}</span>
<span>{{ $t('falukant.branch.sale.quantity') }}: {{ item.quantity }}</span>
</div>
</article>
</div>
<p v-else>{{ $t('falukant.branch.sale.noInventory') }}</p>
</div>
<div>
</section>
<section class="overview-panel surface-card">
<h3>{{ $t('falukant.overview.branches.title') }}</h3>
<table>
<tr v-for="branch in falukantUser?.branches" :key="branch.id">
<td>
<span @click="openBranch(branch.id)" class="link">{{ branch.region.name }}</span>
</td>
<td>
{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}
</td>
</tr>
</table>
</div>
<div class="overview-card-list">
<article v-for="branch in falukantUser?.branches" :key="branch.id" class="overview-entry-card overview-entry-card--action">
<div>
<strong>{{ branch.region.name }}</strong>
<div class="overview-entry-card__meta">
<span>{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}</span>
</div>
</div>
<button type="button" class="button-secondary" @click="openBranch(branch.id)">Öffnen</button>
</article>
</div>
</section>
</div>
</div>
</template>
@@ -287,7 +271,7 @@ export default {
return [
{
kicker: 'Routine',
title: 'Niederlassung oeffnen',
title: 'Niederlassung öffnen',
description: 'Die schnellste Route zu Produktion, Lager, Verkauf und Transport.',
cta: 'Zu den Betrieben',
route: 'BranchView',
@@ -303,8 +287,8 @@ export default {
{
kicker: 'Charakter',
title: 'Familie und Nachfolge',
description: 'Wichtige persoenliche Entscheidungen und Haushaltsstatus gesammelt.',
cta: 'Familie oeffnen',
description: 'Wichtige persönliche Entscheidungen und Haushaltsstatus gesammelt.',
cta: 'Familie öffnen',
route: 'FalukantFamily',
secondary: true,
},
@@ -499,7 +483,7 @@ export default {
await this.fetchAllStock();
await this.fetchProductions();
}
showSuccess(this, 'Erbe wurde uebernommen.');
showSuccess(this, 'Erbe wurde übernommen.');
} catch (error) {
console.error('Error selecting heir:', error);
showError(this, this.$t('falukant.overview.heirSelection.error'));
@@ -597,12 +581,54 @@ export default {
gap: 12px;
}
.overviewcontainer>div {
.overview-panel {
padding: 18px;
}
.detail-list,
.overview-card-list {
display: grid;
gap: 12px;
}
.detail-list__item,
.overview-entry-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--color-border);
padding: 16px;
border-radius: var(--radius-lg);
background: rgba(255, 253, 249, 0.82);
box-shadow: var(--shadow-soft);
background: rgba(255, 255, 255, 0.66);
}
.detail-list__item {
flex-direction: column;
align-items: flex-start;
}
.detail-list__item span,
.overview-entry-card__meta {
color: var(--color-text-secondary);
}
.overview-entry-card {
align-items: flex-start;
flex-direction: column;
}
.overview-entry-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 6px;
font-size: 0.9rem;
}
.overview-entry-card--action {
flex-direction: row;
align-items: center;
}
.imagecontainer {