viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 5b841b043e3b1ebd4317caa474c0d61d9d2e41fa

Authored by Neeraj Sharma
1 parent ebe04cc1d7
Exists in master and in 3 other branches amber-development, development, ui-design

fix upload dyanmic images in all api

Showing 2 changed files with 234 additions and 193 deletions   Show diff stats
src/pages/News/news.vue
Diff comments   View file @5b841b0
1 1 <template>
2 2 <v-app id="pages-dasboard">
3   - <v-toolbar class="fixcolors" fixed app>
  3 + <v-toolbar class="fixcolors" fixed app>
4 4 <v-toolbar-title class="ml-0 pl-3">
5 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 6 </v-toolbar-title>
... ... @@ -20,7 +20,7 @@
20 20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
21 21 <v-btn icon large flat slot="activator">
22 22 <v-avatar size="40px">
23   - <img src="/static/icon/user.png">
  23 + <img src="/static/icon/user.png" />
24 24 </v-avatar>
25 25 </v-btn>
26 26 <v-list class="pa-0">
... ... @@ -74,38 +74,62 @@
74 74 color="success"
75 75 >{{ text }}</v-snackbar>
76 76 <v-dialog v-model="dialog" max-width="1000px" scrollable>
77   - <v-card flat>
78   - <v-toolbar class="grey lighten-2" flat>
  77 + <v-card flat>
  78 + <v-toolbar class="grey lighten-2" flat>
79 79 <v-spacer></v-spacer>
80   - <v-toolbar-title > <h3>Edit News</h3></v-toolbar-title>
  80 + <v-toolbar-title>
  81 + <h3>Edit News</h3>
  82 + </v-toolbar-title>
81 83 <v-spacer></v-spacer>
82   - </v-toolbar>
83   - <v-card-text style="height:600px;">
  84 + </v-toolbar>
  85 + <v-card-text style="height:600px;">
84 86 <v-form ref="form">
85 87 <v-container fluid>
86 88 <v-layout row>
87   - <v-flex
  89 + <v-flex
88 90 xs12
89 91 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
90 92 >
91 93 <input
92 94 type="file"
93   - style = "display: none"
  95 + style="display: none"
94 96 ref="image"
95 97 accept="image/*"
96 98 multiple
97 99 @change="onFilePicked"
98   - >
  100 + />
99 101 <v-layout justify-center>
100   - <v-flex xs3 v-for="Image in editedItem.newsImageUrl" :key="Image._id" v-if="editedItem.newsImageUrl" class="profile-image-wrapper">
101   - <img :src="Image.imageUrl" height="160" width="160" alt="News" class="pa-2">
102   - <v-icon class="red edit-profile-icon" dark @click="deleteImage(Image._id,editedItem._id)">close</v-icon>
103   - </v-flex>
104   - <v-flex v-for="(file, index) in files" :key="index">
105   - <img :src="file" height="160" width="160" class="pa-2">
106   - </v-flex>
107   - </v-layout>
108   - <img src="/static/icon/user.png" v-if="editedItem.newsImageUrl ==''" height="160" width="160" alt="News">
  102 + <v-flex
  103 + xs3
  104 + v-for="Image in editedItem.newsImageUrl"
  105 + :key="Image._id"
  106 + v-if="editedItem.newsImageUrl"
  107 + class="profile-image-wrapper"
  108 + >
  109 + <img
  110 + :src="Image.imageUrl"
  111 + height="160"
  112 + width="160"
  113 + alt="News"
  114 + class="pa-2"
  115 + />
  116 + <v-icon
  117 + class="red edit-profile-icon"
  118 + dark
  119 + @click="deleteImage(Image._id,editedItem._id)"
  120 + >close</v-icon>
  121 + </v-flex>
  122 + <v-flex v-for="(file, index) in files" :key="index">
  123 + <img :src="file" height="160" width="160" class="pa-2" />
  124 + </v-flex>
  125 + </v-layout>
  126 + <img
  127 + src="/static/icon/user.png"
  128 + v-if="editedItem.newsImageUrl ==''"
  129 + height="160"
  130 + width="160"
  131 + alt="News"
  132 + />
