Merge pull request #112 from cznethub/109-improve-register-dataset-er…

…ror-handling

[#109] Improve error handling when registering datasets

src/components/register-dataset/cz.register-dataset-dialog.vue

@@ -9,18 +9,28 @@
         What repository is the resource in?
       </v-card-subtitle>
 
-      <v-card-text class="choice-container pb-8 gap-1"
-        :class="{ 'is-xs-small': $vuetify.breakpoint.xs }">
+      <v-card-text
+        class="choice-container pb-8 gap-1"
+        :class="{ 'is-xs-small': $vuetify.breakpoint.xs }"
+      >
         <v-hover>
           <template v-slot:default="{ hover }">
-            <v-card class="transition-swing"
+            <v-card
+              class="transition-swing"
               :to="{ path: 'register' }"
-              :class="`elevation-${ hover ? 2 : 0 }`" outlined>
+              :class="`elevation-${hover ? 2 : 0}`"
+              outlined
+            >
               <v-card-text class="d-flex align-items-center gap-1">
-                <v-icon large color="#87AAAA">mdi-book-plus</v-icon>
+                <v-icon large color="#87AAAA">mdi-link-plus</v-icon>
                 <div>
-                  <div class="text-overline mb-2 has-text-black">SUPPORTED REPOSITORY</div>
-                  <div class="text-body-1">Register an existing dataset from HydroShare, EarthChem, or Zenodo</div>
+                  <div class="text-overline mb-2 has-text-black">
+                    SUPPORTED REPOSITORY
+                  </div>
+                  <div class="text-body-1">
+                    Register an existing dataset from HydroShare, EarthChem, or
+                    Zenodo
+                  </div>
                 </div>
               </v-card-text>
             </v-card>
@@ -29,15 +39,26 @@
 
         <v-hover>
           <template v-slot:default="{ hover }">
-            <v-card class="transition-swing"
-              :class="`elevation-${ hover ? 2 : 0 }`" outlined role="button" ripple>
+            <v-card
+              class="transition-swing"
+              :class="`elevation-${hover ? 2 : 0}`"
+              outlined
+              role="button"
+              ripple
+            >
               <v-card-text
                 class="d-flex align-items-center gap-1"
-                @click="close(); submitTo(externalRepoMetadata)">
-                <v-icon large color="#C37B89">mdi-link-plus</v-icon>
+                @click="
+                  close();
+                  submitTo(externalRepoMetadata);
+                "
+              >
+                <v-icon large color="#C37B89">mdi-book-plus</v-icon>
                 <div>
                   <div class="text-overline mb-2 has-text-black">OTHER</div>
-                  <div class="text-body-1">Register a dataset from a different repository</div>
+                  <div class="text-body-1">
+                    Register a dataset from a different repository
+                  </div>
                 </div>
               </v-card-text>
             </v-card>
@@ -57,45 +78,46 @@
 
 <script lang="ts">
 import { Component } from "vue-property-decorator";
-import { repoMetadata } from '@/components/submit/constants'
-import { IRepository } from '../submissions/types'
-import { mixins } from 'vue-class-component'
-import { ActiveRepositoryMixin } from '@/mixins/activeRepository.mixin'
+import { repoMetadata } from "@/components/submit/constants";
+import { IRepository } from "../submissions/types";
+import { mixins } from "vue-class-component";
+import { ActiveRepositoryMixin } from "@/mixins/activeRepository.mixin";
 
 @Component({
   name: "cz-register-dataset-dialog",
   components: {},
 })
-export default class CzRegisterDatasetDialog extends mixins<ActiveRepositoryMixin>(ActiveRepositoryMixin) {
-  public active = false
+export default class CzRegisterDatasetDialog extends mixins<ActiveRepositoryMixin>(
+  ActiveRepositoryMixin
+) {
+  public active = false;
 
   protected get repoCollection(): IRepository[] {
-    return Object.keys(repoMetadata)
-      .map(r => repoMetadata[r])
+    return Object.keys(repoMetadata).map((r) => repoMetadata[r]);
   }
 
   protected get supportedRepoMetadata() {
-    return this.repoCollection.filter(r => !r.isExternal && r.isSupported)
+    return this.repoCollection.filter((r) => !r.isExternal && r.isSupported);
   }
 
   protected get externalRepoMetadata() {
-    return this.repoCollection.find(r => r.isExternal)
+    return this.repoCollection.find((r) => r.isExternal);
   }
 
   protected close() {
-    this.$emit('close')
+    this.$emit("close");
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .choice-container {
-    display: grid;
-    grid-template-columns: auto auto;
-    
-    &.is-xs-small {
-      display: flex;
-      flex-direction: column;
-    }
+.choice-container {
+  display: grid;
+  grid-template-columns: auto auto;
+
+  &.is-xs-small {
+    display: flex;
+    flex-direction: column;
   }
+}
 </style>

src/components/register-dataset/cz.register-dataset.vue

@@ -169,11 +169,12 @@
             icon="mdi-pencil-off"
             elevation="2"
           >
-            This resource is published and is not editable in the Data Submission
-            Portal. If you need to modify this resource once registered, navigate to the resource in
-            the repository where it is hosted and modify it there (if possible). You
-            can refresh the metadata for this resource by clicking the "Update Record"
-            button on the My Submissions page.
+            This resource is published and is not editable in the Data
+            Submission Portal. If you need to modify this resource once
+            registered, navigate to the resource in the repository where it is
+            hosted and modify it there (if possible). You can refresh the
+            metadata for this resource by clicking the "Update Record" button on
+            the My Submissions page.
           </v-alert>
 
           <v-card elevation="2" outlined class="mb-6">
@@ -189,7 +190,7 @@
                     {{ submission.title }}
                   </td>
                 </tr>
-                <tr v-if="submission.authors.length">
+                <tr v-if="submission.authors && submission.authors.length">
                   <th class="pr-4 body-2">Authors:</th>
                   <td>{{ submission.authors.join(" | ") }}</td>
                 </tr>
@@ -379,11 +380,11 @@ export default class CzRegisterDataset extends mixins<ActiveRepositoryMixin>(
     return this.url; // default
   }
 
-  @Watch('step')
+  @Watch("step")
   onStepChange(currentStep, previousStep) {
     if (currentStep === 2) {
       // @ts-ignore
-      this.$refs.txtIdentifier?.focus()
+      this.$refs.txtIdentifier?.focus();
     }
   }
 
@@ -431,11 +432,10 @@ export default class CzRegisterDataset extends mixins<ActiveRepositoryMixin>(
       this.$router.push({
         name: "submissions",
       });
-    }
-    catch(e) {
+    } catch (e) {
       this.isRegistering = false;
       CzNotification.toast({
-        message: 'Failed to register dataset',
+        message: "Failed to register dataset",
         type: "error",
       });
     }
@@ -487,21 +487,22 @@ export default class CzRegisterDataset extends mixins<ActiveRepositoryMixin>(
           if (this.submission.repository === EnumRepositoryKeys.earthchem) {
             this.apiSubmission.community = "CZNet";
           }
-        } else if (response === 403) {
-          // Repository was unauthorized
+        }
+        // Repository was unauthorized
+        else if (response === 401) {
           this.wasUnauthorized = true;
 
           // Try again when user has authorized the repository
           this.authorizedSubject = Repository.authorized$.subscribe(
-            async (repositoryKey: EnumRepositoryKeys) => {
+            async (_repositoryKey: EnumRepositoryKeys) => {
               await this._readDataset();
             }
           );
         }
       }
-      this.isFetching = false;
     } catch (e) {
       console.log(e);
+    } finally {
       this.isFetching = false;
     }
   }