Skip to content
Snippets Groups Projects
Select Git revision
  • b0799e97ec50970db303d950ac3e681db29579e2
  • master default protected
  • replication_test
  • dev protected
  • release-1.10 protected
  • release-1.9 protected
  • 551-init-broker-service-permissions
  • 549-test-oai-pmh
  • 545-saving-multiple-times-breaks-pid-metadata
  • 499-standalone-compute-service-2
  • 539-load-tests
  • hotfix/helm-chart
  • luca_ba_new_interface
  • 534-bug-when-adding-access-to-user-that-is-not-registered-at-dashboard-service
  • release-1.8 protected
  • 533-integrate-semantic-recommendation
  • feature/openshift
  • 518-spark-doesn-t-map-the-headers-correct
  • 485-fixity-checks
  • 530-various-schema-problems-with-subsets
  • release-1.7 protected
  • v1.10.2 protected
  • v1.10.1 protected
  • v1.10.0-rc13 protected
  • v1.10.0-rc12 protected
  • v1.10.0-rc11 protected
  • v1.10.0-rc10 protected
  • v1.10.0-rc9 protected
  • v1.10.0-rc8 protected
  • v1.10.0-rc7 protected
  • v1.10.0-rc6 protected
  • v1.10.0-rc5 protected
  • v1.10.0-rc4 protected
  • v1.10.0-rc3 protected
  • v1.10.0-rc2 protected
  • v1.10.0rc1 protected
  • v1.10.0rc0 protected
  • v1.10.0 protected
  • v1.9.3 protected
  • v1.9.2 protected
  • v1.9.2-rc0 protected
41 results

Builder.vue

Blame
  • Martin Weise's avatar
    Martin Weise authored
    Former-commit-id: 9a8e22c2
    b0799e97
    History
    Builder.vue 5.00 KiB
    <template>
      <div>
        <v-row dense>
          <v-col cols="6">
            <v-select
              v-model="table"
              :items="tables"
              item-text="name"
              return-object
              label="Table"
              @change="loadColumns" />
          </v-col>
          <v-col cols="6">
            <v-select
              v-model="select"
              item-text="name"
              :disabled="!table"
              :items="selectItems"
              label="Columns"
              return-object
              multiple
              @change="buildQuery" />
          </v-col>
        </v-row>
        <!--    <QueryFilters-->
        <!--      v-if="table"-->
        <!--      v-model="clauses"-->
        <!--      :columns="columnNames" />-->
        <v-row v-if="query.formatted">
          <v-col>
            <highlightjs autodetect :code="query.formatted" />
          </v-col>
          <v-col cols="3" class="actions">
            <v-btn class="execute" color="primary" @click="execute">
              <v-icon left>mdi-run</v-icon>
              Execute
            </v-btn>
            <div class="break"></div>
            <v-btn class="execute" @click="save">
              Save
            </v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <p>Results</p>
            <v-data-table
              :headers="result.headers"
              :items="result.rows"
              :loading="loading"
              :items-per-page="30"
              class="elevation-1" />
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-btn v-if="queryId" color="primary" :to="`/databases/${databaseId}/queries/${queryId}`">
              <v-icon left>mdi-fingerprint</v-icon>
              Obtain Query DOI
            </v-btn>
          </v-col>
        </v-row>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          table: null,
          tables: [],
          tableDetails: null,
          queryId: null,
          query: {},
          select: [],
          clauses: [],
          result: {
            headers: [],
            rows: []
          },
          loading: false
        }
      },
      computed: {
        selectItems () {
          const columns = this.tableDetails && this.tableDetails.columns
          return columns || []
        },
        columnNames () {
          return this.selectItems && this.selectItems.map(s => s.name)
        },
        databaseId () {
          return this.$route.params.database_id
        }
      },
      watch: {
        clauses: {
          deep: true,
          handler () {
            this.buildQuery()
          }
        }
      },
      async mounted () {
        // XXX same as in TableList
        try {
          const res = await this.$axios.get(
            `/api/database/${this.databaseId}/table`)
          this.tables = res.data
        } catch (err) {
          this.$toast.error('Could not list table.')
        }
      },
      methods: {
        async execute () {
          const query = this.query.sql.replaceAll('`', '')
          this.loading = true
          try {
            const res = await this.$axios.put(`/api/database/${this.databaseId}/query`, {
              Query: query
            })
            console.debug('query result', res)
            this.$toast.success('Successfully executed query')
            this.loading = false
            this.queryId = res.data.id
            this.result.headers = this.select.map((s) => {
              return { text: s.name, value: 'mdb_' + s.name, sortable: false }
            })
            this.result.rows = res.data.result
          } catch (err) {
            console.error('query execute', err)
            this.$toast.error('Could not execute query')
            this.loading = false
          }
        },
        async save () {
          const query = this.query.sql.replaceAll('`', '')
          this.loading = true
          try {
            const res = await this.$axios.put(`/api/database/${this.databaseId}/save`, {
              Query: query
            })
            console.debug('query result', res)
            this.$toast.success('Successfully saved query')
            this.loading = false
            this.queryId = res.data.id
          } catch (err) {
            console.error('query save', err)
            this.$toast.error('Could not save query')
            this.loading = false
          }
        },
        async buildQuery () {
          if (!this.table) {
            return
          }
          const url = '/server-middleware/query/build'
          const data = {
            table: this.table.internalName,
            select: this.select.map(s => 'mdb_' + s.name),
            clauses: this.clauses
          }
          try {
            const res = await this.$axios.post(url, data)
            if (res && !res.error) {
              this.query = res.data
            }
          } catch (e) {
            console.log(e)
          }
        },
        async loadColumns () {
          const tableId = this.table.id
          try {
            const res = await this.$axios.get(`/api/database/${this.databaseId}/table/${tableId}`)
            this.tableDetails = res.data
            this.buildQuery()
          } catch (err) {
            this.$toast.error('Could not get table details.')
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    /* these are taked from solarized-light (plugins/vendors.js), to override the
    main.scss file from vuetify, because it paints it red */
    ::v-deep code {
      background: #fdf6e3;
      color: #657b83;
    }
    
    .actions {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .break {
      flex-basis: 100%;
      height: 0;
    }
    </style>