Skip to content

Commit

Permalink
SAK-49202 rubrics. Fix deleting of rubrics. (#11969)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrianfish
adrianfish authored Oct 6, 2023
1 parent 5ade5ef commit 9179d75
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 132 deletions.
11 changes: 7 additions & 4 deletions rubrics/api/src/main/bundle/rubrics.properties
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
grading_rubric=Grading Rubric
rubric=rubric
criterion=criterion
rubric=Rubric
criterion=Criterion
confirm_remove_evaluation=Are you sure you want to remove this evaluation? You will NOT be able to retrieve it!
delete_item_title=Delete {}
rating=rating
rubric=Rubric
rubric_title=Rubric Title
manage_rubrics=Manage Rubrics
add_rubric=Add Rubric
Expand All @@ -18,7 +20,7 @@ cancel=Cancel
save=Save
done=Done
total=Total
confirm_remove=Are you sure you want to remove
confirm_remove=Are you sure you want to remove "{}" ?
is_locked=is locked: Only titles, descriptions and criterion order can be modified
locked_warning=Rubric in use. Editable content will be updated on all previously associated items.
points=Points
Expand All @@ -35,6 +37,7 @@ add_rating=Add rating to
rating_title=Rating Title
rating_description=Rating Description
drag_order=Drag to reorder
criterion=Criterion
criterion_title=Criterion Title
criterion_description=Criterion Description
criterion_group_title=Criterion Group Title
Expand Down Expand Up @@ -139,7 +142,7 @@ expand_all=Expand All
collapse_all=Collapse All
rubric_points_warning=A rubric's point value should match the maximum point value of the activity or question to grade.
rubric_view_selection_title=Select the type of rubric view: grading, student summary, or criteria summary
remove=Remove
remove=Remove {}
drag_to_reorder_info=To reorder, click and drag the <i class=\"si si-drag-handle\" aria-hidden=\"true\"></i> icon, \
or use your keyboard to select a drag icon and the 'e' or 'd' key to move it.
drag_to_reorder_label=To reorder with a mouse, click and drag this icon, \
Expand Down
2 changes: 2 additions & 0 deletions webcomponents/tool/src/main/frontend/js/rubrics/rubrics-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,6 @@ export class RubricsElement extends SakaiElement {
div && div.appendChild(summary);
this.openRubricsTab(`rubric-${type}-summary-${this.instanceSalt}`);
}

_stopPropagation(e) { e.stopPropagation(); }
}
147 changes: 57 additions & 90 deletions webcomponents/tool/src/main/frontend/js/rubrics/sakai-item-delete.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {RubricsElement} from "./rubrics-element.js";
import {html} from "/webcomponents/assets/lit-element/lit-element.js";
import {tr} from "./sakai-rubrics-language.js";
import { RubricsElement } from "./rubrics-element.js";
import { html } from "/webcomponents/assets/lit-element/lit-element.js";
import { tr } from "./sakai-rubrics-language.js";

