diff --git a/src/components/BaseComponents/FormImageDisplay.vue b/src/components/BaseComponents/FormImageDisplay.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0b5de3a8add044a48c7d8586ad8605b5d573598
--- /dev/null
+++ b/src/components/BaseComponents/FormImageDisplay.vue
@@ -0,0 +1,47 @@
+<template>
+ <img
+ :src="image"
+ class="w-2/5 inline"
+ alt="Bilde av gjenstanden"
+ @click="toggleModal"
+ />
+ <custom-footer-modal
+ @close="toggleModal"
+ :message="'Bilder som fjernes kan ikke lastes opp på nytt uten å laste opp et annet bilde først.'"
+ :title="'Er du sikker på at du vil fjene bilde?'"
+ :visible="show"
+ >
+ <div class="flex justify-center p-2">
+ <colored-button :text="'Avbryt'" @click="toggleModal" class="m-2" />
+ <colored-button :text="'Slett'" @click="removeImage" class="m-2" />
+ </div>
+ </custom-footer-modal>
+</template>
+
+<script>
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
+
+export default {
+ components: {
+ ColoredButton,
+ CustomFooterModal,
+ },
+ data() {
+ return {
+ show: false,
+ };
+ },
+ props: {
+ image: String,
+ },
+ methods: {
+ removeImage() {
+ this.$emit("remove");
+ },
+ toggleModal() {
+ this.show = !this.show;
+ },
+ },
+};
+</script>
diff --git a/src/components/ItemComponents/EditItemForm.vue b/src/components/ItemComponents/EditItemForm.vue
index 5ec681920f74b6a1a2a2adc304b7f1a7156c96f4..b5fed83d4c3eac9073d1a09ca34ae95e40599163 100644
--- a/src/components/ItemComponents/EditItemForm.vue
+++ b/src/components/ItemComponents/EditItemForm.vue
@@ -195,7 +195,6 @@
</div>
<!-- Images -->
- <!--
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
@@ -209,30 +208,29 @@
ref="file"
style="display: none"
@change="addImage"
- multiple
accept="image/png"
/>
- <Button :text="'Velg bilde'" @click="$refs.file.click()" />
+ <ColoredButton :text="'Velg bilde'" @click="$refs.file.click()" />
<div v-for="image in updatedItem.images" :key="image" class="m-2">
- <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
+ <form-image-display :image="image" @remove="removeImage(image)" />
</div>
</div>
- -->
<!-- Save item button -->
<div class="float-right">
- <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
+ <ColoredButton :text="'Lagre'" @click="saveClicked" id="saveButton" />
</div>
</div>
</template>
<script>
import useVuelidate from "@vuelidate/core";
-import Button from "@/components/BaseComponents/ColoredButton";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
import ListingService from "@/services/listing.service";
import CommunityService from "@/services/community.service";
+import ImageService from "@/services/image.service";
import { parseCurrentUser } from "@/utils/token-utils";
import {
@@ -247,7 +245,7 @@ export default {
name: "EditNewItem",
components: {
- Button,
+ ColoredButton,
},
setup() {
@@ -368,12 +366,23 @@ export default {
communityIDs: this.updatedItem.selectedCommunities,
};
await ListingService.putItem(itemInfo);
+ await ImageService.putListingImages(this.images);
this.$router.push("/itempage/" + this.initialItem.listingID);
}
},
- addImage(event) {
- this.updatedItem.images.push(URL.createObjectURL(event.target.files[0]));
+ async addImage(event) {
+ var that = this;
+ let image = event.target.files[0];
+ let fileReader = new FileReader();
+ fileReader.onloadend = async function () {
+ const res = fileReader.result;
+ const id = await ImageService.postNewImage(res);
+
+ const API_URL = process.env.VUE_APP_BASEURL;
+ that.item.images.push(API_URL + "images/" + id);
+ };
+ fileReader.readAsArrayBuffer(image);
},
onChangeCommunity(e) {
@@ -416,6 +425,15 @@ export default {
}
return false;
},
+ removeImage(image) {
+ let newImages = [];
+ for (let i in this.item.images) {
+ if (this.item.images[i] != image) {
+ newImages.push(this.item.images[i]);
+ }
+ }
+ this.item.images = newImages;
+ },
},
async beforeMount() {
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 2fd16fe3b736db08e26b37a8a8880ae8e89ae407..9850b9bbec00f6d7ebef0968d02527254f766953 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -195,21 +195,19 @@
ref="file"
style="display: none"
@change="addImage"
- multiple
accept="image/png"
/>
- <Button :text="'Velg bilde'" @click="$refs.file.click()" />
+ <colored-button :text="'Velg bilde'" @click="$refs.file.click()" />
<div v-for="image in item.images" :key="image" class="m-2">
- <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
- <!-- @click="removeImage(image)" -->
+ <form-image-display :image="image" @remove="removeImage(image)" />
</div>
</div>
<!-- Save item button -->
<div class="float-right">
- <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
+ <colored-button :text="'Lagre'" @click="saveClicked" id="saveButton" />
</div>
</div>
</template>
@@ -217,13 +215,11 @@
<script>
import useVuelidate from "@vuelidate/core";
import { parseUserFromToken } from "@/utils/token-utils";
-import {
- postNewItem,
- getMyGroups,
- postNewImageCommunity,
- PostImagesArrayToListing,
-} from "@/utils/apiutil";
-import Button from "@/components/BaseComponents/ColoredButton";
+import ListingService from "@/services/listing.service";
+import CommunityService from "@/services/community.service";
+import ImageService from "@/services/image.service";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import FormImageDisplay from "@/components/BaseComponents/FormImageDisplay.vue";
import {
required,
@@ -237,7 +233,8 @@ export default {
name: "AddNewItem",
components: {
- Button,
+ ColoredButton,
+ FormImageDisplay,
},
setup() {
@@ -309,7 +306,6 @@ export default {
userId: -1,
selectedGroupId: -1,
selectedGroups: [],
- imagesToSend: [],
},
//Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
categories: [
@@ -354,9 +350,9 @@ export default {
categoryNames: [this.item.select],
communityIDs: this.item.selectedGroups,
};
- await postNewItem(itemInfo);
+ await ListingService.postNewItem(itemInfo);
- await PostImagesArrayToListing(this.item.imagesToSend);
+ await ImageService.PostImagesArrayToListing(this.item.images);
this.$router.push("/");
}
@@ -373,19 +369,14 @@ export default {
let fileReader = new FileReader();
fileReader.onloadend = async function () {
const res = fileReader.result;
- const id = await postNewImageCommunity(res);
+ const id = await ImageService.postNewImage(res);
const API_URL = process.env.VUE_APP_BASEURL;
- that.item.imagesToSend.push(API_URL + "images/" + id);
that.item.images.push(API_URL + "images/" + id);
};
fileReader.readAsArrayBuffer(image);
},
- getGroups: async function () {
- this.groups = await getMyGroups();
- },
-
onChangeGroup: function (e) {
this.selectedGroupId = e.target.value;
let alreadyInGroupList = false;
@@ -416,8 +407,8 @@ export default {
this.item.images = newImages;
},
},
- beforeMount() {
- this.getGroups();
+ async beforeMount() {
+ this.groups = await CommunityService.getUserCommunities();
},
};
</script>
diff --git a/src/services/image.service.js b/src/services/image.service.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ebc1fa786bdf0a79c9c193b662777a1bcabfc7f
--- /dev/null
+++ b/src/services/image.service.js
@@ -0,0 +1,47 @@
+import { tokenHeader } from "@/utils/token-utils";
+import axios from "axios";
+
+const API_URL = process.env.VUE_APP_BASEURL;
+
+class ImageService {
+ postNewImage(image) {
+ return axios
+ .post(API_URL + "images", image, {
+ headers: { ...tokenHeader(), "Content-Type": "image/png" },
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ }
+
+ postImagesArrayToListing(images) {
+ return axios
+ .post(API_URL + "listing/pictures", images, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.error(error.response);
+ });
+ }
+
+ putListingImages(listingID, images) {
+ return axios
+ .put(API_URL + "listing/" + listingID + "/pictures", images, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.error(error.response);
+ });
+ }
+}
+
+export default new ImageService();
diff --git a/src/services/listing.service.js b/src/services/listing.service.js
index d0bfb6ca24e2494ef85e524a3f9bd830a07bc57c..80d3fdc338fd080b740d3abd3fad885ee5fe691f 100644
--- a/src/services/listing.service.js
+++ b/src/services/listing.service.js
@@ -40,6 +40,19 @@ class ListingService {
console.error(error);
});
}
+
+ postNewItem(itemInfo) {
+ return axios
+ .post(API_URL + "listing", itemInfo, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ return response;
+ })
+ .catch((error) => {
+ console.error(error.response);
+ });
+ }
}
export default new ListingService();