diff --git a/src/client/cypress/e2e/admin/aboutSettings.cy.js b/src/client/cypress/e2e/admin/aboutSettings.cy.js index c390ef11b..5f553ec2c 100644 --- a/src/client/cypress/e2e/admin/aboutSettings.cy.js +++ b/src/client/cypress/e2e/admin/aboutSettings.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin } from "../testHelpers"; +import { loginAsAdmin } from "../helpers/testHelpers"; import license from "../../fixtures/license.json"; describe("Admin about page tests", () => { diff --git a/src/client/cypress/e2e/admin/loginScreen.cy.js b/src/client/cypress/e2e/admin/loginScreen.cy.js index 2720da6ce..13224f430 100644 --- a/src/client/cypress/e2e/admin/loginScreen.cy.js +++ b/src/client/cypress/e2e/admin/loginScreen.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin } from "../testHelpers"; +import { loginAsAdmin } from "../helpers/testHelpers"; describe("Admin login preview tests", () => { it("displays correct message when publishing a new welcome message.", () => { diff --git a/src/client/cypress/e2e/admin/userAdministration.cy.js b/src/client/cypress/e2e/admin/userAdministration.cy.js index 8ebf6b81f..649dbad5c 100644 --- a/src/client/cypress/e2e/admin/userAdministration.cy.js +++ b/src/client/cypress/e2e/admin/userAdministration.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin } from "../testHelpers"; +import { loginAsAdmin } from "../helpers/testHelpers"; describe("Admin settings test", () => { beforeEach(() => { diff --git a/src/client/cypress/e2e/app.cy.js b/src/client/cypress/e2e/app.cy.js index c32cffb51..0dadfd9bd 100644 --- a/src/client/cypress/e2e/app.cy.js +++ b/src/client/cypress/e2e/app.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin, loginAsEditorInViewerMode } from "./testHelpers"; +import { loginAsAdmin, loginAsEditorInViewerMode } from "./helpers/testHelpers"; describe("General app tests", () => { it("Displays the login page in the correct language", () => { diff --git a/src/client/cypress/e2e/boreholeList.cy.js b/src/client/cypress/e2e/boreholeList.cy.js index 811fc5067..8cebf8c63 100644 --- a/src/client/cypress/e2e/boreholeList.cy.js +++ b/src/client/cypress/e2e/boreholeList.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/testHelpers"; +import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/helpers/testHelpers"; describe("Borehole list tests", () => { it("Boreholes are displayed in correct order with editor login", () => { diff --git a/src/client/cypress/e2e/codeList.cy.js b/src/client/cypress/e2e/codeList.cy.js index 485c80333..efe91faa3 100644 --- a/src/client/cypress/e2e/codeList.cy.js +++ b/src/client/cypress/e2e/codeList.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/testHelpers"; +import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/helpers/testHelpers"; describe("Codelist translations tests", () => { it("Admin can open codelist translation section", () => { diff --git a/src/client/cypress/e2e/editor/attachments.cy.js b/src/client/cypress/e2e/editor/attachments.cy.js index d112a3195..2932ca1d0 100644 --- a/src/client/cypress/e2e/editor/attachments.cy.js +++ b/src/client/cypress/e2e/editor/attachments.cy.js @@ -2,7 +2,7 @@ import { createAndEditBoreholeAsAdmin, deleteDownloadedFile, readDownloadedFile, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for 'Attachments' edit page.", () => { it("creates, downloads and deletes attachments.", () => { diff --git a/src/client/cypress/e2e/editor/backfill-v2.cy.js b/src/client/cypress/e2e/editor/backfill-v2.cy.js index 29105ac92..a3cef7b19 100644 --- a/src/client/cypress/e2e/editor/backfill-v2.cy.js +++ b/src/client/cypress/e2e/editor/backfill-v2.cy.js @@ -3,10 +3,8 @@ import { bearerAuth, createBorehole, startBoreholeEditing, - setTextfield, - openDropdown, - selectDropdownOption, -} from "../testHelpers"; +} from "../helpers/testHelpers"; +import { setInput, setSelect } from "../helpers/formHelpers"; describe("Backfill crud tests", () => { it("add, edit and delete backfills", () => { @@ -54,13 +52,11 @@ describe("Backfill crud tests", () => { cy.wait("@codelist_GET"); // fill out form - setTextfield('textarea[name="notes"]', "Lorem."); - setTextfield('input[name="fromDepth"]', "123456"); - setTextfield('input[name="toDepth"]', "987654"); - openDropdown("backfill-kind-select"); - selectDropdownOption(2); - openDropdown("backfill-material-select"); - selectDropdownOption(1); + setInput("notes", "Lorem."); + setInput("fromDepth", "123456"); + setInput("toDepth", "987654"); + setSelect("kindId", 2); + setSelect("materialId", 1); // save backfill cy.get('[data-cy="save-icon"]').click(); @@ -76,11 +72,11 @@ describe("Backfill crud tests", () => { cy.get('[data-cy="edit-icon"]').click({ force: true }); cy.wait("@codelist_GET"); - setTextfield('input[name="fromDepth"]', "222"); + setInput("fromDepth", "222"); // close editing mask cy.get('[data-cy="save-icon"]').click({ force: true }); - cy.contains("123456222"); + cy.contains("222"); cy.contains("inactive"); // delete backfill diff --git a/src/client/cypress/e2e/editor/boreholeEditorTable.cy.js b/src/client/cypress/e2e/editor/boreholeEditorTable.cy.js index 1f43a8196..90ceaa1c0 100644 --- a/src/client/cypress/e2e/editor/boreholeEditorTable.cy.js +++ b/src/client/cypress/e2e/editor/boreholeEditorTable.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin } from "../../e2e/testHelpers"; +import { loginAsAdmin } from "../../e2e/helpers/testHelpers"; describe("Borehole editor table tests", () => { it("preserves column sorting and active page when navigating", () => { diff --git a/src/client/cypress/e2e/editor/boreholeform.cy.js b/src/client/cypress/e2e/editor/boreholeform.cy.js index ee75eb62d..c607afa0c 100644 --- a/src/client/cypress/e2e/editor/boreholeform.cy.js +++ b/src/client/cypress/e2e/editor/boreholeform.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole } from "../testHelpers"; +import { newEditableBorehole } from "../helpers/testHelpers"; describe("Test for the borehole form.", () => { it("Creates a borehole and fills dropdowns.", () => { diff --git a/src/client/cypress/e2e/editor/bulkedit.cy.js b/src/client/cypress/e2e/editor/bulkedit.cy.js index f910fd036..2cb8d866c 100644 --- a/src/client/cypress/e2e/editor/bulkedit.cy.js +++ b/src/client/cypress/e2e/editor/bulkedit.cy.js @@ -1,4 +1,4 @@ -import { createBorehole, loginAsAdmin } from "../testHelpers"; +import { createBorehole, loginAsAdmin } from "../helpers/testHelpers"; import adminUser from "../../fixtures/adminUser.json"; describe("Test the borehole bulk edit feature.", () => { diff --git a/src/client/cypress/e2e/editor/casing-v2.cy.js b/src/client/cypress/e2e/editor/casing-v2.cy.js index 7b7a0a83e..1091aaddf 100644 --- a/src/client/cypress/e2e/editor/casing-v2.cy.js +++ b/src/client/cypress/e2e/editor/casing-v2.cy.js @@ -3,10 +3,8 @@ import { bearerAuth, createBorehole, startBoreholeEditing, - setTextfield, - openDropdown, - selectDropdownOption, -} from "../testHelpers"; +} from "../helpers/testHelpers"; +import { setInput, setSelect } from "../helpers/formHelpers"; describe("Casing crud tests", () => { it("add, edit and delete casings", () => { @@ -53,18 +51,16 @@ describe("Casing crud tests", () => { cy.get('[data-cy="add-casing-button"]').click(); cy.wait("@codelist_GET"); - setTextfield('input[name="name"]', "casing-1"); - setTextfield('input[name="fromDepth"]', "0"); - setTextfield('input[name="toDepth"]', "10"); - openDropdown("casing-kind-select"); - selectDropdownOption(2); - openDropdown("casing-material-select"); - selectDropdownOption(3); - setTextfield('input[name="dateStart"]', "2021-01-01"); - setTextfield('input[name="dateFinish"]', "2021-01-02"); - setTextfield('input[name="innerDiameter"]', "3"); - setTextfield('input[name="outerDiameter"]', "4"); - setTextfield('textarea[name="notes"]', "Lorem."); + setInput("name", "casing-1"); + setInput("fromDepth", "0"); + setInput("toDepth", "10"); + setSelect("kindId", 2); + setSelect("materialId", 3); + setInput("dateStart", "2021-01-01"); + setInput("dateFinish", "2021-01-02"); + setInput("innerDiameter", "3"); + setInput("outerDiameter", "4"); + setInput("notes", "Lorem."); cy.get('[data-cy="save-icon"]').click(); cy.wait("@casing_GET"); @@ -84,9 +80,8 @@ describe("Casing crud tests", () => { cy.get('[data-cy="edit-icon"]').click(); cy.wait("@codelist_GET"); - setTextfield('input[name="name"]', " updated"); - openDropdown("casing-material-select"); - selectDropdownOption(5); + setInput("name", "casing-1 updated"); + setSelect("materialId", 5); cy.get('[data-cy="save-icon"]').click({ force: true }); cy.get('[data-cy="casing-name"]').contains("casing-1 updated"); @@ -101,16 +96,13 @@ describe("Casing crud tests", () => { cy.get('[data-cy="add-instrumentation-button"]').click({ force: true }); cy.wait("@casing_GET"); - setTextfield('textarea[name="notes"]', "Lorem."); - setTextfield('input[name="name"]', "Inst-1"); - setTextfield('input[name="fromDepth"]', "123456"); - setTextfield('input[name="toDepth"]', "987654"); - openDropdown("instrumentation-kind-select"); - selectDropdownOption(2); - openDropdown("instrumentation-status-select"); - selectDropdownOption(1); - openDropdown("instrumentation-casing-id-select"); - selectDropdownOption(1); + setInput("notes", "Lorem."); + setInput("name", "Inst-1"); + setInput("fromDepth", "123456"); + setInput("toDepth", "987654"); + setSelect("kindId", 2); + setSelect("statusId", 1); + setSelect("casingId", 1); cy.get('[data-cy="save-icon"]').click({ force: true }); cy.get("[data-cy=completion-content-header-tab-Casing]").click(); @@ -130,8 +122,8 @@ describe("Casing crud tests", () => { cy.get("[data-cy=completion-content-header-tab-Instrumentation]").click(); cy.wait("@instrumentation_GET"); cy.get('[data-cy="edit-icon"]').click(); - openDropdown("instrumentation-casing-id-select"); - selectDropdownOption(0); + setSelect("casingId", 0); + cy.get('[data-cy="save-icon"]').click({ force: true }); cy.get("[data-cy=completion-content-header-tab-Casing]").click(); diff --git a/src/client/cypress/e2e/editor/chronostratigraphy.cy.js b/src/client/cypress/e2e/editor/chronostratigraphy.cy.js index 63f838e41..40fd2304c 100644 --- a/src/client/cypress/e2e/editor/chronostratigraphy.cy.js +++ b/src/client/cypress/e2e/editor/chronostratigraphy.cy.js @@ -3,7 +3,7 @@ import { createStratigraphy, loginAsAdmin, bearerAuth, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for the chronostratigraphy editor.", () => { beforeEach(function () { diff --git a/src/client/cypress/e2e/editor/completion-v2.cy.js b/src/client/cypress/e2e/editor/completion-v2.cy.js index 257715248..dddd460fc 100644 --- a/src/client/cypress/e2e/editor/completion-v2.cy.js +++ b/src/client/cypress/e2e/editor/completion-v2.cy.js @@ -2,10 +2,13 @@ import { createBorehole, startBoreholeEditing, loginAsAdmin, - openDropdown, - selectDropdownOption, - setTextfield, -} from "../testHelpers"; +} from "../helpers/testHelpers"; +import { + setInput, + setSelect, + toggleCheckbox, + evaluateCheckbox, +} from "../helpers/formHelpers"; const toggleHeaderOpen = () => { cy.get('[data-cy="completion-header-display"]') @@ -45,34 +48,6 @@ const deleteCompletion = () => { cy.get('[data-cy="delete-button"]').click(); }; -const setName = (name, clear = false) => { - setTextfield('[data-cy="completion-name-textfield"]', name, clear); -}; - -const setAbandonDate = date => { - setTextfield('[data-cy="completion-abandon-date-textfield"]', date); -}; - -const setNotes = notes => { - setTextfield('[data-cy="completion-notes-textfield"]', notes); -}; - -const setKindId = index => { - openDropdown("completion-kind-id-select"); - selectDropdownOption(index); -}; - -const setIsPrimary = () => { - cy.get('[data-cy="completion-is-primary-checkbox"]').click(); -}; - -const checkIsPrimary = isPrimary => { - var checked = isPrimary ? "true" : "false"; - cy.get('[data-cy="completion-is-primary-checkbox"]') - .invoke("attr", "aria-disabled") - .should("eq", checked); -}; - const setTab = index => { cy.get('[data-cy="completion-header-tab-' + index + '"]').click(); }; @@ -110,12 +85,12 @@ describe("completion crud tests", () => { cy.get('[data-cy="completion-header-tab-0"]').should("not.exist"); addCompletion(); - setName("Compl-1"); - setKindId(1); + setInput("name", "Compl-1"); + setSelect("kindId", 1); cy.get('[data-cy="save-button"]').should("be.enabled"); - setAbandonDate("2012-11-14"); - setNotes("Lorem."); + setInput("abandonDate", "2012-11-14"); + setInput("notes", "Lorem."); saveChanges(); cy.contains("Compl-1"); @@ -127,16 +102,16 @@ describe("completion crud tests", () => { // edit completion startEditing(); - setKindId(1); + setSelect("kindId", 1); cancelEditing(); cy.contains("telescopic"); startEditing(); - setName("Compl-2", true); - setIsPrimary(); + setInput("name", "Compl-2"); + toggleCheckbox("isPrimary"); saveChanges(); cy.contains("Compl-2"); startEditing(); - checkIsPrimary(true); + evaluateCheckbox("isPrimary", true); cancelEditing(); // delete completion @@ -165,12 +140,12 @@ describe("completion crud tests", () => { // add completions addCompletion(); - setName("Compl-1"); - setKindId(1); + setInput("name", "Compl-1"); + setSelect("kindId", 1); saveChanges(); addCompletion(); - setName("Compl-2"); - setKindId(1); + setInput("name", "Compl-2"); + setSelect("kindId", 1); saveChanges(); isTabSelected(1); @@ -181,7 +156,7 @@ describe("completion crud tests", () => { isTabSelected(0); startEditing(); - setName("Compl-1 updated"); + setInput("name", "Compl-1 updated"); setTab(1); handlePrompt("Unsaved changes", "cancel"); isTabSelected(0); @@ -196,7 +171,7 @@ describe("completion crud tests", () => { cy.contains("Compl-1"); startEditing(); - setName("Compl-2 updated"); + setInput("name", "Compl-2 updated"); setTab(0); handlePrompt("Unsaved changes", "save"); cy.wait("@get-completions-by-boreholeId"); diff --git a/src/client/cypress/e2e/editor/coordinates.cy.js b/src/client/cypress/e2e/editor/coordinates.cy.js index 48c730bb0..ef77a07c0 100644 --- a/src/client/cypress/e2e/editor/coordinates.cy.js +++ b/src/client/cypress/e2e/editor/coordinates.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole, delayedType } from "../testHelpers"; +import { newEditableBorehole, delayedType } from "../helpers/testHelpers"; describe("Tests for editing coordinates of a borehole.", () => { beforeEach(() => { diff --git a/src/client/cypress/e2e/editor/copyBorehole.cy.js b/src/client/cypress/e2e/editor/copyBorehole.cy.js index d4323badb..e6eadcb39 100644 --- a/src/client/cypress/e2e/editor/copyBorehole.cy.js +++ b/src/client/cypress/e2e/editor/copyBorehole.cy.js @@ -1,4 +1,4 @@ -import { createBorehole, loginAsAdmin } from "../testHelpers"; +import { createBorehole, loginAsAdmin } from "../helpers/testHelpers"; describe("Test copying of boreholes", () => { it("copies a borehole", () => { diff --git a/src/client/cypress/e2e/editor/emptyMessages.cy.js b/src/client/cypress/e2e/editor/emptyMessages.cy.js index ce796b4e3..0ef987236 100644 --- a/src/client/cypress/e2e/editor/emptyMessages.cy.js +++ b/src/client/cypress/e2e/editor/emptyMessages.cy.js @@ -1,4 +1,4 @@ -import { newUneditableBorehole } from "../testHelpers"; +import { newUneditableBorehole } from "../helpers/testHelpers"; describe("Messages for empty profiles", () => { beforeEach(() => { diff --git a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js index d2b01995a..351949003 100644 --- a/src/client/cypress/e2e/editor/fieldMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/fieldMeasurement.cy.js @@ -2,7 +2,7 @@ import { createBorehole, createStratigraphy, loginAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for the field measurement editor.", () => { beforeEach(function () { diff --git a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js index d04619812..18a670bc7 100644 --- a/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js +++ b/src/client/cypress/e2e/editor/groundwaterLevelMeasurement.cy.js @@ -2,7 +2,7 @@ import { createBorehole, createStratigraphy, loginAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for the groundwater level measurement editor.", () => { beforeEach(function () { diff --git a/src/client/cypress/e2e/editor/hydrotest.cy.js b/src/client/cypress/e2e/editor/hydrotest.cy.js index 53a4c05b5..0d9f8d983 100644 --- a/src/client/cypress/e2e/editor/hydrotest.cy.js +++ b/src/client/cypress/e2e/editor/hydrotest.cy.js @@ -2,7 +2,7 @@ import { createBorehole, createStratigraphy, loginAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; const openDropdown = dataCy => { cy.get(`[data-cy="${dataCy}"]`) diff --git a/src/client/cypress/e2e/editor/import.cy.js b/src/client/cypress/e2e/editor/import.cy.js index be0b42e00..a4c7bb803 100644 --- a/src/client/cypress/e2e/editor/import.cy.js +++ b/src/client/cypress/e2e/editor/import.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin, getImportFileFromFixtures } from "../../e2e/testHelpers"; +import { loginAsAdmin, getImportFileFromFixtures } from "../../e2e/helpers/testHelpers"; describe("Test for importing boreholes.", () => { it("Successfully imports multiple boreholes.", () => { diff --git a/src/client/cypress/e2e/editor/instrumentation-v2.cy.js b/src/client/cypress/e2e/editor/instrumentation-v2.cy.js index b7d1de200..d7de8e565 100644 --- a/src/client/cypress/e2e/editor/instrumentation-v2.cy.js +++ b/src/client/cypress/e2e/editor/instrumentation-v2.cy.js @@ -3,10 +3,8 @@ import { bearerAuth, createBorehole, startBoreholeEditing, - openDropdown, - selectDropdownOption, - setTextfield, -} from "../testHelpers"; +} from "../helpers/testHelpers"; +import { setInput, setSelect } from "../helpers/formHelpers"; describe("Instrumentation crud tests", () => { it("add, edit and delete instrumentations", () => { @@ -52,17 +50,15 @@ describe("Instrumentation crud tests", () => { cy.get('[data-cy="add-casing-button"]').click({ force: true }); cy.wait("@codelist_GET"); - setTextfield('input[name="name"]', "casing-1"); - setTextfield('input[name="fromDepth"]', "0"); - setTextfield('input[name="toDepth"]', "10"); - openDropdown("casing-kind-select"); - selectDropdownOption(2); - openDropdown("casing-material-select"); - selectDropdownOption(3); - setTextfield('input[name="dateStart"]', "2021-01-01"); - setTextfield('input[name="dateFinish"]', "2021-01-02"); - setTextfield('input[name="innerDiameter"]', "3"); - setTextfield('input[name="outerDiameter"]', "4"); + setInput("name", "casing-1"); + setInput("fromDepth", "0"); + setInput("toDepth", "10"); + setSelect("kindId", 2); + setSelect("materialId", 3); + setInput("dateStart", "2021-01-01"); + setInput("dateFinish", "2021-01-02"); + setInput("innerDiameter", "3"); + setInput("outerDiameter", "4"); cy.get('[data-cy="save-icon"]').click(); cy.wait("@casing_GET"); @@ -75,14 +71,12 @@ describe("Instrumentation crud tests", () => { cy.wait("@casing_GET"); // fill out form - setTextfield('textarea[name="notes"]', "Lorem."); - setTextfield('input[name="name"]', "Inst-1"); - setTextfield('input[name="fromDepth"]', "123456"); - setTextfield('input[name="toDepth"]', "987654"); - openDropdown("instrumentation-kind-select"); - selectDropdownOption(2); - openDropdown("instrumentation-status-select"); - selectDropdownOption(1); + setInput("notes", "Lorem."); + setInput("name", "Inst-1"); + setInput("fromDepth", "123456"); + setInput("toDepth", "987654"); + setSelect("kindId", 2); + setSelect("statusId", 1); // save instrumentation cy.get('[data-cy="save-icon"]').click(); @@ -100,14 +94,13 @@ describe("Instrumentation crud tests", () => { // We need the casings for the casing name dropdown cy.wait("@casing_GET"); - setTextfield('input[name="fromDepth"]', "222"); - openDropdown("instrumentation-casing-id-select"); - selectDropdownOption(1); + setInput("fromDepth", "222"); + setSelect("casingId", 1); // close editing mask cy.get('[data-cy="save-icon"]').click({ force: true }); cy.contains("casing-1"); - cy.contains("123456222"); + cy.contains("222"); cy.contains("inactive"); // delete instrumentation diff --git a/src/client/cypress/e2e/editor/instrumentation.cy.js b/src/client/cypress/e2e/editor/instrumentation.cy.js index a9e768bdc..3f8d43503 100644 --- a/src/client/cypress/e2e/editor/instrumentation.cy.js +++ b/src/client/cypress/e2e/editor/instrumentation.cy.js @@ -2,7 +2,7 @@ import { loginAsEditorInViewerMode, createBorehole, createAndEditBoreholeAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Instrumentation tests", () => { it("Displays correct 'No Instumentation' message when logged in as viewer and no stratigraphies are defined", () => { diff --git a/src/client/cypress/e2e/editor/layerform.cy.js b/src/client/cypress/e2e/editor/layerform.cy.js index d18b075ed..f75dd289f 100644 --- a/src/client/cypress/e2e/editor/layerform.cy.js +++ b/src/client/cypress/e2e/editor/layerform.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole } from "../testHelpers"; +import { newEditableBorehole } from "../helpers/testHelpers"; describe("Tests for the layer form.", () => { it("Creates a layer and fills all dropdowns with multiple selection.", () => { diff --git a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js index f4c3d0e0f..d0d88813b 100644 --- a/src/client/cypress/e2e/editor/lithologicalDescription.cy.js +++ b/src/client/cypress/e2e/editor/lithologicalDescription.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole } from "../testHelpers"; +import { newEditableBorehole } from "../helpers/testHelpers"; describe("Tests for the lithological description column.", () => { it("Creates, updates and deletes lithological descriptions ", () => { diff --git a/src/client/cypress/e2e/editor/lithostratigraphy.cy.js b/src/client/cypress/e2e/editor/lithostratigraphy.cy.js index 5cd38ddf7..179539d72 100644 --- a/src/client/cypress/e2e/editor/lithostratigraphy.cy.js +++ b/src/client/cypress/e2e/editor/lithostratigraphy.cy.js @@ -3,7 +3,7 @@ import { createStratigraphy, bearerAuth, loginAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for the lithostratigraphy editor.", () => { beforeEach(function () { diff --git a/src/client/cypress/e2e/editor/location.cy.js b/src/client/cypress/e2e/editor/location.cy.js index b1606f4c4..40e71c5b1 100644 --- a/src/client/cypress/e2e/editor/location.cy.js +++ b/src/client/cypress/e2e/editor/location.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole } from "../testHelpers"; +import { newEditableBorehole } from "../helpers/testHelpers"; describe("Tests for 'Location' edit page.", () => { it("creates and deletes a borehole.", () => { diff --git a/src/client/cypress/e2e/editor/waterIngress.cy.js b/src/client/cypress/e2e/editor/waterIngress.cy.js index c2ee54dfa..3c3938f52 100644 --- a/src/client/cypress/e2e/editor/waterIngress.cy.js +++ b/src/client/cypress/e2e/editor/waterIngress.cy.js @@ -2,7 +2,7 @@ import { createBorehole, createStratigraphy, loginAsAdmin, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Tests for the wateringress editor.", () => { beforeEach(function () { diff --git a/src/client/cypress/e2e/filter.cy.js b/src/client/cypress/e2e/filter.cy.js index 4094fbe8c..78bcac8ea 100644 --- a/src/client/cypress/e2e/filter.cy.js +++ b/src/client/cypress/e2e/filter.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/testHelpers"; +import { loginAsAdmin, loginAsEditorInViewerMode } from "../e2e/helpers/testHelpers"; describe("Search filter tests", () => { it("has search filters", () => { diff --git a/src/client/cypress/e2e/helpers/formHelpers.js b/src/client/cypress/e2e/helpers/formHelpers.js new file mode 100644 index 000000000..02239141b --- /dev/null +++ b/src/client/cypress/e2e/helpers/formHelpers.js @@ -0,0 +1,51 @@ +/** + * Sets the value for an input form element. + * @param {string} fieldName The name of the input field. + * @param {string} text The text to type into the input field. + * @param {boolean} clear Whether to clear the input field before typing + */ +export const setInput = (fieldName, value) => { + var selector = `[data-cy="${fieldName}-formInput"]`; + cy.get(selector) + .click() + .then(() => { + cy.focused().clear(); + cy.get(selector).type(value, { + delay: 10, + }); + }); +}; + +/** + * Sets the value for a select form element. + * @param {string} fieldName The name of the select field. + * @param {number} index The index of the option to select. + */ +export const setSelect = (fieldName, index) => { + var selector = `[data-cy="${fieldName}-formSelect"]`; + cy.get(selector).find('[role="combobox"]').click(); + cy.get('.MuiPaper-elevation [role="listbox"]') + .find('[role="option"]') + .eq(index) + .click(); +}; + +/** + * Toggles the checkbox for a checkbox form element. + * @param {string} fieldName The name of the checkbox field. + */ +export const toggleCheckbox = fieldName => { + var selector = `[data-cy="${fieldName}-formCheckbox"]`; + cy.get(selector).click(); +}; + +/** + * Sets the value for a select form element. + * @param {string} fieldName The name of the checkbox field. + * @param {number} expectedChecked The expected state of the checkbox. + */ +export const evaluateCheckbox = (fieldName, expectedChecked) => { + var checked = expectedChecked ? "true" : "false"; + var selector = `[data-cy="${fieldName}-formCheckbox"]`; + cy.get(selector).invoke("attr", "aria-disabled").should("eq", checked); +}; diff --git a/src/client/cypress/e2e/testHelpers.js b/src/client/cypress/e2e/helpers/testHelpers.js similarity index 92% rename from src/client/cypress/e2e/testHelpers.js rename to src/client/cypress/e2e/helpers/testHelpers.js index f28c1ae38..fc2d33132 100644 --- a/src/client/cypress/e2e/testHelpers.js +++ b/src/client/cypress/e2e/helpers/testHelpers.js @@ -1,6 +1,6 @@ -import adminUser from "../fixtures/adminUser.json"; -import editorUser from "../fixtures/editorUser.json"; -import viewerUser from "../fixtures/viewerUser.json"; +import adminUser from "../../fixtures/adminUser.json"; +import editorUser from "../../fixtures/editorUser.json"; +import viewerUser from "../../fixtures/viewerUser.json"; export const bearerAuth = token => ({ bearer: token }); @@ -294,24 +294,6 @@ export const setValueOfInputElement = function (inputElement, inputValue) { inputElement[0].setAttribute("value", inputValue); }; -/** - * Sets the value for a provided input element. - * @param {string} selector The selector of the textfield. - * @param {string} text The text to type into the textfield. - */ -export const setTextfield = (selector, text, clear = false) => { - cy.get(selector) - .click() - .then(() => { - if (clear) { - cy.focused().clear(); - } - cy.get(selector).type(text, { - delay: 10, - }); - }); -}; - // Deletes a downloaded file in Cypress' downloads folder export const deleteDownloadedFile = fileName => { // Get the path to the downloaded file you want to delete @@ -384,16 +366,3 @@ export const createStratigraphy = (boreholeId, kindId) => { }); }); }; - -export const openDropdown = dataCy => { - cy.get(`[data-cy="${dataCy}"]`) - .find('[role="combobox"]') - .click({ force: true }); -}; - -export const selectDropdownOption = index => { - cy.get('.MuiPaper-elevation [role="listbox"]') - .find('[role="option"]') - .eq(index) - .click(); -}; diff --git a/src/client/cypress/e2e/hierarchicalDataFilter.cy.js b/src/client/cypress/e2e/hierarchicalDataFilter.cy.js index 4c40d3a1e..f62cc1958 100644 --- a/src/client/cypress/e2e/hierarchicalDataFilter.cy.js +++ b/src/client/cypress/e2e/hierarchicalDataFilter.cy.js @@ -1,4 +1,4 @@ -import { loginAsAdmin } from "./testHelpers"; +import { loginAsAdmin } from "./helpers/testHelpers"; describe("Hierachical data filter tests", () => { it("check visible filters", () => { diff --git a/src/client/cypress/e2e/identifierFilter.cy.js b/src/client/cypress/e2e/identifierFilter.cy.js index 1f80d51e5..affc3898b 100644 --- a/src/client/cypress/e2e/identifierFilter.cy.js +++ b/src/client/cypress/e2e/identifierFilter.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole } from "./testHelpers"; +import { newEditableBorehole } from "./helpers/testHelpers"; describe("Tests for filtering data by identifier.", () => { it("can filter by identifier", () => { diff --git a/src/client/cypress/e2e/srsFilter.cy.js b/src/client/cypress/e2e/srsFilter.cy.js index b446fca59..d497c3391 100644 --- a/src/client/cypress/e2e/srsFilter.cy.js +++ b/src/client/cypress/e2e/srsFilter.cy.js @@ -1,4 +1,4 @@ -import { newEditableBorehole, loginAsAdmin } from "./testHelpers"; +import { newEditableBorehole, loginAsAdmin } from "./helpers/testHelpers"; describe("Tests for filtering data by reference system.", () => { function goToEditorLocationFilter() { diff --git a/src/client/cypress/e2e/viewer/displayLayer.cy.js b/src/client/cypress/e2e/viewer/displayLayer.cy.js index e088900a1..26a6188f9 100644 --- a/src/client/cypress/e2e/viewer/displayLayer.cy.js +++ b/src/client/cypress/e2e/viewer/displayLayer.cy.js @@ -3,7 +3,7 @@ import { loginAsAdmin, createBorehole, setValueOfInputElement, -} from "../testHelpers"; +} from "../helpers/testHelpers"; describe("Test for the borehole form.", () => { it("Adds complete layer and displays it in viewer mode, checks if fields can be optionally hidden.", () => { diff --git a/src/client/cypress/support/e2e.js b/src/client/cypress/support/e2e.js index 314a22a87..a5c5b3578 100644 --- a/src/client/cypress/support/e2e.js +++ b/src/client/cypress/support/e2e.js @@ -1,4 +1,7 @@ -import { interceptApiCalls, loginAndResetState } from "../e2e/testHelpers"; +import { + interceptApiCalls, + loginAndResetState, +} from "../e2e/helpers/testHelpers"; Cypress.on("uncaught:exception", () => { // returning false here prevents Cypress from diff --git a/src/client/src/commons/form/borehole/completion/backfill.js b/src/client/src/commons/form/borehole/completion/backfill.js index 62b308e8a..09d7bfba6 100644 --- a/src/client/src/commons/form/borehole/completion/backfill.js +++ b/src/client/src/commons/form/borehole/completion/backfill.js @@ -8,7 +8,7 @@ import { Tooltip, Typography, } from "@mui/material"; -import { AddButton, CompletionGrid } from "./styledComponents"; +import { AddButton, CompletionCard, CompletionGrid } from "./styledComponents"; import { getBackfills, addBackfill, @@ -138,37 +138,39 @@ const Backfill = ({ isEditable, completionId }) => { key={backfill.id} ref={backfillRefs[index]}> {state.backfills ? ( - isEditable && isSelected ? ( - { - updateBackfill(backfill, data).then(() => { - handleDataChange(); - }); - }} - addBackfill={data => { - addBackfill(data).then(() => { - handleDataChange(); - }); - }} - /> - ) : ( - !isTempBackfill && ( - + {isEditable && isSelected ? ( + { - deleteBackfill(backfillId).then(() => { + completionId={completionId} + updateBackfill={(backfill, data) => { + updateBackfill(backfill, data).then(() => { + handleDataChange(); + }); + }} + addBackfill={data => { + addBackfill(data).then(() => { handleDataChange(); }); }} /> - ) - ) + ) : ( + !isTempBackfill && ( + { + deleteBackfill(backfillId).then(() => { + handleDataChange(); + }); + }} + /> + ) + )} + ) : ( )} diff --git a/src/client/src/commons/form/borehole/completion/backfillDisplay.js b/src/client/src/commons/form/borehole/completion/backfillDisplay.js index 1b8f3e60a..f02093133 100644 --- a/src/client/src/commons/form/borehole/completion/backfillDisplay.js +++ b/src/client/src/commons/form/borehole/completion/backfillDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { TypographyWithBottomMargin, StackFullWidth, @@ -20,99 +20,87 @@ const BackfillDisplay = props => { const { t, i18n } = useTranslation(); return ( - - - - - - {t("fromdepth")} - - {backfill.fromDepth || backfill.fromDepth === 0 - ? backfill.fromDepth - : "-"} - - - - {t("todepth")} - - {backfill.toDepth || backfill.toDepth === 0 - ? backfill.toDepth - : "-"} - - - - - - {t("kindFilling")} - - {backfill.kind?.[i18n.language] || "-"} - - - - - {t("materialFilling")} - - - {backfill.material?.[i18n.language] || "-"} - - - - {t("notes")} - - {backfill.notes || "-"} - + + + + + {t("fromdepth")} + + {backfill.fromDepth || backfill.fromDepth === 0 + ? backfill.fromDepth + : "-"} + + + + {t("todepth")} + + {backfill.toDepth || backfill.toDepth === 0 + ? backfill.toDepth + : "-"} + + + + + + {t("kindFilling")} + + {backfill.kind?.[i18n.language] || "-"} + + + + {t("materialFilling")} + + {backfill.material?.[i18n.language] || "-"} + + - {t("notes")} + - - { - e.stopPropagation(); - !selectedBackfill && setSelectedBackfill(backfill); - }} - /> - - - { - e.stopPropagation(); - !selectedBackfill && deleteBackfill(backfill.id); - }} - /> - - + {backfill.notes || "-"} + - + + + { + e.stopPropagation(); + !selectedBackfill && setSelectedBackfill(backfill); + }} + /> + + + { + e.stopPropagation(); + !selectedBackfill && deleteBackfill(backfill.id); + }} + /> + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/backfillInput.js b/src/client/src/commons/form/borehole/completion/backfillInput.js index 114ea6e7c..8e8ef16b3 100644 --- a/src/client/src/commons/form/borehole/completion/backfillInput.js +++ b/src/client/src/commons/form/borehole/completion/backfillInput.js @@ -1,22 +1,11 @@ import React, { useEffect } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { - Box, - Card, - FormControl, - MenuItem, - Stack, - TextField, - Tooltip, -} from "@mui/material"; +import { useForm } from "react-hook-form"; +import { Box, MenuItem, Stack, Tooltip } from "@mui/material"; import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { - TextfieldWithMarginRight, - TextfieldNoMargin, -} from "./styledComponents"; +import { FormInput, FormSelect } from "../../../../components/form"; const BackfillInput = ({ backfill, @@ -61,191 +50,100 @@ const BackfillInput = ({ }; return ( - -
- - - - { - // trigger but keep focus on the field - trigger("fromDepth"); - }} - /> - { - trigger("toDepth"); - }} - /> - - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("kindId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === completionSchemaConstants.backfillKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("materialId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === - completionSchemaConstants.backfillMaterial, - ) - .sort((a, b) => a.order - b.order) + + + + + + + + + + {domains?.data + ?.filter( + d => d.schema === completionSchemaConstants.backfillKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + + {domains?.data + ?.filter( + d => d.schema === completionSchemaConstants.backfillMaterial, + ) + .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - + .map(d => ( + + {d[i18n.language]} + + ))} + + + + - - - closeFormIfCompleted()} - /> - - -
- + + + closeFormIfCompleted()} + /> + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/casing.js b/src/client/src/commons/form/borehole/completion/casing.js index 146ea783e..652f4a356 100644 --- a/src/client/src/commons/form/borehole/completion/casing.js +++ b/src/client/src/commons/form/borehole/completion/casing.js @@ -8,7 +8,7 @@ import { Tooltip, Typography, } from "@mui/material"; -import { AddButton, CompletionGrid } from "./styledComponents"; +import { AddButton, CompletionCard, CompletionGrid } from "./styledComponents"; import { getCasings, addCasing, @@ -138,37 +138,39 @@ const Casing = ({ isEditable, completionId }) => { key={casing.id} ref={casingRefs[index]}> {state.casings ? ( - isEditable && isSelected ? ( - { - updateCasing(casing, data).then(() => { - handleDataChange(); - }); - }} - addCasing={data => { - addCasing(data).then(() => { - handleDataChange(); - }); - }} - /> - ) : ( - !isTempCasing && ( - + {isEditable && isSelected ? ( + { - deleteCasing(casingId).then(() => { + completionId={completionId} + updateCasing={(casing, data) => { + updateCasing(casing, data).then(() => { + handleDataChange(); + }); + }} + addCasing={data => { + addCasing(data).then(() => { handleDataChange(); }); }} /> - ) - ) + ) : ( + !isTempCasing && ( + { + deleteCasing(casingId).then(() => { + handleDataChange(); + }); + }} + /> + ) + )} + ) : ( )} diff --git a/src/client/src/commons/form/borehole/completion/casingDisplay.js b/src/client/src/commons/form/borehole/completion/casingDisplay.js index c91e14022..125e174c0 100644 --- a/src/client/src/commons/form/borehole/completion/casingDisplay.js +++ b/src/client/src/commons/form/borehole/completion/casingDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { TypographyWithBottomMargin, StackFullWidth, @@ -31,160 +31,144 @@ const CasingDisplay = props => { }; return ( - - - - - {t("name")} + + + + {t("name")} + + {casing.name ? casing.name : "-"} + + + + + {t("fromdepth")} - {casing.name ? casing.name : "-"} + data-cy="casing-fromDepth"> + {casing.fromDepth || casing.fromDepth === 0 + ? casing.fromDepth + : "-"} - - - - {t("fromdepth")} - - {casing.fromDepth || casing.fromDepth === 0 - ? casing.fromDepth - : "-"} - - - - {t("todepth")} - - {casing.toDepth || casing.toDepth === 0 ? casing.toDepth : "-"} - - - - - - {t("kindFilling")} - - {casing.kind?.[i18n.language] || "-"} - - - - - {t("materialFilling")} - - - {casing.material?.[i18n.language] || "-"} - - - - - - {t("dateSpudCasing")} - - {casing.dateStart ? formattedDateTime(casing.dateStart) : "-"} - - - - - {t("dateFinishCasing")} - - - {casing.dateFinish ? formattedDateTime(casing.dateFinish) : "-"} - - - - - - - {t("casing_inner_diameter")} - - - {casing.innerDiameter || casing.innerDiameter === 0 - ? casing.innerDiameter - : "-"} - - - - - {t("casing_outer_diameter")} - - - {casing.outerDiameter || casing.outerDiameter === 0 - ? casing.outerDiameter - : "-"} - - - - {t("notes")} - - {casing.notes || "-"} - + + + {t("todepth")} + + {casing.toDepth || casing.toDepth === 0 ? casing.toDepth : "-"} + + + + + + {t("kindFilling")} + + {casing.kind?.[i18n.language] || "-"} + + + + {t("materialFilling")} + + {casing.material?.[i18n.language] || "-"} + + - + + {t("dateSpudCasing")} + + {casing.dateStart ? formattedDateTime(casing.dateStart) : "-"} + + + + {t("dateFinishCasing")} + + {casing.dateFinish ? formattedDateTime(casing.dateFinish) : "-"} + + + + + + + {t("casing_inner_diameter")} + + + {casing.innerDiameter || casing.innerDiameter === 0 + ? casing.innerDiameter + : "-"} + + + + + {t("casing_outer_diameter")} + + + {casing.outerDiameter || casing.outerDiameter === 0 + ? casing.outerDiameter + : "-"} + + + + {t("notes")} + - - { - e.stopPropagation(); - !selectedCasing && setSelectedCasing(casing); - }} - /> - - - { - e.stopPropagation(); - !selectedCasing && deleteCasing(casing.id); - }} - /> - - + display: "-webkit-box", + overflow: "auto", + WebkitBoxOrient: "vertical", + WebkitLineClamp: 3, + }} + data-cy="casing-notes"> + {casing.notes || "-"} + - + + + { + e.stopPropagation(); + !selectedCasing && setSelectedCasing(casing); + }} + /> + + + { + e.stopPropagation(); + !selectedCasing && deleteCasing(casing.id); + }} + /> + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/casingInput.js b/src/client/src/commons/form/borehole/completion/casingInput.js index 723f7ede0..7cc7744ae 100644 --- a/src/client/src/commons/form/borehole/completion/casingInput.js +++ b/src/client/src/commons/form/borehole/completion/casingInput.js @@ -1,22 +1,11 @@ import React, { useEffect } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { - Box, - Card, - FormControl, - MenuItem, - Stack, - TextField, - Tooltip, -} from "@mui/material"; +import { useForm } from "react-hook-form"; +import { Box, MenuItem, Stack, Tooltip } from "@mui/material"; import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; import { useDomains } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { - TextfieldWithMarginRight, - TextfieldNoMargin, -} from "./styledComponents"; +import { FormInput, FormSelect } from "../../../../components/form"; const CasingInput = ({ casing, @@ -66,313 +55,151 @@ const CasingInput = ({ } }; - const getInputFieldBackgroundColor = errorFieldName => - Boolean(errorFieldName) ? "#fff6f6" : "transparent"; - return ( - -
- - - { - trigger("name"); - }} + + + + + + + + + + + {domains?.data + ?.filter(d => d.schema === completionSchemaConstants.casingKind) + .sort((a, b) => a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + + {domains?.data + ?.filter( + d => d.schema === completionSchemaConstants.casingMaterial, + ) + .sort((a, b) => a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + + + + + + + + + + + - - { - // trigger but keep focus on the field - trigger("fromDepth", { shouldFocus: true }); - }} - /> - { - trigger("toDepth"); - }} - /> - - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("kindId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === completionSchemaConstants.casingKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("materialId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === - completionSchemaConstants.casingMaterial, - ) - .sort((a, b) => a.order - b.order) - - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - { - trigger("dateStart"); - }} - /> - { - trigger("dateFinish"); - }} - /> - - - { - // trigger but keep focus on the field - trigger("innerDiameter", { shouldFocus: true }); - }} - /> - { - trigger("outerDiameter"); - }} - /> - - - - - - - closeFormIfCompleted()} - /> - - - -
+ + + closeFormIfCompleted()} + /> + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js index 0d284e5f4..74c7174b9 100644 --- a/src/client/src/commons/form/borehole/completion/completionHeaderInput.js +++ b/src/client/src/commons/form/borehole/completion/completionHeaderInput.js @@ -1,19 +1,16 @@ import React, { useState, useEffect } from "react"; -import { useForm, Controller } from "react-hook-form"; +import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import { - Stack, - FormControl, - TextField, - MenuItem, - Checkbox, - Tooltip, - FormControlLabel, -} from "@mui/material"; +import { Stack, MenuItem, Tooltip } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import SaveIcon from "@mui/icons-material/Save"; import { useDomains } from "../../../../api/fetchApiV2"; import { IconButtonWithMargin } from "./styledComponents"; +import { + FormInput, + FormSelect, + FormCheckbox, +} from "../../../../components/form"; import Prompt from "../../../prompt/prompt"; const CompletionHeaderInput = props => { @@ -86,9 +83,6 @@ const CompletionHeaderInput = props => { saveCompletion({ ...completion, ...data }); }; - const getInputFieldBackgroundColor = errorFieldName => - Boolean(errorFieldName) ? "#fff6f6" : "transparent"; - return ( <>
@@ -98,147 +92,72 @@ const CompletionHeaderInput = props => { justifyContent="space-between" alignItems="center" flexWrap="wrap"> - { - trigger("name"); - }} + - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("kindId"); - }}> - {domains?.data - ?.filter(d => d.schema === "completion_kind") - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - { - trigger("isPrimary"); - }} - /> - } - label={t("mainCompletion")} + + {domains?.data + ?.filter(d => d.schema === "completion_kind") + .sort((a, b) => a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + - { - trigger("notes"); - }} + - { - trigger("abandonDate"); - }} + value={selectedCompletion?.abandonDate} + formState={formState} + register={register} + trigger={trigger} + sx={{ marginRight: "0", flex: "0 0 400px" }} /> diff --git a/src/client/src/commons/form/borehole/completion/instrumentation.js b/src/client/src/commons/form/borehole/completion/instrumentation.js index fd02d479f..3b5f4252f 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentation.js +++ b/src/client/src/commons/form/borehole/completion/instrumentation.js @@ -8,7 +8,7 @@ import { Tooltip, Typography, } from "@mui/material"; -import { AddButton, CompletionGrid } from "./styledComponents"; +import { AddButton, CompletionCard, CompletionGrid } from "./styledComponents"; import { useInstrumentationMutations, useInstrumentations, @@ -108,27 +108,31 @@ const Instrumentation = ({ isEditable, completionId }) => { key={instrumentation.id} ref={instrumentationRefs[index]}> {isSuccess ? ( - isEditable && isSelected ? ( - - ) : ( - !isTempInstrumentation && ( - + {isEditable && isSelected ? ( + - ) - ) + ) : ( + !isTempInstrumentation && ( + + ) + )} + ) : ( )} diff --git a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js index ab6b5a0d2..224be1167 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js +++ b/src/client/src/commons/form/borehole/completion/instrumentationDisplay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Stack, Tooltip, Typography } from "@mui/material"; +import { Stack, Tooltip, Typography } from "@mui/material"; import { TypographyWithBottomMargin, StackFullWidth, @@ -20,115 +20,103 @@ const InstrumentationDisplay = props => { const { t, i18n } = useTranslation(); return ( - - - - - - {t("fromdepth")} - - {instrumentation.fromDepth || instrumentation.fromDepth === 0 - ? instrumentation.fromDepth - : "-"} - - - - {t("todepth")} - - {instrumentation.toDepth || instrumentation.toDepth === 0 - ? instrumentation.toDepth - : "-"} - - - - - - {t("name")} - - {instrumentation.name ? instrumentation.name : "-"} - - - - {t("casingId")} - - {instrumentation.casingId ? instrumentation.casing.name : "-"} - - - - - - {t("kindInstrument")} - - {instrumentation.kind?.[i18n.language] || "-"} - - - - - {t("statusInstrument")} - - - {instrumentation.status?.[i18n.language] || "-"} - - - - {t("notes")} - - {instrumentation.notes || "-"} - + + + + + {t("fromdepth")} + + {instrumentation.fromDepth || instrumentation.fromDepth === 0 + ? instrumentation.fromDepth + : "-"} + + + + {t("todepth")} + + {instrumentation.toDepth || instrumentation.toDepth === 0 + ? instrumentation.toDepth + : "-"} + + + + + + {t("name")} + + {instrumentation.name ? instrumentation.name : "-"} + + + + {t("casingId")} + + {instrumentation.casingId ? instrumentation.casing.name : "-"} + + + + + + {t("kindInstrument")} + + {instrumentation.kind?.[i18n.language] || "-"} + + + + {t("statusInstrument")} + + {instrumentation.status?.[i18n.language] || "-"} + + - {t("notes")} + - - { - e.stopPropagation(); - !selectedInstrumentation && - setSelectedInstrumentation(instrumentation); - }} - /> - - - { - e.stopPropagation(); - !selectedInstrumentation && - deleteInstrumentation(instrumentation.id); - }} - /> - - + {instrumentation.notes || "-"} + - + + + { + e.stopPropagation(); + !selectedInstrumentation && + setSelectedInstrumentation(instrumentation); + }} + /> + + + { + e.stopPropagation(); + !selectedInstrumentation && + deleteInstrumentation(instrumentation.id); + }} + /> + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/instrumentationInput.js b/src/client/src/commons/form/borehole/completion/instrumentationInput.js index 3e1d952c6..3d6ffc34a 100644 --- a/src/client/src/commons/form/borehole/completion/instrumentationInput.js +++ b/src/client/src/commons/form/borehole/completion/instrumentationInput.js @@ -1,22 +1,11 @@ import React, { useEffect, useState } from "react"; -import { useForm, Controller } from "react-hook-form"; -import { - Box, - Card, - FormControl, - MenuItem, - Stack, - TextField, - Tooltip, -} from "@mui/material"; +import { useForm } from "react-hook-form"; +import { Box, MenuItem, Stack, Tooltip } from "@mui/material"; import CheckIcon from "@mui/icons-material/Check"; import { useTranslation } from "react-i18next"; import { useDomains, getCasings } from "../../../../api/fetchApiV2"; import { completionSchemaConstants } from "./completionSchemaConstants"; -import { - TextfieldWithMarginRight, - TextfieldNoMargin, -} from "./styledComponents"; +import { FormInput, FormSelect } from "../../../../components/form"; const InstrumentationInput = ({ instrumentation, @@ -72,261 +61,132 @@ const InstrumentationInput = ({ } }, [completionId]); - const getInputFieldBackgroundColor = errorFieldName => - Boolean(errorFieldName) ? "#fff6f6" : "transparent"; - return ( - - - - - - { - trigger("fromDepth"); - }} - /> - { - trigger("toDepth"); - }} - /> - - - { - trigger("name"); - }} - /> - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("casingId"); - }}> - - {t("reset")} - - {casings?.map(casing => ( - - {casing.name} - - ))} - - )} - /> - - - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("kindId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === - completionSchemaConstants.instrumentationKind, - ) - .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - ( - { - e.stopPropagation(); - field.onChange(e.target.value); - trigger("statusId"); - }}> - {domains?.data - ?.filter( - d => - d.schema === - completionSchemaConstants.instrumentationStatus, - ) - .sort((a, b) => a.order - b.order) + + + + + + + + + + + + {t("reset")} + + {casings?.map(casing => ( + + {casing.name} + + ))} + + + + + {domains?.data + ?.filter( + d => + d.schema === completionSchemaConstants.instrumentationKind, + ) + .sort((a, b) => a.order - b.order) + .map(d => ( + + {d[i18n.language]} + + ))} + + + {domains?.data + ?.filter( + d => + d.schema === + completionSchemaConstants.instrumentationStatus, + ) + .sort((a, b) => a.order - b.order) - .map(d => ( - - {d[i18n.language]} - - ))} - - )} - /> - - - - - + .map(d => ( + + {d[i18n.language]} + + ))} + + + + - - - closeFormIfCompleted()} - /> - - - - + + + closeFormIfCompleted()} + /> + + + + ); }; diff --git a/src/client/src/commons/form/borehole/completion/styledComponents.js b/src/client/src/commons/form/borehole/completion/styledComponents.js index c984f9095..e07fc8ed1 100644 --- a/src/client/src/commons/form/borehole/completion/styledComponents.js +++ b/src/client/src/commons/form/borehole/completion/styledComponents.js @@ -2,6 +2,7 @@ import React, { forwardRef } from "react"; import { Box, Button, + Card, Grid, IconButton, Stack, @@ -144,3 +145,19 @@ export const CompletionGrid = forwardRef((props, ref) => { ); }); + +export const CompletionCard = forwardRef((props, ref) => { + const StyledCard = styled(Card)(() => ({ + border: "1px solid lightgrey", + borderRadius: "3px", + padding: "12px", + marginBottom: "16px", + height: "100%", + })); + + return ( + + {props.children} + + ); +}); diff --git a/src/client/src/components/form.js b/src/client/src/components/form.js new file mode 100644 index 000000000..4c36fd7fa --- /dev/null +++ b/src/client/src/components/form.js @@ -0,0 +1,146 @@ +import { + Checkbox, + FormControl, + FormControlLabel, + TextField, +} from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { Controller } from "react-hook-form"; + +export const getInputFieldBackgroundColor = errorFieldName => + Boolean(errorFieldName) ? "#fff6f6" : "transparent"; + +export const FormInput = props => { + const { + fieldName, + label, + required, + disabled, + type, + multiline, + rows, + value, + formState, + register, + trigger, + sx, + } = props; + const { t } = useTranslation(); + + return ( + { + trigger(fieldName); + }} + /> + ); +}; + +export const FormSelect = props => { + const { + fieldName, + label, + required, + disabled, + selected, + formState, + control, + register, + trigger, + sx, + } = props; + const { t } = useTranslation(); + + return ( + + ( + { + e.stopPropagation(); + field.onChange(e.target.value); + trigger(fieldName); + }}> + {props.children} + + )} + /> + + ); +}; + +export const FormCheckbox = props => { + const { fieldName, label, checked, disabled, register, trigger, sx } = props; + const { t } = useTranslation(); + + return ( + { + trigger(fieldName); + }} + /> + } + label={t(label)} + sx={{ ...sx }} + /> + ); +};