|
|
|
@@ -12,6 +12,13 @@ import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from
|
|
|
|
|
import {
|
|
|
|
|
Button,
|
|
|
|
|
} from '@material-ui/core';
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
//US475
|
|
|
|
|
import GooglePlaceAutocomplete from 'mui-places-autocomplete'
|
|
|
|
|
import { geocodeByAddress } from 'react-places-autocomplete'
|
|
|
|
|
//US487
|
|
|
|
|
import Autosuggest from 'react-autosuggest';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const styles = theme => ({
|
|
|
|
|
container: {
|
|
|
|
@@ -56,6 +63,24 @@ const styles = theme => ({
|
|
|
|
|
},
|
|
|
|
|
padding: '5px',
|
|
|
|
|
},
|
|
|
|
|
labelGeoloc:{
|
|
|
|
|
paddingLeft:"14px",
|
|
|
|
|
fontSize: "0.8rem",
|
|
|
|
|
color:"#1E2327",
|
|
|
|
|
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
|
|
|
fontWeight: "400",
|
|
|
|
|
lineHeight: "1",
|
|
|
|
|
letterSpacing: "0.00938em", }
|
|
|
|
|
,conteneurGoogle:{
|
|
|
|
|
border:"1px solid rgb(200, 200, 200)",
|
|
|
|
|
borderRadius :"5px",
|
|
|
|
|
padding:"5px 0px",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
conteneurGoogleComposant:{
|
|
|
|
|
paddingLeft:"14px"
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const { publicRuntimeConfig } = getConfig();
|
|
|
|
@@ -71,6 +96,9 @@ class AccountEtape1 extends Component {
|
|
|
|
|
this.handleClose = this.handleClose.bind(this);
|
|
|
|
|
this.onBlur = this.onBlur.bind(this)
|
|
|
|
|
this.onSubmit = this.onSubmit.bind(this);
|
|
|
|
|
this.choisirMetier = this.choisirMetier.bind(this);
|
|
|
|
|
this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
|
|
|
|
|
this.onChange = this.onChange.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
@@ -90,7 +118,24 @@ class AccountEtape1 extends Component {
|
|
|
|
|
website: '',
|
|
|
|
|
mediaId: null,
|
|
|
|
|
companyId: null,
|
|
|
|
|
|
|
|
|
|
geoloc: '',
|
|
|
|
|
value:'',
|
|
|
|
|
route: '',
|
|
|
|
|
street_number: '',
|
|
|
|
|
locality: '',
|
|
|
|
|
administrative_area_level_2: '',
|
|
|
|
|
administrative_area_level_1: '',
|
|
|
|
|
country: '',
|
|
|
|
|
postal_code: '',
|
|
|
|
|
formatted_address:"",
|
|
|
|
|
lat:"",
|
|
|
|
|
lng:"",
|
|
|
|
|
appellationId:"",
|
|
|
|
|
appellationLibelle:"",
|
|
|
|
|
value: '',
|
|
|
|
|
suggestions: [],
|
|
|
|
|
valueMetier: '',
|
|
|
|
|
suggestionsMetier: [],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleChange = (e) => {
|
|
|
|
@@ -110,12 +155,7 @@ class AccountEtape1 extends Component {
|
|
|
|
|
//setOpen(false);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onBlur(e) {
|
|
|
|
|
console.log("blur")
|
|
|
|
|
this.setState({ [e.target.name]: e.target.value });
|
|
|
|
|
|
|
|
|
|
this.soumettre(e.target.name, "unitaire");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
|
|
@@ -124,21 +164,22 @@ class AccountEtape1 extends Component {
|
|
|
|
|
lastname: nextProps.user.lastname,
|
|
|
|
|
phone: nextProps.user.phone,
|
|
|
|
|
email: nextProps.user.email,
|
|
|
|
|
currentJob: nextProps.user.currentJob,
|
|
|
|
|
address1 : nextProps.user.address1,
|
|
|
|
|
address2 : nextProps.user.address2,
|
|
|
|
|
zipCode : nextProps.user.zipCode,
|
|
|
|
|
city : nextProps.user.city,
|
|
|
|
|
country : nextProps.user.country,
|
|
|
|
|
linkedin: nextProps.user.linkedin,
|
|
|
|
|
twitter: nextProps.user.twitter,
|
|
|
|
|
website: nextProps.user.website,
|
|
|
|
|
companyId: nextProps.companyId,
|
|
|
|
|
value: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
|
|
|
|
|
valueMetier: nextProps.user.appellationLibelle ? nextProps.user.appellationLibelle :"",
|
|
|
|
|
geoloc: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
|
|
|
|
|
formatted_address:nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
|
|
|
|
|
appellationLibelle:nextProps.user.appellationLibelle ? nextProps.user.appellationLibelle :"",
|
|
|
|
|
errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
console.log("USER ................................");
|
|
|
|
|
console.log(this.props.user);
|
|
|
|
|
this.setState({
|
|
|
|
|
firstname: this.props.user.firstname,
|
|
|
|
|
lastname: this.props.user.lastname,
|
|
|
|
@@ -153,10 +194,144 @@ class AccountEtape1 extends Component {
|
|
|
|
|
linkedin: this.props.user.linkedin,
|
|
|
|
|
twitter: this.props.user.twitter,
|
|
|
|
|
website: this.props.user.website,
|
|
|
|
|
value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
|
|
|
|
|
valueMetier: this.props.user.appellationLibelle ? this.props.user.appellationLibelle :"",
|
|
|
|
|
geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
|
|
|
|
|
route: "",
|
|
|
|
|
street_number: "",
|
|
|
|
|
locality: "",
|
|
|
|
|
administrative_area_level_2: "",
|
|
|
|
|
administrative_area_level_1: "",
|
|
|
|
|
country: "",
|
|
|
|
|
postal_code: "",
|
|
|
|
|
formatted_address:this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
|
|
|
|
|
lat:"",
|
|
|
|
|
lng:"",
|
|
|
|
|
appellationId:"",
|
|
|
|
|
appellationLibelle:this.props.user.appellationLibelle ? this.props.user.appellationLibelle :"",
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
remplirLocation = (typeDonnee, donnee) =>{
|
|
|
|
|
console.log("DEBUT remplirLocation");
|
|
|
|
|
console.log(typeDonnee);
|
|
|
|
|
console.log(donnee);
|
|
|
|
|
if(typeDonnee=='"street_number"') {
|
|
|
|
|
this.setState({ street_number: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"route"') {
|
|
|
|
|
this.setState({ route: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"locality"') {
|
|
|
|
|
this.setState({ locality: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"administrative_area_level_2"') {
|
|
|
|
|
this.setState({ administrative_area_level_2: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"administrative_area_level_1"') {
|
|
|
|
|
this.setState({ administrative_area_level_1: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"country"') {
|
|
|
|
|
this.setState({ country: donnee.replace('"', '') })
|
|
|
|
|
}else if(typeDonnee=='"postal_code"') {
|
|
|
|
|
this.setState({ postal_code: donnee.replace('"', '') })
|
|
|
|
|
}
|
|
|
|
|
console.log("FIN remplirLocation");
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onSuggestionSelected = (suggestion) => {
|
|
|
|
|
|
|
|
|
|
console.log('Selected suggestion:', suggestion)
|
|
|
|
|
let address = suggestion.description;
|
|
|
|
|
var words = address.split(',');
|
|
|
|
|
if(words.length<3){
|
|
|
|
|
address = "mairie de "+address;
|
|
|
|
|
}
|
|
|
|
|
this.setState({ geoloc: address})
|
|
|
|
|
this.setState({
|
|
|
|
|
value: address
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
geocodeByAddress(address)
|
|
|
|
|
.then(address => {
|
|
|
|
|
console.log("ADRESSE");
|
|
|
|
|
console.log(address);
|
|
|
|
|
if(address[0].address_components[0]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[1]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[2]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[3]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[4]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[5]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].address_components[6]){
|
|
|
|
|
this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
|
|
|
|
|
}
|
|
|
|
|
if(address[0].geometry){
|
|
|
|
|
|
|
|
|
|
console.log(address[0].geometry.location_type);
|
|
|
|
|
let gps =JSON.stringify(address[0].geometry.location);
|
|
|
|
|
const obj = JSON.parse(gps);
|
|
|
|
|
this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })
|
|
|
|
|
this.setState({ lat: obj.lat.toString()})
|
|
|
|
|
this.setState({ lng: obj.lng.toString()})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log("GEOLOC ON geocodeByAddress")
|
|
|
|
|
// console.log(this.state.geoloc)
|
|
|
|
|
// document.getElementById("geoloc").value =JSON.stringify(address[0]);
|
|
|
|
|
// this.props.onSelectionChanged(address[0]);
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error', error))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onSuggestionSelected(suggestion) {
|
|
|
|
|
|
|
|
|
|
// Add your business logic here. In this case we just log...
|
|
|
|
|
console.log('Selected suggestion:', suggestion)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
|
|
|
|
|
<div>
|
|
|
|
|
<input className={styles.inputSearchBar} {...getInputProps()} />
|
|
|
|
|
<div >
|
|
|
|
|
{loading && <div>Loading...</div>}
|
|
|
|
|
{suggestions.map(suggestion => {
|
|
|
|
|
const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
|
|
|
|
|
const style = suggestion.active
|
|
|
|
|
? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
|
|
|
|
|
: { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
|
|
|
|
|
return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
|
|
|
|
|
<span >{suggestion.description}</span>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
callbackFunc = ( autoCompleteData ) => {
|
|
|
|
|
//You can use the address data, passed by autocomplete as you want.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleChange = (e) => {
|
|
|
|
|
this.setState({ [e.target.name]: e.target.value })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onSubmit = (e) => {
|
|
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
@@ -166,6 +341,28 @@ class AccountEtape1 extends Component {
|
|
|
|
|
this.soumettre(e.target.name, "global")
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onChange = (e) => {
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
value: e.target.value
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (e.target.value === '') {
|
|
|
|
|
console.log('cleared');
|
|
|
|
|
//this.props.onSelectionChanged('');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onBlur(e) {
|
|
|
|
|
console.log("blur");
|
|
|
|
|
console.log(e.target.value);
|
|
|
|
|
console.log(e.target.name);
|
|
|
|
|
this.setState({ [e.target.name]: e.target.value });
|
|
|
|
|
|
|
|
|
|
this.soumettre(e.target.name, "unitaire");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
soumettre(champ, type){
|
|
|
|
|
console.log("soumettre");
|
|
|
|
|
console.log(champ);
|
|
|
|
@@ -190,7 +387,25 @@ class AccountEtape1 extends Component {
|
|
|
|
|
data.append('linkedin', this.state.linkedin)
|
|
|
|
|
data.append('twitter', this.state.twitter)
|
|
|
|
|
data.append('website', this.state.website)
|
|
|
|
|
console.log("GEOLOC ON SUBMIT")
|
|
|
|
|
console.log(this.state)
|
|
|
|
|
data.append('geoloc', this.state.geoloc)
|
|
|
|
|
|
|
|
|
|
data.append('street_number', this.state.street_number.replace('"', ''))
|
|
|
|
|
data.append('route', this.state.route.replace('"', ''))
|
|
|
|
|
data.append('locality', this.state.locality.replace('"', ''))
|
|
|
|
|
data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
|
|
|
|
|
data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
|
|
|
|
|
data.append('country', this.state.country.replace('"', ''))
|
|
|
|
|
data.append('postal_code', this.state.postal_code.replace('"', ''))
|
|
|
|
|
data.append('formatted_address', this.state.formatted_address.replace('"', ''))
|
|
|
|
|
data.append('lat', this.state.lat)
|
|
|
|
|
data.append('lng', this.state.lng)
|
|
|
|
|
//Compétences
|
|
|
|
|
data.append('appellationId', this.state.appellationId)
|
|
|
|
|
data.append('appellationLibelle', this.state.appellationLibelle)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//TODO:maybe add this two in a single transactionnal saga
|
|
|
|
|
this.props.updateUserRequest(data)
|
|
|
|
|
|
|
|
|
@@ -207,7 +422,7 @@ class AccountEtape1 extends Component {
|
|
|
|
|
if (type=="global" || (champ=="lastname" && data.lastname=="")) errors.message += " Veuillez saisir votre nom<br />";
|
|
|
|
|
if (type=="global" || (champ=="phone" && data.phone=="")) errors.message += "Veuillez saisir un numéro de téléphone<br />";
|
|
|
|
|
if (type=="global" || (champ=="currentJob" && data.currentJob=="")) errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
|
|
|
|
|
if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
|
|
|
|
|
// if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
|
|
|
|
|
// if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
|
|
|
|
|
if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
|
|
|
|
|
//console.log(errors.email);
|
|
|
|
@@ -258,10 +473,108 @@ class AccountEtape1 extends Component {
|
|
|
|
|
this.props.updateUserPictureRequest(data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// METIER
|
|
|
|
|
// Filter logic
|
|
|
|
|
getSuggestionsMetier = async (valueMetier) => {
|
|
|
|
|
console.log("getSuggestionsMetier");
|
|
|
|
|
const inputValue = valueMetier.trim().toLowerCase();
|
|
|
|
|
let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
|
|
|
|
|
// let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
|
|
|
|
|
let data = await response.json()
|
|
|
|
|
return data;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Trigger suggestions
|
|
|
|
|
getSuggestionMetierValue = suggestion => {
|
|
|
|
|
console.log('getSuggestionMetierValue Le code : '+suggestion.code);
|
|
|
|
|
console.log('getSuggestionMetierValue Le libellé : '+suggestion.libelle);
|
|
|
|
|
document.getElementById('appellation_id').value =suggestion.code;
|
|
|
|
|
document.getElementById('appellation_libelle').value = suggestion.libelle;
|
|
|
|
|
this.setState({ appellationId: suggestion.code })
|
|
|
|
|
this.setState({ appellationLibelle: suggestion.libelle })
|
|
|
|
|
this.soumettre("appellation", "unitaire")
|
|
|
|
|
return suggestion.libelle;
|
|
|
|
|
}
|
|
|
|
|
// Render Each Option
|
|
|
|
|
renderSuggestionMetier = suggestion => (
|
|
|
|
|
// <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
|
|
|
|
|
// <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
|
|
|
|
|
// <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
|
|
|
|
|
// <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
|
|
|
|
|
// <div>
|
|
|
|
|
// <strong style="font-weight: 500;">{suggestion.libelle} </strong>
|
|
|
|
|
// <span style="font-weight: 300;">, {suggestion.code}</span>
|
|
|
|
|
// </div>
|
|
|
|
|
// <span class="MuiTouchRipple-root"></span>
|
|
|
|
|
// </div>
|
|
|
|
|
// </ul>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
<span className="suggestion-content" >
|
|
|
|
|
|
|
|
|
|
<span className="name" >
|
|
|
|
|
{suggestion.libelle}
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
refreshPage() {
|
|
|
|
|
window.location.replace("/profileStep");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
choisirMetier = (code) =>{
|
|
|
|
|
console.log("choisir metier "+code);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleClick(code, libelle) {
|
|
|
|
|
|
|
|
|
|
//console.log('Le code : '+code);
|
|
|
|
|
// document.getElementById('appellation_id').value =code;
|
|
|
|
|
// document.getElementById('appellation_libelle').value = libelle;
|
|
|
|
|
// this.setState({ appellationId: code })
|
|
|
|
|
// this.setState({ appellationLibelle: libelle })
|
|
|
|
|
// this.soumettre("appellation", "unitaire")
|
|
|
|
|
//console.log('Le libellé : '+libelle);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// OnChange event handler
|
|
|
|
|
onChangeMetier = (event, { newValue }) => {
|
|
|
|
|
console.log("newValue "+newValue);
|
|
|
|
|
this.setState({
|
|
|
|
|
valueMetier: newValue
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Suggestion rerender when user types
|
|
|
|
|
onSuggestionsMetierFetchRequested = ({ value }) => {
|
|
|
|
|
this.getSuggestionsMetier(value)
|
|
|
|
|
.then(data => {
|
|
|
|
|
if (data.Error) {
|
|
|
|
|
this.setState({
|
|
|
|
|
suggestionsMetier: []
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
console.log("onSuggestionsMetierFetchRequested"+data);
|
|
|
|
|
console.log("onSuggestionsMetierFetchRequested"+value);
|
|
|
|
|
this.setState({
|
|
|
|
|
suggestionsMetier: data
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Triggered on clear
|
|
|
|
|
onSuggestionsMetierClearRequested = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
suggestionsMetier: []
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { classes, user } = this.props
|
|
|
|
|
const { valueMetier, suggestionsMetier } = this.state;
|
|
|
|
|
const logoUrl = user.picture;
|
|
|
|
|
function refresh() {
|
|
|
|
|
document
|
|
|
|
@@ -269,6 +582,22 @@ class AccountEtape1 extends Component {
|
|
|
|
|
.reload(true);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const inputPropsMetier = {
|
|
|
|
|
placeholder: 'Saisir un métier',
|
|
|
|
|
value:this.state.valueMetier,
|
|
|
|
|
onChange: this.onChangeMetier
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const inputProps = {
|
|
|
|
|
value: this.state.address,
|
|
|
|
|
onChange: this.onChange,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const searchOptions = {
|
|
|
|
|
componentRestrictions: { country: ['fr'] },
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className={classes.container}>
|
|
|
|
|
<form className={classes.form}
|
|
|
|
@@ -358,9 +687,18 @@ class AccountEtape1 extends Component {
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Autosuggest
|
|
|
|
|
suggestions={suggestionsMetier}
|
|
|
|
|
onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
|
|
|
|
|
onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
|
|
|
|
|
getSuggestionValue={this.getSuggestionMetierValue}
|
|
|
|
|
renderSuggestion={this.renderSuggestionMetier}
|
|
|
|
|
inputProps={inputPropsMetier}
|
|
|
|
|
/>
|
|
|
|
|
<input type="hidden" id="appellation_id" value={this.state.appellationId =='null' || this.state.appellationId =='' ? '' :this.state.appellationId}></input>
|
|
|
|
|
<input type="hidden" id="appellation_libelle" value={this.state.appellationLibelle =='null' || this.state.appellationLibelle =='' ? '' :this.state.appellationLibelle}></input>
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="currentJob"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Poste actuel"
|
|
|
|
@@ -371,9 +709,56 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.currentJob =='null' || this.state.currentJob =='' ? '' :this.state.currentJob}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
/> */}
|
|
|
|
|
<div className={classes.container}>
|
|
|
|
|
<div
|
|
|
|
|
className={classes.conteneurGoogle}
|
|
|
|
|
classes={{ root: classes.rootTextfield }}
|
|
|
|
|
style={{ position: 'relative', zIndex:2, width: '100%' }}>
|
|
|
|
|
<label htmlFor="outlined-required"
|
|
|
|
|
className={classes.labelGeoloc}>
|
|
|
|
|
Adresse
|
|
|
|
|
</label>
|
|
|
|
|
<div className={classes.conteneurGoogleComposant}>
|
|
|
|
|
<GooglePlaceAutocomplete
|
|
|
|
|
style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
|
|
|
|
|
name="location"
|
|
|
|
|
label="Location"
|
|
|
|
|
id="outlined-required"
|
|
|
|
|
variant="outlined"
|
|
|
|
|
textFieldProps={{ id: "outlined-required" }}
|
|
|
|
|
className={classes.textField}
|
|
|
|
|
value="test"
|
|
|
|
|
classes={{ root: classes.rootTextfield }}
|
|
|
|
|
options={this.searchOptions}
|
|
|
|
|
onSuggestionSelected={this.onSuggestionSelected}
|
|
|
|
|
textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
|
|
|
|
|
types={['(regions)']}
|
|
|
|
|
componentRestrictions={{country: 'fr'}}
|
|
|
|
|
renderTarget={() => (
|
|
|
|
|
<div
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
zIndex:9
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* <Input
|
|
|
|
|
name="geoloc"
|
|
|
|
|
id="geoloc"
|
|
|
|
|
label="geoloc"
|
|
|
|
|
ref="geoloc"
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
value={this.state.geoloc =='null' || this.state.geoloc =='' ? '' :this.state.geoloc}
|
|
|
|
|
/> */}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="address1"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Adresse"
|
|
|
|
@@ -383,9 +768,9 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.address1 ? this.state.address1 : ''}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
/> */}
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="address2"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Adresse complémentaire"
|
|
|
|
@@ -395,9 +780,9 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.address2 ? this.state.address2 : ''}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
<div className={classes.container}>
|
|
|
|
|
<TextField
|
|
|
|
|
/> */}
|
|
|
|
|
{/* <div className={classes.container}> */}
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="zipCode"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Code postal"
|
|
|
|
@@ -407,9 +792,9 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.zipCode ? this.state.zipCode : ''}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
/> */}
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="city"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Ville"
|
|
|
|
@@ -419,9 +804,9 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.city ? this.state.city : ''}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
/> */}
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
{/* <TextField
|
|
|
|
|
name="country"
|
|
|
|
|
id="outlined"
|
|
|
|
|
label="Pays"
|
|
|
|
@@ -431,8 +816,8 @@ class AccountEtape1 extends Component {
|
|
|
|
|
value={this.state.country ? this.state.country : ''}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
/> */}
|
|
|
|
|
{/* </div> */}
|
|
|
|
|
|
|
|
|
|
<TextField
|
|
|
|
|
name="linkedin"
|
|
|
|
@@ -474,13 +859,14 @@ class AccountEtape1 extends Component {
|
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
type="submit"
|
|
|
|
|
onClick={this.refreshPage}
|
|
|
|
|
variant="contained"
|
|
|
|
|
color="primary"
|
|
|
|
|
|
|
|
|
|
className={classes.button}>
|
|
|
|
|
Enregistrer
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
{/* <div id="F" className={classes.foot}>
|
|
|
|
|
<Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Mettre à jour!</Button>
|
|
|
|
|