Commit 3986e5ad71cacf1e96eba1acc1f33a8a22060ee7

Authored by Digvijay Singh
1 parent 74dbc1d9ff
Exists in admin

new changes in admin panel

src/components/CaseStudy.vue
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <!-- profile --> 3 <!-- profile -->
4 <div class="container-fluid inner-wrp" style="background: transparent"> 4 <div class="container-fluid inner-wrp" style="background: transparent">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="#" 6 <a class="navbar-brand" href="#"
7 ><img src="../assets/images/logo.png" 7 ><img src="../assets/images/logo.png"
8 /></a> 8 /></a>
9 <button 9 <button
10 class="navbar-toggler" 10 class="navbar-toggler"
11 type="button" 11 type="button"
12 data-toggle="collapse" 12 data-toggle="collapse"
13 data-target="#navbarsExample03" 13 data-target="#navbarsExample03"
14 aria-controls="navbarsExample03" 14 aria-controls="navbarsExample03"
15 aria-expanded="false" 15 aria-expanded="false"
16 aria-label="Toggle navigation" 16 aria-label="Toggle navigation"
17 > 17 >
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 <span class="navbar-toggler-icon"></span> 20 <span class="navbar-toggler-icon"></span>
21 </button> 21 </button>
22 22
23 <div class="collapse navbar-collapse" id="navbarsExample03"> 23 <div class="collapse navbar-collapse" id="navbarsExample03">
24 <ul class="navbar-nav mr-auto"> 24 <ul class="navbar-nav mr-auto">
25 <li class="nav-item active"> 25 <li class="nav-item active">
26 <a class="nav-link" @click="create" style="cursor:pointer">Create Case Study</a> 26 <a class="nav-link" @click="create('/profile')" style="cursor:pointer">Create Case Study</a>
27 </li> 27 </li>
28 <li class="nav-item active"> 28 <li class="nav-item active">
29 <a class="nav-link" style="cursor:pointer">Create Insight</a> 29 <a class="nav-link" @click="create('/insight')" style="cursor:pointer">Create Insight</a>
30 </li> 30 </li>
31 </ul> 31 </ul>
32 </div> 32 </div>
33 <div class=""> 33 <div class="">
34 <a href="javascript:void(0);" @click="logout">Log Out </a> 34 <a href="javascript:void(0);" @click="logout">Log Out </a>
35 </div> 35 </div>
36 </nav> 36 </nav>
37 <!-- menu wrapper --> 37 <!-- menu wrapper -->
38 <!-- <div class="row profile-tab-spc-top"> 38 <!-- <div class="row profile-tab-spc-top">
39 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 39 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
40 <div class="user-profile"> 40 <div class="user-profile">
41 <div class="form-group floating-label"> 41 <div class="form-group floating-label">
42 <select 42 <select
43 class="form-control" 43 class="form-control"
44 v-model="userData" 44 v-model="userData"
45 v-on:change="selectUser(userData)" 45 v-on:change="selectUser(userData)"
46 > 46 >
47 <option value="null">Select User</option> 47 <option value="null">Select User</option>
48 <option v-for="(user, i) in userList" :key="i" :value="i"> 48 <option v-for="(user, i) in userList" :key="i" :value="i">
49 {{ user.name }} ({{ user.email }}) 49 {{ user.name }} ({{ user.email }})
50 </option> 50 </option>
51 </select> 51 </select>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> --> 55 </div> -->
56 56
57 <div class="row"> 57 <div class="row">
58 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 58 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
59 <ul class="navbar-nav mr-auto"> 59 <ul class="navbar-nav mr-auto">
60 <li class="nav-item active"> 60 <li class="nav-item active">
61 <h5 class="nav-link" > 61 <h5 class="nav-link" >
62 <span style="cursor:pointer" >Case Study List</span></h5> 62 <span style="cursor:pointer" >Case Study List</span></h5>
63 </li> 63 </li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 </div> 66 </div>
67 <div class="row"> 67 <div class="row">
68 <table> 68 <table>
69 <tr> 69 <tr>
70 <th>Name</th> 70 <th>Name</th>
71 <th>App</th> 71 <th>App</th>
72 <th>Authors</th> 72 <th>Authors</th>
73 <th>Action</th> 73 <th>Action</th>
74 </tr> 74 </tr>
75 <tr v-for="(study, j) in caseStudyList" 75 <tr v-for="(study, j) in caseStudyList"
76 :key="j"> 76 :key="j">
77 <td>{{study.intro.name}}</td> 77 <td>{{study.intro.name}}</td>
78 <td>{{study.intro.app}}</td> 78 <td>{{study.intro.app}}</td>
79 <td>{{study.intro.authors[0]}}</td> 79 <td>{{study.intro.authors[0]}}</td>
80 <td><a style="cursor:pointer" @click="edit(study)">Edit</a></td> 80 <td><a style="cursor:pointer" @click="edit(study)">Edit</a></td>
81 </tr> 81 </tr>
82 </table> 82 </table>
83 </div> 83 </div>
84 <!-- 1st row --> 84 <!-- 1st row -->
85 </div> 85 </div>
86 </main> 86 </main>
87 </template> 87 </template>
88 88
89 <script> 89 <script>
90 import Vue from "vue"; 90 import Vue from "vue";
91 import router from "../router"; 91 import router from "../router";
92 import $ from "jquery"; 92 import $ from "jquery";
93 import axios from "axios"; 93 import axios from "axios";
94 94
95 export default { 95 export default {
96 name: "CaseStudy", 96 name: "CaseStudy",
97 97
98 data() { 98 data() {
99 return { 99 return {
100 loggedinFlag: false, 100 loggedinFlag: false,
101 usertoken: null, 101 usertoken: null,
102 userData: {}, 102 userData: {},
103 caseStudyList:[], 103 caseStudyList:[],
104 }; 104 };
105 }, 105 },
106 mounted() { 106 mounted() {
107 107
108 var userdata = localStorage.getItem("spotlight_usertoken"); 108 var userdata = localStorage.getItem("spotlight_usertoken");
109 if (userdata) { 109 if (userdata) {
110 userdata = JSON.parse(userdata); 110 userdata = JSON.parse(userdata);
111 this.usertoken = userdata.token; 111 this.usertoken = userdata.token;
112 this.getCaseSTudies(); 112 this.getCaseSTudies();
113 } 113 }
114 }, 114 },
115 methods: { 115 methods: {
116 getCaseSTudies() { 116 getCaseSTudies() {
117 axios 117 axios
118 .get("/superAdmin/caseStudies", { 118 .get("/superAdmin/caseStudies", {
119 headers: { 119 headers: {
120 Authorization: "Bearer " + this.usertoken, 120 Authorization: "Bearer " + this.usertoken,
121 }, 121 },
122 }) 122 })
123 .then((response) => { 123 .then((response) => {
124 this.caseStudyList = response.data.data.caseStudies; 124 this.caseStudyList = response.data.data.caseStudies;
125 console.log("response", response.data.data.caseStudies); 125 console.log("response", response.data.data.caseStudies);
126 }) 126 })
127 .catch((error) => console.log(error)); 127 .catch((error) => console.log(error));
128 }, 128 },
129 edit(payload){ 129 edit(payload){
130 console.log("study",payload) 130 console.log("study",payload)
131 localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload)) 131 localStorage.setItem('spotlight_caseStudy'+payload._id, JSON.stringify(payload))
132 this.$router.push("/profile?"+payload._id); 132 this.$router.push("/profile?"+payload._id);
133 }, 133 },
134 create(){ 134 create(url){
135 this.$router.push("/profile"); 135 this.$router.push(url);
136 }, 136 },
137 logout(){ 137 logout(){
138 this.$router.push("/"); 138 this.$router.push("/");
139 } 139 }
140 }, 140 },
141 }; 141 };
142 </script> 142 </script>
143 <style> 143 <style>
144 .light-font-weight { 144 .light-font-weight {
145 font-weight: 300 !important; 145 font-weight: 300 !important;
146 } 146 }
147 147
148 table { 148 table {
149 font-family: arial, sans-serif; 149 font-family: arial, sans-serif;
150 border-collapse: collapse; 150 border-collapse: collapse;
151 width: 100%; 151 width: 100%;
152 } 152 }
153 153
154 td, 154 td,
155 th { 155 th {
156 border: 1px solid #000; 156 border: 1px solid #000;
157 text-align: left; 157 text-align: left;
158 padding: 8px; 158 padding: 8px;
159 } 159 }
160 160
161 tr:nth-child(even) { 161 tr:nth-child(even) {
162 background-color: #dddddd; 162 background-color: #dddddd;
163 } 163 }
164 </style> 164 </style>
165 165
src/components/Insight.vue
File was created 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
27 class="nav-link"
28 @click="create('/profile')"
29 style="cursor: pointer"
30 >Create Case Study</a
31 >
32 </li>
33 <li class="nav-item active">
34 <a
35 class="nav-link"
36 @click="create('/casestudy')"
37 style="cursor: pointer"
38 >Case Study List</a
39 >
40 </li>
41 </ul>
42 </div>
43 <div class="">
44 <a href="javascript:void(0);" @click="logout">Log Out </a>
45 </div>
46 </nav>
47 <!-- menu wrapper -->
48 <!-- <div class="row profile-tab-spc-top">
49 <div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
50 <div class="user-profile">
51 <div class="form-group floating-label">
52 <select
53 class="form-control"
54 v-model="userData"
55 v-on:change="selectUser(userData)"
56 >
57 <option value="null">Select User</option>
58 <option v-for="(user, i) in userList" :key="i" :value="i">
59 {{ user.name }} ({{ user.email }})
60 </option>
61 </select>
62 </div>
63 </div>
64 </div>
65 </div> -->
66
67 <!-- 1st row -->
68 <div class="row">
69 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
70 <div class="form-group floating-label">
71 <label for="lname" class="lname">Case Study Type</label>
72 <select
73 class="form-control"
74 v-model="userData.tag"
75 >
76 <option value="null">Select Case Type</option>
77 <option value="Retake">Retake</option>
78 <option value="Behind-the-scenes">Behind-the-scenes</option>
79 <option value="Critique">Critique</option>
80 <option value="Juxtapose">Juxtapose</option>
81 </select>
82 </div>
83 </div>
84 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
85 <div class="form-group floating-label">
86 <label for="lname" class="lname">Title</label>
87 <input
88 type="text"
89 class="form-control"
90 value=""
91 placeholder=" "
92 v-model="userData.title"
93 />
94 </div>
95 </div>
96
97
98 </div>
99 <!-- 1st row -->
100 <!-- 2nd row -->
101 <div class="row">
102 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
103 <div class="form-group floating-label">
104 <label for="lname" class="lname">Description</label>
105 <input
106 type="text"
107 class="form-control"
108 value=""
109 placeholder=" "
110 v-model="userData.description"
111 />
112 </div>
113 </div>
114
115
116 </div>
117 <!-- 2nd row -->
118 <!-- 3rd row -->
119 <div class="row">
120 <div class="form-layout signup-frm-spc" style="margin-top:10px">
121 <form>
122 <a
123 href="javascript:void(0);"
124 class="btn btn-lg sb-button"
125 type="submit"
126 @click="submit"
127 >
128 <img src="../assets/images/key.svg" /> submit
129 </a>
130 </form>
131 </div>
132
133
134 </div>
135 <!-- 3rd row -->
136
137 <div class="row">
138 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
139 <ul class="navbar-nav mr-auto">
140 <li class="nav-item active">
141 <h5 class="nav-link">
142 <span style="cursor: pointer">Insight List</span>
143 </h5>
144 </li>
145 </ul>
146 </div>
147 </div>
148 <div class="row">
149 <table>
150 <tr>
151 <th>Id</th>
152 <th>Tag</th>
153 <th>Title</th>
154 <th>Action</th>
155 </tr>
156 <tr v-for="(insight, j) in insightList" :key="j">
157 <td>{{ insight._id }}</td>
158 <td>{{ insight.tag }}</td>
159 <td>{{ insight.title }}</td>
160 <td><a style="cursor: pointer">Delete</a></td>
161 </tr>
162 </table>
163 </div>
164 <!-- 1st row -->
165 </div>
166 </main>
167 </template>
168
169 <script>
170 import Vue from "vue";
171 import router from "../router";
172 import $ from "jquery";
173 import axios from "axios";
174
175 export default {
176 name: "Insight",
177
178 data() {
179 return {
180 loggedinFlag: false,
181 usertoken: null,
182 userData: {
183 tag: null,
184 title: null,
185 description:
186 null,
187 furtherReading: [],
188 },
189 insightList: [],
190 };
191 },
192 mounted() {
193 var userdata = localStorage.getItem("spotlight_usertoken");
194 if (userdata) {
195 userdata = JSON.parse(userdata);
196 this.usertoken = userdata.token;
197 this.getInsight();
198 }
199 },
200 methods: {
201 getInsight() {
202 axios
203 .get("/superAdmin/insight", {
204 headers: {
205 Authorization: "Bearer " + this.usertoken,
206 },
207 })
208 .then((response) => {
209 this.insightList = response.data.data;
210 console.log("response", response.data.data);
211 })
212 .catch((error) => console.log(error));
213 },
214 submit() {
215 axios
216 .post("/superAdmin/insight", this.userData, {
217 headers: {
218 Authorization: "Bearer " + this.usertoken,
219 },
220 })
221 .then((response) => {
222 // this.userData = response.data.data;
223 this.$toaster.success("Insight Created");
224 this.$router.go(this.$router.currentRoute)
225
226 console.log(response);
227 })
228 .catch((error) => {
229 if (error.response) {
230 this.$toaster.error(error.response.data.message);
231 }
232 });
233 },
234 create(url) {
235 this.$router.push(url);
236 },
237 logout() {
238 this.$router.push("/");
239 },
240 },
241 };
242 </script>
243 <style>
244 .light-font-weight {
245 font-weight: 300 !important;
246 }
247
248 table {
249 font-family: arial, sans-serif;
250 border-collapse: collapse;
251 width: 100%;
252 }
253
254 td,
255 th {
256 border: 1px solid #000;
257 text-align: left;
258 padding: 8px;
259 }
260
261 tr:nth-child(even) {
262 background-color: #dddddd;
263 }
264 </style>
265
src/components/Profile.vue
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <!-- profile --> 3 <!-- profile -->
4 <div class="container-fluid inner-wrp" style="background: transparent"> 4 <div class="container-fluid inner-wrp" style="background: transparent">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="#" 6 <a class="navbar-brand" href="#"
7 ><img src="../assets/images/logo.png" 7 ><img src="../assets/images/logo.png"
8 /></a> 8 /></a>
9 <button 9 <button
10 class="navbar-toggler" 10 class="navbar-toggler"
11 type="button" 11 type="button"
12 data-toggle="collapse" 12 data-toggle="collapse"
13 data-target="#navbarsExample03" 13 data-target="#navbarsExample03"
14 aria-controls="navbarsExample03" 14 aria-controls="navbarsExample03"
15 aria-expanded="false" 15 aria-expanded="false"
16 aria-label="Toggle navigation" 16 aria-label="Toggle navigation"
17 > 17 >
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 <span class="navbar-toggler-icon"></span> 20 <span class="navbar-toggler-icon"></span>
21 </button> 21 </button>
22 22
23 <div class="collapse navbar-collapse" id="navbarsExample03"> 23 <div class="collapse navbar-collapse" id="navbarsExample03">
24 <ul class="navbar-nav mr-auto"> 24 <ul class="navbar-nav mr-auto">
25 <li class="nav-item active"> 25 <li class="nav-item active">
26 <a class="nav-link" style="cursor:pointer" @click="listPage">Case Study List</a> 26 <a class="nav-link" style="cursor:pointer" @click="listPage('/casestudy')">Case Study List</a>
27 </li> 27 </li>
28 <li class="nav-item active"> 28 <li class="nav-item active">
29 <a class="nav-link" style="cursor:pointer">Create Insight</a> 29 <a class="nav-link" style="cursor:pointer" @click="listPage('/insight')">Create Insight</a>
30 </li> 30 </li>
31 </ul> 31 </ul>
32 </div> 32 </div>
33 <div class=""> 33 <div class="">
34 <a href="javascript:void(0);" @click="logout">Log Out </a> 34 <a href="javascript:void(0);" @click="logout">Log Out </a>
35 </div> 35 </div>
36 </nav> 36 </nav>
37 <!-- menu wrapper --> 37 <!-- menu wrapper -->
38 <div class="row profile-tab-spc-top"> 38 <div class="row profile-tab-spc-top">
39 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 39 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
40 <div class="user-profile"> 40 <div class="user-profile">
41 <div class="form-group floating-label"> 41 <div class="form-group floating-label">
42 <select 42 <select
43 class="form-control" 43 class="form-control"
44 v-model="userData" 44 v-model="userData"
45 v-on:change="selectUser(userData)" 45 v-on:change="selectUser(userData)"
46 :disabled="editMode" 46 :disabled="editMode"
47 > 47 >
48 <option value="null">Select User</option> 48 <option value="null">Select User</option>
49 <option v-for="(user, i) in userList" :key="i" :value="i"> 49 <option v-for="(user, i) in userList" :key="i" :value="i">
50 {{ user.name }} ({{ user.email }}) 50 {{ user.name }} ({{ user.email }})
51 </option> 51 </option>
52 </select> 52 </select>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 57
58 <div class="row"> 58 <div class="row">
59 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 59 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
60 <ul class="navbar-nav mr-auto"> 60 <ul class="navbar-nav mr-auto">
61 <li class="nav-item active"> 61 <li class="nav-item active">
62 <h5 class="nav-link">Intro Screen Record</h5> 62 <h5 class="nav-link">Intro Screen Record</h5>
63 </li> 63 </li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 </div> 66 </div>
67 <!-- 1st row --> 67 <!-- 1st row -->
68 <div class="row"> 68 <div class="row">
69 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 69 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
70 <div class="form-group floating-label"> 70 <div class="form-group floating-label">
71 <label for="lname" class="lname">Case Study Name</label> 71 <label for="lname" class="lname">Case Study Name</label>
72 <input 72 <input
73 type="text" 73 type="text"
74 class="form-control" 74 class="form-control"
75 value="" 75 value=""
76 placeholder=" " 76 placeholder=" "
77 v-model="caseStudy.caseStudyDetails.intro.name" 77 v-model="caseStudy.caseStudyDetails.intro.name"
78 /> 78 />
79 </div> 79 </div>
80 </div> 80 </div>
81 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 81 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
82 <div class="form-group floating-label"> 82 <div class="form-group floating-label">
83 <label for="lname" class="lname">App Name</label> 83 <label for="lname" class="lname">App Name</label>
84 <input 84 <input
85 type="text" 85 type="text"
86 class="form-control" 86 class="form-control"
87 value="" 87 value=""
88 placeholder=" " 88 placeholder=" "
89 v-model="caseStudy.caseStudyDetails.intro.app" 89 v-model="caseStudy.caseStudyDetails.intro.app"
90 /> 90 />
91 </div> 91 </div>
92 </div> 92 </div>
93 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 93 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
94 <div class="form-group floating-label"> 94 <div class="form-group floating-label">
95 <label for="lname" class="lname">Focus</label> 95 <label for="lname" class="lname">Focus</label>
96 <input 96 <input
97 type="text" 97 type="text"
98 class="form-control" 98 class="form-control"
99 value="" 99 value=""
100 placeholder=" " 100 placeholder=" "
101 v-model="caseStudy.caseStudyDetails.intro.focus" 101 v-model="caseStudy.caseStudyDetails.intro.focus"
102 /> 102 />
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 <!-- 1st row end --> 106 <!-- 1st row end -->
107 107
108 <!-- 2nd row --> 108 <!-- 2nd row -->
109 <div class="row"> 109 <div class="row">
110 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 110 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
111 <div class="form-group floating-label"> 111 <div class="form-group floating-label">
112 <label for="lname" class="lname">Case Study Type</label> 112 <label for="lname" class="lname">Case Study Type</label>
113 <select 113 <select
114 class="form-control" 114 class="form-control"
115 v-model="caseStudy.caseStudyDetails.intro.type" 115 v-model="caseStudy.caseStudyDetails.intro.type"
116 > 116 >
117 <option value="null">Select Case Type</option> 117 <option value="null">Select Case Type</option>
118 <option value="Retake">Retake</option> 118 <option value="Retake">Retake</option>
119 <option value="Behind-the-scenes">Behind-the-scenes</option> 119 <option value="Behind-the-scenes">Behind-the-scenes</option>
120 <option value="Critique">Critique</option> 120 <option value="Critique">Critique</option>
121 <option value="Juxtapose">Juxtapose</option> 121 <option value="Juxtapose">Juxtapose</option>
122 </select> 122 </select>
123 </div> 123 </div>
124 </div> 124 </div>
125 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 125 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
126 <div class="form-group floating-label"> 126 <div class="form-group floating-label">
127 <label for="lname" class="lname">Platform</label> 127 <label for="lname" class="lname">Platform</label>
128 <input 128 <input
129 type="text" 129 type="text"
130 class="form-control" 130 class="form-control"
131 value="" 131 value=""
132 placeholder=" " 132 placeholder=" "
133 v-model="caseStudy.caseStudyDetails.intro.platForm" 133 v-model="caseStudy.caseStudyDetails.intro.platForm"
134 /> 134 />
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 138 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
139 <div class="form-group floating-label"> 139 <div class="form-group floating-label">
140 <label for="lname" class="lname"> Insight Logo</label> 140 <label for="lname" class="lname"> Insight Logo</label>
141 <img v-if="caseStudy.caseStudyDetails.intro.logoURL" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.intro.logoURL" 141 <img v-if="caseStudy.caseStudyDetails.intro.logoURL" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.intro.logoURL"
142 /> 142 />
143 <input 143 <input
144 @change="createImage('logo')" 144 @change="createImage('logo')"
145 type="file" 145 type="file"
146 name="photso" 146 name="photso"
147 id="logo" 147 id="logo"
148 accept="image/*" 148 accept="image/*"
149 /> 149 />
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 <!-- 2nd row --> 153 <!-- 2nd row -->
154 <!-- 3rd row --> 154 <!-- 3rd row -->
155 <div class="row"> 155 <div class="row">
156 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 156 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
157 <div class="form-group floating-label"> 157 <div class="form-group floating-label">
158 <label for="lname" class="lname"></label> 158 <label for="lname" class="lname"></label>
159 <ul class="interests"> 159 <ul class="interests">
160 <li> 160 <li>
161 <input 161 <input
162 class="" 162 class=""
163 placeholder="Add Focus Areas" 163 placeholder="Add Focus Areas"
164 v-model="focusName" 164 v-model="focusName"
165 /> 165 />
166 <a href="javascript:void(0);" @click="addInsight('focus')" 166 <a href="javascript:void(0);" @click="addInsight('focus')"
167 ><img src="../assets/images/plus-circle.svg" 167 ><img src="../assets/images/plus-circle.svg"
168 /></a> 168 /></a>
169 </li> 169 </li>
170 170
171 <li 171 <li
172 v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas" 172 v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas"
173 :key="i" 173 :key="i"
174 > 174 >
175 <span>{{ interest }}</span> 175 <span>{{ interest }}</span>
176 <a 176 <a
177 href="javascript:void(0);" 177 href="javascript:void(0);"
178 @click="removeInsight(i, 'focus')" 178 @click="removeInsight(i, 'focus')"
179 class="cat-minus" 179 class="cat-minus"
180 ><img src="../assets/images/minus.svg" 180 ><img src="../assets/images/minus.svg"
181 /></a> 181 /></a>
182 </li> 182 </li>
183 </ul> 183 </ul>
184 </div> 184 </div>
185 </div> 185 </div>
186 186
187 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 187 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
188 <div class="form-group floating-label"> 188 <div class="form-group floating-label">
189 <label for="lname" class="lname">Select Insight Tags</label> 189 <label for="lname" class="lname">Select Insight Tags</label>
190 <select 190 <select
191 class="form-control" 191 class="form-control"
192 v-model="insightName" 192 v-model="insightName"
193 @change="addInsight('insight')" 193 @change="addInsight('insight')"
194 > 194 >
195 <option value="null">Select Insight Tag</option> 195 <option value="null">Select Insight Tag</option>
196 <option value="Design">Design</option> 196 <option value="Design">Design</option>
197 <option value="Product">Product</option> 197 <option value="Product">Product</option>
198 <option value="Marketing">Marketing</option> 198 <option value="Marketing">Marketing</option>
199 <option value="Pricing">Pricing</option> 199 <option value="Pricing">Pricing</option>
200 <option value="Psychology">Psychology</option> 200 <option value="Psychology">Psychology</option>
201 </select> 201 </select>
202 </div> 202 </div>
203 </div> 203 </div>
204 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 204 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
205 <div class="form-group floating-label"> 205 <div class="form-group floating-label">
206 <label for="lname" class="lname"></label> 206 <label for="lname" class="lname"></label>
207 <ul class="interests"> 207 <ul class="interests">
208 <li 208 <li
209 v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags" 209 v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags"
210 :key="i" 210 :key="i"
211 > 211 >
212 <span>{{ interest }}</span> 212 <span>{{ interest }}</span>
213 <a 213 <a
214 href="javascript:void(0);" 214 href="javascript:void(0);"
215 @click="removeInsight(i, 'insight')" 215 @click="removeInsight(i, 'insight')"
216 class="cat-minus" 216 class="cat-minus"
217 ><img src="../assets/images/minus.svg" 217 ><img src="../assets/images/minus.svg"
218 /></a> 218 /></a>
219 </li> 219 </li>
220 </ul> 220 </ul>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 <!-- 3rd row end --> 224 <!-- 3rd row end -->
225 225
226 <!-- outdor --> 226 <!-- outdor -->
227 <div class="row profile-tab-spc-top"> 227 <div class="row profile-tab-spc-top">
228 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 228 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
229 <ul class="navbar-nav mr-auto"> 229 <ul class="navbar-nav mr-auto">
230 <li class="nav-item active"> 230 <li class="nav-item active">
231 <h5 class="nav-link">Outro Screen Record</h5> 231 <h5 class="nav-link">Outro Screen Record</h5>
232 </li> 232 </li>
233 </ul> 233 </ul>
234 </div> 234 </div>
235 </div> 235 </div>
236 236
237 <!-- 1st row --> 237 <!-- 1st row -->
238 <div class="row"> 238 <div class="row">
239 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 239 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
240 <div class="form-group floating-label"> 240 <div class="form-group floating-label">
241 <label for="lname" class="lname">Designer Name</label> 241 <label for="lname" class="lname">Designer Name</label>
242 <input 242 <input
243 type="text" 243 type="text"
244 class="form-control" 244 class="form-control"
245 value="" 245 value=""
246 placeholder=" " 246 placeholder=" "
247 v-model="caseStudy.caseStudyDetails.outro.designer" 247 v-model="caseStudy.caseStudyDetails.outro.designer"
248 /> 248 />
249 </div> 249 </div>
250 </div> 250 </div>
251 251
252 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 252 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
253 <div class="form-group floating-label"> 253 <div class="form-group floating-label">
254 <label for="lname" class="lname">Illustrations Name</label> 254 <label for="lname" class="lname">Illustrations Name</label>
255 <input 255 <input
256 type="text" 256 type="text"
257 class="form-control" 257 class="form-control"
258 value="" 258 value=""
259 placeholder=" " 259 placeholder=" "
260 v-model="caseStudy.caseStudyDetails.outro.illustrations" 260 v-model="caseStudy.caseStudyDetails.outro.illustrations"
261 /> 261 />
262 </div> 262 </div>
263 </div> 263 </div>
264 264
265 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 265 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
266 <div class="form-group floating-label"> 266 <div class="form-group floating-label">
267 <label for="lname" class="lname"> Author Image</label> 267 <label for="lname" class="lname"> Author Image</label>
268 <img v-if="caseStudy.caseStudyDetails.outro.authorImage[0]" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.outro.authorImage[0]" 268 <img v-if="caseStudy.caseStudyDetails.outro.authorImage[0]" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.outro.authorImage[0]"
269 /> 269 />
270 <input 270 <input
271 @change="createImage('outdor')" 271 @change="createImage('outdor')"
272 type="file" 272 type="file"
273 name="photos" 273 name="photos"
274 id="outdor" 274 id="outdor"
275 accept="image/*" 275 accept="image/*"
276 /> 276 />
277 </div> 277 </div>
278 </div> 278 </div>
279 </div> 279 </div>
280 <!-- 1st row --> 280 <!-- 1st row -->
281 <!-- outdoor ends --> 281 <!-- outdoor ends -->
282 282
283 <!-- outdor --> 283 <!-- outdor -->
284 <div class="row profile-tab-spc-top"> 284 <div class="row profile-tab-spc-top">
285 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 285 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
286 <ul class="navbar-nav mr-auto"> 286 <ul class="navbar-nav mr-auto">
287 <li class="nav-item active"> 287 <li class="nav-item active">
288 <h5 class="nav-link">Add SLides</h5> 288 <h5 class="nav-link">Add SLides</h5>
289 </li> 289 </li>
290 </ul> 290 </ul>
291 </div> 291 </div>
292 </div> 292 </div>
293 293
294 <!-- 1st row --> 294 <!-- 1st row -->
295 <div class="row"> 295 <div class="row">
296 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 296 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
297 <div class="form-group floating-label"> 297 <div class="form-group floating-label">
298 <label for="lname" class="lname">Slides Name</label> 298 <label for="lname" class="lname">Slides Name</label>
299 <select 299 <select
300 class="form-control" 300 class="form-control"
301 v-model="slideId" 301 v-model="slideId"
302 v-on:change="slideSelected(slideId)" 302 v-on:change="slideSelected(slideId)"
303 > 303 >
304 <option value="null">Select Slide</option> 304 <option value="null">Select Slide</option>
305 <option v-for="(template, i) in templateList" :key="i" :value="i"> 305 <option v-for="(template, i) in templateList" :key="i" :value="i">
306 {{ template._id }} 306 {{ template._id }}
307 </option> 307 </option>
308 </select> 308 </select>
309 </div> 309 </div>
310 </div> 310 </div>
311 </div> 311 </div>
312 <!-- 1st row --> 312 <!-- 1st row -->
313 313
314 <!-- case study slides--> 314 <!-- case study slides-->
315 <div 315 <div
316 class="row profile-tab-spc-top" 316 class="row profile-tab-spc-top"
317 v-for="(slide, i) in caseStudy.slides" 317 v-for="(slide, i) in caseStudy.slides"
318 :key="i" 318 :key="i"
319 > 319 >
320 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 320 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
321 <ul class="navbar-nav mr-auto"> 321 <ul class="navbar-nav mr-auto">
322 <li class="nav-item active"> 322 <li class="nav-item active">
323 <p class="nav-link"> 323 <p class="nav-link">
324 <b>Screen {{ i + 1 }}</b> 324 <b>Screen {{ i + 1 }}</b>
325 <a 325 <a
326 style="cursor: pointer; color: red; font-size: 0.8rem" 326 style="cursor: pointer; color: red; font-size: 0.8rem"
327 @click="removeSlide(i)" 327 @click="removeSlide(i)"
328 > 328 >
329 Remove</a 329 Remove</a
330 > 330 >
331 </p> 331 </p>
332 </li> 332 </li>
333 <li class="nav-item active" v-if="slide.insight">
334 <div class="form-group floating-label">
335 <label for="lname" class="lname">Insight</label>
336 <select
337 class="form-control"
338 v-model="insightId"
339 v-on:change="insightSelected(slide)"
340 >
341 <option value="null">Select Insight</option>
342 <option v-for="(insight, i) in insightList" :key="i" :value="insight._id">
343 {{ insight._id }}
344 </option>
345 </select>
346 </div>
347 </li>
333 </ul> 348 </ul>
334 </div> 349 </div>
350
351
352
353
354
335 355
336 <div class="row"> 356 <div class="row">
337 <div 357 <div
338 class="col-sm-4 col-md-4 col-lg-4 col-xl-4" 358 class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
339 v-for="(field, j) in slide.metaData.fields" 359 v-for="(field, j) in slide.metaData.fields"
340 :key="j" 360 :key="j"
341 > 361 >
342 <div 362 <div
343 class="form-group floating-label" 363 class="form-group floating-label"
344 v-if="field.fieldType == 'text'" 364 v-if="field.fieldType == 'text'"
345 > 365 >
346 <label for="lname" class="lname">{{ field.displayName }}</label> 366 <label for="lname" class="lname">{{ field.displayName }}</label>
347 <input 367 <input
348 type="text" 368 type="text"
349 class="form-control" 369 class="form-control"
350 value="" 370 value=""
351 placeholder=" " 371 placeholder=" "
352 v-model="field.fieldValue" 372 v-model="field.fieldValue"
353 /> 373 />
354 </div> 374 </div>
355 375
356 <div 376 <div
357 class="form-group floating-label" 377 class="form-group floating-label"
358 v-if="field.fieldType == 'image'" 378 v-if="field.fieldType == 'image'"
359 > 379 >
360 <label for="lname" class="lname"> {{ field.displayName }}</label> 380 <label for="lname" class="lname"> {{ field.displayName }}</label>
361 <img v-if="field.fieldValue" style="width:40px;height: 40px;" :src="field.fieldValue" 381 <img v-if="field.fieldValue" style="width:40px;height: 40px;" :src="field.fieldValue"
362 /> 382 />
363 <input 383 <input
364 @change="fieldcreateImage(i, j)" 384 @change="fieldcreateImage(i, j)"
365 type="file" 385 type="file"
366 name="photo" 386 name="photo"
367 :id="i + '' + j" 387 :id="i + '' + j"
368 accept="image/*" 388 accept="image/*"
369 /> 389 />
370 </div> 390 </div>
371 </div> 391 </div>
372 </div> 392 </div>
373 393
374 <div class="row"> 394 <div class="row">
375 <div 395 <div
376 class="col-sm-4 col-md-4 col-lg-4 col-xl-4" 396 class="col-sm-4 col-md-4 col-lg-4 col-xl-4"
377 v-for="(cum, j) in slide.metaData.comments" 397 v-for="(cum, j) in slide.metaData.comments"
378 :key="j" 398 :key="j"
379 > 399 >
380 <div class="form-group floating-label"> 400 <div class="form-group floating-label">
381 <label for="lname" class="lname">Comment Box {{ j + 1 }}</label> 401 <label for="lname" class="lname">Comment Box {{ j + 1 }}</label>
382 <input 402 <input
383 type="text" 403 type="text"
384 class="form-control" 404 class="form-control"
385 value="" 405 value=""
386 placeholder=" " 406 placeholder=" "
387 v-model="cum.comment" 407 v-model="cum.comment"
388 /> 408 />
389 </div> 409 </div>
390 </div> 410 </div>
391 </div> 411 </div>
412
392 </div> 413 </div>
393 414
394 <!-- 1st row end --> 415 <!-- 1st row end -->
395 <!-- case study ends --> 416 <!-- case study ends -->
396 <div class="clearfix"></div> 417 <div class="clearfix"></div>
397 418
398 <!-- users land image --> 419 <!-- users land image -->
399 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 420 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
400 <div class="form-layout signup-frm-spc"> 421 <div class="form-layout signup-frm-spc">
401 <form> 422 <form>
402 <a 423 <a
403 href="javascript:void(0);" 424 href="javascript:void(0);"
404 class="btn btn-lg sb-button" 425 class="btn btn-lg sb-button"
405 type="submit" 426 type="submit"
406 @click="submit" 427 @click="submit"
407 > 428 >
408 <img src="../assets/images/key.svg" /> submit 429 <img src="../assets/images/key.svg" /> submit
409 </a> 430 </a>
410 </form> 431 </form>
411 </div> 432 </div>
412 </div> 433 </div>
413 434
414 <!-- data wrp --> 435 <!-- data wrp -->
415 <!-- body wrapper --> 436 <!-- body wrapper -->
416 </div> 437 </div>
417 </main> 438 </main>
418 </template> 439 </template>
419 440
420 <script> 441 <script>
421 import Vue from "vue"; 442 import Vue from "vue";
422 import router from "../router"; 443 import router from "../router";
423 import $ from "jquery"; 444 import $ from "jquery";
424 import axios from "axios"; 445 import axios from "axios";
425 446
426 export default { 447 export default {
427 name: "Profile", 448 name: "Profile",
428 449
429 data() { 450 data() {
430 return { 451 return {
431 loggedinFlag: false, 452 loggedinFlag: false,
432 caseId: null, 453 caseId: null,
433 editMode: false, 454 editMode: false,
434 userData: null, 455 userData: null,
435 usertoken: null, 456 usertoken: null,
436 insightName: null, 457 insightName: null,
437 focusName: null, 458 focusName: null,
438 slideId: null, 459 slideId: null,
439 userList: [], 460 userList: [],
440 templateList: [], 461 templateList: [],
462 insightList: [],
463 insightId:null,
441 caseStudy: { 464 caseStudy: {
442 caseStudyDetails: { 465 caseStudyDetails: {
443 userId: [], 466 userId: [],
444 intro: { 467 intro: {
445 name: null, 468 name: null,
446 logoURL: null, 469 logoURL: null,
447 app: null, 470 app: null,
448 type: null, 471 type: null,
449 focus: null, 472 focus: null,
450 readTime: null, 473 readTime: null,
451 platForm: null, 474 platForm: null,
452 authors: [], 475 authors: [],
453 }, 476 },
454 outro: { 477 outro: {
455 authorImage: [], 478 authorImage: [],
456 authors: [], 479 authors: [],
457 designer: null, 480 designer: null,
458 illustrations: null, 481 illustrations: null,
459 }, 482 },
460 insightTags: [], 483 insightTags: [],
461 focusAreas: [], 484 focusAreas: [],
462 }, 485 },
463 slides: [], 486 slides: [],
464 }, 487 },
465 }; 488 };
466 }, 489 },
467 mounted() { 490 mounted() {
468 if (this.$route.fullPath.split("?").length == 2) { 491 if (this.$route.fullPath.split("?").length == 2) {
469 this.editMode = true; 492 this.editMode = true;
470 this.caseId = this.$route.fullPath.split("?")[1]; 493 this.caseId = this.$route.fullPath.split("?")[1];
471 var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId); 494 var introData = localStorage.getItem("spotlight_caseStudy" + this.caseId);
472 if (introData) { 495 if (introData) {
473 introData = JSON.parse(introData); 496 introData = JSON.parse(introData);
474 console.log("introData", introData); 497 console.log("introData", introData);
475 this.caseStudy.caseStudyDetails.intro = introData.intro; 498 this.caseStudy.caseStudyDetails.intro = introData.intro;
476 this.caseStudy.caseStudyDetails.userId = introData.userId; 499 this.caseStudy.caseStudyDetails.userId = introData.userId;
477 this.caseStudy.caseStudyDetails.outro = introData.outro; 500 this.caseStudy.caseStudyDetails.outro = introData.outro;
478 this.caseStudy.caseStudyDetails.insightTags = introData.insightTags; 501 this.caseStudy.caseStudyDetails.insightTags = introData.insightTags;
479 this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas; 502 this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas;
480 } 503 }
481 } 504 }
482 var userdata = localStorage.getItem("spotlight_usertoken"); 505 var userdata = localStorage.getItem("spotlight_usertoken");
483 if (userdata) { 506 if (userdata) {
484 userdata = JSON.parse(userdata); 507 userdata = JSON.parse(userdata);
485 this.usertoken = userdata.token; 508 this.usertoken = userdata.token;
486 this.getUserList(); 509 this.getUserList();
487 this.getTemplateList(); 510 this.getTemplateList();
511 this.getInsightList();
488 } 512 }
489 }, 513 },
490 methods: { 514 methods: {
491 selectUser(i) { 515 selectUser(i) {
492 this.userList[i]; 516 this.userList[i];
493 this.caseStudy.caseStudyDetails.intro.authors.push(this.userList[i].name); 517 this.caseStudy.caseStudyDetails.intro.authors.push(this.userList[i].name);
494 this.caseStudy.caseStudyDetails.outro.authors.push(this.userList[i].name); 518 this.caseStudy.caseStudyDetails.outro.authors.push(this.userList[i].name);
495 this.caseStudy.caseStudyDetails.userId.push(this.userList[i]._id); 519 this.caseStudy.caseStudyDetails.userId.push(this.userList[i]._id);
496 console.log("-", this.caseStudy); 520 console.log("-", this.caseStudy);
497 }, 521 },
498 522
499 logout() { 523 logout() {
500 this.$router.push("/"); 524 this.$router.push("/");
501 }, 525 },
502 addInsight(type) { 526 addInsight(type) {
503 if (type == "focus") { 527 if (type == "focus") {
504 this.caseStudy.caseStudyDetails.focusAreas.push(this.focusName); 528 this.caseStudy.caseStudyDetails.focusAreas.push(this.focusName);
505 this.focusName = null; 529 this.focusName = null;
506 } else if (type == "insight") { 530 } else if (type == "insight") {
507 this.caseStudy.caseStudyDetails.insightTags.push(this.insightName); 531 this.caseStudy.caseStudyDetails.insightTags.push(this.insightName);
508 this.insightName = null; 532 this.insightName = null;
509 } 533 }
510 }, 534 },
511 removeInsight(i, type) { 535 removeInsight(i, type) {
512 if (type == "focus") { 536 if (type == "focus") {
513 this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1); 537 this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1);
514 } else if (type == "insight") { 538 } else if (type == "insight") {
515 this.caseStudy.caseStudyDetails.insightTags.splice(i, 1); 539 this.caseStudy.caseStudyDetails.insightTags.splice(i, 1);
516 } 540 }
517 }, 541 },
518 542
519 async slideSelected(i) { 543 async slideSelected(i) {
520 console.log("id is", this.templateList[i]); 544 console.log("id is", this.templateList[i]);
521 var slideMetadata = {}; 545 var slideMetadata = {};
522 // slideMetadata = await this.getMeatda(this.templateList[i]._id); 546 // slideMetadata = await this.getMeatda(this.templateList[i]._id);
523 this.slideId = null; 547 this.slideId = null;
524 // this.templateList[i].metaData = slideMetadata.metaData; 548 // this.templateList[i].metaData = slideMetadata.metaData;
525 this.caseStudy.slides.push(this.templateList[i]); 549 this.caseStudy.slides.push(this.templateList[i]);
526 console.log("this.caseStudy.slides", this.caseStudy.slides); 550 console.log("this.caseStudy.slides", this.caseStudy.slides);
527 }, 551 },
552 async insightSelected(data) {
553
554 // this.caseStudy.slides.push(this.templateList[i]);
555
556 console.log("data",data);
557 data.insightId = this.insightId;
558 this.insightId = null;
559 },
528 560
529 removeSlide(i) { 561 removeSlide(i) {
530 this.caseStudy.slides.splice(i, 1); 562 this.caseStudy.slides.splice(i, 1);
531 }, 563 },
532 564
533 createImage(type) { 565 createImage(type) {
534 var that = this; 566 var that = this;
535 console.log(document.getElementById(type)); 567 console.log(document.getElementById(type));
536 var file = document.getElementById(type).files[0]; 568 var file = document.getElementById(type).files[0];
537 console.log("file", file); 569 console.log("file", file);
538 var reader = new FileReader(); 570 var reader = new FileReader();
539 reader.onload = function (e) { 571 reader.onload = function (e) {
540 console.log("e.target.result ", e.target.result); 572 console.log("e.target.result ", e.target.result);
541 that.uploadImage(type, e.target.result); 573 that.uploadImage(type, e.target.result);
542 }; 574 };
543 reader.onerror = function (error) { 575 reader.onerror = function (error) {
544 alert(error); 576 alert(error);
545 }; 577 };
546 if (file) { 578 if (file) {
547 reader.readAsDataURL(file); 579 reader.readAsDataURL(file);
548 } 580 }
549 }, 581 },
550 uploadImage(type, base64) { 582 uploadImage(type, base64) {
551 console.log("type", type); 583 console.log("type", type);
552 var obj = { 584 var obj = {
553 image: base64, 585 image: base64,
554 }; 586 };
555 axios 587 axios
556 .post("/superAdmin/uploadImage", obj, { 588 .post("/superAdmin/uploadImage", obj, {
557 headers: { 589 headers: {
558 Authorization: "Bearer " + this.usertoken, 590 Authorization: "Bearer " + this.usertoken,
559 }, 591 },
560 }) 592 })
561 .then((response) => { 593 .then((response) => {
562 if (type == "logo") { 594 if (type == "logo") {
563 595
564 setTimeout(() => this.caseStudy.caseStudyDetails.intro.logoURL = response.data.data, 10); 596 setTimeout(() => this.caseStudy.caseStudyDetails.intro.logoURL = response.data.data, 10);
565 } else if (type == "outdor") { 597 } else if (type == "outdor") {
566 this.caseStudy.caseStudyDetails.outro.authorImage = []; 598 this.caseStudy.caseStudyDetails.outro.authorImage = [];
567 setTimeout(() => this.caseStudy.caseStudyDetails.outro.authorImage.push( 599 setTimeout(() => this.caseStudy.caseStudyDetails.outro.authorImage.push(
568 response.data.data 600 response.data.data
569 ), 10); 601 ), 10);
570 602
571 } 603 }
572 604
573 console.log(response.data.data); 605 console.log(response.data.data);
574 console.log(this.caseStudy); 606 console.log(this.caseStudy);
575 }) 607 })
576 .catch((error) => { 608 .catch((error) => {
577 if (error.response) { 609 if (error.response) {
578 this.$toaster.error(error.response.data.message); 610 this.$toaster.error(error.response.data.message);
579 } 611 }
580 }); 612 });
581 }, 613 },
582 614
583 fieldcreateImage(i, j) { 615 fieldcreateImage(i, j) {
584 console.log("i", i); 616 console.log("i", i);
585 console.log("j", j); 617 console.log("j", j);
586 var that = this; 618 var that = this;
587 var id = i + "" + j; 619 var id = i + "" + j;
588 console.log(document.getElementById(id)); 620 console.log(document.getElementById(id));
589 var file = document.getElementById(id).files[0]; 621 var file = document.getElementById(id).files[0];
590 // var file = document.querySelector("input[type=file]").files[0]; 622 // var file = document.querySelector("input[type=file]").files[0];
591 console.log("file", file); 623 console.log("file", file);
592 var reader = new FileReader(); 624 var reader = new FileReader();
593 reader.onload = function (e) { 625 reader.onload = function (e) {
594 // console.log("e.target.result ",e.target.result ) 626 // console.log("e.target.result ",e.target.result )
595 that.fielduploadImage(i, j, e.target.result); 627 that.fielduploadImage(i, j, e.target.result);
596 }; 628 };
597 reader.onerror = function (error) { 629 reader.onerror = function (error) {
598 alert(error); 630 alert(error);
599 }; 631 };
600 if (file) { 632 if (file) {
601 reader.readAsDataURL(file); 633 reader.readAsDataURL(file);
602 } 634 }
603 }, 635 },
604 fielduploadImage(i, j, base64) { 636 fielduploadImage(i, j, base64) {
605 var obj = { 637 var obj = {
606 image: base64, 638 image: base64,
607 }; 639 };
608 axios 640 axios
609 .post("/superAdmin/uploadImage", obj, { 641 .post("/superAdmin/uploadImage", obj, {
610 headers: { 642 headers: {
611 Authorization: "Bearer " + this.usertoken, 643 Authorization: "Bearer " + this.usertoken,
612 }, 644 },
613 }) 645 })
614 .then((response) => { 646 .then((response) => {
615 setTimeout(() => this.caseStudy.slides[i].metaData.fields[j].fieldValue = 647 setTimeout(() => this.caseStudy.slides[i].metaData.fields[j].fieldValue =
616 response.data.data, 10); 648 response.data.data, 10);
617 649
618 650
619 console.log(response.data.data); 651 console.log(response.data.data);
620 console.log(this.caseStudy); 652 console.log(this.caseStudy);
621 }) 653 })
622 .catch((error) => { 654 .catch((error) => {
623 if (error.response) { 655 if (error.response) {
624 this.$toaster.error(error.response.data.message); 656 this.$toaster.error(error.response.data.message);
625 } 657 }
626 }); 658 });
627 }, 659 },
628 660
629 getUserList() { 661 getUserList() {
630 axios 662 axios
631 .get("/superAdmin/users", { 663 .get("/superAdmin/users", {
632 headers: { 664 headers: {
633 Authorization: "Bearer " + this.usertoken, 665 Authorization: "Bearer " + this.usertoken,
634 }, 666 },
635 }) 667 })
636 .then((response) => { 668 .then((response) => {
637 response.data.data.forEach((element) => { 669 response.data.data.forEach((element) => {
638 if (element.name) { 670 if (element.name) {
639 this.userList.push(element); 671 this.userList.push(element);
640 } 672 }
641 }); 673 });
642 console.log("response", this.userList); 674 console.log("response", this.userList);
643 }) 675 })
644 .catch((error) => console.log(error)); 676 .catch((error) => console.log(error));
645 }, 677 },
646 678
647 getTemplateList() { 679 getTemplateList() {
648 axios 680 axios
649 .get("/superAdmin/templates", { 681 .get("/superAdmin/templates", {
650 headers: { 682 headers: {
651 Authorization: "Bearer " + this.usertoken, 683 Authorization: "Bearer " + this.usertoken,
652 }, 684 },
653 }) 685 })
654 .then((response) => { 686 .then((response) => {
655 response.data.data.forEach((temp) => { 687 response.data.data.forEach((temp) => {
656 if ( 688 if (
657 temp._id != "INTRO_oqkdMOVDrwRptsdWJ6Ye" && 689 temp._id != "INTRO_oqkdMOVDrwRptsdWJ6Ye" &&
658 temp._id != "OUTRO_oqkdMOVDrwRptsdWJ6Ye" 690 temp._id != "OUTRO_oqkdMOVDrwRptsdWJ6Ye"
659 ) { 691 ) {
660 if (temp.bounceBoard) { 692 if (temp.bounceBoard) {
661 for (var i = 0; i < temp.commentBox; i++) { 693 for (var i = 0; i < temp.commentBox; i++) {
662 temp.metaData.comments.push({ 694 temp.metaData.comments.push({
663 userId: null, 695 userId: null,
664 slideId: null, 696 slideId: null,
665 caseStudyId: null, 697 caseStudyId: null,
666 comment: null, 698 comment: null,
667 }); 699 });
668 } 700 }
669 } 701 }
670 this.templateList.push(temp); 702 this.templateList.push(temp);
671 } 703 }
672 }); 704 });
673 if (this.editMode) { 705 if (this.editMode) {
674 this.getSLideData(); 706 this.getSLideData();
675 } 707 }
676 console.log("templates", this.templateList); 708 console.log("templates", this.templateList);
677 }) 709 })
678 .catch((error) => console.log(error)); 710 .catch((error) => console.log(error));
679 }, 711 },
712 getInsightList() {
713 axios
714 .get("/superAdmin/insight", {
715 headers: {
716 Authorization: "Bearer " + this.usertoken,
717 },
718 })
719 .then((response) => {
720 this.insightList = response.data.data;
721
722 console.log("insight", response.data.data);
723 })
724 .catch((error) => console.log(error));
725 },
680 726
681 getSLideData() { 727 getSLideData() {
682 axios 728 axios
683 .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, { 729 .get("/superAdmin/caseStudySlides?caseStudyId=" + this.caseId, {
684 headers: { 730 headers: {
685 Authorization: "Bearer " + this.usertoken, 731 Authorization: "Bearer " + this.usertoken,
686 }, 732 },
687 }) 733 })
688 .then((response) => { 734 .then((response) => {
689 var finalArray = []; 735 var finalArray = [];
690 response.data.data.forEach((template_) => { 736 response.data.data.forEach((template_) => {
691 var keys = []; 737 var keys = [];
692 var i = this.templateList.findIndex( 738 var i = this.templateList.findIndex(
693 (temp_) => temp_._id == template_.templateId 739 (temp_) => temp_._id == template_.templateId
694 ); 740 );
695 var obj = { 741 var obj = {
696 _id: this.templateList[i]._id, 742 _id: this.templateList[i]._id,
697 bounceBoard: this.templateList[i].bounceBoard, 743 bounceBoard: this.templateList[i].bounceBoard,
698 insight: this.templateList[i].insight, 744 insight: this.templateList[i].insight,
745 slideId:template_._id,
699 // commentBox: this.templateList[i].commentBox, 746 // commentBox: this.templateList[i].commentBox,
700 metaData: { 747 metaData: {
701 fields: [], 748 fields: [],
702 comments: [], 749 comments: [],
703 }, 750 },
704 }; 751 };
705 if (this.templateList[i].bounceBoard) { 752 if (this.templateList[i].bounceBoard) {
706 obj.commentBox = this.templateList[i].commentBox; 753 obj.commentBox = this.templateList[i].commentBox;
707 } 754 }
755 if (this.templateList[i].insight) {
756 obj.insightId = template_.insightId;
757 }
708 var fieldArray = []; 758 var fieldArray = [];
709 this.templateList[i].metaData.fields.forEach((element) => { 759 this.templateList[i].metaData.fields.forEach((element) => {
710 var fieldobj = { 760 var fieldobj = {
711 fieldName: element.fieldName, 761 fieldName: element.fieldName,
712 displayName: element.displayName, 762 displayName: element.displayName,
713 fieldValue: template_.metaData[element.fieldName], 763 fieldValue: template_.metaData[element.fieldName],
714 fieldType: element.fieldType, 764 fieldType: element.fieldType,
715 }; 765 };
716 obj.metaData.fields.push(fieldobj); 766 obj.metaData.fields.push(fieldobj);
717 }); 767 });
718 finalArray.push(obj); 768 finalArray.push(obj);
719 }); 769 });
720 this.caseStudy.slides = finalArray; 770 this.caseStudy.slides = finalArray;
721 console.log("----", finalArray); 771 console.log("----", finalArray);
722 console.log(this.templateList, "getSLideData==>"); 772 console.log(this.templateList, "getSLideData==>");
723 }) 773 })
724 .catch((error) => console.log(error)); 774 .catch((error) => console.log(error));
725 }, 775 },
726 776
727 submit() { 777 submit() {
728 const latest = Object.create(this.caseStudy); 778 const latest = Object.create(this.caseStudy);
729 779
730 var slidArray = []; 780 var slidArray = [];
731 latest.slides.forEach((slides) => { 781 latest.slides.forEach((slides) => {
732 console.log("slides", slides); 782 console.log("slides", slides);
733 var slideData = {}; 783 var slideData = {};
734 slideData.templateId = slides._id; 784 slideData.templateId = slides._id;
735 slideData.bounceBoard = slides.bounceBoard; 785 slideData.bounceBoard = slides.bounceBoard;
736 slideData.insight = slides.insight; 786 slideData.insight = slides.insight;
787 if(slides.slideId){
788 slideData.slideId = slides.slideId;
789
790 }
791 if(slides.insightId){
792 slideData.insightId = slides.insightId;
793
794 }
737 if (slides.metaData.comments && slides.metaData.comments.length > 0) { 795 if (slides.metaData.comments && slides.metaData.comments.length > 0) {
738 slideData.comments = slides.metaData.comments; 796 slideData.comments = slides.metaData.comments;
739 // this.getSLideData(); 797 // this.getSLideData();
740 } 798 }
741 // var comments = []; 799 // var comments = [];
742 // if (slides.bounceBoard) { 800 // if (slides.bounceBoard) {
743 // slides.metaData.comments.forEach((element) => { 801 // slides.metaData.comments.forEach((element) => {
744 // comments.push(element.comment); 802 // comments.push(element.comment);
745 // }); 803 // });
746 // slideData.comments = comments; 804 // slideData.comments = comments;
747 // } 805 // }
748 806
749 slides.metaData.fields.forEach((fields_) => { 807 slides.metaData.fields.forEach((fields_) => {
750 slideData[fields_.fieldName] = fields_.fieldValue; 808 slideData[fields_.fieldName] = fields_.fieldValue;
751 }); 809 });
752 slidArray.push(slideData); 810 slidArray.push(slideData);
753 // delete slides.metaData.fields; 811 // delete slides.metaData.fields;
754 }); 812 });
755 813
756 console.log("slideData", slidArray); 814 console.log("slideData", slidArray);
757 if (this.editMode) { 815 if (this.editMode) {
758 this.updateProfile(slidArray); 816 this.updateProfile(slidArray);
759 }else{ 817 }else{
760 this.saveProfile(slidArray); 818 this.saveProfile(slidArray);
761 } 819 }
762 }, 820 },
763 821
764 saveProfile(slides) { 822 saveProfile(slides) {
765 var obj = {}; 823 var obj = {};
766 obj.caseStudyDetails = this.caseStudy.caseStudyDetails; 824 obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
767 obj.caseStudyDetails.intro.readTime = Math.round( 825 obj.caseStudyDetails.intro.readTime = Math.round(
768 slides.length / 3 826 slides.length / 3
769 ).toString(); 827 ).toString();
770 obj.slides = slides; 828 obj.slides = slides;
771 axios 829 axios
772 .post("/superAdmin/caseStudy", obj, { 830 .post("/superAdmin/caseStudy", obj, {
773 headers: { 831 headers: {
774 Authorization: "Bearer " + this.usertoken, 832 Authorization: "Bearer " + this.usertoken,
775 }, 833 },
776 }) 834 })
777 .then((response) => { 835 .then((response) => {
778 // this.userData = response.data.data; 836 // this.userData = response.data.data;
779 this.$toaster.success("Case Study Created"); 837 this.$toaster.success("Case Study Created");
838 this.$router.go(this.$router.currentRoute)
780 839
781 console.log(response); 840 console.log(response);
782 }) 841 })
783 .catch((error) => { 842 .catch((error) => {
784 if (error.response) { 843 if (error.response) {
785 this.$toaster.error(error.response.data.message); 844 this.$toaster.error(error.response.data.message);
786 } 845 }
787 }); 846 });
788 }, 847 },
789 updateProfile(slides) { 848 updateProfile(slides) {
790 var obj = {}; 849 var obj = {};
791 obj.caseStudyId = this.caseId, 850 obj.caseStudyId = this.caseId,
792 obj.caseStudyDetails = this.caseStudy.caseStudyDetails; 851 obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
793 obj.caseStudyDetails.intro.readTime = Math.round( 852 obj.caseStudyDetails.intro.readTime = Math.round(
794 slides.length / 3 853 slides.length / 3
795 ).toString(); 854 ).toString();
796 obj.slides = slides; 855 obj.slides = slides;
797 axios 856 axios
798 .put("/superAdmin/caseStudy", obj, { 857 .put("/superAdmin/caseStudy", obj, {
799 headers: { 858 headers: {
800 Authorization: "Bearer " + this.usertoken, 859 Authorization: "Bearer " + this.usertoken,
801 }, 860 },
802 }) 861 })
803 .then((response) => { 862 .then((response) => {
804 // this.userData = response.data.data; 863 // this.userData = response.data.data;
805 this.$toaster.success("Case Study Updated"); 864 this.$toaster.success("Case Study Updated");
806 this.$router.go(this.$router.currentRoute) 865 this.$router.go(this.$router.currentRoute)
807 866
808 867
809 console.log(response); 868 console.log(response);
810 }) 869 })
811 .catch((error) => { 870 .catch((error) => {
812 if (error.response) { 871 if (error.response) {
813 this.$toaster.error(error.response.data.message); 872 this.$toaster.error(error.response.data.message);
814 } 873 }
815 }); 874 });
816 }, 875 },
817 listPage(){ 876 listPage(url){
818 this.$router.push("/casestudy"); 877 this.$router.push(url);
819 }, 878 },
820 879
821 async getMeatda(tempId) { 880 async getMeatda(tempId) {
822 var obj = [ 881 var obj = [
823 { 882 {
824 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 883 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
825 metaData: { 884 metaData: {
826 fields: [ 885 fields: [
827 { 886 {
828 fieldName: "authorImage", 887 fieldName: "authorImage",
829 displayName: "Author Image", 888 displayName: "Author Image",
830 fieldValue: null, 889 fieldValue: null,
831 fieldType: "image", 890 fieldType: "image",
832 }, 891 },
833 { 892 {
834 fieldName: "mobileImage", 893 fieldName: "mobileImage",
835 displayName: "Mobile Image", 894 displayName: "Mobile Image",
836 fieldValue: null, 895 fieldValue: null,
837 fieldType: "image", 896 fieldType: "image",
838 }, 897 },
839 { 898 {
840 fieldName: "textBox", 899 fieldName: "textBox",
841 displayName: "Text Box", 900 displayName: "Text Box",
842 fieldValue: null, 901 fieldValue: null,
843 fieldType: "text", 902 fieldType: "text",
844 }, 903 },
845 ], 904 ],
846 }, 905 },
847 }, 906 },
848 { 907 {
849 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 908 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
850 metaData: { 909 metaData: {
851 fields: [ 910 fields: [
852 { 911 {
853 fieldName: "authorImage", 912 fieldName: "authorImage",
854 displayName: "Author Image", 913 displayName: "Author Image",
855 fieldValue: null, 914 fieldValue: null,
856 fieldType: "image", 915 fieldType: "image",
857 }, 916 },
858 ], 917 ],
859 comments: [{ comment: null }, { comment: null }, { comment: null }], 918 comments: [{ comment: null }, { comment: null }, { comment: null }],
860 }, 919 },
861 }, 920 },
862 { 921 {
863 tempId: "T3_cqNIf7tuqL4jyON63dA7", 922 tempId: "T3_cqNIf7tuqL4jyON63dA7",
864 metaData: { 923 metaData: {
865 fields: [ 924 fields: [
866 { 925 {
867 fieldName: "authorImage", 926 fieldName: "authorImage",
868 displayName: "Author Image", 927 displayName: "Author Image",
869 fieldValue: null, 928 fieldValue: null,
870 fieldType: "image", 929 fieldType: "image",
871 }, 930 },
872 { 931 {
873 fieldName: "mobileImage", 932 fieldName: "mobileImage",
874 displayName: "Mobile Image", 933 displayName: "Mobile Image",
875 fieldValue: null, 934 fieldValue: null,
876 fieldType: "image", 935 fieldType: "image",
877 }, 936 },
878 ], 937 ],
879 comments: [ 938 comments: [
880 { comment: null }, 939 { comment: null },
881 { comment: null }, 940 { comment: null },
882 { comment: null }, 941 { comment: null },
883 { comment: null }, 942 { comment: null },
884 ], 943 ],
885 }, 944 },
886 }, 945 },
887 ]; 946 ];
888 var i = obj.findIndex((obj_) => obj_.tempId == tempId); 947 var i = obj.findIndex((obj_) => obj_.tempId == tempId);
889 return obj[i]; 948 return obj[i];
890 }, 949 },
891 }, 950 },
892 }; 951 };
893 </script> 952 </script>
894 953
src/router/index.js
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 import { authGuard } from "../auth/authGuard" 3 import { authGuard } from "../auth/authGuard"
4 import LandingPage from '@/components/LandingPage' 4 import LandingPage from '@/components/LandingPage'
5 import Profile from '@/components/Profile' 5 import Profile from '@/components/Profile'
6 import CaseStudy from '@/components/CaseStudy' 6 import CaseStudy from '@/components/CaseStudy'
7 import Insight from '@/components/Insight'
7 8
8 9
9 import router from '../router' 10 import router from '../router'
10 Vue.use(Router) 11 Vue.use(Router)
11 12
12 export default new Router({ 13 export default new Router({
13 mode: 'history', 14 mode: 'history',
14 routes: [{ 15 routes: [{
15 path: '/', 16 path: '/',
16 name: 'LandingPage', 17 name: 'LandingPage',
17 component: LandingPage, 18 component: LandingPage,
18 // beforeEnter: function(to, from, next) { 19 // beforeEnter: function(to, from, next) {
19 // var userdata = localStorage.getItem('spotlight_usertoken') 20 // var userdata = localStorage.getItem('spotlight_usertoken')
20 // if (userdata) { 21 // if (userdata) {
21 // router.push({ name: 'Welcome' }) 22 // router.push({ name: 'Welcome' })
22 // } 23 // }
23 // next() 24 // next()
24 // } 25 // }
25 }, 26 },
26 { 27 {
27 path: '/profile', 28 path: '/profile',
28 name: 'Profile', 29 name: 'Profile',
29 component: Profile, 30 component: Profile,
30 }, 31 },
31 { 32 {
32 path: '/casestudy', 33 path: '/casestudy',
33 name: 'CaseStudy', 34 name: 'CaseStudy',
34 component: CaseStudy, 35 component: CaseStudy,
36 },
37 {
38 path: '/insight',
39 name: 'Insight',
40 component: Insight,
35 } 41 }
36 42
37 43
38 44
39 45
40 ], 46 ],
41 scrollBehavior(to, from, savedPosition) { 47 scrollBehavior(to, from, savedPosition) {
42 this.seen = false 48 this.seen = false
43 return { x: 0, y: 0 } 49 return { x: 0, y: 0 }
44 } 50 }
45 }) 51 })