jira-web-components
Version:
A web component library for JiRa
73 lines (61 loc) • 2.28 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='../../global.css'>
<link rel='stylesheet' href='../../bundle.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" />
<title>Preview Layout</title>
</head>
<body>
<jira-global-config
cors="http://localhost:4444"
safe="true"></jira-global-config>
<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>
<script type="text/javascript" src="../../bundle.js"></script>
</body>
</html>