Make the collection sample table work by reworking the store

webapp/src/components/CollectionInformation.vue

@@ -9,13 +9,9 @@
         <label for="name" class="mr-2">Title</label>
         <input id="name" class="form-control" v-model="Title" />
       </div>
-      <div class="form-group col-md-3">
-        <label for="date" class="mr-2">Date Created</label>
-        <input type="datetime-local" v-model="DateCreated" class="form-control" />
-      </div>
       <div class="col-md-1">
         <label id="creators" class="mr-2">Creators</label>
-        <Creators aria-labelledby="creators" :creators="CollectionCreators" :size="36" />
+        <Creators :creators="CollectionCreators" :size="36" />
       </div>
     </div>
     <label id="description-label" class="mr-2">Description</label>
@@ -33,6 +29,7 @@
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
 import FancyCollectionSampleTable from "@/components/FancyCollectionSampleTable";
 import TinyMceInline from "@/components/TinyMceInline";
+import Creators from "@/components/Creators";
 // import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
 
 export default {
@@ -41,16 +38,15 @@ export default {
   },
   computed: {
     CollectionID: createComputedSetterForCollectionField("collection_id"),
-    Refcode: createComputedSetterForCollectionField("refcode"),
     CollectionDescription: createComputedSetterForCollectionField("description"),
     Title: createComputedSetterForCollectionField("title"),
-    DateCreated: createComputedSetterForCollectionField("date"),
     Name: createComputedSetterForCollectionField("name"),
     CollectionCreators: createComputedSetterForCollectionField("creators"),
   },
   components: {
     TinyMceInline,
     FancyCollectionSampleTable,
+    Creators,
     //    CollectionRelationshipVisualization,
   },
 };

webapp/src/components/CollectionTable.vue

@@ -49,7 +49,7 @@
 <script>
 import { getCollectionList, deleteCollection } from "@/server_fetch_utils.js";
 import FormattedItemName from "@/components/FormattedItemName";
-import crypto from "crypto";
+import Creators from "@/components/Creators";
 import { GRAVATAR_STYLE } from "@/resources.js";
 
 export default {
@@ -65,10 +65,6 @@ export default {
     },
   },
   methods: {
-    md5(value) {
-      // Returns the MD5 hash of the given string.
-      return crypto.createHash("md5").update(value).digest("hex");
-    },
     goToEditPage(collection_id) {
       this.$router.push(`/collections/${collection_id}`);
     },
@@ -96,6 +92,7 @@ export default {
   },
   components: {
     FormattedItemName,
+    Creators,
   },
 };
 </script>

webapp/src/components/FancyCollectionSampleTable.vue

@@ -62,10 +62,12 @@ import FormattedItemName from "@/components/FormattedItemName";
 import ChemicalFormula from "@/components/ChemicalFormula";
 import Creators from "@/components/Creators";
 // eslint-disable-next-line no-unused-vars
