comparison client/src/components/systemconfiguration/PDFTemplates.vue @ 3597:d1bbfb9635ca

client: configuration: unified styles of different config components
author Markus Kottlaender <markus@intevation.de>
date Tue, 04 Jun 2019 16:54:45 +0200
parents 63322cd63a57
children f96def15847e
comparison
equal deleted inserted replaced
3596:eeeb7bf14217 3597:d1bbfb9635ca
1 <template> 1 <template>
2 <div class="d-flex flex-column"> 2 <div class="d-flex flex-column pb-4 border-bottom">
3 <div class="d-flex flex-row justify-content-between"> 3 <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5>
4 <h5><translate>PDF-Templates</translate></h5> 4 <input
5 <input 5 @change="uploadTemplate"
6 @change="uploadTemplate" 6 id="uploadTemplate"
7 id="uploadTemplate" 7 ref="uploadTemplate"
8 ref="uploadTemplate" 8 type="file"
9 type="file" 9 style="visibility: hidden; position: absolute;"
10 style="visibility:hidden" 10 />
11 /> 11 <UITableHeader
12 </div> 12 :columns="[
13 <div class="mt-1 border-bottom pb-4"> 13 { id: 'name', title: `${nameLabel}`, class: 'col-3' },
14 <UITableHeader 14 { id: 'time', title: `${dateLabel}`, class: 'col-3' },
15 :columns="[ 15 { id: 'type', title: `${typeLabel}`, class: 'col-2' },
16 { id: 'name', title: `${nameLabel}`, class: 'col-3' }, 16 { id: 'country', title: `${countryLabel}`, class: 'col-2' }
17 { id: 'time', title: `${dateLabel}`, class: 'col-3' }, 17 ]"
18 { id: 'type', title: `${typeLabel}`, class: 'col-2' }, 18 />
19 { id: 'country', title: `${countryLabel}`, class: 'col-2' } 19 <UITableBody :data="templates | sortTable(sortColumn, sortDirection)">
20 ]" 20 <template v-slot:row="{ item: template }">
21 /> 21 <div class="py-1 col-3">{{ template.name }}</div>
22 <UITableBody :data="templates | sortTable(sortColumn, sortDirection)"> 22 <div class="py-1 col-3">{{ template.time }}</div>
23 <template v-slot:row="{ item: template }"> 23 <div class="py-1 col-2">{{ template.type }}</div>
24 <div class="py-1 col-3">{{ template.name }}</div> 24 <div class="py-1 col-2" v-if="template.country">
25 <div class="py-1 col-3">{{ template.time }}</div> 25 {{ template.country }}
26 <div class="py-1 col-2">{{ template.type }}</div> 26 </div>
27 <div class="py-1 col-2" v-if="template.country"> 27 <div class="py-1 col-2" v-else><i>global</i></div>
28 {{ template.country }} 28 <div class="col py-1 text-right">
29 </div> 29 <button
30 <div class="py-1 col-2" v-else><i>global</i></div> 30 class="btn btn-xs btn-info mr-1"
31 <div class="col py-1 text-right"> 31 ref="downloadTemplate"
32 <button 32 @click="downloadTemplate(template)"
33 class="btn btn-xs btn-info mr-1" 33 >
34 ref="downloadTemplate" 34 <font-awesome-icon icon="download" fixed-width />
35 @click="downloadTemplate(template)" 35 </button>
36 > 36 <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)">
37 <font-awesome-icon icon="download" fixed-width /> 37 <font-awesome-icon icon="trash" fixed-width />
38 </button> 38 </button>
39 <button 39 </div>
40 class="btn btn-xs btn-dark" 40 </template>
41 @click="deleteTemplate(template)" 41 </UITableBody>
42 > 42 <div class="px-2 mt-2">
43 <font-awesome-icon icon="trash" fixed-width /> 43 <button
44 </button> 44 class="btn btn-info btn-sm mr-2"
45 </div> 45 @click="
46 </template> 46 type = 'map';
47 </UITableBody> 47 $refs.uploadTemplate.click();
48 <div class="mt-2"> 48 "
49 <button 49 >
50 class="btn btn-info btn-sm mr-2" 50 <font-awesome-icon
51 @click=" 51 icon="spinner"
52 type = 'map'; 52 class="fa-spin fa-fw"
53 $refs.uploadTemplate.click(); 53 v-if="uploading"
54 " 54 />
55 > 55 <font-awesome-icon icon="upload" class="fa-fw" v-else />
56 <font-awesome-icon 56 <translate>Upload new map template</translate>
57 icon="spinner" 57 </button>
58 class="fa-spin fa-fw" 58 <button
59 v-if="uploading" 59 class="btn btn-info btn-sm"
60 /> 60 @click="
61 <font-awesome-icon icon="upload" class="fa-fw" v-else /> 61 type = 'diagram';
62 <translate>Upload new map template</translate> 62 $refs.uploadTemplate.click();
63 </button> 63 "
64 <button 64 >
65 class="btn btn-info btn-sm" 65 <font-awesome-icon
66 @click=" 66 icon="spinner"
67 type = 'diagram'; 67 class="fa-spin fa-fw"
68 $refs.uploadTemplate.click(); 68 v-if="uploading"
69 " 69 />
70 > 70 <font-awesome-icon icon="upload" class="fa-fw" v-else />
71 <font-awesome-icon 71 <translate>Upload new diagram template</translate>
72 icon="spinner" 72 </button>
73 class="fa-spin fa-fw"
74 v-if="uploading"
75 />
76 <font-awesome-icon icon="upload" class="fa-fw" v-else />
77 <translate>Upload new diagram template</translate>
78 </button>
79 </div>
80 </div> 73 </div>
81 </div> 74 </div>
82 </template> 75 </template>
83 76
84 <style lang="scss" scoped> 77 <style lang="scss" scoped>