Skip to content
Snippets Groups Projects
Select Git revision
  • fd80bc89069c285791039bb9bc3f6e769679d3b3
  • master default protected
  • dev-lkugler
  • teaching-2024
  • old_config_2023-05 protected
  • v2025.2
  • v2024.6
  • v2024.2.20
8 results

obsseq.py

Blame
  • Builder.vue 3.97 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>mdi-refresh</v-icon>
              Execute
            </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>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          table: null,
          tables: [],
          tableDetails: 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)
        }
      },
      watch: {
        clauses: {
          deep: true,
          handler () {
            this.buildQuery()
          }
        }
      },
      async mounted () {
        // XXX same as in TableList
        try {
          const res = await this.$axios.get(
            `/api/database/${this.$route.params.database_id}/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.$route.params.database_id}/query`, {
              Query: query
            })
            console.debug('query result', res)
            this.$toast.success('Successfully executed query')
            this.loading = false
            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 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.$route.params.database_id}/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;
      justify-content: center;
    }
    </style>