All files / src/components FileSelectModal.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
2x
 
 
 
 
 
6x
 
 
 
 
 
 
 
7x
 
 
 
 
6x
6x
 
 
 
 
 
 
 
6x
6x
6x
 
 
 
 
 
 
40x
 
 
3x
5x
 
1x
 
 
 
1x
1x
 
 
 
6x
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import runAjax from '../mixins/runAjax';
 
export default {
    name: 'FileSelectModal',
    mixins: [runAjax],
    data() {
        return {
            selectedFiles: [],
            availableFilesList: [],
            loading: true
        }
    },
    computed: {
        filesAvailable() {
            return LS.ld.size(this.availableFilesList) > 0;
        }
    },
    methods: {
        getAvailableFilesList() {
            return new Promise((resolve, reject) => {
                this.$_get(
                    window.EmailTemplateData.getFileUrl, 
                    {
                        surveyid: window.EmailTemplateData.surveyid, 
                        folder: window.EmailTemplateData.surveyFolder
                        }
                ).then(
                    (result)=>{
                        this.$log.log(result);
                        this.availableFilesList = LS.ld.values(result.data);
                        resolve(result);
                    }, 
                    (error) =>{ reject(error); }
                );
            });
        },
        isSelected(file) {
            return (LS.ld.filter(this.selectedFiles, (curFile) => curFile.hash == file.hash)).length > 0;
        },
        toggleFileSelection(file) {
            if(this.isSelected(file)) {
                this.selectedFiles = LS.ld.filter(this.selectedFiles, (curFile) => curFile.hash !== file.hash)
            } else {
                this.selectedFiles.push(file)
            }
        },
        saveAttachments() {
            this.$store.commit('setAttachementForTypeAndLanguage', this.selectedFiles);
            this.$emit('close');
        }
    },
    mounted() {
        this.getAvailableFilesList().then(
            () => { this.loading = false; }
        )
    }
}
</script>
 
<template>
    <div class="panel panel-default ls-flex-column fill">
        <div class="panel-heading">
            <div class="pagetitle h3"> {{"Select attachement" | translate }} </div>
            <div class="h4"> {{"To add files please open the resources tab, or ask an administrator to add files to the survey folder" | translate }} </div>
        </div>
        <div class="panel-body ls-flex-column grow-1 fill">
            <div class="container-fluid">
                <div class="masonry-container" v-if="!loading && filesAvailable">
                    <div 
                        class="ls-flex ls-flex-column scoped-file-tile scoped-file-icon" 
                        v-for="file in availableFilesList"
                        :class="isSelected(file) ? 'scope-selected-file' : ''"
                        :id="'iconRep-' + file.hash"
                        :key="file.shortName" 
                    >
                        <div 
                            class="ls-flex ls-flex-row align-content-center align-items-center emailtemplates--imagecontainer"
                            @click="toggleFileSelection(file)"
                        >
                            <img v-if="file.isImage" class="scoped-contain-image" :src="file.src" :alt="file.shortName" />
                            <i v-else :class="'fa '+file.iconClass+' fa-4x scoped-big-icon'"></i>
                        </div>
                        <div class="scoped-prevent-overflow ls-space margin top-5">
                            {{file.shortName}}
                        </div>
                    </div>
                </div>
 
                <div id="fileSelectorLoader" v-if="!loading && !filesAvailable" >
                    <p class="well"> {{"No files in the survey folder"|translate}}</p>
                </div>
 
                <loader-widget id="fileSelectorLoader" v-if="loading" />
            </div>
        </div>
        <div class="panel-footer">
            <div class="row">
                <div class="col-xs-12 text-right">
                    <button 
                        class="btn btn-success"
                        id="emailtemplates--save-attachements"
                        @click.prevent="saveAttachments"
                    >
                        {{"Save selection" | translate}}
                    </button>
                </div>  
            </div>
        </div>
    </div> 
</template>
 
<style lang="scss" scoped>
    @media (min-width: 769px) {
        .masonry-container {
            columns: 4 auto;
            column-gap: 1rem;
        }
    }
    @media (max-width: 768px) {
        .masonry-container {
            columns: 2 auto;
            column-gap: 1rem;
        }
    }
    .scoped-contain-image {
        max-width: 100%;
        display: block;
    }
    .scoped-file-icon  {
        border: 1px solid black;
        box-shadow: 1px 2px 3px #939393;
        margin: 1.1rem;
        padding: 0.5rem;
 
        &:first-of-type {
            margin-top: 0;
        }
        &.scope-selected-file {
            border: 1px solid var(--LS-admintheme-basecolor);
            box-shadow: 3px 6px 9px var(--LS-admintheme-basecolor);
        }
    }
</style>