feat(core): #333 Valid Curation List Item Page

app/src/App.vue

@@ -10,6 +10,9 @@ import Snackbar from '@/components/Snackbar.vue'
 export default {
   components: {
     Snackbar
+  },
+  async created () {
+    await this.$store.dispatch('auth/tryLogin')
   }
 }
 </script>

app/src/assets/css/modules/_pages.scss

@@ -530,3 +530,9 @@
 
     }
 }
+
+.spreadsheet_list_form {
+    .md-chip.md-theme-default .md-icon.md-icon-image svg{
+        fill: #08233c;
+    }
+}

app/src/assets/css/modules/_utility.scss

@@ -185,6 +185,12 @@
         &-black {
             color: $primary-black;
         }
+        &-success {
+            color: green !important;
+        }
+        &-error {
+            color: $error !important;
+        }
     }
     &--font-emph {
         &-xl {
@@ -201,7 +207,7 @@
         }
         &-smm {
             font-size: 1.3rem;
-            font-size: 500;
+            font-size: 500; //Fix this error! Should be fontweight or whatnot
         }
 
     }

app/src/components/Drawer.vue

@@ -47,21 +47,27 @@
           </router-link>
         </md-list>
       </md-list-item>
-      <md-list-item md-expand>
+      <md-list-item md-expand v-if="isAuth">
         <md-icon class="utility-navfonticon">upload</md-icon>
         <span class="md-list-item-text utility-navfont">Curate</span>
         <md-list slot="md-expand">
-          <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
+          <!-- <md-list-item class="md-inset" href="https://materialsmine.org/nm#/XMLCONV">
             Upload a Spreadsheet
-          </md-list-item>
+          </md-list-item> -->
+          <router-link :to="'/explorer/curate/spreadsheet'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Upload a Spreadsheet</md-list-item>
+          </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate"  class="md-inset">Fill a Form</md-list-item>
           </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
             <md-list-item :href="href" @click="navigate"  class="md-inset">Submit SDD</md-list-item>
           </router-link>
           <router-link :to="''" v-slot="{navigate, href}" custom>
-            <md-list-item :href="href" @click="navigate"  class="md-inset">Create new chart</md-list-item>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Create New Chart</md-list-item>
+          </router-link>
+          <router-link :to="'/explorer/curate/validlist'" v-slot="{navigate, href}" custom>
+            <md-list-item :href="href" @click="navigate"  class="md-inset">Add Xlsx List Entry</md-list-item>
           </router-link>
         </md-list>
       </md-list-item>

app/src/components/explorer/Header.vue

@@ -12,12 +12,12 @@
 
         <div class="md-toolbar-section-end">
           <md-badge v-if="isAuth && showBadge" id="header-badge" class="md-primary" md-content="12">
-            <md-button class="md-icon-button">
+            <md-button class="md-icon-button u_color_white u--font-emph-m">
               Hi {{ displayName }}
             </md-button>
           </md-badge>
-          <md-button v-if="isAuth"> Hi {{ displayName }}</md-button>
-          <a v-if="!isAuth" class="md-icon-button large" href="/secure">
+          <md-button v-if="isAuth" class="u_color_white u--font-emph-m"> Hi {{ displayName }}</md-button>
+          <a v-if="!isAuth" class="md-icon-button large u_color_white u--font-emph-m" href="/secure">
             Login
           </a>
         </div>
@@ -27,8 +27,8 @@
         <md-tabs class="md-primary" id="reset_tab_bg" md-sync-route>
           <!-- Add _ to _menutabs as this is just a class selector for testing purposes only -->
           <md-tab class="_menutabs" to="/explorer" id="tab-home" md-label="Search" exact> </md-tab>
-          <md-tab class="_menutabs" to="/explorer/visualization" id="tab-visualization" md-label="Visualization" exact> </md-tab>
-          <md-tab class="_menutabs" to="/explorer/curate" id="tab-curate" md-label="Curate" exact> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/visualization" id="tab-visualization" md-label="Visualization"> </md-tab>
+          <md-tab class="_menutabs" to="/explorer/curate" id="tab-curate" md-label="Curate"> </md-tab>
           <md-tab class="_menutabs" to="/explorer/parameterized_query" id="tab-query" md-label="Parameterized Query" exact> </md-tab>
           <!-- <md-tab class="_menutabs" to="/explorer/sparql" id="tab-sparql" md-label="Sparql Query" exact> </md-tab> -->
         </md-tabs>

