ADD: Utm Convert
FIX: Features data not saving and not loading
This commit is contained in:
@@ -47,7 +47,6 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
|
||||
const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
|
||||
const mapRef = ref();
|
||||
|
||||
const transactions = ref([]);
|
||||
const stockData = ref({});
|
||||
@@ -118,6 +117,7 @@ onBeforeMount(async () => {
|
||||
if (route.name === 'edit-belonging') {
|
||||
editMode.value = true;
|
||||
belonging.value = await BelongingService.getBelonging(route.params.belongingId);
|
||||
featuresValues.value = extractFeaturesValues(belonging.value.features);
|
||||
transactions.value = await TransactionService.getTransactionsByBelongingId(route.params.belongingId);
|
||||
stockData.value = await TransactionService.getStockByBelongingId(route.params.belongingId);
|
||||
mainImageUrlsWithData.value = fillImagesArray(belonging.value?.mainImageUrls || []);
|
||||
@@ -126,6 +126,67 @@ onBeforeMount(async () => {
|
||||
});
|
||||
const showTransactionDialog = ref(false);
|
||||
|
||||
import { UTMtoLatLon, LatLontoUTM } from '@/utm';
|
||||
|
||||
const easting = ref();
|
||||
const northing = ref();
|
||||
const zone = ref();
|
||||
const lat = ref();
|
||||
const long = ref();
|
||||
|
||||
const convertUTMtoLatLng = () => {
|
||||
if (easting.value && northing.value && zone.value) {
|
||||
try {
|
||||
const result = UTMtoLatLon(
|
||||
Number(easting.value),
|
||||
Number(northing.value),
|
||||
Number(zone.value),
|
||||
'N' // Change to 'S' if in Southern Hemisphere
|
||||
);
|
||||
lat.value = result.latitude;
|
||||
long.value = result.longitude;
|
||||
console.log(lat.value, long.value);
|
||||
searchLocation(lat.value, long.value);
|
||||
} catch (error) {
|
||||
console.error('Error converting UTM to Lat/Lng:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Watch nationalGeoCode to split and convert to Lat/Lng
|
||||
watch(
|
||||
() => belonging.value.nationalGeoCode,
|
||||
(newCode) => {
|
||||
if (newCode && newCode.length === 15) {
|
||||
easting.value = newCode.substring(0, 6); // First 6 digits for easting
|
||||
northing.value = newCode.substring(6, 13); // Next 6 digits for northing
|
||||
zone.value = newCode.substring(13, 15); // Last 2 digits for zone
|
||||
// Convert to Lat/Lng after splitting
|
||||
convertUTMtoLatLng();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const mapRef = ref();
|
||||
|
||||
const searchLocation = (lat, lon) => {
|
||||
if (mapRef.value) {
|
||||
mapRef.value.searchByCoordinates(lat, lon);
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => belonging.value.category,
|
||||
(newCategory) => {
|
||||
if (editMode.value && newCategory) {
|
||||
selectedCategory.value = categories.value.find((x) => x._id === newCategory);
|
||||
if (selectedCategory.value) {
|
||||
features.value = selectedCategory.value.features;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const fillImagesArray = (imageUrls) => {
|
||||
const images = [];
|
||||
for (let url of imageUrls) {
|
||||
@@ -161,12 +222,36 @@ const handleSelectCategory = ($event) => {
|
||||
}
|
||||
};
|
||||
|
||||
const extractFeatures = (featuresValues) => {
|
||||
const features = [];
|
||||
|
||||
for (const [key, value] of Object.entries(featuresValues)) {
|
||||
features.push({
|
||||
definition: key,
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
return features;
|
||||
};
|
||||
|
||||
const extractFeaturesValues = (features) => {
|
||||
const featuresValues = {};
|
||||
|
||||
for (let feature of features) {
|
||||
featuresValues[feature.definition] = feature.value;
|
||||
}
|
||||
|
||||
return featuresValues;
|
||||
};
|
||||
|
||||
const saveBelonging = async () => {
|
||||
let status = 'failed';
|
||||
console.log(belonging);
|
||||
if (belonging?.value._id?.trim()) {
|
||||
belonging.value.mainImageUrls = mainImageUrlsWithData.value.map((x) => x.url);
|
||||
belonging.value.documentUrls = documentUrlsWithData.value.map((x) => x.url);
|
||||
belonging.value.features = extractFeatures(featuresValues.value);
|
||||
status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
|
||||
} else {
|
||||
status = await BelongingService.createBelonging(belonging.value);
|
||||
@@ -181,23 +266,6 @@ const saveBelonging = async () => {
|
||||
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);
|
||||
}
|
||||
);
|
||||
|
||||
const filters = ref({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
type: { value: null, matchMode: FilterMatchMode.EQUALS },
|
||||
@@ -336,7 +404,7 @@ const formatDate = (dateString) => {
|
||||
</div>
|
||||
<div class="my-10">
|
||||
<label class="text-lg"> موقعیت دارایی </label>
|
||||
<MapComponent v-model="belonging.location.coordinates" />
|
||||
<MapComponent ref="mapRef" v-model="belonging.location.coordinates" />
|
||||
<!-- <MapIrComponent />-->
|
||||
</div>
|
||||
|
||||
@@ -447,6 +515,11 @@ const formatDate = (dateString) => {
|
||||
<label class="text-lg"> برچسب ها </label>
|
||||
<KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
<label class="text-lg"> شناسه ملی جغرافیایی </label>
|
||||
<InputText v-model="belonging.nationalGeoCode" class="w-full" placeholder="شناسه 14 رقمی سند" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { TransactionService } from '@/service/TransactionService';
|
||||
|
||||
@@ -11,6 +11,14 @@ const props = defineProps({
|
||||
belongingId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transactionData: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
@@ -23,7 +31,8 @@ const transaction = reactive({
|
||||
status: 'pending',
|
||||
value: null,
|
||||
description: '',
|
||||
date: new Date().toISOString()
|
||||
date: new Date().toISOString(),
|
||||
_id: null
|
||||
});
|
||||
|
||||
const typeOptions = [
|
||||
@@ -43,6 +52,43 @@ const errors = reactive({
|
||||
value: ''
|
||||
});
|
||||
|
||||
// Watch for changes in editMode and transactionData
|
||||
watch(
|
||||
() => props.transactionData,
|
||||
(newValue) => {
|
||||
if (newValue && props.editMode) {
|
||||
// Load transaction data for editing
|
||||
Object.assign(transaction, {
|
||||
type: newValue.type || 'deposit',
|
||||
status: newValue.status || 'pending',
|
||||
value: newValue.value || null,
|
||||
description: newValue.description || '',
|
||||
date: newValue.date || new Date().toISOString(),
|
||||
_id: newValue._id || null
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// Reset form when dialog opens
|
||||
watch(
|
||||
() => props.visible,
|
||||
(isVisible) => {
|
||||
if (isVisible && !props.editMode) {
|
||||
// Reset form for create mode
|
||||
Object.assign(transaction, {
|
||||
type: 'deposit',
|
||||
status: 'pending',
|
||||
value: null,
|
||||
description: '',
|
||||
date: new Date().toISOString(),
|
||||
_id: null
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const validateForm = () => {
|
||||
let isValid = true;
|
||||
|
||||
@@ -78,9 +124,19 @@ const saveTransaction = async () => {
|
||||
|
||||
try {
|
||||
transaction.belongingId = props.belongingId;
|
||||
const result = await TransactionService.createTransaction(transaction);
|
||||
let result;
|
||||
|
||||
if (props.editMode && transaction._id) {
|
||||
// Update existing transaction
|
||||
result = await TransactionService.updateTransaction(transaction._id, transaction);
|
||||
} else {
|
||||
// Create new transaction
|
||||
result = await TransactionService.createTransaction(transaction);
|
||||
}
|
||||
|
||||
if (result === 'success') {
|
||||
toast.add({ severity: 'success', summary: 'موفق', detail: 'تراکنش با موفقیت ثبت شد', life: 3000 });
|
||||
const message = props.editMode ? 'تراکنش با موفقیت بروزرسانی شد' : 'تراکنش با موفقیت ثبت شد';
|
||||
toast.add({ severity: 'success', summary: 'موفق', detail: message, life: 3000 });
|
||||
emit('saved');
|
||||
closeDialog();
|
||||
} else {
|
||||
@@ -98,7 +154,7 @@ const closeDialog = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" header="افزایش یا کاهش موجودی" @update:visible="closeDialog">
|
||||
<Dialog v-model:visible="props.visible" :modal="true" :closable="true" :style="{ width: '450px' }" :header="props.editMode ? 'ویرایش تراکنش' : 'افزایش یا کاهش موجودی'" @update:visible="closeDialog">
|
||||
<div class="p-fluid">
|
||||
<div class="field mb-4">
|
||||
<label class="font-bold mb-2 block">نوع تراکنش</label>
|
||||
@@ -127,7 +183,7 @@ const closeDialog = () => {
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="انصراف" icon="pi pi-times" class="p-button-text" @click="closeDialog" />
|
||||
<Button label="ذخیره" icon="pi pi-check" @click="saveTransaction" />
|
||||
<Button :label="props.editMode ? 'بروزرسانی' : 'ذخیره'" icon="pi pi-check" @click="saveTransaction" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
@@ -40,21 +40,40 @@ const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
lon: {
|
||||
type: Number
|
||||
},
|
||||
lat: {
|
||||
type: Number
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
// Map configuration
|
||||
const zoom = ref(13);
|
||||
const zoom = ref(12);
|
||||
const center = ref([31.3183, 48.6706]);
|
||||
const attribution = ref('© OpenStreetMap contributors');
|
||||
const attribution = ref('Nilgoon Team');
|
||||
const marker = ref([...props.modelValue]);
|
||||
const map = ref(null);
|
||||
|
||||
// Search functionality
|
||||
const searchQuery = ref('');
|
||||
|
||||
const searchByCoordinates = (lat, lon) => {
|
||||
if (lat && lon) {
|
||||
center.value = [parseFloat(lat), parseFloat(lon)];
|
||||
zoom.value = 10;
|
||||
marker.value = [parseFloat(lat), parseFloat(lon)];
|
||||
emit('update:modelValue', marker.value);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
searchByCoordinates
|
||||
});
|
||||
|
||||
const handleSearch = async () => {
|
||||
if (!searchQuery.value) return;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user