From f36e510ff6464afdfd7caac490a70b85faa781c3 Mon Sep 17 00:00:00 2001
From: tholulomo <fatexjames@yahoo.com>
Date: Tue, 29 Oct 2024 15:07:50 -0400
Subject: [PATCH 1/3] FEAT(#508): Dataset curation fixes and gallery updates

---
 app/src/pages/explorer/curate/sdd/SddForm.vue | 1333 +++++++++++------
 app/src/pages/explorer/dataset/Dataset.vue    |   11 +-
 .../pages/explorer/dataset/DatasetGallery.vue |  184 ++-
 3 files changed, 1004 insertions(+), 524 deletions(-)

diff --git a/app/src/pages/explorer/curate/sdd/SddForm.vue b/app/src/pages/explorer/curate/sdd/SddForm.vue
index a8b36d9a..afe099bd 100644
--- a/app/src/pages/explorer/curate/sdd/SddForm.vue
+++ b/app/src/pages/explorer/curate/sdd/SddForm.vue
@@ -1,253 +1,503 @@
 <template>
-<div>
-<div>
   <div>
-    <CurateNavBar active="Direct Upload with SDD" :navRoutes="navRoutes"/>
-  </div>
-  <div class="curate">
     <div>
-      <div class="section_loader" v-if="loading">
-        <spinner :loading="loading" text='Loading Dataset'/>
+      <div>
+        <CurateNavBar
+          :active="`Direct Upload with SDD > ${generatedUUID}`"
+          :navRoutes="navRoutes"
+        />
       </div>
-    <div v-else @click="disableDropdownRender">
-      <md-card style="margin: 10px" >
-        <form class="modal-content" action="" method="post"
-          enctype="multipart/form-data"
-          upload_type="http://www.w3.org/ns/dcat#Dataset">
-        <md-steppers class="form__stepper" :md-active-step.sync="active" md-linear>
+      <div class="curate">
+        <div>
+          <div class="section_loader" v-if="loading">
+            <spinner :loading="loading" text="Loading Dataset" />
+          </div>
+          <div v-else @click="disableDropdownRender">
+            <md-card style="margin: 10px">
+              <form
+                class="modal-content"
+                action=""
+                method="post"
+                enctype="multipart/form-data"
+                upload_type="http://www.w3.org/ns/dcat#Dataset"
+              >
+                <md-steppers
+                  class="form__stepper"
+                  :md-active-step.sync="active"
+                  md-linear
+                >
+                  <md-step
+                    id="first"
+                    md-label="Upload files"
+                    :md-error="invalid.first"
+                  >
+                    <div style="margin: 20px">
+                      <md-field style="max-width: 100%">
+                        <label
+                          >DOI of related publication (e.g., 10.1000/000)</label
+                        >
+                        <md-input v-model="doi" @change="lookupDoi"></md-input>
+                      </md-field>
 
-          <md-step id="first" md-label="Upload files" :md-error="invalid.first">
-            <div style="margin: 20px">
-            <md-field style="max-width: 100%;">
-              <label>DOI of related publication (e.g., 10.1000/000)</label>
-              <md-input v-model="doi" @change="lookupDoi"></md-input>
-            </md-field>
+                      <FileInput @files-dropped="addDistr">
+                        <label for="file-distr-input">
+                          <div class="form__file-input">
+                            <div
+                              class="md-field md-theme-default md-required md-has-file"
+                              :class="{ 'md-invalid': invalid['first'] }"
+                            >
+                              <md-icon>attach_file</md-icon>
+                              <label for="file-distr-input"
+                                >Select files to upload for this dataset</label
+                              >
+                              <div
+                                class="md-file"
+                                multiple
+                                isinvalidvalue="false"
+                              >
+                                <input
+                                  type="file"
+                                  id="file-distr-input"
+                                  multiple
+                                  @change="onInputChange"
+                                />
+                              </div>
+                              <span class="md-error" style="margin-left: 40px"
+                                >At least one distribution is required</span
+                              >
+                            </div>
+                          </div>
+                        </label>
+                      </FileInput>
 
-            <FileInput @files-dropped="addDistr">
-              <label for="file-distr-input">
-                <div class="form__file-input">
-                  <div class="md-field md-theme-default md-required md-has-file" :class="{ 'md-invalid': invalid['first'] }">
-                    <md-icon>attach_file</md-icon>
-                    <label for="file-distr-input">Select files to upload for this dataset</label>
-                    <div class="md-file" multiple isinvalidvalue=false>
-                      <input type="file" id="file-distr-input" multiple @change="onInputChange"/>
-                    </div>
-                    <span class="md-error" style="margin-left:40px">At least one distribution is required</span>
-                  </div>
-                </div>
-              </label>
-            </FileInput>
+                      <div
+                        class="u--margin-posmd"
+                        v-show="optionalChaining(() => distrFiles.length)"
+                      >
+                        <h4
+                          v-if="optionalChaining(() => oldDistributions.length)"
+                        >
+                          New file(s) to upload
+                        </h4>
+                        <div class="md-layout">
+                          <md-list
+                            class="md-layout utility-transparentbg md-theme-default"
+                          >
+                            <FilePreview
+                              v-for="file in distrFiles"
+                              :key="file.id"
+                              :file="file"
+                              tag="div"
+                              classname="md-layout-item"
+                              @remove="removeDistr"
+                            />
+                          </md-list>
+                        </div>
+                      </div>
 
-            <div class="u--margin-posmd" v-show="(optionalChaining(() => distrFiles.length))">
-              <h4 v-if="(optionalChaining(() => oldDistributions.length))">
-                New file(s) to upload
-              </h4>
-              <div class="md-layout">
-                <md-list class="md-layout utility-transparentbg md-theme-default">
-                <FilePreview v-for="file in distrFiles" :key="file.id" :file="file"
-                  tag="div" classname="md-layout-item" @remove="removeDistr" />
-                </md-list>
-              </div>
-            </div>
+                      <md-divider
+                        v-if="
+                          optionalChaining(() => distrFiles.length) &&
+                          optionalChaining(() => oldDistributions.length)
+                        "
+                        class="u_width--max"
+                        style="border-style: solid"
+                      ></md-divider>
 
-            <md-divider v-if="((optionalChaining(() => distrFiles.length)) && (optionalChaining(() => oldDistributions.length)))"
-              class="u_width--max" style="border-style: solid"></md-divider>
+                      <div
+                        class="u--margin-posmd"
+                        v-if="optionalChaining(() => oldDistributions.length)"
+                      >
+                        <h4>Previously uploaded file(s)</h4>
+                        <i>
+                          These files are already in MaterialsMine. You do not
+                          need to be re-upload them
+                        </i>
+                        <div class="md-layout">
+                          <md-list
+                            class="md-layout utility-transparentbg md-theme-default"
+                          >
+                            <div
+                              v-for="file in oldDistributions"
+                              :key="`${file.uri}_old`"
+                              classname="md-layout-item"
+                            >
+                              <FilePreview
+                                :file="file"
+                                tag="div"
+                                :customActions="true"
+                                :showRemove="false"
+                              >
+                                <template #custom_actions>
+                                  <md-button
+                                    id="downloadFile"
+                                    class="md-icon-button"
+                                    :href="optionalChaining(() => file.uri)"
+                                    download
+                                  >
+                                    <md-tooltip> Download file </md-tooltip>
+                                    <md-icon>download</md-icon>
+                                  </md-button>
+                                  <md-button
+                                    id="deleteFile"
+                                    class="md-icon-button"
+                                    @click.native.prevent="
+                                      confirmDeletion(file)
+                                    "
+                                  >
+                                    <md-tooltip> Delete file </md-tooltip>
+                                    <md-icon>delete</md-icon>
+                                  </md-button>
+                                </template>
+                              </FilePreview>
+                            </div>
+                          </md-list>
+                        </div>
+                      </div>
 
-            <div class="u--margin-posmd" v-if="(optionalChaining(() => oldDistributions.length))">
-              <h4>
-                Previously uploaded file(s)
-              </h4>
-              <i> These files are already in MaterialsMine. You do not need to be re-upload them </i>
-              <div class="md-layout">
-                <md-list class="md-layout utility-transparentbg md-theme-default">
-                <div v-for="file in oldDistributions" :key="`${file.uri}_old`" classname="md-layout-item">
-                  <FilePreview :file="file" tag="div" :customActions="true" :showRemove="false">
-                    <template #custom_actions>
-                      <md-button id="downloadFile" class="md-icon-button" :href="(optionalChaining(() => file.uri))" download>
-                        <md-tooltip> Download file </md-tooltip>
-                        <md-icon>download</md-icon>
-                      </md-button>
-                      <md-button id="deleteFile" class="md-icon-button" @click.native.prevent="confirmDeletion(file)">
-                        <md-tooltip> Delete file </md-tooltip>
-                        <md-icon>delete</md-icon>
-                      </md-button>
-                    </template>
-                  </FilePreview>
-                </div>
-                </md-list>
-              </div>
-            </div>
+                      <FileInput @files-dropped="previewFile()">
+                        <label for="file-depict-input">
+                          <div class="form__file-input">
+                            <div class="md-field md-theme-default md-has-file">
+                              <md-icon>attach_file</md-icon>
+                              <label for="file-depict-input"
+                                >Select an image to use as a cover for the
+                                dataset (optional)</label
+                              >
+                              <div
+                                class="md-file"
+                                multiple
+                                isinvalidvalue="false"
+                              >
+                                <input
+                                  type="file"
+                                  id="file-depict-input"
+                                  multiple
+                                  @change="previewFile()"
+                                  accept="image/*"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+                      </FileInput>
 
-            <FileInput @files-dropped="previewFile()">
-              <label for="file-depict-input">
-                <div class="form__file-input">
-                  <div class="md-field md-theme-default md-has-file">
-                    <md-icon>attach_file</md-icon>
-                    <label for="file-depict-input">Select an image to use as a cover for the dataset (optional)</label>
-                    <div class="md-file" multiple isinvalidvalue=false>
-                      <input type="file" id="file-depict-input" multiple @change="previewFile()" accept="image/*"/>
+                      <div class="md-layout md-gutter u--margin-posmd">
+                        <span>
+                          <div
+                            class="u--margin-posmd u--margin-rightmd u--margin-leftsm"
+                            v-if="oldDepiction"
+                          >
+                            <h4>Previously uploaded thumbnail</h4>
+                            <figure>
+                              <img
+                                v-if="oldDepiction.accessUrl"
+                                :src="oldDepiction.accessUrl"
+                                alt="Image preview..."
+                                style="height: 150px"
+                              />
+                              <figcaption
+                                v-if="oldDepiction.status === 'delete'"
+                              >
+                                Will be deleted when edits are submitted
+                              </figcaption>
+                            </figure>
+                            <md-button
+                              id="downloadFile"
+                              class="md-icon-button"
+                              :href="oldDepiction.accessUrl"
+                              download
+                            >
+                              <md-tooltip> Download file </md-tooltip>
+                              <md-icon>download</md-icon>
+                            </md-button>
+                            <md-button
+                              v-if="oldDepiction.status === 'complete'"
+                              id="deleteFile"
+                              class="md-icon-button"
+                              @click.native.prevent="
+                                oldDepiction.status = 'delete'
+                              "
+                            >
+                              <md-tooltip> Delete file </md-tooltip>
+                              <md-icon>delete</md-icon>
+                            </md-button>
+                            <md-button
+                              v-if="oldDepiction.status === 'delete'"
+                              id="undoDelete"
+                              class="md-icon-button"
+                              @click.native.prevent="
+                                oldDepiction.status = 'complete'
+                              "
+                            >
+                              <md-tooltip> Undo Delete </md-tooltip>
+                              <md-icon>restore_from_trash</md-icon>
+                            </md-button>
+                          </div>
+                        </span>
+                        <span>
+                          <div
+                            id="depictWrapper"
+                            class="u--margin-posmd justify-center"
+                            style="visibility: hidden; height: 200px"
+                          >
+                            <h4 v-if="oldDepiction">
+                              Replacement thumbnail<span v-if="depiction"
+                                >:
+                                {{
+                                  optionalChaining(() => depiction.name)
+                                }}</span
+                              >
+                            </h4>
+                            <figure>
+                              <img
+                                id="depictImg"
+                                src=""
+                                alt="Image preview..."
+                                style="height: 150px"
+                              />
+                              <figcaption v-if="oldDepiction">
+                                This original thumbnail will be deleted and
+                                replaced by this image
+                              </figcaption>
+                            </figure>
+                            <md-button
+                              @click="removeImage"
+                              type="button"
+                              class="close md-raised"
+                              >Remove image</md-button
+                            >
+                          </div>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              </label>
-            </FileInput>
-
-            <div class="md-layout md-gutter u--margin-posmd">
-              <span>
-                <div class="u--margin-posmd u--margin-rightmd u--margin-leftsm" v-if="oldDepiction">
-                  <h4 >
-                    Previously uploaded thumbnail
-                  </h4>
-                  <figure>
-                    <img v-if="oldDepiction.accessUrl" :src="oldDepiction.accessUrl" alt="Image preview..." style="height:150px">
-                    <figcaption v-if="oldDepiction.status === 'delete'">Will be deleted when edits are submitted</figcaption>
-                  </figure>
-                  <md-button id="downloadFile" class="md-icon-button" :href="oldDepiction.accessUrl" download>
-                    <md-tooltip> Download file </md-tooltip>
-                    <md-icon>download</md-icon>
-                  </md-button>
-                  <md-button v-if="oldDepiction.status === 'complete'" id="deleteFile" class="md-icon-button"
-                    @click.native.prevent="oldDepiction.status = 'delete'">
-                    <md-tooltip> Delete file </md-tooltip>
-                    <md-icon>delete</md-icon>
-                  </md-button>
-                  <md-button v-if="oldDepiction.status === 'delete'" id="undoDelete" class="md-icon-button"
-                    @click.native.prevent="oldDepiction.status = 'complete'">
-                    <md-tooltip> Undo Delete </md-tooltip>
-                    <md-icon>restore_from_trash</md-icon>
-                  </md-button>
-                </div>
-              </span>
-              <span>
-              <div id="depictWrapper" class="u--margin-posmd justify-center" style="visibility: hidden; height:200px">
-                <h4 v-if="oldDepiction">
-                  Replacement thumbnail<span v-if="depiction">: {{(optionalChaining(() => depiction.name))}}</span>
-                </h4>
-              <figure>
-                <img id="depictImg" src="" alt="Image preview..." style="height:150px">
-                <figcaption v-if="oldDepiction">This original thumbnail will be deleted and replaced by this image</figcaption>
-              </figure>
-              <md-button @click="removeImage" type="button" class="close md-raised">Remove image</md-button>
-              </div>
-              </span>
-            </div>
-
-            </div>
-            <div class="md-card-actions md-alignment-right chart_editor__right-view ">
-              <md-button
-                @click="goToStep('first', 'second')"
-                class="md-theme-default md-button_next">
-                Next
-              </md-button>
-            </div>
-          </md-step>
-
-          <md-step id="second" md-label="Provide additional info" :md-error="invalid.second">
-            <div class="md-layout">
-            <!---------- General Info fields ---------->
-            <md-content class="u_width--max" style="margin: 20px">
-              <div class="md-headline" style="margin-top: 10px">
-                General Information
-              </div>
-              <md-field style="max-width: 100%;" :class="{ 'md-invalid': (invalid['second'] && !dataset.title) }">
-                <label>Title</label>
-                <md-input v-model="dataset.title" required></md-input>
-                <span class="md-error">Title required</span>
-              </md-field>
-
-              <div class="md-subheading" style="margin-top: 40px;">Contact Point</div>
-              <div class="md-layout md-gutter" style="align-items: center">
+                    <div
+                      class="md-card-actions md-alignment-right chart_editor__right-view"
+                    >
+                      <md-button
+                        @click="goToStep('first', 'second')"
+                        class="md-theme-default md-button_next"
+                      >
+                        Next
+                      </md-button>
+                    </div>
+                  </md-step>
 
-                <div class="md-layout-item md-size-30 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med">
-                  <md-field :class="{ 'md-invalid': ((invalid['second'] && (optionalChaining(() => !dataset.contactPoint['@id']))) || invalid.orcid) }">
-                    <label style="font-size:14px">ORCID Identifier (e.g., 0000-0001-2345-6789)</label>
-                    <md-input v-model="orcidId" required @change="lookupOrcid" ></md-input>
-                    <span class="md-error" v-if="!invalid.orcid">ORCID ID required</span>
-                    <span class="md-error" v-if="invalid.orcid">Invalid ORCID ID</span>
-                  </md-field>
-                </div>
+                  <md-step
+                    id="second"
+                    md-label="Provide additional info"
+                    :md-error="invalid.second"
+                  >
+                    <div class="md-layout">
+                      <!---------- General Info fields ---------->
+                      <md-content class="u_width--max" style="margin: 20px">
+                        <div class="md-headline" style="margin-top: 10px">
+                          General Information
+                        </div>
+                        <md-field
+                          style="max-width: 100%"
+                          :class="{
+                            'md-invalid': invalid['second'] && !dataset.title
+                          }"
+                        >
+                          <label>Title</label>
+                          <md-input v-model="dataset.title" required></md-input>
+                          <span class="md-error">Title required</span>
+                        </md-field>
 
