Skip to content

Add UI for adding catalog numbers to a series #1341

Closed
@php-coder

Description

@php-coder

On the src/main/webapp/WEB-INF/views/series/info.html page we should add another form to add catalog numbers. It should have inputs for numbers (just a text input) and a catalog name. Also there should be a submit button. Here are examples that can be helpful:

  • List of catalogs:

    <div class="form-group">
    <label for="catalogName" th:text="|#{t_catalog}:|">Catalog:</label>
    <select id="catalogName" name="catalogName" class="form-control">
    <option value="michel" th:text="#{t_michel}">Michel</option>
    <option value="scott" th:text="#{t_scott}">Scott</option>
    <option value="yvert" th:text="#{t_yvert}">Yvert</option>
    <option value="gibbons" th:text="#{t_sg}">Gibbons</option>
    <option value="solovyov" th:text="#{t_solovyov}">Solovyov</option>
    <option value="zagorski" th:text="#{t_zagorski}">Zagorski</option>
    </select>
    </div>

  • Catalog numbers:

    <div class="form-group form-group-sm js-catalogs-info collapse in" th:classappend="|${michelHasErrors ? 'has-error' : ''} ${showCatalogsInfo ? 'js-has-data' : ''}|">
    <label for="michelNumbers" class="control-label col-sm-3" th:text="#{t_michel}">
    Michel
    </label>
    <div class="col-sm-7">
    <div class="row">
    <div class="col-xs-6">
    <input type="text" id="michelNumbers" class="form-control js-catalog-numbers" th:field="*{michelNumbers}" />
    </div>
    <div class="col-xs-3 no-padding">
    <div class="input-group">
    <span class="input-group-addon">&euro;</span>
    <input type="text" class="form-control js-with-tooltip" size="5" title="EUR" th:field="*{michelPrice}" />
    </div>
    </div>
    </div>
    <!--/*/
    <span id="michelNumbers.errors" class="help-block" th:if="${#fields.hasErrors('michelNumbers')}" th:each="error : ${#fields.errors('michelNumbers')}" th:text="${error}"></span>
    <span id="michelPrice.errors" class="help-block" th:if="${#fields.hasErrors('michelPrice')}" th:each="error : ${#fields.errors('michelPrice')}" th:text="${error}"></span>
    /*/-->
    </div>
    </div>

When we submit a form, it should send a PATCH request to API /series/{id} with

[
  { "op": "add", "path": "/michel_numbers", "value": [ "1", "2", "3"] }
]

and reload a page on success. The value of path depends on a value of catalog name -- for Michel catalog, we use "/michel_numbers" but for Scott it should be "/scott_numbers" and so on.

It should show an error when server returns an error. Note that there can be 2 type of errors -- general (for a whole form) and validation error (for a particular field).

Part of #1339

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions