import { Component, Prop, Watch } from "@stencil/core";
import { iConfig } from "./atajo-notes-and-flags.interface";
import { defaultNote } from "./atajo-notes-and-flags.structure";
import Storage from "../../../services/storage";
/**
* A component to create notes and flags
*
* Basic usage example:
* ```html
* <script src="https://components.atajo.io/atajo-web-components.js"></script>
* <atajo-notes-and-flags></atajo-notes-and-flags>
* ```
*/
@Component({
tag: "atajo-notes-and-flags",
styleUrl: "atajo-notes-and-flags.scss",
shadow: true
})
export class AtajoNotesAndFlagsComponent {
@Prop() labelCancel: string = 'Cancel';
@Prop() labelSave: string = 'Save';
@Prop({ mutable: true }) config: iConfig = defaultNote;
storage: Storage;
constructor() {
this.storage = new Storage('atajo-notes-and-flags');
}
createNewNoteOrFlag() {
this.storage.insert(this.config);
}
inputChanged(sectionIndex, fieldId, event) {
this.config.sections[sectionIndex].fields.forEach(field => {
if(field.id == fieldId) {
field['value'] = event.target.value;
}
if(field.isTitle) {
this.config.title = field['value'];
}
});
}
clickCancel() {
// TODO: Handle cancel event
}
clickSave() {
this.createNewNoteOrFlag();
}
render() {
return (
<atajo-card>
{
this.config.sections.map((section, sectionIndex) => {
return section.fields.map((field) =>
<atajo-textfield
id={field.id}
type={field.type}
label={field.label}
value={field.value}
disabled={field.isDisabled}
onInput={(event) => this.inputChanged(sectionIndex, field.id, event)}
></atajo-textfield>
)
})
}
<atajo-card-actions>
<atajo-button onClick={() => this.clickCancel()}>{this.labelCancel}</atajo-button>
<atajo-button raised onClick={() => this.clickSave()}>{this.labelSave}</atajo-button>
</atajo-card-actions>
</atajo-card>
);
}
}
|