viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit b9759239c49c308ac13d13032f7483308fb7ac6d

Authored by Shikha Mishra
1 parent 81d876b5d6
Exists in master and in 3 other branches amber-development, development, ui-design

shown invoice details and show file in noticeBoard

Showing 2 changed files with 187 additions and 183 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @b975923
... ... @@ -149,7 +149,7 @@
149 149 <v-select
150 150 :items="feeTypes"
151 151 :rules="feeTypeRules"
152   - v-model="invoiceData.feeTypeName"
  152 + v-model="feeType.feeTypeName"
153 153 item-text="feeType"
154 154 item-value="feeType"
155 155 label="Select Fee Type"
... ... @@ -177,7 +177,7 @@
177 177 </tr>
178 178 <tr
179 179 v-show="showFeeType"
180   - v-for="(invoiceData, index) in feeTypeData"
  180 + v-for="(feeType, index) in feeTypeData"
181 181 :key="index"
182 182 v-on:keyup="getAmmountDetails(feeType)"
183 183 >
... ... @@ -186,14 +186,14 @@
186 186 <v-text-field
187 187 :rules="feeTypeNameRules"
188 188 placeholder="fill your Fee Type"
189   - v-model="invoiceData.feeTypeName"
  189 + v-model="feeType.feeTypeName"
190 190 ></v-text-field>
191 191 </td>
192 192 <td>
193 193 <v-text-field
194 194 :rules="amountRules"
195 195 placeholder="fill your Amount"
196   - v-model="invoiceData.amount"
  196 + v-model="feeType.amount"
197 197 type="number"
198 198 ></v-text-field>
199 199 </td>
... ... @@ -201,38 +201,36 @@
201 201 <v-text-field
202 202 :rules="discountRules"
203 203 placeholder="fill your Discount"
204   - v-model="invoiceData.discount"
  204 + v-model="feeType.discount"
205 205 type="number"
206 206 ></v-text-field>
207 207 </td>
208   - <td class="tdFeeType">{{ invoiceData.subTotal }}</td>
209   - <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  208 + <td class="tdFeeType">{{ feeType.subTotal }}</td>
  209 + <td class="tdFeeType" v-if="feeType.paymentStatus === 'NOT_PAID'">
210 210 <v-text-field
211 211 placeholder="fill your Paid Amount"
212   - v-model="invoiceData.paidAmount"
  212 + v-model="feeType.paidAmount"
213 213 type="number"
214   - :rules="paymentRules"
215 214 :disabled="disabled"
216 215 ></v-text-field>
217 216 </td>
218   - <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
  217 + <td class="tdFeeType" v-if="feeType.paymentStatus == ''">
219 218 <v-text-field
220 219 placeholder="fill your Paid Amount"
221   - v-model="invoiceData.paidAmount"
  220 + v-model="feeType.paidAmount"
222 221 type="number"
223   - :rules="paymentRules"
224 222 :disabled="disabled"
225 223 ></v-text-field>
226 224 </td>
227 225 <td
228 226 class="tdFeeType"
229   - v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
  227 + v-if="feeType.paymentStatus != 'NOT_PAID' && feeType.paymentStatus != ''"
230 228 >
231 229 <v-text-field
232   - placeholder="fill your Paid Amount"
233   - v-model="invoiceData.paidAmount"
234   - :rules="paymentRules"
  230 + placeholder="Paid Amount"
  231 + v-model="feeType.paidAmount"
235 232 type="number"
  233 + :disabled="disabled"
236 234 ></v-text-field>
237 235 </td>
238 236 <td class="tdFeeType">
... ... @@ -242,10 +240,10 @@
242 240 <tfoot>
243 241 <tr>
244 242 <td colspan="2" class="tdFeeType">Total:</td>
245   - <td class="tdFeeType" :rules="amountRules">{{ invoiceData.amount }}</td>
246   - <td class="tdFeeType" :rules="discountRules">{{ invoiceData.discount }}</td>
247   - <td class="tdFeeType" :rules="subtotalRules">{{ invoiceData.subTotal }}</td>
248   - <td class="tdFeeType" :rules="paidAmountRules">{{ invoiceData.paidAmount }}</td>
  243 + <td class="tdFeeType">{{ feeType.amount }}</td>
  244 + <td class="tdFeeType">{{ feeType.discount }}</td>
  245 + <td class="tdFeeType">{{ feeType.subTotal }}</td>
  246 + <td class="tdFeeType">{{ feeType.paidAmount }}</td>
