From 0e3c6b828304cce2fdb795242d20985e04813bcc Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Tue, 16 Feb 2021 16:26:34 +0530
Subject: [PATCH] add create study fields

---
 src/components/Profile.vue | 282 +++++++++++++++++++++++++++------------------
 1 file changed, 168 insertions(+), 114 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index fa494ae..62bd431 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,22 +1,21 @@
 <template>
   <main class="landing-page">
-
-
-     <!-- profile -->
+    <!-- profile -->
     <div class="popup-wrp" style="display: none">
       <div class="overlay" @click="hideDialog"></div>
-      <div class="popup-set" id="add-profile" style="display: none;width:700px">
-        
+      <div
+        class="popup-set"
+        id="add-profile"
+        style="display: none; width: 700px"
+      >
         <!-- header -->
         <div class="popup-body">
           <form class="popup-forms">
             <div class="row">
               <!-- input -->
-             <img :src="templateImage" />
+              <img :src="templateImage" />
               <!-- input -->
-              
-              
-             
+
               <!-- input -->
 
               <!-- input -->
@@ -32,7 +31,6 @@
               </div> -->
               <!-- input -->
             </div>
-            
           </form>
         </div>
         <div class="clearfix"></div>
@@ -63,10 +61,20 @@
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" style="cursor:pointer" @click="listPage('/casestudy')">Case Study List</a>
+              <a
+                class="nav-link"
+                style="cursor: pointer"
+                @click="listPage('/casestudy')"
+                >Case Study List</a
+              >
             </li>
             <li class="nav-item active">
-                <a class="nav-link" style="cursor:pointer" @click="listPage('/insight')">Create Insight</a>
+              <a
+                class="nav-link"
+                style="cursor: pointer"
+                @click="listPage('/insight')"
+                >Create Insight</a
+              >
             </li>
           </ul>
         </div>
@@ -130,8 +138,8 @@
             />
           </div>
         </div>
-        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
-          <!-- <div class="form-group floating-label">
+        <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
+         <div class="form-group floating-label">
             <label for="lname" class="lname">Focus</label>
             <input
               type="text"
@@ -140,7 +148,25 @@
               placeholder=" "
               v-model="caseStudy.caseStudyDetails.intro.focus"
             />
-          </div> -->
+          </div>
+        </div> -->
+
+        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
+          <div class="form-group floating-label">
+            <label for="lname" class="lname"> App logo</label>
+            <img
+              v-if="caseStudy.caseStudyDetails.intro.logoURL"
+              style="width: 40px; height: 40px"
+              :src="caseStudy.caseStudyDetails.intro.logoURL"
+            />
+            <input
+              @change="createImage('logo')"
+              type="file"
+              name="photso"
+              id="logo"
+              accept="image/*"
+            />
+          </div>
         </div>
       </div>
       <!-- 1st row end -->
@@ -165,33 +191,49 @@
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-group floating-label">
             <label for="lname" class="lname">Platform</label>
-            <input
+            <!-- <input
               type="text"
               class="form-control"
               value=""
               placeholder=" "
               v-model="caseStudy.caseStudyDetails.intro.platForm"
-            />
+            /> -->
+            <select
+              class="form-control"
+              v-model="selectPlatform"
+              @change="addInsight('platform')"
+            >
+              <option value="null">Select Insight Tag</option>
+              <option value="Ios">Ios</option>
+              <option value="Web">Web</option>
+              <option value="Android">Android</option>
+            </select>
           </div>
         </div>
-
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-group floating-label">
-            <label for="lname" class="lname"> App logo</label>
-            <img v-if="caseStudy.caseStudyDetails.intro.logoURL" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.intro.logoURL"
-                />
-            <input
-              @change="createImage('logo')"
-              type="file"
-              name="photso"
-              id="logo"
-              accept="image/*"
-            />
+            <label for="lname" class="lname"></label>
+            <label for="lname" class="lname"></label>
+            <ul class="interests">
+              <!-- v-for="(interest, i) in caseStudy.caseStudyDetails
+                        .insightTags"
+                      :key="i" -->
+
+              <li v-if="caseStudy.caseStudyDetails.intro.platForm">
+                <span>{{ caseStudy.caseStudyDetails.intro.platForm }}</span>
+                <a
+                  href="javascript:void(0);"
+                  @click="removeInsight(0, 'platform')"
+                  class="cat-minus"
+                  ><img src="../assets/images/minus.svg"
+                /></a>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
       <!-- 2nd row -->
