blob: 5303c578264083697ae90f39d09c3f3235b3c5d8 [file] [log] [blame]
// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {LitElement, html, css} from 'lit-element';
import {SHARED_STYLES} from 'shared/shared-styles';
import './mr-edit-field.js';
/**
* `<mr-edit-status>`
*
* Editing form for either an approval or the overall issue.
*
*/
export class MrEditStatus extends LitElement {
/** @override */
static get styles() {
return [
SHARED_STYLES,
css`
:host {
width: 100%;
}
select {
width: var(--mr-edit-field-width);
padding: var(--mr-edit-field-padding);
}
.grid-input {
margin-top: 8px;
display: grid;
grid-gap: var(--mr-input-grid-gap);
grid-template-columns: auto 1fr;
}
.grid-input[hidden] {
display: none;
}
label {
font-weight: bold;
word-wrap: break-word;
text-align: left;
}
#mergedIntoInput {
width: 160px;
}
`,
];
}
/** @override */
render() {
return html`
<select
@change=${this._selectChangeHandler}
aria-label="Status"
id="statusInput"
>
${this._statusesGrouped.map((group) => html`
<optgroup label=${group.name} ?hidden=${!group.name}>
${group.statuses.map((item) => html`
<option
value=${item.status}
.selected=${this.status === item.status}
>
${item.status}
${item.docstring ? `= ${item.docstring}` : ''}
</option>
`)}
</optgroup>
${!group.name ? html`
${group.statuses.map((item) => html`
<option
value=${item.status}
.selected=${this.status === item.status}
>
${item.status}
${item.docstring ? `= ${item.docstring}` : ''}
</option>
`)}
` : ''}
`)}
</select>
<div class="grid-input" ?hidden=${!this._showMergedInto}>
<label for="mergedIntoInput" id="mergedIntoLabel">Merged into:</label>
<input
id="mergedIntoInput"
value=${this.mergedInto || ''}
@change=${this._changeHandler}
></input>
</div>`;
}
/** @override */
static get properties() {
return {
initialStatus: {type: String},
status: {type: String},
statuses: {type: Array},
isApproval: {type: Boolean},
mergedInto: {type: String},
};
}
/** @override */
update(changedProperties) {
if (changedProperties.has('initialStatus')) {
this.status = this.initialStatus;
}
super.update(changedProperties);
}
get _showMergedInto() {
const status = this.status || this.initialStatus;
return (status === 'Duplicate');
}
get _statusesGrouped() {
const statuses = this.statuses;
const isApproval = this.isApproval;
if (!statuses) return [];
if (isApproval) {
return [{statuses: statuses}];
}
return [
{
name: 'Open',
statuses: statuses.filter((s) => s.meansOpen),
},
{
name: 'Closed',
statuses: statuses.filter((s) => !s.meansOpen),
},
];
}
async reset() {
await this.updateComplete;
const mergedIntoInput = this.shadowRoot.querySelector('#mergedIntoInput');
if (mergedIntoInput) {
mergedIntoInput.value = this.mergedInto || '';
}
this.status = this.initialStatus;
}
get delta() {
const result = {};
if (this.status !== this.initialStatus) {
result['status'] = this.status;
}
if (this._showMergedInto) {
const newMergedInto = this.shadowRoot.querySelector(
'#mergedIntoInput').value;
if (newMergedInto !== this.mergedInto) {
result['mergedInto'] = newMergedInto;
}
} else if (this.initialStatus === 'Duplicate') {
result['mergedInto'] = '';
}
return result;
}
_selectChangeHandler(e) {
const statusInput = e.target;
this.status = statusInput.value;
this._changeHandler(e);
}
/**
* @param {Event} e
* @fires CustomEvent#change
* @private
*/
_changeHandler(e) {
this.dispatchEvent(new CustomEvent('change'));
}
}
customElements.define('mr-edit-status', MrEditStatus);