Commit 640c123208de07445be7688a54ec77364456b610
1 parent
120665d0a4
Exists in
admin
update module added
Showing
6 changed files
with
313 additions
and
24 deletions
Show diff stats
config/dev.env.js
src/components/CaseStudy.vue
| ... | ... | @@ -0,0 +1,164 @@ |
| 1 | +<template> | |
| 2 | + <main class="landing-page"> | |
| 3 | + <!-- profile --> | |
| 4 | + <div class="container-fluid inner-wrp" style="background: transparent"> | |
| 5 | + <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | + <a class="navbar-brand" href="#" | |
| 7 | + ><img src="../assets/images/logo.png" | |
| 8 | + /></a> | |
| 9 | + <button | |
| 10 | + class="navbar-toggler" | |
| 11 | + type="button" | |
| 12 | + data-toggle="collapse" | |
| 13 | + data-target="#navbarsExample03" | |
| 14 | + aria-controls="navbarsExample03" | |
| 15 | + aria-expanded="false" | |
| 16 | + aria-label="Toggle navigation" | |
| 17 | + > | |
| 18 | + <span class="navbar-toggler-icon"></span> | |
| 19 | + <span class="navbar-toggler-icon"></span> | |
| 20 | + <span class="navbar-toggler-icon"></span> | |
| 21 | + </button> | |
| 22 | + | |
| 23 | + <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 24 | + <ul class="navbar-nav mr-auto"> | |
| 25 | + <li class="nav-item active"> | |
| 26 | + <a class="nav-link" @click="create" style="cursor:pointer">Create Case Study</a> | |
| 27 | + </li> | |
| 28 | + <li class="nav-item active"> | |
| 29 | + <a class="nav-link" style="cursor:pointer">Create Insight</a> | |
| 30 | + </li> | |
| 31 | + </ul> | |
| 32 | + </div> | |
| 33 | + <div class=""> | |
| 34 | + <a href="javascript:void(0);" @click="logout">Log Out </a> | |
| 35 | + </div> | |
| 36 | + </nav> | |
| 37 | + <!-- menu wrapper --> | |
| 38 | + <!-- <div class="row profile-tab-spc-top"> | |
| 39 | + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 40 | + <div class="user-profile"> | |
| 41 | + <div class="form-group floating-label"> | |
| 42 | + <select | |
| 43 | + class="form-control" | |
| 44 | + v-model="userData" | |
| 45 | + v-on:change="selectUser(userData)" | |
| 46 | + > | |
| 47 | + <option value="null">Select User</option> | |
| 48 | + <option v-for="(user, i) in userList" :key="i" :value="i"> | |
| 49 | + {{ user.name }} ({{ user.email }}) | |
| 50 | + </option> | |
| 51 | + </select> | |
| 52 | + </div> | |
| 53 | + </div> | |
| 54 | + </div> | |
| 55 | + </div> --> | |
| 56 | + | |
| 57 | + <div class="row"> | |
| 58 | + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 59 | + <ul class="navbar-nav mr-auto"> | |
| 60 | + <li class="nav-item active"> | |
| 61 | + <h5 class="nav-link" > | |
| 62 | + <span style="cursor:pointer" >Case Study List</span></h5> | |
| 63 | + </li> | |
| 64 | + </ul> | |
| 65 | + </div> | |
| 66 | + </div> | |
| 67 | + <div class="row"> | |
| 68 | + <table> | |
| 69 | + <tr> | |
| 70 | + <th>Name</th> | |
| 71 | + <th>App</th> | |
| 72 | + <th>Authors</th> | |
| 73 | + <th>Action</th> | |
| 74 | + </tr> | |
| 75 | + <tr v-for="(study, j) in caseStudyList" | |
| 76 | + :key="j"> | |
| 77 | + <td>{{study.intro.name}}</td> | |
| 78 | + <td>{{study.intro.app}}</td> | |
| 79 | + <td>{{study.intro.authors[0]}}</td> | |
| 80 | + <td><a style="cursor:pointer" @click="edit(study)">Edit</a></td> | |
| 81 | + </tr> | |
| 82 | + </table> | |
| 83 | + </div> | |
| 84 | + <!-- 1st row --> | |
| 85 | + </div> | |
| 86 | + </main> | |
| 87 | +</template> | |
| 88 | + | |
| 89 | +<script> | |
| 90 | +import Vue from "vue"; | |
| 91 | +import router from "../router"; | |
| 92 | +import $ from "jquery"; | |
| 93 | +import axios from "axios"; | |
| 94 | + | |
| 95 | +export default { | |
| 96 | + name: "CaseStudy", | |
| 97 | + | |
| 98 | + data() { | |
| 99 | + return { | |
| 100 | + loggedinFlag: false, | |
| 101 | + usertoken: null, | |
| 102 | + userData: {}, | |
| 103 | + caseStudyList:[], | |
| 104 | + }; | |
| 105 | + }, | |
| 106 | + mounted() { | |
| 107 | + | |
| 108 | + var userdata = localStorage.getItem("spotlight_usertoken"); | |
| 109 | + if (userdata) { | |
| 110 | + userdata = JSON.parse(userdata); | |
| 111 | + this.usertoken = userdata.token; | |
| 112 | + this.getCaseSTudies(); | |
| 113 | + } | |
| 114 | + }, | |
| 115 | + methods: { | |
| 116 | + getCaseSTudies() { | |
| 117 | + axios | |
| 118 | + .get("/superAdmin/caseStudies", { | |
| 119 | + headers: { | |
| 120 | + Authorization: "Bearer " + this.usertoken, | |
| 121 | + }, | |
| 122 | + }) | |
| 123 | + .then((response) => { | |
| 124 | + this.caseStudyList = response.data.data.caseStudies; | |
| 125 | + console.log("response", response.data.data.caseStudies); | |
| 126 | + }) | |
| 127 | + .catch((error) => console.log(error)); | |
| 128 | + }, | |
| 129 | + edit(payload){ | |
| 130 | + console.log("study",payload) | |
| 131 | + localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload)) | |
| 132 | + this.$router.push("/profile?"+payload._id); | |
| 133 | + }, | |
| 134 | + create(){ | |
| 135 | + this.$router.push("/profile"); | |
| 136 | + }, | |
| 137 | + logout(){ | |
| 138 | + this.$router.push("/"); | |
| 139 | + } | |
| 140 | + }, | |
| 141 | +}; | |
| 142 | +</script> | |
| 143 | +<style> | |
| 144 | +.light-font-weight { | |
| 145 | + font-weight: 300 !important; | |
| 146 | +} | |
| 147 | + | |
| 148 | +table { | |
| 149 | + font-family: arial, sans-serif; | |
| 150 | + border-collapse: collapse; | |
| 151 | + width: 100%; | |
| 152 | +} | |
| 153 | + | |
| 154 | +td, | |
| 155 | +th { | |
| 156 | + border: 1px solid #000; | |
| 157 | + text-align: left; | |
| 158 | + padding: 8px; | |
| 159 | +} | |
| 160 | + | |
| 161 | +tr:nth-child(even) { | |
| 162 | + background-color: #dddddd; | |
| 163 | +} | |
| 164 | +</style> | ... | ... |
src/components/LandingPage.vue
| ... | ... | @@ -22,21 +22,23 @@ |
| 22 | 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 23 | 23 | <ul class="navbar-nav mr-auto"> |
| 24 | 24 | <li class="nav-item active"> |
| 25 | - <a class="nav-link" href="#">About</a> | |
| 25 | + <a class="nav-link" href="#"></a> | |
| 26 | 26 | </li> |
| 27 | 27 | <li class="nav-item"> |
| 28 | - <a class="nav-link" href="#">Masterclass</a> | |
| 28 | + <a class="nav-link" href="#"></a> | |
| 29 | 29 | </li> |
| 30 | 30 | <li class="nav-item"> |
| 31 | - <a class="nav-link" href="#">Stories</a> | |
| 31 | + <a class="nav-link" href="#"></a> | |
| 32 | 32 | </li> |
| 33 | 33 | <li class="nav-item spotLight-img"> |
| 34 | 34 | <a class="nav-link" href="#" |
| 35 | - ><img src="../assets/images/SPOTLight.svg" | |
| 36 | - /></a> | |
| 35 | + > | |
| 36 | + <!-- <img src="../assets/images/SPOTLight.svg" | |
| 37 | + /> --> | |
| 38 | + </a> | |
| 37 | 39 | </li> |
| 38 | 40 | <li class="nav-item"> |
| 39 | - <a class="nav-link" href="#">Library</a> | |
| 41 | + <a class="nav-link" href="#"></a> | |
| 40 | 42 | </li> |
| 41 | 43 | </ul> |
| 42 | 44 | </div> |
| ... | ... | @@ -118,7 +120,7 @@ export default { |
| 118 | 120 | this.$toaster.success(response.data.message) |
| 119 | 121 | if(response.data.status == 'success'){ |
| 120 | 122 | localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) |
| 121 | - this.$router.push("/profile"); | |
| 123 | + this.$router.push("/casestudy"); | |
| 122 | 124 | } |
| 123 | 125 | }) |
| 124 | 126 | .catch( (error) =>{ | ... | ... |
src/components/Profile.vue
| ... | ... | @@ -23,7 +23,10 @@ |
| 23 | 23 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 24 | 24 | <ul class="navbar-nav mr-auto"> |
| 25 | 25 | <li class="nav-item active"> |
| 26 | - <a class="nav-link">Create Case Study</a> | |
| 26 | + <a class="nav-link" style="cursor:pointer" @click="listPage">Case Study List</a> | |
| 27 | + </li> | |
| 28 | + <li class="nav-item active"> | |
| 29 | + <a class="nav-link" style="cursor:pointer">Create Insight</a> | |
| 27 | 30 | </li> |
| 28 | 31 | </ul> |
| 29 | 32 | </div> |
| ... | ... | @@ -40,6 +43,7 @@ |
| 40 | 43 | class="form-control" |
| 41 | 44 | v-model="userData" |
| 42 | 45 | v-on:change="selectUser(userData)" |
| 46 | + :disabled="editMode" | |
| 43 | 47 | > |
| 44 | 48 | <option value="null">Select User</option> |
| 45 | 49 | <option v-for="(user, i) in userList" :key="i" :value="i"> |
| ... | ... | @@ -180,19 +184,25 @@ |
| 180 | 184 | |
| 181 | 185 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 182 | 186 | <div class="form-group floating-label"> |
| 187 | + <label for="lname" class="lname">Select Insight Tags</label> | |
| 188 | + <select | |
| 189 | + class="form-control" | |
| 190 | + v-model="insightName" | |
| 191 | + @change="addInsight('insight')" | |
| 192 | + > | |
| 193 | + <option value="null">Select Insight Tag</option> | |
| 194 | + <option value="Design">Design</option> | |
| 195 | + <option value="Product">Product</option> | |
| 196 | + <option value="Marketing">Marketing</option> | |
| 197 | + <option value="Pricing">Pricing</option> | |
| 198 | + <option value="Psychology">Psychology</option> | |
| 199 | + </select> | |
| 200 | + </div> | |
| 201 | + </div> | |
| 202 | + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
| 203 | + <div class="form-group floating-label"> | |
| 183 | 204 | <label for="lname" class="lname"></label> |
| 184 | 205 | <ul class="interests"> |
| 185 | - <li> | |
| 186 | - <input | |
| 187 | - class="" | |
| 188 | - placeholder="Add Insight Tags" | |
| 189 | - v-model="insightName" | |
| 190 | - /> | |
| 191 | - <a href="javascript:void(0);" @click="addInsight('insight')" | |
| 192 | - ><img src="../assets/images/plus-circle.svg" | |
| 193 | - /></a> | |
| 194 | - </li> | |
| 195 | - | |
| 196 | 206 | <li |
| 197 | 207 | v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags" |
| 198 | 208 | :key="i" |
| ... | ... | @@ -413,6 +423,8 @@ export default { |
| 413 | 423 | data() { |
| 414 | 424 | return { |
| 415 | 425 | loggedinFlag: false, |
| 426 | + caseId: null, | |
| 427 | + editMode: false, | |
| 416 | 428 | userData: null, |
| 417 | 429 | usertoken: null, |
| 418 | 430 | insightName: null, |
| ... | ... | @@ -447,6 +459,20 @@ export default { |
| 447 | 459 | }; |
| 448 | 460 | }, |
| 449 | 461 | mounted() { |
| 462 | + if (this.$route.fullPath.split("?").length == 2) { | |
| 463 | + this.editMode = true; | |
| 464 | + this.caseId = this.$route.fullPath.split("?")[1]; | |
| 465 | + var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId); | |
| 466 | + if (introData) { | |
| 467 | + introData = JSON.parse(introData); | |
| 468 | + console.log("introData", introData); | |
| 469 | + this.caseStudy.caseStudyDetails.intro = introData.intro; | |
| 470 | + this.caseStudy.caseStudyDetails.userId = introData.userId; | |
| 471 | + this.caseStudy.caseStudyDetails.outro = introData.outro; | |
| 472 | + this.caseStudy.caseStudyDetails.insightTags = introData.insightTags; | |
| 473 | + this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas; | |
| 474 | + } | |
| 475 | + } | |
| 450 | 476 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 451 | 477 | if (userdata) { |
| 452 | 478 | userdata = JSON.parse(userdata); |
| ... | ... | @@ -634,21 +660,74 @@ export default { |
| 634 | 660 | this.templateList.push(temp); |
| 635 | 661 | } |
| 636 | 662 | }); |
| 663 | + if (this.editMode) { | |
| 664 | + this.getSLideData(); | |
| 665 | + } | |
| 637 | 666 | console.log("templates", this.templateList); |
| 638 | 667 | }) |
| 639 | 668 | .catch((error) => console.log(error)); |
| 640 | 669 | }, |
| 641 | 670 | |
| 671 | + getSLideData() { | |
| 672 | + axios | |
| 673 | + .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, { | |
| 674 | + headers: { | |
| 675 | + Authorization: "Bearer " + this.usertoken, | |
| 676 | + }, | |
| 677 | + }) | |
| 678 | + .then((response) => { | |
| 679 | + var finalArray = []; | |
| 680 | + response.data.data.forEach((template_) => { | |
| 681 | + var keys = []; | |
| 682 | + var i = this.templateList.findIndex( | |
| 683 | + (temp_) => temp_._id == template_.templateId | |
| 684 | + ); | |
| 685 | + var obj = { | |
| 686 | + _id: this.templateList[i]._id, | |
| 687 | + bounceBoard: this.templateList[i].bounceBoard, | |
| 688 | + insight: this.templateList[i].insight, | |
| 689 | + // commentBox: this.templateList[i].commentBox, | |
| 690 | + metaData: { | |
| 691 | + fields: [], | |
| 692 | + comments: [], | |
| 693 | + }, | |
| 694 | + }; | |
| 695 | + if (this.templateList[i].bounceBoard) { | |
| 696 | + obj.commentBox = this.templateList[i].commentBox; | |
| 697 | + } | |
| 698 | + var fieldArray = []; | |
| 699 | + this.templateList[i].metaData.fields.forEach((element) => { | |
| 700 | + var fieldobj = { | |
| 701 | + fieldName: element.fieldName, | |
| 702 | + displayName: element.displayName, | |
| 703 | + fieldValue: template_.metaData[element.fieldName], | |
| 704 | + fieldType: element.fieldType, | |
| 705 | + }; | |
| 706 | + obj.metaData.fields.push(fieldobj); | |
| 707 | + }); | |
| 708 | + finalArray.push(obj); | |
| 709 | + }); | |
| 710 | + this.caseStudy.slides = finalArray; | |
| 711 | + console.log("----", finalArray); | |
| 712 | + console.log(this.templateList, "getSLideData==>"); | |
| 713 | + }) | |
| 714 | + .catch((error) => console.log(error)); | |
| 715 | + }, | |
| 716 | + | |
| 642 | 717 | submit() { |
| 643 | 718 | const latest = Object.create(this.caseStudy); |
| 644 | 719 | |
| 645 | 720 | var slidArray = []; |
| 646 | 721 | latest.slides.forEach((slides) => { |
| 647 | - console.log("slides",slides) | |
| 722 | + console.log("slides", slides); | |
| 648 | 723 | var slideData = {}; |
| 649 | 724 | slideData.templateId = slides._id; |
| 650 | 725 | slideData.bounceBoard = slides.bounceBoard; |
| 651 | 726 | slideData.insight = slides.insight; |
| 727 | + if (slides.metaData.comments && slides.metaData.comments.length > 0) { | |
| 728 | + slideData.comments = slides.metaData.comments; | |
| 729 | + // this.getSLideData(); | |
| 730 | + } | |
| 652 | 731 | // var comments = []; |
| 653 | 732 | // if (slides.bounceBoard) { |
| 654 | 733 | // slides.metaData.comments.forEach((element) => { |
| ... | ... | @@ -665,7 +744,11 @@ export default { |
| 665 | 744 | }); |
| 666 | 745 | |
| 667 | 746 | console.log("slideData", slidArray); |
| 668 | - this.saveProfile(slidArray); | |
| 747 | + if (this.editMode) { | |
| 748 | + this.updateProfile(slidArray); | |
| 749 | + }else{ | |
| 750 | + this.saveProfile(slidArray); | |
| 751 | + } | |
| 669 | 752 | }, |
| 670 | 753 | |
| 671 | 754 | saveProfile(slides) { |
| ... | ... | @@ -693,6 +776,37 @@ export default { |
| 693 | 776 | } |
| 694 | 777 | }); |
| 695 | 778 | }, |
| 779 | + updateProfile(slides) { | |
| 780 | + var obj = {}; | |
| 781 | + obj.caseStudyId = this.caseId, | |
| 782 | + obj.caseStudyDetails = this.caseStudy.caseStudyDetails; | |
| 783 | + obj.caseStudyDetails.intro.readTime = Math.round( | |
| 784 | + slides.length / 3 | |
| 785 | + ).toString(); | |
| 786 | + obj.slides = slides; | |
| 787 | + axios | |
| 788 | + .put("/superAdmin/caseStudy", obj, { | |
| 789 | + headers: { | |
| 790 | + Authorization: "Bearer " + this.usertoken, | |
| 791 | + }, | |
| 792 | + }) | |
| 793 | + .then((response) => { | |
| 794 | + // this.userData = response.data.data; | |
| 795 | + this.$toaster.success("Case Study Updated"); | |
| 796 | + this.$router.go(this.$router.currentRoute) | |
| 797 | + | |
| 798 | + | |
| 799 | + console.log(response); | |
| 800 | + }) | |
| 801 | + .catch((error) => { | |
| 802 | + if (error.response) { | |
| 803 | + this.$toaster.error(error.response.data.message); | |
| 804 | + } | |
| 805 | + }); | |
| 806 | + }, | |
| 807 | + listPage(){ | |
| 808 | + this.$router.push("/casestudy"); | |
| 809 | + }, | |
| 696 | 810 | |
| 697 | 811 | async getMeatda(tempId) { |
| 698 | 812 | var obj = [ | ... | ... |
src/main.js
| 1 | 1 | // The Vue build version to load with the `import` command |
| 2 | 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. |
| 3 | 3 | import Vue from 'vue' |
| 4 | +// Add this line | |
| 4 | 5 | import App from './App' |
| 5 | 6 | import router from './router' |
| 6 | 7 | import axios from 'axios' |
| ... | ... | @@ -13,10 +14,10 @@ import { Auth0Plugin } from "./auth" |
| 13 | 14 | import Vuelidate from 'vuelidate' |
| 14 | 15 | import moment from 'moment' |
| 15 | 16 | import Toaster from 'v-toaster' |
| 16 | - | |
| 17 | -// You need a specific loader for CSS files like https://github.com/webpack/css-loader | |
| 18 | 17 | import 'v-toaster/dist/v-toaster.css' |
| 19 | 18 | |
| 19 | +// You need a specific loader for CSS files like https://github.com/webpack/css-loader | |
| 20 | + | |
| 20 | 21 | // optional set default imeout, the default is 10000 (10 seconds). |
| 21 | 22 | Vue.use(Toaster, {timeout: 5000}) |
| 22 | 23 | Vue.use(Vuelidate) | ... | ... |
src/router/index.js
| ... | ... | @@ -3,6 +3,7 @@ import Router from 'vue-router' |
| 3 | 3 | import { authGuard } from "../auth/authGuard" |
| 4 | 4 | import LandingPage from '@/components/LandingPage' |
| 5 | 5 | import Profile from '@/components/Profile' |
| 6 | +import CaseStudy from '@/components/CaseStudy' | |
| 6 | 7 | |
| 7 | 8 | |
| 8 | 9 | import router from '../router' |
| ... | ... | @@ -27,6 +28,11 @@ export default new Router({ |
| 27 | 28 | name: 'Profile', |
| 28 | 29 | component: Profile, |
| 29 | 30 | }, |
| 31 | + { | |
| 32 | + path: '/casestudy', | |
| 33 | + name: 'CaseStudy', | |
| 34 | + component: CaseStudy, | |
| 35 | + } | |
| 30 | 36 | |
| 31 | 37 | |
| 32 | 38 | ... | ... |