Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-20 14:43:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

Apply prettier rules

Browse Source
This commit is contained in:
Julie Lenaerts
2024-11-14 18:47:38 +01:00
parent 610227815a
commit aa0785fc71
291 changed files with 23646 additions and 22071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
View File

@@ -1,111 +1,130 @@
<template>
<add-address
:key="key"
:context="context"
:options="options"
:address-changed-callback="submitAddress"
ref="addAddress"
/>
<add-address
:key="key"
:context="context"
:options="options"
:address-changed-callback="submitAddress"
ref="addAddress"
/>
</template>
<script>
import AddAddress from './components/AddAddress.vue';
import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
import AddAddress from "./components/AddAddress.vue";
import {
postAddressToHousehold,
postAddressToPerson,
} from "ChillPersonAssets/vuejs/_api/AddAddress";
export default {
name: "App",
components: {
AddAddress
},
props: ['addAddress', 'callback'],
emits: ['addressEdited', 'addressCreated'],
computed: {
context() {
return this.addAddress.context;
},
options() {
return this.addAddress.options;
},
key() {
return (this.context.edit) ? 'address_' + this.context.addressId
: this.context.target.name + '_' + this.context.target.id ;
}
},
mounted() {
//console.log('AddAddress: data context', this.context);
//console.log('AddAddress: data options', this.options);
},
methods: {
displayErrors() {
return this.$refs.addAddress.errorMsg;
},
submitAddress(payload) {
console.log('@@@ click on Submit Address Button', payload);
name: "App",
components: {
AddAddress,
},
props: ["addAddress", "callback"],
emits: ["addressEdited", "addressCreated"],
computed: {
context() {
return this.addAddress.context;
},
options() {
return this.addAddress.options;
},
key() {
return this.context.edit
? "address_" + this.context.addressId
: this.context.target.name + "_" + this.context.target.id;
},
},
mounted() {
//console.log('AddAddress: data context', this.context);
//console.log('AddAddress: data options', this.options);
},
methods: {
displayErrors() {
return this.$refs.addAddress.errorMsg;
},
submitAddress(payload) {
console.log("@@@ click on Submit Address Button", payload);
// Existing address
if (this.context.edit) {
// Existing address
if (this.context.edit) {
// address is already linked, just finish !
this.$refs.addAddress.afterLastPaneAction({});
this.$emit("addressEdited", payload);
// address is already linked, just finish !
this.$refs.addAddress.afterLastPaneAction({});
this.$emit('addressEdited', payload);
// New created address
} else {
this.postAddressTo(payload);
}
},
// New created address
} else {
this.postAddressTo(payload);
}
},
/*
* Post new created address to targetEntity
*/
postAddressTo(payload) {
this.$emit("addressCreated", payload);
/*
* Post new created address to targetEntity
*/
postAddressTo(payload) {
this.$emit('addressCreated', payload);
console.log(
"postAddress",
payload.addressId,
"To",
payload.target,
payload.targetId,
);
switch (payload.target) {
case "household":
postAddressToHousehold(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..household address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
console.log('postAddress', payload.addressId, 'To', payload.target, payload.targetId);
switch (payload.target) {
case 'household':
postAddressToHousehold(payload.targetId, payload.addressId)
.then(address => new Promise((resolve, reject) => {
console.log('..household address', address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
// finish
this.$refs.addAddress.afterLastPaneAction({ addressId: address.address_id });
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "person":
postAddressToPerson(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..person address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
resolve();
}))
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
})
;
break;
case 'person':
postAddressToPerson(payload.targetId, payload.addressId)
.then(address => new Promise((resolve, reject) => {
console.log('..person address', address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
// finish
this.$refs.addAddress.afterLastPaneAction({ addressId: address.address_id });
resolve();
}))
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
})
;
break;
case 'thirdparty':
console.log('TODO write postAddressToThirdparty');
break;
default:
this.$refs.addAddress.errorMsg.push('That entity is not managed by address !');
}
}
}
}
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "thirdparty":
console.log("TODO write postAddressToThirdparty");
break;
default:
this.$refs.addAddress.errorMsg.push(
"That entity is not managed by address !",
);
}
},
},
};
</script>

311
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js
View File

@@ -1,122 +1,128 @@
import {getAddressById} from 'ChillMainAssets/lib/api/address';
import { getAddressById } from "ChillMainAssets/lib/api/address";
/**
* Endpoint chill_api_single_country__index
* method GET, get Country Object
* @returns {Promise} a promise containing all Country object
*/
* Endpoint chill_api_single_country__index
* method GET, get Country Object
* @returns {Promise} a promise containing all Country object
*/
const fetchCountries = () => {
//console.log('<<< fetching countries');
//console.log('<<< fetching countries');
const url = `/api/1.0/main/country.json?item_per_page=1000`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
const url = `/api/1.0/main/country.json?item_per_page=1000`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_api_single_postal_code__index
* method GET, get Cities Object
* @params {object} a country object
* @returns {Promise} a promise containing all Postal Code objects filtered with country
*/
* Endpoint chill_api_single_postal_code__index
* method GET, get Cities Object
* @params {object} a country object
* @returns {Promise} a promise containing all Postal Code objects filtered with country
*/
const fetchCities = (country) => {
//console.log('<<< fetching cities for', country);
// warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
//console.log('<<< fetching cities for', country);
// warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
const url = `/api/1.0/main/postal-code.json?item_per_page=1000&country=${country.id}`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_main_postalcodeapi_search
* method GET, get Cities Object
* @params {string} search a search string
* @params {object} country a country object
* @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
*/
* Endpoint chill_main_postalcodeapi_search
* method GET, get Cities Object
* @params {string} search a search string
* @params {object} country a country object
* @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
*/
const searchCities = (search, country) => {
const url = `/api/1.0/main/postal-code/search.json?q=${search}&country=${country.id}`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
const url = `/api/1.0/main/postal-code/search.json?q=${search}&country=${country.id}`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_main_addressreferenceapi_search
* method GET, get AddressReference Object
* @params {string} search a search string
* @params {object} postalCode a postalCode object
* @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
*/
* Endpoint chill_main_addressreferenceapi_search
* method GET, get AddressReference Object
* @params {string} search a search string
* @params {object} postalCode a postalCode object
* @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
*/
const searchReferenceAddresses = (search, postalCode) => {
const url = `/api/1.0/main/address-reference/by-postal-code/${postalCode.id}/search.json?q=${search}`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
const url = `/api/1.0/main/address-reference/by-postal-code/${postalCode.id}/search.json?q=${search}`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_api_single_address_reference__index
* method GET, get AddressReference Object
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
* Endpoint chill_api_single_address_reference__index
* method GET, get AddressReference Object
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
const fetchReferenceAddresses = (postalCode) => {
//console.log('<<< fetching references addresses for', postalCode);
const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
//console.log('<<< fetching references addresses for', postalCode);
const url = `/api/1.0/main/address-reference.json?item_per_page=1000&postal_code=${postalCode.id}`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_api_single_address_reference__index
* method GET, get AddressReference Object
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
* Endpoint chill_api_single_address_reference__index
* method GET, get AddressReference Object
* @returns {Promise} a promise containing all AddressReference objects filtered with postal code
*/
const fetchAddresses = () => {
//console.log('<<< fetching addresses');
//console.log('<<< fetching addresses');
//TODO deal with huge number of addresses... we should do suggestion...
const url = `/api/1.0/main/address.json?item_per_page=1000`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
const url = `/api/1.0/main/address.json?item_per_page=1000`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_api_single_address__entity__create
* method POST, post Address Object
* @returns {Promise}
*/
* Endpoint chill_api_single_address__entity__create
* method POST, post Address Object
* @returns {Promise}
*/
const postAddress = (address) => {
const url = `/api/1.0/main/address.json?`;
const body = address;
const url = `/api/1.0/main/address.json?`;
const body = address;
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(body)
}).then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
return fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(body),
}).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
@@ -127,82 +133,85 @@ const postAddress = (address) => {
const duplicateAddress = (address) => {
const url = `/api/1.0/main/address/${address.address_id}/duplicate.json`;
return fetch(url, {
'method': 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
}).then(response => {
if (response.ok) {
return response.json();
}
throw Error('Error with request resource response');
});
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
}).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/**
* Endpoint chill_api_single_address__entity__create
* method PATCH, patch Address Instance
*
* @id integer - id of address
* @body Object - dictionary with changes to post
*/
* Endpoint chill_api_single_address__entity__create
* method PATCH, patch Address Instance
*
* @id integer - id of address
* @body Object - dictionary with changes to post
*/
const patchAddress = (id, body) => {
const url = `/api/1.0/main/address/${id}.json`;
return fetch(url, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(body)
})
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
const url = `/api/1.0/main/address/${id}.json`;
return fetch(url, {
method: "PATCH",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(body),
}).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/*
* Endpoint chill_api_single_postal_code__entity_create
* method POST, post Postal Code Object
* @returns {Promise}
*/
const postPostalCode = (postalCode) => { //<--
const url = `/api/1.0/main/postal-code.json?`;
const body = postalCode;
* Endpoint chill_api_single_postal_code__entity_create
* method POST, post Postal Code Object
* @returns {Promise}
*/
const postPostalCode = (postalCode) => {
//<--
const url = `/api/1.0/main/postal-code.json?`;
const body = postalCode;
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(body)
}).then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
return fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(body),
}).then((response) => {
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
});
};
/*
* Endpoint chill_api_single_address__index
* method GET, get Address Object
* @params {id} the address id
* @returns {Promise} a promise containing a Address object
*/
* Endpoint chill_api_single_address__index
* method GET, get Address Object
* @params {id} the address id
* @returns {Promise} a promise containing a Address object
*/
const getAddress = (id) => {
return getAddressById(id);
};
export {
duplicateAddress,
fetchCountries,
fetchCities,
fetchReferenceAddresses,
fetchAddresses,
postAddress,
patchAddress,
postPostalCode,
getAddress,
searchCities,
searchReferenceAddresses
duplicateAddress,
fetchCountries,
fetchCities,
fetchReferenceAddresses,
fetchAddresses,
postAddress,
patchAddress,
postPostalCode,
getAddress,
searchCities,
searchReferenceAddresses,
};

55
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
View File

@@ -1,37 +1,32 @@
<template>
<ul
class="record_actions"
v-if="!options.onlyButton"
:class="{ 'sticky-form-buttons': isStickyForm }"
>
<li
v-if="isStickyForm"
class="cancel"
<ul
class="record_actions"
v-if="!options.onlyButton"
:class="{ 'sticky-form-buttons': isStickyForm }"
>
<slot name="before" />
</li>
<li>
<slot name="action" />
</li>
<li v-if="isStickyForm">
<slot name="after" />
</li>
</ul>
<slot
v-else
name="action"
/>
<li v-if="isStickyForm" class="cancel">
<slot name="before" />
</li>
<li>
<slot name="action" />
</li>
<li v-if="isStickyForm">
<slot name="after" />
</li>
</ul>
<slot v-else name="action" />
</template>
<script>
export default {
name: "ActionButtons",
props: ['options', 'defaultz'],
computed: {
isStickyForm() {
return (typeof this.options.stickyActions !== 'undefined') ?
this.options.stickyActions : this.defaultz.stickyActions;
},
}
}
name: "ActionButtons",
props: ["options", "defaultz"],
computed: {
isStickyForm() {
return typeof this.options.stickyActions !== "undefined"
? this.options.stickyActions
: this.defaultz.stickyActions;
},
},
};
</script>

1713
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
View File

File diff suppressed because it is too large Load Diff

184
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
View File

@@ -1,99 +1,119 @@
<template>
<div id="address_map" />
<div id="address_map" />
</template>
<script>
import L from 'leaflet';
import markerIconPng from 'leaflet/dist/images/marker-icon.png'
import 'leaflet/dist/leaflet.css';
import L from "leaflet";
import markerIconPng from "leaflet/dist/images/marker-icon.png";
import "leaflet/dist/leaflet.css";
const lonLatForLeaflet = (coordinates) => {
return [coordinates[1], coordinates[0]];
}
return [coordinates[1], coordinates[0]];
};
export default {
name: 'AddressMap',
props: ['entity'],
data() {
return {
map: null,
marker: null
}
},
computed: {
center() {
return this.entity.addressMap.center;
},
hasAddressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return false;
}
if (null !== this.entity.address.addressReference) {
return true;
}
if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
return true;
}
return false;
},
/**
*
* @returns {coordinates: [float, float], type: "Point"}
*/
addressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return null;
}
name: "AddressMap",
props: ["entity"],
data() {
return {
map: null,
marker: null,
};
},
computed: {
center() {
return this.entity.addressMap.center;
},
hasAddressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return false;
}
if (null !== this.entity.address.addressReference) {
return true;
}
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return true;
}
return false;
},
/**
*
* @returns {coordinates: [float, float], type: "Point"}
*/
addressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return null;
}
if (null !== this.entity.address.addressReference) {
return this.entity.address.addressReference.point;
}
if (null !== this.entity.address.addressReference) {
return this.entity.address.addressReference.point;
}
if (null !== this.entity.address.postcode && null !== this.entity.address.postcode.center) {
return this.entity.address.postcode.center;
}
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return this.entity.address.postcode.center;
}
return null;
},
},
methods:{
init() {
this.map = L.map('address_map');
return null;
},
},
methods: {
init() {
this.map = L.map("address_map");
if (!this.hasAddressPoint) {
this.map.setView(lonLatForLeaflet(this.entity.addressMap.center), this.entity.addressMap.zoom);
} else {
this.map.setView(lonLatForLeaflet(this.addressPoint.coordinates), 15);
}
if (!this.hasAddressPoint) {
this.map.setView(
lonLatForLeaflet(this.entity.addressMap.center),
this.entity.addressMap.zoom,
);
} else {
this.map.setView(
lonLatForLeaflet(this.addressPoint.coordinates),
15,
);
}
this.map.scrollWheelZoom.disable();
this.map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(this.map);
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
if (!this.hasAddressPoint) {
this.marker = L.marker(lonLatForLeaflet(this.entity.addressMap.center), {icon: markerIcon});
} else {
this.marker = L.marker(lonLatForLeaflet(this.addressPoint.coordinates), {icon: markerIcon});
}
this.marker.addTo(this.map);
},
update() {
if (this.marker && this.entity.addressMap.center) {
this.marker.setLatLng(lonLatForLeaflet(this.entity.addressMap.center));
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
}
}
},
mounted() {
this.init();
},
}
if (!this.hasAddressPoint) {
this.marker = L.marker(
lonLatForLeaflet(this.entity.addressMap.center),
{ icon: markerIcon },
);
} else {
this.marker = L.marker(
lonLatForLeaflet(this.addressPoint.coordinates),
{ icon: markerIcon },
);
}
this.marker.addTo(this.map);
},
update() {
if (this.marker && this.entity.addressMap.center) {
this.marker.setLatLng(
lonLatForLeaflet(this.entity.addressMap.center),
);
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
}
},
},
mounted() {
this.init();
},
};
</script>

293
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
View File

