Skip to content

Commit

Permalink
Merge branch 'develop' into TASK-6133
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmjuanes
jmjuanes authored Jul 9, 2024
2 parents 8c0aeef + d550830 commit 8173d4f
Show file tree
Hide file tree
Showing 9 changed files with 45 additions and 189 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/iva/cohort-browser-grid.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ context("Cohort Browser Grid", () => {
it("should render create title", () => {
cy.get("@modal-create")
.find("h4.modal-title")
.should("contain.text", "Cohort create");
.should("contain.text", "Cohort Create");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/iva/disease-panel-browser-grid.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ context("Disease Panel Browser Grid", () => {
it("should render create title", () => {
cy.get("@modal-create")
.find("h4.modal-title")
.should("contain.text", "Disease panel create");
.should("contain.text", "Disease Panel Create");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down Expand Up @@ -127,7 +127,7 @@ context("Disease Panel Browser Grid", () => {
it("should render update title", () => {
cy.get("@modal-update")
.find("h4.modal-title")
.should("contain.text", "Disease panel update");
.should("contain.text", "Disease Panel Update");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/iva/family-browser-grid.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ context("Family Browser Grid", () => {
it("should render create title", () => {
cy.get("@modal-create")
.find("h4.modal-title")
.should("contain.text", "Family create");
.should("contain.text", "Family Create");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down Expand Up @@ -126,7 +126,7 @@ context("Family Browser Grid", () => {
it("should render update title", () => {
cy.get("@modal-update")
.find("h4.modal-title")
.should("contain.text", "Family update");
.should("contain.text", "Family Update");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/iva/individual-browser-grid.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ context("Individual Browser Grid", () => {
it("should render create title", () => {
cy.get("@modal-create")
.find("h4.modal-title")
.should("contain.text", "Individual create");
.should("contain.text", "Individual Create");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down Expand Up @@ -170,7 +170,7 @@ context("Individual Browser Grid", () => {
it("should render update title", () => {
cy.get("@modal-update")
.find("h4.modal-title")
.should("contain.text", "Individual update");
.should("contain.text", "Individual Update");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/iva/sample-browser-grid.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ context("Sample Browser Grid", () => {
it("should render create title", () => {
cy.get("@modal-create")
.find("h4.modal-title")
.should("contain.text", "Sample create");
.should("contain.text", "Sample Create");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down Expand Up @@ -126,7 +126,7 @@ context("Sample Browser Grid", () => {
it("should render update title", () => {
cy.get("@modal-update")
.find("h4.modal-title")
.should("contain.text", "Sample update");
.should("contain.text", "Sample Update");
});
// 3. Render button clear
it("should render button clear", () => {
Expand Down
6 changes: 0 additions & 6 deletions src/webcomponents/commons/forms/data-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -954,26 +954,20 @@ export default class DataForm extends LitElement {
_createToggleSwitchElement(element) {
const value = this.getValue(element.field);
const disabled = this._getBooleanValue(element.display?.disabled, false, element);
const activeClassName = element.display?.activeClassName ?? element.display?.activeClass ?? "";
const inactiveClassName = element.display?.inactiveClassName ?? element.display?.inactiveClass ?? "";

const content = html`
<div class="">
<toggle-switch
.disabled="${disabled}"
.value="${value}"
.onText="${element.display?.onText}"
.offText="${element.display?.offText}"
.activeClass="${activeClassName}"
.inactiveClass="${inactiveClassName}"
.classes="${this._isUpdated(element) ? "updated" : ""}"
@filterChange="${e => this.onFilterChange(element, e.detail.value)}">
</toggle-switch>
</div>
`;

return this._createElementTemplate(element, value, content);

}

_createToggleButtonsElement(element) {
Expand Down
180 changes: 22 additions & 158 deletions src/webcomponents/commons/forms/toggle-switch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,11 @@ import {LitElement, html} from "lit";
import UtilsNew from "../../../core/utils-new.js";
import LitUtils from "../utils/lit-utils.js";


/**
* Usage:
* <toggle-switch .value="true" .onText="YES" .offText="NO"></toggle-switch>
*/
export default class ToggleSwitch extends LitElement {

constructor() {
super();

// Set status and init private properties
this._init();
this.#init();
}

createRenderRoot() {
Expand All @@ -47,179 +40,50 @@ export default class ToggleSwitch extends LitElement {
offText: {
type: String
},
activeClass: {
type: String
},
inactiveClass: {
type: String
},
disabled: {
type: Boolean
},
classes: {
type: String
type: String,
},
_value: {
type: Boolean,
state: true
}
};
}

_init() {
#init() {
this._prefix = UtilsNew.randomString(8);

// Default values
this.onText = "ON";
this.offText = "OFF";
this.activeClass = "btn-primary";
this.inactiveClass = "btn-light";
this.classes = "";
}

// updated(changedProperties) {
// if (changedProperties.has("value")) {
// this._propertyObserver();
// this._value = this.value;
// }
// if (changedProperties.has("onText")) {
// this.onText = this.onText ? this.onText : "ON";
// // this._propertyObserver();
// }
// if (changedProperties.has("offText")) {
// this.offText = this.offText ? this.offText : "OFF";
// // this._propertyObserver();
// }
// if (changedProperties.has("activeClass")) {
// this.activeClass = this.activeClass ? this.activeClass : "btn-primary";
// this._propertyObserver();
// }
// if (changedProperties.has("inactiveClass")) {
// this.inactiveClass = this.inactiveClass ? this.inactiveClass : "btn-light";
// this._propertyObserver();
// }
// }

firstUpdated(changedProperties) {
if (changedProperties.has("value")) {
this.propertyObserver();
}
}

update(changedProperties) {
// if (changedProperties.has("value")) {
// this.propertyObserver();
// }

if (changedProperties.has("onText")) {
this.onText = this.onText ? this.onText : "ON";
}

if (changedProperties.has("offText")) {
this.offText = this.offText ? this.offText : "OFF";
}
super.update(changedProperties);
}

propertyObserver() {
// const val = this.value?.toString();
// if (val !== "OFF" && val !== "false") {
// this._value = true;
// } else {
// this._value = false;
// }
this._value = this.value;
}

_propertyObserver() {
if (typeof this.value !== "undefined" && this.activeClass && this.inactiveClass) {
if (this.value) {
this._onClass = this.activeClass + " active";
this._offClass = this.inactiveClass;
} else {
this._onClass = this.inactiveClass;
this._offClass = this.activeClass + " active";
}
this.requestUpdate();
}
}

onToggleClick(buttonId) {
// Check if there is anything to do
if ((this.value && buttonId === "ON") || (!this.value && buttonId === "OFF")) {
return;
}

// Support several classes
const activeClasses = this.activeClass.split(" ");
const inactiveClasses = this.inactiveClass.split(" ");

// Fetch and reset buttons status
const buttons = this.getElementsByClassName("btn-toggle-" + this._prefix);
Array.from(buttons).forEach(button => {
button.classList.remove(...activeClasses, ...inactiveClasses, "active");
});
let onIndex = 0;
let offIndex = 1;
if (buttons[0].dataset.id === "OFF") {
onIndex = 1;
offIndex = 0;
}

// Set proper classes
this.value = buttonId === "ON";
if (this.value) {
buttons[onIndex].classList.add(...activeClasses, "active");
buttons[offIndex].classList.add(...inactiveClasses);
} else {
buttons[onIndex].classList.add(...inactiveClasses);
buttons[offIndex].classList.add(...activeClasses, "active");
}

// Set the field status
this.onFilterChange();
}

onFilterChange(val) {
LitUtils.dispatchCustomEvent(this, "filterChange", val);
}

render() {
return html`
<fieldset ?disabled="${this.disabled}">
<fieldset .disabled="${this.disabled}">
<div class="btn-group" role="group">
<input class="btn-check" type="radio" ?checked="${this._value}"
name="${this._prefix}BtnRadio" id="${this._prefix}onBtnRadio"
@click=${() => this.onFilterChange("ON")} autocomplete="off">
<label class="btn btn-outline-primary" for="${this._prefix}onBtnRadio">
${this.onText}
<input
class="btn-check"
type="radio"
.checked="${this.value}"
name="${this._prefix}BtnRadio"
id="${this._prefix}onBtnRadio"
@click=${() => this.onFilterChange(true)}>
<label class="btn btn-outline-primary ${this.classes}" for="${this._prefix}onBtnRadio">
${this.onText || "ON"}
</label>
<input type="radio" class="btn-check" ?checked="${!this._value}"
name="${this._prefix}BtnRadio" id="${this._prefix}offBtnRadio"
@click=${() => this.onFilterChange("OFF")} autocomplete="off">
<label class="btn btn-outline-primary" for="${this._prefix}offBtnRadio">
${this.offText}
<input
type="radio"
class="btn-check"
.checked="${!this.value}"
name="${this._prefix}BtnRadio"
id="${this._prefix}offBtnRadio"
@click=${() => this.onFilterChange(false)}>
<label class="btn btn-outline-primary ${this.classes}" for="${this._prefix}offBtnRadio">
${this.offText || "OFF"}
</label>
</div>
</fieldset>
<!-- <button
class="btn ${this._onClass} btn-toggle-${this._prefix} ${this.classes}"
data-id="ON"
?disabled="${this.disabled}"
type="button"
@click="${e => this.onToggleClick("ON", e)}">
${this.onText}
</button>
<button
class="btn ${this._offClass} btn-toggle-${this._prefix} ${this.classes}"
data-id="OFF"
?disabled="${this.disabled}"
type="button"
@click="${e => this.onToggleClick("OFF", e)}">
${this.offText}
</button> -->
`;
}

Expand Down
25 changes: 11 additions & 14 deletions src/webcomponents/commons/modal/modal-utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {html, nothing} from "lit";
import UtilsNew from "../../../core/utils-new.js";
import LitUtils from "../utils/lit-utils";

export default class ModalUtils {
Expand Down Expand Up @@ -40,12 +39,11 @@ export default class ModalUtils {
data-cy="${modalCyDataName}"
>
<div class="modal-dialog ${modalSize}" style="width: ${modalWidth}">
<div class="modal-content">
<div class="modal-header">
${ModalUtils.#getTitleHeader(modalTitleHeader, modalTitle, "modal-title " + modalTitleClassName, modalTitleStyle)}
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
@click="${e => LitUtils.dispatchCustomEvent(self, "modalClose", null, e)}">
@click="${e => config?.onCancel ? config.onCancel(e) : LitUtils.dispatchCustomEvent(self, "modalCancel", null, e)}">
</button>
</div>
<div class="modal-body">
Expand All @@ -59,17 +57,17 @@ export default class ModalUtils {
type="button"
class="btn btn-light"
data-bs-dismiss="modal"
@click="${e => LitUtils.dispatchCustomEvent(self, "modalCancel", null, e)}"
@click="${e => config?.onCancel ? config.onCancel(e) : LitUtils.dispatchCustomEvent(self, "modalCancel", null, e)}"
>
Cancel
${config?.display?.cancelButtonText || "Cancel"}
</button>
<button
type="button"
class="btn btn-primary"
data-bs-dismiss="modal"
@click="${e => LitUtils.dispatchCustomEvent(self, "modalOk", null, e)}"
@click="${e => config?.onOk ? config.onOk(e) : LitUtils.dispatchCustomEvent(self, "modalOk", null, e)}"
>
Save
${config?.display?.okButtonText || "Save"}
</button>
</div>
`: nothing}
Expand All @@ -80,20 +78,19 @@ export default class ModalUtils {
}

static #getTitleHeader(header, title, classes, style) {
const titleCap = UtilsNew.capitalize(title);
switch (header) {
case "h1":
return html`<h1 class="${classes}" style="${style}">${titleCap}</h1>`;
return html`<h1 class="${classes}" style="${style}">${title}</h1>`;
case "h2":
return html`<h2 class="${classes}" style="${style}">${titleCap}</h2>`;
return html`<h2 class="${classes}" style="${style}">${title}</h2>`;
case "h3":
return html`<h3 class="${classes}" style="${style}">${titleCap}</h3>`;
return html`<h3 class="${classes}" style="${style}">${title}</h3>`;
case "h4":
return html`<h4 class="${classes}" style="${style}">${titleCap}</h4>`;
return html`<h4 class="${classes}" style="${style}">${title}</h4>`;
case "h5":
return html`<h5 class="${classes}" style="${style}">${titleCap}</h5>`;
return html`<h5 class="${classes}" style="${style}">${title}</h5>`;
case "h6":
return html`<h6 class="${classes}" style="${style}">${titleCap}</h6>`;
return html`<h6 class="${classes}" style="${style}">${title}</h6>`;
}
}

Expand Down
Loading

0 comments on commit 8173d4f

Please sign in to comment.