249 247 <td class="tdFeeType">
250 248 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
251 249 </td>
... ... @@ -289,10 +287,10 @@
289 287 class="text-xs-center text-sm-center text-md-center text-lg-center"
290 288 >
291 289 <v-avatar size="80px">
292   - <img src="/static/icon/user.png" v-if="!invoiceList.profilePicUrl" />
  290 + <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
293 291 <img
294   - :src="invoiceList.profilePicUrl"
295   - v-else-if="invoiceList.profilePicUrl"
  292 + :src="editPayment.profilePicUrl"
  293 + v-else-if="editPayment.profilePicUrl"
296 294 />
297 295 </v-avatar>
298 296 </v-flex>
... ... @@ -300,7 +298,7 @@
300 298 <v-layout>
301 299 <v-flex xs12 sm12>
302 300 <h3 class="text-xs-center">
303   - <!-- <b>{{ invoiceList.studentId.name }}</b> -->
  301 + <!-- <b>{{ editPayment.studentId.name }}</b> -->
304 302 </h3>
305 303 <p class="text-xs-center grey--text">Student</p>
306 304 </v-flex>
... ... @@ -312,7 +310,7 @@
312 310 </h4>
313 311 </v-flex>
314 312 <v-flex sm6 xs6 class="pa-0">
315   - <!-- <h4>{{ invoiceList.studentId.rollNo }}</h4> -->
  313 + <!-- <h4>{{ editPayment.studentId.rollNo }}</h4> -->
316 314 </v-flex>
317 315 </v-layout>
318 316 <v-layout style="border: 1px solid lightgrey;">
... ... @@ -322,19 +320,9 @@
322 320 </h4>
323 321 </v-flex>
324 322 <v-flex sm6 xs6 class="pa-0">
325   - <!-- <h4>{{ invoiceList.classId.classNum }}</h4> -->
  323 + <!-- <h4>{{ editPayment.classId.classNum }}</h4> -->
326 324 </v-flex>
327 325 </v-layout>
328   - <!-- <v-layout style="border: 1px solid lightgrey;">
329   - <v-flex xs6 sm6 class="pa-0">
330   - <h4 class="right">
331   - <b>Section :</b>
332   - </h4>
333   - </v-flex>
334   - <v-flex sm6 xs6 class="pa-0">
335   - <h4>{{ invoiceList.sectionId.name }}</h4>
336   - </v-flex>
337   - </v-layout>-->
338 326 </v-flex>
339 327 </v-layout>
340 328 </v-container>
... ... @@ -359,7 +347,7 @@
359 347 <v-flex xs6 class="ml-3">
360 348 <v-select
361 349 :items="paymentMethods"
362   - v-model="invoiceList.paymentMethod"
  350 + v-model="editPayment.paymentMethod"
363 351 label="Select Payment Method"
364 352 required
365 353 ></v-select>
... ... @@ -371,7 +359,7 @@
371 359 color="open-dialog-button"
372 360 dark
373 361 class="right mt-3"
374   - @click="save"
  362 + @click="add"
375 363 >Add Payment</v-btn>
376 364 </v-card-actions>
377 365 </v-flex>
... ... @@ -392,34 +380,41 @@
392 380 <th>#</th>
393 381 <th>Fee Type</th>
394 382 <th>Amount</th>
  383 + <!-- <th>Due</th> -->
395 384 <th>Discount(%)</th>
396 385 <th>Subtotal</th>
397 386 <th>Paid Amount</th>
398 387 <th>Action</th>
399 388 </tr>
400 389 <tr
401   - v-show="showFeeType"
402   - v-for="(feeType, index) in feeTypeData"
  390 + v-for="(feeType,index) in feeTypeData"
403 391 :key="index"
404 392 v-on:keyup="getAmmountDetails(feeType)"
405 393 >
406   - <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
407   - <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
  394 + <td style="width:40px" class="tdFeeType"> 1 </td>
  395 + <td style="width:120px" class="tdFeeType" disabled>{{ feeType.feeTypeName }}</td>
408 396 <td class="tdFeeType">
409 397 <v-text-field
410 398 placeholder="fill your Amount"
411 399 v-model="feeType.amount"
412 400 type="number"
  401 + disabled
413 402 ></v-text-field>
414 403 </td>
  404 + <!-- <td
  405 + style="width:120px"
  406 + class="tdFeeType"
  407 + disabled
  408 + >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> -->
415 409 <td class="tdFeeType">
416 410 <v-text-field
417 411 placeholder="fill your Discount"
418 412 v-model="feeType.discount"
419 413 type="number"
  414 + disabled