-      <!-- 3rd row -->
+      <!-- 3rd row -->`
       <div class="row">
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-group floating-label">
@@ -202,8 +244,7 @@
                   class=""
                   placeholder="Add Focus Areas"
                   v-model="focusName"
-                      v-on:keyup.enter="addInsight('focus')"
-
+                  v-on:keyup.enter="addInsight('focus')"
                 />
                 <a href="javascript:void(0);" @click="addInsight('focus')"
                   ><img src="../assets/images/plus-circle.svg"
@@ -307,8 +348,11 @@
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-group floating-label">
             <label for="lname" class="lname"> Author Image</label>
-            <img v-if="caseStudy.caseStudyDetails.outro.authorImage[0]" style="width:40px;height: 40px;" :src="caseStudy.caseStudyDetails.outro.authorImage[0]"
-                />
+            <img
+              v-if="caseStudy.caseStudyDetails.outro.authorImage[0]"
+              style="width: 40px; height: 40px"
+              :src="caseStudy.caseStudyDetails.outro.authorImage[0]"
+            />
             <input
               @change="createImage('outdor')"
               type="file"
@@ -333,8 +377,6 @@
         </div>
       </div>
 
-    
-
       <!-- case study  slides-->
       <div
         class="row profile-tab-spc-top"
@@ -360,28 +402,27 @@
                 >
               </p>
             </li>
-             <li class="nav-item active" v-if="slide.insight">
+            <li class="nav-item active" v-if="slide.insight">
               <div class="form-group floating-label">
-            <label for="lname" class="lname">Insight</label>
-            <select
-              class="form-control"
-              v-model="insightId"
-              v-on:change="insightSelected(slide)"
-            >
-              <option value="null">Select Insight</option>
-              <option v-for="(insight, i) in insightList" :key="i" :value="insight._id">
-                {{ insight.title }}
-              </option>
-            </select>
-          </div>
+                <label for="lname" class="lname">Insight</label>
+                <select
+                  class="form-control"
+                  v-model="insightId"
+                  v-on:change="insightSelected(slide)"
+                >
+                  <option value="null">Select Insight</option>
+                  <option
+                    v-for="(insight, i) in insightList"
+                    :key="i"
+                    :value="insight._id"
+                  >
+                    {{ insight.title }}
+                  </option>
+                </select>
+              </div>
             </li>
           </ul>
         </div>
-       
-
-        
- 
-
 
         <div class="row">
           <div
@@ -408,8 +449,11 @@
               v-if="field.fieldType == 'image'"
             >
               <label for="lname" class="lname"> {{ field.displayName }}</label>
-              <img v-if="field.fieldValue" style="width:40px;height: 40px;" :src="field.fieldValue"
-                />
+              <img
+                v-if="field.fieldValue"
+                style="width: 40px; height: 40px"
+                :src="field.fieldValue"
+              />
               <input
                 @change="fieldcreateImage(i, j)"
                 type="file"
@@ -435,15 +479,13 @@
                 value=""
                 placeholder=" "
                 v-model="cum.comment"
-               v-on:blur="updateComment(cum)"
+                v-on:blur="updateComment(cum)"
               />
             </div>
           </div>
         </div>
-       
       </div>
 
-
       <!-- 1st row -->
       <div class="row">
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
@@ -501,9 +543,9 @@ export default {
 
   data() {
     return {
-      object:null,
+      object: null,
       loggedinFlag: false,
-      templateImage:null,
+      templateImage: null,
       caseId: null,
       editMode: false,
       userData: null,
@@ -514,7 +556,7 @@ export default {
       userList: [],
       templateList: [],
       insightList: [],
-      insightId:null,
+      insightId: null,
       caseStudy: {
         caseStudyDetails: {
           userId: [],
@@ -538,6 +580,7 @@ export default {
         },
         slides: [],
       },
+      selectPlatform: "",
     };
   },
   mounted() {
@@ -548,7 +591,7 @@ export default {
       if (introData) {
         introData = JSON.parse(introData);
         console.log("introData", introData);
-        if(introData.intro.focus){
+        if (introData.intro.focus) {
           delete introData.intro.focus;
         }
         this.caseStudy.caseStudyDetails.intro = introData.intro;
@@ -556,6 +599,8 @@ export default {
         this.caseStudy.caseStudyDetails.outro = introData.outro;
         this.caseStudy.caseStudyDetails.insightTags = introData.insightTags;
         this.caseStudy.caseStudyDetails.focusAreas = introData.focusAreas;
+        this.selectPlatform = introData.intro.platForm;
+        console.log("this.selectPlatform", this.selectPlatform);
       }
     }
     var userdata = localStorage.getItem("spotlight_usertoken");
@@ -586,6 +631,9 @@ export default {
       } else if (type == "insight") {
         this.caseStudy.caseStudyDetails.insightTags.push(this.insightName);
         this.insightName = null;
+      } else if (type == "platform") {
+        this.caseStudy.caseStudyDetails.intro.platForm = this.selectPlatform;
+        // this.selectPlatform = null;
       }
     },
     removeInsight(i, type) {
@@ -593,39 +641,40 @@ export default {
         this.caseStudy.caseStudyDetails.focusAreas.splice(i, 1);
       } else if (type == "insight") {
         this.caseStudy.caseStudyDetails.insightTags.splice(i, 1);
+      } else if (type == "platform") {
+        this.caseStudy.caseStudyDetails.intro.platForm = "";
+        this.selectPlatform = null;
       }
     },
 
     async slideSelected(i) {
       console.log("id is", this.templateList[i]);
       this.object = JSON.parse(JSON.stringify(this.templateList[i]));
-      
+
       // var keys = Object.keys(this.templateList[i]);
       // keys.forEach(element => {
-        //   obj[element] = this.templateList[i][element];
+      //   obj[element] = this.templateList[i][element];
       // });
 
-      console.log("obj", this.object)
+      console.log("obj", this.object);
       // slideMetadata = await this.getMeatda(this.templateList[i]._id);
       this.slideId = null;
       // this.templateList[i].metaData = slideMetadata.metaData;
-      this.caseStudy.slides.push( this.object);
-        this.templateList[i].metaData.fields.forEach(fields_ => {
-          fields_.fieldValue == null
+      this.caseStudy.slides.push(this.object);
+      this.templateList[i].metaData.fields.forEach((fields_) => {
+        fields_.fieldValue == null;
+      });
+      if (this.templateList[i].metaData.comments) {
+        this.templateList[i].metaData.comments.forEach((coments_) => {
+          coments_.comment == null;
         });
-        if(this.templateList[i].metaData.comments){
-          this.templateList[i].metaData.comments.forEach(coments_ => {
-           coments_.comment == null
-         });
-  
-        }
+      }
       console.log("this.caseStudy.slides", this.caseStudy.slides);
     },
     async insightSelected(data) {
-     
       // this.caseStudy.slides.push(this.templateList[i]);
-      
-      console.log("data",data);
+
+      console.log("data", data);
       data.insightId = this.insightId;
       // this.insightId = null;
     },
@@ -664,14 +713,21 @@ export default {
         })
         .then((response) => {
           if (type == "logo") {
-            
-             setTimeout(() => this.caseStudy.caseStudyDetails.intro.logoURL = response.data.data, 99);
+            setTimeout(
+              () =>
+                (this.caseStudy.caseStudyDetails.intro.logoURL =
+                  response.data.data),
+              99
+            );
           } else if (type == "outdor") {
             this.caseStudy.caseStudyDetails.outro.authorImage = [];
-            setTimeout(() => this.caseStudy.caseStudyDetails.outro.authorImage.push(
-              response.data.data
-            ), 99);
-            
+            setTimeout(
+              () =>
+                this.caseStudy.caseStudyDetails.outro.authorImage.push(
+                  response.data.data
+                ),
+              99
+            );
           }
 
           console.log(response.data.data);
@@ -716,10 +772,13 @@ export default {
           },
         })
         .then((response) => {
-          setTimeout(() => this.caseStudy.slides[i].metaData.fields[j].fieldValue =
-            response.data.data, 10);
+          setTimeout(
+            () =>
+              (this.caseStudy.slides[i].metaData.fields[j].fieldValue =
+                response.data.data),
+            10
+          );
 
-          
           console.log(response.data.data);
           console.log(this.caseStudy);
         })
@@ -790,7 +849,7 @@ export default {
         })
         .then((response) => {
           this.insightList = response.data.data;
-          
+
           console.log("insight", response.data.data);
         })
         .catch((error) => console.log(error));
@@ -806,7 +865,7 @@ export default {
         .then((response) => {
           var finalArray = [];
           response.data.data.forEach((template_) => {
-            console.log("template_",template_)
+            console.log("template_", template_);
             var keys = [];
             var i = this.templateList.findIndex(
               (temp_) => temp_._id == template_.templateId
@@ -815,7 +874,7 @@ export default {
               _id: this.templateList[i]._id,
               bounceBoard: this.templateList[i].bounceBoard,
               insight: this.templateList[i].insight,
-              slideId:template_._id,
+              slideId: template_._id,
               // commentBox: this.templateList[i].commentBox,
               metaData: {
                 fields: [],
@@ -840,6 +899,7 @@ export default {
               obj.metaData.fields.push(fieldobj);
             });
             finalArray.push(obj);
+            this.insightId = template_.insight._id;
           });
           this.caseStudy.slides = finalArray;
           console.log("----", finalArray);
@@ -858,13 +918,11 @@ export default {
         slideData.templateId = slides._id;
         slideData.bounceBoard = slides.bounceBoard;
         slideData.insight = slides.insight;
-        if(slides.slideId){
+        if (slides.slideId) {
           slideData.slideId = slides.slideId;
-
         }
-        if(slides.insightId){
+        if (slides.insightId) {
           slideData.insightId = slides.insightId;
-
         }
         if (slides.metaData.comments && slides.metaData.comments.length > 0) {
           slideData.comments = slides.metaData.comments;
@@ -888,19 +946,19 @@ export default {
       console.log("slideData", slidArray);
       if (this.editMode) {
         this.updateProfile(slidArray);
-      }else{
+      } else {
         this.saveProfile(slidArray);
       }
     },
-    updateComment(cmnt){
-      if(!cmnt._id){
+    updateComment(cmnt) {
+      if (!cmnt._id) {
         return;
       }
-        console.log("cmnts",cmnt);
+      console.log("cmnts", cmnt);
       var obj = {
-        'slideId':cmnt.slideId,
-        'commentId':cmnt._id,
-        'comment':cmnt.comment
+        slideId: cmnt.slideId,
+        commentId: cmnt._id,
+        comment: cmnt.comment,
       };
       axios
         .put("/superAdmin/comment", obj, {
@@ -909,12 +967,9 @@ export default {
           },
         })
         .then((response) => {
-
           console.log(response);
         })
-        .catch((error) => {
-          
-        });
+        .catch((error) => {});
     },
 
     saveProfile(slides) {
@@ -933,7 +988,7 @@ export default {
         .then((response) => {
           // this.userData = response.data.data;
           this.$toaster.success("Case Study Created");
-          this.$router.go(this.$router.currentRoute)
+          this.$router.go(this.$router.currentRoute);
 
           console.log(response);
         })
@@ -943,16 +998,16 @@ export default {
           }
         });
     },
-    
+
     updateProfile(slides) {
       var obj = {};
-      obj.caseStudyId = this.caseId,
-      obj.caseStudyDetails = this.caseStudy.caseStudyDetails;
+      (obj.caseStudyId = this.caseId),
+        (obj.caseStudyDetails = this.caseStudy.caseStudyDetails);
       obj.caseStudyDetails.intro.readTime = Math.round(
         slides.length / 3
       ).toString();
       obj.slides = slides;
-     delete obj.caseStudyDetails.intro.focus;
+      delete obj.caseStudyDetails.intro.focus;
       axios
         .put("/superAdmin/caseStudy", obj, {
           headers: {
@@ -962,8 +1017,7 @@ export default {
         .then((response) => {
           // this.userData = response.data.data;
           this.$toaster.success("Case Study Updated");
-          this.$router.go(this.$router.currentRoute)
-
+          this.$router.go(this.$router.currentRoute);
 
           console.log(response);
         })
@@ -973,12 +1027,12 @@ export default {
           }
         });
     },
-    listPage(url){
-         this.$router.push(url);
+    listPage(url) {
+      this.$router.push(url);
     },
 
     addProfileDialog(slide) {
-      console.log("slide",slide)
+      console.log("slide", slide);
       this.templateImage = slide.templateImage;
       $(".inner-wrp").addClass("body-blur");
       $("#add-social-links").hide();
-- 
2.0.0