511 lines
33 KiB
JavaScript
511 lines
33 KiB
JavaScript
|
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
||
|
|
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
||
|
|
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
||
|
|
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
|
||
|
|
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
|
||
|
|
var _, done = false;
|
||
|
|
for (var i = decorators.length - 1; i >= 0; i--) {
|
||
|
|
var context = {};
|
||
|
|
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
|
||
|
|
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
|
||
|
|
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
|
||
|
|
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
|
||
|
|
if (kind === "accessor") {
|
||
|
|
if (result === void 0) continue;
|
||
|
|
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
|
||
|
|
if (_ = accept(result.get)) descriptor.get = _;
|
||
|
|
if (_ = accept(result.set)) descriptor.set = _;
|
||
|
|
if (_ = accept(result.init)) initializers.unshift(_);
|
||
|
|
}
|
||
|
|
else if (_ = accept(result)) {
|
||
|
|
if (kind === "field") initializers.unshift(_);
|
||
|
|
else descriptor[key] = _;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (target) Object.defineProperty(target, contextIn.name, descriptor);
|
||
|
|
done = true;
|
||
|
|
};
|
||
|
|
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
|
||
|
|
var useValue = arguments.length > 2;
|
||
|
|
for (var i = 0; i < initializers.length; i++) {
|
||
|
|
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
|
||
|
|
}
|
||
|
|
return useValue ? value : void 0;
|
||
|
|
};
|
||
|
|
import * as plugins from '../../plugins.js';
|
||
|
|
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, state, } from '@design.estate/dees-element';
|
||
|
|
import * as sharedStyles from '../../styles/shared.styles.js';
|
||
|
|
import { demoFunc } from './upladmin-incident-update.demo.js';
|
||
|
|
let UpladminIncidentUpdate = (() => {
|
||
|
|
let _classDecorators = [customElement('upladmin-incident-update')];
|
||
|
|
let _classDescriptor;
|
||
|
|
let _classExtraInitializers = [];
|
||
|
|
let _classThis;
|
||
|
|
let _classSuper = DeesElement;
|
||
|
|
let _incident_decorators;
|
||
|
|
let _incident_initializers = [];
|
||
|
|
let _incident_extraInitializers = [];
|
||
|
|
let _loading_decorators;
|
||
|
|
let _loading_initializers = [];
|
||
|
|
let _loading_extraInitializers = [];
|
||
|
|
let _formData_decorators;
|
||
|
|
let _formData_initializers = [];
|
||
|
|
let _formData_extraInitializers = [];
|
||
|
|
let _errors_decorators;
|
||
|
|
let _errors_initializers = [];
|
||
|
|
let _errors_extraInitializers = [];
|
||
|
|
var UpladminIncidentUpdate = class extends _classSuper {
|
||
|
|
static { _classThis = this; }
|
||
|
|
static {
|
||
|
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
||
|
|
_incident_decorators = [property({ type: Object })];
|
||
|
|
_loading_decorators = [property({ type: Boolean })];
|
||
|
|
_formData_decorators = [state()];
|
||
|
|
_errors_decorators = [state()];
|
||
|
|
__esDecorate(this, null, _incident_decorators, { kind: "accessor", name: "incident", static: false, private: false, access: { has: obj => "incident" in obj, get: obj => obj.incident, set: (obj, value) => { obj.incident = value; } }, metadata: _metadata }, _incident_initializers, _incident_extraInitializers);
|
||
|
|
__esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
|
||
|
|
__esDecorate(this, null, _formData_decorators, { kind: "accessor", name: "formData", static: false, private: false, access: { has: obj => "formData" in obj, get: obj => obj.formData, set: (obj, value) => { obj.formData = value; } }, metadata: _metadata }, _formData_initializers, _formData_extraInitializers);
|
||
|
|
__esDecorate(this, null, _errors_decorators, { kind: "accessor", name: "errors", static: false, private: false, access: { has: obj => "errors" in obj, get: obj => obj.errors, set: (obj, value) => { obj.errors = value; } }, metadata: _metadata }, _errors_initializers, _errors_extraInitializers);
|
||
|
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
||
|
|
UpladminIncidentUpdate = _classThis = _classDescriptor.value;
|
||
|
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
||
|
|
}
|
||
|
|
static demo = demoFunc;
|
||
|
|
#incident_accessor_storage = __runInitializers(this, _incident_initializers, null);
|
||
|
|
get incident() { return this.#incident_accessor_storage; }
|
||
|
|
set incident(value) { this.#incident_accessor_storage = value; }
|
||
|
|
#loading_accessor_storage = (__runInitializers(this, _incident_extraInitializers), __runInitializers(this, _loading_initializers, false));
|
||
|
|
get loading() { return this.#loading_accessor_storage; }
|
||
|
|
set loading(value) { this.#loading_accessor_storage = value; }
|
||
|
|
#formData_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _formData_initializers, {
|
||
|
|
status: 'investigating',
|
||
|
|
message: '',
|
||
|
|
author: '',
|
||
|
|
}));
|
||
|
|
get formData() { return this.#formData_accessor_storage; }
|
||
|
|
set formData(value) { this.#formData_accessor_storage = value; }
|
||
|
|
#errors_accessor_storage = (__runInitializers(this, _formData_extraInitializers), __runInitializers(this, _errors_initializers, {}));
|
||
|
|
get errors() { return this.#errors_accessor_storage; }
|
||
|
|
set errors(value) { this.#errors_accessor_storage = value; }
|
||
|
|
statusIcons = (__runInitializers(this, _errors_extraInitializers), {
|
||
|
|
investigating: 'lucide:Search',
|
||
|
|
identified: 'lucide:Target',
|
||
|
|
monitoring: 'lucide:Eye',
|
||
|
|
resolved: 'lucide:CheckCircle',
|
||
|
|
postmortem: 'lucide:FileText',
|
||
|
|
});
|
||
|
|
static styles = [
|
||
|
|
plugins.domtools.elementBasic.staticStyles,
|
||
|
|
sharedStyles.commonStyles,
|
||
|
|
css `
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-container {
|
||
|
|
background: ${sharedStyles.colors.background.secondary};
|
||
|
|
border: 1px solid ${sharedStyles.colors.border.default};
|
||
|
|
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-header {
|
||
|
|
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||
|
|
border-bottom: 1px solid ${sharedStyles.colors.border.default};
|
||
|
|
background: ${sharedStyles.colors.background.muted};
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-title-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||
|
|
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-title-row dees-icon {
|
||
|
|
--icon-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: ${sharedStyles.colors.text.primary};
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.incident-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||
|
|
padding-left: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.incident-name {
|
||
|
|
font-size: 14px;
|
||
|
|
color: ${sharedStyles.colors.text.secondary};
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
padding: 4px 10px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 500;
|
||
|
|
border-radius: 9999px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge dees-icon {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge.critical {
|
||
|
|
background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.2)')};
|
||
|
|
color: ${sharedStyles.colors.status.majorOutage};
|
||
|
|
--icon-color: ${sharedStyles.colors.status.majorOutage};
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge.major {
|
||
|
|
background: ${cssManager.bdTheme('rgba(249, 115, 22, 0.1)', 'rgba(249, 115, 22, 0.2)')};
|
||
|
|
color: ${sharedStyles.colors.status.partialOutage};
|
||
|
|
--icon-color: ${sharedStyles.colors.status.partialOutage};
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge.minor {
|
||
|
|
background: ${cssManager.bdTheme('rgba(234, 179, 8, 0.1)', 'rgba(234, 179, 8, 0.2)')};
|
||
|
|
color: ${sharedStyles.colors.status.degraded};
|
||
|
|
--icon-color: ${sharedStyles.colors.status.degraded};
|
||
|
|
}
|
||
|
|
|
||
|
|
.severity-badge.maintenance {
|
||
|
|
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.2)')};
|
||
|
|
color: ${sharedStyles.colors.status.maintenance};
|
||
|
|
--icon-color: ${sharedStyles.colors.status.maintenance};
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-body {
|
||
|
|
display: grid;
|
||
|
|
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||
|
|
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||
|
|
}
|
||
|
|
|
||
|
|
dees-form {
|
||
|
|
display: contents;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||
|
|
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-option {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 18px 14px;
|
||
|
|
background: ${sharedStyles.colors.background.primary};
|
||
|
|
border: 2px solid ${sharedStyles.colors.border.default};
|
||
|
|
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-option:hover {
|
||
|
|
border-color: ${sharedStyles.colors.border.strong};
|
||
|
|
background: ${sharedStyles.colors.background.muted};
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-option.selected {
|
||
|
|
border-color: ${sharedStyles.colors.accent.primary};
|
||
|
|
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-option input {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-option.investigating dees-icon { --icon-color: ${sharedStyles.colors.status.partialOutage}; }
|
||
|
|
.status-option.identified dees-icon { --icon-color: ${sharedStyles.colors.status.degraded}; }
|
||
|
|
.status-option.monitoring dees-icon { --icon-color: ${sharedStyles.colors.status.maintenance}; }
|
||
|
|
.status-option.resolved dees-icon { --icon-color: ${sharedStyles.colors.status.operational}; }
|
||
|
|
.status-option.postmortem dees-icon { --icon-color: #a855f7; }
|
||
|
|
|
||
|
|
.status-label {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: ${sharedStyles.colors.text.primary};
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-desc {
|
||
|
|
font-size: 11px;
|
||
|
|
color: ${sharedStyles.colors.text.muted};
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-label {
|
||
|
|
display: block;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: ${sharedStyles.colors.text.primary};
|
||
|
|
margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.field-label.required::after {
|
||
|
|
content: ' *';
|
||
|
|
color: ${sharedStyles.colors.accent.danger};
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-section {
|
||
|
|
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: ${sharedStyles.colors.text.muted};
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-buttons {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
padding: 8px 14px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||
|
|
color: ${sharedStyles.colors.text.secondary};
|
||
|
|
background: ${sharedStyles.colors.background.primary};
|
||
|
|
border: 1px solid ${sharedStyles.colors.border.default};
|
||
|
|
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-btn:hover {
|
||
|
|
background: ${sharedStyles.colors.background.muted};
|
||
|
|
border-color: ${sharedStyles.colors.border.strong};
|
||
|
|
color: ${sharedStyles.colors.text.primary};
|
||
|
|
}
|
||
|
|
|
||
|
|
.template-btn dees-icon {
|
||
|
|
--icon-color: currentColor;
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.update-actions {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||
|
|
padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||
|
|
border-top: 1px solid ${sharedStyles.colors.border.default};
|
||
|
|
background: ${sharedStyles.colors.background.muted};
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Style dees-input components */
|
||
|
|
dees-input-text {
|
||
|
|
--dees-input-background: ${sharedStyles.colors.background.primary};
|
||
|
|
--dees-input-border-color: ${sharedStyles.colors.border.default};
|
||
|
|
}
|
||
|
|
`
|
||
|
|
];
|
||
|
|
async connectedCallback() {
|
||
|
|
await super.connectedCallback();
|
||
|
|
if (this.incident) {
|
||
|
|
this.formData = {
|
||
|
|
...this.formData,
|
||
|
|
status: this.incident.status,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updated(changedProperties) {
|
||
|
|
if (changedProperties.has('incident') && this.incident) {
|
||
|
|
this.formData = {
|
||
|
|
...this.formData,
|
||
|
|
status: this.incident.status,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
if (!this.incident) {
|
||
|
|
return html `<div class="update-container">No incident selected</div>`;
|
||
|
|
}
|
||
|
|
const statusOptions = [
|
||
|
|
{ value: 'investigating', label: 'Investigating', desc: 'Looking into the issue' },
|
||
|
|
{ value: 'identified', label: 'Identified', desc: 'Root cause found' },
|
||
|
|
{ value: 'monitoring', label: 'Monitoring', desc: 'Fix applied, watching' },
|
||
|
|
{ value: 'resolved', label: 'Resolved', desc: 'Issue is fixed' },
|
||
|
|
{ value: 'postmortem', label: 'Postmortem', desc: 'Analysis complete' },
|
||
|
|
];
|
||
|
|
const templates = [
|
||
|
|
{ icon: 'lucide:Search', label: 'Started investigating', message: 'We are currently investigating this issue.' },
|
||
|
|
{ icon: 'lucide:Target', label: 'Issue identified', message: 'We have identified the root cause and are working on a fix.' },
|
||
|
|
{ icon: 'lucide:Rocket', label: 'Fix deployed', message: 'A fix has been deployed. We are monitoring the results.' },
|
||
|
|
{ icon: 'lucide:CheckCircle', label: 'Resolved', message: 'This incident has been resolved. All systems are operating normally.' },
|
||
|
|
];
|
||
|
|
const severityIcons = {
|
||
|
|
critical: 'lucide:AlertCircle',
|
||
|
|
major: 'lucide:AlertTriangle',
|
||
|
|
minor: 'lucide:Info',
|
||
|
|
maintenance: 'lucide:Wrench',
|
||
|
|
};
|
||
|
|
return html `
|
||
|
|
<div class="update-container">
|
||
|
|
<div class="update-header">
|
||
|
|
<div class="update-title-row">
|
||
|
|
<dees-icon .icon=${'lucide:MessageSquarePlus'} .iconSize=${24}></dees-icon>
|
||
|
|
<h2 class="update-title">Post Update</h2>
|
||
|
|
</div>
|
||
|
|
<div class="incident-info">
|
||
|
|
<span class="severity-badge ${this.incident.severity}">
|
||
|
|
<dees-icon .icon=${severityIcons[this.incident.severity]} .iconSize=${12}></dees-icon>
|
||
|
|
${this.incident.severity}
|
||
|
|
</span>
|
||
|
|
<span class="incident-name">${this.incident.title}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="update-body">
|
||
|
|
<dees-form>
|
||
|
|
<div>
|
||
|
|
<label class="field-label required">Status</label>
|
||
|
|
<div class="status-grid">
|
||
|
|
${statusOptions.map(opt => html `
|
||
|
|
<label
|
||
|
|
class="status-option ${opt.value} ${this.formData.status === opt.value ? 'selected' : ''}"
|
||
|
|
@click="${() => this.handleStatusChange(opt.value)}"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
name="status"
|
||
|
|
value="${opt.value}"
|
||
|
|
?checked="${this.formData.status === opt.value}"
|
||
|
|
/>
|
||
|
|
<dees-icon .icon=${this.statusIcons[opt.value]} .iconSize=${24}></dees-icon>
|
||
|
|
<span class="status-label">${opt.label}</span>
|
||
|
|
<span class="status-desc">${opt.desc}</span>
|
||
|
|
</label>
|
||
|
|
`)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label class="field-label required">Update Message</label>
|
||
|
|
<div class="template-section">
|
||
|
|
<div class="template-label">Quick templates:</div>
|
||
|
|
<div class="template-buttons">
|
||
|
|
${templates.map(tpl => html `
|
||
|
|
<button type="button" class="template-btn" @click="${() => this.applyTemplate(tpl.message)}">
|
||
|
|
<dees-icon .icon=${tpl.icon} .iconSize=${12}></dees-icon>
|
||
|
|
${tpl.label}
|
||
|
|
</button>
|
||
|
|
`)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<dees-input-text
|
||
|
|
key="message"
|
||
|
|
inputType="textarea"
|
||
|
|
.value="${this.formData.message}"
|
||
|
|
placeholder="Provide an update on the incident status..."
|
||
|
|
required
|
||
|
|
@changeSubject="${this.handleMessageChange}"
|
||
|
|
></dees-input-text>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<dees-input-text
|
||
|
|
key="author"
|
||
|
|
label="Author (Optional)"
|
||
|
|
.value="${this.formData.author || ''}"
|
||
|
|
placeholder="Your name or team name"
|
||
|
|
@changeSubject="${this.handleAuthorChange}"
|
||
|
|
></dees-input-text>
|
||
|
|
</dees-form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="update-actions">
|
||
|
|
<dees-button type="discreet" @click="${this.handleCancel}" ?disabled="${this.loading}">
|
||
|
|
Cancel
|
||
|
|
</dees-button>
|
||
|
|
${this.formData.status === 'resolved' ? html `
|
||
|
|
<dees-button type="highlighted" @click="${this.handlePost}" ?disabled="${this.loading}" style="--dees-button-background: ${sharedStyles.colors.status.operational}">
|
||
|
|
${this.loading ? html `<dees-spinner .size=${16}></dees-spinner>` : html `<dees-icon .icon=${'lucide:CheckCircle'} .iconSize=${16}></dees-icon>`}
|
||
|
|
Resolve Incident
|
||
|
|
</dees-button>
|
||
|
|
` : html `
|
||
|
|
<dees-button type="highlighted" @click="${this.handlePost}" ?disabled="${this.loading}">
|
||
|
|
${this.loading ? html `<dees-spinner .size=${16}></dees-spinner>` : html `<dees-icon .icon=${'lucide:Send'} .iconSize=${16}></dees-icon>`}
|
||
|
|
Post Update
|
||
|
|
</dees-button>
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
handleMessageChange(e) {
|
||
|
|
this.formData = { ...this.formData, message: e.detail };
|
||
|
|
if (this.errors.message) {
|
||
|
|
this.errors = { ...this.errors, message: '' };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleAuthorChange(e) {
|
||
|
|
this.formData = { ...this.formData, author: e.detail };
|
||
|
|
}
|
||
|
|
handleStatusChange(status) {
|
||
|
|
this.formData = { ...this.formData, status };
|
||
|
|
}
|
||
|
|
applyTemplate(message) {
|
||
|
|
this.formData = { ...this.formData, message };
|
||
|
|
}
|
||
|
|
validate() {
|
||
|
|
const errors = {};
|
||
|
|
if (!this.formData.message?.trim()) {
|
||
|
|
errors.message = 'Update message is required';
|
||
|
|
}
|
||
|
|
this.errors = errors;
|
||
|
|
return Object.keys(errors).length === 0;
|
||
|
|
}
|
||
|
|
handlePost() {
|
||
|
|
if (!this.validate()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.dispatchEvent(new CustomEvent('updatePost', {
|
||
|
|
detail: {
|
||
|
|
incidentId: this.incident?.id,
|
||
|
|
update: { ...this.formData }
|
||
|
|
},
|
||
|
|
bubbles: true,
|
||
|
|
composed: true
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
handleCancel() {
|
||
|
|
this.dispatchEvent(new CustomEvent('updateCancel', {
|
||
|
|
bubbles: true,
|
||
|
|
composed: true
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
reset() {
|
||
|
|
this.formData = {
|
||
|
|
status: this.incident?.status || 'investigating',
|
||
|
|
message: '',
|
||
|
|
author: '',
|
||
|
|
};
|
||
|
|
this.errors = {};
|
||
|
|
}
|
||
|
|
static {
|
||
|
|
__runInitializers(_classThis, _classExtraInitializers);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return UpladminIncidentUpdate = _classThis;
|
||
|
|
})();
|
||
|
|
export { UpladminIncidentUpdate };
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsYWRtaW4taW5jaWRlbnQtdXBkYXRlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3VwbGFkbWluLWluY2lkZW50LXVwZGF0ZS91cGxhZG1pbi1pbmNpZGVudC11cGRhdGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sa0JBQWtCLENBQUM7QUFDNUMsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixHQUFHLEVBQ0gsVUFBVSxFQUNWLFNBQVMsRUFDVCxLQUFLLEdBQ04sTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEtBQUssWUFBWSxNQUFNLCtCQUErQixDQUFDO0FBRTlELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztJQVdqRCxzQkFBc0I7NEJBRGxDLGFBQWEsQ0FBQywwQkFBMEIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7O3NDQUFuQixTQUFRLFdBQVc7Ozs7b0NBR3BELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO29DQUczQixLQUFLLEVBQUU7a0NBT1AsS0FBSyxFQUFFO1lBWlIsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFpQztZQUdsRCwwS0FBUyxPQUFPLDZCQUFQLE9BQU8seUZBQWtCO1lBR2xDLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFJZjtZQUdGLHVLQUFTLE1BQU0sNkJBQU4sTUFBTSx1RkFBOEI7WUFqQi9DLDZLQW9jQzs7OztRQW5jUSxNQUFNLENBQUMsSUFBSSxHQUFHLFFBQVEsQ0FBQztRQUc5Qiw2RUFBNkMsSUFBSSxFQUFDO1FBQWxELElBQVMsUUFBUSw4Q0FBaUM7UUFB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
|