innoq/iqvoc

<%= page_header :title => "iQvoc Front-end Components" %>

<h2>Entity Selector</h2>

<p>multi-selection with auto-completion</p>

<p>
  the selection is transmitted as comma-separated values via the original
  <code class="language-html">input</code> field
</p>

<p>typically used for choosing associated concepts from the thesaurus</p>

<input type="text" class="entity_select"
    data-query-url="<%= @concepts_uri %>"
    data-entity-uri="<%= @concept_uri %>"
    data-entities="<%= [{ id: "foo", name: "Foo" }, { id: "bar", name: "Bar" }].to_json %>"
    data-no-results-msg="No results">

<p>
  <code class="language-html">data-singular="true"</code> restricts selection to
  a single item single item (e.g. for choosing a parent within mono hierarchies)
</p>

<input type="text" class="entity_select"
    data-query-url="<%= @concepts_uri %>"
    data-entity-uri="<%= @concept_uri %>"
    data-singular="true"
    data-no-results-msg="No results">

<p>
  <code class="language-html">data-qualified="rank"</code> (with "rank" being an
  arbitrary identifier) can be used to add an additional qualifier to selected
  items, typically for ordering - these qualifiers are appended to the
  respective value with a colon
</p>

<p>NB: requires <code class="language-javascript">QualifiedEntitySelector</code></p>

<input type="text" class="entity_select"
    data-query-url="<%= @concepts_uri %>"
    data-entity-uri="<%= @concept_uri %>"
    data-entities="<%= [{ id: "foo", name: "Foo", rank: 100 }].to_json %>"
    data-qualified="rank"
    data-no-results-msg="No results">


<h2>Federated Concept Mapper</h2>

<p>Info: needs access to <%= link_to 'http://try.iqvoc.net' %>.</p>

<fieldset class="matches" data-datasets="{&quot;http://try.iqvoc.net&quot;:&quot;iQvoc&quot;}"
  data-remote-proxy-url="/en/alphabetical_concepts.html"
  data-translation-other="Other"
  data-no-results-msg="No results">

  <legend>Matches</legend>
  <div class="form-group" style="display: none;">
    <label class="col-sm-2 col-form-label" for="concept[inline_match_skos_close_matches]">Close Matches</label>
    <div class="col-sm-10">
      <textarea name="concept[inline_match_skos_close_matches]" id="concept_inline_match_skos_close_matches" class="form-control" rows="4"></textarea>
    </div>
  </div>
  <div class="form-group" style="display: none;">
    <label class="col-sm-2 col-form-label" for="concept[inline_match_skos_exact_matches]">Exact Matches</label>
    <div class="col-sm-10">
      <textarea name="concept[inline_match_skos_exact_matches]" id="concept_inline_match_skos_exact_matches" class="form-control" rows="4"></textarea>
    </div>
  </div>
  <div class="form-group" style="display: none;">
    <label class="col-sm-2 col-form-label" for="concept[inline_match_skos_related_matches]">Related Matches</label>
    <div class="col-sm-10">
      <textarea name="concept[inline_match_skos_related_matches]" id="concept_inline_match_skos_related_matches" class="form-control" rows="4"></textarea>
    </div>
  </div>
  <div class="form-group" style="display: none;">
    <label class="col-sm-2 col-form-label" for="concept[inline_match_skos_broad_matches]">Broader Matches</label>
    <div class="col-sm-10">
      <textarea name="concept[inline_match_skos_broad_matches]" id="concept_inline_match_skos_broad_matches" class="form-control" rows="4"></textarea>
    </div>
  </div>
  <div class="form-group" style="display: none;">
    <label class="col-sm-2 col-form-label" for="concept[inline_match_skos_narrow_matches]">Narrower Matches</label>
    <div class="col-sm-10">
      <textarea name="concept[inline_match_skos_narrow_matches]" id="concept_inline_match_skos_narrow_matches" class="form-control" rows="4"></textarea>
    </div>
  </div>
  <ul class="concept-mappings"></ul>
</fieldset>