109 133 </v-flex>
110 134 </v-layout>
111 135 <!-- </v-layout> -->
... ... @@ -156,8 +180,8 @@
156 180 multiple
157 181 ></v-text-field>
158 182 </v-flex>
159   - </v-layout>
160   - </v-flex>
  183 + </v-layout>
  184 + </v-flex>
161 185 </v-layout>
162 186 <v-layout>
163 187 <v-flex xs12 sm8 offset-sm2>
... ... @@ -170,8 +194,8 @@
170 194 </v-layout>
171 195 </v-container>
172 196 </v-form>
173   - </v-card-text>
174   - </v-card>
  197 + </v-card-text>
  198 + </v-card>
175 199 </v-dialog>
176 200  
177 201 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
... ... @@ -179,18 +203,20 @@
179 203 <v-dialog v-model="dialog1" max-width="800px">
180 204 <v-card>
181 205 <v-toolbar color="grey lighten-2" flat>
182   - <v-spacer></v-spacer>
183   - <v-toolbar-title><h3>News</h3></v-toolbar-title>
184   - <v-spacer></v-spacer>
185   - <v-icon @click="close1">close</v-icon>
186   - </v-toolbar>
187   - <v-flex align-center justify-center layout text-xs-center >
  206 + <v-spacer></v-spacer>
  207 + <v-toolbar-title>
  208 + <h3>News</h3>
  209 + </v-toolbar-title>
  210 + <v-spacer></v-spacer>
  211 + <v-icon @click="close1">close</v-icon>
  212 + </v-toolbar>
  213 + <v-flex align-center justify-center layout text-xs-center>
188 214 <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
189 215 <img src="/static/icon/user.png">
190   - </v-avatar> -->
  216 + </v-avatar>-->
191 217 <span v-for="(image,i) in editedItem.newsImageUrl" :key="i" class="mt-4 pa-2">
192   - <img :src="image.imageUrl" alt="News" width="240" height="180">
193   - </span>
  218 + <img :src="image.imageUrl" alt="News" width="240" height="180" />
  219 + </span>
194 220 </v-flex>
195 221 <v-card-text>
196 222 <v-container grid-list-md>
... ... @@ -198,7 +224,9 @@
198 224 <v-flex>
199 225 <v-layout>
200 226 <v-flex xs5 sm6>
201   - <h5 class = "right my-1"><b>Title:</b></h5>
  227 + <h5 class="right my-1">
  228 + <b>Title:</b>
  229 + </h5>
202 230 </v-flex>
203 231 <v-flex sm6 xs8>
204 232 <h5 class="my-1">{{ editedItem.title }}</h5>
... ... @@ -206,7 +234,9 @@
206 234 </v-layout>
207 235 <v-layout>
208 236 <v-flex xs5 sm6>
209   - <h5 class="right my-1"><b>Description:</b></h5>
  237 + <h5 class="right my-1">
  238 + <b>Description:</b>
  239 + </h5>
210 240 </v-flex>
211 241 <v-flex sm6 xs8>
212 242 <h5 class="my-1">{{ editedItem.description }}</h5>
... ... @@ -237,11 +267,11 @@
237 267 >
238 268 <template slot="items" slot-scope="props">
239 269 <td class="text-xs-center">{{ props.index}}</td>
240   - <td id="td"class="text-xs-center">
241   - <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
242   - <img :src="image.imageUrl" alt="newsImage" width="100" height="70">
243   - </span>
244   - </td>
  270 + <td id="td" class="text-xs-center">
  271 + <span v-for="(image,_id) in props.item.newsImageUrl" class="pa-2">
  272 + <img :src="image.imageUrl" alt="newsImage" width="100" height="70" />
  273 + </span>
  274 + </td>
245 275 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
246 276 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
247 277  
... ... @@ -252,19 +282,19 @@
252 282 class="mr-5"
253 283 @click="profile(props.item)"
254 284 src="/static/icon/eye1.png"
255   - >
  285 + />
