...

src/views/pages/Belonging/CreateBelonging.vue

@@ -1,21 +1,98 @@
 <script setup>
 import { Listbox, InputText } from 'primevue';
-import { onBeforeMount, ref } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { CategoryService } from '@/service/CategoryService';
 import ImageUploader from '@/views/uikit/ImageUploader.vue';
 import ImageGallery from '@/views/uikit/ImageGallery.vue';
+import KiwiChips from '@/views/uikit/KiwiChips.vue';
+import { useToast } from 'primevue/usetoast';
+import { BelongingService } from '@/service/BelongingService';
+import { useRoute, useRouter } from 'vue-router';
+import MapComponent from '@/views/uikit/MapComponent.vue';
+
+const toast = useToast();
 const categories = ref([]);
 const selectedCategory = ref();
 const belongingName = ref('');
 const description = ref('');
 const imageNames = ref([]);
+const features = ref([]);
+const featuresValues = ref({});
 const documentNames = ref([]);
+const documentData = ref([]);
 const mainImageName = ref([]);
-const tags = ref('');
-const signedImageUrls = ref([{ url: 'https://upload.hitromall.com/product-images/0ff87b0cc333539a361e007d20aa9685-co3.jpg' }]);
+const belonging = ref({
+    location: {
+        type: 'Point',
+        coordinates: [0, 0]
+    }
+});
+const tags = ref([]);
+const signedImageUrls = ref([]);
+const signedDocumentsUrls = ref([]);
+const route = useRoute();
+const router = useRouter();
+const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
+const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
+const mapRef = ref();
+
 onBeforeMount(async () => {
     categories.value = await CategoryService.getAllCategories();
+    console.log(route.name);
+    if (route.name === 'edit-belonging') {
+        belonging.value = await BelongingService.getBelonging(route.params.belongingId);
+    }
 });
+const handleSelectCategory = ($event) => {
+    if ($event.value) {
+        belonging.value.category = $event.value;
+        selectedCategory.value = categories.value.find((x) => x._id === $event.value);
+        features.value = selectedCategory.value.features;
+    } else {
+        belonging.value = {
+            location: {
+                type: 'Point',
+                coordinates: [0, 0]
+            }
+        };
+        selectedCategory.value = {};
+    }
+};
+
+const saveBelonging = async () => {
+    let status = 'failed';
+    console.log(belonging);
+    if (belonging?.value._id?.trim()) {
+        status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
+    } else {
+        status = await BelongingService.createBelonging(belonging.value);
+    }
+
+    if (status === 'success') {
+        toast.add({ severity: 'success', summary: 'موفق', detail: 'ویژگی جدید ساخته شد.', life: 3000 });
+    } else {
+        toast.add({ severity: 'error', summary: 'ناموفق', detail: status, life: 3000 });
+    }
+
+    await router.push('/belonging/list-belongings');
+};
+
+watch(
+    () => mapRef.value?.state.map,
+    (nv, ol) => {
+        if (ol) return;
+        setTimeout(() => {
+            mapRef.value?.state.map?.setMapType('standard-night');
+            if (mapRef.value?.state.mapType) mapRef.value.state.mapType = 'standard-night';
+        }, 2000);
+        setTimeout(() => {
+            mapRef.value?.search({
+                term: 'ولی عصر',
+                coords: [51.36281969540723, 35.69672648316882]
+            });
+        }, 3000);
+    }
+);
 </script>
 <template>
     <div className="card">
@@ -26,38 +103,63 @@ onBeforeMount(async () => {
             <div class="w-3/4 ml-3">
                 <div class="">
                     <label> نام دارایی </label>
-                    <InputText v-model="belongingName" class="w-full my-2" placeholder="مثلا: 100 عدد کولر گازی" />
+                    <InputText v-model="belonging.name" class="w-full my-2" placeholder="مثلا: 100 عدد کولر گازی" />
                 </div>
                 <div class="my-6">
                     <label> توضیحات </label>
-                    <Textarea v-model="description" class="w-full my-2" placeholder="مثلا: در تاریخ 1403/09/11 خریداری شد." rows="6" />
+                    <Textarea v-model="belonging.description" class="w-full my-2" placeholder="مثلا: در تاریخ 1403/09/11 خریداری شد." rows="6" />
                 </div>
-                <div class="my-6" v-if="signedImageUrls.length">
-                    <label> تصاویر </label>
-                    <ImageGallery v-model="signedImageUrls" gallery-id="images" />
+                <div class="my-6">
+                    <label> تصاویر، فایل ها و مدارک </label>
+                    <ImageUploader v-model="belonging.documentNames" :max-files="50" mode="private" delete-endpoint="/api/files/bucket/delete/belonging-documents" upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-documents" />
+                    <div v-if="signedImageUrls.length > 0">
+                        <ImageGallery v-model="documentData" gallery-id="images" />
+                    </div>
                 </div>
-                <div class="my-6" v-if="signedImageUrls.length">
+                <div class="my-6" v-if="signedDocumentsUrls.length > 0">
                     <label> فایل ها و مدارک </label>
                 </div>
+                <div class="my-6 max-h-96 overflow-y-auto" v-if="features.length > 0">
+                    <label> اطلاعات دارایی </label>
+                    <div class="my-6 mr-10" v-for="feature of features">
+                        <label>{{ feature.nativeName }}</label>
+                        <InputText v-model="featuresValues[feature._id]" class="w-1/3 my-2 block" placeholder="" />
+                    </div>
+                </div>
+                <div class="my-10">
+                    <label> موقعیت دارایی </label>
+                    <MapComponent v-model="belonging.location.coordinates" />
+                    <!--                    <MapIrComponent />-->
+                </div>
             </div>
             <div class="w-1/4">
                 <div>
                     <label> دسته بندی </label>
-                    <Listbox v-model="selectedCategory" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
+                    <Listbox @change="handleSelectCategory($event)" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
                 </div>
                 <div class="my-6">
                     <label> تصویر اصلی </label>
-                    <ImageUploader v-model="mainImageName" :max-files="1" mode="private" delete-endpoint="/api/files/bucket/delete/belonging-images" upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-images" />
+                    <ImageUploader
+                        v-model="belonging.mainImageName"
+                        accepted-files="image/*"
+                        :max-files="1"
+                        mode="private"
+                        delete-endpoint="/api/files/bucket/delete/belonging-images"
+                        upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-images"
+                    />
                 </div>
                 <div class="my-8">
                     <label> برچسب ها </label>
-                    <Chips v-model="tags" separator="," class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
+                    <KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
                 </div>
             </div>
         </div>
 
         <div class="flex justify-center">
-            <Button>ذخیره</Button>
+            <Button @click="saveBelonging">ذخیره</Button>
         </div>
     </div>
 </template>
+<style>
+@import url('leaflet/dist/leaflet.css');
+</style>