-                <div class="md-layout-item md-size-25 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med">
-                  <md-field :class="{ 'md-invalid': (invalid['second'] && !dataset.contactPoint.cpEmail) }" class="u_width--max">
-                    <label>Email</label>
-                    <md-input v-model="dataset.contactPoint.cpEmail" required></md-input>
-                    <span class="md-error">Valid email required</span>
-                  </md-field>
-                </div>
+                        <div class="md-subheading" style="margin-top: 40px">
+                          Contact Point
+                        </div>
+                        <div
+                          class="md-layout md-gutter"
+                          style="align-items: center"
+                        >
+                          <div
+                            class="md-layout-item md-size-30 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med"
+                          >
+                            <md-field
+                              :class="{
+                                'md-invalid':
+                                  (invalid['second'] &&
+                                    optionalChaining(
+                                      () => !dataset.contactPoint['@id']
+                                    )) ||
+                                  invalid.orcid
+                              }"
+                            >
+                              <label style="font-size: 14px"
+                                >ORCID Identifier (e.g.,
+                                0000-0001-2345-6789)</label
+                              >
+                              <md-input
+                                v-model="orcidId"
+                                required
+                                @change="lookupOrcid"
+                              ></md-input>
+                              <span class="md-error" v-if="!invalid.orcid"
+                                >ORCID ID required</span
+                              >
+                              <span class="md-error" v-if="invalid.orcid"
+                                >Invalid ORCID ID</span
+                              >
+                            </md-field>
+                          </div>
 