256 286 <img
257 287 style="cursor:pointer; width:20px; height:18px; "
258 288 class="mr-5"
259 289 @click="editItem(props.item)"
260 290 src="/static/icon/edit1.png"
261   - >
  291 + />
262 292 <img
263 293 style="cursor:pointer;width:20px; height:20px; "
264 294 class="mr-5"
265 295 @click="deleteItem(props.item)"
266 296 src="/static/icon/delete1.png"
267   - >
  297 + />
268 298 </span>
269 299 </td>
270 300 </template>
... ... @@ -300,70 +330,75 @@
300 330 >
301 331 <input
302 332 type="file"
303   - style = "display: none"
  333 + style="display: none"
304 334 ref="image"
305 335 accept="image/*"
306 336 multiple
307 337 @change="onFilePicked"
308   - >
  338 + />
309 339 <v-layout justify-center>
310   - <v-flex v-for="(file,index) in files" :key="index" v-if="files">
311   - <img :src="file" height="160" width="160px;">
312   - </v-flex>
313   - </v-layout>
314   - <img src="/static/icon/user.png" v-if="files ==''" height="140" width="180px;">
315   - </v-flex>
316   - </v-layout>
317   - <v-flex xs12>
318   - <v-layout>
319   - <v-flex xs4 class="pt-4 subheading">
320   - <label class="right">Title:</label>
321   - </v-flex>
322   - <v-flex xs4 class="ml-3">
323   - <v-text-field
324   - v-model="addNews.title"
325   - placeholder="fill your Title"
326   - name="name"
327   - type="text"
328   - :rules="titleRules"
329   - required
330   - ></v-text-field>
  340 + <v-flex v-for="(file,index) in files" :key="index" v-if="files">
  341 + <img :src="file" height="160" width="160px;" />
331 342 </v-flex>
332 343 </v-layout>
  344 + <img
  345 + src="/static/icon/user.png"
  346 + v-if="files ==''"
  347 + height="140"
  348 + width="180px;"
  349 + />
333 350 </v-flex>
334   - <v-flex xs12>
335   - <v-layout>
336   - <v-flex xs4 class="pt-4 subheading">
337   - <label class="right">Description:</label>
338   - </v-flex>
339   - <v-flex xs4 class="ml-3">
340   - <v-text-field
341   - placeholder="fill your Description"
342   - :rules="descriptionRules"
343   - v-model="addNews.description"
344   - type="text"
345   - name="email"
346   - required
347   - ></v-text-field>
348   - </v-flex>
349   - </v-layout>
350   - </v-flex>
351   - <v-flex xs12>
352   - <v-layout>
353   - <v-flex xs4 class="pt-4 subheading">
354   - <label class="right">Uplaod Image:</label>
355   - </v-flex>
356   - <v-flex xs4 class="ml-3">
357   - <v-text-field
358   - label="Select Image"
359   - @click="pickFile"
360   - v-model="imageName"
361   - append-icon="attach_file"
362   - multiple
363   - ></v-text-field>
364   - </v-flex>
  351 + </v-layout>
  352 + <v-flex xs12>
  353 + <v-layout>
  354 + <v-flex xs4 class="pt-4 subheading">
  355 + <label class="right">Title:</label>
  356 + </v-flex>
  357 + <v-flex xs4 class="ml-3">
  358 + <v-text-field
  359 + v-model="addNews.title"
  360 + placeholder="fill your Title"
  361 + name="name"
  362 + type="text"
  363 + :rules="titleRules"
  364 + required
  365 + ></v-text-field>
  366 + </v-flex>
  367 + </v-layout>
  368 + </v-flex>
  369 + <v-flex xs12>
  370 + <v-layout>
  371 + <v-flex xs4 class="pt-4 subheading">
  372 + <label class="right">Description:</label>
  373 + </v-flex>
  374 + <v-flex xs4 class="ml-3">
  375 + <v-text-field
  376 + placeholder="fill your Description"
  377 + :rules="descriptionRules"
  378 + v-model="addNews.description"
  379 + type="text"
  380 + name="email"
  381 + required
  382 + ></v-text-field>
  383 + </v-flex>
