wishlists

src/components/wishlists/WishlistItemCreationView.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+
+import Textarea from "primevue/textarea";
+import InputText from "primevue/inputtext";
+import Button from "primevue/button";
+import FloatLabel from "primevue/floatlabel";
+import {WishlistItem} from "@/models/WishList";
+import {ref} from "vue";
+import InputGroup from "primevue/inputgroup";
+import InputNumber from "primevue/inputnumber";
+import InputGroupAddon from "primevue/inputgroupaddon";
+import {addWishListItemRequest} from "@/services/WishListService";
+import {useToast} from "primevue/usetoast";
+
+const toast = useToast()
+
+const props = defineProps({
+  wishlistId: String,
+  editItem: Object,
+})
+
+const emits = defineEmits(["item-created", "creation-cancelled"])
+const isEditing = ref(!!props.editItem)
+const item = ref(props.editItem ? props.editItem : new WishlistItem())
+const inputNameRef = ref()
+const inputDescriptionRef = ref()
+const inputPriceRef = ref()
+const inputLinkRef = ref()
+
+const checkForm = () => {
+  console.log(inputNameRef.value)
+  if (!item.value.name || item.value.name.length === 0) {
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка создания желания',
+      detail: "Название должно быть введено",
+      life: 3000
+    })
+    return false
+  } else if (!item.value.description || item.value.description.length === 0) {
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка создания желания',
+      detail: "Описание должно быть введено",
+      life: 3000
+    })
+    return false
+  } else if (!item.value.link || item.value.link.length === 0) {
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка создания желания',
+      detail: "Ссылка должна быть введена",
+      life: 3000
+    })
+    return false
+  } else if (!item.value.price || item.value.price == 0) {
+    toast.add({
+      severity: 'error',
+      summary: 'Ошибка создания желания',
+      detail: "Цена должна быть введена",
+      life: 3000
+    })
+    return false
+  } else return true
+}
+const itemCreate = async () => {
+  if (checkForm()) {
+    await addWishListItemRequest(props.wishlistId, item.value)
+        .then(res => {
+          emits("item-created", res)
+          resetForm()
+        })
+        .catch(err => {
+          console.log(err)
+          toast.add({
+            severity: 'error',
+            summary: 'Ошибка создания желания',
+            detail: err.response.data.message,
+            life: 3000
+          })
+        })
+  }
+}
+const cancelCreation = () => {
+  resetForm()
+  emits("creation-cancelled")
+}
+const resetForm = () => {
+  item.value = new WishlistItem()
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-col gap-4 mt-1">
+      <FloatLabel variant="on" class="w-full">
+        <label for="name">Название</label>
+        <InputText :ref="inputNameRef" v-model="item.name" id="name" class="w-full"/>
+      </FloatLabel>
+      <FloatLabel variant="on" class="w-full">
+        <label for="name">Описание</label>
+        <Textarea :ref="inputDescriptionRef" v-model="item.description" id="name" class="w-full"/>
+      </FloatLabel>
+      <FloatLabel variant="on" class="w-full">
+        <label for="name">Ссылка на товар</label>
+        <InputText :ref="inputLinkRef" v-model="item.link" id="name" class="w-full"/>
+      </FloatLabel>
+      <!-- Сумма -->
+      <InputGroup class="w-full">
+        <InputGroupAddon>₽</InputGroupAddon>
+        <InputNumber :ref="inputPriceRef" v-model="item.price" placeholder="Сумма"/>
+        <InputGroupAddon>.00</InputGroupAddon>
+      </InputGroup>
+      <div class="flex flex-row gap-2 justify-end items-center">
+        <Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate"/>
+        <Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>