export class SakaiItemDelete extends RubricsElement {

Expand All @@ -10,8 +10,7 @@ export class SakaiItemDelete extends RubricsElement {

this._rubric;
this._criterion;

this.popoverOpen = "false";
this.loadTranslations("rubrics").then(r => this._i18n = r);
}

static get properties() {
Expand All @@ -20,8 +19,9 @@ export class SakaiItemDelete extends RubricsElement {
rubricId: {attribute: "rubric-id", type: String},
siteId: { attribute: "site-id", type: String },
rubric: { type: Object },
criterionId: {attribute: "criterion-id", type: String},
criterion: { type: Object }
criterionId: { attribute: "criterion-id", type: String },
criterion: { type: Object },
_i18n: { attribute: false, type: Object },
};
}

Expand All @@ -47,91 +47,68 @@ export class SakaiItemDelete extends RubricsElement {

return html`
<button
class="btn-transparent link-color delete"
@focus="${this.onFocus}"
@focusout="${this.focusOut}"
aria-haspopup="true"
aria-expanded="${this.popoverOpen}"
aria-controls="delete_${this.type}_${this.item.id}"
title="${tr("remove", [this.item.title])}"
aria-label="${tr("remove", [this.item.title])}"
@keyup="${this.openEditWithKeyboard}"
@click="${this.deleteItem}"
>
<span class="fa fa-times"/>
class="btn btn-sm"
data-bs-toggle="modal"
data-bs-target="#delete-${this.item.id}"
aria-controls="delete-${this.item.id}"
aria-expanded="false"
title="${tr("remove", [this.item.title])}"
aria-label="${tr("remove", [this.item.title])}"
@click=${this._stopPropagation}>
<span class="fa fa-times pe-none" style="pointer-events: none;"></span>
</button>
<div id="delete_${this.type}_${this.item.id}" class="popover rubric-delete-popover left rubrics-popover">
<div class="arrow-0"></div>
<div class="popover-title" tabindex="0">${tr("confirm_remove")} ${this.item.title}</div>
<div class="popover-content">
<div class="buttons text-right act">
<button title="${tr("confirm_remove")}" class="active save" @click="${this.saveDelete}">
<sr-lang key="remove_label" />
</button>
<button class="btn btn-link btn-xs cancel" @click="${this.cancelDelete}">
<sr-lang key="cancel">Cancel</sr-lang>
</button>
<div id="delete-${this.item.id}"
tabindex="-1"
class="modal"
data-bs-backdrop="static"
aria-labelledby="delete-modal-label-${this.item.id}"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delete-modal-label-${this.item.id}">
${tr("delete_item_title", [ this.type === "criterion" ? this._i18n.criterion : this._i18n.rubric ])}
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="${tr("close_dialog")}">
</button>
</div>
<div class="modal-body">
<div>${tr("confirm_remove", [ this.item.title ])}</div>
</div>
<div class="modal-footer">
<div class="text-end">
<button type="button"
class="btn btn-primary"
title="${tr("confirm_remove")}"
@click=${this.saveDelete}>
<sr-lang key="remove_label" />
</button>
<button type="button"
class="btn btn-secondary btn-xs"
data-bs-dismiss="modal"
@click=${this.cancelDelete}>
<sr-lang key="cancel">Cancel</sr-lang>
</button>
</div>
</div>
</div>
</div>
</div>
`;
}

onFocus(e) {

const criterionRow = e.target.closest('.criterion-row');
if (criterionRow != undefined) criterionRow.classList.add("focused");
}

focusOut(e) {

const criterionRow = e.target.closest('.criterion-row');
if (criterionRow != undefined) criterionRow.classList.remove("focused");
}

closeOpen() {

$('.show-tooltip .cancel').click();
}

deleteItem(e) {
e.preventDefault();
e.stopPropagation();

if (!this.classList.contains("show-tooltip")) {
this.closeOpen();
this.popoverOpen = "true";

this.classList.add("show-tooltip");

const popover = $(`#delete_${this.type}_${this.item.id}`);

const target = this.querySelector(".fa-times");

popover[0].style.left = `${target.offsetLeft - 280 }px`;
popover[0].style.top = `${target.offsetTop - this.offsetHeight * 2 - 10 }px`;

$('.btn-danger').focus();

popover.show();

} else {
this.popoverOpen = "false";
this.hideToolTip();
$(`#delete_${this.type}_${this.item.id}`).hide();
}
}

hideToolTip() {
this.classList.remove("show-tooltip");
bootstrap.Modal.getOrCreateInstance(this.querySelector(".modal")).hide();
}

cancelDelete(e) {

e.stopPropagation();
this.hideToolTip();
$(`#delete_${this.type}_${this.item.id}`).hide();
}

saveDelete(e) {
Expand All @@ -152,25 +129,15 @@ export class SakaiItemDelete extends RubricsElement {
.then(r => {

if (r.ok) {
this.updateUi();

this.hideToolTip();
this.dispatchEvent(new CustomEvent('delete-item', { detail: this.item, bubbles: true, composed: true }));
} else {
throw new Error("Network error while deleting rubric/criterion");
}
})
.catch (error => console.error(error));
}

updateUi() {

this.dispatchEvent(new CustomEvent('delete-item', {detail: this.item, bubbles: true, composed: true}));
this.hideToolTip();
}

openEditWithKeyboard(e) {
if (e.keyCode == 32) {
this.deleteItem(e);
}
}
}

if (!customElements.get("sakai-item-delete")) {
Expand Down
68 changes: 32 additions & 36 deletions webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,49 +132,45 @@ export class SakaiRubric extends RubricsElement {
<div class="actions">
${!this.rubric.locked ? html`
<div class="action-container">
<button
class="btn-transparent ${(this.rubric.draft && this.rubric.weighted && !this.validWeight) ? "disabled" : "link-color"} draft"
<button type="button"
class="btn btn-sm ${(this.rubric.draft && this.rubric.weighted && !this.validWeight) ? "disabled" : ""} draft"
title="${this.draftLabel}"
aria-label="${this.draftLabel}"
@keyup="${this.openEditWithKeyboard}"
@click="${this.draftChange}"
>
<span class="fa ${this.draftIcon}"/>
@keyup=${this.openEditWithKeyboard}
@click=${this.draftChange}>
<span class="fa ${this.draftIcon}"></span>
</button>
</div>
<div class="action-container">
<button
class="btn-transparent link-color weighted"
title="${this.weightLabel}"
aria-label="${this.weightLabel}"
@keyup="${this.openEditWithKeyboard}"
@click="${this.weightedChange}"
>
<span class="fa ${this.weightedIcon}"/>
<button type="button"
class="btn btn-sm weighted"
title="${this.weightLabel}"
aria-label="${this.weightLabel}"
@keyup=${this.openEditWithKeyboard}
@click=${this.weightedChange}>
<span class="fa ${this.weightedIcon}"></span>
</button>
</div>`
: ""
}
<div class="action-container">
<button
class="btn-transparent link-color share"
title="${tr(this.shareTitleKey, [this.rubric.title])}"
aria-label="${tr(this.shareTitleKey, [this.rubric.title])}"
@keyup="${this.openEditWithKeyboard}"
@click="${this.sharingChange}"
>
<span class="fa ${this.shareIcon}"/>
<button type="button"
class="btn btn-sm share"
title="${tr(this.shareTitleKey, [this.rubric.title])}"
aria-label="${tr(this.shareTitleKey, [this.rubric.title])}"
@keyup=${this.openEditWithKeyboard}
@click=${this.sharingChange}>
<span class="fa ${this.shareIcon}"></span>
</button>
</div>
<div class="action-container">
<button
class="btn-transparent link-color clone"
title="${tr("copy")} ${this.rubric.title}"
aria-label="${tr("copy")} ${this.rubric.title}"
@keyup="${this.openEditWithKeyboard}"
@click="${this.cloneRubric}"
>
<span class="fa fa-copy"/>
<button type="button"
class="btn btn-sm clone"
title="${tr("copy")} ${this.rubric.title}"
aria-label="${tr("copy")} ${this.rubric.title}"
@keyup=${this.openEditWithKeyboard}
@click=${this.cloneRubric}>
<span class="fa fa-copy"></span>
</button>
</div>
${!this.rubric.locked ? html`
Expand All @@ -192,8 +188,8 @@ export class SakaiRubric extends RubricsElement {
<sakai-rubric-pdf
site-id="${this.siteId}"
rubric-title="${this.rubric.title}"
rubric-id="${this.rubric.id}"
/>
rubric-id="${this.rubric.id}">
</sakai-rubric-pdf>
</div>`
: ""
}
Expand All @@ -207,16 +203,16 @@ export class SakaiRubric extends RubricsElement {
site-id="${this.rubric.ownerId}"
.criteria="${this.rubric.criteria}"
@save-weights="${this.handleSaveWeights}"
@weight-changed="${this.handleCriterionWeightChange}"
@refresh-total-weight="${this.handleRefreshTotalWeight}"
@weight-changed=${this.handleCriterionWeightChange}
@refresh-total-weight=${this.handleRefreshTotalWeight}
.weighted=${this.rubric.weighted}
total-weight="${this.totalWeight}"
?valid-weight="${this.validWeight}"
max-points="${this.maxPoints}"
min-points="${this.minPoints}"
?is-locked="${this.rubric.locked}"
?is-draft="${this.rubric.draft}"
/>
?is-draft="${this.rubric.draft}">
</sakai-rubric-criteria
</div>
</div>
`;
Expand Down
5 changes: 3 additions & 2 deletions webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubrics-list.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { RubricsElement } from "./rubrics-element.js";
import { html } from "/webcomponents/assets/lit-element/lit-element.js";
import { repeat } from "/webcomponents/assets/lit-html/directives/repeat.js";
import "./sakai-rubric.js";
import { SharingChangeEvent } from "./sharing-change-event.js";

Expand All @@ -21,8 +22,8 @@ export class SakaiRubricsList extends RubricsElement {

return {
siteId: { attribute: "site-id", type: String },
rubrics: { attribute: false, type: Array },
enablePdfExport: { attribute: "enable-pdf-export", type: Boolean },
rubrics: { attribute: false, type: Array },
};
}

Expand Down Expand Up @@ -52,7 +53,7 @@ export class SakaiRubricsList extends RubricsElement {
return html`
<div role="presentation">
<div role="tablist">
${this.rubrics.map(r => html`
${repeat(this.rubrics, r => r.id, r => html`
<sakai-rubric @clone-rubric="${this.cloneRubric}" site-id="${this.siteId}" @delete-item="${this.deleteRubric}" rubric="${JSON.stringify(r)}" ?enable-pdf-export="${this.enablePdfExport}"></sakai-rubric>
`)}
</div>
Expand Down

0 comments on commit 9179d75

Please sign in to comment.