JiRa web components

All Components 

<jira-auth-user-card></jira-auth-user-card>

<hr>
<jira-auth-form></jira-auth-form>

<hr>
<div class="box container is-fluid">
    <strong>Ticket:</strong>
    <jira-issue-tag key="REISS-30"></jira-issue-tag>
    <hr>
    <strong>Description:</strong><br>
    <jira-text-wrapper>
        <p>Lorem ipsum [JIRA:KITT-128] dolor sit [JIRA:PD-120] amet</p>
        <p>Lorem ipsum [JIRA:REISS-30] dolor sit [JIRA:PD-119] amet</p>
        <p>Lorem ipsum [JIRA:KITT-100] dolor sit [JIRA:SCS-111] amet</p>
        <p>Lorem ipsum [JIRA:KITT-100] dolor sit [JIRA:SCS-111] amet</p>
    </jira-text-wrapper>
</div>

<hr>

<jira-project-select>
    <hr>
    <jira-project-card></jira-project-card>
    <!-- the project card will always show the selected project -->
    <hr>
    <jira-board-select>
        <!-- the board select will always list the boards for the selected project -->
        <hr>
        <div class="field is-horizontal">
            <label class="label field-label">Selected statuses:</label>
            <div class="control field-body">
                <input class="input" type="text" id="statuses" /><button onclick="updateStatuses()" class="button is-primary">refresh</button>
            </div>
        </div>
        <hr>
        <jira-board-panel showstatuses="true" showcheckboxes="true" id="panel">
        </jira-board-panel>
        <!-- the board panel will always show the details for the selected board -->
    </jira-board-select>
</jira-project-select>

<script>
    var updateStatuses = () => {
        document.getElementById('statuses').value = panel.getStatuses().filter(s => s.selected).map(s => s.name).join(',')
    }
    addEventListener('DOMContentLoaded', function() {
        var panel = document.getElementById('panel');
        panel.$on('jira-board-panel-status-selected', function({
            detail
        }) {
            updateStatuses();
        });
    });
</script>
 
{% render '@auth-user-card' %}
<hr>
{% render '@auth-form' %}
<hr>
<div class="box container is-fluid">
  <strong>Ticket:</strong>
  {% render '@issue-tag' %}
  <hr>
  <strong>Description:</strong><br>
  {% render '@text-wrapper' %}
</div>

<hr>


<jira-project-select>
    <hr>
    <jira-project-card></jira-project-card> <!-- the project card will always show the selected project -->
    <hr>
    <jira-board-select>  <!-- the board select will always list the boards for the selected project -->
        <hr>
        <div class="field is-horizontal">
          <label class="label field-label">Selected statuses:</label>
          <div class="control field-body">
            <input class="input" type="text" id="statuses" /><button onclick="updateStatuses()" class="button is-primary">refresh</button>
          </div>
        </div>
        <hr>
        <jira-board-panel showstatuses="true" showcheckboxes="true" id="panel">
        </jira-board-panel> <!-- the board panel will always show the details for the selected board -->
    </jira-board-select>
</jira-project-select>

<script>
  var updateStatuses = () => {
    document.getElementById('statuses').value = panel.getStatuses().filter(s => s.selected).map(s => s.name).join(',')
  }
  addEventListener('DOMContentLoaded', function() {
    var panel = document.getElementById('panel');
    panel.$on('jira-board-panel-status-selected', function({ detail }){
      updateStatuses();
    });
  });
</script>
 
/* No context defined for this component. */

There are no notes for this item.