Browse Source

geodata: WIP geodata column type

pull/4140/head
flisowna 2 years ago
parent
commit
4cdddaf77d
  1. 23
      packages/nc-gui/components/cell/GeoData.vue

23
packages/nc-gui/components/cell/GeoData.vue

@ -18,11 +18,18 @@ const vModel = useVModel(props, 'modelValue', emits)
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)
const latitudeInput = ref(vModel?.value?.latitude || '') const latitudeInput = ref(String(vModel?.value?.latitude) || '')
const longitudeInput = ref(vModel?.value?.latitude || '') const longitudeInput = ref(String(vModel?.value?.latitude) || '')
const onSubmit = () => { const onSubmit = () => {
alert('SUBMIT') if (latitudeInput == null || longitudeInput == null) {
console.error("Tried to submit a GeoLocation where latitude or longitude value wasn't provicde")
return
}
emits('update:modelValue', {
latitude: Number.parseFloat(latitudeInput.value),
longitude: Number.parseFloat(longitudeInput.value),
})
} }
// const isOpen = ref(false) // const isOpen = ref(false)
@ -43,18 +50,18 @@ const onSubmit = () => {
</script> </script>
<template> <template>
<a-popover trigger="click" placement="bottomLeft" :style="{ maxWidth: '100px' }"> <a-popover v-model:visible="editEnabled" placement="bottomLeft" :style="{ maxWidth: '100px' }">
<template #content> <template #content>
<div> <div>
Test222 Test222
{{ JSON.stringify(vModel) }} {{ JSON.stringify(vModel) }}
<div :style="{ display: 'flex', flexDirection: 'column' }"> <div :style="{ display: 'flex', flexDirection: 'column' }">
<label for="latitude">latitude</label> <label for="latitude">latitude</label>
<a-input v-if="editEnabled" id="latitude" v-model="latitudeInput" /> <a-input id="latitude" v-model="latitudeInput" />
<span v-else class="text-sm">{{ latitudeInput }}</span> <!-- <span v-else class="text-sm">{{ latitudeInput }}</span> -->
<label for="longitude">longitude</label> <label for="longitude">longitude</label>
<a-input v-if="editEnabled" id="longitude" v-model="longitudeInput" /> <a-input id="longitude" v-model="longitudeInput" />
<span v-else class="text-sm">{{ longitudeInput }}</span> <!-- <span v-else class="text-sm">{{ longitudeInput }}</span> -->
<a-button type="primary" @click="onSubmit">Ok</a-button> <a-button type="primary" @click="onSubmit">Ok</a-button>
</div> </div>
</div> </div>

Loading…
Cancel
Save