-                <div class="md-layout-item md-size-20 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med">
-                  <md-field :class="{ 'md-invalid': (invalid['second'] && !dataset.contactPoint.firstName) }">
-                    <label>First name</label>
-                    <md-input v-model="dataset.contactPoint.firstName" required></md-input>
-                    <span class="md-error">Contact point required</span>
-                  </md-field>
-                </div>
+                          <div
+                            class="md-layout-item md-size-25 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med"
+                          >
+                            <md-field
+                              :class="{
+                                'md-invalid':
+                                  invalid['second'] &&
+                                  !dataset.contactPoint.cpEmail
+                              }"
+                              class="u_width--max"
+                            >
+                              <label>Email</label>
+                              <md-input
+                                v-model="dataset.contactPoint.cpEmail"
+                                required
+                              ></md-input>
+                              <span class="md-error">Valid email required</span>
+                            </md-field>
+                          </div>
 
-                <div class="md-layout-item md-size-20 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med">
-                  <md-field :class="{ 'md-invalid': (invalid['second'] && !dataset.contactPoint.lastName) }">
-                    <label>Last name</label>
-                    <md-input v-model="dataset.contactPoint.lastName" required></md-input>
-                    <span class="md-error">Contact point required</span>
-                  </md-field>
-                </div>
-              </div>
+                          <div
+                            class="md-layout-item md-size-20 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med"
+                          >
+                            <md-field
+                              :class="{
+                                'md-invalid':
+                                  invalid['second'] &&
+                                  !dataset.contactPoint.firstName
+                              }"
+                            >
+                              <label>First name</label>
+                              <md-input
+                                v-model="dataset.contactPoint.firstName"
+                                required
+                              ></md-input>
+                              <span class="md-error"
+                                >Contact point required</span
+                              >
+                            </md-field>
+                          </div>
 
-              <div style="margin: 40px; text-align: center;">
-                Don't have an ORCID iD?
-                <a href="https://orcid.org/" target="_blank">Create one here</a>
-              </div>
+                          <div
+                            class="md-layout-item md-size-20 md-xsmall-size-100 md-medium-size-50 u_margin-bottom-med"
+                          >
+                            <md-field
+                              :class="{
+                                'md-invalid':
+                                  invalid['second'] &&
+                                  !dataset.contactPoint.lastName
+                              }"
+                            >
+                              <label>Last name</label>
+                              <md-input
+                                v-model="dataset.contactPoint.lastName"
+                                required
+                              ></md-input>
+                              <span class="md-error"
+                                >Contact point required</span
+                              >
+                            </md-field>
+                          </div>
+                        </div>
 
-              <md-field class="u_width--max" :class="{ 'md-invalid': (invalid['second'] && !dataset.description) }">
-                <label>Text Description</label>
-                <md-textarea v-model="dataset.description" required></md-textarea>
-                <span class="md-error">Description required</span>
-              </md-field>
+                        <div style="margin: 40px; text-align: center">
+                          Don't have an ORCID iD?
+                          <a href="https://orcid.org/" target="_blank"
+                            >Create one here</a
+                          >
+                        </div>
 
-              <div>
-                <label>Associated Organization (e.g., name of university)</label>
-                <div>
-                  <md-chip md-deletable class="u_margin-bottom-small" v-for="(element, i) in dataset.organization"
-                    @md-delete="deleteOrg(dataset.organization, i)" :key="`org_${i}`">{{ element.name }}
-                  </md-chip>
-                </div>
-                <md-field md-dense class="u--margin-none">
-                    <md-input
-                      v-model="searchKeywordOrg"
-                      name="searchKeywordOrg"
-                      id="searchKeywordOrg"
-                      placeholder="Search Organizations"
-                    ></md-input>
-                    <md-icon>search</md-icon>
-                  </md-field>
-                <template v-if="!!organizations.length && showDropdown">
-                  <ul
-                    class="search-dropdown-menu-plain"
-                    :style="setDropdownPosition()"
-                  >
-                    <li
-                      v-for="(item, index) in organizations"
-                      :key="index"
-                      @click.prevent="selectOrg(item)"
-                    >
-                      <span>
-                        {{ item.name }}
-                        <span v-if="(optionalChaining(() => item.addresses[0].city))
-                          || (optionalChaining(() => item.country.country_code))">
-                          ({{ (optionalChaining(() => item.addresses[0].city)) }},
-                          {{ (optionalChaining(() => item.country.country_code)) }})
-                        </span>
-                      </span>
-                    </li>
-                  </ul>
-                </template>
-              </div>
+                        <md-field
+                          class="u_width--max"
+                          :class="{
+                            'md-invalid':
+                              invalid['second'] && !dataset.description
+                          }"
+                        >
+                          <label>Text Description</label>
+                          <md-textarea
+                            v-model="dataset.description"
+                            required
+                          ></md-textarea>
+                          <span class="md-error">Description required</span>
+                        </md-field>
 
-            </md-content>
+                        <div>
+                          <label
+                            >Associated Organization (e.g., name of
+                            university)</label
+                          >
+                          <div>
+                            <md-chip
+                              md-deletable
+                              class="u_margin-bottom-small"
+                              v-for="(element, i) in dataset.organization"
+                              @md-delete="deleteOrg(dataset.organization, i)"
+                              :key="`org_${i}`"
+                              >{{ element.name }}
+                            </md-chip>
+                          </div>
+                          <md-field md-dense class="u--margin-none">
+                            <md-input
+                              v-model="searchKeywordOrg"
+                              name="searchKeywordOrg"
+                              id="searchKeywordOrg"
+                              placeholder="Search Organizations"
+                            ></md-input>
+                            <md-icon>search</md-icon>
+                          </md-field>
+                          <template
+                            v-if="!!organizations.length && showDropdown"
+                          >
+                            <ul
+                              class="search-dropdown-menu-plain"
+                              :style="setDropdownPosition()"
+                            >
+                              <li
+                                v-for="(item, index) in organizations"
+                                :key="index"
+                                @click.prevent="selectOrg(item)"
+                              >
+                                <span>
+                                  {{ item.name }}
+                                  <span
+                                    v-if="
+                                      optionalChaining(
+                                        () => item.addresses[0].city
+                                      ) ||
+                                      optionalChaining(
+                                        () => item.country.country_code
+                                      )
+                                    "
+                                  >
+                                    ({{
+                                      optionalChaining(
+                                        () => item.addresses[0].city
+                                      )
+                                    }},
+                                    {{
+                                      optionalChaining(
+                                        () => item.country.country_code
+                                      )
+                                    }})
+                                  </span>
+                                </span>
+                              </li>
+                            </ul>
+                          </template>
+                        </div>
+                      </md-content>
 
-            <!-- <md-divider class="u_width--max" style="border-style: solid"></md-divider> -->
+                      <!-- <md-divider class="u_width--max" style="border-style: solid"></md-divider> -->
 
-            <!---------- TODO: Contributor fields -------->
-            <!-- <md-content style="width: 100%; margin: 20px">
+                      <!---------- TODO: Contributor fields -------->
+                      <!-- <md-content style="width: 100%; margin: 20px">
               <div class="md-headline" style="margin-top: 10px; margin-bottom: 10px">
                 Contributors
               </div>
@@ -280,172 +530,288 @@
 
             <md-divider style="border-style: solid" width="100%"></md-divider> -->
 
-            <!-- -------- Publication Info fields -------- -->
-            <md-content class="u_width--max" style="margin: 20px">
-              <!-- <div class="md-headline" style="margin-top: 10px; margin-bottom: 10px">
+                      <!-- -------- Publication Info fields -------- -->
+                      <md-content class="u_width--max" style="margin: 20px">
+                        <!-- <div class="md-headline" style="margin-top: 10px; margin-bottom: 10px">
                 Publication Information
               </div> -->