420 415 ></v-text-field>
421 416 </td>
422   - <td class="tdFeeType">{{ feeType.subTotal }}</td>
  417 + <td class="tdFeeType" disabled>{{ feeType.subTotal }}</td>
423 418 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
424 419 <v-text-field
425 420 placeholder="fill your Paid Amount"
... ... @@ -444,6 +439,7 @@
444 439 placeholder="fill your Paid Amount"
445 440 v-model="feeType.paidAmount"
446 441 type="number"
  442 + disabled
447 443 ></v-text-field>
448 444 </td>
449 445 <td class="tdFeeType">
... ... @@ -454,6 +450,7 @@
454 450 <tr>
455 451 <td colspan="2" class="tdFeeType">Total:</td>
456 452 <td class="tdFeeType">{{ feeType.amount }}</td>
  453 + <!-- <td class="tdFeeType">{{ feeType.subTotal }}</td> -->
457 454 <td class="tdFeeType">{{ feeType.discount }}</td>
458 455 <td class="tdFeeType">{{ feeType.subTotal }}</td>
459 456 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
... ... @@ -480,55 +477,8 @@
480 477 <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
481 478 </v-flex>
482 479 </v-layout>
483   - <v-data-table
484   - :headers="headersProfile"
485   - :items="invoiceList"
486   - :pagination.sync="pagination"
487   - :search="search"
488   - >
489   - <template slot="items" slot-scope="props">
490   - <tr class="tr">
491   - <td class="td td-row">{{ props.index + 1 }}</td>
492   - <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
493   - <td class="text-xs-center td td-row">{{ props.item.paymentMethod }}</td>
494   - <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
495   - <td class="text-xs-center td td-row">{{ feeType.discount}}</td>
496   -
497   - <td class="text-xs-center td td-row">
498   - <router-link
499   - :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:props.item._id } }"
500   - >
501   - <v-tooltip top>
502   - <img
503   - slot="activator"
504   - style="cursor:pointer; width:25px; height:25px; "
505   - class="mr-3"
506   - src="/static/icon/view.png"
507   - />
508   - <span>View</span>
509   - </v-tooltip>
510   - </router-link>
511   - <v-tooltip top>
512   - <img
513   - slot="activator"
514   - style="cursor:pointer;width:20px; height:20px; "
515   - class="mr-3"
516   - @click="deleteItem(props.item)"
517   - src="/static/icon/delete.png"
518   - />
519   - <span>Delete</span>
520   - </v-tooltip>
521   - </td>
522   - </tr>
523   - </template>
524   - <v-alert
525   - slot="no-results"
526   - :value="true"
527   - color="error"
528   - icon="warning"
529   - >Your search for "{{ search }}" found no results.</v-alert>
530   - </v-data-table>
531   - <!-- <table class="feeTypeTable tableRsponsive">
  480 + <!-- <p>{{editedItem}}</p> -->
  481 + <table class="feeTypeTable tableRsponsive" >
532 482 <tr style="color: black">
533 483 <th>#</th>
534 484 <th>Date</th>
... ... @@ -537,17 +487,19 @@
537 487 <th>Weaver</th>
538 488 <th>Action</th>
539 489 </tr>
540   - <tr>
541   - <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
542   - <td style="width:120px" class="tdFeeType">{{dates( editedItem.date) }}</td>
543   - <td style="width:120px" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
544   - <td style="width:120px" class="tdFeeType">{{ editedItem.totalAmount }}</td>
545   - <td style="width:120px" class="tdFeeType">{{ editedItem.discount}}</td>
  490 + <tr
  491 + v-if="editedItem.paymentStatus !== 'NOT_PAID'"
  492 + >
  493 + <td style="width:40px ; color:black" class="tdFeeType">1</td>
  494 + <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
  495 + <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
  496 + <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalAmount }}</td>
  497 + <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
546 498 <td class="text-xs-center td td-row">
547 499 <router-link
548 500 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
549 501 >
550   - <v-tooltip top>
  502 + <v-tooltip top >
551 503 <img
552 504 slot="activator"
553 505 style="cursor:pointer; width:25px; height:25px; "
... ... @@ -569,11 +521,11 @@
569 521 </v-tooltip>
570 522 </td>
571 523 </tr>
572   - </table>-->
  524 + </table>
573 525 </v-card>
574 526 </v-dialog>
575   - <!-- ****** Invoice Table ****** -->
576 527  
  528 + <!-- ****** Invoice Table ****** -->
