survey can now be saved in the database

src/components/app/SettingsPanels/DropDownTemplate.vue

@@ -46,10 +46,14 @@ export default {
       this.opened = false;
     }
   },
+  watch: {
+    updateItems() {
+			this.selected = null;
+    }
+  },
   computed: {
     updateItems() {
 			this.$emit("change", null);
-			this.selected = null;
       let newArr = [];
       for (let index = 0; index < this.items.length; index++) {
 				let element = this.items[index];
@@ -91,6 +95,11 @@ export default {
   flex-direction: row;
   align-content: center;
   align-items: center;
+  border-radius: 5px;
+  transition: 0.3s;
+}
+.box:hover {
+  background: rgba(73, 73, 73, 0.863);
 }
 
 .selected {
@@ -105,10 +114,11 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
-  background: rgba(24, 24, 24, 0.945);
+  background: rgba(49, 49, 49, 0.945);
   max-height: 200px;
   width: 220px;
   overflow: auto;
+  border-radius: 5px;
 }
 .item {
   width: 100%;
@@ -117,7 +127,7 @@ export default {
   transition: 0.3s;
 }
 .item:hover {
-  background: rgba(15, 15, 15, 0.726);
+  background: rgb(65, 65, 65);
 }
 .content {
   display: flex;
@@ -127,6 +137,7 @@ export default {
 }
 .emoji {
   margin-right: 5px;
+  margin-left: 1px;
 }
 </style>
 

src/components/app/SettingsPanels/MyProfile.vue

@@ -33,57 +33,7 @@
         <div class="option red" @click="logout">Logout</div>
       </div>
     </div>
-    <div class="title">
+    <survey />
-      <i class="material-icons">error</i>
-      Take Survey
-    </div>
-    <div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
-
-    <div class="survey">
-      <!-- name -->
-      <div>
-        <div class="survey-title">What's your name?</div>
-        <input
-          class="survey-input"
-          v-model="surveySelectedItems.name"
-          type="text"
-          placeholder="Name"
-        >
-      </div>
-      <!-- Gender -->
-      <div class="survey-box">
-        <drop-down
-          name="What is your gender?"
-          v-model="surveySelectedItems.gender"
-          :items="surveyItems.gender"
-        />
-      </div>
-      <!-- Age -->
-      <div class="survey-box">
-        <drop-down
-          name="What is your age?"
-          v-model="surveySelectedItems.age"
-          :items="surveyItems.age"
-        />
-      </div>
-      <!-- Continent -->
-      <div class="survey-box">
-        <drop-down
-          name="Pick a continent"
-          v-model="surveySelectedItems.continent"
-          :items="surveyItems.continents"
-        />
-      </div>
-      <!-- Countries -->
-      <div class="survey-box">
-        <drop-down
-          name="Pick a country"
-          v-if="surveySelectedItems.continent != null"
-          v-model="surveySelectedItems.countries"
-          :items="filterCountry"
-        />
-      </div>
-    </div>
     <div class="alert-outer" v-if="alert.show">
       <div class="alert">
         <div class="alert-title">Error</div>
@@ -97,9 +47,9 @@
 </template>
 
 <script>
-import surveyItems from "@/utils/surveyItems.js";
+
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
-import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
+import Survey from "@/components/app/SettingsPanels/survey.vue";
 import AvatarUpload from "@/services/AvatarUpload.js";
 import config from "@/config.js";
 import { bus } from "@/main";
@@ -109,18 +59,10 @@ import { mapState } from "vuex";
 export default {
   components: {
     ProfilePicture,
-    DropDown
+    Survey
   },
   data() {
     return {
-      surveyItems,
-      surveySelectedItems: {
-        name: "",
-        gender: null,
-        age: null,
-        continent: null,
-        countries: null
-      },
       alert: {
         content: "",
         show: false
@@ -128,6 +70,7 @@ export default {
     };
   },
   methods: {
+
     onProgress(percent) {
       //update vue
       console.log("Avatar upload progress: ", percent);
@@ -178,16 +121,6 @@ export default {
   },
   computed: {
     ...mapState("settingsModule", ["GDriveLinked"]),
-    filterCountry() {
-      const selectedContinentIndex = this.surveySelectedItems.continent;
-      const selectedContinent = this.surveyItems.continents[
-        selectedContinentIndex
-      ];
-      const code = selectedContinent.code;
-      return this.surveyItems.countries.filter(element => {
-        return element.code == code;
-      });
-    },
     user() {
       return this.$store.getters.user;
     },
@@ -198,44 +131,7 @@ export default {
 };
 </script>
 <style scoped>
-.notice {
-  color: grey;
-  font-size: 15px;
-  margin-top: 20px;
-  margin-left: 30px;
-}
 
-.survey-title {
-  margin-top: 10px;
-}
-.survey {
-  display: flex;
-  margin: auto;
-  margin-top: 10px;
-  flex-flow: row wrap;
-  flex-direction: column;
-}
-
-.survey-input {
-  height: 24px;
-  padding: 10px;
-  background: rgba(61, 61, 61, 0.863);
-  margin-top: 5px;
-}
-
-.title {
-  margin-top: 30px;
-  display: flex;
-  align-content: center;
-  align-items: center;
-  margin-left: 25px;
-  font-size: 20px;
-}
-.title .material-icons {
-  color: cyan;
-  margin-right: 10px;
-  font-size: 30px;
-}
 .hidden {
   display: none;
 }

src/components/app/SettingsPanels/survey.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="survey">
+    <div class="title">
+      <i class="material-icons">error</i>
+      Take Survey
+    </div>
+    <div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
+    <div class="survey-inner">
+      <!-- name -->
+      <div class="survey-box">
+        <div class="survey-title">What's your name?</div>
+        <input class="survey-input" v-model="selected.name" type="text" placeholder="Name">
+      </div>
+      <!-- Gender -->
+      <div class="survey-box">
+        <drop-down
+          name="What is your gender?"
+          v-model="selected.gender"
+          :items="surveyItems.gender"
+        />
+      </div>
+      <!-- Age -->
+      <div class="survey-box">
+        <drop-down name="What is your age?" v-model="selected.age" :items="surveyItems.age"/>
+      </div>
+      <!-- Continent -->
+      <div class="survey-box">
+        <drop-down
+          name="Pick a continent"
+          v-model="selected.continent"
+          :items="surveyItems.continents"
+        />
+      </div>
+      <!-- Countries -->
+      <div class="survey-box">
+        <drop-down
+          name="Pick a country"
+          v-if="selected.continent != null"
+          v-model="selected.country"
+          :items="filterCountry"
+        />
+      </div>
+      <!-- About me -->
+      <div class="survey-box">
+        <div class="survey-title">About me (Formatting allowed)</div>
+        <textarea
+          class="survey-input textarea"
+          v-model="selected.about_me"
+          placeholder="Hobbies, games, animals"
+        ></textarea>
+      </div>
+      <div class="survey-warning" v-if="surveyErrorMessage">{{surveyErrorMessage}}</div>
+      <div class="survey-valid" v-if="surveyValidMessage">{{surveyValidMessage}}</div>
+      <div class="button" @click="surveySubmitButton">Save</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import surveyItems from "@/utils/surveyItems.js";
+import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
+import userService from "@/services/userService.js";
+export default {
+  components: { DropDown },
+  data() {
+    return {
+      surveyItems,
+      surveyErrorMessage: null,
+      surveyValidMessage: null,
+      selected: {
+        name: "",
+        gender: null,
+        age: null,
+        continent: null,
+        country: null,
+        about_me: ""
+      }
+    };
+  },
+  methods: {
+    async surveySubmitButton() {
+
+      this.surveyValidMessage = null;
+      this.surveyErrorMessage = null;
+      //checks if all drop boxes are not null.
+      for (let item in this.selected) {
+        if (this.selected[item] === null) {
+          this.surveyErrorMessage =
+            "Make sure you select / fill in all fields!";
+          return;
+        }
+      }
+      //checks if all values are not null
+      if ( this.selected.name.trim() === "" || this.selected.about_me.trim() === "") {
+        this.surveyErrorMessage = "Make sure you select / fill in all fields!";
+        return;
+      }
+      this.surveyValidMessage = "Saving..."
+			//gets the country index after unfiltering.
+      const selectedCountryName = this.filterCountry[this.selected.country].name;
+      const countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
+
+
+      const { ok, error, result } = await userService.setSurvey({
+        name: this.selected.name,
+        gender: this.selected.gender,
+        age: this.selected.age,
+        continent: this.selected.continent,
+				country: countryIndex,
+				about_me: this.selected.about_me
+			});
+			if (ok) {
+        this.surveyValidMessage = "Saved!"
+			} else {
+        this.surveyValidMessage = null;
+				this.surveyErrorMessage = error.response.data.message
+			}
+    }
+  },
+  computed: {
+    filterCountry() {
+      const selectedContinentIndex = this.selected.continent;
+      const selectedContinent = this.surveyItems.continents[
+        selectedContinentIndex
+      ];
+      const code = selectedContinent.code;
+      return this.surveyItems.countries.filter(element => {
+        return element.code == code;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.notice {
+  color: grey;
+  font-size: 15px;
+  margin-top: 20px;
+  margin-left: 30px;
+  user-select: none;
+}
+
+.survey-title {
+  margin-top: 10px;
+  user-select: none;
+}
+.survey, .survey-inner {
+  display: flex;
+  margin: auto;
+  margin-top: 10px;
+  margin-bottom: 50px;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.survey-warning {
+  color: red;
+  margin-bottom: 10px;
+}
+.survey-valid{
+  color: green;
+  margin-bottom: 10px; 
+}
+.survey .button {
+  color: white;
+  background: rgb(27, 114, 255);
+  border-radius: 5px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  width: 100%;
+  text-align: center;
+  transition: 0.3s;
+  user-select: none;
+  cursor: default;
+}
+.survey .button:hover {
+  background: rgb(0, 98, 255);
+}
+.survey-input {
+  height: 24px;
+  padding: 10px;
+  background: rgba(61, 61, 61, 0.863);
+  margin-top: 5px;
+  border-radius: 5px;
+	transition: 0.3s;
+}
+.survey-input:hover {
+  background: rgba(73, 73, 73, 0.863);
+}
+.survey-input.textarea {
+  resize: none;
+  color: white;
+  outline: none;
+  border: none;
+  width: 200px;
+  height: 100px;
+	transition: 0.3s;
+}
+
+
+.title {
+  margin-top: 30px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin-left: 25px;
+  font-size: 20px;
+  user-select: none;
+}
+.title .material-icons {
+  color: cyan;
+  margin-right: 10px;
+  font-size: 30px;
+}
+</style>

src/components/app/emojiPanel.vue

@@ -401,7 +401,8 @@ export default {
   position: absolute;
   bottom: 10px;
   right: 20px;
-  width: 390px;
+  max-width: 390px;
+  width: calc(100% - 50px);
   display: flex;
   flex-direction: column;
   z-index: 99999;
@@ -459,13 +460,13 @@ export default {
   align-content: center;
   align-items: center;
   align-self: center;
-  justify-content: center;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 10px;
   background: rgb(161, 161, 161);
   border-radius: 5px;
   transition: 0.3s;
+  overflow: auto;
 }
 .tabs img {
   height: 20px;
@@ -489,11 +490,12 @@ export default {
   flex-direction: column;
   transition: 0.1s;
   height: 35px;
-  width: 325px;
+  width: 32px;
   overflow: hidden;
   align-content: center;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .tab:hover {

src/services/userService.js

@@ -3,5 +3,8 @@ import {instance, wrapper} from './Api';
 export default {
   get (uniqueID) {
     return wrapper(instance().get(`user/${uniqueID}`))
-  } 
+  },
+  setSurvey(data) {
+    return wrapper(instance().put('/user/survey', data));
+  }
 }

src/views/App.vue

@@ -208,6 +208,9 @@ body {
   color: #383838;
   height: 100%;
 }
+textarea {
+  font-family: "Roboto", sans-serif;
+}
 .box {
   display: flex;
   flex-direction: column;