-              <div class="u_width--max">
-                <div class="md-layout md-gutter">
-                  <div class="md-layout-item md-size-50">
-                    <label>Date Published</label>
-                    <md-field>
-                      <md-input v-model="dataset.datePub['@value']" type="date"></md-input>
-                    </md-field>
-                  </div>
-                </div>
-              </div>
-            </md-content>
+                        <div class="u_width--max">
+                          <div class="md-layout md-gutter">
+                            <div class="md-layout-item md-size-50">
+                              <label>Date Published</label>
+                              <md-field>
+                                <md-input
+                                  v-model="dataset.datePub['@value']"
+                                  type="date"
+                                ></md-input>
+                              </md-field>
+                            </div>
+                          </div>
+                        </div>
+                      </md-content>
 
-            <md-card-actions class="u_width--max u_height--max" style="margin: 20px; padding-top:5rem;">
-              <div class="md-layout md-gutter ">
-                <div class="md-layout-item md-size-10 md-xsmall-size-35">
-                  <md-button
-                    @click="goToStep('second', 'first')"
-                    class="md-theme-default md-button_prev">
-                    Previous
-                  </md-button>
-                </div>
-                <div class="md-layout-item md-size-80 md-small-size-70 md-xsmall-size-30">
-                </div>
-                <div class="md-layout-item md-size-10 md-small-size-20 md-xsmall-size-35">
-                  <md-button
-                    @click="goToStep('second', 'third')"
-                    class="md-theme-default md-button_next">
-                    Next
-                  </md-button>
-                </div>
-              </div>
-            </md-card-actions>
-            <div class="u_width--max u_height--max">
-              <div v-if="invalid['second'] && !secondPageFilled" class="md-error" style="color:red; text-align: right">
-                Check for errors in required fields
-              </div>
-            </div>
-            </div>
-          </md-step>
+                      <md-card-actions
+                        class="u_width--max u_height--max"
+                        style="margin: 20px; padding-top: 5rem"
+                      >
+                        <div class="md-layout md-gutter">
+                          <div
+                            class="md-layout-item md-size-10 md-xsmall-size-35"
+                          >
+                            <md-button
+                              @click="goToStep('second', 'first')"
+                              class="md-theme-default md-button_prev"
+                            >
+                              Previous
+                            </md-button>
+                          </div>
+                          <div
+                            class="md-layout-item md-size-80 md-small-size-70 md-xsmall-size-30"
+                          ></div>
+                          <div
+                            class="md-layout-item md-size-10 md-small-size-20 md-xsmall-size-35"
+                          >
+                            <md-button
+                              @click="goToStep('second', 'third')"
+                              class="md-theme-default md-button_next"
+                            >
+                              Next
+                            </md-button>
+                          </div>
+                        </div>
+                      </md-card-actions>
+                      <div class="u_width--max u_height--max">
+                        <div
+                          v-if="invalid['second'] && !secondPageFilled"
+                          class="md-error"
+                          style="color: red; text-align: right"
+                        >
+                          Check for errors in required fields
+                        </div>
+                      </div>
+                    </div>
+                  </md-step>
 
-          <md-step id="third" md-label="Confirm and Submit">
-            <md-card-header>
-              <md-card-header-text>
-                <div class="md-title">Form Results</div>
-                <div class="md-subhead" v-if="depiction">Cover Image: {{depiction.name}}</div>
-                <div class="md-subhead" v-else-if="oldDepiction && (oldDepiction.status !== 'delete')">
-                  Cover Image: {{oldDepiction.originalname}}
-                </div>
-              </md-card-header-text>
+                  <md-step id="third" md-label="Confirm and Submit">
+                    <md-card-header>
+                      <md-card-header-text>
+                        <div class="md-title">Form Results</div>
+                        <div class="md-subhead" v-if="depiction">
+                          Cover Image: {{ depiction.name }}
+                        </div>
+                        <div
+                          class="md-subhead"
+                          v-else-if="
+                            oldDepiction && oldDepiction.status !== 'delete'
+                          "
+                        >
+                          Cover Image: {{ oldDepiction.originalname }}
+                        </div>
+                      </md-card-header-text>
 
-              <md-card-media md-big v-show="depiction" style="height:0px">
-                <span id="depictWrapperMini" style="visibility: hidden">
-                  <figure>
-                    <img id="depictImgMini" src="" alt="Image preview">
-                    <figcaption v-if="oldDepiction">New thumbnail</figcaption>
-                  </figure>
-                </span>
-              </md-card-media>
-              <md-card-media md-big v-if="oldDepiction" style="height:0px">
-                <span>
-                  <figure>
-                    <img :src="oldDepiction.accessUrl" alt="Image preview">
-                    <figcaption v-if="oldDepiction.status==='delete' || !!depiction">
-                      Old thumbnail. Will be deleted when edits are submitted</figcaption>
-                  </figure>
-                </span>
-              </md-card-media>
-            </md-card-header>
-            <md-card-content>
-              <div class="u_margin-bottom-small"><h3>Title:</h3> {{ dataset.title }} </div>
-              <div v-if="(optionalChaining(() => dataset.refby.length))" class="u_margin-bottom-small"><h3>DOI:</h3> {{dataset.refby}} </div>
-              <div v-if="(optionalChaining(() => dataset.contactPoint['@id']))" class="u_margin-bottom-small">
-                <h3>Contact Point:</h3>
-                {{(optionalChaining(() => dataset.contactPoint['firstName']))}}
-                {{(optionalChaining(() => dataset.contactPoint['lastName']))}},
-                {{(optionalChaining(() => dataset.contactPoint['cpEmail']))}}
-              </div>
-              <div class="u_margin-bottom-small">
-              <h3>Files: </h3>
-                <div class="md-subhead" v-if="oldDistributions.length && distrFiles.length">New Uploads</div>
-                <ul>
-                  <li v-for="(file, index) in distrFiles" :key="index" class="u--margin-leftsm">
-                    {{(optionalChaining(() => file.file.name))}}
-                  </li>
-                </ul>
-                <div v-if="oldDistributions.length">
-                  <div class="md-subhead">Original Files</div>
-                  <ul>
-                    <li v-for="(file, index) in oldDistributions" :key="`${index}_old`" class="u--margin-leftsm">
-                    {{(optionalChaining(() => file.name))}}
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="u_margin-bottom-small"><h3>Description:</h3> {{dataset.description}}</div>
-              <div v-if="dataset.organization.length" class="u_margin-bottom-small">
-                <h3>Associated Organization(s):</h3>
-                <span v-for="(org, index) in dataset.organization" :key="`org_${index}`">
-                  <span v-if="index==0">{{ org.name }}</span>
-                  <span v-else>, {{ org.name }}</span>
-                </span>
-              </div>
-              <div v-if="dataset.datePub['@value']" class="u_margin-bottom-small">
-                <h3>Date published:</h3> {{dataset.datePub['@value']}}
-              </div>
-            </md-card-content>
-            <md-card-actions>
-              <md-button class="md-primary" @click="submitForm">Submit</md-button>
-            </md-card-actions>
-          </md-step>
-        </md-steppers>
-        </form>
-      </md-card>
-    </div>
-    </div>
-  </div>
-</div>
-<dialogbox :active="dialogBoxActive" :minWidth="dialog.minWidth" :disableClose="dialog.disableClose">
-  <template v-slot:title>{{dialog.title}}</template>
-  <template v-slot:content>
-    <div v-if="dialog.type=='loading' && uploadInProgress">
-      <spinner :text="uploadInProgress"/>
-    </div>
-    <div v-else-if="dialog.type=='success'">
-      <div v-if="!!datasetId"> Dataset with ID {{ datasetId }} successfully updated </div>
-      <div v-else> New dataset created with ID {{generatedUUID}} </div>
-    </div>
-    <div v-else-if="dialog.type=='deleteOld'">
-      <div> Selecting "Yes, Delete" will permanently remove the file from the MaterialsMine database for all users. </div>
-      <div> This action cannot be undone. </div>
-      <div> Selected file: <a :href="(optionalChaining(() => toDelete.uri))" download>
-        {{ (optionalChaining(() => toDelete.name)) }} </a>
-      </div>
-    </div>
-    <div v-else-if="dialog.type=='doiData'">
-      The following data was imported from DOI.org. Use to auto-fill form?
-      This will replace any fields that you may have already filled.
-      <div v-if="doiData.title"> <b>Title: </b>
-        {{ (optionalChaining(() => doiData.title[0])) }}
-      </div>
-      <div v-if="doiData.published"> <b>Date Published: </b>
-        {{ (optionalChaining(() => doiData.published['date-parts'].flat() )) }}
+                      <md-card-media
+                        md-big
+                        v-show="depiction"
+                        style="height: 0px"
+                      >
+                        <span id="depictWrapperMini" style="visibility: hidden">
+                          <figure>
+                            <img
+                              id="depictImgMini"
+                              src=""
+                              alt="Image preview"
+                            />
+                            <figcaption v-if="oldDepiction">
+                              New thumbnail
+                            </figcaption>
+                          </figure>
+                        </span>
+                      </md-card-media>
+                      <md-card-media
+                        md-big
+                        v-if="oldDepiction"
+                        style="height: 0px"
+                      >
+                        <span>
+                          <figure>
+                            <img
+                              :src="oldDepiction.accessUrl"
+                              alt="Image preview"
+                            />
+                            <figcaption
+                              v-if="
+                                oldDepiction.status === 'delete' || !!depiction
+                              "
+                            >
+                              Old thumbnail. Will be deleted when edits are
+                              submitted
+                            </figcaption>
+                          </figure>
+                        </span>
+                      </md-card-media>
+                    </md-card-header>
+                    <md-card-content>
+                      <div class="u_margin-bottom-small">
+                        <h3>Title:</h3>
+                        {{ dataset.title }}
+                      </div>
+                      <div
+                        v-if="optionalChaining(() => dataset.refby.length)"
+                        class="u_margin-bottom-small"
+                      >
+                        <h3>DOI:</h3>
+                        {{ dataset.refby }}
+                      </div>
+                      <div
+                        v-if="
+                          optionalChaining(() => dataset.contactPoint['@id'])
+                        "
+                        class="u_margin-bottom-small"
+                      >
+                        <h3>Contact Point:</h3>
+                        {{
+                          optionalChaining(
+                            () => dataset.contactPoint['firstName']
+                          )
+                        }}
+                        {{
+                          optionalChaining(
+                            () => dataset.contactPoint['lastName']
+                          )
+                        }},
+                        {{
+                          optionalChaining(
+                            () => dataset.contactPoint['cpEmail']
+                          )
+                        }}
+                      </div>
+                      <div class="u_margin-bottom-small">
+                        <h3>Files:</h3>
+                        <div
+                          class="md-subhead"
+                          v-if="oldDistributions.length && distrFiles.length"
+                        >
+                          New Uploads
+                        </div>
+                        <ul>
+                          <li
+                            v-for="(file, index) in distrFiles"
+                            :key="index"
+                            class="u--margin-leftsm"
+                          >
+                            {{ optionalChaining(() => file.file.name) }}
+                          </li>
+                        </ul>
+                        <div v-if="oldDistributions.length">
+                          <div class="md-subhead">Original Files</div>
+                          <ul>
+                            <li
+                              v-for="(file, index) in oldDistributions"
+                              :key="`${index}_old`"
+                              class="u--margin-leftsm"
+                            >
+                              {{ optionalChaining(() => file.name) }}
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      <div class="u_margin-bottom-small">
+                        <h3>Description:</h3>
+                        {{ dataset.description }}
+                      </div>
+                      <div
+                        v-if="dataset.organization.length"
+                        class="u_margin-bottom-small"
+                      >
+                        <h3>Associated Organization(s):</h3>
+                        <span
+                          v-for="(org, index) in dataset.organization"
+                          :key="`org_${index}`"
+                        >
+                          <span v-if="index == 0">{{ org.name }}</span>
+                          <span v-else>, {{ org.name }}</span>
+                        </span>
+                      </div>
+                      <div
+                        v-if="dataset.datePub['@value']"
+                        class="u_margin-bottom-small"
+                      >
+                        <h3>Date published:</h3>
+                        {{ dataset.datePub['@value'] }}
+                      </div>
+                    </md-card-content>
+                    <md-card-actions>
+                      <md-button class="md-primary" @click="submitForm"
+                        >Submit</md-button
+                      >
+                    </md-card-actions>
+                  </md-step>
+                </md-steppers>
+              </form>
+            </md-card>
+          </div>
+        </div>
       </div>
