Merge branch 'image-community' into 'main'

Image community

See merge request !104

src/components/CommunityComponents/NewCommunityForm.vue

 <template>
   <div
-    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+    class="
+      md:ring-1
+      ring-gray-300
+      rounded-xl
+      overflow-hidden
+      mx-auto
+      mb-auto
+      max-w-md
+      w-full
+      p-4
+    "
   >
     <!-- Component heading -->
     <div
-      class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-10"
+      class="
+        text-xl
+        md:text-2xl
+        font-medium
+        text-center text-gray-600
+        dark:text-gray-200
+        mt-4
+        mb-10
+      "
     >
       Opprett ny gruppe
     </div>
@@ -18,7 +36,25 @@
       >
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="
+            form-check-input
+            appearance-none
+            rounded-full
+            h-4
+            w-4
+            border border-gray-300
+            bg-white
+            checked:bg-primary-medium checked:border-primary-medium
+            focus:outline-none
+            transition
+            duration-200
+            mt-1
+            align-top
+            bg-no-repeat bg-center bg-contain
+            float-left
+            mr-2
+            cursor-pointer
+          "
           type="radio"
           name="flexRadioDefault"
           id="flexRadioOpen"
@@ -36,7 +72,25 @@
       </div>
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="
+            form-check-input
+            appearance-none
+            rounded-full
+            h-4
+            w-4
+            border border-gray-300
+            bg-white
+            checked:bg-primary-medium checked:border-primary-medium
+            focus:outline-none
+            transition
+            duration-200
+            mt-1
+            align-top
+            bg-no-repeat bg-center bg-contain
+            float-left
+            mr-2
+            cursor-pointer
+          "
           type="radio"
           name="flexRadioDefault"
           id="flexRadioPrivate"
@@ -63,7 +117,25 @@
       <input
         type="text"
         id="title"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        class="
+          block
+          w-full
+          px-4
+          py-2
+          mt-2
+          text-gray-700
+          placeholder-gray-500
+          bg-white
+          border
+          rounded-md
+          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
+          focus:border-primary-light
+          dark:focus:border-primary-light
+          focus:ring-opacity-40
+          focus:outline-none
+          focus:ring
+          focus:ring-primary-light
+        "
         v-model="v$.group.name.$model"
         required
       />
@@ -89,7 +161,25 @@
       >
       <input
         type="text"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        class="
+          block
+          w-full
+          px-4
+          py-2
+          mt-2
+          text-gray-700
+          placeholder-gray-500
+          bg-white
+          border
+          rounded-md
+          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
+          focus:border-primary-light
+          dark:focus:border-primary-light
+          focus:ring-opacity-40
+          focus:outline-none
+          focus:ring
+          focus:ring-primary-light
+        "
         v-model="v$.group.place.$model"
         required
       />
@@ -117,7 +207,25 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        class="
+          block
+          w-full
+          px-4
+          py-2
+          mt-2
+          text-gray-700
+          placeholder-gray-500
+          bg-white
+          border
+          rounded-md
+          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
+          focus:border-primary-light
+          dark:focus:border-primary-light
+          focus:ring-opacity-40
+          focus:outline-none
+          focus:ring
+          focus:ring-primary-light
+        "
         required
       ></textarea>
 
@@ -153,14 +261,28 @@
 
       <!-- Button for adding an image -->
       <div class="inline-flex rounded-md shadow-sm">
-        <div class="text-error uppercase text-center">midlertidig fjernet</div>
-        <!-- <button
+        <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+        <button
           @click="$refs.file.click()"
-          class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+          class="
+            text-black
+            bg-gray-200
+            hover:bg-grey-800
+            focus:ring-4 focus:outline-none focus:ring-grey-300
+            font-medium
+            rounded-lg
+            text-sm
+            sm:w-auto
+            px-5
+            py-2.5
+            text-center
+            dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800
+            disabled:opacity-50
+          "
           :disabled="imageAdded"
         >
           Velg bilde
-        </button> -->
+        </button>
 
         <!-- Button for removing an image -->
       </div>
@@ -176,12 +298,14 @@
       <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
     </div>
   </div>
+
+  <!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
-import { postNewgroup } from "@/utils/apiutil";
+import { postNewgroup, postNewImageCommunity } from "@/utils/apiutil";
 import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
@@ -239,8 +363,11 @@ export default {
         radio: null,
         place: "",
         visibility: 1,
+        image: "",
       },
       imageThere: false,
+      imageId: -1,
+      imageStringURL: "",
     };
   },
   computed: {
@@ -276,20 +403,38 @@ export default {
 
     async saveClicked() {
       if (this.checkValidation()) {
+        //this.group.image = "https://image.shutterstock.com/image-photo/distribution-delivery-concept-global-business-600w-1650964204.jpg";
         const groupInfo = {
           name: this.group.name,
           description: this.group.description,
           visibility: this.group.visibility,
           location: this.group.place,
-          picture: "",
+          picture: this.group.image,
         };
 
+        console.log(this.group.image);
+
         await postNewgroup(groupInfo);
       }
     },
 
-    addImage: function (event) {
+    addImage: async function (event) {
       this.group.images.push(URL.createObjectURL(event.target.files[0]));
+
+      var that = this;
+      let image = event.target.files[0];
+      let fileReader = new FileReader();
+      fileReader.onloadend = async function () {
+        const res = fileReader.result;
+        const id = await postNewImageCommunity(res);
+
+        const API_URL = process.env.VUE_APP_BASEURL;
+        console.log(id);
+        console.log(API_URL + "images/" + id);
+        that.group.image = API_URL + "images/" + id;
+
+      };
+      fileReader.readAsArrayBuffer(image);
       this.imageThere = true;
     },
   },

src/utils/apiutil.js

@@ -325,3 +325,18 @@ export function postNewRating(ratingInfo) {
       return error;
     });
 }
