mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Feature: show list of geographical units which covers address in address details modal
This commit is contained in:
parent
71d0785ab4
commit
21e24c60c7
@ -0,0 +1,15 @@
|
||||
<?php
|
||||
|
||||
namespace Chill\MainBundle\Controller;
|
||||
|
||||
use Chill\MainBundle\Entity\Address;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
|
||||
class AddressToReferenceMatcher
|
||||
{
|
||||
public function markAddressAsMatching(Address $address): JsonResponse
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -46,6 +46,7 @@ use Chill\MainBundle\Doctrine\Type\NativeDateIntervalType;
|
||||
use Chill\MainBundle\Doctrine\Type\PointType;
|
||||
use Chill\MainBundle\Entity\Civility;
|
||||
use Chill\MainBundle\Entity\Country;
|
||||
use Chill\MainBundle\Entity\GeographicalUnitLayer;
|
||||
use Chill\MainBundle\Entity\Language;
|
||||
use Chill\MainBundle\Entity\Location;
|
||||
use Chill\MainBundle\Entity\LocationType;
|
||||
@ -732,6 +733,20 @@ class ChillMainExtension extends Extension implements
|
||||
],
|
||||
],
|
||||
],
|
||||
[
|
||||
'class' => GeographicalUnitLayer::class,
|
||||
'name' => 'geographical-unit-layer',
|
||||
'base_path' => '/api/1.0/main/geographical-unit-layer',
|
||||
'base_role' => 'ROLE_USER',
|
||||
'actions' => [
|
||||
'_index' => [
|
||||
'methods' => [
|
||||
Request::METHOD_GET => true,
|
||||
Request::METHOD_HEAD => true,
|
||||
],
|
||||
],
|
||||
],
|
||||
]
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
@ -14,6 +14,7 @@ namespace Chill\MainBundle\Entity;
|
||||
use Doctrine\Common\Collections\ArrayCollection;
|
||||
use Doctrine\Common\Collections\Collection;
|
||||
use Doctrine\ORM\Mapping as ORM;
|
||||
use Symfony\Component\Serializer\Annotation as Serializer;
|
||||
|
||||
/**
|
||||
* @ORM\Table(name="chill_main_geographical_unit_layer", uniqueConstraints={
|
||||
@ -27,16 +28,19 @@ class GeographicalUnitLayer
|
||||
* @ORM\Id
|
||||
* @ORM\GeneratedValue
|
||||
* @ORM\Column(type="integer")
|
||||
* @Serializer\Groups({"read"})
|
||||
*/
|
||||
private ?int $id = null;
|
||||
|
||||
/**
|
||||
* @ORM\Column(type="json", nullable=false, options={"default": "[]"})
|
||||
* @Serializer\Groups({"read"})
|
||||
*/
|
||||
private array $name = [];
|
||||
|
||||
/**
|
||||
* @ORM\Column(type="text", nullable=false, options={"default": ""})
|
||||
* @Serializer\Groups({"read"})
|
||||
*/
|
||||
private string $refId = '';
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
import {Address} from "../../types";
|
||||
import {Address, GeographicalUnitLayer, SimpleGeographicalUnit} from "../../types";
|
||||
import {fetchResults, makeFetch} from "./apiMethods";
|
||||
|
||||
export const getAddressById = async (address_id: number): Promise<Address> =>
|
||||
{
|
||||
@ -12,3 +13,11 @@ export const getAddressById = async (address_id: number): Promise<Address> =>
|
||||
|
||||
throw Error('Error with request resource response');
|
||||
};
|
||||
|
||||
export const getGeographicalUnitsByAddress = async (address: Address): Promise<SimpleGeographicalUnit[]> => {
|
||||
return fetchResults<SimpleGeographicalUnit>(`/api/1.0/main/geographical-unit/by-address/${address.address_id}.json`);
|
||||
}
|
||||
|
||||
export const getAllGeographicalUnitLayers = async (): Promise<GeographicalUnitLayer[]> => {
|
||||
return fetchResults<GeographicalUnitLayer>(`/api/1.0/main/geographical-unit-layer.json`);
|
||||
}
|
||||
|
@ -115,6 +115,19 @@ export interface AddressReference {
|
||||
updatedAt: DateTime | null;
|
||||
}
|
||||
|
||||
export interface SimpleGeographicalUnit {
|
||||
id: number;
|
||||
layerId: number;
|
||||
unitName: string;
|
||||
unitRefId: string;
|
||||
}
|
||||
|
||||
export interface GeographicalUnitLayer {
|
||||
id: number;
|
||||
name: TranslatableString;
|
||||
refId: string;
|
||||
}
|
||||
|
||||
export interface Location {
|
||||
type: "location";
|
||||
id: number;
|
||||
|
@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<address-details-map :address="props.address"></address-details-map>
|
||||
<address-render-box :address="props.address"></address-render-box>
|
||||
|
||||
<address-details-map :address="props.address"></address-details-map>
|
||||
<address-details-geographical-layers :address="props.address"></address-details-geographical-layers>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {Address} from "../../../types";
|
||||
import AddressDetailsMap from "./Parts/AddressDetailsMap.vue";
|
||||
import AddressRenderBox from "../Entity/AddressRenderBox.vue";
|
||||
import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographicalLayers.vue";
|
||||
|
||||
interface AddressModalContentProps {
|
||||
address: Address,
|
||||
|
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<template v-for="container in data.containers">
|
||||
<h4>{{ container.layer.name.fr }}</h4>
|
||||
<ul>
|
||||
<li v-for="unit in container.units">{{ unit.unitName }} ({{ unit.unitRefId }})</li>
|
||||
</ul>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {Address, GeographicalUnitLayer, SimpleGeographicalUnit} from "../../../../types";
|
||||
import {getGeographicalUnitsByAddress, getAllGeographicalUnitLayers} from "../../../../lib/api/address";
|
||||
import {onMounted, reactive} from "vue";
|
||||
|
||||
export interface AddressDetailsGeographicalLayersProp {
|
||||
address: Address
|
||||
};
|
||||
|
||||
interface GeographicalUnitContainer {
|
||||
layer: GeographicalUnitLayer;
|
||||
units: SimpleGeographicalUnit[];
|
||||
}
|
||||
|
||||
const props = defineProps<AddressDetailsGeographicalLayersProp>();
|
||||
|
||||
const data: {
|
||||
containers: GeographicalUnitContainer[]
|
||||
} = reactive({
|
||||
containers: []
|
||||
});
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
const [units, layers] = await Promise.all([
|
||||
getGeographicalUnitsByAddress(props.address),
|
||||
getAllGeographicalUnitLayers()
|
||||
]) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
|
||||
|
||||
for (let layer of layers) {
|
||||
let us = units.filter((u) => u.layerId === layer.id);
|
||||
if (us.length > 0) {
|
||||
data.containers.push({
|
||||
layer,
|
||||
units: us
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -3,8 +3,7 @@
|
||||
Cette adresse est incomplète. La position géographique est approximative.
|
||||
</div>
|
||||
<div v-if="props.address.point !== null" class="address_details_map" ref="map_div"></div>
|
||||
<a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a>
|
||||
<a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
|
||||
<p>Voir sur <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a> <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a></p>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -29,14 +28,13 @@ let map: L.Map|null = null;
|
||||
let marker: L.Marker|null = null;
|
||||
|
||||
onMounted(() => {
|
||||
console.log(map_div.value);
|
||||
if (map_div.value === null) {
|
||||
throw new Error('map div not found');
|
||||
}
|
||||
|
||||
if (props.address.point !== null) {
|
||||
map = L.map(map_div.value);
|
||||
map.setView(lonLatForLeaflet(props.address.point), 15);
|
||||
map.setView(lonLatForLeaflet(props.address.point), 18);
|
||||
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
@ -57,7 +55,7 @@ onMounted(() => {
|
||||
const makeUrlGoogleMap = (address: Address): string => {
|
||||
const params = new URLSearchParams();
|
||||
params.append('api', '1');
|
||||
if (address.point !== null) {
|
||||
if (address.point !== null && address.addressReference !== null) {
|
||||
params.append('query', `${address.point.coordinates[1]} ${address.point.coordinates[0]}`);
|
||||
} else {
|
||||
params.append('query', address.lines.join(', '));
|
||||
@ -67,7 +65,7 @@ const makeUrlGoogleMap = (address: Address): string => {
|
||||
}
|
||||
|
||||
const makeUrlOsm = (address: Address): string => {
|
||||
if (address.point !== null) {
|
||||
if (address.point !== null && address.addressReference !== null) {
|
||||
const params = new URLSearchParams();
|
||||
params.append('mlat', `${address.point.coordinates[1]}`);
|
||||
params.append('mlon', `${address.point.coordinates[0]}`);
|
||||
|
Loading…
x
Reference in New Issue
Block a user