-
-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move save announecement creation to the frontend
- Loading branch information
Showing
12 changed files
with
191 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { customElement, property } from "lit/decorators.js"; | ||
| import { html, TemplateResult } from "lit"; | ||
| import { ShadowlessLitElement } from "components/shadowless_lit_element"; | ||
| import { createSavedAnnotation, SavedAnnotation } from "state/SavedAnnotations"; | ||
| import { ref } from "lit/directives/ref.js"; | ||
| import { Modal } from "bootstrap"; | ||
| import "./saved_annotation_form"; | ||
|
|
||
| @customElement("d-new-saved-annotation") | ||
| export class NewSavedAnnotation extends ShadowlessLitElement { | ||
| @property({ type: Number, attribute: "from-annotation-id" }) | ||
| fromAnnotationId: number; | ||
| @property({ type: String, attribute: "annotation-text" }) | ||
| annotationText: string; | ||
|
|
||
| @property({ state: true }) | ||
| errors: string[]; | ||
|
|
||
| savedAnnotation: SavedAnnotation; | ||
| modal: Modal; | ||
|
|
||
| get newSavedAnnotation(): SavedAnnotation { | ||
| return { | ||
| id: undefined, | ||
| title: "", | ||
| annotation_text: this.annotationText | ||
| }; | ||
| } | ||
|
|
||
| async createSavedAnnotation(): Promise<void> { | ||
| try { | ||
| await createSavedAnnotation({ | ||
| from: this.fromAnnotationId, | ||
| saved_annotation: this.savedAnnotation | ||
| }); | ||
| this.errors = undefined; | ||
| this.modal?.hide(); | ||
| } catch (errors) { | ||
| this.errors = errors; | ||
| } | ||
| } | ||
|
|
||
| initModal(el: Element): void { | ||
| if (!this.modal) { | ||
| this.modal = new Modal(el); | ||
| } | ||
| } | ||
|
|
||
| render(): TemplateResult { | ||
| return html` | ||
| <a class="btn btn-icon annotation-control-button annotation-edit" | ||
| title="${I18n.t("js.saved_annotation.new.button_title")}" | ||
| @click=${() => this.modal.show()} | ||
| > | ||
| <i class="mdi mdi-content-save"></i> | ||
| </a> | ||
| <div class="modal fade" ${ref(el => this.initModal(el))} tabindex="-1" role="dialog"> | ||
| <div class="modal-dialog" role="document"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h4 class="modal-title">${I18n.t("js.saved_annotation.new.title")}</h4> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| ${this.errors !== undefined ? html` | ||
| <div class="callout callout-danger"> | ||
| <h4>${I18n.t("js.saved_annotation.new.errors", { count: this.errors.length })}</h4> | ||
| <ul> | ||
| ${this.errors.map(error => html`<li>${error}</li>`)} | ||
| </ul> | ||
| </div> | ||
| ` : ""} | ||
| <d-saved-annotation-form | ||
| .savedAnnotation=${this.newSavedAnnotation} | ||
| @change=${e => this.savedAnnotation = e.detail} | ||
| ></d-saved-annotation-form> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button class="btn btn-primary btn-text" @click=${() => this.createSavedAnnotation()}> | ||
| ${I18n.t("js.saved_annotation.new.save")} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div>`; | ||
| } | ||
| } |
59 changes: 59 additions & 0 deletions
59
app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { customElement, property } from "lit/decorators.js"; | ||
| import { html, TemplateResult } from "lit"; | ||
| import { ShadowlessLitElement } from "components/shadowless_lit_element"; | ||
| import { SavedAnnotation } from "state/SavedAnnotations"; | ||
| import {unsafeHTML} from "lit/directives/unsafe-html.js"; | ||
|
|
||
| @customElement("d-saved-annotation-form") | ||
| export class SavedAnnotationForm extends ShadowlessLitElement { | ||
| @property({ type: Object }) | ||
| savedAnnotation: SavedAnnotation; | ||
|
|
||
| savedAnnotationChanged(): void { | ||
| const event = new CustomEvent("change", { | ||
| detail: this.savedAnnotation, | ||
| bubbles: true, | ||
| composed: true } | ||
| ); | ||
| this.dispatchEvent(event); | ||
| } | ||
|
|
||
| updateTitle(e: Event): void { | ||
| this.savedAnnotation.title = (e.target as HTMLInputElement).value; | ||
| e.stopPropagation(); | ||
| this.savedAnnotationChanged(); | ||
| } | ||
|
|
||
| updateText(e: Event): void { | ||
| this.savedAnnotation.annotation_text = (e.target as HTMLTextAreaElement).value; | ||
| e.stopPropagation(); | ||
| this.savedAnnotationChanged(); | ||
| } | ||
|
|
||
| render(): TemplateResult { | ||
| return html` | ||
| <form class="form"> | ||
| <div class="field form-group row"> | ||
| <label class="col-sm-4 col-form-label"> | ||
| ${I18n.t("js.saved_annotation.title")} | ||
| </label> | ||
| <div class="col-sm-8"> | ||
| <input required="required" class="form-control" type="text" | ||
| .value=${this.savedAnnotation.title} @change=${e => this.updateTitle(e)}> | ||
| </div> | ||
| </div> | ||
| <div class="field form-group row"> | ||
| <label class="col-sm-4 col-form-label"> | ||
| ${I18n.t("js.saved_annotation.annotation_text")} | ||
| </label> | ||
| <div class="col-sm-8"> | ||
| <textarea required="required" class="form-control" rows="4" | ||
| .value=${this.savedAnnotation.annotation_text} @change=${e => this.updateText(e)}></textarea> | ||
| </div> | ||
| <span class="help-block offset-sm-4 col-sm-8"> | ||
| ${unsafeHTML(I18n.t("js.saved_annotation.form.markdown_html"))} | ||
| </span> | ||
| </div> | ||
| </form>`; | ||
| } | ||
| } |
File renamed without changes.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| json.extract! @saved_annotation, :id, :title, :annotation_text, :user_id, :exercise_id, :course_id, :created_at, :updated_at |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters