bramw_baserow/web-frontend/modules/database/components/docs/APIDocsSelectDatabase.vue

<template>
  <div class="select-application">
    <template v-if="hasDatabases">
      <APIDocsSelectDatabaseGroup
        v-for="group in groups"
        :key="group.id"
        :group="group"
        :selected="selected"
      ></APIDocsSelectDatabaseGroup>
    </template>
    <p v-else>
      You need to have at least one database to view the API documentation.
    </p>
    <nuxt-link :to="{ name: 'dashboard' }" class="select-application__back">
      <i class="fas fa-arrow-left"></i>
      Back to dashboard
    </nuxt-link>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import { DatabaseApplicationType } from '@baserow/modules/database/applicationTypes'
import APIDocsSelectDatabaseGroup from '@baserow/modules/database/components/docs/APIDocsSelectDatabaseGroup'

export default {
  name: 'APIDocsSelectDatabase',
  components: { APIDocsSelectDatabaseGroup },
  props: {
    selected: {
      type: Number,
      required: false,
      default: -1,
    },
  },
  computed: {
    hasDatabases() {
      const databaseType = DatabaseApplicationType.getType()
      return (
        this.$store.getters['application/getAll'].filter(
          (application) => application.type === databaseType
        ).length > 0
      )
    },
    ...mapState({
      groups: (state) => state.group.items,
    }),
  },
}
</script>