1 | <template>
|
---|
2 | <file-upload />
|
---|
3 |
|
---|
4 | <div class="file-info-list">
|
---|
5 | <div v-for="(fileInfo, index) in fileInfos" :key="fileInfo.id">
|
---|
6 | <div class="info-container">
|
---|
7 | <img class="icon-l" src="img/word_icon.ico" v-if="fileInfo.fileType === '.docx'" />
|
---|
8 | <img class="icon-l" src="img/powerpoint_icon.ico" v-else-if="fileInfo.fileType === '.pptx'" />
|
---|
9 | <span class="material-icons mdi-override" v-else>description</span>
|
---|
10 |
|
---|
11 | {{ fileInfo.fileName }}
|
---|
12 |
|
---|
13 | <button @click="download(fileInfo)" type="button" class="btn-primary theme-flat">
|
---|
14 | <span class="material-icons">download</span>
|
---|
15 | <span>{{ translations.get("FileInput_Download") }}</span>
|
---|
16 | </button>
|
---|
17 | </div>
|
---|
18 |
|
---|
19 | <hr class="divider-s" v-if="index !== fileInfos.length - 1" />
|
---|
20 | </div>
|
---|
21 | </div>
|
---|
22 |
|
---|
23 | <form ref="formDownload" method="post" target="_blank">
|
---|
24 | <input ref="inputFilePath" type="hidden" name="filepath" />
|
---|
25 | <input ref="inputFileName" type="hidden" name="filename" />
|
---|
26 | </form>
|
---|
27 |
|
---|
28 | </template>
|
---|
29 |
|
---|
30 | <style scoped lang="scss">
|
---|
31 | .info-container {
|
---|
32 | display: grid;
|
---|
33 | grid-template-columns: auto 1fr auto;
|
---|
34 | align-items: center;
|
---|
35 |
|
---|
36 | gap: 0.5em;
|
---|
37 | padding: 0.5em;
|
---|
38 | transition-duration: var(--transition-duration);
|
---|
39 |
|
---|
40 | &:hover {
|
---|
41 | background-color: #DDD;
|
---|
42 | }
|
---|
43 | }
|
---|
44 |
|
---|
45 | .file-info-list {
|
---|
46 | border: 1px solid #BBB;
|
---|
47 | margin-top: 1em;
|
---|
48 | }
|
---|
49 |
|
---|
50 | .mdi-override {
|
---|
51 | @extend .mdi-l;
|
---|
52 |
|
---|
53 | color: var(--bg-color);
|
---|
54 | }
|
---|
55 |
|
---|
56 | .icon-l {
|
---|
57 | height: 36px;
|
---|
58 | }
|
---|
59 | </style>
|
---|
60 |
|
---|
61 | <script>
|
---|
62 | import { mapState } from "vuex";
|
---|
63 | import MacronRestorationService from "../js/MacronRestorationModule"
|
---|
64 | import FileUpload from "./FileUpload.vue"
|
---|
65 |
|
---|
66 | const macronRestorer = new MacronRestorationService();
|
---|
67 |
|
---|
68 | export default {
|
---|
69 | name: "FileInput",
|
---|
70 | components: {
|
---|
71 | FileUpload
|
---|
72 | },
|
---|
73 | computed: {
|
---|
74 | ...mapState({
|
---|
75 | translations: state => state.translations,
|
---|
76 | fileInfos: state => state.macronisedFileInfos
|
---|
77 | })
|
---|
78 | },
|
---|
79 | methods: {
|
---|
80 | download(fileInfo) {
|
---|
81 | this.$refs.inputFilePath.value = fileInfo.filePath;
|
---|
82 | this.$refs.inputFileName.value = fileInfo.fileName;
|
---|
83 | this.$refs.formDownload.submit();
|
---|
84 | }
|
---|
85 | },
|
---|
86 | mounted() {
|
---|
87 | this.$refs.formDownload.setAttribute("action", macronRestorer.queryUrl + "Download");
|
---|
88 | }
|
---|
89 | }
|
---|
90 | </script>
|
---|