yourpart3/frontend/src/components/falukant/DirectorInfo.vue

<template>
  <div class="director-info">
    <div v-if="!director || director === null">
      <button @click="openNewDirectorDialog">
        {{ $t('falukant.branch.director.actions.new') }}
      </button>
    </div>

    <div v-else class="director-info-container">
      <!-- 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>

      <!-- 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>
  <NewDirectorDialog ref="newDirectorDialog" />
</template>

<script>
import apiClient from '@/utils/axios.js';
import NewDirectorDialog from '@/dialogues/falukant/NewDirectorDialog.vue';

export default {
  name: "DirectorInfo",
  props: { branchId: { type: Number, required: true } },
  components: {
    NewDirectorDialog
  },
  data() {
    return {
      director: null,
      showNewDirectorDialog: false,
      editIncome: null,
    };
  },
  async mounted() {
    await this.loadDirector();
  },
  methods: {
    async refresh() {
      await this.loadDirector();
    },

    async loadDirector() {
      try {
        const response = await apiClient.get(`/api/falukant/director/${this.branchId}`);
        const data = response.data;
        if (
          !data ||
          (Array.isArray(data) && data.length === 0) ||
          typeof data.director === 'undefined' ||
          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;
      }
    },

    async saveSetting(settingKey, value) {
      if (!this.director) return;
      try {
        await apiClient.post(`/api/falukant/director/settings`, {
          branchId: this.branchId,
          directorId: this.director.id,
          settingKey,
          value,
        });
      } catch (error) {
        console.error(`Error saving setting ${settingKey}:`, error);
      }
    },

    openNewDirectorDialog() {
      console.log('openNewDirectorDialog');
      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'));
    },

    teachDirector() {
      alert(this.$t('falukant.branch.director.teachAlert'));
    },
  },
};
</script>

<style scoped>
.director-info {
  border: 1px solid #ccc;
  margin: 10px 0;
  border-radius: 4px;
  padding: 10px;
}

.director-info-container {
  display: flex;
  gap: 1rem;
}

.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>