Mercurial > gemma

comparison client/src/components/systemconfiguration/PDFTemplates.vue @ 2257:ce6fd3d4a3a2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: pdf-gen: moved template handling from store to components
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Feb 2019 08:56:32 +0100
parents e6fba449aa3c
children 9f327f197ddd
comparison
equal deleted inserted replaced
2256:0d272d7bcfb9 2257:ce6fd3d4a3a2
2 <div class="d-flex flex-column mt-4"> 2 <div class="d-flex flex-column mt-4">
3 <div class="d-flex flex-row justify-content-between"> 3 <div class="d-flex flex-row justify-content-between">
4 <h5><translate>PDF-Templates</translate></h5> 4 <h5><translate>PDF-Templates</translate></h5>
5 <input 5 <input
6 @change="upload" 6 @change="upload"
7 id="uploadPDFTemplate" 7 id="uploadTemplate"
8 ref="uploadPDFTemplate" 8 ref="uploadTemplate"
9 type="file" 9 type="file"
10 style="visibility:hidden" 10 style="visibility:hidden"
11 /> 11 />
12 </div> 12 </div>
13 <div class="mt-1"> 13 <div class="mt-1">
18 <th>Date</th> 18 <th>Date</th>
19 <th></th> 19 <th></th>
20 </tr> 20 </tr>
21 </thead> 21 </thead>
22 <transition-group name="list-fade" tag="tbody"> 22 <transition-group name="list-fade" tag="tbody">
23 <tr v-for="template in pdfTemplates" :key="template.name"> 23 <tr v-for="template in templates" :key="template.name">
24 <td>{{ template.name }}</td> 24 <td>{{ template.name }}</td>
25 <td>{{ template.time }}</td> 25 <td>{{ template.time }}</td>
26 <td class="text-right"> 26 <td class="text-right">
27 <button class="btn btn-sm btn-info mr-2"> 27 <button class="btn btn-sm btn-info mr-2">
28 <font-awesome-icon icon="download" /> 28 <font-awesome-icon icon="download" />
38 </button> 38 </button>
39 </td> 39 </td>
40 </tr> 40 </tr>
41 </transition-group> 41 </transition-group>
42 </table> 42 </table>
43 <button 43 <button class="btn btn-sm btn-info" @click="$refs.uploadTemplate.click()">
44 class="btn btn-sm btn-info"
45 @click="$refs.uploadPDFTemplate.click()"
46 >
47 <font-awesome-icon 44 <font-awesome-icon
48 icon="spinner" 45 icon="spinner"
49 class="fa-spin fa-fw" 46 class="fa-spin fa-fw"
50 v-if="uploading" 47 v-if="uploading"
51 /> 48 />
106 * Software engineering by Intevation GmbH 103 * Software engineering by Intevation GmbH
107 * 104 *
108 * Author(s): 105 * Author(s):
109 * Markus Kottländer <markus@intevation.de> 106 * Markus Kottländer <markus@intevation.de>
110 */ 107 */
111 import { mapState } from "vuex"; 108 import { HTTP } from "@/lib/http";
109 import { displayError } from "@/lib/errors.js";
112 110
113 export default { 111 export default {
114 name: "pdftemplates", 112 name: "pdftemplates",
115 data() { 113 data() {
116 return { 114 return {
115 templates: [],
117 uploading: false, 116 uploading: false,
118 templateToDelete: "", 117 templateToDelete: "",
119 showDeleteTemplatePrompt: false 118 showDeleteTemplatePrompt: false
120 }; 119 };
121 }, 120 },
122 computed: {
123 ...mapState("application", ["pdfTemplates"])
124 },
125 methods: { 121 methods: {
126 upload() { 122 upload() {
127 this.uploading = true; 123 const reader = new FileReader();
128 this.$store 124 reader.onload = event => {
129 .dispatch( 125 let template;
130 "application/uploadPDFTemplate", 126 try {
131 this.$refs.uploadPDFTemplate.files 127 template = JSON.parse(event.target.result);
132 ) 128 } catch (e) {
133 .finally(() => { 129 displayError({
134 this.uploading = false; 130 title: "Format Error",
131 message: "Uploaded file does not contain valid json data."
132 });
133 }
134 if (template.name) {
135 this.uploading = true;
136 HTTP.post(
137 "/templates/print/" + template.name,
138 {
139 template_name: template.name,
140 template_data: template
141 },
142 {
143 headers: {
144 "X-Gemma-Auth": localStorage.getItem("token"),
145 "Content-type": "text/xml; charset=UTF-8"
146 }
147 }
148 )
149 .then(() => {
150 this.loadTemplates();
151 })
152 .catch(e => {
153 const { status, data } = e.response;
154 displayError({
155 title: "Backend Error",
156 message: `${status}: ${data.message || data}`
157 });
158 })
159 .finally(() => {
160 this.uploading = false;
161 });
162 } else {
163 displayError({
164 title: "Format Error",
165 message: "The provided template has no name property."
166 });
167 }
168 };
169 reader.onerror = error => console.log(error);
170 reader.readAsText(this.$refs.uploadTemplate.files[0]);
171 },
172 loadTemplates() {
173 HTTP.get("/templates/print", {
174 headers: {
175 "X-Gemma-Auth": localStorage.getItem("token"),
176 "Content-type": "text/xml; charset=UTF-8"
177 }
178 })
179 .then(response => {
180 this.templates = response.data;
181 })
182 .catch(e => {
183 const { status, data } = e.response;
184 displayError({
185 title: "Backend Error",
186 message: `${status}: ${data.message || data}`
187 });
135 }); 188 });
136 }, 189 },
137 remove(template) { 190 remove(template) {
138 this.showDeleteTemplatePrompt = false; 191 this.showDeleteTemplatePrompt = false;
139 this.$store.dispatch("application/removePDFTemplate", template); 192 HTTP.delete("/templates/print/" + template.name, {
193 headers: {
194 "X-Gemma-Auth": localStorage.getItem("token"),
195 "Content-type": "text/xml; charset=UTF-8"
196 }
197 }).then(() => {
198 let removeIndex = this.templates.findIndex(
199 t => t.name === template.name
200 );
201 if (removeIndex !== -1) {
202 this.templates.splice(removeIndex, 1);
203 }
204 });
140 } 205 }
141 }, 206 },
142 mounted() { 207 mounted() {
143 this.$store.dispatch("application/loadPdfTemplates"); 208 this.loadTemplates();
144 } 209 }
145 }; 210 };
146 </script> 211 </script>