@@ -1,158 +1,149 @@
<template>
<h4 class="h3">
{{ $t('fill_an_address') }}
</h4>
<div class="row my-3">
<div
class="col-lg-6"
v-if="!isNoAddress"
>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="floor"
:placeholder="$t('floor')"
v-model="floor"
>
<label for="floor">{{ $t('floor') }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="corridor"
:placeholder="$t('corridor')"
v-model="corridor"
>
<label for="corridor">{{ $t('corridor') }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="steps"
:placeholder="$t('steps')"
v-model="steps"
>
<label for="steps">{{ $t('steps') }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="flat"
:placeholder="$t('flat')"
v-model="flat"
>
<label for="flat">{{ $t('flat') }}</label>
</div>
<h4 class="h3">
{{ $t("fill_an_address") }}
</h4>
<div class="row my-3">
<div class="col-lg-6" v-if="!isNoAddress">
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="floor"
:placeholder="$t('floor')"
v-model="floor"
/>
<label for="floor">{{ $t("floor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="corridor"
:placeholder="$t('corridor')"
v-model="corridor"
/>
<label for="corridor">{{ $t("corridor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="steps"
:placeholder="$t('steps')"
v-model="steps"
/>
<label for="steps">{{ $t("steps") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="flat"
:placeholder="$t('flat')"
v-model="flat"
/>
<label for="flat">{{ $t("flat") }}</label>
</div>
</div>
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="buildingName"
maxlength="255"
:placeholder="$t('buildingName')"
v-model="buildingName"
/>
<label for="buildingName">{{ $t("buildingName") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="extra"
maxlength="255"
:placeholder="$t('extra')"
v-model="extra"
/>
<label for="extra">{{ $t("extra") }}</label>
</div>
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="distribution"
maxlength="255"
:placeholder="$t('distribution')"
v-model="distribution"
/>
<label for="distribution">{{ $t("distribution") }}</label>
</div>
</div>
</div>
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
<div
class="form-floating my-1"
v-if="!isNoAddress"
>
<input
class="form-control"
type="text"
name="buildingName"
maxlength="255"
:placeholder="$t('buildingName')"
v-model="buildingName"
>
<label for="buildingName">{{ $t('buildingName') }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="extra"
maxlength="255"
:placeholder="$t('extra')"
v-model="extra"
>
<label for="extra">{{ $t('extra') }}</label>
</div>
<div
class="form-floating my-1"
v-if="!isNoAddress"
>
<input
class="form-control"
type="text"
name="distribution"
maxlength="255"
:placeholder="$t('distribution')"
v-model="distribution"
>
<label for="distribution">{{ $t('distribution') }}</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AddressMore",
props: ['entity', 'isNoAddress'],
computed: {
floor: {
set(value) {
this.entity.selected.address.floor = value;
},
get() {
return this.entity.selected.address.floor;
}
},
corridor: {
set(value) {
this.entity.selected.address.corridor = value;
},
get() {
return this.entity.selected.address.corridor;
}
},
steps: {
set(value) {
this.entity.selected.address.steps = value;
},
get() {
return this.entity.selected.address.steps;
}
},
flat: {
set(value) {
this.entity.selected.address.flat = value;
},
get() {
return this.entity.selected.address.flat;
}
},
buildingName: {
set(value) {
this.entity.selected.address.buildingName = value;
},
get() {
return this.entity.selected.address.buildingName;
}
},
extra: {
set(value) {
this.entity.selected.address.extra = value;
},
get() {
return this.entity.selected.address.extra;
}
},
distribution: {
set(value) {
this.entity.selected.address.distribution = value;
},
get() {
return this.entity.selected.address.distribution;
}
}
}
}
name: "AddressMore",
props: ["entity", "isNoAddress"],
computed: {
floor: {
set(value) {
this.entity.selected.address.floor = value;
},
get() {
return this.entity.selected.address.floor;
},
},
corridor: {
set(value) {
this.entity.selected.address.corridor = value;
},
get() {
return this.entity.selected.address.corridor;
},
},
steps: {
set(value) {
this.entity.selected.address.steps = value;
},
get() {
return this.entity.selected.address.steps;
},
},
flat: {
set(value) {
this.entity.selected.address.flat = value;
},
get() {
return this.entity.selected.address.flat;
},
},
buildingName: {
set(value) {
this.entity.selected.address.buildingName = value;
},
get() {
return this.entity.selected.address.buildingName;
},
},
extra: {
set(value) {
this.entity.selected.address.extra = value;
},
get() {
return this.entity.selected.address.extra;
},
},
distribution: {
set(value) {
this.entity.selected.address.distribution = value;
},
get() {
return this.entity.selected.address.distribution;
},
},
},
};
</script>

403
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
View File

@@ -1,204 +1,227 @@
<template>
<div class="my-1">
<label
class="col-form-label"
for="addressSelector"
>{{ $t('address') }}</label>
<VueMultiselect
id="addressSelector"
v-model="value"
:placeholder="$t('select_address')"
:tag-placeholder="$t('create_address')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_address')"
:selected-label="$t('multiselect.selected_label')"
@search-change="listenInputSearch"
:internal-search="false"
ref="addressSelector"
@select="selectAddress"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:taggable="true"
:multiple="false"
@tag="addAddress"
:loading="isLoading"
:options="addresses"
/>
</div>
<div class="my-1">
<label class="col-form-label" for="addressSelector">{{
$t("address")
}}</label>
<VueMultiselect
id="addressSelector"
v-model="value"
:placeholder="$t('select_address')"
:tag-placeholder="$t('create_address')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_address')"
:selected-label="$t('multiselect.selected_label')"
@search-change="listenInputSearch"
:internal-search="false"
ref="addressSelector"
@select="selectAddress"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:taggable="true"
:multiple="false"
@tag="addAddress"
:loading="isLoading"
:options="addresses"
/>
</div>
<div
class="custom-address row g-1"
v-if="writeNewAddress || writeNewPostalCode || (isEnteredCustomAddress && !isAddressSelectorOpen)"
>
<div class="col-10">
<div class="form-floating">
<input
class="form-control"
type="text"
name="street"
:placeholder="$t('street')"
v-model="street"
>
<label for="street">{{ $t('street') }}</label>
</div>
<div
class="custom-address row g-1"
v-if="
writeNewAddress ||
writeNewPostalCode ||
(isEnteredCustomAddress && !isAddressSelectorOpen)
"
>
<div class="col-10">
<div class="form-floating">
<input
class="form-control"
type="text"
name="street"
:placeholder="$t('street')"
v-model="street"
/>
<label for="street">{{ $t("street") }}</label>
</div>
</div>
<div class="col-2">
<div class="form-floating">
<input
class="form-control"
type="text"
name="streetNumber"
:placeholder="$t('streetNumber')"
v-model="streetNumber"
/>
<label for="streetNumber">{{ $t("streetNumber") }}</label>
</div>
</div>
</div>
<div class="col-2">
<div class="form-floating">
<input
class="form-control"
type="text"
name="streetNumber"
:placeholder="$t('streetNumber')"
v-model="streetNumber"
>
<label for="streetNumber">{{ $t('streetNumber') }}</label>
</div>
</div>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
import { searchReferenceAddresses, fetchReferenceAddresses } from '../../api.js';
import VueMultiselect from "vue-multiselect";
import {
searchReferenceAddresses,
fetchReferenceAddresses,
} from "../../api.js";
export default {
name: 'AddressSelection',
components: { VueMultiselect },
props: ['entity', 'context', 'updateMapCenter', 'flag', 'checkErrors'],
data() {
return {
value: this.context.edit ? this.entity.address.addressReference : null,
isLoading: false
}
},
computed: {
writeNewAddress() {
return this.entity.selected.writeNew.address;
},
writeNewPostalCode() {
return this.entity.selected.writeNew.postCode;
},
isAddressSelectorOpen() {
return this.$refs.addressSelector.$data.isOpen;
},
isEnteredCustomAddress() {
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
},
addresses() {
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.entity.selected.address.street = value;
},
get() {
return this.entity.selected.address.street;
}
},
streetNumber: {
set(value) {
this.entity.selected.address.streetNumber = value;
},
get() {
return this.entity.selected.address.streetNumber;
}
},
},
methods: {
transName(value) {
return value.streetNumber === undefined ? value.street : `${value.streetNumber}, ${value.street}`
},
selectAddress(value) {
this.entity.selected.address = value;
this.entity.selected.address.addressReference = {
id: value.id
};
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.entity.selected.writeNew.address = false;
this.updateMapCenter(value.point);
this.checkErrors();
},
remove() {
this.entity.selected.address = {};
this.checkErrors();
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
if (!this.entity.selected.writeNew.postcode && 'id' in this.entity.selected.city) {
if (query.length > 2) {
this.isLoading = true;
searchReferenceAddresses(query, this.entity.selected.city).then(
addresses => new Promise((resolve, reject) => {
this.entity.loaded.addresses = addresses.results;
this.isLoading = false;
resolve();
}))
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) { // Fetch all cities when suppressing the query
this.isLoading = true;
fetchReferenceAddresses(this.entity.selected.city).then(
addresses => new Promise((resolve, reject) => {
this.entity.loaded.addresses = addresses.results;
this.isLoading = false;
resolve();
}))
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
}
if (this.isAddressSelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomAddress) {
let addr = this.splitAddress(this.$data.value.text);
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
this.entity.selected.writeNew.address = true;
name: "AddressSelection",
components: { VueMultiselect },
props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
data() {
return {
value: this.context.edit
? this.entity.address.addressReference
: null,
isLoading: false,
};
},
computed: {
writeNewAddress() {
return this.entity.selected.writeNew.address;
},
writeNewPostalCode() {
return this.entity.selected.writeNew.postCode;
},
isAddressSelectorOpen() {
return this.$refs.addressSelector.$data.isOpen;
},
isEnteredCustomAddress() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
addresses() {
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.entity.selected.address.street = value;
},
get() {
return this.entity.selected.address.street;
},
},
streetNumber: {
set(value) {
this.entity.selected.address.streetNumber = value;
},
get() {
return this.entity.selected.address.streetNumber;
},
},
},
methods: {
transName(value) {
return value.streetNumber === undefined
? value.street
: `${value.streetNumber}, ${value.street}`;
},
selectAddress(value) {
this.entity.selected.address = value;
this.entity.selected.address.addressReference = {
id: value.id,
};
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.entity.selected.writeNew.address = false;
this.updateMapCenter(value.point);
this.checkErrors();
}
},
splitAddress(address) {
let substr = address
.split(',')
.map(s => s.trim());
if (substr.length === 1) {
substr = address.split(' ');
}
let decimal = [];
substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
if (decimal[0] === true) {
return {
number: substr.shift(),
street: substr.join(' ')
},
remove() {
this.entity.selected.address = {};
this.checkErrors();
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
if (
!this.entity.selected.writeNew.postcode &&
"id" in this.entity.selected.city
) {
if (query.length > 2) {
this.isLoading = true;
searchReferenceAddresses(query, this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses =
addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchReferenceAddresses(this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses =
addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
}
}
else if (decimal[decimal.length - 1] === true) {
return {
number: substr.pop(),
street: substr.join(' ')
if (this.isAddressSelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomAddress) {
let addr = this.splitAddress(this.$data.value.text);
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
this.entity.selected.writeNew.address = true;
this.checkErrors();
}
}
return {
number: '',
street: substr.join(' ')
}
},
addAddress() {
this.entity.selected.writeNew.address = true;
}
}
},
splitAddress(address) {
let substr = address.split(",").map((s) => s.trim());
if (substr.length === 1) {
substr = address.split(" ");
}
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
});
if (decimal[0] === true) {
return {
number: substr.shift(),
street: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
number: substr.pop(),
street: substr.join(" "),
};
}
return {
number: "",
street: substr.join(" "),
};
},
addAddress() {
this.entity.selected.writeNew.address = true;
},
},
};
</script>

442
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
View File

@@ -1,221 +1,251 @@
<template>
<div class="my-1">
<label class="col-form-label">{{ $t('city') }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_postal_code')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
@tag="addPostcode"
:tag-placeholder="$t('create_postal_code')"
:loading="isLoading"
:options="cities"
/>
</div>
<div class="my-1">
<label class="col-form-label">{{ $t("city") }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_postal_code')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
@tag="addPostcode"
:tag-placeholder="$t('create_postal_code')"
:loading="isLoading"
:options="cities"
/>
</div>
<div
class="custom-postcode row g-1"
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
>
<div class="col-4">
<div class="form-floating">
<input
class="form-control"
type="text"
id="code"
:placeholder="$t('postalCode_code')"
v-model="code"
>
<label for="code">{{ $t('postalCode_code') }}</label>
</div>
<div
class="custom-postcode row g-1"
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
>
<div class="col-4">
<div class="form-floating">
<input
class="form-control"
type="text"
id="code"
:placeholder="$t('postalCode_code')"
v-model="code"
/>
<label for="code">{{ $t("postalCode_code") }}</label>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input
class="form-control"
type="text"
id="name"
:placeholder="$t('postalCode_name')"
v-model="name"
/>
<label for="name">{{ $t("postalCode_name") }}</label>
</div>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input
class="form-control"
type="text"
id="name"
:placeholder="$t('postalCode_name')"
v-model="name"
>
<label for="name">{{ $t('postalCode_name') }}</label>
</div>
</div>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
import { searchCities, fetchCities } from '../../api.js';
import VueMultiselect from "vue-multiselect";
import { searchCities, fetchCities } from "../../api.js";
export default {
name: 'CitySelection',
components: { VueMultiselect },
props: ['entity', 'context', 'focusOnAddress', 'updateMapCenter', 'flag', 'checkErrors'],
emits: ['getReferenceAddresses'],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false,
}
},
computed: {
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
isCitySelectorOpen() {
return this.$refs.citySelector.$data.isOpen;
},
isEnteredCustomCity() {
return this.$data.value !== null && typeof this.$data.value.text !== 'undefined';
},
cities() {
return this.entity.loaded.cities.sort(
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name
)
},
name: {
set(value) {
this.entity.selected.postcode.name = value;
},
get() {
return this.entity.selected.postcode.name;
}
},
code: {
set(value) {
this.entity.selected.postcode.code= value;
},
get() {
return this.entity.selected.postcode.code;
}
},
},
mounted() {
console.log('writeNew.postcode', this.entity.selected.writeNew.postcode, 'in mounted');
if (this.context.edit) {
this.entity.selected.city = this.value;
this.entity.selected.postcode.name = this.value.name;
this.entity.selected.postcode.code = this.value.code;
this.$emit('getReferenceAddresses', this.value);
if (typeof this.value.center !== 'undefined') {
this.updateMapCenter(this.value.center);
if (this.value.center.coordinates) {
this.entity.selected.postcode.coordinates = this.value.center.coordinates;
name: "CitySelection",
components: { VueMultiselect },
props: [
"entity",
"context",
"focusOnAddress",
"updateMapCenter",
"flag",
"checkErrors",
],
emits: ["getReferenceAddresses"],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false,
};
},
computed: {
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
isCitySelectorOpen() {
return this.$refs.citySelector.$data.isOpen;
},
isEnteredCustomCity() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
cities() {
return this.entity.loaded.cities.sort(
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
);
},
name: {
set(value) {
this.entity.selected.postcode.name = value;
},
get() {
return this.entity.selected.postcode.name;
},
},
code: {
set(value) {
this.entity.selected.postcode.code = value;
},
get() {
return this.entity.selected.postcode.code;
},
},
},
mounted() {
console.log(
"writeNew.postcode",
this.entity.selected.writeNew.postcode,
"in mounted",
);
if (this.context.edit) {
this.entity.selected.city = this.value;
this.entity.selected.postcode.name = this.value.name;
this.entity.selected.postcode.code = this.value.code;
this.$emit("getReferenceAddresses", this.value);
if (typeof this.value.center !== "undefined") {
this.updateMapCenter(this.value.center);
if (this.value.center.coordinates) {
this.entity.selected.postcode.coordinates =
this.value.center.coordinates;
}
}
}
}
},
methods: {
transName(value) {
return (value.code && value.name) ? `${value.name} (${value.code})` : '';
},
selectCity(value) {
console.log(value)
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
if (value.center) {
this.entity.selected.postcode.coordinates = value.center.coordinates;
}
this.entity.selected.writeNew.postcode = false;
this.$emit('getReferenceAddresses', value);
this.focusOnAddress();
if (value.center) {
this.updateMapCenter(value.center);
}
this.checkErrors();
},
remove() {
this.entity.selected.city = {};
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {
this.isLoading = true;
searchCities(query, this.entity.selected.country).then(
cities => new Promise((resolve, reject) => {
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
this.isLoading = false;
resolve();
}))
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
}
},
methods: {
transName(value) {
return value.code && value.name
? `${value.name} (${value.code})`
: "";
},
selectCity(value) {
console.log(value);
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
if (value.center) {
this.entity.selected.postcode.coordinates =
value.center.coordinates;
}
this.entity.selected.writeNew.postcode = false;
this.$emit("getReferenceAddresses", value);
this.focusOnAddress();
if (value.center) {
this.updateMapCenter(value.center);
}
this.checkErrors();
},
remove() {
this.entity.selected.city = {};
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {
this.isLoading = true;
searchCities(query, this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities =
cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchCities(this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities =
cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
if (this.isCitySelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomCity) {
let city = this.splitCity(this.$data.value.text);
this.$refs.citySelector.currentOptionLabel = "";
this.entity.selected.city = city;
this.entity.selected.postcode.name = city.name;
this.entity.selected.postcode.code = city.code;
this.entity.selected.writeNew.postcode = true;
console.log("writeNew.postcode true, in listenInputSearch");
}
},
splitCity(city) {
let substr = city.split("-").map((s) => s.trim());
if (substr.length === 1) {
substr = city.split(" ");
}
//console.log('substr', substr);
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
});
} else {
if (query.length === 0) { // Fetch all cities when suppressing the query
this.isLoading = true;
fetchCities(this.entity.selected.country).then(
cities => new Promise((resolve, reject) => {
this.entity.loaded.cities = cities.results.filter(c => c.origin !== 3); // filter out user-defined cities
this.isLoading = false;
resolve();
}))
.catch((error) => {
console.log(error)
this.isLoading = false;
});
if (decimal[0] === true) {
return {
code: substr.shift(),
name: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
code: substr.pop(),
name: substr.join(" "),
};
}
}
if (this.isCitySelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomCity) {
let city = this.splitCity(this.$data.value.text);
this.$refs.citySelector.currentOptionLabel = '';
this.entity.selected.city = city;
this.entity.selected.postcode.name = city.name;
this.entity.selected.postcode.code = city.code;
return {
code: "",
name: substr.join(" "),
};
},
addPostcode() {
console.log("addPostcode: pass here ?? never, it seems");
this.entity.selected.writeNew.postcode = true;
console.log('writeNew.postcode true, in listenInputSearch');
}
},
splitCity(city) {
let substr = city
.split('-')
.map(s => s.trim());
if (substr.length === 1) {
substr = city.split(' ');
}
//console.log('substr', substr);
let decimal = [];
substr.forEach((s, i) => { decimal[i] = /^\d+$/.test(s) });
if (decimal[0] === true) {
return {
code: substr.shift(),
name: substr.join(' ')
}
}
else if (decimal[decimal.length - 1] === true) {
return {
code: substr.pop(),
name: substr.join(' ')
}
}
return {
code: '',
name: substr.join(' ')
}
},
addPostcode() {
console.log('addPostcode: pass here ?? never, it seems');
this.entity.selected.writeNew.postcode = true;
console.log('writeNew.postcode true, in addPostcode');
}
}
console.log("writeNew.postcode true, in addPostcode");
},
},
};
</script>

144
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
View File

@@ -1,76 +1,86 @@
<template>
<div class="my-1">
<label
class="col-form-label"
for="countrySelect"
>{{ $t('country') }}</label>
<VueMultiselect
id="countrySelect"
label="name"
track-by="id"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="sortedCountries"
v-model="value"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry"
@remove="remove"
/>
</div>
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{
$t("country")
}}</label>
<VueMultiselect
id="countrySelect"
label="name"
track-by="id"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="sortedCountries"
v-model="value"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry"
@remove="remove"
/>
</div>
</template>
<script>
import VueMultiselect from 'vue-multiselect';
import VueMultiselect from "vue-multiselect";
export default {
name: 'CountrySelection',
components: { VueMultiselect },
props: ['context', 'entity', 'flag', 'checkErrors'],
emits: ['getCities'],
data() {
return {
value: this.selectCountryByCode(
this.context.edit ? this.entity.selected.country.code : this.context.defaults.default_country
)
}
},
computed: {
sortedCountries() {
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter(c => c.countryCode === 'FR'))
sortedCountries.push(...countries.filter(c => c.countryCode === 'BE'))
sortedCountries.push(...countries.filter(c => c.countryCode !== 'FR').filter(c => c.countryCode !== 'BE'))
return sortedCountries;
},
},
mounted() {
console.log('country selection mounted', this.value);
if (this.value !== undefined) {
this.selectCountry(this.value);
}
},
methods: {
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(c => c.countryCode === countryCode)[0];
},
transName ({ name }) {
return name.fr //TODO multilang
},
selectCountry(value) {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit('getCities', value);
this.checkErrors();
},
remove() {
this.entity.selected.country = null;
this.checkErrors();
},
}
name: "CountrySelection",
components: { VueMultiselect },
props: ["context", "entity", "flag", "checkErrors"],
emits: ["getCities"],
data() {
return {
value: this.selectCountryByCode(
this.context.edit
? this.entity.selected.country.code
: this.context.defaults.default_country,
),
};
},
computed: {
sortedCountries() {
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(
...countries.filter((c) => c.countryCode === "FR"),
);
sortedCountries.push(
...countries.filter((c) => c.countryCode === "BE"),
);
sortedCountries.push(
...countries
.filter((c) => c.countryCode !== "FR")
.filter((c) => c.countryCode !== "BE"),
);
return sortedCountries;
},
},
mounted() {
console.log("country selection mounted", this.value);
if (this.value !== undefined) {
this.selectCountry(this.value);
}
},
methods: {
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(
(c) => c.countryCode === countryCode,
)[0];
},
transName({ name }) {
return name.fr; //TODO multilang
},
selectCountry(value) {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit("getCities", value);
this.checkErrors();
},
remove() {
this.entity.selected.country = null;
this.checkErrors();
},
},
};
</script>

321
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
View File

@@ -1,166 +1,187 @@
<template>
<div
v-if="insideModal === false"
class="loading"
>
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t('loading') }}</span>
</div>
<div
v-if="errorMsg && errorMsg.length > 0"
class="alert alert-danger"
>
{{ errorMsg }}
</div>
<address-render-box :address="selectedAddress" />
<div class="row">
<div
v-if="showDateFrom"
class="col-lg-6 address-valid date-since"
>
<h3>{{ $t(getValidFromDateText) }}</h3>
<div class="input-group mb-3">
<span
class="input-group-text"
id="validFrom"
><i class="fa fa-fw fa-calendar" /></span>
<input
type="date"
class="form-control form-control-lg"
name="validFrom"
:placeholder="$t(getValidFromDateText)"
v-model="validFrom"
aria-describedby="validFrom"
>
</div>
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div
v-if="showDateTo"
class="col-lg-6 address-valid date-until"
>
<h3>{{ $t(getValidToDateText) }}</h3>
<div class="input-group mb-3">
<span
class="input-group-text"
id="validTo"
><i class="fa fa-fw fa-calendar" /></span>
<input
type="date"
class="form-control form-control-lg"
name="validTo"
:placeholder="$t(getValidToDateText)"
v-model="validTo"
aria-describedby="validTo"
>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
<address-render-box :address="selectedAddress" />
<div class="row">
<div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
<h3>{{ $t(getValidFromDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validFrom"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validFrom"
:placeholder="$t(getValidFromDateText)"
v-model="validFrom"
aria-describedby="validFrom"
/>
</div>
</div>
<div v-if="showDateTo" class="col-lg-6 address-valid date-until">
<h3>{{ $t(getValidToDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validTo"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validTo"
:placeholder="$t(getValidToDateText)"
v-model="validTo"
aria-describedby="validTo"
/>
</div>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</template>
<script>
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';
import { dateToISO, ISOToDate } from "ChillMainAssets/chill/js/date";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";
export default {
name: "DatePane",
components: {
AddressRenderBox,
ActionButtons
},
props: [
'context',
'options',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal'
],
computed: {
address() {
return this.entity.address;
},
validFrom: {
set(value) {
this.entity.selected.valid.from = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.from);
}
},
validTo: {
set(value) {
this.entity.selected.valid.to = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.to);
}
},
getValidFromDateText() {
return (this.context.target.name === 'household') ? 'move_date' : 'validFrom';
},
getValidToDateText() {
return 'validTo';
},
showDateFrom() {
return !this.context.edit && this.options.useDate.validFrom;
},
showDateTo() {
return !this.context.edit && this.options.useDate.validTo;
},
selectedAddress() {
let address = {};
name: "DatePane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {
address() {
return this.entity.address;
},
validFrom: {
set(value) {
this.entity.selected.valid.from = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.from);
},
},
validTo: {
set(value) {
this.entity.selected.valid.to = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.to);
},
},
getValidFromDateText() {
return this.context.target.name === "household"
? "move_date"
: "validFrom";
},
getValidToDateText() {
return "validTo";
},
showDateFrom() {
return !this.context.edit && this.options.useDate.validFrom;
},
showDateTo() {
return !this.context.edit && this.options.useDate.validTo;
},
selectedAddress() {
let address = {};
address['country'] = (this.entity.selected.country) ? this.entity.selected.country : null;
address['postcode'] = (this.entity.selected.postcode) ? this.entity.selected.postcode : null;
address["country"] = this.entity.selected.country
? this.entity.selected.country
: null;
address["postcode"] = this.entity.selected.postcode
? this.entity.selected.postcode
: null;
if (this.entity.selected.address) {
let number = (this.entity.selected.address.streetNumber) ? this.entity.selected.address.streetNumber : null;
let street = (this.entity.selected.address.street) ? this.entity.selected.address.street : null;
address['text'] = number + ', ' + street;
if (this.entity.selected.address) {
let number = this.entity.selected.address.streetNumber
? this.entity.selected.address.streetNumber
: null;
let street = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["text"] = number + ", " + street;
address['street'] = (this.entity.selected.address.street) ? this.entity.selected.address.street : null;
address['streetNumber'] = (this.entity.selected.address.streetNumber) ? this.entity.selected.address.streetNumber : null;
address['floor'] = (this.entity.selected.address.floor) ? this.entity.selected.address.floor : null;
address['corridor'] = (this.entity.selected.address.corridor) ? this.entity.selected.address.corridor : null;
address['steps'] = (this.entity.selected.address.steps) ? this.entity.selected.address.steps : null;
address['flat'] = (this.entity.selected.address.flat) ? this.entity.selected.address.flat : null;
address['buildingName'] = (this.entity.selected.address.buildingName) ? this.entity.selected.address.buildingName : null;
address['distribution'] = (this.entity.selected.address.distribution) ? this.entity.selected.address.distribution : null;
address['extra'] = (this.entity.selected.address.extra) ? this.entity.selected.address.extra : null;
}
address["street"] = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["streetNumber"] = this.entity.selected.address
.streetNumber
? this.entity.selected.address.streetNumber
: null;
address["floor"] = this.entity.selected.address.floor
? this.entity.selected.address.floor
: null;
address["corridor"] = this.entity.selected.address.corridor
? this.entity.selected.address.corridor
: null;
address["steps"] = this.entity.selected.address.steps
? this.entity.selected.address.steps
: null;
address["flat"] = this.entity.selected.address.flat
? this.entity.selected.address.flat
: null;
address["buildingName"] = this.entity.selected.address
.buildingName
? this.entity.selected.address.buildingName
: null;
address["distribution"] = this.entity.selected.address
.distribution
? this.entity.selected.address.distribution
: null;
address["extra"] = this.entity.selected.address.extra
? this.entity.selected.address.extra
: null;
}
if (this.entity.selected.valid) {
address['validFrom'] = (this.entity.selected.valid.from) ? dateToISO(this.entity.selected.valid.from) : null;
address['validTo'] = (this.entity.selected.valid.to) ? dateToISO(this.entity.selected.valid.to) : null;
}
if (this.entity.selected.valid) {
address["validFrom"] = this.entity.selected.valid.from
? dateToISO(this.entity.selected.valid.from)
: null;
address["validTo"] = this.entity.selected.valid.to
? dateToISO(this.entity.selected.valid.to)
: null;
}
return address;
}
}
}
return address;
},
},
};
</script>

381
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
View File

@@ -1,216 +1,197 @@
<template>
<div class="address-form">
<!-- Not display in modal -->
<div
v-if="insideModal === false"
class="loading"
>
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">Loading...</span>
</div>
<div class="address-form">
<!-- Not display in modal -->
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">Loading...</span>
</div>
<div
v-if="errors.length"
class="alert alert-warning"
>
<ul>
<li
v-for="(e, i) in errors"
:key="i"
<div v-if="errors.length" class="alert alert-warning">
<ul>
<li v-for="(e, i) in errors" :key="i">
{{ e }}
</li>
</ul>
</div>
<h4 class="h3">
{{ $t("select_an_address_title") }}
</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isConfidential"
v-model="isConfidential"
:value="valueConfidential"
/>
<label class="form-check-label" for="isConfidential">
{{ $t("isConfidential") }}
</label>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
:value="value"
/>
<label class="form-check-label" for="isNoAddress">
{{ $t("isNoAddress") }}
</label>
</div>
<country-selection
:context="context"
:entity="entity"
:flag="flag"
:check-errors="checkErrors"
@get-cities="$emit('getCities', selected.country)"
/>
<city-selection
:entity="entity"
:context="context"
:focus-on-address="focusOnAddress"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
@get-reference-addresses="
$emit('getReferenceAddresses', selected.city)
"
/>
<address-selection
v-if="!isNoAddress"
:entity="entity"
:context="context"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
/>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map :entity="entity" ref="addressMap" />
</div>
</div>
<address-more :entity="entity" :is-no-address="isNoAddress" />
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
{{ e }}
</li>
</ul>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</div>
<h4 class="h3">
{{ $t('select_an_address_title') }}
</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isConfidential"
v-model="isConfidential"
:value="valueConfidential"
>
<label
class="form-check-label"
for="isConfidential"
>
{{ $t('isConfidential') }}
</label>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
:value="value"
>
<label
class="form-check-label"
for="isNoAddress"
>
{{ $t('isNoAddress') }}
</label>
</div>
<country-selection
:context="context"
:entity="entity"
:flag="flag"
:check-errors="checkErrors"
@get-cities="$emit('getCities', selected.country)"
/>
<city-selection
:entity="entity"
:context="context"
:focus-on-address="focusOnAddress"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
@get-reference-addresses="$emit('getReferenceAddresses', selected.city)"
/>
<address-selection
v-if="!isNoAddress"
:entity="entity"
:context="context"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
/>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map
:entity="entity"
ref="addressMap"
/>
</div>
</div>
<address-more
:entity="entity"
:is-no-address="isNoAddress"
/>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</div>
</template>
<script>
import CountrySelection from './AddAddress/CountrySelection';
import CitySelection from './AddAddress/CitySelection';
import AddressSelection from './AddAddress/AddressSelection';
import AddressMap from './AddAddress/AddressMap';
import AddressMore from './AddAddress/AddressMore';
import ActionButtons from './ActionButtons.vue';
import CountrySelection from "./AddAddress/CountrySelection";
import CitySelection from "./AddAddress/CitySelection";
import AddressSelection from "./AddAddress/AddressSelection";
import AddressMap from "./AddAddress/AddressMap";
import AddressMore from "./AddAddress/AddressMore";
import ActionButtons from "./ActionButtons.vue";
export default {
name: "EditPane",
components: {
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore,
ActionButtons
},
props: [
'context',
'options',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal',
'errors',
'checkErrors',
],
emits: ['getCities', 'getReferenceAddresses'],
data() {
return {
value: false,
valueConfidential: false,
}
},
computed: {
address() {
return this.entity.address;
},
loaded() {
return this.entity.loaded;
},
selected() {
return this.entity.selected;
},
addressMap() {
return this.entity.addressMap;
},
isConfidential: {
set(value) {
this.entity.selected.confidential = value;
},
get() {
return this.entity.selected.confidential;
}
},
isNoAddress: {
set(value) {
console.log('isNoAddress value', value);
this.entity.selected.isNoAddress = value;
this.checkErrors();
},
get() {
return this.entity.selected.isNoAddress;
}
},
},
methods: {
focusOnAddress() {
const addressSelector = document.getElementById('addressSelector');
if (addressSelector !== null) {
addressSelector.focus();
}
},
updateMapCenter(point) {
console.log('point', point);
this.addressMap.center[0] = point.coordinates[0];
this.addressMap.center[1] = point.coordinates[1];
this.$refs.addressMap.update(); // cast child methods
}
}
name: "EditPane",
components: {
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
"errors",
"checkErrors",
],
emits: ["getCities", "getReferenceAddresses"],
data() {
return {
value: false,
valueConfidential: false,
};
},
computed: {
address() {
return this.entity.address;
},
loaded() {
return this.entity.loaded;
},
selected() {
return this.entity.selected;
},
addressMap() {
return this.entity.addressMap;
},
isConfidential: {
set(value) {
this.entity.selected.confidential = value;
},
get() {
return this.entity.selected.confidential;
},
},
isNoAddress: {
set(value) {
console.log("isNoAddress value", value);
this.entity.selected.isNoAddress = value;
this.checkErrors();
},
get() {
return this.entity.selected.isNoAddress;
},
},
},
methods: {
focusOnAddress() {
const addressSelector = document.getElementById("addressSelector");
if (addressSelector !== null) {
addressSelector.focus();
}
},
updateMapCenter(point) {
console.log("point", point);
this.addressMap.center[0] = point.coordinates[0];
this.addressMap.center[1] = point.coordinates[1];
this.$refs.addressMap.update(); // cast child methods
},
},
};
</script>
<style lang="scss">
div.address-form {
div#address_map {
height: 400px;
width: 100%;
z-index: 1;
}
div#address_map {
height: 400px;
width: 100%;
z-index: 1;
}
}
</style>

364
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
View File

@@ -1,199 +1,213 @@
<template>
<div
v-if="!onlyButton"
class="mt-4 flex-grow-1"
>
<div class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t('loading') }}</span>
</div>
<div v-if="!onlyButton" class="mt-4 flex-grow-1">
<div class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div
v-if="errorMsg && errorMsg.length > 0"
class="alert alert-danger"
>
{{ errorMsg }}
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<div
v-if="flag.success"
class="alert alert-success"
>
{{ $t(getSuccessText) }}
<span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
</div>
<div v-if="flag.success" class="alert alert-success">
{{ $t(getSuccessText) }}
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
</div>
<div
v-if="(!this.context.edit && !this.flag.success && this.context.target.name !== 'household')"
class="mt-5"
>
<div class="no-address-yet">
<i
class="fa fa-map-marker"
aria-hidden="true"
<div
v-if="
!this.context.edit &&
!this.flag.success &&
this.context.target.name !== 'household'
"
class="mt-5"
>
<div class="no-address-yet">
<i class="fa fa-map-marker" aria-hidden="true" />
<p class="chill-no-data-statement">
{{ $t("not_yet_address") }}
</p>
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<address-render-box
:address="address"
:is-multiline="false"
:use-date-pane="useDatePane"
/>
<p class="chill-no-data-statement">
{{ $t('not_yet_address') }}
</p>
<div
v-if="this.context.target.name === 'household' || this.context.edit"
>
<action-buttons :options="this.options" :defaultz="this.defaultz">
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<div v-if="onlyButton">
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<address-render-box
:address="address"
:is-multiline="false"
:use-date-pane="useDatePane"
/>
<div v-if="this.context.target.name === 'household' || this.context.edit">
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<div v-if="onlyButton">
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
</action-buttons>
</div>
</template>
<script>
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";
export default {
name: 'ShowPane',
components: {
AddressRenderBox,
ActionButtons
},
props: [
'context',
'defaultz',
'options',
'flag',
'entity',
'errorMsg',
'useDatePane'
],
emits: ['openEditPane'],
mounted() {
//console.log('context', this.context)
},
computed: {
address() {
return this.entity.address;
},
displayTextButton() {
return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
this.options.button.displayText : this.defaultz.button.displayText;
},
getClassButton() {
let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
`${this.options.button.size} ` : '';
return `${size}${type}`;
},
getTextButton() {
if ( typeof this.options.button.text !== 'undefined'
&& ( this.options.button.text.edit !== null
|| this.options.button.text.create !== null
)) {
return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
}
return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
},
getSuccessText() {
return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
},
onlyButton() {
return (typeof this.options.onlyButton !== 'undefined') ?
this.options.onlyButton : this.defaultz.onlyButton;
},
forceRedirect() {
return (!(this.context.backUrl === null || typeof this.context.backUrl === 'undefined'));
},
// showMessageWhenNoAddress() {
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
// }
// return !this.context.edit && !this.address.id && this.options.stickyActions;
// }
}
name: "ShowPane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"defaultz",
"options",
"flag",
"entity",
"errorMsg",
"useDatePane",
],
emits: ["openEditPane"],
mounted() {
//console.log('context', this.context)
},
computed: {
address() {
return this.entity.address;
},
displayTextButton() {
return typeof this.options.button !== "undefined" &&
typeof this.options.button.displayText !== "undefined"
? this.options.button.displayText
: this.defaultz.button.displayText;
},
getClassButton() {
let type = this.context.edit
? this.defaultz.button.type.edit
: this.defaultz.button.type.create;
let size =
typeof this.options.button !== "undefined" &&
this.options.button.size !== null
? `${this.options.button.size} `
: "";
return `${size}${type}`;
},
getTextButton() {
if (
typeof this.options.button.text !== "undefined" &&
(this.options.button.text.edit !== null ||
this.options.button.text.create !== null)
) {
return this.context.edit
? this.options.button.text.edit
: this.options.button.text.create;
}
return this.context.edit
? this.defaultz.button.text.edit
: this.defaultz.button.text.create;
},
getSuccessText() {
return this.context.edit
? "address_edit_success"
: "address_new_success";
},
onlyButton() {
return typeof this.options.onlyButton !== "undefined"
? this.options.onlyButton
: this.defaultz.onlyButton;
},
forceRedirect() {
return !(
this.context.backUrl === null ||
typeof this.context.backUrl === "undefined"
);
},
// showMessageWhenNoAddress() {
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
// }
// return !this.context.edit && !this.address.id && this.options.stickyActions;
// }
},
};
</script>
<style lang="scss">
.address-container {
display:flex;
justify-content:flex-end;
border-radius: 5px;
display: flex;
justify-content: flex-end;
border-radius: 5px;
}
.no-address-yet {
text-align: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding:1.5rem;
margin-bottom:2rem;
i {
font-size:2rem;
margin-bottom:2rem;
}
.add-address-btn {
display: block
}
text-align: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 1.5rem;
margin-bottom: 2rem;
i {
font-size: 2rem;
margin-bottom: 2rem;
}
.add-address-btn {
display: block;
}
}
</style>

176
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
View File

@@ -1,100 +1,94 @@
<template>
<div
v-if="insideModal === false"
class="loading"
>
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t('loading') }}</span>
</div>
<div
v-if="errorMsg && errorMsg.length > 0"
class="alert alert-danger"
>
{{ errorMsg }}
</div>
<h4 class="h3">
{{ $t('address_suggestions') }}
</h4>
<div class="flex-table AddressSuggestionList">
<div
v-for="(a, i) in context.suggestions"
class="item-bloc"
:key="`suggestions-${i}`"
>
<div class="float-button bottom">
<div class="box">
<div class="action">
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
<ul class="record_actions">
<li>
<button
class="btn btn-sm btn-choose"
@click="this.pickAddress(a)"
>
{{ $t('use_this_address') }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker" />
<address-render-box :address="a" />
</li>
</ul>
</div>
</div>
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<h4 class="h3">
{{ $t("address_suggestions") }}
</h4>
<div class="flex-table AddressSuggestionList">
<div
v-for="(a, i) in context.suggestions"
class="item-bloc"
:key="`suggestions-${i}`"
>
<div class="float-button bottom">
<div class="box">
<div class="action">
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
<ul class="record_actions">
<li>
<button
class="btn btn-sm btn-choose"
@click="this.pickAddress(a)"
>
{{ $t("use_this_address") }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker" />
<address-render-box :address="a" />
</li>
</ul>
</div>
</div>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</template>
<script>
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";
export default {
name: "SuggestPane",
components: {
AddressRenderBox,
ActionButtons
},
props: [
'context',
'options',
'defaultz',
'flag',
'entity',
'errorMsg',
'insideModal',
],
computed: {},
methods: {
pickAddress(address) {
console.log('pickAddress in suggest pane', address);
this.$emit('pickAddress', address);
},
}
}
name: "SuggestPane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {},
methods: {
pickAddress(address) {
console.log("pickAddress in suggest pane", address);
this.$emit("pickAddress", address);
},
},
};
</script>

98
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/i18n.js
View File

@@ -1,56 +1,56 @@
import { multiSelectMessages } from 'ChillMainAssets/vuejs/_js/i18n'
import { multiSelectMessages } from "ChillMainAssets/vuejs/_js/i18n";
const addressMessages = {
fr: {
add_an_address_title: 'Créer une adresse',
edit_an_address_title: 'Modifier une adresse',
create_a_new_address: 'Créer une nouvelle adresse',
edit_address: 'Modifier l\'adresse',
select_an_address_title: 'Sélectionner une adresse',
fill_an_address: 'Compléter l\'adresse',
select_country: 'Choisir le pays',
country: 'Pays',
select_city: 'Choisir une localité',
city: 'Localité',
other_city: 'Autre localité',
select_address: 'Choisir une adresse',
address: 'Adresse',
other_address: 'Autre adresse',
create_address: 'Adresse inconnue. Cliquez ici pour créer une nouvelle adresse',
isNoAddress: 'Pas d\'adresse complète',
isConfidential: 'Adresse confidentielle',
street: 'Nom de rue',
streetNumber: 'Numéro',
floor: 'Étage',
corridor: 'Couloir',
steps: 'Escalier',
flat: 'Appartement',
buildingName: 'Résidence',
extra: 'Complément d\'adresse',
distribution: 'Cedex',
create_postal_code: 'Localité inconnue. Cliquez ici pour créer une nouvelle localité',
postalCode_name: 'Nom',
postalCode_code: 'Code postal',
date: "Date de la nouvelle adresse",
validFrom: "L'adresse est valable à partir du",
validTo: "L'adresse est valable jusqu'au",
back_to_the_list: 'Retour à la liste',
loading: 'chargement en cours...',
address_suggestions: "Suggestion d'adresses",
address_new_success: 'La nouvelle adresse est enregistrée.',
address_edit_success: 'L\'adresse a été mise à jour.',
wait_redirection: " La page est redirigée.",
not_yet_address: "Il n'y a pas encore d'adresse. Cliquez sur '+ Créer une adresse'",
use_this_address: "Utiliser cette adresse",
fr: {
add_an_address_title: "Créer une adresse",
edit_an_address_title: "Modifier une adresse",
create_a_new_address: "Créer une nouvelle adresse",
edit_address: "Modifier l'adresse",
select_an_address_title: "Sélectionner une adresse",
fill_an_address: "Compléter l'adresse",
select_country: "Choisir le pays",
country: "Pays",
select_city: "Choisir une localité",
city: "Localité",
other_city: "Autre localité",
select_address: "Choisir une adresse",
address: "Adresse",
other_address: "Autre adresse",
create_address:
"Adresse inconnue. Cliquez ici pour créer une nouvelle adresse",
isNoAddress: "Pas d'adresse complète",
isConfidential: "Adresse confidentielle",
street: "Nom de rue",
streetNumber: "Numéro",
floor: "Étage",
corridor: "Couloir",
steps: "Escalier",
flat: "Appartement",
buildingName: "Résidence",
extra: "Complément d'adresse",
distribution: "Cedex",
create_postal_code:
"Localité inconnue. Cliquez ici pour créer une nouvelle localité",
postalCode_name: "Nom",
postalCode_code: "Code postal",
date: "Date de la nouvelle adresse",
validFrom: "L'adresse est valable à partir du",
validTo: "L'adresse est valable jusqu'au",
back_to_the_list: "Retour à la liste",
loading: "chargement en cours...",
address_suggestions: "Suggestion d'adresses",
address_new_success: "La nouvelle adresse est enregistrée.",
address_edit_success: "L'adresse a été mise à jour.",
wait_redirection: " La page est redirigée.",
not_yet_address:
"Il n'y a pas encore d'adresse. Cliquez sur '+ Créer une adresse'",
use_this_address: "Utiliser cette adresse",
// household specific
move_date: 'Date du déménagement',
}
// household specific
move_date: "Date du déménagement",
},
};
Object.assign(addressMessages.fr, multiSelectMessages.fr);
export {
addressMessages
};
export { addressMessages };

111
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
View File

@@ -1,68 +1,67 @@
import { createApp } from 'vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
import { addressMessages } from './i18n';
import App from './App.vue';
import { createApp } from "vue";
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
import { addressMessages } from "./i18n";
import App from "./App.vue";
const i18n = _createI18n( addressMessages );
const i18n = _createI18n(addressMessages);
let containers = document.querySelectorAll('.address-container');
let containers = document.querySelectorAll(".address-container");
containers.forEach((container) => {
const app = createApp({
template: `<app v-bind:addAddress="this.addAddress" ></app>`,
data() {
return {
addAddress: {
context: {
target: {
name: container.dataset.targetName,
id: parseInt(container.dataset.targetId),
},
edit: container.dataset.mode === "edit", //boolean
addressId: parseInt(container.dataset.addressId) || null,
backUrl: container.dataset.backUrl || null,
defaults: JSON.parse(container.dataset.addressDefaults),
},
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: container.dataset.buttonText || null,
edit: container.dataset.buttonText || null,
},
size: container.dataset.buttonSize || null,
displayText: container.dataset.buttonDisplayText !== "false", //boolean, default: true
},
const app = createApp({
template: `<app v-bind:addAddress="this.addAddress" ></app>`,
data() {
return {
addAddress: {
context: {
target: {
name: container.dataset.targetName,
id: parseInt(container.dataset.targetId)
},
edit: container.dataset.mode === 'edit', //boolean
addressId: parseInt(container.dataset.addressId) || null,
backUrl: container.dataset.backUrl || null,
defaults: JSON.parse(container.dataset.addressDefaults)
},
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: container.dataset.buttonText || null,
edit: container.dataset.buttonText || null
},
size: container.dataset.buttonSize || null,
displayText: container.dataset.buttonDisplayText !== 'false' //boolean, default: true
},
/// Modal title text if create or edit address (trans chain, see i18n)
title: {
create: container.dataset.modalTitle || null,
edit: container.dataset.modalTitle || null,
},
/// Modal title text if create or edit address (trans chain, see i18n)
title: {
create: container.dataset.modalTitle || null,
edit: container.dataset.modalTitle || null
},
/// Display panes in Modal for step123
openPanesInModal: container.dataset.openPanesInModal !== "false", //boolean, default: true
/// Display panes in Modal for step123
openPanesInModal: container.dataset.openPanesInModal !== 'false', //boolean, default: true
/// Display actions buttons of panes in a sticky-form-button navbar
stickyActions: container.dataset.stickyActions === "true", //boolean, default: false
/// Display actions buttons of panes in a sticky-form-button navbar
stickyActions: container.dataset.stickyActions === 'true', //boolean, default: false
/// Use Date fields
useDate: {
validFrom: container.dataset.useValidFrom === "true", //boolean, default: false
validTo: container.dataset.useValidTo === "true", //boolean, default: false
},
/// Use Date fields
useDate: {
validFrom: container.dataset.useValidFrom === 'true', //boolean, default: false
validTo: container.dataset.useValidTo === 'true' //boolean, default: false
},
/// Don't display show renderbox Address: showPane display only a button
onlyButton: container.dataset.onlyButton === 'true' //boolean, default: false
}
}
}
}
})
/// Don't display show renderbox Address: showPane display only a button
onlyButton: container.dataset.onlyButton === "true", //boolean, default: false
},
},
};
},
})
.use(i18n)
.component('app', App)
.component("app", App)
.mount(container);
//console.log('container dataset', container.dataset);
//console.log('container dataset', container.dataset);
});

