source: main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/FileInput.vue@ 35787

<script>
import { mapState } from "vuex";
import MacronRestorationService from "../js/MacronRestorationModule"
import FileUpload from "./FileUpload.vue"

const macronRestorer = new MacronRestorationService();

export default {
    name: "FileInput",
    components: {
        FileUpload
    },
    computed: {
        ...mapState({
            translations: state => state.translations,
            fileInfos: state => state.macronisedFileInfos
        })
    },
    methods: {
        buildDownloadUrl(fileInfo) {
            return macronRestorer.buildDownloadUrl(fileInfo.filePath, fileInfo.fileName);
        }
    }
}
</script>

<template>
<file-upload />

<div class="file-info-list">
    <div v-for="(fileInfo, index) in fileInfos" :key="fileInfo.id">
        <div class="info-container">
            <img class="icon-l" src="../assets/word_icon.webp" v-if="fileInfo.fileType === '.docx'" />
            <img class="icon-l" src="../assets/powerpoint_icon.webp" v-else-if="fileInfo.fileType === '.pptx'" />
            <img class="icon-l" src="../assets/excel_icon.webp" v-else-if="fileInfo.fileType === '.xlsx'" />
            <span class="material-icons mdi-override" v-else>description</span>

            {{ fileInfo.fileName }}

            <a class="btn-primary theme-flat" :href="buildDownloadUrl(fileInfo)" download>
                <span class="material-icons">download</span>
                <span>{{ translations.get("FileInput_Download") }}</span>
            </a>
        </div>

        <hr class="divider-s" v-if="index !== fileInfos.length - 1" />
    </div>
</div>

</template>

<style scoped lang="scss">
.info-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 0.5em;
    padding: 0.5em;
    transition-duration: var(--transition-duration);

    &:hover {
        background-color: #DDD;
    }
}

.file-info-list {
    border: 1px solid #BBB;
    margin-top: 1em;
}

.mdi-override {
    @extend .mdi-l;

    color: var(--bg-color);
}

.icon-l {
    height: 36px;
}
</style>