locations_tab.md

Location tab markup and behavior

Expected markup:

<form action="/admin/content/locations" method="post">
  <div class="ez-list-toolbar">
    <h2 class="ez-list-toolbar-label">Content locations</h2>
    <div class="ez-list-toolbar-tools">
      <input type="hidden" name="contentId" value="41"><!-- unsure if it's neeeded -->
      <button type="submit">Remove locations</button>
    </div>
  </div>

  <table class="ez-table-data">
    <thead>
      <tr>
        <th></th>
        <th>Path</th>
        <th>Sub-items</th>
        <th>Visibility</th>
        <th>Main</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="removeLocations[]" value="42">
        </td>
        <td>
          <ul class="ez-breadcrumbs">
            <li class="ez-breadcrumbs-item"><a href="/admin/">eZ Platform</a></li>
          </ul>
        </td>
        <td>41</td>
        <td>
          <input type="checkbox" name="locationVisibility" value="42">
        </td>
        <td>
          <input type="radio" name="locationMain" value="42">
        </td>
      </tr>
      <!-- same structure for others Locations with of course a different Location id inputs -->
    </tbody>
  </table>
</form>
<form action="/admin/location/visibility" hidden method="post" class="ez-js-location-visibility">
  <input type="hidden" name="locationId" value="">
  <input type="hidden" name="visibility" value="">
</form>
<form action="/admin/location/main" hidden method="post" class="ez-js-location-set-main">
  <input type="hidden" name="locationId" value="">
  <input type="hidden" name="isMain" value="1">
</form>

3 forms:

• the big one to remove Locations (and add Locations later)
• the ez-js-location-visibility one to set the visibility of a given Location
• the ez-js-location-set-main one to set the isMain property of a given Location

The first one is a quite regular one (besides being POSTed in a AJAX to only update the tab). After a Location removal, the action should redirect to the action to get the tab content ie the route _ez_content_view route with the viewType parameter set to locations_tab. This response should also contain one or several notification for the user. So besides the normal tab content, some notifications should also be embedded in the content, something like:

<!-- tab content here -->
<ez-notification type="positive" timeout="10">
  <p>Location #42 was successfully removed</p>
</ez-notification>

Note: the checkbox locationVisibility and the radio locationMain are part of the form in the markup but should probably not be part of the Symfony Form object server side, they can be generated directly in the Twig template. Also because the markup for the visibility will need to be changed a bit to look like the switcher widget defined in the UI guidelines.

The other two forms will be submitted when a visibility checkbox or the radio button changes. After processing those operation, no need to rerender the full tab, the HTTP status allows to know if the operation was successful or not. But the server needs to generate a notification the tab component recognizes, in case of success the response should be:

<ez-notification type="positive" timeout="10">
  <p>The Location #42 is now hidden</p>
</ez-notification>

in case of error, it should be:

<ez-notification type="error" timeout="0" copyable details="some details">
  <p>Failed to hide Location #42</p>
</ez-notification>

Note: exact messages and the content of details have to be defined by PM.