577 529 <v-toolbar color="transparent" flat>
578 530 <v-btn
579 531 fab
... ... @@ -720,6 +672,7 @@
720 672 icon="warning"
721 673 >Your search for "{{ search }}" found no results.</v-alert>
722 674 </v-data-table>
  675 +
723 676 <!-- ****** ADD INVOICE ****** -->
724 677 <v-snackbar
725 678 :timeout="timeout"
... ... @@ -975,10 +928,10 @@
975 928 <tfoot>
976 929 <tr>
977 930 <td colspan="2" class="tdFeeType">Total:</td>
978   - <td class="tdFeeType" :rules="amountRules">{{ feeType.amount }}</td>
979   - <td class="tdFeeType" :rules="discountRules">{{ feeType.discount }}</td>
980   - <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
981   - <td class="tdFeeType" :rules="paidAmountRules">{{ feeType.paidAmount }}</td>
  931 + <td class="tdFeeType">{{ feeType.amount }}</td>
  932 + <td class="tdFeeType">{{ feeType.discount }}</td>
  933 + <td class="tdFeeType">{{ feeType.subTotal }}</td>
  934 + <td class="tdFeeType">{{ feeType.paidAmount }}</td>
982 935 <td class="tdFeeType">
983 936 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
984 937 </td>
... ... @@ -1024,7 +977,7 @@ export default {
1024 977 validEdit: true,
1025 978 isActive: true,
1026 979 newActive: false,
1027   - showFeeType: false,
  980 + showFeeType: true,
1028 981 addInvoiceDialog: false,
1029 982 editInvoiceDialog: false,
1030 983 paymentInvoiceDialog: false,
... ... @@ -1032,17 +985,8 @@ export default {
1032 985 details: [],
1033 986 feeTypes: [],
1034 987 invoiceData: [],
1035   - invoiceList: [
1036   - {
1037   - studentId: {
1038   - name: "",
1039   - rollNo: "",
1040   - },
1041   - classId: {
1042   - classNum: ""
1043   - }
1044   - }
1045   - ],
  988 + invoiceList: [],
  989 + editPayment: [{}],
1046 990 menu1: false,
1047 991 paymentMethods: ["Cash", "Cheque"],
1048 992 feeType: {
... ... @@ -1117,40 +1061,7 @@ export default {
1117 1061 },
1118 1062 { text: "Action", value: "", sortable: false, align: "center" }
1119 1063 ],
1120   - headersProfile: [
1121   - {
1122   - text: "No",
1123   - align: "",
1124   - sortable: false,
1125   - value: "No"
1126   - },
1127   - {
1128   - text: "Date",
1129   - value: "date",
1130   - sortable: false,
1131   - align: "center"
1132   - },
1133   - {
1134   - text: "Paid By",
1135   - value: "paymentMethod",
1136   - sortable: false,
1137   - align: "center"
1138   - },
1139   - {
1140   - text: "Payment Amount",
1141   - value: "paidAmount",
1142   - sortable: false,
1143   - align: "center"
1144   - },
1145   - { text: "Weaver", value: "discount", sortable: false, align: "center" },
1146   - // {
1147   - // text: "Fine",
1148   - // value: "fine",
1149   - // sortable: false,
1150   - // align: "center"
1151   - // },
1152   - { text: "Action", value: "", sortable: false, align: "center" }
1153   - ],
  1064 +
1154 1065 studentId: {
1155 1066 name: ""
1156 1067 },
... ... @@ -1185,18 +1096,23 @@ export default {
1185 1096 return moment(date).format("MMMM DD, YYYY");
1186 1097 },
1187 1098 profile(item) {
  1099 + // console.log("item", item);
1188 1100 this.editedIndex = this.invoiceList.indexOf(item);
1189 1101 this.editedItem = Object.assign({}, item);
  1102 + // console.log("editedItem",this.editedItem);
1190 1103 this.dialog1 = true;
1191 1104 },
1192 1105 editItem(item) {
1193 1106 this.editedIndex = this.invoiceList.indexOf(item);
1194 1107 this.invoiceData = Object.assign({}, item);
  1108 + // console.log("invoiceData", this.invoiceData);
  1109 + this.feeTypeData = this.invoiceData.feeType;
1195 1110 this.editInvoiceDialog = true;
1196 1111 },
1197 1112 paymentItem(item) {
1198 1113 this.editedIndex = this.invoiceList.indexOf(item);
1199   - this.invoiceList = Object.assign({}, item);
  1114 + this.editPayment = Object.assign({}, item);
  1115 + this.feeTypeData = this.editPayment.feeType;
1200 1116 this.paymentInvoiceDialog = true;
1201 1117 },
1202 1118 deleteItem(item) {
... ... @@ -1318,6 +1234,30 @@ export default {
1318 1234 this.color = "red";
1319 1235 });
1320 1236 },
  1237 + add() {
  1238 + var updatePayment = {
  1239 + invoiceId: this.editPayment._id,
  1240 + totalPaidAmount: this.editPayment.paidAmount
  1241 + };
  1242 + http()
  1243 + .put("/updateInvoice", updatePayment, {
  1244 + headers: {
  1245 + Authorization: "Bearer " + this.token
  1246 + }
  1247 + })
  1248 + .then(response => {
  1249 + this.getInvoiceList();
  1250 + this.snackbar = true;
  1251 + this.text = response.data.message;
  1252 + this.color = "green";
  1253 + this.paymentInvoiceDialog = false;
  1254 + })
  1255 + .catch(error => {
  1256 + console.log("error", error);
  1257 + this.snackbar = true;
  1258 + this.color = "red";
  1259 + });
  1260 + },
1321 1261 clear() {
1322 1262 this.$refs.form.reset();
1323 1263 },
... ... @@ -1415,14 +1355,7 @@ export default {
1415 1355 // this.$router.replace({ path: "/" });
1416 1356 });
1417 1357 },
1418   - getPaymentDetails(feeTyp) {
1419   - let feeType = {
1420   - date: "",
1421   - paymentMethod: "",
1422   - totalAmount: "",
1423   - discount: ""
1424   - };
1425   - },
  1358 +
