Merge branch 'main' into homepage

src/components/AddNewItem.vue

@@ -68,6 +68,41 @@
       </div>
     </div>
 
+
+    <!-- Select Group -->
+    <div class="mb-6">
+      <label
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      >Gruppe</label
+      >
+      <select
+          v-model="v$.item.selectGroup.$model"
+          class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      >
+        <option class="text-gray-400" value="" disabled selected>
+          Select a Group
+        </option>
+        <option
+            v-for="group in groups"
+            :key="group"
+            class="text-gray-900 text-sm"
+        >
+          {{ group }}
+        </option>
+      </select>
+
+      <!-- error message for select box -->
+      <div
+          class="text-red"
+          v-for="(error, index) of v$.item.selectGroup.$errors"
+          :key="index"
+      >
+        <div class="text-red-600 text-sm">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
     <!-- price -->
     <div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
       <label
@@ -122,6 +157,33 @@
       </div>
     </div>
 
+
+    <!-- Address -->
+    <div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
+      <label
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >Adresse</label>
+      <input
+          type="text"
+          class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          v-model="v$.item.address.$model"
+          id="adress"
+          required
+      />
+
+      <!-- error message for address-->
+      <div
+          class="text-red"
+          v-for="(error, index) of v$.item.address.$errors"
+          :key="index"
+      >
+        <div class="text-red-600 text-sm">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
+
     <!-- Images -->
     <div>
       <label
@@ -167,6 +229,9 @@
 
 <script>
 import useVuelidate from "@vuelidate/core";
+import { parseUserFromToken } from "@/utils/token-utils";
+import { postNewItem } from "@/utils/apiutil";
+
 import {
   required,
   helpers,
@@ -186,14 +251,20 @@ export default {
     return {
       item: {
         title: {
-          required,
+          required: helpers.withMessage(
+              () => "Tittelen kan ikke være tom",
+              required
+          ),
           max: helpers.withMessage(
             () => `Tittelen kan inneholde max 50 tegn`,
             maxLength(50)
           ),
         },
         description: {
-          required,
+          required: helpers.withMessage(
+              () => "Beskrivelsen kan ikke være tom",
+              required
+          ),
           max: helpers.withMessage(
             () => `Beskrivelsen kan inneholde max 200 tegn`,
             maxLength(200)
@@ -213,6 +284,19 @@ export default {
         select: {
           required: helpers.withMessage(() => `Velg en kategori`, required),
         },
+        selectGroup: {
+          required: helpers.withMessage(() => `Velg en gruppe`, required),
+        },
+        address: {
+          required: helpers.withMessage(
+              () => "Addressen kan ikke være tom",
+              required
+          ),
+          max: helpers.withMessage(
+              () => `Addressen kan inneholde max 50 tegn`,
+              maxLength(50)
+          ),
+        },
       },
     };
   },
@@ -222,14 +306,18 @@ export default {
       item: {
         title: "",
         description: "",
+        address: "",
         price: "",
         category: "",
         select: null,
         type: "",
         images: [],
+        userId: -1,
+        selectGroup: null,
       },
       //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
       categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
+      groups: [4040, 4041],
     };
   },
   methods: {
@@ -251,19 +339,47 @@ export default {
 
       if (this.checkValidation()) {
         console.log("validert, videre...");
+
+        this.checkUser();
+
         console.log("Tittel: " + this.item.title);
         console.log("Kategori: " + this.item.select);
         console.log("Beskrivelse: " + this.item.description);
+        console.log("Addressen: " + this.item.address);
         console.log("Pris: " + this.item.price);
         console.log("bilder: " + this.item.images);
+        console.log("gruppe: " + this.item.selectGroup);
+
+        const itemInfo = {
+          title: this.item.title,
+          description: this.item.description,
+          pricePerDay: this.item.price,
+          address: this.item.address,
+          userID: this.item.userId,
+          categoryNames: [],
+          communityIDs: [this.item.selectGroup],
+        };
+
+        console.log(itemInfo);
+
+        const postRequest = await postNewItem(itemInfo);
+
+        console.log("posted: " + postRequest);
+
       }
     },
 
+    checkUser: async function (){
+      let user = parseUserFromToken(this.$store.state.user.token);
+      this.item.userId = parseInt(user.accountId);
+      console.log("id: " + this.item.userId);
+    },
+
     addImage: function (event) {
       console.log(event.target.files);
       this.item.images.push(URL.createObjectURL(event.target.files[0]));
       console.log("antall bilder: " + this.item.images.length);
     },
-  },
+  }
 };
 </script>

src/components/NavBar.vue

@@ -10,20 +10,10 @@
     </div>
     <ul class="flex">
       <li>
-        <img
-          class="m-6 cursor-pointer h-8"
-          src="../assets/messages.png"
-          alt="Meldinger"
-          @click="$router.push('/messages')"
-        />
+        <img class="m-6 cursor-pointer h-8 " src="../assets/additem.png" alt="Legg til" @click="$router.push('/addNewItem')"/>
       </li>
       <li>
-        <img
-          class="m-6 cursor-pointer h-8"
-          src="../assets/notifications.png"
-          alt="Varlser"
-          @click="$router.push('/notifications')"
-        />
+        <img class="m-6 cursor-pointer h-8 " src="../assets/messages.png" alt="Meldinger" @click="$router.push('/messages')"/>
       </li>
       <li>
         <img

src/utils/apiutil.js

@@ -82,3 +82,16 @@ export function doNewPassword() {
   //.catch((error) => {console.log(error);return auth;});
   return auth; //remove after axios is added
 }
+
+export function postNewItem(itemInfo){
+    return axios
+        .post(API_URL + "listing", itemInfo)
+        .then((response) => {
+            console.log("prøver: " + response.data);
+            return response;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            return error;
+        });
+}