169
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/mod_input_address_index.js
View File

@@ -1,93 +1,96 @@
import {createApp} from 'vue';
import {_createI18n} from 'ChillMainAssets/vuejs/_js/i18n';
import {addressMessages} from './i18n';
import App from './App.vue';
import { createApp } from "vue";
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
import { addressMessages } from "./i18n";
import App from "./App.vue";
const i18n = _createI18n(addressMessages);
const addAddressInput = (inputs) => {
console.log(inputs)
inputs.forEach(el => {
let
addressId = el.value,
uniqid = el.dataset.inputAddress,
container = el.parentNode.querySelector('div[data-input-address-container="' + uniqid + '"]'),
isEdit = addressId !== '',
addressIdInt = addressId !== '' ? parseInt(addressId) : null
;
if (container === null) {
throw Error("no container");
}
/* exported app */
const app = createApp({
template: `<app v-bind:addAddress="this.addAddress" @address-created="associateToInput"></app>`,
data() {
return {
addAddress: {
context: {
// for legacy ? can be remove ?
target: {
name: 'input-address',
id: addressIdInt,
},
edit: isEdit,
addressId: addressIdInt,
defaults: window.addaddress,
},
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: el.dataset.buttonTextCreate || null,
edit: el.dataset.buttonTextUpdate || null,
},
size: null,
displayText: true
},
/// Modal title text if create or edit address (trans chain, see i18n)
title: {
create: null,
edit: null,
},
/// Display panes in Modal for step123
openPanesInModal: true,
/// Display actions buttons of panes in a sticky-form-button navbar
stickyActions: false,
showMessageWhenNoAddress: true,
/// Use Date fields
useDate: {
validFrom: el.dataset.useValidFrom === '1' || false, //boolean, default: false
validTo: el.dataset.useValidTo === '1' || false, //boolean, default: false
},
/// Don't display show renderbox Address: showPane display only a button
onlyButton: false,
}
}
}
console.log(inputs);
inputs.forEach((el) => {
let addressId = el.value,
uniqid = el.dataset.inputAddress,
container = el.parentNode.querySelector(
'div[data-input-address-container="' + uniqid + '"]',
),
isEdit = addressId !== "",
addressIdInt = addressId !== "" ? parseInt(addressId) : null;
if (container === null) {
throw Error("no container");
}
/* exported app */
const app = createApp({
template: `<app v-bind:addAddress="this.addAddress" @address-created="associateToInput"></app>`,
data() {
return {
addAddress: {
context: {
// for legacy ? can be remove ?
target: {
name: "input-address",
id: addressIdInt,
},
edit: isEdit,
addressId: addressIdInt,
defaults: window.addaddress,
},
methods: {
associateToInput(payload) {
el.value = payload.addressId;
}
}
})
.use(i18n)
.component('app', App)
.mount(container);
});
options: {
/// Options override default.
/// null value take default component value defined in AddAddress data()
button: {
text: {
create: el.dataset.buttonTextCreate || null,
edit: el.dataset.buttonTextUpdate || null,
},
size: null,
displayText: true,
},
/// Modal title text if create or edit address (trans chain, see i18n)
title: {
create: null,
edit: null,
},
/// Display panes in Modal for step123
openPanesInModal: true,
/// Display actions buttons of panes in a sticky-form-button navbar
stickyActions: false,
showMessageWhenNoAddress: true,
/// Use Date fields
useDate: {
validFrom: el.dataset.useValidFrom === "1" || false, //boolean, default: false
validTo: el.dataset.useValidTo === "1" || false, //boolean, default: false
},
/// Don't display show renderbox Address: showPane display only a button
onlyButton: false,
},
},
};
},
methods: {
associateToInput(payload) {
el.value = payload.addressId;
},
},
})
.use(i18n)
.component("app", App)
.mount(container);
});
};
document.addEventListener('DOMContentLoaded', (_e) =>
addAddressInput(document.querySelectorAll('input[type="hidden"][data-input-address]'))
document.addEventListener("DOMContentLoaded", (_e) =>
addAddressInput(
document.querySelectorAll('input[type="hidden"][data-input-address]'),
),
);
window.addEventListener('collection-add-entry', (e) =>
addAddressInput(e.detail.entry.querySelectorAll('input[type="hidden"][data-input-address]'))
window.addEventListener("collection-add-entry", (e) =>
addAddressInput(
e.detail.entry.querySelectorAll('input[type="hidden"][data-input-address]'),
),
);

16
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store.js
View File

@@ -1,14 +1,14 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import "es6-promise/auto";
import { createStore } from "vuex";
const debug = process.env.NODE_ENV !== 'production';
const debug = process.env.NODE_ENV !== "production";
const store = createStore({
strict: debug,
state: {},
getters: {},
mutations: {},
actions: {},
strict: debug,
state: {},
getters: {},
mutations: {},
actions: {},
});
export { store };

287
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
View File

@@ -1,36 +1,36 @@
<template>
<h2>{{ $t('main_title') }}</h2>
<h2>{{ $t("main_title") }}</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyCustoms'}"
@click="selectTab('MyCustoms')"
>
<i class="fa fa-dashboard" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyNotifications'}"
@click="selectTab('MyNotifications')"
>
{{ $t('my_notifications.tab') }}
<tab-counter :count="state.notifications.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyAccompanyingCourses'}"
@click="selectTab('MyAccompanyingCourses')"
>
{{ $t('my_accompanying_courses.tab') }}
</a>
</li>
<!-- <li class="nav-item">
<ul class="nav nav-tabs">
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyCustoms' }"
@click="selectTab('MyCustoms')"
>
<i class="fa fa-dashboard" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyNotifications' }"
@click="selectTab('MyNotifications')"
>
{{ $t("my_notifications.tab") }}
<tab-counter :count="state.notifications.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyAccompanyingCourses' }"
@click="selectTab('MyAccompanyingCourses')"
>
{{ $t("my_accompanying_courses.tab") }}
</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link"
:class="{'active': activeTab === 'MyWorks'}"
@click="selectTab('MyWorks')">
@@ -38,135 +38,122 @@
<tab-counter :count="state.works.count"></tab-counter>
</a>
</li> -->
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyEvaluations'}"
@click="selectTab('MyEvaluations')"
>
{{ $t('my_evaluations.tab') }}
<tab-counter :count="state.evaluations.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyTasks'}"
@click="selectTab('MyTasks')"
>
{{ $t('my_tasks.tab') }}
<tab-counter :count="state.tasks.warning.count + state.tasks.alert.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{'active': activeTab === 'MyWorkflows'}"
@click="selectTab('MyWorkflows')"
>
{{ $t('my_workflows.tab') }}
<tab-counter :count="state.workflows.count + state.workflowsCc.count" />
</a>
</li>
<li
class="nav-item loading ms-auto py-2"
v-if="loading"
>
<i
class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
:title="$t('loading')"
/>
</li>
</ul>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyEvaluations' }"
@click="selectTab('MyEvaluations')"
>
{{ $t("my_evaluations.tab") }}
<tab-counter :count="state.evaluations.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyTasks' }"
@click="selectTab('MyTasks')"
>
{{ $t("my_tasks.tab") }}
<tab-counter
:count="state.tasks.warning.count + state.tasks.alert.count"
/>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyWorkflows' }"
@click="selectTab('MyWorkflows')"
>
{{ $t("my_workflows.tab") }}
<tab-counter
:count="state.workflows.count + state.workflowsCc.count"
/>
</a>
</li>
<li class="nav-item loading ms-auto py-2" v-if="loading">
<i
class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
:title="$t('loading')"
/>
</li>
</ul>
<div class="my-4">
<my-customs
v-if="activeTab === 'MyCustoms'"
/>
<my-works
v-else-if="activeTab === 'MyWorks'"
/>
<my-evaluations
v-else-if="activeTab === 'MyEvaluations'"
/>
<my-tasks
v-else-if="activeTab === 'MyTasks'"
/>
<my-accompanying-courses
v-else-if="activeTab === 'MyAccompanyingCourses'"
/>
<my-notifications
v-else-if="activeTab === 'MyNotifications'"
/>
<my-workflows
v-else-if="activeTab === 'MyWorkflows'"
/>
</div>
<div class="my-4">
<my-customs v-if="activeTab === 'MyCustoms'" />
<my-works v-else-if="activeTab === 'MyWorks'" />
<my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
<my-tasks v-else-if="activeTab === 'MyTasks'" />
<my-accompanying-courses
v-else-if="activeTab === 'MyAccompanyingCourses'"
/>
<my-notifications v-else-if="activeTab === 'MyNotifications'" />
<my-workflows v-else-if="activeTab === 'MyWorkflows'" />
</div>
</template>
<script>
import MyCustoms from './MyCustoms';
import MyWorks from './MyWorks';
import MyEvaluations from './MyEvaluations';
import MyTasks from './MyTasks';
import MyAccompanyingCourses from './MyAccompanyingCourses';
import MyNotifications from './MyNotifications';
import MyWorkflows from './MyWorkflows.vue';
import TabCounter from './TabCounter';
import MyCustoms from "./MyCustoms";
import MyWorks from "./MyWorks";
import MyEvaluations from "./MyEvaluations";
import MyTasks from "./MyTasks";
import MyAccompanyingCourses from "./MyAccompanyingCourses";
import MyNotifications from "./MyNotifications";
import MyWorkflows from "./MyWorkflows.vue";
import TabCounter from "./TabCounter";
import { mapState } from "vuex";
export default {
name: "App",
components: {
MyCustoms,
MyWorks,
MyEvaluations,
MyTasks,
MyWorkflows,
MyAccompanyingCourses,
MyNotifications,
TabCounter,
},
data() {
return {
activeTab: 'MyCustoms',
}
},
computed: {
...mapState([
'loading',
]),
// just to see all in devtool :
...mapState({
state: (state) => state,
}),
},
methods: {
selectTab(tab) {
if (tab !== 'MyCustoms') {
this.$store.dispatch('getByTab', { tab: tab });
}
this.activeTab = tab;
console.log(this.activeTab)
}
},
mounted() {
for (const m of [
'MyNotifications',
'MyAccompanyingCourses',
// 'MyWorks',
'MyEvaluations',
'MyTasks',
'MyWorkflows',
]) {
this.$store.dispatch('getByTab', { tab: m, param: "countOnly=1" });
}
}
}
name: "App",
components: {
MyCustoms,
MyWorks,
MyEvaluations,
MyTasks,
MyWorkflows,
MyAccompanyingCourses,
MyNotifications,
TabCounter,
},
data() {
return {
activeTab: "MyCustoms",
};
},
computed: {
...mapState(["loading"]),
// just to see all in devtool :
...mapState({
state: (state) => state,
}),
},
methods: {
selectTab(tab) {
if (tab !== "MyCustoms") {
this.$store.dispatch("getByTab", { tab: tab });
}
this.activeTab = tab;
console.log(this.activeTab);
},
},
mounted() {
for (const m of [
"MyNotifications",
"MyAccompanyingCourses",
// 'MyWorks',
"MyEvaluations",
"MyTasks",
"MyWorkflows",
]) {
this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
}
},
};
</script>
<style scoped>
a.nav-link {
cursor: pointer;
cursor: pointer;
}
</style>

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
View File

@@ -1,24 +1,25 @@
<template>
<div>
<h1>{{ $t('widget.news.title') }}</h1>
<h1>{{ $t("widget.news.title") }}</h1>
<ul v-if="newsItems.length > 0" class="scrollable">
<NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
</ul>
<p v-if="newsItems.length === 0 " class="chill-no-data-statement">{{ $t('widget.news.none') }}</p>
<p v-if="newsItems.length === 0" class="chill-no-data-statement">
{{ $t("widget.news.none") }}
</p>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { fetchResults } from '../../../lib/api/apiMethods';
import { NewsItemType } from '../../../types';
import NewsItem from './NewsItem.vue';
import { onMounted, ref } from "vue";
import { fetchResults } from "../../../lib/api/apiMethods";
import { NewsItemType } from "../../../types";
import NewsItem from "./NewsItem.vue";
const newsItems = ref<NewsItemType[]>([])
const newsItems = ref<NewsItemType[]>([]);
onMounted(() => {
fetchResults<NewsItemType>('/api/1.0/main/news/current.json')
fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
.then((news): Promise<void> => {
// console.log('news articles', response.results)
newsItems.value = news;
@@ -26,10 +27,9 @@ onMounted(() => {
return Promise.resolve();
})
.catch((error: string) => {
console.error('Error fetching news items', error);
})
})
console.error("Error fetching news items", error);
});
});
</script>
<style scoped>
@@ -41,6 +41,4 @@ ul {
h1 {
text-align: center;
}
</style>

94
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
View File

@@ -1,11 +1,18 @@
<template>
<li>
<h2>{{ props.item.title }}</h2>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{
$d(newsItemStartDate(), "text")
}}</time>
<div class="content" v-if="shouldTruncate(item.content)">
<div v-html="prepareContent(item.content)"></div>
<div class="float-end">
<button class="btn btn-sm btn-show read-more" @click="() => openModal(item)">{{ $t('widget.news.readMore') }}</button>
<button
class="btn btn-sm btn-show read-more"
@click="() => openModal(item)"
>
{{ $t("widget.news.readMore") }}
</button>
</div>
</div>
<div class="content" v-else>
@@ -18,7 +25,11 @@
</template>
<template #body>
<p class="news-date">
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{ $d(newsItemStartDate(), 'text') }}</time>
<time
class="createdBy"
datetime="{{item.startDate.datetime}}"
>{{ $d(newsItemStartDate(), "text") }}</time
>
</p>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</template>
@@ -28,18 +39,17 @@
<script setup lang="ts">
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { marked } from 'marked';
import DOMPurify from 'dompurify';
import { marked } from "marked";
import DOMPurify from "dompurify";
import { NewsItemType } from "../../../types";
import type { PropType } from 'vue'
import type { PropType } from "vue";
import { ref } from "vue";
import {ISOToDatetime} from '../../../chill/js/date';
import { ISOToDatetime } from "../../../chill/js/date";
const props = defineProps({
item: {
type: Object as PropType<NewsItemType>,
required: true
required: true,
},
maxLength: {
type: Number,
@@ -49,9 +59,9 @@ const props = defineProps({
maxLines: {
type: Number,
required: false,
default: 3
}
})
default: 3,
},
});
const selectedArticle = ref<NewsItemType | null>(null);
const showModal = ref(false);
@@ -67,7 +77,7 @@ const closeModal = () => {
};
const shouldTruncate = (content: string): boolean => {
const lines = content.split('\n');
const lines = content.split("\n");
// Check if any line exceeds the maximum length
const tooManyLines = lines.length > props.maxLines;
@@ -79,67 +89,74 @@ const truncateContent = (content: string): string => {
let truncatedContent = content.slice(0, props.maxLength);
let linkDepth = 0;
let linkStartIndex = -1;
const lines = content.split('\n');
const lines = content.split("\n");
// Truncate if amount of lines are too many
if (lines.length > props.maxLines && content.length < props.maxLength) {
const truncatedContent = lines.slice(0, props.maxLines).join('\n').trim();
return truncatedContent + '...';
const truncatedContent = lines
.slice(0, props.maxLines)
.join("\n")
.trim();
return truncatedContent + "...";
}
for (let i = 0; i < truncatedContent.length; i++) {
const char = truncatedContent[i];
if (char === '[') {
if (char === "[") {
linkDepth++;
if (linkDepth === 1) {
linkStartIndex = i;
}
} else if (char === ']') {
} else if (char === "]") {
linkDepth = Math.max(0, linkDepth - 1);
} else if (char === '(' && linkDepth === 0) {
} else if (char === "(" && linkDepth === 0) {
truncatedContent = truncatedContent.slice(0, i);
break;
}
}
while (linkDepth > 0) {
truncatedContent += ']';
truncatedContent += "]";
linkDepth--;
}
// If a link was found, append the URL inside the parentheses
if (linkStartIndex !== -1) {
const linkEndIndex = content.indexOf(')', linkStartIndex);
const linkEndIndex = content.indexOf(")", linkStartIndex);
const url = content.slice(linkStartIndex + 1, linkEndIndex);
truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
truncatedContent =
truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
truncatedContent += '...';
truncatedContent += "...";
return truncatedContent;
};
const preprocess = (markdown: string): string => {
return markdown;
}
};
const postprocess = (html: string): string => {
DOMPurify.addHook('afterSanitizeAttributes', (node: any) => {
if ('target' in node) {
node.setAttribute('target', '_blank');
node.setAttribute('rel', 'noopener noreferrer');
DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
if ("target" in node) {
node.setAttribute("target", "_blank");
node.setAttribute("rel", "noopener noreferrer");
}
if (!node.hasAttribute('target') && (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
node.setAttribute('xlink:show', 'new');
if (
!node.hasAttribute("target") &&
(node.hasAttribute("xlink:href") || node.hasAttribute("href"))
) {
node.setAttribute("xlink:show", "new");
}
})
});
return DOMPurify.sanitize(html);
}
};
const convertMarkdownToHtml = (markdown: string): string => {
marked.use({'hooks': {postprocess, preprocess}, 'async': false});
marked.use({ hooks: { postprocess, preprocess }, async: false });
const rawHtml = marked(markdown) as string;
return rawHtml;
};
@@ -149,18 +166,16 @@ const prepareContent = (content: string): string => {
return truncateContent(htmlContent);
};
const newsItemStartDate = (): null|Date => {
const newsItemStartDate = (): null | Date => {
return ISOToDatetime(props.item?.startDate.datetime);
}
};
</script>
<style scoped>
li {
margin-bottom: 20px;
overflow: hidden;
padding: .8rem;
padding: 0.8rem;
background-color: #fbfbfb;
border-radius: 4px;
}
@@ -172,12 +187,11 @@ h2 {
.content {
overflow: hidden;
font-size: .9rem;
font-size: 0.9rem;
position: relative;
}
.news-title {
font-weight: bold;
}
</style>

198
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
View File

@@ -1,116 +1,110 @@
<template>
<div class="alert alert-light">
{{ $t('my_accompanying_courses.description') }}
</div>
<span
v-if="noResults"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('opening_date') }}
</th>
<th scope="col">
{{ $t('social_issues') }}
</th>
<th scope="col">
{{ $t('concerned_persons') }}
</th>
<th scope="col" />
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(c, i) in accompanyingCourses.results"
:key="`course-${i}`"
>
<td>{{ $d(c.openingDate.datetime, 'short') }}</td>
<td>
<span
v-for="(i, index) in c.socialIssues"
:key="index"
class="chill-entity entity-social-issue"
>
<span class="badge bg-chill-l-gray text-dark">
{{ i.title.fr }}
</span>
</span>
</td>
<td>
<span
v-for="p in c.participations"
class="me-1"
:key="p.person.id"
>
<on-the-fly
:type="p.person.type"
:id="p.person.id"
:button-text="p.person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<span
v-if="c.emergency"
class="badge rounded-pill bg-danger me-1"
>{{ $t('emergency') }}</span>
<span
v-if="c.confidential"
class="badge rounded-pill bg-danger"
>{{ $t('confidential') }}</span>
</td>
<td>
<a
class="btn btn-sm btn-show"
:href="getUrl(c)"
>
{{ $t('show_entity', { entity: $t('the_course') }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_accompanying_courses.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("opening_date") }}
</th>
<th scope="col">
{{ $t("social_issues") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(c, i) in accompanyingCourses.results"
:key="`course-${i}`"
>
<td>{{ $d(c.openingDate.datetime, "short") }}</td>
<td>
<span
v-for="(i, index) in c.socialIssues"
:key="index"
class="chill-entity entity-social-issue"
>
<span class="badge bg-chill-l-gray text-dark">
{{ i.title.fr }}
</span>
</span>
</td>
<td>
<span
v-for="p in c.participations"
class="me-1"
:key="p.person.id"
>
<on-the-fly
:type="p.person.type"
:id="p.person.id"
:button-text="p.person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<span
v-if="c.emergency"
class="badge rounded-pill bg-danger me-1"
>{{ $t("emergency") }}</span
>
<span
v-if="c.confidential"
class="badge rounded-pill bg-danger"
>{{ $t("confidential") }}</span
>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(c)">
{{ $t("show_entity", { entity: $t("the_course") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyAccompanyingCourses",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState([
'accompanyingCourses',
]),
...mapGetters([
'isAccompanyingCoursesLoaded',
]),
noResults() {
if (!this.isAccompanyingCoursesLoaded) {
return false;
} else {
return this.accompanyingCourses.count === 0;
}
},
},
methods: {
getUrl(c) {
return `/fr/parcours/${c.id}`
}
}
}
name: "MyAccompanyingCourses",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["accompanyingCourses"]),
...mapGetters(["isAccompanyingCoursesLoaded"]),
noResults() {
if (!this.isAccompanyingCoursesLoaded) {
return false;
} else {
return this.accompanyingCourses.count === 0;
}
},
},
methods: {
getUrl(c) {
return `/fr/parcours/${c.id}`;
},
},
};
</script>
<style scoped>
span.badge.rounded-pill.bg-danger {
text-transform: uppercase;
text-transform: uppercase;
}
</style>

272
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
View File

@@ -1,158 +1,158 @@
<template>
<span
v-if="noResults"
class="chill-no-data-statement"
>{{ $t('no_dashboard') }}</span>
<div
v-else
id="dashboards"
class="container g-3"
>
<div class="row">
<div class="mbloc col-xs-12 col-sm-4">
<div class="custom1">
<ul class="list-unstyled">
<li v-if="counter.notifications > 0">
<i18n-t
keypath="counter.unread_notifications"
tag="span"
:class="counterClass"
:plural="counter.notifications"
>
<template #n>
<span>{{ counter.notifications }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.accompanyingCourses > 0">
<i18n-t
keypath="counter.assignated_courses"
tag="span"
:class="counterClass"
:plural="counter.accompanyingCourses"
>
<template #n>
<span>{{ counter.accompanyingCourses }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.works > 0">
<i18n-t
keypath="counter.assignated_actions"
tag="span"
:class="counterClass"
:plural="counter.works"
>
<template #n>
<span>{{ counter.works }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.evaluations > 0">
<i18n-t
keypath="counter.assignated_evaluations"
tag="span"
:class="counterClass"
:plural="counter.evaluations"
>
<template #n>
<span>{{ counter.evaluations }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksAlert > 0">
<i18n-t
keypath="counter.alert_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksAlert"
>
<template #n>
<span>{{ counter.tasksAlert }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksWarning > 0">
<i18n-t
keypath="counter.warning_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksWarning"
>
<template #n>
<span>{{ counter.tasksWarning }}</span>
</template>
</i18n-t>
</li>
</ul>
</div>
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_dashboard")
}}</span>
<div v-else id="dashboards" class="container g-3">
<div class="row">
<div class="mbloc col-xs-12 col-sm-4">
<div class="custom1">
<ul class="list-unstyled">
<li v-if="counter.notifications > 0">
<i18n-t
keypath="counter.unread_notifications"
tag="span"
:class="counterClass"
:plural="counter.notifications"
>
<template #n>
<span>{{ counter.notifications }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.accompanyingCourses > 0">
<i18n-t
keypath="counter.assignated_courses"
tag="span"
:class="counterClass"
:plural="counter.accompanyingCourses"
>
<template #n>
<span>{{
counter.accompanyingCourses
}}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.works > 0">
<i18n-t
keypath="counter.assignated_actions"
tag="span"
:class="counterClass"
:plural="counter.works"
>
<template #n>
<span>{{ counter.works }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.evaluations > 0">
<i18n-t
keypath="counter.assignated_evaluations"
tag="span"
:class="counterClass"
:plural="counter.evaluations"
>
<template #n>
<span>{{ counter.evaluations }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksAlert > 0">
<i18n-t
keypath="counter.alert_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksAlert"
>
<template #n>
<span>{{ counter.tasksAlert }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksWarning > 0">
<i18n-t
keypath="counter.warning_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksWarning"
>
<template #n>
<span>{{ counter.tasksWarning }}</span>
</template>
</i18n-t>
</li>
</ul>
</div>
</div>
<template v-if="this.hasDashboardItems">
<template v-for="(dashboardItem, index) in this.dashboardItems" :key="index">
<div
class="mbloc col-xs-12 col-sm-8 news"
v-if="dashboardItem.type === 'news'"
>
<News />
</div>
</template>
</template>
<template v-if="this.hasDashboardItems">
<template
v-for="(dashboardItem, index) in this.dashboardItems"
:key="index"
>
<div
class="mbloc col-xs-12 col-sm-8 news"
v-if="dashboardItem.type === 'news'"
>
<News />
</div>
</template>
</template>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import {makeFetch} from "ChillMainAssets/lib/api/apiMethods";
import News from './DashboardWidgets/News.vue';
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import News from "./DashboardWidgets/News.vue";
export default {
name: "MyCustoms",
name: "MyCustoms",
components: {
News
News,
},
data() {
return {
counterClass: {
counter: true //hack to pass class 'counter' in i18n-t
},
dashboardItems: [],
masonry: null,
}
},
computed: {
...mapGetters(['counter']),
noResults() {
return false
},
hasDashboardItems() {
return this.dashboardItems.length > 0;
}
},
mounted() {
makeFetch('GET', '/api/1.0/main/dashboard-config-item.json')
.then((response) => {
this.dashboardItems = response;
})
.catch((error) => {
throw error
});
},
}
data() {
return {
counterClass: {
counter: true, //hack to pass class 'counter' in i18n-t
},
dashboardItems: [],
masonry: null,
};
},
computed: {
...mapGetters(["counter"]),
noResults() {
return false;
},
hasDashboardItems() {
return this.dashboardItems.length > 0;
},
},
mounted() {
makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
.then((response) => {
this.dashboardItems = response;
})
.catch((error) => {
throw error;
});
},
};
</script>
<style lang="scss" scoped>
div.custom4,
div.custom3,
div.custom2 {
font-style: italic;
color: var(--bs-chill-gray);
font-style: italic;
color: var(--bs-chill-gray);
}
span.counter {
& > span {
background-color: unset;
}
& > span {
background-color: unset;
}
}
div.news {

244
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
View File

@@ -1,130 +1,136 @@
<template>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t('my_evaluations.description') }}
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_evaluations.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("evaluation") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(e, i) in evaluations.results"
:key="`evaluation-${i}`"
>
<td>{{ $d(e.maxDate.datetime, "short") }}</td>
<td>
{{ e.evaluation.title.fr }}
</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{
e.accompanyingPeriodWork.socialAction.issue
.text
}}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ e.accompanyingPeriodWork.socialAction.text }}
</span>
</h4>
<span
v-for="person in e.accompanyingPeriodWork.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a class="btn btn-sm btn-show" :href="getUrl(e)">
{{
$t("show_entity", {
entity: $t("the_evaluation"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="
getUrl(
e.accompanyingPeriodWork
.accompanyingPeriod,
)
"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
<span
v-if="noResults"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('max_date') }}
</th>
<th scope="col">
{{ $t('evaluation') }}
</th>
<th scope="col">
{{ $t('SocialAction') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(e, i) in evaluations.results"
:key="`evaluation-${i}`"
>
<td>{{ $d(e.maxDate.datetime, 'short') }}</td>
<td>
{{ e.evaluation.title.fr }}
</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ e.accompanyingPeriodWork.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ e.accompanyingPeriodWork.socialAction.text }}
</span>
</h4>
<span
v-for="person in e.accompanyingPeriodWork.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a
class="btn btn-sm btn-show"
:href="getUrl(e)"
>
{{ $t('show_entity', { entity: $t('the_evaluation') }) }}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)"
>
{{ $t('show_entity', { entity: $t('the_course') }) }}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyEvaluations",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState([
'evaluations',
]),
...mapGetters([
'isEvaluationsLoaded',
]),
noResults() {
if (!this.isEvaluationsLoaded) {
return false;
} else {
return this.evaluations.count === 0;
}
}
},
methods: {
getUrl(e) {
switch (e.type) {
case 'accompanying_period_work_evaluation':
let anchor = '#evaluations';
return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
case 'accompanying_period_work':
return `/fr/person/accompanying-period/work/${e.id}/edit`
case 'accompanying_period':
return `/fr/parcours/${e.id}`
default:
throw 'entity type unknown';
}
}
},
}
name: "MyEvaluations",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["evaluations"]),
...mapGetters(["isEvaluationsLoaded"]),
noResults() {
if (!this.isEvaluationsLoaded) {
return false;
} else {
return this.evaluations.count === 0;
}
},
},
methods: {
getUrl(e) {
switch (e.type) {
case "accompanying_period_work_evaluation":
let anchor = "#evaluations";
return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
};
</script>
<style scoped>
</style>
<style scoped></style>

220
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
View File

@@ -1,129 +1,117 @@
<template>
<div class="alert alert-light">
{{ $t('my_notifications.description') }}
</div>
<span
v-if="noResults"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('Date') }}
</th>
<th scope="col">
{{ $t('Subject') }}
</th>
<th scope="col">
{{ $t('From') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(n, i) in notifications.results"
:key="`notify-${i}`"
>
<td>{{ $d(n.date.datetime, 'long') }}</td>
<td>
<span class="unread">
<i class="fa fa-envelope-o" />
<a :href="getNotificationUrl(n)">{{ n.title }}</a>
</span>
</td>
<td v-if="n.sender != null">
{{ n.sender.text }}
</td>
<td v-else>
{{ $t('automatic_notification') }}
</td>
<td>
<a
class="btn btn-sm btn-show"
:href="getEntityUrl(n)"
>
{{ $t('show_entity', { entity: getEntityName(n) }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_notifications.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Date") }}
</th>
<th scope="col">
{{ $t("Subject") }}
</th>
<th scope="col">
{{ $t("From") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
<td>{{ $d(n.date.datetime, "long") }}</td>
<td>
<span class="unread">
<i class="fa fa-envelope-o" />
<a :href="getNotificationUrl(n)">{{ n.title }}</a>
</span>
</td>
<td v-if="n.sender != null">
{{ n.sender.text }}
</td>
<td v-else>
{{ $t("automatic_notification") }}
</td>
<td>
<a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
{{ $t("show_entity", { entity: getEntityName(n) }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import { appMessages } from 'ChillMainAssets/vuejs/HomepageWidget/js/i18n';
import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
export default {
name: "MyNotifications",
components: {
TabTable
},
computed: {
...mapState([
'notifications',
]),
...mapGetters([
'isNotificationsLoaded',
]),
noResults() {
if (!this.isNotificationsLoaded) {
return false;
} else {
return this.notifications.count === 0;
}
}
},
methods: {
getNotificationUrl(n) {
return `/fr/notification/${n.id}/show`
},
getEntityName(n) {
switch (n.relatedEntityClass) {
case 'Chill\\ActivityBundle\\Entity\\Activity':
return appMessages.fr.the_activity;
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
return appMessages.fr.the_course;
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork':
return appMessages.fr.the_action;
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument':
return appMessages.fr.the_evaluation_document;
case 'Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow':
return appMessages.fr.the_workflow;
default:
throw 'notification type unknown';
}
},
getEntityUrl(n) {
switch (n.relatedEntityClass) {
case 'Chill\\ActivityBundle\\Entity\\Activity':
return `/fr/activity/${n.relatedEntityId}/show`
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod':
return `/fr/parcours/${n.relatedEntityId}`
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork':
return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`
case 'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument':
return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`
case 'Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow':
return `/fr/main/workflow/${n.relatedEntityId}/show`
default:
throw 'notification type unknown';
}
}
}
}
name: "MyNotifications",
components: {
TabTable,
},
computed: {
...mapState(["notifications"]),
...mapGetters(["isNotificationsLoaded"]),
noResults() {
if (!this.isNotificationsLoaded) {
return false;
} else {
return this.notifications.count === 0;
}
},
},
methods: {
getNotificationUrl(n) {
return `/fr/notification/${n.id}/show`;
},
getEntityName(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return appMessages.fr.the_activity;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return appMessages.fr.the_course;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return appMessages.fr.the_action;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return appMessages.fr.the_evaluation_document;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return appMessages.fr.the_workflow;
default:
throw "notification type unknown";
}
},
getEntityUrl(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return `/fr/activity/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return `/fr/parcours/${n.relatedEntityId}`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return `/fr/main/workflow/${n.relatedEntityId}/show`;
default:
throw "notification type unknown";
}
},
},
};
</script>
<style lang="scss" scoped>
span.unread {
font-weight: bold;
i {
margin-right: 0.5em;
}
a {
text-decoration: unset;
}
font-weight: bold;
i {
margin-right: 0.5em;
}
a {
text-decoration: unset;
}
}
</style>
</style>

230
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
View File

@@ -1,90 +1,83 @@
<template>
<div class="alert alert-light">
{{ $t('my_tasks.description_warning') }}
</div>
<span
v-if="noResultsAlert"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('warning_date') }}
</th>
<th scope="col">
{{ $t('max_date') }}
</th>
<th scope="col">
{{ $t('task') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(t, i) in tasks.alert.results"
:key="`task-alert-${i}`"
>
<td v-if="null !== t.warningDate">
{{ $d(t.warningDate.datetime, 'short') }}
</td>
<td v-else />
<td>
<span class="outdated">{{ $d(t.endDate.datetime, 'short') }}</span>
</td>
<td>{{ t.title }}</td>
<td>
<a
class="btn btn-sm btn-show"
:href="getUrl(t)"
>
{{ $t('show_entity', { entity: $t('the_task') }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_tasks.description_warning") }}
</div>
<span v-if="noResultsAlert" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
<td v-if="null !== t.warningDate">
{{ $d(t.warningDate.datetime, "short") }}
</td>
<td v-else />
<td>
<span class="outdated">{{
$d(t.endDate.datetime, "short")
}}</span>
</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t('my_tasks.description_alert') }}
</div>
<span
v-if="noResultsWarning"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('warning_date') }}
</th>
<th scope="col">
{{ $t('max_date') }}
</th>
<th scope="col">
{{ $t('task') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(t, i) in tasks.warning.results"
:key="`task-warning-${i}`"
>
<td>
<span class="outdated">{{ $d(t.warningDate.datetime, 'short') }}</span>
</td>
<td>{{ $d(t.endDate.datetime, 'short') }}</td>
<td>{{ t.title }}</td>
<td>
<a
class="btn btn-sm btn-show"
:href="getUrl(t)"
>
{{ $t('show_entity', { entity: $t('the_task') }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_tasks.description_alert") }}
</div>
<span v-if="noResultsWarning" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(t, i) in tasks.warning.results"
:key="`task-warning-${i}`"
>
<td>
<span class="outdated">{{
$d(t.warningDate.datetime, "short")
}}</span>
</td>
<td>{{ $d(t.endDate.datetime, "short") }}</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
@@ -92,44 +85,39 @@ import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
export default {
name: "MyTasks",
components: {
TabTable
},
computed: {
...mapState([
'tasks',
]),
...mapGetters([
'isTasksWarningLoaded',
'isTasksAlertLoaded',
]),
noResultsAlert() {
if (!this.isTasksAlertLoaded) {
return false;
} else {
return this.tasks.alert.count === 0;
}
},
noResultsWarning() {
if (!this.isTasksWarningLoaded) {
return false;
} else {
return this.tasks.warning.count === 0;
}
}
},
methods: {
getUrl(t) {
return `/fr/task/single-task/${t.id}/show`
}
},
}
name: "MyTasks",
components: {
TabTable,
},
computed: {
...mapState(["tasks"]),
...mapGetters(["isTasksWarningLoaded", "isTasksAlertLoaded"]),
noResultsAlert() {
if (!this.isTasksAlertLoaded) {
return false;
} else {
return this.tasks.alert.count === 0;
}
},
noResultsWarning() {
if (!this.isTasksWarningLoaded) {
return false;
} else {
return this.tasks.warning.count === 0;
}
},
},
methods: {
getUrl(t) {
return `/fr/task/single-task/${t.id}/show`;
},
},
};
</script>
<style scoped>
span.outdated {
font-weight: bold;
color: var(--bs-warning);
font-weight: bold;
color: var(--bs-warning);
}
</style>
</style>

29
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
View File

@@ -1,29 +1,26 @@
<template>
<div class="alert alert-light">
{{ $t('my_workflows.description') }}
</div>
<my-workflows-table :workflows="workflows" />
<div class="alert alert-light">
{{ $t("my_workflows.description") }}
</div>
<my-workflows-table :workflows="workflows" />
<div class="alert alert-light">
{{ $t('my_workflows.description_cc') }}
</div>
<my-workflows-table :workflows="workflowsCc" />
<div class="alert alert-light">
{{ $t("my_workflows.description_cc") }}
</div>
<my-workflows-table :workflows="workflowsCc" />
</template>
<script>
import { mapState } from "vuex";
import MyWorkflowsTable from './MyWorkflowsTable.vue';
import MyWorkflowsTable from "./MyWorkflowsTable.vue";
export default {
name: "MyWorkflows",
components: {
MyWorkflowsTable
MyWorkflowsTable,
},
computed: {
...mapState([
'workflows',
'workflowsCc',
]),
...mapState(["workflows", "workflowsCc"]),
},
}
</script>
};
</script>

121
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
View File

@@ -1,79 +1,68 @@
<template>
<span
v-if="hasNoResults(workflows)"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('Object_workflow') }}
</th>
<th scope="col">
{{ $t('Step') }}
</th>
<th scope="col">
{{ $t('concerned_users') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(w, i) in workflows.results"
:key="`workflow-${i}`"
>
<td>{{ w.title }}</td>
<td>
<div class="workflow">
<div class="breadcrumb">
<i class="fa fa-circle me-1 text-chill-yellow mx-2" />
<span class="mx-2">{{ getStep(w) }}</span>
</div>
</div>
</td>
<td v-if="w.datas.persons !== null">
<span
v-for="p in w.datas.persons"
class="me-1"
:key="p.id"
>
<on-the-fly
:type="p.type"
:id="p.id"
:button-text="p.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<a
class="btn btn-sm btn-show"
:href="getUrl(w)"
>
{{ $t('show_entity', { entity: $t('the_workflow') }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Object_workflow") }}
</th>
<th scope="col">
{{ $t("Step") }}
</th>
<th scope="col">
{{ $t("concerned_users") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
<td>{{ w.title }}</td>
<td>
<div class="workflow">
<div class="breadcrumb">
<i
class="fa fa-circle me-1 text-chill-yellow mx-2"
/>
<span class="mx-2">{{ getStep(w) }}</span>
</div>
</div>
</td>
<td v-if="w.datas.persons !== null">
<span v-for="p in w.datas.persons" class="me-1" :key="p.id">
<on-the-fly
:type="p.type"
:id="p.id"
:button-text="p.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(w)">
{{ $t("show_entity", { entity: $t("the_workflow") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
import { mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyWorkflows",
components: {
TabTable,
OnTheFly
OnTheFly,
},
props: ['workflows'],
props: ["workflows"],
computed: {
...mapGetters([
'isWorkflowsLoaded',
]),
...mapGetters(["isWorkflowsLoaded"]),
},
methods: {
hasNoResults(workflows) {
@@ -87,11 +76,11 @@ export default {
return `/fr/main/workflow/${w.id}/show`;
},
getStep(w) {
const lastStep = w.steps.length - 1
const lastStep = w.steps.length - 1;
return w.steps[lastStep].currentStep.text;
}
},
},
}
};
</script>
<style scoped>

225
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
View File

@@ -1,127 +1,122 @@
// CURRENTLY NOT IN USE
<template>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t('my_works.description') }}
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_works.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("StartDate") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in works.results" :key="`works-${i}`">
<td>{{ $d(w.startDate.datetime, "short") }}</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ w.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ w.socialAction.text }}
</span>
</h4>
</td>
<td>
<span
v-for="person in w.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a class="btn btn-sm btn-update" :href="getUrl(w)">
{{
$t("show_entity", {
entity: $t("the_action"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(w.accompanyingPeriod)"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
<span
v-if="noResults"
class="chill-no-data-statement"
>{{ $t('no_data') }}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t('StartDate') }}
</th>
<th scope="col">
{{ $t('SocialAction') }}
</th>
<th scope="col">
{{ $t('concerned_persons') }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(w, i) in works.results"
:key="`works-${i}`"
>
<td>{{ $d(w.startDate.datetime, 'short') }}</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ w.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ w.socialAction.text }}
</span>
</h4>
</td>
<td>
<span
v-for="person in w.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a
class="btn btn-sm btn-update"
:href="getUrl(w)"
>
{{ $t('show_entity', { entity: $t('the_action') }) }}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(w.accompanyingPeriod)"
>
{{ $t('show_entity', { entity: $t('the_course') }) }}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly';
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyWorks",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState([
'works',
]),
...mapGetters([
'isWorksLoaded',
]),
noResults() {
if (!this.isWorksLoaded) {
return false;
} else {
return this.works.count === 0;
}
}
},
methods: {
getUrl(e) {
switch (e.type) {
case 'accompanying_period_work':
return `/fr/person/accompanying-period/work/${e.id}/edit`
case 'accompanying_period':
return `/fr/parcours/${e.id}`
default:
throw 'entity type unknown';
}
}
},
}
name: "MyWorks",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["works"]),
...mapGetters(["isWorksLoaded"]),
noResults() {
if (!this.isWorksLoaded) {
return false;
} else {
return this.works.count === 0;
}
},
},
methods: {
getUrl(e) {
switch (e.type) {
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
};
</script>
<style scoped>
</style>
<style scoped></style>

27
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
View File

@@ -1,20 +1,17 @@
<template>
<span
v-if="isCounterAvailable"
class="badge rounded-pill bg-danger"
>
{{ count }}
</span>
<span v-if="isCounterAvailable" class="badge rounded-pill bg-danger">
{{ count }}
</span>
</template>
<script>
export default {
name: "TabCounter",
props: ['count'],
computed: {
isCounterAvailable() {
return (typeof this.count !== 'undefined' && this.count > 0 )
}
}
}
</script>
name: "TabCounter",
props: ["count"],
computed: {
isCounterAvailable() {
return typeof this.count !== "undefined" && this.count > 0;
},
},
};
</script>

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
View File

@@ -1,21 +1,21 @@
<template>
<table class="table table-striped table-hover">
<thead>
<tr>
<slot name="thead" />
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</table>
<table class="table table-striped table-hover">
<thead>
<tr>
<slot name="thead" />
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</table>
</template>
<script>
export default {
name: "TabTable",
props: []
}
name: "TabTable",
props: [],
};
</script>
<style scoped></style>
<style scoped></style>

160
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js
View File

@@ -1,82 +1,88 @@
const appMessages = {
fr: {
main_title: "Vue d'ensemble",
my_works: {
tab: "Mes actions",
description: "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
},
my_evaluations: {
tab: "Mes évaluations",
description: "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
},
my_tasks: {
tab: "Mes tâches",
description_alert: "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
description_warning: "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
},
my_accompanying_courses: {
tab: "Mes nouveaux parcours",
description: "Liste des parcours d'accompagnement que l'on vient de m'attribuer depuis moins de 15 jours.",
},
my_notifications: {
tab: "Mes nouvelles notifications",
description: "Liste des notifications reçues et non lues.",
},
my_workflows: {
tab: "Mes workflows",
description: "Liste des workflows en attente d'une action.",
description_cc: "Liste des workflows dont je suis en copie."
},
opening_date: "Date d'ouverture",
social_issues: "Problématiques sociales",
concerned_persons: "Usagers concernés",
max_date: "Date d'échéance",
warning_date: "Date de rappel",
evaluation: "Évaluation",
task: "Tâche",
Date: "Date",
From: "Expéditeur",
Subject: "Objet",
Entity: "Associé à",
Step: "Étape",
concerned_users: "Usagers concernés",
Object_workflow: "Objet du workflow",
show_entity: "Voir {entity}",
the_activity: "l'échange",
the_course: "le parcours",
the_action: "l'action",
the_evaluation: "l'évaluation",
the_evaluation_document: "le document",
the_task: "la tâche",
the_workflow: "le workflow",
StartDate: "Date d'ouverture",
SocialAction: "Action d'accompagnement",
no_data: "Aucun résultats",
no_dashboard: "Pas de tableaux de bord",
counter: {
unread_notifications: "{n} notification non lue | {n} notifications non lues",
assignated_courses: "{n} parcours récent assigné | {n} parcours récents assignés",
assignated_actions: "{n} action assignée | {n} actions assignées",
assignated_evaluations: "{n} évaluation assignée | {n} évaluations assignées",
alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
},
emergency: "Urgent",
confidential: "Confidentiel",
automatic_notification: "Notification automatique",
widget: {
news: {
title: "Actualités",
readMore: "Lire la suite",
date: "Date",
none: "Aucune actualité"
}
}
}
fr: {
main_title: "Vue d'ensemble",
my_works: {
tab: "Mes actions",
description:
"Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
},
my_evaluations: {
tab: "Mes évaluations",
description:
"Liste des évaluations dont je suis référent et qui arrivent à échéance.",
},
my_tasks: {
tab: "Mes tâches",
description_alert:
"Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
description_warning:
"Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
},
my_accompanying_courses: {
tab: "Mes nouveaux parcours",
description:
"Liste des parcours d'accompagnement que l'on vient de m'attribuer depuis moins de 15 jours.",
},
my_notifications: {
tab: "Mes nouvelles notifications",
description: "Liste des notifications reçues et non lues.",
},
my_workflows: {
tab: "Mes workflows",
description: "Liste des workflows en attente d'une action.",
description_cc: "Liste des workflows dont je suis en copie.",
},
opening_date: "Date d'ouverture",
social_issues: "Problématiques sociales",
concerned_persons: "Usagers concernés",
max_date: "Date d'échéance",
warning_date: "Date de rappel",
evaluation: "Évaluation",
task: "Tâche",
Date: "Date",
From: "Expéditeur",
Subject: "Objet",
Entity: "Associé à",
Step: "Étape",
concerned_users: "Usagers concernés",
Object_workflow: "Objet du workflow",
show_entity: "Voir {entity}",
the_activity: "l'échange",
the_course: "le parcours",
the_action: "l'action",
the_evaluation: "l'évaluation",
the_evaluation_document: "le document",
the_task: "la tâche",
the_workflow: "le workflow",
StartDate: "Date d'ouverture",
SocialAction: "Action d'accompagnement",
no_data: "Aucun résultats",
no_dashboard: "Pas de tableaux de bord",
counter: {
unread_notifications:
"{n} notification non lue | {n} notifications non lues",
assignated_courses:
"{n} parcours récent assigné | {n} parcours récents assignés",
assignated_actions: "{n} action assignée | {n} actions assignées",
assignated_evaluations:
"{n} évaluation assignée | {n} évaluations assignées",
alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
},
emergency: "Urgent",
confidential: "Confidentiel",
automatic_notification: "Notification automatique",
widget: {
news: {
title: "Actualités",
readMore: "Lire la suite",
date: "Date",
none: "Aucune actualité",
},
},
},
};
Object.assign(appMessages.fr);
export {
appMessages
};
export { appMessages };

420
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/store.js
View File

@@ -1,226 +1,222 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import "es6-promise/auto";
import { createStore } from "vuex";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
const debug = process.env.NODE_ENV !== 'production';
const debug = process.env.NODE_ENV !== "production";
const isEmpty = (obj) => {
return obj
&& Object.keys(obj).length <= 1
&& Object.getPrototypeOf(obj) === Object.prototype;
return (
obj &&
Object.keys(obj).length <= 1 &&
Object.getPrototypeOf(obj) === Object.prototype
);
};
const store = createStore({
strict: debug,
state: {
// works: {},
evaluations: {},
tasks: {
warning: {},
alert: {}
},
accompanyingCourses: {},
notifications: {},
workflows: {},
workflowsCc: {},
errorMsg: [],
loading: false
strict: debug,
state: {
// works: {},
evaluations: {},
tasks: {
warning: {},
alert: {},
},
getters: {
// isWorksLoaded(state) {
// return !isEmpty(state.works);
// },
isEvaluationsLoaded(state) {
return !isEmpty(state.evaluations);
},
isTasksWarningLoaded(state) {
return !isEmpty(state.tasks.warning);
},
isTasksAlertLoaded(state) {
return !isEmpty(state.tasks.alert);
},
isAccompanyingCoursesLoaded(state) {
return !isEmpty(state.accompanyingCourses);
},
isNotificationsLoaded(state) {
return !isEmpty(state.notifications);
},
isWorkflowsLoaded(state) {
return !isEmpty(state.workflows);
},
counter(state) {
return {
// works: state.works.count,
evaluations: state.evaluations.count,
tasksWarning: state.tasks.warning.count,
tasksAlert: state.tasks.alert.count,
accompanyingCourses: state.accompanyingCourses.count,
notifications: state.notifications.count,
workflows: state.workflows.count
}
}
accompanyingCourses: {},
notifications: {},
workflows: {},
workflowsCc: {},
errorMsg: [],
loading: false,
},
getters: {
// isWorksLoaded(state) {
// return !isEmpty(state.works);
// },
isEvaluationsLoaded(state) {
return !isEmpty(state.evaluations);
},
mutations: {
// addWorks(state, works) {
// //console.log('addWorks', works);
// state.works = works;
// },
addEvaluations(state, evaluations) {
//console.log('addEvaluations', evaluations);
state.evaluations = evaluations;
},
addTasksWarning(state, tasks) {
//console.log('addTasksWarning', tasks);
state.tasks.warning = tasks;
},
addTasksAlert(state, tasks) {
//console.log('addTasksAlert', tasks);
state.tasks.alert = tasks;
},
addCourses(state, courses) {
//console.log('addCourses', courses);
state.accompanyingCourses = courses;
},
addNotifications(state, notifications) {
//console.log('addNotifications', notifications);
state.notifications = notifications;
},
addWorkflows(state, workflows) {
state.workflows = workflows;
},
addWorkflowsCc(state, workflows) {
state.workflowsCc = workflows;
},
setLoading(state, bool) {
state.loading = bool;
},
catchError(state, error) {
state.errorMsg.push(error);
},
isTasksWarningLoaded(state) {
return !isEmpty(state.tasks.warning);
},
actions: {
getByTab({ commit, getters }, { tab, param }) {
switch (tab) {
// case 'MyWorks':
// if (!getters.isWorksLoaded) {
// commit('setLoading', true);
// const url = `/api/1.0/person/accompanying-period/work/my-near-end${'?'+ param}`;
// makeFetch('GET', url)
// .then((response) => {
// commit('addWorks', response);
// commit('setLoading', false);
// })
// .catch((error) => {
// commit('catchError', error);
// throw error;
// })
// ;
// }
// break;
case 'MyEvaluations':
if (!getters.isEvaluationsLoaded) {
commit('setLoading', true);
const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end${'?'+ param}`;
makeFetch('GET', url)
.then((response) => {
commit('addEvaluations', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
})
;
}
break;
case 'MyTasks':
if (!(getters.isTasksWarningLoaded && getters.isTasksAlertLoaded)) {
commit('setLoading', true);
const
urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`,
urlAlert = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${'&'+ param}`
;
makeFetch('GET', urlWarning)
.then((response) => {
commit('addTasksWarning', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
})
;
makeFetch('GET', urlAlert)
.then((response) => {
commit('addTasksAlert', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
})
;
}
break;
case 'MyAccompanyingCourses':
if (!getters.isAccompanyingCoursesLoaded) {
commit('setLoading', true);
const url = `/api/1.0/person/accompanying-course/list/by-recent-attributions${'?'+ param}`;
makeFetch('GET', url)
.then((response) => {
commit('addCourses', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
})
;
}
break;
case 'MyNotifications':
if (!getters.isNotificationsLoaded) {
commit('setLoading', true);
const url = `/api/1.0/main/notification/my/unread${'?'+ param}`;
makeFetch('GET', url)
.then((response) => {
console.log('notifications', response)
commit('addNotifications', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
});
}
break;
case 'MyWorkflows':
if (!getters.isWorflowsLoaded) {
commit('setLoading', true);
makeFetch('GET', '/api/1.0/main/workflow/my')
.then((response) => {
commit('addWorkflows', response);
makeFetch('GET', '/api/1.0/main/workflow/my-cc')
.then((response) => {
commit('addWorkflowsCc', response);
commit('setLoading', false);
})
.catch((error) => {
commit('catchError', error);
throw error;
});
})
.catch((error) => {
commit('catchError', error);
throw error;
});
}
break;
default:
throw 'tab '+ tab;
}
},
isTasksAlertLoaded(state) {
return !isEmpty(state.tasks.alert);
},
isAccompanyingCoursesLoaded(state) {
return !isEmpty(state.accompanyingCourses);
},
isNotificationsLoaded(state) {
return !isEmpty(state.notifications);
},
isWorkflowsLoaded(state) {
return !isEmpty(state.workflows);
},
counter(state) {
return {
// works: state.works.count,
evaluations: state.evaluations.count,
tasksWarning: state.tasks.warning.count,
tasksAlert: state.tasks.alert.count,
accompanyingCourses: state.accompanyingCourses.count,
notifications: state.notifications.count,
workflows: state.workflows.count,
};
},
},
mutations: {
// addWorks(state, works) {
// //console.log('addWorks', works);
// state.works = works;
// },
addEvaluations(state, evaluations) {
//console.log('addEvaluations', evaluations);
state.evaluations = evaluations;
},
addTasksWarning(state, tasks) {
//console.log('addTasksWarning', tasks);
state.tasks.warning = tasks;
},
addTasksAlert(state, tasks) {
//console.log('addTasksAlert', tasks);
state.tasks.alert = tasks;
},
addCourses(state, courses) {
//console.log('addCourses', courses);
state.accompanyingCourses = courses;
},
addNotifications(state, notifications) {
//console.log('addNotifications', notifications);
state.notifications = notifications;
},
addWorkflows(state, workflows) {
state.workflows = workflows;
},
addWorkflowsCc(state, workflows) {
state.workflowsCc = workflows;
},
setLoading(state, bool) {
state.loading = bool;
},
catchError(state, error) {
state.errorMsg.push(error);
},
},
actions: {
getByTab({ commit, getters }, { tab, param }) {
switch (tab) {
// case 'MyWorks':
// if (!getters.isWorksLoaded) {
// commit('setLoading', true);
// const url = `/api/1.0/person/accompanying-period/work/my-near-end${'?'+ param}`;
// makeFetch('GET', url)
// .then((response) => {
// commit('addWorks', response);
// commit('setLoading', false);
// })
// .catch((error) => {
// commit('catchError', error);
// throw error;
// })
// ;
// }
// break;
case "MyEvaluations":
if (!getters.isEvaluationsLoaded) {
commit("setLoading", true);
const url = `/api/1.0/person/accompanying-period/work/evaluation/my-near-end${"?" + param}`;
makeFetch("GET", url)
.then((response) => {
commit("addEvaluations", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
}
break;
case "MyTasks":
if (!(getters.isTasksWarningLoaded && getters.isTasksAlertLoaded)) {
commit("setLoading", true);
const urlWarning = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=warning&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${"&" + param}`,
urlAlert = `/api/1.0/task/single-task/list/my?f[q]=&f[checkboxes][status][]=alert&f[checkboxes][states][]=new&f[checkboxes][states][]=in_progress${"&" + param}`;
makeFetch("GET", urlWarning)
.then((response) => {
commit("addTasksWarning", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
makeFetch("GET", urlAlert)
.then((response) => {
commit("addTasksAlert", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
}
break;
case "MyAccompanyingCourses":
if (!getters.isAccompanyingCoursesLoaded) {
commit("setLoading", true);
const url = `/api/1.0/person/accompanying-course/list/by-recent-attributions${"?" + param}`;
makeFetch("GET", url)
.then((response) => {
commit("addCourses", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
}
break;
case "MyNotifications":
if (!getters.isNotificationsLoaded) {
commit("setLoading", true);
const url = `/api/1.0/main/notification/my/unread${"?" + param}`;
makeFetch("GET", url)
.then((response) => {
console.log("notifications", response);
commit("addNotifications", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
}
break;
case "MyWorkflows":
if (!getters.isWorflowsLoaded) {
commit("setLoading", true);
makeFetch("GET", "/api/1.0/main/workflow/my")
.then((response) => {
commit("addWorkflows", response);
makeFetch("GET", "/api/1.0/main/workflow/my-cc")
.then((response) => {
commit("addWorkflowsCc", response);
commit("setLoading", false);
})
.catch((error) => {
commit("catchError", error);
throw error;
});
})
.catch((error) => {
commit("catchError", error);
throw error;
});
}
break;
default:
throw "tab " + tab;
}
},
},
});
export { store };

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
View File

@@ -1,32 +1,32 @@
<template>
<on-the-fly
:type="context.type"
:id="context.id"
:action="context.action"
:button-text="options.buttonText"
:display-badge="options.displayBadge === 'true'"
:is-dead="options.isDead"
:parent="options.parent"
@save-form-on-the-fly="saveFormOnTheFly"
/>
<on-the-fly
:type="context.type"
:id="context.id"
:action="context.action"
:button-text="options.buttonText"
:display-badge="options.displayBadge === 'true'"
:is-dead="options.isDead"
:parent="options.parent"
@save-form-on-the-fly="saveFormOnTheFly"
/>
</template>
<script>
import OnTheFly from './components/OnTheFly.vue';
import OnTheFly from "./components/OnTheFly.vue";
export default {
name: "App",
components: {
OnTheFly
OnTheFly,
},
props: ['onTheFly'],
props: ["onTheFly"],
computed: {
context() {
return this.onTheFly.context;
},
options() {
return this.onTheFly.options;
}
},
},
mounted() {
//console.log('OnTheFly mounted');
@@ -35,9 +35,8 @@ export default {
},
methods: {
saveFormOnTheFly(payload) {
console.log('saveFormOnTheFly', payload);
}
}
}
console.log("saveFormOnTheFly", payload);
},
},
};
</script>

204
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
View File

@@ -1,121 +1,113 @@
<template>
<ul class="nav nav-tabs">
<li
v-if="allowedTypes.includes('person')"
class="nav-item"
>
<a
class="nav-link"
:class="{ active: isActive('person') }"
>
<label for="person">
<input
type="radio"
name="person"
id="person"
v-model="radioType"
value="person"
>
{{ $t('onthefly.create.person') }}
</label>
</a>
</li>
<li
v-if="allowedTypes.includes('thirdparty')"
class="nav-item"
>
<a
class="nav-link"
:class="{ active: isActive('thirdparty') }"
>
<label for="thirdparty">
<input
type="radio"
name="thirdparty"
id="thirdparty"
v-model="radioType"
value="thirdparty"
>
{{ $t('onthefly.create.thirdparty') }}
</label>
</a>
</li>
</ul>
<ul class="nav nav-tabs">
<li v-if="allowedTypes.includes('person')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('person') }">
<label for="person">
<input
type="radio"
name="person"
id="person"
v-model="radioType"
value="person"
/>
{{ $t("onthefly.create.person") }}
</label>
</a>
</li>
<li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('thirdparty') }">
<label for="thirdparty">
<input
type="radio"
name="thirdparty"
id="thirdparty"
v-model="radioType"
value="thirdparty"
/>
{{ $t("onthefly.create.thirdparty") }}
</label>
</a>
</li>
</ul>
<div class="my-4">
<on-the-fly-person
v-if="type === 'person'"
:action="action"
:query="query"
ref="castPerson"
/>
<div class="my-4">
<on-the-fly-person
v-if="type === 'person'"
:action="action"
:query="query"
ref="castPerson"
/>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
:action="action"
:query="query"
ref="castThirdparty"
/>
</div>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
:action="action"
:query="query"
ref="castThirdparty"
/>
</div>
</template>
<script>
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
export default {
name: "OnTheFlyCreate",
props: ['action', 'allowedTypes', 'query'],
components: {
OnTheFlyPerson,
OnTheFlyThirdparty
},
data() {
return {
type: null
}
},
computed: {
radioType: {
set(type) {
this.type = type;
console.log('## type:', type, ', action:', this.action);
},
get() {
return this.type;
}
},
},
mounted() {
this.type = (this.allowedTypes.length === 1 && this.allowedTypes.includes('thirdparty')) ? 'thirdparty' : 'person'
},
methods: {
isActive(tab) {
return (this.type === tab) ? true : false;
},
castDataByType() {
switch (this.radioType) {
case 'person':
return this.$refs.castPerson.$data.person;
case 'thirdparty':
let data = this.$refs.castThirdparty.$data.thirdparty;
if (data.address !== undefined && data.address !== null) {
data.address = { id: data.address.address_id }
} else {
data.address = null;
}
name: "OnTheFlyCreate",
props: ["action", "allowedTypes", "query"],
components: {
OnTheFlyPerson,
OnTheFlyThirdparty,
},
data() {
return {
type: null,
};
},
computed: {
radioType: {
set(type) {
this.type = type;
console.log("## type:", type, ", action:", this.action);
},
get() {
return this.type;
},
},
},
mounted() {
this.type =
this.allowedTypes.length === 1 &&
this.allowedTypes.includes("thirdparty")
? "thirdparty"
: "person";
},
methods: {
isActive(tab) {
return this.type === tab ? true : false;
},
castDataByType() {
switch (this.radioType) {
case "person":
return this.$refs.castPerson.$data.person;
case "thirdparty":
let data = this.$refs.castThirdparty.$data.thirdparty;
if (data.address !== undefined && data.address !== null) {
data.address = { id: data.address.address_id };
} else {
data.address = null;
}
return data;
default:
throw Error('Invalid type of entity')
}
}
}
}
return data;
default:
throw Error("Invalid type of entity");
}
},
},
};
</script>
<style lang="css" scoped>
label {
cursor: pointer;
cursor: pointer;
}
</style>

606
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
View File

@@ -1,314 +1,328 @@
<template>
<a
v-if="isDisplayBadge"
@click="openModal"
>
<span
class="chill-entity"
:class="badgeType"
>
{{ buttonText }}<span v-if="isDead"> (‡)</span>
</span>
</a>
<a
v-else
class="btn btn-sm"
target="_blank"
:class="classAction"
:title="$t(titleAction)"
@click="openModal"
>
{{ buttonText }}<span v-if="isDead"> (‡)</span>
</a>
<teleport to="body">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
@close="modal.showModal = false"
>
<template #header>
<h3
v-if="parent"
class="modal-title"
>
{{ $t(titleModal, {q: parent.text}) }}
</h3>
<h3
v-else
class="modal-title"
>
{{ $t(titleModal) }}
</h3>
</template>
<template
#body
v-if="type === 'person'"
>
<on-the-fly-person
:id="id"
:type="type"
:action="action"
ref="castPerson"
/>
<div v-if="hasResourceComment">
<h3>{{ $t('onthefly.resource_comment_title') }}</h3>
<blockquote class="chill-user-quote">
{{ parent.comment }}
</blockquote>
</div>
</template>
<template
#body
v-else-if="type === 'thirdparty'"
>
<on-the-fly-thirdparty
:id="id"
:type="type"
:action="action"
ref="castThirdparty"
/>
<div v-if="hasResourceComment">
<h3>{{ $t('onthefly.resource_comment_title') }}</h3>
<blockquote class="chill-user-quote">
{{ parent.comment }}
</blockquote>
</div>
</template>
<template
#body
v-else-if="parent"
>
<on-the-fly-thirdparty
:parent="parent"
:action="action"
type="thirdparty"
ref="castThirdparty"
/>
</template>
<template
#body
<a v-if="isDisplayBadge" @click="openModal">
<span class="chill-entity" :class="badgeType">
{{ buttonText }}<span v-if="isDead"> (‡)</span>
</span>
</a>
<a
v-else
>
<on-the-fly-create
:action="action"
:allowed-types="allowedTypes"
:query="query"
ref="castNew"
/>
</template>
class="btn btn-sm"
target="_blank"
:class="classAction"
:title="$t(titleAction)"
@click="openModal"
>
{{ buttonText }}<span v-if="isDead"> (‡)</span>
</a>
<template #footer>
<a
v-if="action === 'show'"
:href="buildLocation(id, type)"
:title="$t(titleMessage)"
class="btn btn-show"
>{{ $t(buttonMessage) }}
</a>
<a
v-else
class="btn btn-save"
@click="saveAction"
<teleport to="body">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
@close="modal.showModal = false"
>
{{ $t('action.save') }}
</a>
</template>
</modal>
</teleport>
<template #header>
<h3 v-if="parent" class="modal-title">
{{ $t(titleModal, { q: parent.text }) }}
</h3>
<h3 v-else class="modal-title">
{{ $t(titleModal) }}
</h3>
</template>
<template #body v-if="type === 'person'">
<on-the-fly-person
:id="id"
:type="type"
:action="action"
ref="castPerson"
/>
<div v-if="hasResourceComment">
<h3>{{ $t("onthefly.resource_comment_title") }}</h3>
<blockquote class="chill-user-quote">
{{ parent.comment }}
</blockquote>
</div>
</template>
<template #body v-else-if="type === 'thirdparty'">
<on-the-fly-thirdparty
:id="id"
:type="type"
:action="action"
ref="castThirdparty"
/>
<div v-if="hasResourceComment">
<h3>{{ $t("onthefly.resource_comment_title") }}</h3>
<blockquote class="chill-user-quote">
{{ parent.comment }}
</blockquote>
</div>
</template>
<template #body v-else-if="parent">
<on-the-fly-thirdparty
:parent="parent"
:action="action"
type="thirdparty"
ref="castThirdparty"
/>
</template>
<template #body v-else>
<on-the-fly-create
:action="action"
:allowed-types="allowedTypes"
:query="query"
ref="castNew"
/>
</template>
<template #footer>
<a
v-if="action === 'show'"
:href="buildLocation(id, type)"
:title="$t(titleMessage)"
class="btn btn-show"
>{{ $t(buttonMessage) }}
</a>
<a v-else class="btn btn-save" @click="saveAction">
{{ $t("action.save") }}
</a>
</template>
</modal>
</teleport>
</template>
<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
import OnTheFlyCreate from './Create.vue';
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import OnTheFlyCreate from "./Create.vue";
import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
export default {
name: 'OnTheFly',
components: {
Modal,
OnTheFlyPerson,
OnTheFlyThirdparty,
OnTheFlyCreate
},
props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'allowedTypes', 'query'],
emits: ['saveFormOnTheFly'],
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl"
}
}
},
computed: {
hasResourceComment() {
return (typeof this.parent !== 'undefined' && this.parent !== null)
&& this.action === 'show'
&& this.parent.type === 'accompanying_period_resource'
&& (this.parent.comment !== null && this.parent.comment !== '')
;
},
classAction() {
switch (this.action) {
case 'show':
return 'btn-show';
case 'edit':
return 'btn-update';
case 'create':
return 'btn-create';
case 'addContact':
return 'btn-tpchild';
default:
return '';
}
},
titleAction() {
switch (this.action) {
case 'show':
return 'action.show';
case 'edit':
return 'action.edit';
case 'create':
return 'action.create';
case 'addContact':
return 'action.addContact';
default:
return '';
}
},
titleCreate() {
if (typeof this.allowedTypes === 'undefined') {
return 'onthefly.create.title.default';
}
return this.allowedTypes.every(t => t === 'person')
? 'onthefly.create.title.person'
: this.allowedTypes.every(t => t === 'thirdparty')
? 'onthefly.create.title.thirdparty'
: 'onthefly.create.title.default'
},
titleModal() {
switch (this.action) {
case 'show':
return 'onthefly.show.' + this.type;
case 'edit':
return 'onthefly.edit.' + this.type;
case 'create':
return this.titleCreate;
case 'addContact':
return 'onthefly.addContact.title';
default:
return '';
}
},
titleMessage() {
switch (this.type){
case 'person':
return 'action.redirect.' + this.type;
case 'thirdparty':
return 'action.redirect.' + this.type;
default:
return '';
}
},
buttonMessage() {
switch (this.type){
case 'person':
return 'onthefly.show.file_' + this.type;
case 'thirdparty':
return 'onthefly.show.file_' + this.type;
}
},
isDisplayBadge() {
return (this.displayBadge === true && this.buttonText !== null);
},
badgeType() {
return 'entity-' + this.type + ' badge-' + this.type;
},
getReturnPath() {
return `?returnPath=${window.location.pathname}${window.location.search}${window.location.hash}`;
},
},
methods: {
closeModal() {
this.modal.showModal = false;
},
openModal() {
// console.log('## OPEN ON THE FLY MODAL');
// console.log('## type:', this.type, ', action:', this.action);
this.modal.showModal = true;
this.$nextTick(function() {
//this.$refs.search.focus();
})
},
changeActionTo(action) {
this.$data.action = action;
},
saveAction() {
// console.log('saveAction button: create/edit action with', this.type);
let
type = this.type,
data = {} ;
switch (type) {
case 'person':
data = this.$refs.castPerson.$data.person;
console.log('person data are', data);
break;
name: "OnTheFly",
components: {
Modal,
OnTheFlyPerson,
OnTheFlyThirdparty,
OnTheFlyCreate,
},
props: [
"type",
"id",
"action",
"buttonText",
"displayBadge",
"isDead",
"parent",
"allowedTypes",
"query",
],
emits: ["saveFormOnTheFly"],
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
},
};
},
computed: {
hasResourceComment() {
return (
typeof this.parent !== "undefined" &&
this.parent !== null &&
this.action === "show" &&
this.parent.type === "accompanying_period_resource" &&
this.parent.comment !== null &&
this.parent.comment !== ""
);
},
classAction() {
switch (this.action) {
case "show":
return "btn-show";
case "edit":
return "btn-update";
case "create":
return "btn-create";
case "addContact":
return "btn-tpchild";
default:
return "";
}
},
titleAction() {
switch (this.action) {
case "show":
return "action.show";
case "edit":
return "action.edit";
case "create":
return "action.create";
case "addContact":
return "action.addContact";
default:
return "";
}
},
titleCreate() {
if (typeof this.allowedTypes === "undefined") {
return "onthefly.create.title.default";
}
return this.allowedTypes.every((t) => t === "person")
? "onthefly.create.title.person"
: this.allowedTypes.every((t) => t === "thirdparty")
? "onthefly.create.title.thirdparty"
: "onthefly.create.title.default";
},
titleModal() {
switch (this.action) {
case "show":
return "onthefly.show." + this.type;
case "edit":
return "onthefly.edit." + this.type;
case "create":
return this.titleCreate;
case "addContact":
return "onthefly.addContact.title";
default:
return "";
}
},
titleMessage() {
switch (this.type) {
case "person":
return "action.redirect." + this.type;
case "thirdparty":
return "action.redirect." + this.type;
default:
return "";
}
},
buttonMessage() {
switch (this.type) {
case "person":
return "onthefly.show.file_" + this.type;
case "thirdparty":
return "onthefly.show.file_" + this.type;
}
},
isDisplayBadge() {
return this.displayBadge === true && this.buttonText !== null;
},
badgeType() {
return "entity-" + this.type + " badge-" + this.type;
},
getReturnPath() {
return `?returnPath=${window.location.pathname}${window.location.search}${window.location.hash}`;
},
},
methods: {
closeModal() {
this.modal.showModal = false;
},
openModal() {
// console.log('## OPEN ON THE FLY MODAL');
// console.log('## type:', this.type, ', action:', this.action);
this.modal.showModal = true;
this.$nextTick(function () {
//this.$refs.search.focus();
});
},
changeActionTo(action) {
this.$data.action = action;
},
saveAction() {
// console.log('saveAction button: create/edit action with', this.type);
let type = this.type,
data = {};
switch (type) {
case "person":
data = this.$refs.castPerson.$data.person;
console.log("person data are", data);
break;
case 'thirdparty':
data = this.$refs.castThirdparty.$data.thirdparty;
/* never executed ? */
break;
case "thirdparty":
data = this.$refs.castThirdparty.$data.thirdparty;
/* never executed ? */
break;
default:
if (typeof this.type === 'undefined') { // action=create or addContact
// console.log('will rewrite data');
if (this.action === 'addContact') {
type = 'thirdparty'
data = this.$refs.castThirdparty.$data.thirdparty;
// console.log('data original', data);
data.parent = {type: "thirdparty", id: this.parent.id};
data.civility = data.civility !== null ? {type: 'chill_main_civility', id: data.civility.id} : null;
data.profession = data.profession !== '' ? data.profession : '';
} else {
type = this.$refs.castNew.radioType;
data = this.$refs.castNew.castDataByType();
// console.log('type', type);
if (typeof data.civility !== 'undefined' && null !== data.civility) {
data.civility = data.civility !== null ? {type: 'chill_main_civility', id: data.civility.id} : null;
}
if (typeof data.profession !== 'undefined' && '' !== data.profession) {
data.profession = data.profession !== '' ? data.profession : '';
}
// console.log('onthefly data', data);
}
} else {
throw 'error with object type';
}
}
// pass datas to parent
this.$emit('saveFormOnTheFly', { type: type, data: data });
},
buildLocation(id, type) {
if (type === 'person') {
// TODO i18n
return encodeURI(`/fr/person/${id}/general${this.getReturnPath}`);
} else if (type === 'thirdparty') {
return encodeURI(`/fr/3party/3party/${id}/view${this.getReturnPath}`);
}
}
}
}
default:
if (typeof this.type === "undefined") {
// action=create or addContact
// console.log('will rewrite data');
if (this.action === "addContact") {
type = "thirdparty";
data = this.$refs.castThirdparty.$data.thirdparty;
// console.log('data original', data);
data.parent = {
type: "thirdparty",
id: this.parent.id,
};
data.civility =
data.civility !== null
? {
type: "chill_main_civility",
id: data.civility.id,
}
: null;
data.profession =
data.profession !== "" ? data.profession : "";
} else {
type = this.$refs.castNew.radioType;
data = this.$refs.castNew.castDataByType();
// console.log('type', type);
if (
typeof data.civility !== "undefined" &&
null !== data.civility
) {
data.civility =
data.civility !== null
? {
type: "chill_main_civility",
id: data.civility.id,
}
: null;
}
if (
typeof data.profession !== "undefined" &&
"" !== data.profession
) {
data.profession =
data.profession !== ""
? data.profession
: "";
}
// console.log('onthefly data', data);
}
} else {
throw "error with object type";
}
}
// pass datas to parent
this.$emit("saveFormOnTheFly", { type: type, data: data });
},
buildLocation(id, type) {
if (type === "person") {
// TODO i18n
return encodeURI(
`/fr/person/${id}/general${this.getReturnPath}`,
);
} else if (type === "thirdparty") {
return encodeURI(
`/fr/3party/3party/${id}/view${this.getReturnPath}`,
);
}
},
},
};
</script>
<style lang="css" scoped>
a {
cursor: pointer;
cursor: pointer;
}
/* .btn-add-contact {

64
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/i18n.js
View File

@@ -1,35 +1,35 @@
const ontheflyMessages = {
fr: {
onthefly: {
show: {
person: "Détails de l'usager",
thirdparty: "Détails du tiers",
file_person: "Ouvrir la fiche de l'usager",
file_thirdparty: "Voir le Tiers",
},
edit: {
person: "Modifier un usager",
thirdparty: "Modifier un tiers",
},
create: {
button: "Créer \"{q}\"",
title: {
default: "Création d'un nouvel usager ou d'un tiers professionnel",
person: "Création d'un nouvel usager",
thirdparty: "Création d'un nouveau tiers professionnel",
},
person: "un nouvel usager",
thirdparty: "un nouveau tiers professionnel"
},
addContact: {
title: "Créer un contact pour {q}"
},
resource_comment_title: "Un commentaire est associé à cet interlocuteur",
addContact: {
title: "Créer un contact pour {q}"
}
}
}
}
fr: {
onthefly: {
show: {
person: "Détails de l'usager",
thirdparty: "Détails du tiers",
file_person: "Ouvrir la fiche de l'usager",
file_thirdparty: "Voir le Tiers",
},
edit: {
person: "Modifier un usager",
thirdparty: "Modifier un tiers",
},
create: {
button: 'Créer "{q}"',
title: {
default: "Création d'un nouvel usager ou d'un tiers professionnel",
person: "Création d'un nouvel usager",
thirdparty: "Création d'un nouveau tiers professionnel",
},
person: "un nouvel usager",
thirdparty: "un nouveau tiers professionnel",
},
addContact: {
title: "Créer un contact pour {q}",
},
resource_comment_title: "Un commentaire est associé à cet interlocuteur",
addContact: {
title: "Créer un contact pour {q}",
},
},
},
};
export { ontheflyMessages };

58
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js
View File

@@ -1,38 +1,40 @@
import { createApp } from "vue";
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
import { ontheflyMessages } from './i18n.js';
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
import { ontheflyMessages } from "./i18n.js";
import App from "./App.vue";
const i18n = _createI18n( ontheflyMessages );
const i18n = _createI18n(ontheflyMessages);
let containers = document.querySelectorAll('.onthefly-container');
let containers = document.querySelectorAll(".onthefly-container");
containers.forEach((container) => {
/*exported app */
const app = createApp({
template: `<app :onTheFly="this.onTheFly" ></app>`,
data() {
return {
onTheFly: {
context: {
action: container.dataset.action,
type: container.dataset.targetName,
id: parseInt(container.dataset.targetId),
},
options: {
buttonText: container.dataset.buttonText || null,
displayBadge: container.dataset.displayBadge || false,
isDead: container.dataset.isDead || false,
parent: container.dataset.parent ? JSON.parse(container.dataset.parent) : null,
}
}
}
}
})
/*exported app */
const app = createApp({
template: `<app :onTheFly="this.onTheFly" ></app>`,
data() {
return {
onTheFly: {
context: {
action: container.dataset.action,
type: container.dataset.targetName,
id: parseInt(container.dataset.targetId),
},
options: {
buttonText: container.dataset.buttonText || null,
displayBadge: container.dataset.displayBadge || false,
isDead: container.dataset.isDead || false,
parent: container.dataset.parent
? JSON.parse(container.dataset.parent)
: null,
},
},
};
},
})
.use(i18n)
.component('app', App)
.component("app", App)
.mount(container);
//console.log('container dataset', container.dataset);
//console.log('data-parent', container.dataset.parent);
//console.log('container dataset', container.dataset);
//console.log('data-parent', container.dataset.parent);
});

183
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
View File

@@ -1,37 +1,26 @@
<template>
<ul
:class="listClasses"
v-if="picked.length && displayPicked"
>
<li
v-for="p in picked"
@click="removeEntity(p)"
:key="p.type+p.id"
>
<span class="chill_denomination">{{ p.text }}</span>
</li>
</ul>
<ul class="record_actions">
<li class="add-persons">
<add-persons
:options="addPersonsOptions"
:key="uniqid"
:button-title="translatedListOfTypes"
:modal-title="translatedListOfTypes"
ref="addPersons"
@add-new-persons="addNewEntity"
/>
</li>
</ul>
<ul class="list-suggest add-items inline">
<li
v-for="s in suggested"
:key="s.id"
@click="addNewSuggested(s)"
>
<span>{{ s.text }}</span>
</li>
</ul>
<ul :class="listClasses" v-if="picked.length && displayPicked">
<li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
<span class="chill_denomination">{{ p.text }}</span>
</li>
</ul>
<ul class="record_actions">
<li class="add-persons">
<add-persons
:options="addPersonsOptions"
:key="uniqid"
:button-title="translatedListOfTypes"
:modal-title="translatedListOfTypes"
ref="addPersons"
@add-new-persons="addNewEntity"
/>
</li>
</ul>
<ul class="list-suggest add-items inline">
<li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
<span>{{ s.text }}</span>
</li>
</ul>
</template>
<script>
@@ -61,85 +50,91 @@ export default {
default: true,
},
displayPicked: {
// display picked entities.
type: Boolean,
default: true,
// display picked entities.
type: Boolean,
default: true,
},
suggested: {
type: Array,
default: []
type: Array,
default: [],
},
label: {
type: String,
required: false,
}
},
},
emits: ['addNewEntity', 'removeEntity'],
emits: ["addNewEntity", "removeEntity"],
components: {
AddPersons,
},
data() {
return {
key: ''
key: "",
};
},
computed: {
addPersonsOptions() {
return {
uniq: !this.multiple,
type: this.types,
priority: null,
button: {
size: 'btn-sm',
class: 'btn-submit',
},
};
},
translatedListOfTypes() {
if (this.label !== '') {
return this.label;
}
addPersonsOptions() {
return {
uniq: !this.multiple,
type: this.types,
priority: null,
button: {
size: "btn-sm",
class: "btn-submit",
},
};
},
translatedListOfTypes() {
if (this.label !== "") {
return this.label;
}
let trans = [];
this.types.forEach(t => {
if (this.$props.multiple) {
trans.push(appMessages.fr.pick_entity[t].toLowerCase());
} else {
trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase());
}
})
let trans = [];
this.types.forEach((t) => {
if (this.$props.multiple) {
trans.push(appMessages.fr.pick_entity[t].toLowerCase());
} else {
trans.push(
appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
);
}
});
if (this.$props.multiple) {
return appMessages.fr.pick_entity.modal_title + trans.join(', ');
} else {
return appMessages.fr.pick_entity.modal_title_one + trans.join(', ');
}
},
listClasses() {
return {
'list-suggest': true,
'remove-items': this.$props.removableIfSet,
};
},
if (this.$props.multiple) {
return (
appMessages.fr.pick_entity.modal_title + trans.join(", ")
);
} else {
return (
appMessages.fr.pick_entity.modal_title_one +
trans.join(", ")
);
}
},
listClasses() {
return {
"list-suggest": true,
"remove-items": this.$props.removableIfSet,
};
},
},
methods: {
addNewSuggested(entity) {
this.$emit('addNewEntity', {entity: entity});
},
addNewEntity({ selected, modal }) {
selected.forEach((item) => {
this.$emit('addNewEntity', { entity: item.result});
}, this
);
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
},
removeEntity(entity) {
if (!this.$props.removableIfSet) {
return;
}
this.$emit('removeEntity',{ entity: entity });
}
addNewSuggested(entity) {
this.$emit("addNewEntity", { entity: entity });
},
addNewEntity({ selected, modal }) {
selected.forEach((item) => {
this.$emit("addNewEntity", { entity: item.result });
}, this);
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
},
removeEntity(entity) {
if (!this.$props.removableIfSet) {
return;
}
this.$emit("removeEntity", { entity: entity });
},
},
}
};
</script>

44
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/i18n.js
View File

@@ -1,24 +1,30 @@
import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n';
import { thirdpartyMessages } from 'ChillThirdPartyAssets/vuejs/_js/i18n';
import { addressMessages } from 'ChillMainAssets/vuejs/Address/i18n';
import { ontheflyMessages } from 'ChillMainAssets/vuejs/OnTheFly/i18n';
import { personMessages } from "ChillPersonAssets/vuejs/_js/i18n";
import { thirdpartyMessages } from "ChillThirdPartyAssets/vuejs/_js/i18n";
import { addressMessages } from "ChillMainAssets/vuejs/Address/i18n";
import { ontheflyMessages } from "ChillMainAssets/vuejs/OnTheFly/i18n";
const appMessages = {
fr: {
pick_entity: {
add: 'Ajouter',
modal_title: 'Ajouter des ',
user: 'Utilisateurs',
person: 'Usagers',
thirdparty: 'Tiers',
modal_title_one: 'Indiquer un ',
user_one: 'Utilisateur',
thirdparty_one: 'Tiers',
person_one: 'Usager',
}
}
}
fr: {
pick_entity: {
add: "Ajouter",
modal_title: "Ajouter des ",
user: "Utilisateurs",
person: "Usagers",
thirdparty: "Tiers",
modal_title_one: "Indiquer un ",
user_one: "Utilisateur",
thirdparty_one: "Tiers",
person_one: "Usager",
},
},
};
Object.assign(appMessages.fr, personMessages.fr, thirdpartyMessages.fr, addressMessages.fr, ontheflyMessages.fr );
Object.assign(
appMessages.fr,
personMessages.fr,
thirdpartyMessages.fr,
addressMessages.fr,
ontheflyMessages.fr,
);
export { appMessages };

190
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
View File

@@ -1,107 +1,109 @@
<template>
<div class="PickPostalCode">
<vue-multiselect
id="citySelector"
@search-change="listenInputSearch"
ref="citySelector"
v-model="internalPicked"
@select="selectCity"
@remove="remove"
name=""
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
:loading="isLoading"
:options="cities"
/>
</div>
<div class="PickPostalCode">
<vue-multiselect
id="citySelector"
@search-change="listenInputSearch"
ref="citySelector"
v-model="internalPicked"
@select="selectCity"
@remove="remove"
name=""
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
:loading="isLoading"
:options="cities"
/>
</div>
</template>
<script lang="js">
import VueMultiselect from "vue-multiselect";
import { searchCities} from "./api";
import { searchCities } from "./api";
export default {
components: {
VueMultiselect,
},
data() {
return {
cities: [],
internalPicked: null,
isLoading: false,
abortControllers: [],
}
},
emits: ['pickCity', 'removeCity'],
props: {
picked: {
type: Object,
required: false,
default: null
components: {
VueMultiselect,
},
country: {
type: Object,
required: false,
default: null
}
},
mounted() {
if (this.picked !== null) {
this.internalPicked = this.picked;
this.cities.push(this.picked);
}
},
methods: {
transName(value) {
return (value.code && value.name) ? `${value.name} (${value.code})` : '';
data() {
return {
cities: [],
internalPicked: null,
isLoading: false,
abortControllers: [],
};
},
selectCity(city) {
this.$emit('selectCity', city);
emits: ["pickCity", "removeCity"],
props: {
picked: {
type: Object,
required: false,
default: null,
},
country: {
type: Object,
required: false,
default: null,
},
},
listenInputSearch(query) {
if (query.length <= 2) {
return;
}
let c = this.abortControllers.pop();
while (typeof c !== 'undefined') {
c.abort();
c = this.abortControllers.pop();
}
this.isLoading = true;
let controller = new AbortController();
this.abortControllers.push(controller);
searchCities(query, this.country, controller).then(
newCities => {
this.cities = this.cities.filter(city => city.id === this.picked);
newCities.forEach(item => {
this.cities.push(item);
})
this.isLoading = false;
return Promise.resolve();
})
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
mounted() {
if (this.picked !== null) {
this.internalPicked = this.picked;
this.cities.push(this.picked);
}
},
remove(item) {
this.$emit('removeCity', item);
}
},
}
methods: {
transName(value) {
return value.code && value.name
? `${value.name} (${value.code})`
: "";
},
selectCity(city) {
this.$emit("selectCity", city);
},
listenInputSearch(query) {
if (query.length <= 2) {
return;
}
let c = this.abortControllers.pop();
while (typeof c !== "undefined") {
c.abort();
c = this.abortControllers.pop();
}
this.isLoading = true;
let controller = new AbortController();
this.abortControllers.push(controller);
searchCities(query, this.country, controller)
.then((newCities) => {
this.cities = this.cities.filter(
(city) => city.id === this.picked,
);
newCities.forEach((item) => {
this.cities.push(item);
});
this.isLoading = false;
return Promise.resolve();
})
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
},
remove(item) {
this.$emit("removeCity", item);
},
},
};
</script>

37
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/api.js
View File

@@ -1,4 +1,4 @@
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
/**
* Endpoint chill_api_single_postal_code__index
@@ -7,14 +7,17 @@ import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
* @returns {Promise} a promise containing all Postal Code objects filtered with country
*/
const fetchCities = (country) => {
// warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
const params = new URLSearchParams({item_per_page: 100});
// warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
const params = new URLSearchParams({ item_per_page: 100 });
if (country !== null) {
params.append('country', country.id);
}
if (country !== null) {
params.append("country", country.id);
}
return makeFetch('GET', `/api/1.0/main/postal-code.json?${params.toString()}`).then(r => Promise.resolve(r.results));
return makeFetch(
"GET",
`/api/1.0/main/postal-code.json?${params.toString()}`,
).then((r) => Promise.resolve(r.results));
};
/**
@@ -26,18 +29,16 @@ const fetchCities = (country) => {
* @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
*/
const searchCities = (search, country, controller) => {
const url = '/api/1.0/main/postal-code/search.json?';
const params = new URLSearchParams({q: search});
const url = "/api/1.0/main/postal-code/search.json?";
const params = new URLSearchParams({ q: search });
if (country !== null) {
Object.assign('country', country.id);
}
if (country !== null) {
Object.assign("country", country.id);
}
return makeFetch('GET', url + params, null, {signal: controller.signal})
.then(result => Promise.resolve(result.results));
return makeFetch("GET", url + params, null, {
signal: controller.signal,
}).then((result) => Promise.resolve(result.results));
};
export {
fetchCities,
searchCities,
};
export { fetchCities, searchCities };

80
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
View File

@@ -1,68 +1,80 @@
<template>
<span v-if="data.working_ref_status === 'to_review'" class="badge bg-danger address-details-button-warning">L'adresse de référence a été modifiée</span>
<a v-if="data.loading === false" @click.prevent="clickOrOpen" class="btn btn-sm address-details-button" title="Plus de détails">
<span class="fa fa-map-o"></span>
</a>
<span v-if="data.loading" class="fa fa-spin fa-spinner "></span>
<AddressModal :address="data.working_address" @update-address="onUpdateAddress" ref="address_modal"></AddressModal>
<span
v-if="data.working_ref_status === 'to_review'"
class="badge bg-danger address-details-button-warning"
>L'adresse de référence a été modifiée</span
>
<a
v-if="data.loading === false"
@click.prevent="clickOrOpen"
class="btn btn-sm address-details-button"
title="Plus de détails"
>
<span class="fa fa-map-o"></span>
</a>
<span v-if="data.loading" class="fa fa-spin fa-spinner"></span>
<AddressModal
:address="data.working_address"
@update-address="onUpdateAddress"
ref="address_modal"
></AddressModal>
</template>
<script lang="ts" setup>
import {Address, AddressRefStatus} from "../../../types";
import {onMounted, reactive, ref} from "vue";
import {getAddressById} from "../../../lib/api/address";
import { Address, AddressRefStatus } from "../../../types";
import { onMounted, reactive, ref } from "vue";
import { getAddressById } from "../../../lib/api/address";
import AddressModal from "./AddressModal.vue";
export interface AddressModalContentProps {
address_id: number;
address_ref_status: AddressRefStatus;
address_id: number;
address_ref_status: AddressRefStatus;
}
interface AddressModalData {
loading: boolean,
working_address: Address | null,
working_ref_status: AddressRefStatus | null,
loading: boolean;
working_address: Address | null;
working_ref_status: AddressRefStatus | null;
}
const data: AddressModalData = reactive({
loading: false,
working_address: null,
working_ref_status: null,
loading: false,
working_address: null,
working_ref_status: null,
} as AddressModalData);
const props = defineProps<AddressModalContentProps>();
const emit = defineEmits<(e: 'update-address', value: Address) => void>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const address_modal = ref<InstanceType<typeof AddressModal> | null>(null);
onMounted(() => {
data.working_ref_status = props.address_ref_status;
data.working_ref_status = props.address_ref_status;
});
async function clickOrOpen(): Promise<void> {
if (data.working_address === null) {
data.loading = true;
data.working_address = await getAddressById(props.address_id);
data.working_ref_status = data.working_address.refStatus;
data.loading = false;
}
if (data.working_address === null) {
data.loading = true;
data.working_address = await getAddressById(props.address_id);
data.working_ref_status = data.working_address.refStatus;
data.loading = false;
}
// open the modal
address_modal.value?.open();
// open the modal
address_modal.value?.open();
}
const onUpdateAddress = (address: Address): void => {
data.working_address = address;
data.working_ref_status = address.refStatus;
emit('update-address', address);
}
data.working_address = address;
data.working_ref_status = address.refStatus;
emit("update-address", address);
};
</script>
<style scoped lang="scss">
.address-details-button-warning {
display: inline-block;
margin-right: 0.3rem;
display: inline-block;
margin-right: 0.3rem;
}
</style>

31
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
View File

@@ -1,31 +1,36 @@
<template>
<address-render-box :address="props.address" :show-button-details="false"></address-render-box>
<address-details-ref-matching :address="props.address" @update-address="onUpdateAddress"></address-details-ref-matching>
<address-details-map :address="props.address"></address-details-map>
<address-details-geographical-layers :address="props.address"></address-details-geographical-layers>
<address-render-box
:address="props.address"
:show-button-details="false"
></address-render-box>
<address-details-ref-matching
:address="props.address"
@update-address="onUpdateAddress"
></address-details-ref-matching>
<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 { Address } from "../../../types";
import AddressDetailsMap from "./Parts/AddressDetailsMap.vue";
import AddressRenderBox from "../Entity/AddressRenderBox.vue";
import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographicalLayers.vue";
import AddressDetailsRefMatching from "./Parts/AddressDetailsRefMatching.vue";
interface AddressModalContentProps {
address: Address,
address: Address;
}
const props = defineProps<AddressModalContentProps>();
const emit = defineEmits<(e: 'update-address', value: Address) => void>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const onUpdateAddress = (address: Address): void => {
emit('update-address', address);
}
emit("update-address", address);
};
</script>
<style scoped>
</style>
<style scoped></style>

58
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
View File

@@ -1,55 +1,55 @@
<template>
<teleport to="body">
<modal v-if="state.show_modal" @close="close">
<template v-slot:header>
<h2>Détails d'une adresse</h2>
</template>
<template v-slot:body>
<address-details-content :address="props.address" @update-address="onUpdateAddress"></address-details-content>
</template>
</modal>
</teleport>
<teleport to="body">
<modal v-if="state.show_modal" @close="close">
<template v-slot:header>
<h2>Détails d'une adresse</h2>
</template>
<template v-slot:body>
<address-details-content
:address="props.address"
@update-address="onUpdateAddress"
></address-details-content>
</template>
</modal>
</teleport>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
import {Address} from "../../../types";
import { reactive } from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { Address } from "../../../types";
import AddressDetailsContent from "./AddressDetailsContent.vue";
interface AddressModalProps {
address: Address
address: Address;
}
interface AddressModalState {
show_modal: boolean,
show_modal: boolean;
}
const props = defineProps<AddressModalProps>();
const emit = defineEmits<(e: 'update-address', value: Address) => void>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const state: AddressModalState = reactive({show_modal: false});
const state: AddressModalState = reactive({ show_modal: false });
const open = (): void => {
state.show_modal = true;
}
state.show_modal = true;
};
const close = (): void => {
state.show_modal = false;
}
state.show_modal = false;
};
const onUpdateAddress = (address: Address): void => {
emit('update-address', address);
}
emit("update-address", address);
};
defineExpose({
close,
open,
close,
open,
});
</script>
<style scoped>
</style>
<style scoped></style>

72
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
View File

@@ -1,55 +1,59 @@
<template>
<template v-for="(container, index) in data.containers" :key="index">
<h4>{{ container.layer.name.fr }}</h4>
<ul>
<li v-for="(unit, index) in container.units" :key="index">{{ unit.unitName }} ({{ unit.unitRefId }})</li>
</ul>
</template>
<template v-for="(container, index) in data.containers" :key="index">
<h4>{{ container.layer.name.fr }}</h4>
<ul>
<li v-for="(unit, index) in container.units" :key="index">
{{ 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";
import {
Address,
GeographicalUnitLayer,
SimpleGeographicalUnit,
} from "../../../../types";
import {
getGeographicalUnitsByAddress,
getAllGeographicalUnitLayers,
} from "../../../../lib/api/address";
import { onMounted, reactive } from "vue";
export interface AddressDetailsGeographicalLayersProp {
address: Address
};
address: Address;
}
interface GeographicalUnitContainer {
layer: GeographicalUnitLayer;
units: SimpleGeographicalUnit[];
layer: GeographicalUnitLayer;
units: SimpleGeographicalUnit[];
}
const props = defineProps<AddressDetailsGeographicalLayersProp>();
const data: {
containers: GeographicalUnitContainer[]
containers: GeographicalUnitContainer[];
} = reactive({
containers: []
containers: [],
});
onMounted(async () => {
const [units, layers] = await Promise.all([
getGeographicalUnitsByAddress(props.address),
getAllGeographicalUnitLayers()
]) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
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
});
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>
<style scoped></style>

132
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
View File

@@ -1,90 +1,108 @@
<template>
<div v-if="props.address.isNoAddress" class="alert alert-info">
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>
<p>Voir sur <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a> <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a></p>
<div v-if="props.address.isNoAddress" class="alert alert-info">
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>
<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>
import {onMounted, ref} from "vue";
import 'leaflet/dist/leaflet.css';
import { onMounted, ref } from "vue";
import "leaflet/dist/leaflet.css";
import markerIconPng from "leaflet/dist/images/marker-icon.png";
import L, {LatLngExpression, LatLngTuple} from "leaflet";
import {Address, Point} from "../../../../types";
import L, { LatLngExpression, LatLngTuple } from "leaflet";
import { Address, Point } from "../../../../types";
const lonLatForLeaflet = (point: Point): LatLngTuple => {
return [point.coordinates[1], point.coordinates[0]];
}
return [point.coordinates[1], point.coordinates[0]];
};
export interface MapProps {
address: Address,
address: Address;
}
const props = defineProps<MapProps>();
const map_div = ref<HTMLDivElement | null>(null)
let map: L.Map|null = null;
let marker: L.Marker|null = null;
const map_div = ref<HTMLDivElement | null>(null);
let map: L.Map | null = null;
let marker: L.Marker | null = null;
onMounted(() => {
if (map_div.value === null) {
// there is no map div when the address does not have any Point
return;
}
if (map_div.value === null) {
// there is no map div when the address does not have any Point
return;
}
if (props.address.point !== null) {
map = L.map(map_div.value);
map.setView(lonLatForLeaflet(props.address.point), 18);
if (props.address.point !== null) {
map = L.map(map_div.value);
map.setView(lonLatForLeaflet(props.address.point), 18);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
marker = L.marker(lonLatForLeaflet(props.address.point), {icon: markerIcon});
marker.addTo(map);
}
marker = L.marker(lonLatForLeaflet(props.address.point), {
icon: markerIcon,
});
marker.addTo(map);
}
});
const makeUrlGoogleMap = (address: Address): string => {
const params = new URLSearchParams();
params.append('api', '1');
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(', '));
}
const params = new URLSearchParams();
params.append("api", "1");
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(", "));
}
return `https://www.google.com/maps/search/?${params.toString()}`;
}
return `https://www.google.com/maps/search/?${params.toString()}`;
};
const makeUrlOsm = (address: Address): string => {
if (address.point !== null && address.addressReference !== 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]}`);
const hashParams = new URLSearchParams();
hashParams.append(
"map",
`18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`,
);
return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
}
const params = new URLSearchParams();
params.append('mlat', `${address.point.coordinates[1]}`);
params.append('mlon', `${address.point.coordinates[0]}`);
const hashParams = new URLSearchParams();
hashParams.append('map', `18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`);
params.append("query", address.lines.join(", "));
return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
}
const params = new URLSearchParams();
params.append('query', address.lines.join(', '));
return `https://www.openstreetmap.org/search?${params.toString()}`;
}
return `https://www.openstreetmap.org/search?${params.toString()}`;
};
</script>
<style scoped>
div.address_details_map {
height: 250px;
height: 250px;
}
</style>

211
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue
View File

@@ -1,94 +1,179 @@
<template>
<template v-if="props.address.refStatus !== 'match'">
<div v-if="props.address.refStatus === 'to_review' || props.address.refStatus === 'reviewed'" :class="{alert: true, 'alert-danger': props.address.refStatus === 'to_review', 'alert-warning': props.address.refStatus === 'reviewed'}">
<p v-if="props.address.refStatus === 'to_review'"><i class="fa fa-warning"></i> L'adresse de référence a été modifiée.</p>
<p v-if="props.address.refStatus === 'reviewed'">L'adresse est conservée, mais diffère de l'adresse de référence.</p>
<template v-if="props.address.refStatus !== 'match'">
<div
v-if="
props.address.refStatus === 'to_review' ||
props.address.refStatus === 'reviewed'
"
:class="{
alert: true,
'alert-danger': props.address.refStatus === 'to_review',
'alert-warning': props.address.refStatus === 'reviewed',
}"
>
<p v-if="props.address.refStatus === 'to_review'">
<i class="fa fa-warning"></i> L'adresse de référence a été
modifiée.
</p>
<p v-if="props.address.refStatus === 'reviewed'">
L'adresse est conservée, mais diffère de l'adresse de référence.
</p>
<template v-if="props.address.addressReference.street !== props.address.street || props.address.addressReference.streetNumber !== props.address.streetNumber">
<template v-if="props.address.country.code === 'BE'">
<div class="difference">
<span class="old">{{ props.address.street }} {{props.address.streetNumber}}</span>
<span class="new">{{ props.address.addressReference.street }} {{ props.address.addressReference.streetNumber }}</span>
</div>
</template>
<template v-else>
<div class="difference">
<span class="old">{{props.address.streetNumber}} {{ props.address.street }}</span>
<span class="new">{{ props.address.addressReference.streetNumber }} {{ props.address.addressReference.street }}</span>
</div>
</template>
</template>
<template
v-if="
props.address.addressReference.street !==
props.address.street ||
props.address.addressReference.streetNumber !==
props.address.streetNumber
"
>
<template v-if="props.address.country.code === 'BE'">
<div class="difference">
<span class="old"
>{{ props.address.street }}
{{ props.address.streetNumber }}</span
>
<span class="new"
>{{ props.address.addressReference.street }}
{{
props.address.addressReference.streetNumber
}}</span
>
</div>
</template>
<template v-else>
<div class="difference">
<span class="old"
>{{ props.address.streetNumber }}
{{ props.address.street }}</span
>
<span class="new"
>{{ props.address.addressReference.streetNumber }}
{{ props.address.addressReference.street }}</span
>
</div>
</template>
</template>
<template v-if="props.address.addressReference.postcode.id !== props.address.postcode.id">
<div class="difference">
<span class="old">{{ props.address.postcode.code }} {{props.address.postcode.name }}</span>
<span class="new">{{ props.address.addressReference.postcode.code }} {{ props.address.addressReference.postcode.name }}</span>
<template
v-if="
props.address.addressReference.postcode.id !==
props.address.postcode.id
"
>
<div class="difference">
<span class="old"
>{{ props.address.postcode.code }}
{{ props.address.postcode.name }}</span
>
<span class="new"
>{{ props.address.addressReference.postcode.code }}
{{ props.address.addressReference.postcode.name }}</span
>
</div>
</template>
<template
v-if="
props.address.point !== null &&
(props.address.point.coordinates[0] !==
props.address.addressReference.point.coordinates[0] ||
props.address.point.coordinates[1] !==
props.address.addressReference.point.coordinates[1])
"
>
<div class="difference">
<span class="old"
>{{ props.address.point.coordinates[0] }}
{{ props.address.point.coordinates[1] }}</span
>
<span class="new"
>{{
props.address.addressReference.point.coordinates[0]
}}
{{
props.address.addressReference.point.coordinates[1]
}}</span
>
</div>
</template>
<ul class="record_actions">
<li v-if="props.address.refStatus === 'to_review'">
<button class="btn btn-sm btn-update" @click="applyUpdate">
Appliquer les modifications
</button>
</li>
<li v-if="props.address.refStatus === 'to_review'">
<button
class="btn btn-sm btn-primary"
@click="keepCurrentAddress"
>
Conserver
</button>
</li>
<li v-if="props.address.refStatus === 'reviewed'">
<button
class="btn btn-sm btn-primary"
@click="backToReview"
>
Ré-examiner
</button>
</li>
</ul>
</div>
</template>
<template v-if="props.address.point !== null && (props.address.point.coordinates[0] !== props.address.addressReference.point.coordinates[0] || props.address.point.coordinates[1] !== props.address.addressReference.point.coordinates[1])">
<div class="difference">
<span class="old">{{ props.address.point.coordinates[0] }} {{ props.address.point.coordinates[1]}}</span>
<span class="new">{{ props.address.addressReference.point.coordinates[0] }} {{ props.address.addressReference.point.coordinates[1]}}</span>
</div>
</template>
<ul class="record_actions">
<li v-if="props.address.refStatus === 'to_review'"><button class="btn btn-sm btn-update" @click="applyUpdate">Appliquer les modifications</button></li>
<li v-if="props.address.refStatus === 'to_review'"><button class="btn btn-sm btn-primary" @click="keepCurrentAddress">Conserver</button></li>
<li v-if="props.address.refStatus === 'reviewed'"><button class="btn btn-sm btn-primary" @click="backToReview">Ré-examiner</button></li>
</ul>
</div>
</template>
</template>
</template>
<script lang="ts" setup>
import {Address} from "../../../../types";
import {markAddressReviewed, markAddressToReview, syncAddressWithReference} from "../../../../lib/api/address";
import { Address } from "../../../../types";
import {
markAddressReviewed,
markAddressToReview,
syncAddressWithReference,
} from "../../../../lib/api/address";
export interface AddressDetailsRefMatchingProps {
address: Address;
address: Address;
}
const props = defineProps<AddressDetailsRefMatchingProps>();
const emit = defineEmits<(e: 'update-address', value: Address) => void>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const applyUpdate = async () => {
const new_address = await syncAddressWithReference(props.address);
emit('update-address', new_address);
}
emit("update-address", new_address);
};
const keepCurrentAddress = async () => {
const new_address = await markAddressReviewed(props.address);
const new_address = await markAddressReviewed(props.address);
emit("update-address", new_address);
}
emit("update-address", new_address);
};
const backToReview = async () => {
const new_address = await markAddressToReview(props.address);
emit("update-address", new_address);
}
const new_address = await markAddressToReview(props.address);
emit("update-address", new_address);
};
</script>
<style scoped lang="scss">
.difference {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
span {
display: block;
}
span {
display: block;
}
.old {
text-decoration: red line-through;
}
.new {
font-weight: bold;
color: green;
}
.old {
text-decoration: red line-through;
}
.new {
font-weight: bold;
color: green;
}
}
</style>

89
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
View File

@@ -1,58 +1,47 @@
<template>
<span
v-if="entity.type === 'person'"
class="badge rounded-pill bg-person"
>
{{ $t('person') }}
</span>
<span v-if="entity.type === 'person'" class="badge rounded-pill bg-person">
{{ $t("person") }}
</span>
<span
v-if="entity.type === 'thirdparty'"
class="badge rounded-pill bg-thirdparty"
>
<template v-if="options.displayLong !== true">
{{ $t('thirdparty.thirdparty') }}
</template>
<span
v-if="entity.type === 'thirdparty'"
class="badge rounded-pill bg-thirdparty"
>
<template v-if="options.displayLong !== true">
{{ $t("thirdparty.thirdparty") }}
</template>
<i
class="fa fa-fw fa-user"
v-if="entity.kind === 'child'"
/>
<i
class="fa fa-fw fa-hospital-o"
v-else-if="entity.kind === 'company'"
/>
<i
class="fa fa-fw fa-user-md"
v-else
/>
<i class="fa fa-fw fa-user" v-if="entity.kind === 'child'" />
<i
class="fa fa-fw fa-hospital-o"
v-else-if="entity.kind === 'company'"
/>
<i class="fa fa-fw fa-user-md" v-else />
<template v-if="options.displayLong === true">
<span v-if="entity.kind === 'child'">{{ $t('thirdparty.child') }}</span>
<span v-else-if="entity.kind === 'company'">{{ $t('thirdparty.company') }}</span>
<span v-else>{{ $t('thirdparty.contact') }}</span>
</template>
</span>
<template v-if="options.displayLong === true">
<span v-if="entity.kind === 'child'">{{
$t("thirdparty.child")
}}</span>
<span v-else-if="entity.kind === 'company'">{{
$t("thirdparty.company")
}}</span>
<span v-else>{{ $t("thirdparty.contact") }}</span>
</template>
</span>
<span
v-if="entity.type === 'user'"
class="badge rounded-pill bg-user"
>
{{ $t('user') }}
</span>
<span v-if="entity.type === 'user'" class="badge rounded-pill bg-user">
{{ $t("user") }}
</span>
<span
v-if="entity.type === 'household'"
class="badge rounded-pill bg-user"
>
{{ $t('household') }}
</span>
<span v-if="entity.type === 'household'" class="badge rounded-pill bg-user">
{{ $t("household") }}
</span>
</template>
<script>
export default {
name: "BadgeEntity",
props: ['options', 'entity'],
props: ["options", "entity"],
i18n: {
messages: {
fr: {
@@ -63,10 +52,10 @@ export default {
company: "Personne morale",
contact: "Personne physique",
},
user: 'TMS',
household: 'Ménage',
}
}
}
}
user: "TMS",
household: "Ménage",
},
},
},
};
</script>

40
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="confidential">
<div :class="{ 'blur': isBlurred }">
<slot name="confidential-content" />
<div class="confidential">
<div :class="{ blur: isBlurred }">
<slot name="confidential-content" />
</div>
<div class="toggle-container">
<i
class="fa toggle"
:class="toggleIcon"
aria-hidden="true"
@click="toggleBlur"
/>
</div>
</div>
<div class="toggle-container">
<i
class="fa toggle"
:class="toggleIcon"
aria-hidden="true"
@click="toggleBlur"
/>
</div>
</div>
</template>
<script>
@@ -20,21 +20,21 @@ export default {
data() {
return {
isBlurred: true,
toggleIcon: 'fa-eye',
toggleIcon: "fa-eye",
};
},
methods : {
methods: {
toggleBlur() {
console.log(this.positionBtnFar);
this.isBlurred = !this.isBlurred;
this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
this.toggleIcon = this.isBlurred ? "fa-eye" : "fa-eye-slash";
},
},
}
};
</script>
<style scoped lang='scss'>
.confidential{
align-content: center;
}
<style scoped lang="scss">
.confidential {
align-content: center;
}
</style>

245
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
View File

@@ -1,150 +1,131 @@
<template>
<component
:is="component"
class="chill-entity entity-address"
>
<component
:is="component"
class="address"
:class="multiline"
>
<div v-if="isConfidential">
<confidential :position-btn-far="true">
<template #confidential-content>
<div v-if="isMultiline === true">
<p
v-for="(l, i) in address.lines"
:key="`line-${i}`"
>
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
<component :is="component" class="chill-entity entity-address">
<component :is="component" class="address" :class="multiline">
<div v-if="isConfidential">
<confidential :position-btn-far="true">
<template #confidential-content>
<div v-if="isMultiline === true">
<p
v-for="(l, i) in address.lines"
:key="`line-${i}`"
>
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="'' !== address.text" class="street">
{{ address.text }}
</p>
<p
v-if="null !== address.postcode"
class="postcode"
>
{{ address.postcode.code }}
{{ address.postcode.name }}
</p>
<p v-if="null !== address.country" class="country">
{{ address.country.name.fr }}
</p>
</div>
</template>
</confidential>
</div>
<div v-else>
<p
v-if="'' !== address.text"
class="street"
>
{{ address.text }}
</p>
<p
v-if="null !== address.postcode"
class="postcode"
>
{{ address.postcode.code }} {{ address.postcode.name }}
</p>
<p
v-if="null !== address.country"
class="country"
>
{{ address.country.name.fr }}
</p>
</div>
</template>
</confidential>
</div>
<div v-if="!isConfidential">
<div v-if="isMultiline === true">
<p
v-for="(l, i) in address.lines"
:key="`line-${i}`"
>
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
<div v-if="!isConfidential">
<div v-if="isMultiline === true">
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="address.text" class="street">
{{ address.text }}
<template v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</template>
</p>
</div>
</div>
</component>
<div v-if="useDatePane === true" class="address-more">
<div v-if="address.validFrom">
<span class="validFrom">
<b>{{ $t("validFrom") }}</b
>: {{ $d(address.validFrom.date) }}
</span>
</div>
<div v-if="address.validTo">
<span class="validTo">
<b>{{ $t("validTo") }}</b
>: {{ $d(address.validTo.date) }}
</span>
</div>
</div>
<div v-else>
<p
v-if="address.text"
class="street"
>
{{ address.text }} <template v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</template>
</p>
</div>
</div>
</component>
<div
v-if="useDatePane === true"
class="address-more"
>
<div v-if="address.validFrom">
<span class="validFrom">
<b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
</span>
</div>
<div v-if="address.validTo">
<span class="validTo">
<b>{{ $t('validTo') }}</b>: {{ $d(address.validTo.date) }}
</span>
</div>
</div>
</component>
</template>
<script>
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
export default {
name: 'AddressRenderBox',
components: {
Confidential,
AddressDetailsButton,
},
props: {
address: {
type: Object
},
isMultiline: {
default: true,
type: Boolean
},
useDatePane: {
default: false,
type: Boolean
},
showButtonDetails: {
default: true,
type: Boolean
}
},
computed: {
component() {
return this.isMultiline === true ? "div" : "span";
},
multiline() {
return this.isMultiline === true ? "multiline" : "";
},
isConfidential() {
return this.address.confidential;
}
}
name: "AddressRenderBox",
components: {
Confidential,
AddressDetailsButton,
},
props: {
address: {
type: Object,
},
isMultiline: {
default: true,
type: Boolean,
},
useDatePane: {
default: false,
type: Boolean,
},
showButtonDetails: {
default: true,
type: Boolean,
},
},
computed: {
component() {
return this.isMultiline === true ? "div" : "span";
},
multiline() {
return this.isMultiline === true ? "multiline" : "";
},
isConfidential() {
return this.address.confidential;
},
},
};
</script>
<style lang="scss" scoped>
p {
&:after {
content: " ";
margin-right: 0.3em;
}
&:after {
content: " ";
margin-right: 0.3em;
}
}
</style>

8
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
View File

@@ -1,11 +1,9 @@
<template>
<i :class="gender.icon" />
<i :class="gender.icon" />
</template>
<script setup>
const props = defineProps({
gender: Object
})
gender: Object,
});
</script>

33
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
View File

@@ -1,23 +1,24 @@
<template>
<span class="chill-entity entity-user">
{{ user.label }}
<span
class="user-job"
v-if="user.user_job !== null"
>({{ user.user_job.label.fr }})</span> <span
class="main-scope"
v-if="user.main_scope !== null"
>({{ user.main_scope.name.fr }})</span> <span
v-if="user.isAbsent"
class="badge bg-danger rounded-pill"
:title="Absent"
>A</span>
</span>
<span class="chill-entity entity-user">
{{ user.label }}
<span class="user-job" v-if="user.user_job !== null"
>({{ user.user_job.label.fr }})</span
>
<span class="main-scope" v-if="user.main_scope !== null"
>({{ user.main_scope.name.fr }})</span
>
<span
v-if="user.isAbsent"
class="badge bg-danger rounded-pill"
:title="Absent"
>A</span
>
</span>
</template>
<script>
export default {
name: "UserRenderBoxBadge",
props: ['user'],
}
props: ["user"],
};
</script>

113
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
View File

@@ -1,58 +1,61 @@
<template>
<div class="d-grid gap-2 my-3">
<button
class="btn btn-misc"
type="button"
v-if="!subscriberFinal"
@click="subscribeTo('subscribe', 'final')"
>
<i class="fa fa-check fa-fw" />
{{ $t('subscribe_final') }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberFinal"
@click="subscribeTo('unsubscribe', 'final')"
>
<i class="fa fa-times fa-fw" />
{{ $t('unsubscribe_final') }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="!subscriberStep"
@click="subscribeTo('subscribe', 'step')"
>
<i class="fa fa-check fa-fw" />
{{ $t('subscribe_all_steps') }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberStep"
@click="subscribeTo('unsubscribe', 'step')"
>
<i class="fa fa-times fa-fw" />
{{ $t('unsubscribe_all_steps') }}
</button>
</div>
<div class="d-grid gap-2 my-3">
<button
class="btn btn-misc"
type="button"
v-if="!subscriberFinal"
@click="subscribeTo('subscribe', 'final')"
>
<i class="fa fa-check fa-fw" />
{{ $t("subscribe_final") }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberFinal"
@click="subscribeTo('unsubscribe', 'final')"
>
<i class="fa fa-times fa-fw" />
{{ $t("unsubscribe_final") }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="!subscriberStep"
@click="subscribeTo('subscribe', 'step')"
>
<i class="fa fa-check fa-fw" />
{{ $t("subscribe_all_steps") }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberStep"
@click="subscribeTo('unsubscribe', 'step')"
>
<i class="fa fa-times fa-fw" />
{{ $t("unsubscribe_all_steps") }}
</button>
</div>
</template>
<script>
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
export default {
name: "EntityWorkflowVueSubscriber",
i18n: {
messages: {
fr: {
subscribe_final: "Recevoir une notification à l'étape finale",
unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
}
}
messages: {
fr: {
subscribe_final: "Recevoir une notification à l'étape finale",
unsubscribe_final:
"Ne plus recevoir de notification à l'étape finale",
subscribe_all_steps:
"Recevoir une notification à chaque étape du suivi",
unsubscribe_all_steps:
"Ne plus recevoir de notification à chaque étape du suivi",
},
},
},
props: {
entityWorkflowId: {
@@ -68,20 +71,22 @@ export default {
required: true,
},
},
emits: ['subscriptionUpdated'],
emits: ["subscriptionUpdated"],
methods: {
subscribeTo(step, to) {
let params = new URLSearchParams();
params.set('subscribe', to);
params.set("subscribe", to);
const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
const url =
`/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` +
params.toString();
makeFetch('POST', url).then(response => {
this.$emit('subscriptionUpdated', response);
makeFetch("POST", url).then((response) => {
this.$emit("subscriptionUpdated", response);
});
}
},
},
}
};
/*
* ALTERNATIVES
*

266
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
View File

@@ -1,147 +1,149 @@
<template>
<div
class="flex-table workflow"
id="workflow-list"
>
<div
v-for="(w, i) in workflows"
:key="`workflow-${i}`"
class="item-bloc"
>
<div>
<div class="item-row col">
<h2>{{ w.title }}</h2>
<div class="flex-grow-1 ms-3 h3">
<div class="visually-hidden">
{{ w.relatedEntityClass }}
{{ w.relatedEntityId }}
<div class="flex-table workflow" id="workflow-list">
<div
v-for="(w, i) in workflows"
:key="`workflow-${i}`"
class="item-bloc"
>
<div>
<div class="item-row col">
<h2>{{ w.title }}</h2>
<div class="flex-grow-1 ms-3 h3">
<div class="visually-hidden">
{{ w.relatedEntityClass }}
{{ w.relatedEntityId }}
</div>
</div>
</div>
<div class="breadcrumb">
<template v-for="(step, j) in w.steps" :key="`step-${j}`">
<span
class="mx-2"
tabindex="0"
data-bs-trigger="focus hover"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-custom-class="workflow-transition"
:title="getPopTitle(step)"
:data-bs-content="getPopContent(step)"
>
<i
v-if="step.currentStep.name === 'initial'"
class="fa fa-circle me-1 text-chill-yellow"
/>
<i
v-if="step.isFreezed"
class="fa fa-snowflake-o fa-sm me-1"
/>
{{ step.currentStep.text }}
</span>
<span v-if="j !== Object.keys(w.steps).length - 1">
→
</span>
</template>
</div>
</div>
</div>
</div>
<div class="breadcrumb">
<template
v-for="(step, j) in w.steps"
:key="`step-${j}`"
>
<span
class="mx-2"
tabindex="0"
data-bs-trigger="focus hover"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-custom-class="workflow-transition"
:title="getPopTitle(step)"
:data-bs-content="getPopContent(step)"
>
<i
v-if="step.currentStep.name === 'initial'"
class="fa fa-circle me-1 text-chill-yellow"
/>
<i
v-if="step.isFreezed"
class="fa fa-snowflake-o fa-sm me-1"
/>
{{ step.currentStep.text }}
</span>
<span v-if="j !== Object.keys(w.steps).length - 1">
→
</span>
</template>
<div class="item-row">
<div class="item-col flex-grow-1">
<p v-if="isUserSubscribedToStep(w)">
<i class="fa fa-check fa-fw" />
{{ $t("you_subscribed_to_all_steps") }}
</p>
<p v-if="isUserSubscribedToFinal(w)">
<i class="fa fa-check fa-fw" />
{{ $t("you_subscribed_to_final_step") }}
</p>
</div>
<div class="item-col">
<ul class="record_actions">
<li>
<a
:href="goToUrl(w)"
class="btn btn-sm btn-show"
:title="$t('action.show')"
/>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="item-row">
<div class="item-col flex-grow-1">
<p v-if="isUserSubscribedToStep(w)">
<i class="fa fa-check fa-fw" />
{{ $t('you_subscribed_to_all_steps') }}
</p>
<p v-if="isUserSubscribedToFinal(w)">
<i class="fa fa-check fa-fw" />
{{ $t('you_subscribed_to_final_step') }}
</p>
</div>
<div class="item-col">
<ul class="record_actions">
<li>
<a
:href="goToUrl(w)"
class="btn btn-sm btn-show"
:title="$t('action.show')"
/>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import Popover from 'bootstrap/js/src/popover';
import Popover from "bootstrap/js/src/popover";
const i18n = {
messages: {
fr: {
you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
by: "Par",
at: "Le"
}
}
}
messages: {
fr: {
you_subscribed_to_all_steps:
"Vous recevrez une notification à chaque étape",
you_subscribed_to_final_step:
"Vous recevrez une notification à l'étape finale",
by: "Par",
at: "Le",
},
},
};
export default {
name: "ListWorkflow",
i18n: i18n,
props: {
workflows: {
type: Array,
required: true,
}
},
methods: {
goToUrl(w) {
return `/fr/main/workflow/${w.id}/show`;
},
getPopTitle(step) {
if (step.transitionPrevious != null) {
//console.log(step.transitionPrevious.text);
let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
return `${freezed}${step.transitionPrevious.text}`;
}
},
getPopContent(step) {
if (step.transitionPrevious != null) {
return `<ul class="small_in_title">
name: "ListWorkflow",
i18n: i18n,
props: {
workflows: {
type: Array,
required: true,
},
},
methods: {
goToUrl(w) {
return `/fr/main/workflow/${w.id}/show`;
},
getPopTitle(step) {
if (step.transitionPrevious != null) {
//console.log(step.transitionPrevious.text);
let freezed = step.isFreezed
? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
: ``;
return `${freezed}${step.transitionPrevious.text}`;
}
},
getPopContent(step) {
if (step.transitionPrevious != null) {
return `<ul class="small_in_title">
<li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
<li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
</ul>`
;
}
},
formatDate(datetime) {
return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
},
isUserSubscribedToStep() {
// todo
return false;
},
isUserSubscribedToFinal() {
// todo
return false;
},
},
mounted() {
const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
const popoverList = triggerList.map(function (el) {
//console.log('popover', el)
return new Popover(el, {
html: true,
});
});
}
}
</ul>`;
}
},
formatDate(datetime) {
return (
datetime.split("T")[0] +
" " +
datetime.split("T")[1].substring(0, 5)
);
},
isUserSubscribedToStep() {
// todo
return false;
},
isUserSubscribedToFinal() {
// todo
return false;
},
},
mounted() {
const triggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]'),
);
const popoverList = triggerList.map(function (el) {
//console.log('popover', el)
return new Popover(el, {
html: true,
});
});
},
};
</script>

252
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
View File

@@ -1,140 +1,140 @@
<template>
<button
v-if="hasWorkflow"
class="btn btn-primary"
@click="openModal"
>
<b>{{ countWorkflows }}</b>
<template v-if="countWorkflows > 1">
{{ $t('workflows') }}
</template>
<template v-else>
{{ $t('workflow') }}
</template>
</button>
<button v-if="hasWorkflow" class="btn btn-primary" @click="openModal">
<b>{{ countWorkflows }}</b>
<template v-if="countWorkflows > 1">
{{ $t("workflows") }}
</template>
<template v-else>
{{ $t("workflow") }}
</template>
</button>
<pick-workflow
v-else-if="allowCreate"
:related-entity-class="this.relatedEntityClass"
:related-entity-id="this.relatedEntityId"
:workflows-availables="workflowsAvailables"
:prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
:go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
@go-to-generate-workflow="goToGenerateWorkflow"
/>
<pick-workflow
v-else-if="allowCreate"
:related-entity-class="this.relatedEntityClass"
:related-entity-id="this.relatedEntityId"
:workflows-availables="workflowsAvailables"
:prevent-default-move-to-generate="
this.$props.preventDefaultMoveToGenerate
"
:go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
@go-to-generate-workflow="goToGenerateWorkflow"
/>
<teleport to="body">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
@close="modal.showModal = false"
>
<template #header>
<h2 class="modal-title">
{{ $t('workflow_list') }}
</h2>
</template>
<teleport to="body">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
@close="modal.showModal = false"
>
<template #header>
<h2 class="modal-title">
{{ $t("workflow_list") }}
</h2>
</template>
<template #body>
<list-workflow-vue
:workflows="workflows"
/>
</template>
<template #body>
<list-workflow-vue :workflows="workflows" />
</template>
<template #footer>
<pick-workflow
v-if="allowCreate"
:related-entity-class="this.relatedEntityClass"
:related-entity-id="this.relatedEntityId"
:workflows-availables="workflowsAvailables"
:prevent-default-move-to-generate="this.$props.preventDefaultMoveToGenerate"
:go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
@go-to-generate-workflow="this.goToGenerateWorkflow"
/>
</template>
</modal>
</teleport>
<template #footer>
<pick-workflow
v-if="allowCreate"
:related-entity-class="this.relatedEntityClass"
:related-entity-id="this.relatedEntityId"
:workflows-availables="workflowsAvailables"
:prevent-default-move-to-generate="
this.$props.preventDefaultMoveToGenerate
"
:go-to-generate-workflow-payload="
this.goToGenerateWorkflowPayload
"
@go-to-generate-workflow="this.goToGenerateWorkflow"
/>
</template>
</modal>
</teleport>
</template>
<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import PickWorkflow from "ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue";
import ListWorkflowVue from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue";
export default {
name: "ListWorkflowModal",
components: {
Modal,
PickWorkflow,
ListWorkflowVue
},
emits: ['goToGenerateWorkflow'],
props: {
workflows: {
type: Array,
required: true,
},
allowCreate: {
type: Boolean,
required: true,
},
relatedEntityClass: {
type: String,
required: true,
},
relatedEntityId: {
type: Number,
required: false,
},
workflowsAvailables: {
type: Array,
required: true,
},
preventDefaultMoveToGenerate: {
type: Boolean,
required: false,
default: false,
},
goToGenerateWorkflowPayload: {
required: false,
default: {}
},
},
name: "ListWorkflowModal",
components: {
Modal,
PickWorkflow,
ListWorkflowVue,
},
emits: ["goToGenerateWorkflow"],
props: {
workflows: {
type: Array,
required: true,
},
allowCreate: {
type: Boolean,
required: true,
},
relatedEntityClass: {
type: String,
required: true,
},
relatedEntityId: {
type: Number,
required: false,
},
workflowsAvailables: {
type: Array,
required: true,
},
preventDefaultMoveToGenerate: {
type: Boolean,
required: false,
default: false,
},
goToGenerateWorkflowPayload: {
required: false,
default: {},
},
},
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl"
},
}
},
computed: {
countWorkflows() {
return this.workflows.length;
},
hasWorkflow() {
return this.countWorkflows > 0;
}
},
methods: {
openModal() {
this.modal.showModal = true;
},
goToGenerateWorkflow(data) {
console.log('go to generate workflow intercepted', data);
this.$emit('goToGenerateWorkflow', data);
}
},
i18n: {
messages: {
fr: {
workflow_list: "Liste des workflows associés",
workflow: " workflow associé",
workflows: " workflows associés",
}
}
}
}
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
},
};
},
computed: {
countWorkflows() {
return this.workflows.length;
},
hasWorkflow() {
return this.countWorkflows > 0;
},
},
methods: {
openModal() {
this.modal.showModal = true;
},
goToGenerateWorkflow(data) {
console.log("go to generate workflow intercepted", data);
this.$emit("goToGenerateWorkflow", data);
},
},
i18n: {
messages: {
fr: {
workflow_list: "Liste des workflows associés",
workflow: " workflow associé",
workflows: " workflows associés",
},
},
},
};
</script>
<style scoped></style>

85
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
View File

@@ -1,37 +1,31 @@
<template>
<template v-if="workflowsAvailables.length >= 1">
<div class="dropdown d-grid gap-2">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Créer un workflow
</button>
<ul
class="dropdown-menu"
aria-labelledby="createWorkflowButton"
>
<li
v-for="w in workflowsAvailables"
:key="w.name"
>
<a
class="dropdown-item"
:href="makeLink(w.name)"
@click.prevent="goToGenerateWorkflow($event, w.name)"
>{{ w.text }}</a>
</li>
</ul>
</div>
</template>
<template v-if="workflowsAvailables.length >= 1">
<div class="dropdown d-grid gap-2">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Créer un workflow
</button>
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
<li v-for="w in workflowsAvailables" :key="w.name">
<a
class="dropdown-item"
:href="makeLink(w.name)"
@click.prevent="goToGenerateWorkflow($event, w.name)"
>{{ w.text }}</a
>
</li>
</ul>
</div>
</template>
</template>
<script>
import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api.js';
import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api.js";
export default {
name: "PickWorkflow",
@@ -55,28 +49,35 @@ export default {
},
goToGenerateWorkflowPayload: {
required: false,
default: {}
default: {},
},
},
emits: ['goToGenerateWorkflow'],
emits: ["goToGenerateWorkflow"],
methods: {
makeLink(workflowName) {
return buildLinkCreate(workflowName, this.relatedEntityClass, this.relatedEntityId);
return buildLinkCreate(
workflowName,
this.relatedEntityClass,
this.relatedEntityId,
);
},
goToGenerateWorkflow(event, workflowName) {
console.log('goToGenerateWorkflow', event, workflowName);
console.log("goToGenerateWorkflow", event, workflowName);
if (!this.$props.preventDefaultMoveToGenerate) {
console.log('to go generate');
console.log("to go generate");
window.location.assign(this.makeLink(workflowName));
}
this.$emit('goToGenerateWorkflow', {event, workflowName, link: this.makeLink(workflowName), payload: this.goToGenerateWorkflowPayload});
}
}
}
this.$emit("goToGenerateWorkflow", {
event,
workflowName,
link: this.makeLink(workflowName),
payload: this.goToGenerateWorkflowPayload,
});
},
},
};
</script>
<style scoped>
</style>
<style scoped></style>

181
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
View File

@@ -1,58 +1,46 @@
<template>
<transition name="modal">
<div class="modal-mask">
<!-- :: styles bootstrap :: -->
<div
class="modal fade show"
style="display: block"
aria-modal="true"
role="dialog"
>
<div
class="modal-dialog"
:class="modalDialogClass"
>
<div class="modal-content">
<div class="modal-header">
<slot name="header" />
<button
class="close btn"
@click="$emit('close')"
>
<i
class="fa fa-times"
aria-hidden="true"
/>
</button>
</div>
<div class="modal-body">
<div class="body-head">
<slot name="body-head" />
</div>
<slot name="body" />
</div>
<transition name="modal">
<div class="modal-mask">
<!-- :: styles bootstrap :: -->
<div
class="modal-footer"
v-if="!hideFooter"
class="modal fade show"
style="display: block"
aria-modal="true"
role="dialog"
>
<button
class="btn btn-cancel"
@click="$emit('close')"
>
{{ $t('action.close') }}
</button>
<slot name="footer" />
<div class="modal-dialog" :class="modalDialogClass">
<div class="modal-content">
<div class="modal-header">
<slot name="header" />
<button class="close btn" @click="$emit('close')">
<i class="fa fa-times" aria-hidden="true" />
</button>
</div>
<div class="modal-body">
<div class="body-head">
<slot name="body-head" />
</div>
<slot name="body" />
</div>
<div class="modal-footer" v-if="!hideFooter">
<button
class="btn btn-cancel"
@click="$emit('close')"
>
{{ $t("action.close") }}
</button>
<slot name="footer" />
</div>
</div>
</div>
</div>
</div>
<!-- :: end styles bootstrap :: -->
</div>
</div>
<!-- :: end styles bootstrap :: -->
</div>
</transition>
</transition>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import { defineComponent } from "vue";
/*
* This Modal component is a mix between Vue3 modal implementation
* [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
@@ -63,41 +51,41 @@ import {defineComponent} from "vue";
* [+] modal design can be configured using css classes (size, scroll)
*/
export default defineComponent({
name: 'Modal',
props: {
modalDialogClass: {
type: Object,
required: false,
default: {},
},
hideFooter: {
type: Boolean,
required: false,
default: false
}
},
emits: ['close']
name: "Modal",
props: {
modalDialogClass: {
type: Object,
required: false,
default: {},
},
hideFooter: {
type: Boolean,
required: false,
default: false,
},
},
emits: ["close"],
});
</script>
<style lang="scss">
/**
/**
* This is a mask behind the modal.
*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity 0.3s ease;
}
.modal-header .close {
border-top-right-radius: 0.3rem;
}
/*
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity 0.3s ease;
}
.modal-header .close {
border-top-right-radius: 0.3rem;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
@@ -105,25 +93,24 @@ export default defineComponent({
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter
.modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h3.modal-title {
font-size: 1.5rem;
font-weight: bold;
}
div.modal-footer {
button:first-child {
margin-right: auto;
}
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h3.modal-title {
font-size: 1.5rem;
font-weight: bold;
}
div.modal-footer {
button:first-child {
margin-right: auto;
}
}
</style>

31
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue
View File

@@ -1,17 +1,14 @@
<template>
<div>
<button v-if="idsMarkedAsRead.length === 0"
<button
v-if="idsMarkedAsRead.length === 0"
class="btn btn-primary"
type="button"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
</button>
<button v-else
class="btn btn-primary"
type="button"
@click="undo"
>
<button v-else class="btn btn-primary" type="button" @click="undo">
<i class="fa fa-sm fa-envelope-open-o"></i> Annuler
</button>
</div>
@@ -22,29 +19,37 @@ import { makeFetch } from "../../../lib/api/apiMethods";
import { ref } from "vue";
const emit = defineEmits<{
(e: 'markAsRead', id: number): void,
(e: 'markAsUnRead', id: number): void,
(e: "markAsRead", id: number): void;
(e: "markAsUnRead", id: number): void;
}>();
const idsMarkedAsRead = ref([] as number[]);
async function markAllRead() {
const ids: number[] = await makeFetch("POST", `/api/1.0/main/notification/mark/allread`, null);
const ids: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/allread`,
null,
);
for (let i of ids) {
idsMarkedAsRead.value.push(i);
emit('markAsRead', i);
emit("markAsRead", i);
}
}
async function undo() {
const touched: number[] = await makeFetch("POST", `/api/1.0/main/notification/mark/undoallread`, idsMarkedAsRead.value);
const touched: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/undoallread`,
idsMarkedAsRead.value,
);
while (idsMarkedAsRead.value.length > 0) {
idsMarkedAsRead.value.pop();
}
for (let t of touched) {
emit('markAsUnRead', t);
emit("markAsUnRead", t);
}
};
}
</script>
<style lang="scss" scoped></style>

125
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
View File

@@ -1,71 +1,62 @@
<template>
<div
:class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
role="group"
aria-label="Notification actions"
>
<button
v-if="isRead"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAsUnread')"
@click="markAsUnread"
<div
:class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
role="group"
aria-label="Notification actions"
>
<i class="fa fa-sm fa-envelope-o" />
<span
v-if="!buttonNoText"
class="ps-2"
>
{{ $t("markAsUnread") }}
</span>
</button>
<button
v-if="isRead"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAsUnread')"
@click="markAsUnread"
>
<i class="fa fa-sm fa-envelope-o" />
<span v-if="!buttonNoText" class="ps-2">
{{ $t("markAsUnread") }}
</span>
</button>
<button
v-if="!isRead"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAsRead')"
@click="markAsRead"
>
<i class="fa fa-sm fa-envelope-open-o" />
<span
v-if="!buttonNoText"
class="ps-2"
>
{{ $t("markAsRead") }}
</span>
</button>
<button
v-if="!isRead"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAsRead')"
@click="markAsRead"
>
<i class="fa fa-sm fa-envelope-open-o" />
<span v-if="!buttonNoText" class="ps-2">
{{ $t("markAsRead") }}
</span>
</button>
<a
v-if="isButtonGroup"
type="button"
class="btn btn-outline-primary"
:href="showUrl"
:title="$t('action.show')"
>
<i class="fa fa-sm fa-comment-o" />
</a>
<a
v-if="isButtonGroup"
type="button"
class="btn btn-outline-primary"
:href="showUrl"
:title="$t('action.show')"
>
<i class="fa fa-sm fa-comment-o" />
</a>
<!-- "Mark All Read" button -->
<button
v-if="showMarkAllButton"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAllRead')"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-o" />
<span
v-if="!buttonNoText"
class="ps-2"
>
{{ $t("markAllRead") }}
</span>
</button>
</div>
<!-- "Mark All Read" button -->
<button
v-if="showMarkAllButton"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAllRead')"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-o" />
<span v-if="!buttonNoText" class="ps-2">
{{ $t("markAllRead") }}
</span>
</button>
</div>
</template>
<script>
@@ -117,16 +108,16 @@ export default {
makeFetch(
"POST",
`/api/1.0/main/notification/${this.notificationId}/mark/unread`,
[]
[],
).then(() => {
this.$emit("markRead", {notificationId: this.notificationId});
this.$emit("markRead", { notificationId: this.notificationId });
});
},
markAsRead() {
makeFetch(
"POST",
`/api/1.0/main/notification/${this.notificationId}/mark/read`,
[]
[],
).then(() => {
this.$emit("markUnread", {
notificationId: this.notificationId,
@@ -137,7 +128,7 @@ export default {
makeFetch(
"POST",
`/api/1.0/main/notification/markallread`,
[]
[],
).then(() => {
this.$emit("markAllRead");
});

482
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
View File

@@ -1,265 +1,253 @@
<template>
<a
v-if="isOpenDocument"
class="btn"
:class="[
isChangeIcon ? 'change-icon' : '',
isChangeClass ? options.changeClass : 'btn-wopilink' ]"
@click="openModal"
>
<i
v-if="isChangeIcon"
class="fa me-2"
:class="options.changeIcon"
/>
<span v-if="!noText">
{{ $t('online_edit_document') }}
</span>
</a>
<teleport to="body">
<div
class="wopi-frame"
v-if="isOpenDocument"
<a
v-if="isOpenDocument"
class="btn"
:class="[
isChangeIcon ? 'change-icon' : '',
isChangeClass ? options.changeClass : 'btn-wopilink',
]"
@click="openModal"
>
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
:hide-footer="true"
@close="modal.showModal = false"
>
<template #header>
<img
class="logo"
:src="logo"
height="45"
>
<span class="ms-auto me-3">
<span v-if="options.title">{{ options.title }}</span>
</span>
<!--
<i v-if="isChangeIcon" class="fa me-2" :class="options.changeIcon" />
<span v-if="!noText">
{{ $t("online_edit_document") }}
</span>
</a>
<teleport to="body">
<div class="wopi-frame" v-if="isOpenDocument">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
:hide-footer="true"
@close="modal.showModal = false"
>
<template #header>
<img class="logo" :src="logo" height="45" />
<span class="ms-auto me-3">
<span v-if="options.title">{{ options.title }}</span>
</span>
<!--
<a class="btn btn-outline-light">
<i class="fa fa-save fa-fw"></i>
{{ $t('save_and_quit') }}
</a>
-->
</template>
<template #body>
<div
v-if="loading"
class="loading"
>
<i
class="fa fa-circle-o-notch fa-spin fa-3x"
:title="$t('loading')"
/>
</div>
<iframe
:src="this.wopiUrl"
@load="loaded"
/>
</template>
</modal>
</div>
<div v-else>
<modal
v-if="modal.showModal"
modal-dialog-class="modal-sm"
@close="modal.showModal = false"
>
<template #header>
<h3>{{ $t('invalid_title') }}</h3>
</template>
<template #body>
<div class="alert alert-warning">
{{ $t('invalid_message') }}
</div>
</template>
</modal>
</div>
</teleport>
</template>
<template #body>
<div v-if="loading" class="loading">
<i
class="fa fa-circle-o-notch fa-spin fa-3x"
:title="$t('loading')"
/>
</div>
<iframe :src="this.wopiUrl" @load="loaded" />
</template>
</modal>
</div>
<div v-else>
<modal
v-if="modal.showModal"
modal-dialog-class="modal-sm"
@close="modal.showModal = false"
>
<template #header>
<h3>{{ $t("invalid_title") }}</h3>
</template>
<template #body>
<div class="alert alert-warning">
{{ $t("invalid_message") }}
</div>
</template>
</modal>
</div>
</teleport>
</template>
<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import logo from "ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png";
export default {
name: "OpenWopiLink",
components: {
Modal
},
props: {
wopiUrl: {
type: String,
required: true
},
type: {
type: String,
required: true
},
options: {
type: Object,
required: false
}
},
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-fullscreen" //modal-dialog-scrollable
},
logo: logo,
loading: false,
mime: [
// TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
'application/clarisworks',
'application/coreldraw',
'application/macwriteii',
'application/msword',
'application/pdf',
'application/vnd.lotus-1-2-3',
'application/vnd.ms-excel',
'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
'application/vnd.ms-excel.sheet.macroEnabled.12',
'application/vnd.ms-excel.template.macroEnabled.12',
'application/vnd.ms-powerpoint',
'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
'application/vnd.ms-powerpoint.template.macroEnabled.12',
'application/vnd.ms-visio.drawing',
'application/vnd.ms-word.document.macroEnabled.12',
'application/vnd.ms-word.template.macroEnabled.12',
'application/vnd.ms-works',
'application/vnd.oasis.opendocument.chart',
'application/vnd.oasis.opendocument.formula',
'application/vnd.oasis.opendocument.graphics',
'application/vnd.oasis.opendocument.graphics-flat-xml',
'application/vnd.oasis.opendocument.graphics-template',
'application/vnd.oasis.opendocument.presentation',
'application/vnd.oasis.opendocument.presentation-flat-xml',
'application/vnd.oasis.opendocument.presentation-template',
'application/vnd.oasis.opendocument.spreadsheet',
'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
'application/vnd.oasis.opendocument.spreadsheet-template',
'application/vnd.oasis.opendocument.text',
'application/vnd.oasis.opendocument.text-flat-xml',
'application/vnd.oasis.opendocument.text-master',
'application/vnd.oasis.opendocument.text-master-template',
'application/vnd.oasis.opendocument.text-template',
'application/vnd.oasis.opendocument.text-web',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
'application/vnd.openxmlformats-officedocument.presentationml.template',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
'application/vnd.sun.xml.calc',
'application/vnd.sun.xml.calc.template',
'application/vnd.sun.xml.chart',
'application/vnd.sun.xml.draw',
'application/vnd.sun.xml.draw.template',
'application/vnd.sun.xml.impress',
'application/vnd.sun.xml.impress.template',
'application/vnd.sun.xml.math',
'application/vnd.sun.xml.writer',
'application/vnd.sun.xml.writer.global',
'application/vnd.sun.xml.writer.template',
'application/vnd.visio',
'application/vnd.visio2013',
'application/vnd.wordperfect',
'application/x-abiword',
'application/x-aportisdoc',
'application/x-dbase',
'application/x-dif-document',
'application/x-fictionbook+xml',
'application/x-gnumeric',
'application/x-hwp',
'application/x-iwork-keynote-sffkey',
'application/x-iwork-numbers-sffnumbers',
'application/x-iwork-pages-sffpages',
'application/x-mspublisher',
'application/x-mswrite',
'application/x-pagemaker',
'application/x-sony-bbeb',
'application/x-t602',
]
}
},
computed: {
isOpenDocument() {
if (this.mime.indexOf(this.type) !== -1) {
return true;
}
return false;
},
noText() {
if (typeof this.options.noText !== 'undefined') {
return this.options.noText === true;
}
return false;
},
isChangeIcon() {
if (typeof this.options.changeIcon !== 'undefined') {
return (!(this.options.changeIcon === null || this.options.changeIcon === ''))
}
return false;
},
isChangeClass() {
if (typeof this.options.changeClass !== 'undefined') {
return (!(this.options.changeClass === null || this.options.changeClass === ''))
}
return false;
}
},
methods: {
openModal() {
this.loading = true;
this.modal.showModal = true;
},
loaded() {
this.loading = false;
}
},
i18n: {
messages: {
fr: {
online_edit_document: "Éditer en ligne",
save_and_quit: "Enregistrer et quitter",
loading: "Chargement de l'éditeur en ligne",
invalid_title: "Format incompatible",
invalid_message: "Désolé, ce format de document n'est pas éditable en ligne.",
}
}
}
}
name: "OpenWopiLink",
components: {
Modal,
},
props: {
wopiUrl: {
type: String,
required: true,
},
type: {
type: String,
required: true,
},
options: {
type: Object,
required: false,
},
},
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-fullscreen", //modal-dialog-scrollable
},
logo: logo,
loading: false,
mime: [
// TODO temporary hardcoded. to be replaced by twig extension or a collabora server query
"application/clarisworks",
"application/coreldraw",
"application/macwriteii",
"application/msword",
"application/pdf",
"application/vnd.lotus-1-2-3",
"application/vnd.ms-excel",
"application/vnd.ms-excel.sheet.binary.macroEnabled.12",
"application/vnd.ms-excel.sheet.macroEnabled.12",
"application/vnd.ms-excel.template.macroEnabled.12",
"application/vnd.ms-powerpoint",
"application/vnd.ms-powerpoint.presentation.macroEnabled.12",
"application/vnd.ms-powerpoint.template.macroEnabled.12",
"application/vnd.ms-visio.drawing",
"application/vnd.ms-word.document.macroEnabled.12",
"application/vnd.ms-word.template.macroEnabled.12",
"application/vnd.ms-works",
"application/vnd.oasis.opendocument.chart",
"application/vnd.oasis.opendocument.formula",
"application/vnd.oasis.opendocument.graphics",
"application/vnd.oasis.opendocument.graphics-flat-xml",
"application/vnd.oasis.opendocument.graphics-template",
"application/vnd.oasis.opendocument.presentation",
"application/vnd.oasis.opendocument.presentation-flat-xml",
"application/vnd.oasis.opendocument.presentation-template",
"application/vnd.oasis.opendocument.spreadsheet",
"application/vnd.oasis.opendocument.spreadsheet-flat-xml",
"application/vnd.oasis.opendocument.spreadsheet-template",
"application/vnd.oasis.opendocument.text",
"application/vnd.oasis.opendocument.text-flat-xml",
"application/vnd.oasis.opendocument.text-master",
"application/vnd.oasis.opendocument.text-master-template",
"application/vnd.oasis.opendocument.text-template",
"application/vnd.oasis.opendocument.text-web",
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
"application/vnd.openxmlformats-officedocument.presentationml.slideshow",
"application/vnd.openxmlformats-officedocument.presentationml.template",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.openxmlformats-officedocument.spreadsheetml.template",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.openxmlformats-officedocument.wordprocessingml.template",
"application/vnd.sun.xml.calc",
"application/vnd.sun.xml.calc.template",
"application/vnd.sun.xml.chart",
"application/vnd.sun.xml.draw",
"application/vnd.sun.xml.draw.template",
"application/vnd.sun.xml.impress",
"application/vnd.sun.xml.impress.template",
"application/vnd.sun.xml.math",
"application/vnd.sun.xml.writer",
"application/vnd.sun.xml.writer.global",
"application/vnd.sun.xml.writer.template",
"application/vnd.visio",
"application/vnd.visio2013",
"application/vnd.wordperfect",
"application/x-abiword",
"application/x-aportisdoc",
"application/x-dbase",
"application/x-dif-document",
"application/x-fictionbook+xml",
"application/x-gnumeric",
"application/x-hwp",
"application/x-iwork-keynote-sffkey",
"application/x-iwork-numbers-sffnumbers",
"application/x-iwork-pages-sffpages",
"application/x-mspublisher",
"application/x-mswrite",
"application/x-pagemaker",
"application/x-sony-bbeb",
"application/x-t602",
],
};
},
computed: {
isOpenDocument() {
if (this.mime.indexOf(this.type) !== -1) {
return true;
}
return false;
},
noText() {
if (typeof this.options.noText !== "undefined") {
return this.options.noText === true;
}
return false;
},
isChangeIcon() {
if (typeof this.options.changeIcon !== "undefined") {
return !(
this.options.changeIcon === null ||
this.options.changeIcon === ""
);
}
return false;
},
isChangeClass() {
if (typeof this.options.changeClass !== "undefined") {
return !(
this.options.changeClass === null ||
this.options.changeClass === ""
);
}
return false;
},
},
methods: {
openModal() {
this.loading = true;
this.modal.showModal = true;
},
loaded() {
this.loading = false;
},
},
i18n: {
messages: {
fr: {
online_edit_document: "Éditer en ligne",
save_and_quit: "Enregistrer et quitter",
loading: "Chargement de l'éditeur en ligne",
invalid_title: "Format incompatible",
invalid_message:
"Désolé, ce format de document n'est pas éditable en ligne.",
},
},
},
};
</script>
<style lang="scss">
div.wopi-frame {
div.modal-header {
border-bottom: 0;
background-color: var(--bs-primary);
color: white;
}
div.modal-body {
padding: 0;
overflow-y: unset !important;
iframe {
height: 100%;
width: 100%;
}
div.loading {
position: absolute;
color: var(--bs-chill-gray);
top: calc(50% - 30px);
left: calc(50% - 30px);
}
}
div.modal-header {
border-bottom: 0;
background-color: var(--bs-primary);
color: white;
}
div.modal-body {
padding: 0;
overflow-y: unset !important;
iframe {
height: 100%;
width: 100%;
}
div.loading {
position: absolute;
color: var(--bs-chill-gray);
top: calc(50% - 30px);
left: calc(50% - 30px);
}
}
}
</style>

154
src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
View File

@@ -1,86 +1,88 @@
import { createI18n } from 'vue-i18n';
import datetimeFormats from '../i18n/datetimeFormats';
import { createI18n } from "vue-i18n";
import datetimeFormats from "../i18n/datetimeFormats";
const messages = {
fr: {
action: {
actions: "Actions",
show: "Voir",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
valid: "Valider",
valid_and_see: "Valider et voir",
add: "Ajouter",
show_modal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
back: "Retour",
check_all: "cocher tout",
reset: "réinitialiser",
redirect: {
person: "Quitter la page et ouvrir la fiche de l'usager",
thirdparty: "Quitter la page et voir le tiers",
},
refresh: 'Rafraîchir',
addContact: 'Ajouter un contact'
},
nav: {
next: "Suivant",
previous: "Précédent",
top: "Haut",
bottom: "Bas",
},
renderbox: {
person: "Usager",
birthday: {
man: "Né le",
woman: "Née le",
neutral: "Né·e le",
unknown: "Né·e le",
},
deathdate: "Date de décès",
household_without_address: "Le ménage de l'usager est sans adresse",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",
person: "Usager"
},
holder: "Titulaire",
years_old: "1 an | {n} an | {n} ans",
residential_address: "Adresse de résidence",
located_at: "réside chez"
},
}
fr: {
action: {
actions: "Actions",
show: "Voir",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
valid: "Valider",
valid_and_see: "Valider et voir",
add: "Ajouter",
show_modal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
back: "Retour",
check_all: "cocher tout",
reset: "réinitialiser",
redirect: {
person: "Quitter la page et ouvrir la fiche de l'usager",
thirdparty: "Quitter la page et voir le tiers",
},
refresh: "Rafraîchir",
addContact: "Ajouter un contact",
},
nav: {
next: "Suivant",
previous: "Précédent",
top: "Haut",
bottom: "Bas",
},
renderbox: {
person: "Usager",
birthday: {
man: "Né le",
woman: "Née le",
neutral: "Né·e le",
unknown: "Né·e le",
},
deathdate: "Date de décès",
household_without_address: "Le ménage de l'usager est sans adresse",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",
person: "Usager",
},
holder: "Titulaire",
years_old: "1 an | {n} an | {n} ans",
residential_address: "Adresse de résidence",
located_at: "réside chez",
},
},
};
const _createI18n = (appMessages: any, legacy?: boolean) => {
Object.assign(messages.fr, appMessages.fr);
return createI18n({
legacy: typeof legacy === undefined ? true : legacy,
locale: 'fr',
fallbackLocale: 'fr',
// @ts-ignore
datetimeFormats,
messages,
})
Object.assign(messages.fr, appMessages.fr);
return createI18n({
legacy: typeof legacy === undefined ? true : legacy,
locale: "fr",
fallbackLocale: "fr",
// @ts-ignore
datetimeFormats,
messages,
});
};
export { _createI18n }
export { _createI18n };
export const multiSelectMessages = {
fr: {
multiselect: {
placeholder: 'Choisir',
tag_placeholder: 'Créer un nouvel élément',
select_label: '"Entrée" ou cliquez pour sélectionner',
deselect_label: '"Entrée" ou cliquez pour désélectionner',
select_group_label: 'Appuyer sur "Entrée" pour sélectionner ce groupe',
deselect_group_label: 'Appuyer sur "Entrée" pour désélectionner ce groupe',
selected_label: 'Sélectionné'
}
}
fr: {
multiselect: {
placeholder: "Choisir",
tag_placeholder: "Créer un nouvel élément",
select_label: '"Entrée" ou cliquez pour sélectionner',
deselect_label: '"Entrée" ou cliquez pour désélectionner',
select_group_label:
'Appuyer sur "Entrée" pour sélectionner ce groupe',
deselect_group_label:
'Appuyer sur "Entrée" pour désélectionner ce groupe',
selected_label: "Sélectionné",
},
},
};

48
src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
View File

@@ -1,27 +1,27 @@
export default {
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric"
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric",
},
text: {
year: "numeric",
month: "long",
day: "numeric",
},
long: {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: false,
},
hoursOnly: {
hour: "numeric",
minute: "numeric",
hour12: false,
},
},
text: {
year: "numeric",
month: "long",
day: "numeric",
},
long: {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: false
},
hoursOnly: {
hour: "numeric",
minute: "numeric",
hour12: false,
}
}
};