Mercurial > gemma

comparison client/src/components/systemconfiguration/PDFTemplates.vue @ 3243:e9c143436432

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagram-template: improve Pdf-templates systemconfiguration * use selectbox instead of radio buttons to choose template type * make upload done only if template type is selected
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 10 May 2019 16:13:59 +0200
parents 22dfaa22e96e
children b3333311de42
comparison
equal deleted inserted replaced
3242:3b770f8273b6 3243:e9c143436432
43 <font-awesome-icon icon="trash" fixed-width /> 43 <font-awesome-icon icon="trash" fixed-width />
44 </button> 44 </button>
45 </div> 45 </div>
46 </template> 46 </template>
47 </UITableBody> 47 </UITableBody>
48 <div class="d-flex align-items-center"> 48 <div class="d-flex flex-column mt-2 w-25 mr-auto">
49 <div class="form-check form-check-inline"> 49 <select
50 <input 50 v-model="type"
51 class="form-check-input" 51 class="form-control d-block custom-select-sm w-75 h-25"
52 type="radio"
53 name="type"
54 v-model="type"
55 value="map"
56 />
57 <label class="form-check-label">Map-template</label>
58 </div>
59 <div class="form-check form-check-inline">
60 <input
61 class="form-check-input"
62 type="radio"
63 v-model="type"
64 value="diagram"
65 />
66 <label class="form-check-label">Diagram-template</label>
67 </div>
68 <button
69 class="btn btn-info btn-sm"
70 @click="$refs.uploadTemplate.click()"
71 > 52 >
53 <option :value="null">
54 Select template type
55 </option>
56 <option value="map">
57 Map-template
58 </option>
59 <option value="diagram">
60 Diagram-template
61 </option>
62 </select>
63 <button class="btn btn-info btn-sm mt-1 w-75" @click="checkUpload">
72 <font-awesome-icon 64 <font-awesome-icon
73 icon="spinner" 65 icon="spinner"
74 class="fa-spin fa-fw" 66 class="fa-spin fa-fw"
75 v-if="uploading" 67 v-if="uploading"
76 /> 68 />
116 mixins: [sortTable], 108 mixins: [sortTable],
117 data() { 109 data() {
118 return { 110 return {
119 templates: [], 111 templates: [],
120 uploading: false, 112 uploading: false,
121 type: "map" 113 type: null
122 }; 114 };
123 }, 115 },
124 computed: { 116 computed: {
125 nameLabel() { 117 nameLabel() {
126 return this.$gettext("Name"); 118 return this.$gettext("Name");
134 typeLabel() { 126 typeLabel() {
135 return this.$gettext("Type"); 127 return this.$gettext("Type");
136 } 128 }
137 }, 129 },
138 methods: { 130 methods: {
131 // check if template type is selceted
132 checkUpload() {
133 if (this.type) {
134 this.$refs.uploadTemplate.click();
135 } else {
136 displayError({
137 message: this.$gettext("Please select template type")
138 });
139 }
140 },
139 downloadTemplate(template) { 141 downloadTemplate(template) {
140 if (template) { 142 if (template) {
141 var templateData = ""; 143 var templateData = "";
142 var element = document.createElement("a"); 144 var element = document.createElement("a");
143 element.style.display = "none"; 145 element.style.display = "none";
191 title: this.$gettext("Format Error"), 193 title: this.$gettext("Format Error"),
192 message: this.$gettext( 194 message: this.$gettext(
193 "Uploaded file does not contain valid json data." 195 "Uploaded file does not contain valid json data."
194 ) 196 )
195 }); 197 });
196 //allow the user to upload the same file 198 // allow the user to upload the same file
197 //if user wants to upload the same file after edit it. 199 // if user wants to upload the same file after edit it.
198 this.$refs.uploadTemplate.value = null; 200 this.$refs.uploadTemplate.value = null;
199 } 201 }
200 if (template.name) { 202 if (template.name) {
201 //check if an element in the uploaded file does not match the predefind template-elements 203 // check if an element in the uploaded file does not match the predefind template-elements
202 let checkElement = false; 204 let checkElement = false;
203 template.elements.forEach(e => { 205 template.elements.forEach(e => {
204 if ( 206 if (
205 [ 207 [
206 "text", 208 "text",
222 title: this.$gettext("Invalid element"), 224 title: this.$gettext("Invalid element"),
223 message: 225 message:
224 e.type + 226 e.type +
225 this.$gettext(" does not match any template's element") 227 this.$gettext(" does not match any template's element")
226 }); 228 });
227 //allow the user to upload the same file 229 // allow the user to upload the same file
228 this.$refs.uploadTemplate.value = null; 230 this.$refs.uploadTemplate.value = null;
229 } 231 }
230 }); 232 });
231 233
232 if (!checkElement) { 234 if (!checkElement) {
275 title: this.$gettext("Format Error"), 277 title: this.$gettext("Format Error"),
276 message: this.$gettext( 278 message: this.$gettext(
277 "The provided template has no name property." 279 "The provided template has no name property."
278 ) 280 )
279 }); 281 });
280 //allow the user to upload the same file 282 // allow the user to upload the same file
281 this.$refs.uploadTemplate.value = null; 283 this.$refs.uploadTemplate.value = null;
282 } 284 }
283 }; 285 };
286
284 reader.onerror = error => console.log(error); 287 reader.onerror = error => console.log(error);
285 reader.readAsText(this.$refs.uploadTemplate.files[0]); 288 reader.readAsText(this.$refs.uploadTemplate.files[0]);
286 }, 289 },
287 loadTemplates() { 290 loadTemplates() {
288 HTTP.get("/templates", { 291 HTTP.get("/templates", {