-
-    </div>
-  </template>
-  <template v-slot:actions>
-    <div v-if="dialog.type=='success'">
-      <md-button @click="goToDataset">OK</md-button>
-    </div>
-    <div v-if="dialog.type=='deleteOld'">
-      <md-button @click="toggleDialogBox()">No, Cancel</md-button>
-      <md-button @click="deleteDistribution(toDelete)">Yes, Delete</md-button>
-    </div>
-    <div v-if="dialog.type=='doiData'">
-      <md-button @click="toggleDialogBox()">No, don't use</md-button>
-      <md-button @click="useDoiData()">Yes, use imported data</md-button>
     </div>
-  </template>
-</dialogbox>
-</div>
+    <dialogbox
+      :active="dialogBoxActive"
+      :minWidth="dialog.minWidth"
+      :disableClose="dialog.disableClose"
+    >
+      <template v-slot:title>{{ dialog.title }}</template>
+      <template v-slot:content>
+        <div v-if="dialog.type == 'loading' && uploadInProgress">
+          <spinner :text="uploadInProgress" />
+        </div>
+        <div v-else-if="dialog.type == 'success'">
+          <div v-if="!!datasetId">
+            Dataset with ID {{ datasetId }} successfully updated
+          </div>
+          <div v-else>New dataset created with ID {{ generatedUUID }}</div>
+        </div>
+        <div v-else-if="dialog.type == 'deleteOld'">
+          <div>
+            Selecting "Yes, Delete" will permanently remove the file from the
+            MaterialsMine database for all users.
+          </div>
+          <div>This action cannot be undone.</div>
+          <div>
+            Selected file:
+            <a :href="optionalChaining(() => toDelete.uri)" download>
+              {{ optionalChaining(() => toDelete.name) }}
+            </a>
+          </div>
+        </div>
+        <div v-else-if="dialog.type == 'doiData'">
+          The following data was imported from DOI.org. Use to auto-fill form?
+          This will replace any fields that you may have already filled.
+          <div v-if="doiData.title">
+            <b>Title: </b>
+            {{ optionalChaining(() => doiData.title[0]) }}
+          </div>
+          <div v-if="doiData.published">
+            <b>Date Published: </b>
+            {{ optionalChaining(() => doiData.published['date-parts'].flat()) }}
+          </div>
+        </div>
+      </template>
+      <template v-slot:actions>
+        <div v-if="dialog.type == 'success'">
+          <md-button @click="goToDataset">OK</md-button>
+        </div>
+        <div v-if="dialog.type == 'deleteOld'">
+          <md-button @click="toggleDialogBox()">No, Cancel</md-button>
+          <md-button @click="deleteDistribution(toDelete)"
+            >Yes, Delete</md-button
+          >
+        </div>
+        <div v-if="dialog.type == 'doiData'">
+          <md-button @click="toggleDialogBox()">No, don't use</md-button>
+          <md-button @click="useDoiData()">Yes, use imported data</md-button>
+        </div>
+      </template>
+    </dialogbox>
+  </div>
 </template>
 
 <script>
@@ -457,12 +823,40 @@ import CurateNavBar from '@/components/curate/CurateNavBar.vue'
 import Spinner from '@/components/Spinner.vue'
 import useFileList from '@/modules/file-list'
 import optionalChainingUtil from '@/mixins/optional-chaining-util'
-import { saveDataset, isValidOrcid, loadDataset, parseFileName, deleteFile } from '@/modules/whyis-dataset'
+import {
+  saveDataset,
+  isValidOrcid,
+  loadDataset,
+  parseFileName,
+  deleteFile
+} from '@/modules/whyis-dataset'
 import { mapGetters, mapMutations } from 'vuex'
 const { v4: uuidv4 } = require('uuid')
-const datasetUuid = uuidv4()
 const distrFn = useFileList()
 
