Data upload improvements

components.d.ts

@@ -9,21 +9,19 @@ declare module 'vue' {
     AboutDialog: typeof import('./src/components/AboutDialog.vue')['default']
     AboutText: typeof import('./src/components/AboutText.vue')['default']
     AExt: typeof import('./src/components/AExt.vue')['default']
+    CreateModifyDialog: typeof import('./src/components/CreateModifyDialog.vue')['default']
     DeleteNetworkDialog: typeof import('./src/components/DeleteNetworkDialog.vue')['default']
     DeleteTableDialog: typeof import('./src/components/DeleteTableDialog.vue')['default']
     DeleteWorkspaceDialog: typeof import('./src/components/DeleteWorkspaceDialog.vue')['default']
     DownloadDialog: typeof import('./src/components/DownloadDialog.vue')['default']
-    NetworkCreateForm: typeof import('./src/components/NetworkCreateForm.vue')['default']
-    NetworkDialog: typeof import('./src/components/NetworkDialog.vue')['default']
-    NetworkMultiCSVUploadForm: typeof import('./src/components/NetworkMultiCSVUploadForm.vue')['default']
+    NetworkCreationTool: typeof import('./src/components/NetworkCreationTool.vue')['default']
     NetworkPanel: typeof import('./src/components/NetworkPanel.vue')['default']
-    NetworkUploadForm: typeof import('./src/components/NetworkUploadForm.vue')['default']
     PermissionsDialog: typeof import('./src/components/PermissionsDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SessionPanel: typeof import('./src/components/SessionPanel.vue')['default']
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']
-    TableDialog: typeof import('./src/components/TableDialog.vue')['default']
+    TableNetworkUploadStepper: typeof import('./src/components/TableNetworkUploadStepper.vue')['default']
     TablePanel: typeof import('./src/components/TablePanel.vue')['default']
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
@@ -69,7 +67,6 @@ declare module 'vue' {
     VRow: typeof import('vuetify/lib')['VRow']
     VScrollXTransition: typeof import('vuetify/lib')['VScrollXTransition']
     VSelect: typeof import('vuetify/lib')['VSelect']
-    VSheet: typeof import('vuetify/lib')['VSheet']
     VSkeletonLoader: typeof import('vuetify/lib')['VSkeletonLoader']
     VSpacer: typeof import('vuetify/lib')['VSpacer']
     VStepper: typeof import('vuetify/lib')['VStepper']

package.json

@@ -29,7 +29,7 @@
     "direct-vuex": "^0.10.4",
     "eslint-import-resolver-alias": "^1.1.2",
     "lodash": "^4.17.21",
-    "multinet": "0.21.13",
+    "multinet": "0.21.14",
     "multinet-components": "^0.0.4",
     "papaparse": "^5.3.0",
     "unplugin-vue-components": "^0.23.0",

src/components/CreateModifyDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-dialog v-model="dialog">
+    <template #activator="{ on }">
+      <v-btn
+        id="add-csv-network"
+        color="blue darken-2"
+        dark
+        :disabled="!userCanEdit"
+        v-on="on"
+      >
+        Upload or Create
+      </v-btn>
+    </template>
+    <v-card v-if="dialogStep === 0">
+      <div class="d-flex flex-column pa-8" style="align-items: center;">
+        <v-btn-toggle
+          v-model="firstChosen"
+          class="my-4"
+          @change="dialogStep += 1"
+        >
+          <v-btn :color="firstChosen === 0 ? 'blue darken-2 white--text' : ''" width="500" height="400">
+            <div class="pa-4 text-center d-flex flex-column justify-center text-body-2">
+              <span class="text-h6">Create Network</span>
+              <br />
+              from existing tables
+            </div>
+          </v-btn>
+          <v-btn :color="firstChosen === 1 ? 'blue darken-2 white--text' : ''" width="500" height="400">
+            <div class="pa-4 text-center d-flex flex-column justify-center text-body-2">
+              <span class="text-h6">Upload File</span>
+              <br />
+              to create a network or table
+            </div>
+          </v-btn>
+        </v-btn-toggle>
+      </div>
+    </v-card>
+    <v-card v-else-if="dialogStep === 1">
+      <NetworkCreationTool
+        v-if="firstChosen === 0"
+        :workspace="workspace"
+        @success="dialog = false"
+        @back="firstChosen = undefined; dialogStep -= 1"
+      />
+      <TableNetworkUploadStepper
+        v-else-if="firstChosen === 1"
+        :workspace="props.workspace"
+        @success="dialog = false"
+        @back="firstChosen = undefined; dialogStep -= 1"
+      />
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import store from '@/store';
+import { computed, ref, watch } from 'vue';
+import NetworkCreationTool from './NetworkCreationTool.vue';
+import TableNetworkUploadStepper from './TableNetworkUploadStepper.vue';
+
+const props = defineProps<{
+  workspace: string;
+}>();
+
+const userCanEdit = computed(() => store.getters.userCanEdit);
+
+const dialog = ref(false);
+const dialogStep = ref(0);
+
+// First step vars
+const firstChosen = ref<number | undefined>(undefined);
+
+// Handle closing of the dialog
+function resetDialog() {
+  // Delay the reset so that the dialog can close first
+  setTimeout(() => {
+    dialogStep.value = 0;
+    firstChosen.value = undefined;
+  }, 250);
+}
+watch(dialog, (val) => {
+  if (val === false) {
+    resetDialog();
+  }
+});
+</script>
+
+<style>
+.theme--light.v-btn--active::before {
+  opacity: 0;
+}
+</style>