DocumentExecutionMetadataDialog.vue 8.77 KB
Newer Older
1
2
3
4
<template>
    <Dialog class="p-fluid kn-dialog--toolbar--primary" :contentStyle="documentExecutionMetadataDialogDescriptor.dialog.style" :visible="visible" :modal="true" :closable="false">
        <template #header>
            <Toolbar class="kn-toolbar kn-toolbar--primary p-p-0 p-m-0 p-col-12">
5
                <template #start>
6
7
8
9
10
11
12
13
                    {{ $t('common.metadata') }}
                </template>
            </Toolbar>
        </template>
        <ProgressBar mode="indeterminate" class="kn-progress-bar" v-if="loading" />

        <div v-if="metadata">
            <div v-if="metadata.generalMetadata.length > 0">
BojanSovticEngIT's avatar
BojanSovticEngIT committed
14
                <h2>{{ $t('common.documentDetails') }}</h2>
15
16
17
18
19
20
21
22
23
24
25
26
                <div class="p-grid p-ai-center">
                    <template v-for="(meta, index) in metadata.generalMetadata" :key="index">
                        <div v-if="meta.value && index !== metadata.generalMetadata.length - 1" :class="{ 'p-col-4': index !== 3, 'p-col-12': index === 3 }">
                            <label class="kn-material-input-label">{{ meta.name }}</label>
                            <InputText v-if="index !== 3" class="kn-material-input p-inputtext-sm" v-model="meta.value" :disabled="true" />
                            <Textarea v-else v-model="meta.value" rows="2" :disabled="true" />
                        </div>
                    </template>
                </div>
            </div>

            <div v-if="metadata.shortText.length > 0 || metadata.longText.length > 0">
BojanSovticEngIT's avatar
BojanSovticEngIT committed
27
                <h2>{{ $t('documentExecution.main.customMetadata') }}</h2>
28

BojanSovticEngIT's avatar
BojanSovticEngIT committed
29
30
                <div v-show="metadata.shortText.length > 0" class="p-grid">
                    <div v-for="(meta, index) in metadata.shortText" :key="index" class="p-col-4">
31
32
33
34
                        <label class="kn-material-input-label">{{ meta.name }}</label>
                        <InputText class="kn-material-input p-inputtext-sm" v-model="meta.value" :disabled="!canModify" />
                    </div>
                </div>
BojanSovticEngIT's avatar
BojanSovticEngIT committed
35
            </div>
36

BojanSovticEngIT's avatar
BojanSovticEngIT committed
37
38
39
            <TabView v-if="(metadata.shortText.length > 0 || metadata.longText.length > 0) && metadata.longText.length > 0" scrollable>
                <TabPanel v-for="(meta, index) in metadata.longText" :key="index">
                    <template #header>
40
                        <span class="p-text-uppercase kn-truncated">{{ meta.name }}</span>
BojanSovticEngIT's avatar
BojanSovticEngIT committed
41
                    </template>
42

BojanSovticEngIT's avatar
BojanSovticEngIT committed
43
44
45
                    <Editor v-model="meta.value" :readonly="!canModify" :editorStyle="documentExecutionMetadataDialogDescriptor.editor.style"></Editor>
                </TabPanel>
            </TabView>
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

            <div v-show="metadata.file.length > 0">
                <h2>{{ $t('common.attachments') }}</h2>
                <div class="p-grid p-ai-center">
                    <template v-for="(meta, index) in metadata.file" :key="index">
                        <div class="p-col-6">
                            <label class="kn-material-input-label">{{ meta.name }}</label>
                            <KnInputFile :ref="'' + meta.id" :id="meta.id" :changeFunction="uploadFile" :visibility="true" />
                        </div>
                        <div class="p-col-6 p-d-flex p-flex-row p-jc-around">
                            <Button v-if="canModify" class="kn-button kn-button--primary document-execution-metadata-dialog-upload-button" @click="uploadMetaFile(meta)"> {{ $t('common.upload') }}</Button>
                            <Button v-if="canModify" class="kn-button kn-button--primary document-execution-metadata-dialog-upload-button" @click="cleanFile(meta)"> {{ $t('common.clean') }}</Button>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="p-d-flex p-flex-row p-jc-end">
                <Button class="kn-button kn-button--primary" @click="closeDialog"> {{ $t('common.close') }}</Button>
BojanSovticEngIT's avatar
BojanSovticEngIT committed
67
                <Button class="kn-button kn-button--primary" :disabled="!canModify" @click="save"> {{ $t('common.save') }}</Button>
68
69
70
71
72
73
            </div>
        </template>
    </Dialog>
</template>

<script lang="ts">
BojanSovticEngIT's avatar
BojanSovticEngIT committed
74
75
76
77
78
79
80
81
82
import { defineComponent } from 'vue'
import { iMetadata } from '../../DocumentExecution'
import Dialog from 'primevue/dialog'
import Editor from 'primevue/editor'
import documentExecutionMetadataDialogDescriptor from './DocumentExecutionMetadataDialogDescriptor.json'
import KnInputFile from '@/components/UI/KnInputFile.vue'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import Textarea from 'primevue/textarea'
83

