bramw_baserow/web-frontend/modules/database/components/view/grid/GridViewRowAdd.vue

<template>
  <div class="grid-view__row" :style="{ width: width + 'px' }">
    <div class="grid-view__column" :style="{ width: width + 'px' }">
      <a
        class="grid-view__add-row"
        :class="{ hover: addHover }"
        @mouseover="setHover(true)"
        @mouseleave="setHover(false)"
        @click="addRow"
      >
        <i v-if="includeRowDetails" class="fas fa-plus"></i>
      </a>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import gridViewHelpers from '@baserow/modules/database/mixins/gridViewHelpers'

export default {
  name: 'GridViewRowAdd',
  mixins: [gridViewHelpers],
  props: {
    fields: {
      type: Array,
      required: true,
    },
    includeRowDetails: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    width() {
      let width = this.fields.reduce(
        (value, field) => this.getFieldWidth(field.id) + value,
        0
      )
      if (this.includeRowDetails) {
        width += this.gridViewRowDetailsWidth
      }
      return width
    },
  },
  beforeCreate() {
    this.$options.computed = {
      ...(this.$options.computed || {}),
      ...mapGetters({
        addHover:
          this.$options.propsData.storePrefix + 'view/grid/getAddRowHover',
      }),
    }
  },
  methods: {
    setHover(value) {
      this.$store.dispatch(this.storePrefix + 'view/grid/setAddRowHover', value)
    },
    addRow(event) {
      event.preventFieldCellUnselect = true
      this.$emit('add-row')
    },
  },
}
</script>