app/src/modules/gql/material-gql.js

@@ -0,0 +1,38 @@
+import gql from 'graphql-tag'
+
+export const CREATEMATERIAL_QUERY = gql`
+mutation CreateXlsxCurationList($input: materialsInput) {
+  createXlsxCurationList(input: $input) {
+    columns {
+      field
+      values
+      user
+    }
+  }
+}`
+
+export const SEARCH_SPREADSHEETLIST_QUERY = gql`
+query GetXlsxCurationList($input: materialQueryInput) {
+  getXlsxCurationList(input: $input) {
+    totalItems
+    pageSize
+    pageNumber
+    totalPages
+    hasPreviousPage
+    hasNextPage
+    columns {
+      field
+      values
+      user
+    }
+  }
+}`
+
+export const UPDATE_SPREADSHEETLIST = gql`
+mutation UpdateXlsxCurationList($input: columnsInput) {
+  updateXlsxCurationList(input: $input) {
+    field
+    values
+    user
+  }
+}`

app/src/pages/explorer/curate/validlist/UpdateXlsList.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="spreadsheet_list_form section_teams">
+      <div >
+          <h1 class="visualize_header-h1 article_title u_centralize_text">Update Valid List</h1>
+          <div style="max-width: 99%;">
+              <div class="md-layout md-gutter md-alignment-top-center">
+                  <div class="md-layout-item md-size-50 md-medium-size-70 md-small-size-85 md-xsmall-size-95">
+
+                    <div>
+                      <md-table v-if="!!spreadsheetList.length && !editMode" v-model="spreadsheetList" @md-selected="onSelect">
+                        <md-table-toolbar><h1 class="md-title">Search Results</h1></md-table-toolbar>
+                        <md-table-row slot="md-table-row" slot-scope="{ item}" md-selectable="single">
+                          <md-table-cell md-label="Field Name">{{ item.field }}</md-table-cell>
+                          <md-table-cell md-label="Value">
+                            <md-chip v-for="(element, i) in item['values']" :key="`C${i}`">{{ element }}</md-chip>
+                          </md-table-cell>
+                          <md-table-cell md-label="User">{{ item.user ?? ''}}</md-table-cell>
+                        </md-table-row>
+                      </md-table>
+
+                      <md-table v-if="editMode & !Object.keys(uploadedData).length" >
+
+                        <md-table-row>
+                          <md-table-head>Field Name</md-table-head>
+                          <md-table-head>Value</md-table-head>
+                        </md-table-row>
+
+                        <md-table-row>
+                          <md-table-cell>{{ fieldName }}</md-table-cell>
+                          <md-table-cell>
+                            <md-chip v-for="(element, i) in value" @md-delete="deleteValue(value, i)" md-deletable :key="`${i}`">{{ element }}</md-chip>
+                          </md-table-cell>
+                        </md-table-row>
+
+                      </md-table>
+
+                      <md-table v-if="!!Object.keys(uploadedData).length">
+                        <md-table-toolbar ><h1 class="md-title u--color-success">Update Successful</h1></md-table-toolbar>
+
+                        <md-table-row>
+                          <md-table-head>FieldName</md-table-head>
+                          <md-table-head>Value</md-table-head>
+                          <md-table-head>User</md-table-head>
+                        </md-table-row>
+
+                        <md-table-row>
+                          <md-table-cell>{{ uploadedData.field }}</md-table-cell>
+                          <md-table-cell>
+                            <md-chip v-for="(element, i) in uploadedData['values']" :key="`${i}`">{{ element }}</md-chip>
+                          </md-table-cell>
+                          <md-table-cell>{{ uploadedData.user ?? '' }}</md-table-cell>
+                        </md-table-row>
+
+                      </md-table>
+                    </div>
+
+                    <div>
+                      <md-field style="align-items: baseline;">
+                        <p style="margin-right: 4px;font-weight: bold;">FieldName:</p>
+                        <md-input v-model="fieldName" @keyup.enter="submitSearch" id="fieldName"></md-input>
+                      </md-field>
+
+                      <md-field style="align-items: baseline;">
+                        <p style="margin-right: 4px;font-weight: bold;">Value:</p>
+                        <md-input v-model="currValue" @keyup.enter="insertValue" :disabled="!editMode && !Object.keys(uploadedData).length" id="fieldValue"></md-input>
+                        <md-button class="md-icon-button md-dense" @click="insertValue">
+                          <md-icon>add</md-icon>
+                        </md-button>
+                      </md-field>
+
+                      <div class="form__group search_box_form-item-2 explorer_page-nav u_margin-top-med">
+                        <button type="submit"
+                          class="btn btn--tertiary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
+                          @click.prevent="submitSearch">  Search </button>
+
+                        <button type="submit"
+                          class="btn btn--primary btn--noradius search_box_form_btn mid-first-li display-text u--margin-pos"
+                          @click.prevent="update"
+                        >
+                        Submit
+                        </button>
+                      </div>
+                    </div>
+
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import { SEARCH_SPREADSHEETLIST_QUERY, UPDATE_SPREADSHEETLIST } from '@/modules/gql/material-gql.js'
+export default {
+  name: 'SpreadsheetUpdate',
+  data () {
+    return {
+      loading: false,
+      pageNumber: 1,
+      searchMode: true,
+      editMode: false,
+      spreadsheetList: [],
+      uploadedData: {},
+      fieldName: '',
+      currValue: '',
+      value: []
+    }
+  },
+  computed: {
+    searchValue () {
+      return this.fieldName.trim().split(' ').join('_')
+    }
+  },
+  methods: {
+    resetState () {
+      this.spreadsheetList = []
+      this.uploadedData = {}
+      this.value = []
+      this.currValue = ''
+    },
+    onSelect (item) {
+      if (item) {
+        this.fieldName = item.field
+        this.value = item.values
+        this.editMode = true
+      }
+    },
+    insertValue () {
+      if (!this.currValue.trim().length) return
+      if (!this.value.includes(this.currValue.trim())) {
+        this.value.push(this.currValue)
+        this.currValue = ''
+        return
+      }
+      this.$store.commit('setSnackbar', {
+        message: 'Duplicate Value Entered',
+        duration: 3000
+      })
+    },
+    deleteValue (arr, e) {
+      arr.splice(e, 1)
+    },
+    async submitSearch () {
+      if (!this.fieldName.trim()) return
+      const searchValue = this.searchValue
+      this.searchMode = false
+
+      try {
+        const response = await this.$apollo.query({
+          query: SEARCH_SPREADSHEETLIST_QUERY,
+          variables: {
+            input: {
+              field: searchValue,
+              pageNumber: this.pageNumber,
+              pageSize: 20
+            }
+          },
+          fetchPolicy: 'no-cache'
+        })
+        if (!response) {
+          const error = new Error('Something went wrong!')
+          throw error
+        }
+        const result = response?.data?.getXlsxCurationList
+        this.resetState()
+        this.editMode = false
+        this.spreadsheetList = result.columns || []
+        this.value = []
+        this.pageNumber = result.pageNumber || 1
+      } catch (error) {
+        this.$store.commit('setSnackbar', {
+          message: 'Something went wrong',
+          action: () => this.submitSearch()
+        })
+        this.searchMode = true
+      }
+    },
+
+    async update () {
+      if (!!this.fieldName && !this.value.length) {
+        return this.$store.commit('setSnackbar', {
+          message: 'Field Value Required',
+          duration: 2500
+        })
+      }
+
+      try {
+        const response = await this.$apollo.mutate({
+          mutation: UPDATE_SPREADSHEETLIST,
+          variables: {
+            input: { field: this.searchValue, values: this.value }
+          }
+        })
+        this.uploadedData = { ...response.data.updateXlsxCurationList }
+        this.$store.commit('setSnackbar', {
+          message: 'Update Successful',
+          duration: 4000
+        })
+      } catch (error) {
+        if (error.message.search(/not authenticated/i) !== -1) {
+          return this.$store.commit('setSnackbar', {
+            message: error.message ?? 'Something went wrong',
+            duration: 5000
+          })
+        }
+        this.$store.commit('setSnackbar', {
+          message: 'Something went wrong',
+          action: () => this.update()
+        })
+      }
+    }
+
+  }
+}
+</script>