BojanSovticEngIT's avatar
BojanSovticEngIT committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
export default defineComponent({
    name: 'document-execution-metadata-dialog',
    components: { Dialog, Editor, KnInputFile, TabView, TabPanel, Textarea },
    props: { visible: { type: Boolean }, propDocument: { type: Object }, propMetadata: { type: Object, required: true }, propLoading: { type: Boolean } },
    emits: ['close', 'saveMetadata'],
    data() {
        return {
            documentExecutionMetadataDialogDescriptor,
            document: null as any,
            metadata: null as iMetadata | null,
            uploadedFiles: {} as any,
            loading: false
        }
    },
    watch: {
        propMetadata() {
            this.loadDocument()
            this.loadMetadata()
102
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
        propLoading() {
            this.setLoading()
        }
    },
    computed: {
        canModify(): boolean {
            return (this.$store.state as any).user.functionalities.includes('SaveMetadataFunctionality')
        }
    },
    created() {
        this.setLoading()
        this.loadDocument()
        this.loadMetadata()
    },
    methods: {
        loadDocument() {
            this.document = this.propDocument
120
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
121
122
123
124
125
126
127
128
        loadMetadata() {
            if (this.propMetadata) {
                this.metadata = {
                    generalMetadata: this.propMetadata.GENERAL_META ? [...this.propMetadata.GENERAL_META] : [],
                    shortText: this.propMetadata.SHORT_TEXT ? [...this.propMetadata.SHORT_TEXT] : [],
                    longText: this.propMetadata.LONG_TEXT ? [...this.propMetadata.LONG_TEXT] : [],
                    file: this.propMetadata.FILE ? [...this.propMetadata.FILE] : []
                }
129
            }
130
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
131
132
        setLoading() {
            this.loading = this.propLoading
133
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
134
135
136
137
138
139
140
141
142
143
144
        uploadFile(event: any) {
            this.uploadedFiles[event.target.id] = event.target.files[0]
        },
        async uploadMetaFile(meta: any) {
            if (!this.uploadedFiles[meta.id]) {
                this.$store.commit('setError', {
                    title: this.$t('common.error.generic'),
                    msg: this.$t('documentExecution.main.selectFileError')
                })
            } else {
                this.loading = true
145

BojanSovticEngIT's avatar
BojanSovticEngIT committed
146
147
148
149
150
151
152
153
154
                const formData = new FormData()
                formData.append('file', this.uploadedFiles[meta.id])
                formData.append('fileName', this.uploadedFiles[meta.id].name)
                await this.$http
                    .post(process.env.VUE_APP_RESTFUL_SERVICES_PATH + `1.0/documentexecution/uploadfilemetadata`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                    .then(() => {
                        this.$store.commit('setInfo', {
                            title: this.$t('common.uploadFile'),
                            msg: this.$t('common.uploadFileSuccess')
155
                        })
BojanSovticEngIT's avatar
BojanSovticEngIT committed
156
                        this.updateMetadataFile(meta.id, this.uploadedFiles[meta.id].name)
BojanSovticEngIT's avatar
BojanSovticEngIT committed
157
158
159
160
161
162
163
164
165
166
                    })
                    .catch((error: any) =>
                        this.$store.commit('setError', {
                            title: this.$t('common.error.generic'),
                            msg: error
                        })
                    )
                this.loading = false
            }
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
167
168
169
170
171
        updateMetadataFile(fileId: number, fileName: string) {
            if (!this.metadata) return
            const index = this.metadata?.file.findIndex((tempFile: any) => tempFile.id === fileId)
            if (index !== -1) this.metadata.file[index].fileToSave = { file: {}, fileName: fileName }
        },
BojanSovticEngIT's avatar
BojanSovticEngIT committed
172
173
        cleanFile(meta: any) {
            const temp = this.$refs[meta.id] as any
BojanSovticEngIT's avatar
BojanSovticEngIT committed
174
            if (temp && this.metadata) {
BojanSovticEngIT's avatar
BojanSovticEngIT committed
175
                temp.resetInput()
BojanSovticEngIT's avatar
BojanSovticEngIT committed
176
177
                const index = this.metadata.file.findIndex((tempFile: any) => tempFile.id === meta.id)
                if (index !== -1) delete this.metadata.file[index].fileToSave
178
            }
BojanSovticEngIT's avatar
BojanSovticEngIT committed
179
180
181
182
183
184
185
        },
        closeDialog() {
            this.metadata = null
            this.$emit('close')
        },
        save() {
            this.$emit('saveMetadata', this.metadata)
186
        }
BojanSovticEngIT's avatar
BojanSovticEngIT committed
187
188
    }
})
189
190
191
</script>

<style lang="scss">
BojanSovticEngIT's avatar
BojanSovticEngIT committed
192
193
194
.pi-upload {
    display: none;
}
195

BojanSovticEngIT's avatar
BojanSovticEngIT committed
196
197
198
.document-execution-metadata-dialog-upload-button {
    width: auto !important;
}
199
</style>