+
+export function postNewImageCommunity(image) {
+  return axios
+      .post(API_URL + "images", image, {
+        headers: {...tokenHeader(), "Content-Type": "image/png"},
+      })
+      .then((response) => {
+        console.log(response.data);
+        return response.data;
+      })
+      .catch((error) => {
+        console.log(error);
+        return error;
+      });
+}

tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap

@@ -2,166 +2,167 @@
 
 exports[`CreateNewGroup elements rendering renders correctly 1`] = `
 <div
-  class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+  data-v-app=""
 >
-  <!-- Component heading -->
+  
   <div
-    class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-10"
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
-     Opprett ny gruppe 
-  </div>
-  <!-- Radio boxes -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="radioBoxLabel"
+    <!-- Component heading -->
+    <div
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
     >
-      Synlighet
-    </label>
+       Opprett ny gruppe 
+    </div>
+    <!-- Radio boxes -->
     <div
-      class="form-check"
+      class="mt-6"
     >
-      <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioOpen"
-        name="flexRadioDefault"
-        type="radio"
-        value="Åpen"
-      />
       <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioOpen"
-        id="radioBoxOpenLabel"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="radioBoxLabel"
       >
-         Åpen 
+        Synlighet
       </label>
+      <div
+        class="form-check"
+      >
+        <input
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          id="flexRadioOpen"
+          name="flexRadioDefault"
+          type="radio"
+          value="Åpen"
+        />
+        <label
+          class="form-check-label inline-block text-gray-800"
+          for="flexRadioOpen"
+          id="radioBoxOpenLabel"
+        >
+           Åpen 
+        </label>
+      </div>
+      <div
+        class="form-check"
+      >
+        <input
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          id="flexRadioPrivate"
+          name="flexRadioDefault"
+          type="radio"
+          value="Privat"
+        />
+        <label
+          class="form-check-label inline-block text-gray-800"
+          for="flexRadioPrivate"
+          id="radioBoxPrivateLabel"
+        >
+           Privat 
+        </label>
+      </div>
     </div>
+    <!-- Title -->
     <div
-      class="form-check"
+      class="mt-6"
     >
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="titleLabel"
+      >
+        Gruppenavn
+      </label>
       <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioPrivate"
-        name="flexRadioDefault"
-        type="radio"
-        value="Privat"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="title"
+        required=""
+        type="text"
       />
+      <!-- error message for title-->
+      
+      
+    </div>
+    <!-- Place -->
+    <div
+      class="mt-6"
+    >
       <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioPrivate"
-        id="radioBoxPrivateLabel"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="positionLabel"
       >
-         Privat 
+        By/Sted
       </label>
+      <input
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        required=""
+        type="text"
+      />
+      <!-- error message for place-->
+      
+      
     </div>
-  </div>
-  <!-- Title -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="titleLabel"
-    >
-      Gruppenavn
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="title"
-      required=""
-      type="text"
-    />
-    <!-- error message for title-->
-    
-    
-  </div>
-  <!-- Place -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="positionLabel"
-    >
-      By/Sted
-    </label>
-    <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      required=""
-      type="text"
-    />
-    <!-- error message for place-->
-    
-    
-  </div>
-  <!-- Description -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="descriptionLabel"
-    >
-      Beskrivelse
-    </label>
-    <textarea
-      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
-      id="description"
-      required=""
-      rows="4"
-    />
-    <!-- error message for description -->
-    
-    
-  </div>
-  <!-- Images -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
-      id="imageLabel"
+    <!-- Description -->
+    <div
+      class="mt-6"
     >
-       Bilde 
-    </label>
-    <input
-      accept="image/png, image/jpeg"
-      multiple=""
-      style="display: none;"
-      type="file"
-    />
-    <!-- Button for adding an image -->
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
+      >
+        Beskrivelse
+      </label>
+      <textarea
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        id="description"
+        required=""
+        rows="4"
+      />
+      <!-- error message for description -->
+      
+      
+    </div>
+    <!-- Images -->
     <div
-      class="inline-flex rounded-md shadow-sm"
+      class="mt-6"
     >
+      <label
+        class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+        id="imageLabel"
+      >
+         Bilde 
+      </label>
+      <input
+        accept="image/png, image/jpeg"
+        multiple=""
+        style="display: none;"
+        type="file"
+      />
+      <!-- Button for adding an image -->
       <div
-        class="text-error uppercase text-center"
+        class="inline-flex rounded-md shadow-sm"
       >
-        midlertidig fjernet
-      </div>
-      <!-- &lt;button
-          @click="$refs.file.click()"
+        <!--&lt;div class="text-error uppercase text-center"&gt;Midlertidig fjernet&lt;/div&gt; -->
+        <button
           class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
-          :disabled="imageAdded"
-        &gt;
-          Velg bilde
-        &lt;/button&gt; -->
-      <!-- Button for removing an image -->
+        >
+           Velg bilde 
+        </button>
+        <!-- Button for removing an image -->
+      </div>
+      <!-- Div box for showing all chosen images -->
+      
+      
+    </div>
+    <!-- Save item button -->
+    <div
+      class="flex justify-center mt-10 float-right"
+    >
+      <button-stub
+        id="saveButton"
+        text="Lagre"
+      />
     </div>
-    <!-- Div box for showing all chosen images -->
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="flex justify-center mt-10 float-right"
-  >
-    <button-stub
-      id="saveButton"
-      text="Lagre"
-    />
   </div>
+  <!--&lt;img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" /&gt;-->
+  
 </div>
 `;