+// Move to a separate file
+const DATASET = {
+  '@type': 'http://www.w3.org/ns/dcat#Dataset',
+  // Dataset info: Step 1
+  refby: '',
+  // Dataset info: Step 2
+  title: '',
+  contactPoint: {
+    '@type': 'schemaPerson',
+    '@id': null,
+    firstName: '',
+    lastName: '',
+    cpEmail: ''
+  },
+  description: '',
+  contributors: [],
+  datePub: {
+    '@type': 'date',
+    '@value': ''
+  },
+  organization: []
+}
+
 export default {
   name: 'SDDHome',
   props: ['datasetId'],
@@ -491,34 +885,13 @@ export default {
         second: null,
         orcid: false
       },
-      generatedUUID: datasetUuid,
       doi: '',
       orcidId: null,
       searchKeywordOrg: '',
       showDropdown: false,
       distrFiles: distrFn.files,
       depiction: null,
-      dataset: {
-        '@type': 'http://www.w3.org/ns/dcat#Dataset',
-        // Dataset info: Step 1
-        refby: '',
-        // Dataset info: Step 2
-        title: '',
-        contactPoint: {
-          '@type': 'schemaPerson',
-          '@id': null,
-          firstName: '',
-          lastName: '',
-          cpEmail: ''
-        },
-        description: '',
-        contributors: [],
-        datePub: {
-          '@type': 'date',
-          '@value': ''
-        },
-        organization: []
-      },
+      dataset: { ...DATASET },
       // For editing existing datasets
       oldDistributions: [],
       toDelete: null,
@@ -539,10 +912,15 @@ export default {
       organizations: 'explorer/curation/getRorData'
     }),
     secondPageFilled () {
-      return !!this.dataset.title && !!this.dataset?.contactPoint?.['@id'] &&
-      !!this.dataset.contactPoint.firstName && !!this.dataset.contactPoint.lastName &&
-      !!this.dataset.contactPoint.cpEmail && !!this.dataset.description &&
-      !this.invalid.orcid
+      return (
+        !!this.dataset.title &&
+        !!this.dataset?.contactPoint?.['@id'] &&
+        !!this.dataset.contactPoint.firstName &&
+        !!this.dataset.contactPoint.lastName &&
+        !!this.dataset.contactPoint.cpEmail &&
+        !!this.dataset.description &&
+        !this.invalid.orcid
+      )
     },
     userInfo () {
       return {
@@ -550,6 +928,9 @@ export default {
         firstName: this.$store.getters['auth/user'].givenName,
         lastName: this.$store.getters['auth/user'].surName
       }
+    },
+    generatedUUID () {
+      return uuidv4()
     }
   },
   watch: {
@@ -559,9 +940,14 @@ export default {
       } else {
         this.invalid.orcid = false
         this.dataset.contactPoint['@id'] = this.orcidData?.['@id']
-        this.dataset.contactPoint.firstName = this.orcidData?.['http://schema.org/givenName'][0]?.['@value']
-        this.dataset.contactPoint.lastName = this.orcidData?.['http://schema.org/familyName'][0]?.['@value']
-        this.dataset.contactPoint.cpEmail = this.orcidData?.['http://www.w3.org/2006/vcard/ns#email']?.[0]?.['@value']
+        this.dataset.contactPoint.firstName =
+          this.orcidData?.['http://schema.org/givenName'][0]?.['@value']
+        this.dataset.contactPoint.lastName =
+          this.orcidData?.['http://schema.org/familyName'][0]?.['@value']
+        this.dataset.contactPoint.cpEmail =
+          this.orcidData?.['http://www.w3.org/2006/vcard/ns#email']?.[0]?.[
+            '@value'
+          ]
       }
     },
     searchKeywordOrg (newVal) {
@@ -586,14 +972,19 @@ export default {
     },
     async loadDataset () {
       try {
-        const response = await loadDataset(`${window.location.origin}/explorer/dataset/${this.datasetId}`)
+        const response = await loadDataset(
+          `${window.location.origin}/explorer/dataset/${this.datasetId}`
+        )
         if (response[0]?.refby.length) {
           this.doi = response[0]?.refby[0].split('.org/')[1]
         }
         this.dataset = response[0]
         this.oldDistributions = response?.[1]
         if (response?.[2]) {
-          const thumbnailResponse = await this.$store.dispatch('explorer/fetchDatasetThumbnail', response?.[2]?.[0]?.['@id'])
+          const thumbnailResponse = await this.$store.dispatch(
+            'explorer/fetchDatasetThumbnail',
+            response?.[2]?.[0]?.['@id']
+          )
           const accessUrl = thumbnailResponse[0]?.['@value'] ?? ''
           this.oldDepiction = {
             accessUrl,
@@ -601,12 +992,16 @@ export default {
             status: 'complete'
           }
         }
-        this.orcidId = response?.[0]?.contactPoint?.['@id']?.split('http://orcid.org/')[1]
+        this.orcidId =
+          response?.[0]?.contactPoint?.['@id']?.split('http://orcid.org/')[1]
         this.lookupOrcid(this.orcidId)
         if (this.dataset?.organization?.length) {
           const orgs = this.dataset.organization.map(async (org) => {
             const rorId = org['@id'].split('https://ror.org/')[1]
-            const rorOrg = await this.$store.dispatch('explorer/curation/searchRor', { id: rorId })
+            const rorOrg = await this.$store.dispatch(
+              'explorer/curation/searchRor',
+              { id: rorId }
+            )
             return {
               '@id': org['@id'],
               '@type': 'organization',
@@ -627,14 +1022,18 @@ export default {
     },
     goToStep (id, index) {
       this.clearSnackbar()
-      if (id === 'first' && !this.distrFiles.length && !this.oldDistributions?.length) {
+      if (
+        id === 'first' &&
+        !this.distrFiles.length &&
+        !this.oldDistributions?.length
+      ) {
         this.invalid.first = 'Missing required field'
       } else if (id === 'second' && !this.secondPageFilled) {
         this.invalid.second = 'Missing required field'
       } else {
         // Clear invalid errors
-        (id === 'first') && (this.invalid.first = null);
-        (id === 'second') && (this.invalid.second = null)
+        id === 'first' && (this.invalid.first = null)
+        id === 'second' && (this.invalid.second = null)
         this[id] = true
         if (index) {
           this.active = index
@@ -680,7 +1079,12 @@ export default {
       arr.splice(e, 1)
     },
     setDropdownPosition () {
-      return { position: 'relative', top: '-2rem', zIndex: 10, minHeight: 'auto' }
+      return {
+        position: 'relative',
+        top: '-2rem',
+        zIndex: 10,
+        minHeight: 'auto'
+      }
     },
     async disableDropdownRender (e) {
       const selected = e.target.closest('.search_box')
@@ -692,9 +1096,16 @@ export default {
       this.dataset.title = this.doiData?.title[0] ?? this.dataset.title
       if (this.doiData?.published?.['date-parts'].flat().length === 3) {
         const dateArray = this.doiData.published['date-parts'].flat()
-        this.dataset.datePub['@value'] = dateArray[0].toString() + '-' +
-          (dateArray[1] < 10 ? '0' + dateArray[1].toString() : dateArray[1].toString()) + '-' +
-          (dateArray[2] < 10 ? '0' + dateArray[2].toString() : dateArray[2].toString())
+        this.dataset.datePub['@value'] =
+          dateArray[0].toString() +
+          '-' +
+          (dateArray[1] < 10
+            ? '0' + dateArray[1].toString()
+            : dateArray[1].toString()) +
+          '-' +
+          (dateArray[2] < 10
+            ? '0' + dateArray[2].toString()
+            : dateArray[2].toString())
       }
       this.toggleDialogBox()
     },
@@ -708,10 +1119,14 @@ export default {
       const reader = new FileReader()
       this.depiction = file
 
-      reader.addEventListener('load', function () {
-        wrapper.style.visibility = wrapperMini.style.visibility = 'visible'
-        preview.src = previewMini.src = reader.result
-      }, false)
+      reader.addEventListener(
+        'load',
+        function () {
+          wrapper.style.visibility = wrapperMini.style.visibility = 'visible'
+          preview.src = previewMini.src = reader.result
+        },
+        false
+      )
 
       if (file) {
         reader.readAsDataURL(file)
@@ -749,16 +1164,22 @@ export default {
     },
     // Format files for submission
     processFiles () {
-      return this.distrFiles.map((file) => ({ ...file, status: 'incomplete' }))
-        .concat(this.oldDistributions.map((file) => ({ ...file, status: 'complete' })))
+      return this.distrFiles
+        .map((file) => ({ ...file, status: 'incomplete' }))
+        .concat(
+          this.oldDistributions.map((file) => ({ ...file, status: 'complete' }))
+        )
     },
     // Ensure only one thumbnail is associated with the dataset
     processDepictions () {
       const depictions = []
       if (this.depiction) {
         depictions.push({ file: this.depiction, status: 'incomplete' })
-        if (this.oldDepiction) { this.oldDepiction.status = 'delete' }
-      } if (this.oldDepiction) depictions.push({ ...this.oldDepiction })
+        if (this.oldDepiction) {
+          this.oldDepiction.status = 'delete'
+        }
+      }
+      if (this.oldDepiction) depictions.push({ ...this.oldDepiction })
       return depictions
     },
     // Submit and post as nanopublication
@@ -766,24 +1187,40 @@ export default {
       this.uploadInProgress = 'Uploading files'
       this.renderDialog('Submitting dataset', 'loading', 40, true)
       this.clearSnackbar()
-      if ((!this.distrFiles.length && !this.oldDistributions?.length) || !this.secondPageFilled) {
+      if (
+        (!this.distrFiles.length && !this.oldDistributions?.length) ||
+        !this.secondPageFilled
+      ) {
         this.setSnackbar({
           message: 'Unable to submit, check for required fields'
         })
         this.toggleDialogBox()
-        this.invalid.first = (!this.distrFiles.length && !this.oldDistributions?.length) ? 'Missing required field' : null
-        this.invalid.second = !this.secondPageFilled ? 'Missing required field' : null
+        this.invalid.first =
+          !this.distrFiles.length && !this.oldDistributions?.length
+            ? 'Missing required field'
+            : null
+        this.invalid.second = !this.secondPageFilled
+          ? 'Missing required field'
+          : null
       } else {
         this.dataset.creator = this.userInfo
         const processedFiles = this.processFiles()
         const processedImg = this.processDepictions()
         try {
-          const datasetNanopub = await saveDataset(this.dataset, processedFiles, processedImg, this.generatedUUID)
-          await this.$store.dispatch('explorer/curation/cacheNewEntityResponse', {
-            identifier: this.dataset.uri,
-            resourceNanopub: datasetNanopub,
-            type: 'datasets'
-          })
+          const datasetNanopub = await saveDataset(
+            this.dataset,
+            processedFiles,
+            processedImg,
+            this.generatedUUID
+          )
+          await this.$store.dispatch(
+            'explorer/curation/cacheNewEntityResponse',
+            {
+              identifier: this.dataset.uri,
+              resourceNanopub: datasetNanopub,
+              type: 'datasets'
+            }
+          )
           this.dialog.title = 'Upload successful'
           this.dialog.type = 'success'
         } catch (err) {
@@ -796,10 +1233,12 @@ export default {
       this.toggleDialogBox()
       const datasetId = this.datasetId ?? this.generatedUUID
       this.clearFileList() // Reset imported module
+      this.dataset = { ...DATASET } // Reset dataset
       return this.$router.push(`/explorer/dataset/${datasetId}`)
     }
   },
   async created () {
+    console.log('created SDDForm', this.datasetId)
     this.loading = true
     if (this.datasetId) await this.loadDataset()
     this.loading = false
diff --git a/app/src/pages/explorer/dataset/Dataset.vue b/app/src/pages/explorer/dataset/Dataset.vue
index 688300d4..8583777e 100644
--- a/app/src/pages/explorer/dataset/Dataset.vue
+++ b/app/src/pages/explorer/dataset/Dataset.vue
@@ -397,7 +397,8 @@ export default {
       dataset: 'explorer/getCurrentDataset',
       thumbnail: 'explorer/getDatasetThumbnail',
       orcidData: 'explorer/curation/getOrcidData',
-      rorData: 'explorer/curation/getRorData'
+      rorData: 'explorer/curation/getRorData',
+      routeInfo: 'getRouteInfo'
     }),
     doi () {
       if (this.dataset?.[this.datasetFields.doi]) {
@@ -436,7 +437,13 @@ export default {
       })
     },
     navBack () {
-      this.$router.back()
+      // Note: A check to go back to gallery after curating a dataset
+      const { from } = this.routeInfo
+      if (from.name === 'CurateSDD') {
+        this.$router.push('/explorer/curate')
+      } else {
+        this.$router.back()
+      }
     },
     nav_to_tab (e) {
       Object.keys(this.tabbed_content).forEach((el) => {
diff --git a/app/src/pages/explorer/dataset/DatasetGallery.vue b/app/src/pages/explorer/dataset/DatasetGallery.vue
index 938bf75d..677ffb7f 100644
--- a/app/src/pages/explorer/dataset/DatasetGallery.vue
+++ b/app/src/pages/explorer/dataset/DatasetGallery.vue
@@ -1,29 +1,35 @@
 <template>
   <div class="gallery">
     <div class="section_loader" v-if="loading">
-      <spinner
-        :loading="loading"
-        text='Loading Datasets'
-      />
+      <spinner :loading="loading" text="Loading Datasets" />
     </div>
-    <div
-      class="utility-roverflow"
-      v-else
-    >
-
-    <div class="utility-roverflow u--margin-toplg">
-      <div class="search_box card-icon-container u--margin-toplg">
-        <form class="form">
-          <div class="search_box_form">
-            <div class="form__group search_box_form-item-1">
-              <input type="text" ref="search_input" class="form__input form__input--flat"
-              placeholder="Search Datasets" name="search" id="search"
-              required v-model.lazy="searchWord" />
-              <label htmlFor="search" class="form__label search_box_form_label">Search Datasets</label>
+    <div class="utility-roverflow" v-else>
+      <div class="utility-roverflow u--margin-toplg">
+        <div class="search_box card-icon-container u--margin-toplg">
+          <form class="form">
+            <div class="search_box_form">
+              <div class="form__group search_box_form-item-1">
+                <input
+                  type="text"
+                  ref="search_input"
+                  class="form__input form__input--flat"
+                  placeholder="Search Datasets"
+                  name="search"
+                  id="search"
+                  required
+                  v-model.lazy="searchWord"
+                />
+                <label
+                  htmlFor="search"
+                  class="form__label search_box_form_label"
+                  >Search Datasets</label
+                >
+              </div>
             </div>
-          </div>
-          <div class="form__group search_box_form-item-2  explorer_page-nav u--margin-neg">
-            <!-- <div class="form__field md-field">
+            <div
+              class="form__group search_box_form-item-2 explorer_page-nav u--margin-neg"
+            >
+              <!-- <div class="form__field md-field">
               <select class="form__select"
                 v-model="filter" name="filter" id="filter">
                 <option value="" disabled selected hidden>Filter by...</option>
@@ -34,36 +40,31 @@
                 <option value="user">Curating User</option>
               </select>
             </div> -->
-            <button
-              type="submit"
-              class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
-              @click.prevent="submitSearch()"
-            >
-            Search Datasets
-            </button>
-            <button v-if="searchEnabled"
-              type="submit"
-              class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
-              @click.prevent="customReset()"
-            >
-            Clear Search
-            </button>
-          </div>
-        </form>
+              <button
+                type="submit"
+                class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
+                @click.prevent="submitSearch()"
+              >
+                Search Datasets
+              </button>
+              <button
+                v-if="searchEnabled"
+                type="submit"
+                class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
+                @click.prevent="customReset()"
+              >
+                Clear Search
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
       <div class="u_content__result">
         <!-- TODO TIME TO RESULT -->
         <span class="u_color utility-navfont" id="css-adjust-navfont">
-          <span v-if="total === 0">
-            No results
-          </span>
-          <span v-else-if="total === 1">
-            1 result
-          </span>
-          <span v-else>
-            About {{total}} results
-          </span>
+          <span v-if="total === 0"> No results </span>
+          <span v-else-if="total === 1"> 1 result </span>
+          <span v-else> About {{ total }} results </span>
         </span>
       </div>
       <template v-if="!!items && !!items.length">
@@ -74,25 +75,39 @@
             class="btn--animated gallery-item"
           >
             <div class="u_gridicon u_gridbg">
-              <a download :href="(optionalChaining(() => result.distribution))">
-                <md-icon class="u_color_white" style="font-size: 14px !important"
+              <a download :href="optionalChaining(() => result.distribution)">
+                <md-icon
+                  class="u_color_white"
+                  style="font-size: 14px !important"
+                >
+                  download</md-icon
                 >
-                  download</md-icon>
               </a>
-              <div v-if="isAuth && isAdmin" @click.prevent="editDataset(result)">
+              <div
+                v-if="isAuth && isAdmin"
+                @click.prevent="editDataset(result)"
+              >
                 <md-icon class="u_color_white">edit</md-icon>
               </div>
-              <div v-if="isAuth && isAdmin" @click.prevent="renderDialog('Delete Dataset?', 'delete', result, 80)">
+              <div
+                v-if="isAuth && isAdmin"
+                @click.prevent="
+                  renderDialog('Delete Dataset?', 'delete', result, 80)
+                "
+              >
                 <md-icon class="u_color_white">delete_outline</md-icon>
               </div>
             </div>
-            <router-link v-if="result.identifier" :to="{ name: 'DatasetVisualizer', params: { id: getDatasetId(result) }}">
+            <router-link
+              v-if="result.identifier"
+              :to="{
+                name: 'DatasetVisualizer',
+                params: { id: getDatasetId(result) }
+              }"
+            >
               <md-card-media-cover md-solid>
                 <md-card-media v-if="result.thumbnail" md-ratio="4:3">
-                  <img
-                    :src="result.thumbnail"
-                    :alt="result.label"
-                  >
+                  <img :src="result.thumbnail" :alt="result.label" />
                 </md-card-media>
                 <md-card-media v-else md-ratio="4:3" class="u--bg-grey">
                 </md-card-media>
@@ -101,7 +116,9 @@
                     <span class="md-subheading">
                       <strong>{{ result.label }}</strong>
                     </span>
-                    <span class="md-body-1">{{ reduceDescription(result.description, 15) }}</span>
+                    <span class="md-body-1">{{
+                      reduceDescription(result.description, 15)
+                    }}</span>
                   </md-card-header>
                 </md-card-area>
               </md-card-media-cover>
@@ -114,35 +131,43 @@
           @go-to-page="loadPrevNextImage($event)"
         />
       </template>
-      <div class="utility-roverflow u_centralize_text u_margin-top-med"
+      <div
+        class="utility-roverflow u_centralize_text u_margin-top-med"
         v-else-if="page > totalPages && totalPages > 0"
       >
-        <h3 class="visualize_header-h3 u_margin-top-med">Invalid page number,
-          <a @click.prevent=loadPrevNextImage(totalPages)>return to page {{totalPages}}?</a>
+        <h3 class="visualize_header-h3 u_margin-top-med">
+          Invalid page number,
+          <a @click.prevent="loadPrevNextImage(totalPages)"
+            >return to page {{ totalPages }}?</a
+          >
         </h3>
       </div>
-      <div class="utility-roverflow u_centralize_text u_margin-top-med section_loader" v-else>
+      <div
+        class="utility-roverflow u_centralize_text u_margin-top-med section_loader"
+        v-else
+      >
         <h1 class="visualize_header-h1 u_margin-top-med">No Datasets Found</h1>
       </div>
     </div>
     <dialogbox :active="dialogBoxActive" :minWidth="dialog.minWidth">
-      <template v-slot:title>{{dialog.title}}</template>
+      <template v-slot:title>{{ dialog.title }}</template>
       <template v-slot:content>
-        <div v-if="dialog.type=='delete'">
+        <div v-if="dialog.type == 'delete'">
           <md-content v-if="dialog.dataset">
-            <div> This will permanently remove the dataset <b>{{dialog.dataset.label}}</b> </div>
-            with identifier <b>{{dialog.dataset.identifier}}</b> and any associated files.
+            <div>
+              This will permanently remove the dataset
+              <b>{{ dialog.dataset.label }}</b>
+            </div>
+            with identifier <b>{{ dialog.dataset.identifier }}</b> and any
+            associated files.
           </md-content>
         </div>
         <div v-if="dialogLoading">
-          <spinner
-            :loading="dialogLoading"
-            text='Deleting Chart'
-          />
+          <spinner :loading="dialogLoading" text="Deleting Chart" />
         </div>
       </template>
       <template v-slot:actions>
-        <span v-if="dialog.type=='delete' && dialog.dataset">
+        <span v-if="dialog.type == 'delete' && dialog.dataset">
           <md-button @click.native.prevent="toggleDialogBox">
             No, cancel
           </md-button>
@@ -150,7 +175,9 @@
             Yes, delete.
           </md-button>
         </span>
-        <md-button v-else @click.native.prevent="toggleDialogBox">Close</md-button>
+        <md-button v-else @click.native.prevent="toggleDialogBox"
+          >Close</md-button
+        >
       </template>
     </dialogbox>
   </div>
@@ -221,7 +248,10 @@ export default {
     async deleteDataset (dataset) {
       if (!this.isAdmin) return // temporary safeguard
       this.dialogLoading = true
-      await this.$store.dispatch('explorer/curation/deleteEntityNanopub', dataset.identifier)
+      await this.$store.dispatch(
+        'explorer/curation/deleteEntityNanopub',
+        dataset.identifier
+      )
       await this.$store.dispatch('explorer/curation/deleteEntityES', {
         identifier: dataset.identifier,
         type: 'datasets'
@@ -231,7 +261,9 @@ export default {
       await this.loadItems()
     },
     editDataset (dataset) {
-      return this.$router.push(`/explorer/curate/sdd/edit/${this.getDatasetId(dataset)}`)
+      return this.$router.push(
+        `/explorer/curate/sdd/edit/${this.getDatasetId(dataset)}`
+      )
     },
     downloadFiles (item) {
       if (item.distribution) {
@@ -250,7 +282,9 @@ export default {
     async loadItems (page = 1) {
       this.loading = true
       try {
-        await this.$store.dispatch('explorer/sddDatasets/loadDatasets', { page })
+        await this.$store.dispatch('explorer/sddDatasets/loadDatasets', {
+          page
+        })
       } catch (error) {
         this.$store.commit('setSnackbar', {
           message: error || 'Something went wrong',

From 9d667403e0f6756e93493bcf35ffbed159819803 Mon Sep 17 00:00:00 2001
From: tholulomo <fatexjames@yahoo.com>
Date: Tue, 29 Oct 2024 15:11:10 -0400
Subject: [PATCH 2/3] FEAT(#508): Fix github workflow to ignore excess workflow
 test in push scenarios

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 312c5a16..ad25ca0b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -98,6 +98,7 @@ jobs:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
       DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
   TestBuild:
+    if: github.event_name != 'push'
     runs-on: ubuntu-latest
     needs: [BuildFrontend, BuildRESTFUL, BuildProxy, BuildWhyis]
     env:

From d588d090ef536ddd3a0909f5ab7fb68d7e865d49 Mon Sep 17 00:00:00 2001
From: tholulomo <fatexjames@yahoo.com>
Date: Tue, 29 Oct 2024 16:27:20 -0400
Subject: [PATCH 3/3] FEAT(#508): Adding change to capture route information

---
 app/src/router/index.js                       |  4 +-
 .../modules/explorer/curation/actions.js      | 48 +++++++++++++++++--
 app/src/store/modules/misc/getters.js         |  3 ++
 app/src/store/modules/misc/index.js           |  3 +-
 app/src/store/modules/misc/mutations.js       |  3 ++
 5 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/app/src/router/index.js b/app/src/router/index.js
index 9a100a79..e2e5c0d1 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -82,7 +82,7 @@ const router = new VueRouter({
   }
 })
 
-router.beforeEach(async function (to, _, next) {
+router.beforeEach(async function (to, from, next) {
   if (to.meta.requiresAuth && !store.getters['auth/isAuthenticated']) {
     if (!store.getters['auth/isAuthenticated']) {
       store.commit(
@@ -96,12 +96,14 @@ router.beforeEach(async function (to, _, next) {
 
       await store.dispatch('auth/tryLogin')
       if (store.getters['auth/isAuthenticated']) {
+        store.commit('setRouteInfo', { to, from })
         return next()
       }
     }
     next('')
   } else if (to.meta.requiresUnauth && store.getters.auth.isAuthenticated) {
     next()
+    store.commit('setRouteInfo', { to, from })
   } else {
     next()
   }
diff --git a/app/src/store/modules/explorer/curation/actions.js b/app/src/store/modules/explorer/curation/actions.js
index f2d4746f..b8705585 100644
--- a/app/src/store/modules/explorer/curation/actions.js
+++ b/app/src/store/modules/explorer/curation/actions.js
@@ -88,11 +88,11 @@ export default {
       ]?.map((org) => {
         return org?.['http://xmlns.com/foaf/0.1/name']?.['@value']
       }),
-      distribution: datasetObject['http://www.w3.org/ns/dcat#distribution']?.map(
-        (dist) => {
-          return dist?.['@id']
-        }
-      )
+      distribution: datasetObject[
+        'http://www.w3.org/ns/dcat#distribution'
+      ]?.map((dist) => {
+        return dist?.['@id']
+      })
     }
   },
 
@@ -627,5 +627,43 @@ export default {
         { root: true }
       )
     }
+  },
+  async deleteEntityFiles ({ _, __, rootGetters }, payload) {
+    const { distribution, thumbnail } = payload
+    if (!distribution.length && !thumbnail) return
+
+    const token = rootGetters['auth/token']
+    if (thumbnail) {
+      // Enable this url definition below for local testing
+      // const url = thumbnail.replace(
+      //   'http://restful:3001',
+      //   'http://localhost/api'
+      // );
+      // await fetch(url, {
+      await fetch(thumbnail, {
+        method: 'DELETE',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + token
+        }
+      })
+    }
+
+    if (distribution.length) {
+      for (const dist of distribution) {
+        // Enable this url definition below for local testing
+        // const url = dist.replace('http://restful:3001', 'http://localhost/api');
+        // await fetch(url, {
+        await fetch(dist, {
+          method: 'DELETE',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token
+          }
+        })
+      }
+    }
   }
 }
diff --git a/app/src/store/modules/misc/getters.js b/app/src/store/modules/misc/getters.js
index ead24afb..55d29c11 100644
--- a/app/src/store/modules/misc/getters.js
+++ b/app/src/store/modules/misc/getters.js
@@ -10,5 +10,8 @@ export default {
   },
   getSnackbar (state) {
     return state.snackbar
+  },
+  getRouteInfo (state) {
+    return state.routeInfo
   }
 }
diff --git a/app/src/store/modules/misc/index.js b/app/src/store/modules/misc/index.js
index 3959333d..4d04dd7d 100644
--- a/app/src/store/modules/misc/index.js
+++ b/app/src/store/modules/misc/index.js
@@ -21,7 +21,8 @@ export default {
         callToActionText: 'Retry'
       },
       countDownDate: new Date('March 22, 2023 13:30:00').getTime(),
-      uploadedFile: null
+      uploadedFile: null,
+      routeInfo: {}
     }
   },
   mutations,
diff --git a/app/src/store/modules/misc/mutations.js b/app/src/store/modules/misc/mutations.js
index 6e914910..9b9f5862 100644
--- a/app/src/store/modules/misc/mutations.js
+++ b/app/src/store/modules/misc/mutations.js
@@ -26,5 +26,8 @@ export default {
   },
   setUploadedFile (state, str) {
     state.uploadedFile = str
+  },
+  setRouteInfo (state, info) {
+    state.routeInfo = info ?? { to: {}, from: {} }
   }
 }