Merge pull request #162 from Language-Research-Technology/spreadsheet…

…-bugs

Spreadsheet bugs

src/app/components/SpreadSheet.vue

@@ -1,8 +1,8 @@
 <script setup>
 
-import {Workbook} from 'ro-crate-excel';
-import {ROCrate} from "ro-crate";
-import {reactive, watch, ref} from "vue";
+import { Workbook } from 'ro-crate-excel';
+import { ROCrate } from "ro-crate";
+import { reactive, watch, ref } from "vue";
 import { ElRow, ElCol, ElDialog, ElCollapse, ElCollapseItem, ElButton } from 'element-plus';
 
 const props = defineProps(['buffer', 'crate']);
@@ -16,7 +16,8 @@ const data = reactive({
     error: []
   },
   wb: {},
-  crate: null
+  crate: null,
+  loading: false
 })
 
 watch(() => props.buffer, (buffer) => {
@@ -28,30 +29,32 @@ watch(() => props.buffer, (buffer) => {
   };
   data.crate = null;
   loadSheet(buffer);
-}, {immediate: true});
+}, { immediate: true });
 
 async function loadSheet(buffer) {
   if (buffer) {
-    const crate = new ROCrate(props.crate, {array: true, link: true});
+    data.loading = true;
+    data.dialogVisible = true;
+    const crate = new ROCrate(props.crate, { array: true, link: true });
     try {
-      const wb = new Workbook({crate});
+      const wb = new Workbook({ crate });
       await wb.loadExcelFromBuffer(buffer, true);
-      data.dialogVisible = true;
       data.log.info = wb.log.info;
       data.log.warning = wb.log.warning;
       data.crate = wb.crate.toJSON();
       scrollTopDialog();
+      data.loading = false;
     } catch (e) {
-      data.dialogVisible = true;
       data.log.error.push(e);
       scrollTopDialog();
+      data.loading = false;
     }
   }
 }
 
 function scrollTopDialog() {
   setTimeout(function () {
-    document.getElementById('spreadsheetDialogTop').scrollIntoView({behavior: 'smooth'});
+    document.getElementById('spreadsheetDialogTop').scrollIntoView({ behavior: 'smooth' });
   }, 100);
 }
 
@@ -75,17 +78,13 @@ function toggleElements() {
 
 </script>
 <template>
-  <el-dialog
-      v-model="data.dialogVisible"
-      title="Loading Metadata"
-      width="50%"
-      :before-close="data.handleClose"
-  >
-    <div class="overflow-x-scroll h-96">
+  <el-dialog v-model="data.dialogVisible" title="Loading Metadata" width="50%" :before-close="data.handleClose">
+    <div class="overflow-x-scroll h-96" v-loading="data.loading">
       <span id="spreadsheetDialogTop"></span>
       <p class="p-2" v-if="data.log.info.length > 0">These metadata fields will be added to your crate, click 'Confirm'
         to continue</p>
-      <p class="p-2" v-else>No metadata could be added, please check your spreadsheet</p>
+      <p class="p-2" v-if="data.log.info.length == 0 && !data.loading">No metadata could be added, please check your
+        spreadsheet</p>
       <el-collapse v-model="activeLog" @change="changeActiveLog">
         <el-collapse-item v-if="data.log.error.length > 0" title="Errors" name="1">
           <el-row v-for="log of data.log.error">

src/app/views/CrateoView.vue

@@ -25,7 +25,7 @@ const navigate = handleRoute((entityId, propertyId) => {
 //const $router = useRouter();
 
 const emit = defineEmits(['load:spreadsheet']);
-const defaultProfile = undefined;
+const defaultProfile = 0;
 
 const data = shallowReactive({
   /** @type {?FileSystemDirectoryHandle} */
@@ -335,14 +335,64 @@ function ready(roc, refresh) {
   const conformsToCrate = roc.rootDataset['conformsTo'] || [];
   const profileIndex = data.profiles.findIndex(p =>
     conformsToCrate.some(ct => (p?.conformsToUri || []).includes(ct['@id'])));
-  data.selectedProfile = profileIndex >= 0 ? profileIndex : 0;
+  console.log('Profile Index:', profileIndex); // Accessing profileIndex here
+
+  if (profileIndex.value >= 0) {
+    const selectedProfile = profileOptions.value[profileIndex.value];
+    data.selectedProfile = selectedProfile?.value || profileOptions.value[0]?.value;
+  } else {
+    // If profileIndex is invalid, fallback only if no savedProfileValue is found
+    if (!savedProfileValue.value) {
+      data.selectedProfile = profileOptions.value[0]?.value;  // Fallback to the first profile if no saved profile exists
+    }
+  }
+
   data.loading = false;
   console.log('ready');
   editor.crate = roc;
   editor.refresh = refresh;
 }
 
 const activeNames = ref(['1']);
+
+import { onMounted, watch } from 'vue';
+
+const savedProfileValue = ref(null); // reactive reference for the saved profile value
+const profileIndex = ref(-1); // default value for profileIndex, set to -1 initially
+
+onMounted(() => {
+  // Retrieve the saved profile from localStorage
+  savedProfileValue.value = localStorage.getItem('selectedProfile');
+
+  // Use the computed profileOptions value to get the options
+  const options = profileOptions.value;
+  // Try to load the saved profile from localStorage if it exists
+  if (savedProfileValue.value) {
+    const savedProfile = options.find(option => option.value === savedProfileValue.value);
+    if (savedProfile) {
+      // If a valid saved profile is found, set it as the selected profile
+      data.selectedProfile = savedProfile.value;
+    } else {
+      // If the saved profile is no longer valid, fallback to profileIndex or default to 0
+      data.selectedProfile = profileIndex.value >= 0 ? options[profileIndex.value]?.value : options[0]?.value;
+    }
+  } else {
+    // No saved profile found in localStorage, fallback to profileIndex or default to 0
+    data.selectedProfile = profileIndex.value >= 0 ? options[profileIndex.value]?.value : options[0]?.value;
+  }
+  // If no profile has been selected and no valid profile is found, default to the first profile
+  if (!data.selectedProfile) {
+    data.selectedProfile = options[0]?.value; // Default to the first profile in options
+  }
+});
+
+// Watch for changes in selectedProfile and update localStorage
+watch(() => data.selectedProfile, (newValue) => {
+  if (newValue) {
+    localStorage.setItem('selectedProfile', newValue);
+  }
+});
+
 </script>
 
 <template>