yourpart3/frontend/src/dialogues/falukant/NewDirectorDialog.vue

<template>
    <DialogWidget ref="dialog" :title="$t('factset.newdirector.title')" :show-close="true" :buttons="buttons"
        @close="closeDialog" name="FalukantNewDirector" :modal="true" :isTitleTranslated="true">
        <div class="director-dialog">
            <div class="proposal-list">
                <ul>
                    <li v-for="proposal in proposals" :key="proposal.id" @click="selectProposal(proposal)"
                        :class="{ selected: selectedProposal && selectedProposal.id === proposal.id }">
                        {{ $t('falukant.titles.' + proposal.character.gender + '.' + proposal.character.title) }} {{ proposal.character.name }} ({{ proposal.character.age }} Jahre)
                    </li>
                </ul>
            </div>
            <div class="proposal-details" v-if="selectedProposal">
                <h3>{{ selectedProposal.character.name }}</h3>
                <p><strong>{{ $t('falukant.newdirector.age') }}</strong> {{ selectedProposal.character.age }} Jahre</p>
                <p><strong>{{ $t('falukant.newdirector.salary') }}</strong> {{ selectedProposal.proposedIncome }} $</p>
                <h4>{{ $t('falukant.newdirector.skills') }}</h4>
                <table>
                    <thead>
                        <tr>
                            <th>{{ $t('falukant.newdirector.product') }}</th>
                            <th>{{ $t('falukant.newdirector.knowledge') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="knowledge in selectedProposal.character.knowledge" :key="knowledge.id">
                            <td>{{ $t('falukant.product.' + knowledge.labelTr) }}</td>
                            <td>{{ mapKnowledgeToText(knowledge.value) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </DialogWidget>
</template>

<script>
import apiClient from '@/utils/axios.js';
import DialogWidget from '@/components/DialogWidget.vue';
import { mapKnowledgeToText } from '@/utils/knowledgeHelper.js';

export default {
    name: 'FalukantNewDirector',
    components: {
        DialogWidget,
    },
    data() {
        return {
            dialog: null,
            proposals: [],
            selectedProposal: null,
            products: [],
            buttons: [
                { text: this.$t('falukant.newdirector.hire'), action: this.hireDirector },
                { text: this.$t('Cancel'), action: 'close' },
            ],
        };
    },
    methods: {
        async open(branchId) {
            this.dialog.open();
            await this.loadProposals(branchId);
        },

        closeDialog() {
            this.dialog.close();
            this.proposals = [];
            this.selectedProposal = null;
        },

        async loadProposals(branchId) {
            try {
                const response = await apiClient.post('/api/falukant/director/proposal', { branchId });
                this.proposals = response.data.map((proposal) => {
                    return {
                        ...proposal,
                        knowledge: proposal.knowledge || [],
                    };
                });
            } catch (error) {
                console.error('Error loading proposals:', error);
            }
        },

        selectProposal(proposal) {
            this.selectedProposal = proposal;
        },

        async hireDirector() {
            if (!this.selectedProposal) return;
            try {
                await apiClient.post('/api/falukant/director/convertproposal', { proposalId: this.selectedProposal.id });
                this.closeDialog();
                this.$emit('directorHired');
            } catch (error) {
                console.error('Error hiring director:', error);
            }
        },

        mapKnowledgeToText(value) {
            return mapKnowledgeToText(value, this.$t);
        },
    },

    mounted() {
        this.dialog = this.$refs.dialog;
    },

    beforeUnmount() { },
};
</script>

<style scoped>
.director-dialog {
    display: flex;
    gap: 20px;
}

.proposal-list {
    width: 40%;
    border-right: 1px solid #ddd;
    padding-right: 20px;
}

.proposal-list ul {
    list-style: none;
    padding: 0;
}

.proposal-list li {
    padding: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 10px;
    border-radius: 4px;
}

.proposal-list li:hover {
    background-color: #f9f9f9;
}

.proposal-list li.selected {
    border-color: #f9a22c;
    background-color: #fdf1db;
}

.proposal-details {
    width: 60%;
}

.proposal-details table {
    width: 100%;
    border-collapse: collapse;
}

.proposal-details table th,
.proposal-details table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}
</style>