Skip to content

Commit

Permalink
initial progress towards allowing to add a batch of cells
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdbocarsly
jdbocarsly committed Jul 11, 2024
1 parent eeed2f6 commit bceeac4
Showing 1 changed file with 145 additions and 38 deletions.
183 changes: 145 additions & 38 deletions webapp/src/components/BatchCreateSampleModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@update:model-value="$emit('update:modelValue', $event)"
>
<template #header>
<template v-if="beforeSubmit">Add new samples</template>
<template v-if="beforeSubmit">Add new items</template>
<template v-else>
<a id="back-arrow" role="button" @click="beforeSubmit = true">←</a>
Samples added
Expand All @@ -20,7 +20,40 @@
<transition name="slide-content-left">
<div v-show="beforeSubmit" id="left-screen">
<div class="row">
<div class="col-md-8 mt-2" @click="templateIsOpen = !templateIsOpen">
<div class="input-group col-md-3 col-6">
<label for="batch-item-type-select" class="blue-label col-form-label mr-3">
Type:
</label>
<select
id="batch-item-type-select"
v-model="item_type"
class="form-control"
required
>
<option v-for="type in allowedTypes" :key="type" :value="type">
{{ itemTypes[type].display }}
</option>
</select>
</div>
<div class="input-group col-md-3 col-6">
<label
for="batchSampleNRows"
class="blue-label col-form-label text-left mb-2 mr-3"
>
Number of rows:
</label>
<input
id="batchSampleNRows"
v-model="nSamples"
class="form-control"
type="number"
min="0"
max="100"
/>
</div>
</div>
<div class="row">
<div class="col-md-6 mt-2" @click="templateIsOpen = !templateIsOpen">
<font-awesome-icon
:icon="['fas', 'chevron-right']"
fixed-width
Expand All @@ -29,20 +62,6 @@
/>
<label class="blue-label clickable pl-2"> Template: </label>
</div>
<label
for="batchSampleNRows"
class="blue-label col-md-2 col-3 col-form-label text-left mb-2"
>
Number of rows:
</label>
<input
id="batchSampleNRows"
v-model="nSamples"
class="form-control col-md-1 col-2"
type="number"
min="0"
max="100"
/>
</div>

<div
Expand Down Expand Up @@ -112,12 +131,36 @@
/>
</td>
<td>
<ItemSelect
v-model="sampleTemplate.components"
multiple
:formatted-item-name-max-length="8"
@update:model-value="applyComponentsTemplate"
/>
<div v-if="item_type == 'samples'">
<ItemSelect
v-model="sampleTemplate.components"
multiple
:formatted-item-name-max-length="8"
@update:model-value="applyComponentsTemplate"
/>
</div>
<div v-if="item_type == 'cells'">
<ItemSelect
v-model="sampleTemplate.positiveElectrode"
multiple
:formatted-item-name-max-length="8"
@update:model-value="applyComponentsTemplate"
/>
<ItemSelect
v-model="sampleTemplate.electrolyte"
multiple
:formatted-item-name-max-length="8"
class="pt-1"
@update:model-value="applyComponentsTemplate"
/>
<ItemSelect
v-model="sampleTemplate.negativeElectrode"
multiple
:formatted-item-name-max-length="8"
class="pt-1"
@update:model-value="applyComponentsTemplate"
/>
</div>
</td>
</tbody>
</table>
Expand Down Expand Up @@ -183,11 +226,32 @@
<ItemSelect v-model="sample.copyFrom" :formatted-item-name-max-length="8" />
</td>
<td>
<ItemSelect
v-model="sample.components"
multiple
:formatted-item-name-max-length="8"
/>
<div v-if="item_type == 'samples'">
<ItemSelect
v-model="sample.components"
multiple
:formatted-item-name-max-length="8"
/>
</div>
<div v-if="item_type == 'cells'">
<ItemSelect
v-model="sample.positiveElectrode"
multiple
:formatted-item-name-max-length="8"
/>
<ItemSelect
v-model="sample.electrolyte"
multiple
:formatted-item-name-max-length="8"
class="pt-1"
/>
<ItemSelect
v-model="sample.negativeElectrode"
multiple
:formatted-item-name-max-length="8"
class="pt-1"
/>
</div>
</td>
<td>
<button
Expand Down Expand Up @@ -257,6 +321,7 @@
import Modal from "@/components/Modal.vue";
import ItemSelect from "@/components/ItemSelect.vue";
import { createNewSamples } from "@/server_fetch_utils.js";
import { itemTypes, SAMPLE_TABLE_TYPES } from "@/resources.js";
export default {
name: "BatchCreateSampleModal",
components: {
Expand All @@ -265,6 +330,10 @@ export default {
},
props: {
modelValue: Boolean,
allowedTypes: {
type: Array,
default: () => SAMPLE_TABLE_TYPES,
},
},
emits: ["update:modelValue"],
data() {
Expand All @@ -274,26 +343,36 @@ export default {
oneYearOn: this.determineOneYearOn(),
nSamples: 3,
generateIDsAutomatically: false,
item_type: "samples",
samples: [
{
item_id: null,
name: "",
copyFrom: null,
components: [],
positiveElectrode: [],
electrolyte: [],
negativeElectrode: [],
date: this.now(),
},
{
item_id: null,
name: "",
copyFrom: null,
components: [],
positiveElectrode: [],
electrolyte: [],
negativeElectrode: [],
date: this.now(),
},
{
item_id: null,
name: "",
copyFrom: null,
components: [],
positiveElectrode: [],
electrolyte: [],
negativeElectrode: [],
date: this.now(),
},
],
Expand All @@ -306,13 +385,19 @@ export default {
name: "",
copyFrom: null,
components: null,
positiveElectrode: null,
electrolyte: null,
negativeElectrode: null,
date: this.now(),
},
serverResponses: {}, // after the server responds, store error messages if any
};
},
computed: {
itemTypes() {
return itemTypes;
},
takenSampleIds() {
return this.$store.state.sample_list
? this.$store.state.sample_list.map((x) => x.item_id)
Expand Down Expand Up @@ -435,17 +520,39 @@ export default {
async submitForm() {
console.log("batch sample create form submit triggered");
const newSampleDatas = this.samples.map((sample) => {
return {
item_id: sample.item_id,
date: sample.date,
name: sample.name,
type: "samples",
synthesis_constituents: sample.components
? sample.components.map((x) => ({ item: x, quantity: null }))
: [],
};
});
let newSampleDatas;
if (this.item_type == "samples") {
newSampleDatas = this.samples.map((sample) => {
return {
item_id: sample.item_id,
date: sample.date,
name: sample.name,
type: "samples",
synthesis_constituents: sample.components
? sample.components.map((x) => ({ item: x, quantity: null }))
: [],
};
});
} else {
newSampleDatas = this.samples.map((sample) => {
return {
item_id: sample.item_id,
date: sample.date,
name: sample.name,
type: "samples",
positive_electrode: sample.positiveElectrode
? sample.positiveElectrode.map((x) => ({ item: x, quantity: null }))
: [],
electrolyte: sample.electrolyte
? sample.electrolyte.map((x) => ({ item: x, quantity: null }))
: [],
negative_electrode: sample.negativeElectrode
? sample.negativeElectrode.map((x) => ({ item: x, quantity: null }))
: [],
};
});
}
const copyFromItemIds = this.samples.map((sample) => sample.copyFrom?.item_id);
Expand Down

0 comments on commit bceeac4

Please sign in to comment.