-
+
@@ -36,6 +51,10 @@ export default {
selectedNewConstituent: null,
selectedChangedConstituent: null,
selectShown: [],
+ // isExpanded is used to toggle the visibility of the content-container starts as false then will expand when clicked or if it is filled
+ isExpanded: false,
+ contentMaxHeight: "0px", // "none", Start collapsed so 0px, if expanded set to none in mounted
+ padding_height: 18,
};
},
computed: {
@@ -43,19 +62,56 @@ export default {
SynthesisDescription: createComputedSetterForItemField("synthesis_description"),
},
watch: {
- // since constituents is an object, the computed setter never fires and
- // saved status is never updated. So, use a watcher:
+ // Added initialization check to prevent firing on mount - this seemed to trigger an unsaved check when loading the sample for the second time
constituents: {
handler() {
this.$store.commit("setItemSaved", { item_id: this.item_id, isSaved: false });
},
deep: true,
},
+ SynthesisDescription: {
+ handler() {
+ this.$store.commit("setItemSaved", { item_id: this.item_id, isSaved: false });
+ },
+ },
},
mounted() {
this.selectShown = new Array(this.constituents.length).fill(false);
+ // Auto-collapsed when initialised empty
+ this.isExpanded =
+ (this.constituents && this.constituents.length > 0) ||
+ (this.SynthesisDescription && this.SynthesisDescription.trim() !== "");
+ // If expanded set height to none, otherwise set to 0px
+ if (this.isExpanded) {
+ this.contentMaxHeight = "none";
+ } else {
+ this.contentMaxHeight = "0px";
+ }
+ var content = this.$refs.contentContainer;
+ content.addEventListener("transitionend", () => {
+ if (this.isExpanded) {
+ this.contentMaxHeight = "none";
+ }
+ });
},
methods: {
+ toggleExpandBlock() {
+ var content = this.$refs.contentContainer;
+ console.log(this.contentMaxHeight);
+ if (!this.isExpanded) {
+ this.contentMaxHeight = content.scrollHeight + 2 * this.padding_height + "px";
+ this.isExpanded = true;
+ } else {
+ requestAnimationFrame(() => {
+ //must be an arrow function so that 'this' is still accessible!
+ this.contentMaxHeight = content.scrollHeight + "px";
+ requestAnimationFrame(() => {
+ this.contentMaxHeight = "0px";
+ this.isExpanded = false;
+ });
+ });
+ }
+ },
addConstituent(selectedItem) {
this.constituents.push({
item: selectedItem,
@@ -64,6 +120,7 @@ export default {
});
this.selectedNewConstituent = null;
this.selectShown.push(false);
+ this.isExpanded = true;
},
turnOnRowSelect(index) {
this.selectShown[index] = true;
@@ -86,6 +143,59 @@ export default {
diff --git a/webapp/src/components/itemCreateModalAddons/StartingMaterialCreateModalAddon.vue b/webapp/src/components/itemCreateModalAddons/StartingMaterialCreateModalAddon.vue
new file mode 100644
index 000000000..5aa0d9b41
--- /dev/null
+++ b/webapp/src/components/itemCreateModalAddons/StartingMaterialCreateModalAddon.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
diff --git a/webapp/src/resources.js b/webapp/src/resources.js
index 859121cb8..a6004dd13 100644
--- a/webapp/src/resources.js
+++ b/webapp/src/resources.js
@@ -15,6 +15,7 @@ import EquipmentInformation from "@/components/EquipmentInformation";
import SampleCreateModalAddon from "@/components/itemCreateModalAddons/SampleCreateModalAddon";
import CellCreateModalAddon from "@/components/itemCreateModalAddons/CellCreateModalAddon";
+import StartingMaterialCreateModalAddon from "./components/itemCreateModalAddons/StartingMaterialCreateModalAddon.vue";
// Look for values set in .env file. Use defaults if `null` is not explicitly handled elsewhere in the code.
export const API_URL =
@@ -79,6 +80,7 @@ export const itemTypes = {
},
starting_materials: {
itemInformationComponent: StartingMaterialInformation,
+ itemCreateModalAddon: StartingMaterialCreateModalAddon,
navbarColor: "#349579",
navbarName: "Starting Material",
lightColor: "#d9f2eb",