365 384 </v-layout>
366   - </v-flex>
  385 + </v-flex>
  386 + <v-flex xs12>
  387 + <v-layout>
  388 + <v-flex xs4 class="pt-4 subheading">
  389 + <label class="right">Uplaod Image:</label>
  390 + </v-flex>
  391 + <v-flex xs4 class="ml-3">
  392 + <v-text-field
  393 + label="Select Image"
  394 + @click="pickFile"
  395 + v-model="imageName"
  396 + append-icon="attach_file"
  397 + multiple
  398 + ></v-text-field>
  399 + </v-flex>
  400 + </v-layout>
  401 + </v-flex>
367 402 <v-layout>
368 403 <v-flex xs12 sm6 offset-sm3>
369 404 <v-card-actions>
... ... @@ -401,7 +436,7 @@ export default {
401 436 loading: false,
402 437 date: null,
403 438 search: "",
404   - showLoader:false,
  439 + showLoader: false,
405 440 dialog: false,
406 441 dialog1: false,
407 442 valid: true,
... ... @@ -417,8 +452,8 @@ export default {
417 452 imageUrl: "",
418 453 imageFile: "",
419 454 image: [],
420   - upload:"",
421   - files:[],
  455 + upload: "",
  456 + files: [],
422 457 titleRules: [v => !!v || " Tilte is required"],
423 458 descriptionRules: [v => !!v || " Description is required"],
424 459 headers: [
... ... @@ -428,26 +463,31 @@ export default {
428 463 sortable: false,
429 464 value: "No"
430 465 },
431   - { text: "Image", vaue: "image",sortable: false, align: "center"},
  466 + { text: "Image", vaue: "image", sortable: false, align: "center" },
432 467 { text: "Title", value: "title", sortable: false, align: "center" },
433   - { text: "Description", value: "description", sortable: false, align: "center" },
  468 + {
  469 + text: "Description",
  470 + value: "description",
  471 + sortable: false,
  472 + align: "center"
  473 + },
434 474 { text: "Action", value: "", sortable: false, align: "center" }
435 475 ],
436   - desserts: [{
437   - image:"https://picsum.photos/500/300?image",
438   - title:"title",
439   - description:"description",
440   -
441   - }],
  476 + desserts: [
  477 + {
  478 + image: "https://picsum.photos/500/300?image",
  479 + title: "title",
  480 + description: "description"
  481 + }
  482 + ],
442 483 editedIndex: -1,
443 484 addNews: {
444 485 title: "",
445   - description: "",
  486 + description: ""
446 487 },
447 488 editedItem: {
448 489 title: "",
449   - description: "",
450   -
  490 + description: ""
451 491 },
452 492 defaultItem: {
453 493 title: "",
... ... @@ -473,7 +513,7 @@ export default {
473 513 }),
474 514 methods: {
475 515 getSections(_id) {
476   - console.log("_id",_id)
  516 + console.log("_id", _id);
477 517 var token = this.$store.state.token;
478 518 http()
479 519 .get(
... ... @@ -498,36 +538,36 @@ export default {
498 538 onFilePicked(e) {
499 539 // console.log(e)
500 540 const files = e.target.files;
501   - /** fetch Image Name **/
  541 + /** fetch Image Name **/
502 542 if (files[0] !== undefined) {
503 543 this.imageName = files[0].name;
504 544 if (this.imageName.lastIndexOf(".") <= 0) {
505 545 return;
506   - }
507   - this.files = [];
508   - // console.log("files", this.files);
509   - /** Select many image and showing many image add to news card **/
510   - const test = Array.from(files).forEach((file, idx) => {
511   - const fr = new FileReader();
512   - const getResult = new Promise(resolve => {
513   - fr.onload = e => {
514   - this.files.push(
515   - // id: idx,
516   - e.target.result
517   - );
518   - };
  546 + }
  547 + this.files = [];
  548 + // console.log("files", this.files);
  549 + /** Select many image and showing many image add to news card **/
  550 + const test = Array.from(files).forEach((file, idx) => {
  551 + const fr = new FileReader();
  552 + const getResult = new Promise(resolve => {
  553 + fr.onload = e => {
  554 + this.files.push(
  555 + // id: idx,
  556 + e.target.result
  557 + );
  558 + };
  559 + });
  560 + fr.readAsDataURL(file);
  561 + return getResult.then(file => {
  562 + return file;
  563 + });
519 564 });
520   - fr.readAsDataURL(file);
521   - return getResult.then(file => {
522   - return file;
  565 + const fr = new FileReader();
  566 + fr.readAsDataURL(files[0]);
  567 + fr.addEventListener("load", () => {
  568 + this.imageFile = files; // this is an image file that can be sent to server...
  569 + // console.log("uploadImage=======>", this.imageFile );
523 570 });
524   - });
525   - const fr = new FileReader();
526   - fr.readAsDataURL(files[0]);
527   - fr.addEventListener("load", () => {
528   - this.imageFile = files; // this is an image file that can be sent to server...
529   - // console.log("uploadImage=======>", this.imageFile );
530   - });
531 571 } else {
532 572 this.imageName = "";
533 573 this.imageFile = "";
... ... @@ -585,16 +625,16 @@ export default {
585 625 // console.log(error);
586 626 });
587 627 },
588   - deleteImage(imageId, newsId){
589   - console.log(imageId, newsId)
590   - let deleteImages = {
  628 + deleteImage(imageId, newsId) {
  629 + console.log(imageId, newsId);
  630 + let deleteImages = {
591 631 newsId: newsId,
592 632 imageId: imageId
593 633 };
594 634 http()
595 635 .put("/deleteImages", deleteImages)
596 636 .then(response => {
597   - console.log("deleteNews",deleteImages)
  637 + console.log("deleteNews", deleteImages);
598 638 if ((this.snackbar = true)) {
599 639 this.text = "Image deleted Successfully";
600 640 }
... ... @@ -629,26 +669,26 @@ export default {
629 669 this.dialog1 = false;
630 670 },
631 671 submit() {
632   - console.log("===========>",this.image)
633 672 this.loading = true;
634 673 if (this.$refs.form.validate()) {
635   - // let newsData = new FormData();
636   - // for( var i = 0; i < this.imageFile.length; i++ ){
637   - // let file = this.imageFile[i];
638   - // newsData.append("upload", file );
639   - // }
640   - // newsData.append("title",this.addNews.title);
641   - // newsData.append("description",this.addNews.description);
642   - // console.log("newsDataData",newsData);
643   - let newsData ={
644   - title:this.addNews.title,
645   - description:this.addNews.description,
646   - upload:this.files
  674 + let newsData = {
  675 + title: this.addNews.title,
  676 + description: this.addNews.description
  677 + };
  678 + if (this.files) {
  679 + var ary = [];
  680 + var imageData = [];
  681 + ary = this.files;
  682 + for (let i = 0; i < ary.length; i++) {
  683 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  684 + imageData.push(imageUrl);
  685 + newsData.upload = imageData;
  686 + }
647 687 }
648 688 http()
649 689 .post("/createNews", newsData)
650 690 .then(response => {
651   - console.log(newsData)
  691 + console.log(newsData);
652 692 if ((this.snackbar = true)) {
653 693 this.text = "New News added successfully";
654 694 }
... ... @@ -669,18 +709,21 @@ export default {
669 709 this.$refs.form.reset();
670 710 },
671 711 save() {
672   - // let imageData = new FormData();
673   - // for( var i = 0; i < this.imageFile.length; i++ ){
674   - // let file = this.imageFile[i];
675   - // imageData.append("upload", file );
676   - // }
677   - // console.log(imageData)
678   - let editNews = {
679   - title:this.editedItem.title,
680   - description:this.editedItem.description,
681   - newsId:this.editedItem._id,
682   - upload:this.files
683   - }
  712 + let editNews = {
  713 + title: this.editedItem.title,
  714 + description: this.editedItem.description,
  715 + newsId: this.editedItem._id,
  716 + };
  717 + if (this.files) {
  718 + var ary = [];
  719 + var imageData = [];
  720 + ary = this.files;
  721 + for (let i = 0; i < ary.length; i++) {
  722 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  723 + imageData.push(imageUrl);
  724 + editNews.upload = imageData;
  725 + }
  726 + }
684 727 http()
685 728 .put("/updateNews", editNews)
686 729 .then(response => {
... ... @@ -704,19 +747,19 @@ export default {
704 747 },
705 748 mounted() {
706 749 this.getNewsList();
707   - var token = this.$store.state.token;
708   - http()
709   - .get("/getClassesList", {
710   - headers: { Authorization: "Bearer " + token }
711   - })
712   - .then(response => {
713   - this.addclass = response.data.data;
714   - // console.log("getClassesList=====>",this.addclass)
715   - })
716   - .catch(err => {
717   - // console.log("err====>", err);
718   - });
719   - this.editItem
  750 + // var token = this.$store.state.token;
  751 + // http()
  752 + // .get("/getClassesList", {
  753 + // headers: { Authorization: "Bearer " + token }
  754 + // })
  755 + // .then(response => {
  756 + // this.addclass = response.data.data;
  757 + // // console.log("getClassesList=====>",this.addclass)
  758 + // })
  759 + // .catch(err => {
  760 + // // console.log("err====>", err);
  761 + // });
  762 + this.editItem;
720 763 },
721 764 computed: {
722 765 toolbarColor() {
... ... @@ -727,7 +770,7 @@ export default {
727 770 </script>
728 771 <style scoped>
729 772 .pl-3 {
730   - padding-left: 0px !important;
  773 + padding-left: 0px !important;
731 774 }
732 775 .v-tabs__div {
733 776 text-transform: none;
... ... @@ -812,25 +855,25 @@ h4 {
812 855 .v-tabs__item a {
813 856 font-size: 16px !important;
814 857 }
815   -.list{
  858 +.list {
816 859 padding: 0 0px !important;
817 860 }
818 861 .profile-image-wrapper {
819 862 position: relative;
820   - }
821   - .edit-profile-icon {
  863 +}
  864 +.edit-profile-icon {
822 865 position: absolute;
823 866 right: 15px;
824 867 top: 15px;
825 868 cursor: pointer;
826   - }
827   - .profile-image-wrapper > .edit-profile-icon {
828   - right: 10%;
829   - top: 0%;
830   - margin-top: 8px;
831   - border-radius: 50%;
832   - padding: 7px;
833   - font-size: 20px;
  869 +}
  870 +.profile-image-wrapper > .edit-profile-icon {
  871 + right: 10%;
  872 + top: 0%;
  873 + margin-top: 8px;
  874 + border-radius: 50%;
  875 + padding: 7px;
  876 + font-size: 20px;
834 877 }
835 878 @media screen and (max-width: 769px) {
836 879 .top {
... ...
src/pages/Students/students.vue
Diff comments   View file @5b841b0
... ... @@ -2076,7 +2076,6 @@ export default {
2076 2076 if (this.imageUrl) {
2077 2077 var str = this.imageUrl;
2078 2078 const [baseUrl, imageUrl] = str.split(/,/);
2079   - console.log("imageUrlimageUrlimageUrlimageUrl", imageUrl);
2080 2079 addStudent.upload = imageUrl;
2081 2080 }
2082 2081 this.loading = true;
... ... @@ -2132,7 +2131,6 @@ export default {
2132 2131 if (this.imageUrl) {
2133 2132 var str = this.imageUrl;
2134 2133 const [baseUrl, imageUrl] = str.split(/,/);
2135   - console.log("imageUrlimageUrlimageUrlimageUrl", imageUrl);
2136 2134 editStudent.upload = imageUrl;
2137 2135 }
2138 2136 http()
... ...