Refactor navigation and enhance director information display
- Removed the directors section from the navigation menu for a cleaner interface. - Updated the FalukantService to include additional attributes for directors, such as knowledges and region. - Enhanced the DirectorInfo component to display detailed information, including knowledge and income management features. - Implemented tab navigation in BranchView for better organization of director, inventory, production, and storage sections. - Updated localization files to reflect changes in navigation and tab labels.
This commit is contained in:
Torsten Schulz (local)
@@ -1,48 +1,119 @@
|
||||
<template>
|
||||
<div class="director-info">
|
||||
<h3>{{ $t('falukant.branch.director.title') }}</h3>
|
||||
<div v-if="!director || director === null">
|
||||
<button @click="openNewDirectorDialog">{{ $t('falukant.branch.director.actions.new') }}</button>
|
||||
<button @click="openNewDirectorDialog">
|
||||
{{ $t('falukant.branch.director.actions.new') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="director-info-container">
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ $t('falukant.branch.director.name') }}</td>
|
||||
<td>
|
||||
{{ $t('falukant.titles.' + director.character.gender + '.' + director.character.title) }}
|
||||
{{ director.character.name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('falukant.branch.director.salary') }}</td>
|
||||
<td>{{ director.income }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('falukant.branch.director.satisfaction') }}</td>
|
||||
<td>{{ director.satisfaction }} %</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- Linke Seite: Stammdaten & Wissen (aus /falukant/directors) -->
|
||||
<div class="director-main">
|
||||
<h3 class="director-name">
|
||||
{{ $t('falukant.titles.' + director.character.gender + '.' + director.character.nobleTitle.labelTr) }}
|
||||
{{ director.character.definedFirstName.name }} {{ director.character.definedLastName.name }}
|
||||
</h3>
|
||||
<p class="director-meta">
|
||||
{{ $t('falukant.director.age') }}:
|
||||
{{ director.character.age }}
|
||||
<span v-if="director.region"> — {{ director.region }}</span>
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="director.character.knowledges && director.character.knowledges.length"
|
||||
class="knowledge-panel"
|
||||
>
|
||||
<h4>{{ $t('falukant.director.knowledge.title') }}</h4>
|
||||
<div class="table-container">
|
||||
<table class="knowledge-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('falukant.director.product') }}</th>
|
||||
<th>{{ $t('falukant.director.knowledge.knowledge') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in director.character.knowledges"
|
||||
:key="item.productId"
|
||||
>
|
||||
<td>{{ $t(`falukant.product.${item.productType.labelTr}`) }}</td>
|
||||
<td>{{ item.knowledge }} %</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><button @click="fireDirector">{{ $t('falukant.branch.director.fire') }}</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button @click="teachDirector">{{ $t('falukant.branch.director.teach') }}</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<input type="checkbox" v-model="director.mayProduce"
|
||||
@change="saveSetting('mayProduce', director.mayProduce)">
|
||||
{{ $t('falukant.branch.director.produce') }}
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Ähnliche Checkboxen für maySell und mayStartTransport -->
|
||||
</table>
|
||||
|
||||
<!-- Rechte Seite: Aktionen, Einkommen, Rechte -->
|
||||
<div class="director-actions">
|
||||
<div class="field">
|
||||
<label>
|
||||
{{ $t('falukant.branch.director.satisfaction') }}:
|
||||
<span>{{ director.satisfaction }} %</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>
|
||||
{{ $t('falukant.branch.director.income') }}:
|
||||
<input type="number" v-model.number="editIncome" />
|
||||
</label>
|
||||
<span
|
||||
v-if="director.wishedIncome != null"
|
||||
class="link"
|
||||
@click="setWishedIncome"
|
||||
>
|
||||
({{ $t('falukant.director.wishedIncome') }}:
|
||||
{{ director.wishedIncome }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<button @click="updateDirector">
|
||||
{{ $t('falukant.director.updateButton') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="field toggles">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="director.mayProduce"
|
||||
@change="saveSetting('mayProduce', director.mayProduce)"
|
||||
/>
|
||||
{{ $t('falukant.branch.director.produce') }}
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="director.maySell"
|
||||
@change="saveSetting('maySell', director.maySell)"
|
||||
/>
|
||||
{{ $t('falukant.branch.director.sell') }}
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="director.mayStartTransport"
|
||||
@change="saveSetting('mayStartTransport', director.mayStartTransport)"
|
||||
/>
|
||||
{{ $t('falukant.branch.director.starttransport') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<button @click="fireDirector">
|
||||
{{ $t('falukant.branch.director.fire') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<button @click="teachDirector">
|
||||
{{ $t('falukant.branch.director.teach') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,6 +134,7 @@ export default {
|
||||
return {
|
||||
director: null,
|
||||
showNewDirectorDialog: false,
|
||||
editIncome: null,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
@@ -84,12 +156,15 @@ export default {
|
||||
data.director === null
|
||||
) {
|
||||
this.director = null;
|
||||
this.editIncome = null;
|
||||
} else {
|
||||
this.director = data.director;
|
||||
this.editIncome = this.director.income;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading director:', error);
|
||||
this.director = null;
|
||||
this.editIncome = null;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -112,6 +187,24 @@ export default {
|
||||
this.$refs.newDirectorDialog.open(this.branchId);
|
||||
},
|
||||
|
||||
async updateDirector() {
|
||||
if (!this.director || this.editIncome == null) return;
|
||||
try {
|
||||
await apiClient.post(`/api/falukant/directors`, {
|
||||
directorId: this.director.id,
|
||||
income: this.editIncome,
|
||||
});
|
||||
await this.loadDirector();
|
||||
} catch (error) {
|
||||
console.error('Error updating director:', error);
|
||||
}
|
||||
},
|
||||
|
||||
setWishedIncome() {
|
||||
if (!this.director || this.director.wishedIncome == null) return;
|
||||
this.editIncome = this.director.wishedIncome;
|
||||
},
|
||||
|
||||
fireDirector() {
|
||||
alert(this.$t('falukant.branch.director.fireAlert'));
|
||||
},
|
||||
@@ -133,9 +226,62 @@ export default {
|
||||
|
||||
.director-info-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.director-info-container>div {
|
||||
.director-main {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.director-actions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.director-name {
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.director-meta {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.toggles label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #007bff;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.knowledge-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.knowledge-table th,
|
||||
.knowledge-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user