Merge pull request #351 from sei-aderr/feature/report-ui-inputs

Fully implementing the form for the reports in the GUI
mlte-team · Jan 31, 2024 · b8a1555 · b8a1555
2 parents c5b1e2a + 868f853
commit b8a1555
Show file tree

Hide file tree

Showing 8 changed files with 614 additions and 248 deletions.
diff --git a/mlte/frontend/nuxt-app/.eslintrc.json b/mlte/frontend/nuxt-app/.eslintrc.json
@@ -9,9 +9,19 @@
     "defineNuxtPlugin": true,
     "useRoute": true,
     "ref": true,
+    "$fetch": true,
     "useFetch": true,
+    "isValidNegotiation": true,
+    "isValidSpec": true,
+    "isValidValidatedSpec": true,
+    "isValidValue": true,
+    "isValidReport": true,
+    "isValidArtifact": true,
+    "successfulSubmission": true,
+    "cancelFormSubmission": true,
     "requestErrorAlert": true,
-    "responseErrorAlert": true
+    "responseErrorAlert": true,
+    "conflictErrorAlert": true
   },
   "extends": [
     "standard",

diff --git a/mlte/frontend/nuxt-app/composables/error-handling.ts b/mlte/frontend/nuxt-app/composables/error-handling.ts
diff --git a/mlte/frontend/nuxt-app/composables/form-methods.ts b/mlte/frontend/nuxt-app/composables/form-methods.ts
@@ -0,0 +1,32 @@
+export function successfulSubmission(
+  artifactType: string,
+  artifactName: string,
+) {
+  alert(`Your ${artifactType}, ${artifactName}, has been saved successfully.`);
+}
+
+export function cancelFormSubmission(redirect: string) {
+  if (
+    confirm(
+      "Are you sure you want to leave this page? All changes will be lost.",
+    )
+  ) {
+    location.href = redirect;
+  }
+}
+
+export function requestErrorAlert() {
+  alert(
+    "Error encountered while communicating with API. Ensure store is running and allowed-origins is configured correctly.",
+  );
+}
+
+export function responseErrorAlert() {
+  alert(
+    "Error encountered in response from API. Check browser and store console for more information.",
+  );
+}
+
+export function conflictErrorAlert() {
+  alert("Name specified for artifact is already in use.");
+}
diff --git a/mlte/frontend/nuxt-app/layouts/base-layout.vue b/mlte/frontend/nuxt-app/layouts/base-layout.vue
@@ -49,7 +49,8 @@
           target="_blank"
           rel="noopener noreferrer"
           href="https://mlte.readthedocs.io/en/latest/using_mlte/"
-          >User Guide</a>
+          >User Guide</a
+        >
         <span>v0.2.2</span>
       </div>
     </footer>

diff --git a/mlte/frontend/nuxt-app/package.json b/mlte/frontend/nuxt-app/package.json
@@ -18,7 +18,7 @@
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.15.1",
-    "nuxt": "^3.9.3"
+    "nuxt": "^3.7.4"
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.22.9",
@@ -33,6 +33,7 @@
     "prettier": "^3.0.0",
     "typescript": "^5.1.6",
     "url": "^0.11.1",
+    "vue": "3.3",
     "vue-tsc": "^1.8.6",
     "vue-uswds": "^1.2.0"
   }

diff --git a/mlte/frontend/nuxt-app/pages/index.vue b/mlte/frontend/nuxt-app/pages/index.vue
@@ -153,24 +153,7 @@
                       },
                     }"
                   >
-                    <UsaButton :disabled="true" class="primary-button">
-                      Edit
-                    </UsaButton>
-                  </NuxtLink>
-                </td>
-                <td>
-                  <NuxtLink
-                    :to="{
-                      path: 'report',
-                      query: {
-                        namespace: selectedNamespace,
-                        model: report.model,
-                        version: report.version,
-                        artifactId: report.id,
-                      },
-                    }"
-                  >
-                    <UsaButton class="primary-button"> View </UsaButton>
+                    <UsaButton class="primary-button"> Edit </UsaButton>
                   </NuxtLink>
                 </td>
               </tr>
@@ -266,14 +249,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  isValidNegotiation,
-  isValidReport,
-  isValidSpec,
-  isValidValidatedSpec,
-  isValidValue,
-} from "../composables/artifact-validation.ts";
-
 const path = ref([
   {
     href: "/",
@@ -286,11 +261,8 @@ const { data: namespaceOptions } = await useFetch<string[]>(
   { method: "GET" },
 );
 
-// The selected namespace
 const selectedNamespace = ref("");
-// The selected model
 const selectedModel = ref("");
-// The selected model version
 const selectedVersion = ref("");
 
 if (namespaceOptions.value !== null && namespaceOptions.value.length > 0) {
@@ -576,7 +548,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidNegotiation(artifact)) {
         negotiationCards.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -587,7 +561,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidReport(artifact)) {
         reports.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -598,7 +574,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidSpec(artifact)) {
         specifications.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -610,7 +588,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
         validatedSpecs.value.push({
           id: artifact.header.identifier,
           specid: artifact.body.spec_identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -623,7 +603,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
           id: artifact.header.identifier.slice(0, -6),
           measurement: artifact.body.metadata.measurement_type,
           type: artifact.body.value.value_type,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });