php - EasyAdmin + Symfony 4 的自定义字段

Question

我正在尝试为我的项目开发一个管理面板。在这个项目中，有一个名为 Places 的实体，它将存储有关商店和商场的数据。为了使使用更容易，我想要一个搜索字段来搜索谷歌地图并直接从谷歌地图检索坐标。有一个很小但功能强大的反应组件，react-geosuggest 现在我想在我的 Easy Admin 新和编辑表单中使用这个组件。但我无法解决我应该如何实现这一目标？

我试图向 symfony 添加一个自定义字段，但它不起作用（有关此的文档）。还尝试仅自定义外观，但这也不起作用。

Answer 1

至少我成功实现了这个功能。这是我如何做到的。

首先，我将react-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函数中添加了一些代码

 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 文件中，我声明了要添加地理建议功能的字段

 - { 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 %}

这个 block_name 是魔法属性；有了这个属性，我可以自定义字段。所以我创建了一个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，我使用了一个隐藏字段。你可以看到上面的代码。

它奏效了。

可能这不是最好的方法，但这是我发现使其工作的唯一方法。希望这对您有所帮助。