1426 1359 getAmmountDetails(feeTyp) {
1427 1360 let feeType = {
1428 1361 amount: "",
... ...
src/pages/NoticeBoard/noticeBoard.vue
Diff comments   View file @b975923
... ... @@ -200,6 +200,14 @@
200 200 </td>
201 201 <td class="text-xs-center td td-row">{{ props.item.title}}</td>
202 202 <td class="text-xs-center td td-row">
  203 + <v-btn
  204 + class="add-button"
  205 + @click="generatePDF2Canvas(props.item)"
  206 + :loading="loadingPdf"
  207 + dark
  208 + >{{ props.item.fileType }}</v-btn>
  209 + </td>
  210 + <td class="text-xs-center td td-row">
203 211 <span>
204 212 <v-tooltip top>
205 213 <img
... ... @@ -314,6 +322,13 @@
314 322 v-model="imageName"
315 323 append-icon="attach_file"
316 324 ></v-text-field>
  325 + <input
  326 + type="file"
  327 + style="display:none"
  328 + ref="image"
  329 + accept="image/*"
  330 + @change="onFilePicked"
  331 + />
317 332 </v-flex>
318 333 </v-layout>
319 334 <v-layout>
... ... @@ -377,6 +392,8 @@ export default {
377 392 imageUrl: "",
378 393 imageFile: "",
379 394 upload: "",
  395 + loadingPdf: false,
  396 +
380 397 titleRules: [v => !!v || " Title is required"],
381 398 descriptionRules: [v => !!v || " Description is required"],
382 399 headers: [
... ... @@ -393,6 +410,12 @@ export default {
393 410 value: "eventImageUrl"
394 411 },
395 412 { text: "Title", value: "title", sortable: false, align: "center" },
  413 + {
  414 + text: "File",
  415 + value: "eventImageUrl",
  416 + sortable: false,
  417 + align: "center"
  418 + },
396 419 { text: "Action", value: "", sortable: false, align: "center" }
397 420 ],
398 421 notices: [],
... ... @@ -407,29 +430,6 @@ export default {
407 430 pickFile() {
408 431 this.$refs.image.click();
409 432 },
410   -
411   - onFilePicked(e) {
412   - // console.log(e)
413   - const files = e.target.files;
414   - this.upload = e.target.files[0];
415   - console.log("thisupload==>", this.upload);
416   - if (files[0] !== undefined) {
417   - this.imageName = files[0].name;
418   - if (this.imageName.lastIndexOf(".") <= 0) {
419   - return;
420   - }
421   - const fr = new FileReader();
422   - fr.readAsDataURL(files[0]);
423   - fr.addEventListener("load", () => {
424   - this.imageUrl = fr.result;
425   - this.imageFile = files[0]; // this is an image file that can be sent to server...
426   - });
427   - } else {
428   - this.imageName = "";
429   - this.imageFile = "";
430   - this.imageUrl = "";
431   - }
432   - },
433 433 getNoticeDataList() {
434 434 this.showLoader = true;
435 435 var token = this.$store.state.token;
... ... @@ -476,21 +476,43 @@ export default {
476 476 if ((this.snackbar = true)) {
477 477 this.text = "Successfully delete Existing Notice Data";
478 478 }
  479 + this.snackbar = true;
  480 + this.color = "green";
479 481 this.getNoticeDataList();
480 482 })
481 483 .catch(error => {
482 484 // console.log(error);
  485 + this.snackbar = true;
  486 + this.text = error.response.data.message;
  487 + this.color = "error";
483 488 });
484 489 },
485 490 close() {
486 491 this.editNoticeBoardDialog = false;
487 492 },
488 493 submit() {
  494 + var signatures = {
  495 + JVBERi0: "other",
  496 + iVBORw0KGgo: "image",
  497 + UEsDBBQ: "other",
  498 + "/": "image",
  499 + AAABAA: "image",
  500 + IywiV2hhdC: "other",
  501 + bmFtZSxl: "other"
  502 + };
  503 + function detectMimeType(b64) {
  504 + for (var s in signatures) {
  505 + if (b64.indexOf(s) === 0) {
  506 + return signatures[s];
  507 + }
  508 + }
  509 + }
489 510 if (this.$refs.form.validate()) {
490 511 if (this.imageUrl) {
491 512 var str = this.imageUrl;
492 513 const [baseUrl, imageUrl] = str.split(/,/);
493 514 this.addNoticeBoard.upload = imageUrl;
  515 + this.addNoticeBoard.fileType = detectMimeType(imageUrl);
494 516 }
495 517 http()
496 518 .post("/createEvent", this.addNoticeBoard)
... ... @@ -510,6 +532,27 @@ export default {
510 532 });
511 533 }
512 534 },
  535 + onFilePicked(e) {
  536 + const files = e.target.files;
  537 + this.upload = e.target.files[0];
  538 + if (files[0] !== undefined) {
  539 + this.imageName = files[0].name;
  540 + if (this.imageName.lastIndexOf(".") <= 0) {
  541 + return;
  542 + }
  543 + const fr = new FileReader();
  544 + fr.readAsDataURL(files[0]);
  545 + fr.addEventListener("load", () => {
  546 + this.imageUrl = fr.result;
  547 + this.imageFile = files[0]; // this is an image file that can be sent to server...
  548 + this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  549 + });
  550 + } else {
  551 + this.imageName = "";
  552 + this.imageFile = "";
  553 + this.imageUrl = "";
  554 + }
  555 + },
513 556 clear() {
514 557 this.$refs.form.reset();
515 558 this.imageUrl = "";
... ... @@ -520,10 +563,26 @@ export default {
520 563 title: this.editedItem.title,
521 564 description: this.editedItem.description
522 565 };
  566 + var signatures = {
  567 + JVBERi0: "other",
  568 + iVBORw0KGgo: "image",
  569 + UEsDBBQ: "other",
  570 + "/": "image",
  571 + AAABAA: "image",
  572 + IywiV2hhdC: "other"
  573 + };
  574 + function detectMimeType(b64) {
  575 + for (var s in signatures) {
  576 + if (b64.indexOf(s) === 0) {
  577 + return signatures[s];
  578 + }
  579 + }
  580 + }
523 581 if (this.imageUrl) {
524 582 var str = this.imageUrl;
525 583 const [baseUrl, imageUrl] = str.split(/,/);
526 584 editNoticeBoard.upload = imageUrl;
  585 + editNoticeBoard.fileType = detectMimeType(imageUrl);
527 586 }
528 587 http()
529 588 .put("/updateEvent", editNoticeBoard)
... ... @@ -545,6 +604,18 @@ export default {
545 604 this.showSearch = false;
546 605 this.show = true;
547 606 this.search = "";
  607 + },
  608 + async generatePDF2Canvas(item) {
  609 + var dataType = "";
  610 + var type = "";
  611 + if (item.fileType == "image") {
  612 + dataType = "file.jpg";
  613 + } else if (item.fileType == "other") {
  614 + dataType = "file.pdf";
  615 + type = "application/pdf";
  616 + }
  617 + var FileSaver = require("file-saver");
  618 + FileSaver.saveAs(item.eventImageUrl, "image.jpg");
548 619 }
549 620 },
550 621 mounted() {
... ...