Пользовательское поле для EasyAdmin + Symfony 4 - PullRequest
Новая
       22

Пользовательское поле для EasyAdmin + Symfony 4

0 голосов
/ 19 апреля 2019

Я пытаюсь разработать админ-панель для моего проекта.В этом проекте есть объект с именем Places, который будет хранить данные о магазинах и торговых центрах.Чтобы упростить использование, я хочу, чтобы поле поиска осуществляло поиск в Картах Google и получало координаты непосредственно из Карт Google.Для этого есть крошечный, но мощный компонент реагирования, react-geosuggest Теперь я хочу использовать этот компонент в новых и редактируемых формах Easy Admin.Но я не мог решить, как мне достичь этого?

Я пытался добавить настраиваемое поле в Symfony, но оно не работает ( документация об этом ).Также пытался просто настроить внешний вид, но это тоже не работает.

1 Ответ

0 голосов
/ 23 апреля 2019

По крайней мере, мне удалось реализовать эту функцию.Вот как я это сделал.

Сначала я добавил response-geosuggest код в папку assets/js в geosuggest.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Geosuggest from 'react-geosuggest';
class App extends React.Component {
    /**
     * Render the example app
     */
    render() {
      var fixtures = [];

      return (
        <div>
          <Geosuggest
            ref={el=>this._geoSuggest=el}
            placeholder="Start typing!"
            fixtures={fixtures}
            onSuggestSelect={this.onSuggestSelect}
            location={new google.maps.LatLng(53.558572, 9.9278215)}
            radius="20" />

        </div>
      )
    }

    /**
     * When a suggest got selected
     * @param  {Object} suggest The suggest
     */
    onSuggestSelect(suggest) {
      document.getElementById('places_coordinates').value = suggest.location.lat + "," + suggest.location.lng;
      document.getElementById('places_address').value = suggest.gmaps.formatted_address;
      document.getElementById('geosuggest-help').innerHTML += ": "+ suggest.location.lat + "," + suggest.location.lng;
      console.log(suggest.location.lat + "," + suggest.location.lng);
      console.log(suggest.gmaps.formatted_address);
      console.log(suggest);
    }
  }

  ReactDOM.render(<App />, document.getElementById('google_map'));

Чтобы получить информацию о местоположении и адресеиз реагирующего компонента я добавил несколько кодов в onSuggestSelect function 

 document.getElementById('places_coordinates').value = suggest.location.lat + "," + suggest.location.lng;
      document.getElementById('places_address').value = suggest.gmaps.formatted_address;
      document.getElementById('geosuggest-help').innerHTML += ": "+ suggest.location.lat + "," + suggest.location.lng;

Затем я добавил этот файл в файл webpack-config.js 

.addEntry('react','./assets/js/geosuggest.jsx')

В файле easy_admin.yaml я объявилполе, в которое я хочу добавить функциональность geosuggest 

 - { property: 'coordinates', icon: 'user', label: 'Coordinates', help: null, type: 'text', type_options: { block_name: 'geosuggest' }  }

Также я добавил шаблон для html новой сущности с этим кодом 

templates:
                    new: 'admin/new-place.html.twig'

Итак, я создал файл new-place.html.twig в папке templates/admin. 

{# templates/new-place.html.twig #}
{% extends '@EasyAdmin/default/new.html.twig' %}
{% block body_javascript %}
   {{ parent() }}

<script type="text/javascript" src="{{ asset('build/runtime.js') }}"></script>
{% endblock %}

Это имя_блока является магическим атрибутом;с этим атрибутом я могу настроить поле.Поэтому я создал файл в templates/form folder с именем geosuggest.html.twig.Вот источник этого файла 

{# templates/form/fields.html.twig #}
{% block _places_geosuggest_widget %}
<style>
.geosuggest {

    position: relative;
    width: 70%;

    text-align: left;
  }
  .geosuggest__input {
    width: 100%;
    border: 2px solid transparent;
    box-shadow: 0 0 1px #3d464d;
    padding: .1em .5em;
    -webkit-transition: border 0.2s, box-shadow 0.2s;
            transition: border 0.2s, box-shadow 0.2s;
  }
  .geosuggest__input:focus {
    border-color: #267dc0;
    box-shadow: 0 0 0 transparent;
  }
  .geosuggest__suggests {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 25em;
    padding: 0;
    margin-top: -1px;
    background: #fff;
    border: 2px solid #267dc0;
    border-top-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    z-index: 5;
    -webkit-transition: max-height 0.2s, border 0.2s;
            transition: max-height 0.2s, border 0.2s;
  }
  .geosuggest__suggests--hidden {
    max-height: 0;
    overflow: hidden;
    border-width: 0;
  }

  /**
   * A geosuggest item
   */
  .geosuggest__item {
    font-size: 18px;
    font-size: 1rem;
    padding: .5em .65em;
    cursor: pointer;
  }
  .geosuggest__item:hover,
  .geosuggest__item:focus {
    background: #f5f5f5;
  }
  .geosuggest__item--active {
    background: #267dc0;
    color: #fff;
  }
  .geosuggest__item--active:hover,
  .geosuggest__item--active:focus {
    background: #ccc;
  }
  .geosuggest__item__matched-text {
    font-weight: bold;
  }

  </style>
<div id="google_map"></div>
 {% if help is defined %}
        <span class="help-block" id="geosuggest-help">Mekanın koordinatları</span>
    {% endif %}
<script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY&libraries=places"></script>
<script type="text/javascript" src="{{ asset('build/react.js') }}"></script>
<input type="hidden" id="places_coordinates" name="places[coordinates]" required="required" class="form-control form-control">
 {% endblock %}

Обычно easyadmin генерирует текстовое поле для поля координат, но код реагирования удаляет это поле ввода и заменяет его собственным текстовым полем.Чтобы получить данные координат и передать их easyadmin при сохранении, я использовал скрытое поле.Который вы можете увидеть выше код.

И это сработало.

Возможно, это не лучший подход, но я нашел единственный способ заставить его работать.Надеюсь, это поможет вам.

...