-import { getCollectionSampleList } from "@/server_fetch_utils.js";
 import { GRAVATAR_STYLE, itemTypes } from "@/resources.js";
 
 export default {
+  props: {
+    collection_id: String,
+  },
   data() {
     return {
       isSampleFetchError: false,
@@ -85,12 +87,9 @@ export default {
       searchValue: "",
     };
   },
-  props: {
-    collection_id: String,
-  },
   computed: {
     samples() {
-      return this.$store.state.all_collection_children[this.collection_id];
+      return this.$store.state.this_collection_children;
     },
   },
   methods: {

webapp/src/components/TinyMceInline.vue

@@ -6,7 +6,7 @@
     :init="{
       inline: true,
       menubar: false,
-      placeholder: 'Comment',
+      placeholder: 'Add a description',
       toolbar_location: 'bottom',
       plugins: 'hr image link lists charmap table',
       table_default_styles: {
@@ -51,7 +51,7 @@ export default {
   data: function () {
     return { content: this.modelValue };
   },
-  props: ["modelValue"],
+  props: ["modelValue", "placeholder"],
   emits: ["update:modelValue"],
   watch: {
     modelValue() {

webapp/src/server_fetch_utils.js

@@ -268,6 +268,15 @@ export function deleteCollection(collection_id, collection_summary) {
     .catch((error) => alert("Collection delete failed for " + collection_id + ": " + error));
 }
 
+export function deletSampleFromCollection(collection_id, collection_summary) {
+  return fetch_delete(`${API_URL}/collections/${collection_id}`)
+    .then(function (response_json) {
+      console.log("delete successful" + response_json);
+      store.commit("deleteFromCollectionList", collection_summary);
+    })
+    .catch((error) => alert("Collection delete failed for " + collection_id + ": " + error));
+}
+
 export async function getItemData(item_id) {
   return fetch_get(`${API_URL}/get-item-data/${item_id}`)
     .then((response_json) => {
@@ -289,7 +298,7 @@ export async function getCollectionData(collection_id) {
   return fetch_get(`${API_URL}/collections/${collection_id}`)
     .then((response_json) => {
       console.log("get collection", response_json);
-      store.commit("createCollectionData", {
+      store.commit("setCollectionData", {
         collection_id: collection_id,
         data: response_json.data,
         child_items: response_json.child_items,
@@ -348,6 +357,25 @@ export function addABlock(item_id, block_type, index = null) {
   return block_id_promise;
 }
 
+export function addACollectionBlock(collection_id, block_type, index = null) {
+  console.log("addACollectionBlock called with", collection_id, block_type);
+  var block_id_promise = fetch_post(`${API_URL}/add-collection-data-block/`, {
+    collection_id: collection_id,
+    block_type: block_type,
+    index: index,
+  })
+    .then(function (response_json) {
+      store.commit("addACollectionBlock", {
+        collection_id: collection_id,
+        new_block_obj: response_json.new_block_obj,
+        new_block_insert_index: response_json.new_block_insert_index,
+      });
+      return response_json.new_block_obj.block_id;
+    })
+    .catch((error) => console.error("Error in addACollectionBlock:", error));
+  return block_id_promise;
+}
+
 export function saveItem(item_id) {
   console.log("saveItem Called!");
   var item_data = store.state.all_item_data[item_id];

webapp/src/store/index.js

@@ -11,6 +11,9 @@ export default createStore({
     all_collection_data: {},
     all_collection_children: {},
     all_collection_parents: {},
+    this_collection_data: {},
+    this_collection_children: [],
+    this_collection_parents: [],
     sample_list: [],
     starting_material_list: [],
     collection_list: [],
@@ -76,13 +79,15 @@ export default createStore({
       state.all_item_parents[payload.item_id] = payload.parent_items;
       state.saved_status_items[payload.item_id] = true;
     },
-    createCollectionData(state, payload) {
+    setCollectionData(state, payload) {
       // payload should have the following fields:
       // collection_id, data, child_items
       // Object.assign(state.all_sample_data[payload.item_data], payload.item_data)
+      state.this_collection_id = payload.collection_id;
+      state.this_collection_data = payload.data;
       state.all_collection_data[payload.collection_id] = payload.data;
-      state.all_collection_children[payload.collection_id] = payload.child_items;
-      state.all_collection_parents[payload.collection_id] = [];
+      state.this_collection_children = payload.child_items;
+      state.this_collection_parents = [];
       state.saved_status_collections[payload.collection_id] = true;
     },
     updateFiles(state, files_data) {
@@ -131,6 +136,33 @@ export default createStore({
         state.all_item_data[item_id]["display_order"].push(new_block_id);
       }
     },
+    addACollectionBlock(state, { collection_id, new_block_obj, new_block_insert_index }) {
+      // payload: item_id, new_block_obj, new_display_order
+
+      // I should actually throw an error if this fails!
+      console.assert(
+        collection_id == new_block_obj.collection_id,
+        "The block has a different collection_id (%s) than the collection_id provided to addACollectionBlock (%s)",
+        collection_id,
+        new_block_obj.collection_id
+      );
+      console.log(
+        `addACollectionBlock called with: ${collection_id}, ${new_block_obj}, ${new_block_insert_index}`
+      );
+      let new_block_id = new_block_obj.block_id;
+      state.all_collection_data[collection_id]["blocks_obj"][new_block_id] = new_block_obj;
+      if (new_block_insert_index) {
+        state.all_collection_data[collection_id]["display_order"].splice(
+          new_block_insert_index,
+          0,
+          new_block_id
+        );
+      }
+      // if new_block_insert_index is None, then block is inserted at the end
+      else {
+        state.all_collection_data[collection_id]["display_order"].push(new_block_id);
+      }
+    },
     updateBlockData(state, payload) {
       // requires the following fields in payload:
       // item_id, block_id, block_data

webapp/src/views/CollectionPage.vue

@@ -70,7 +70,7 @@
 
 <script>
 import CollectionInformation from "@/components/CollectionInformation";
-import { getCollectionData, saveCollection } from "@/server_fetch_utils";
+import { getCollectionData, saveCollection, addACollectionBlock } from "@/server_fetch_utils";
 import tinymce from "tinymce/tinymce";
 import { blockTypes, itemTypes } from "@/resources.js";
 import { API_URL } from "@/resources.js";
@@ -79,10 +79,26 @@ export default {
   data() {
     return {
       collection_id: this.$route.params.id,
-      item_data_loaded: false,
+      data_loaded: false,
+      isMenuDropdownVisible: false,
+      isLoadingNewBlock: false,
     };
   },
   methods: {
+    async newBlock(event, blockType, index = null) {
+      this.isMenuDropdownVisible = false;
+      this.isLoadingNewBlock = true;
+      this.$refs.blockLoadingIndicator.scrollIntoView({
+        behavior: "smooth",
+      });
+      var block_id = await addACollectionBlock(this.item_id, blockType, index);
+      // close the dropdown and scroll to the new block
+      var new_block_el = document.getElementById(block_id);
+      this.isLoadingNewBlock = false;
+      new_block_el.scrollIntoView({
+        behavior: "smooth",
+      });
+    },
     saveCollectionData() {
       // trigger the mce save so that they update the store with their content
       console.log("save clicked!");
@@ -115,13 +131,6 @@ export default {
     lastModified() {
       // if (!this.item_data.last_modified) { return "" }
       let item_date = this.collection_data.last_modified;
-      if (item_date == null) {
-        item_date = this.collection_data.date;
-      }
-      if (item_date == null) {
-        return "Unknown";
-      }
-
       const save_date = new Date(item_date);
       return save_date.toLocaleString("en-GB");
     },