doccano/frontend/components/configAutoLabeling/form/ObjectField.vue

<template>
  <v-data-table
    :headers="headers"
    :items="value"
  >
    <template #top>
      <v-toolbar
        class="toolbar-control"
        flat
      >
        <v-toolbar-title class="text-capitalize">
          {{ title }}
        </v-toolbar-title>
        <v-spacer />
        <v-dialog
          v-model="dialog"
          max-width="800px"
        >
          <template #activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              class="text-none"
              v-bind="attrs"
              v-on="on"
            >
              Add
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">Add a new field</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-form
                  ref="form"
                  v-model="valid"
                >
                  <v-row>
                    <v-col
                      cols="12"
                      sm="12"
                      class="pa-0"
                    >
                      <v-text-field
                        v-model="editedItem.key"
                        label="Key"
                        outlined
                      />
                    </v-col>
                    <v-col
                      cols="12"
                      sm="12"
                      class="pa-0"
                    >
                      <v-text-field
                        v-model="editedItem.value"
                        label="Value"
                        outlined
                      />
                    </v-col>
                  </v-row>
                </v-form>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer />
              <v-btn
                color="blue darken-1"
                class="text-capitalize"
                text
                @click="close"
              >
                Cancel
              </v-btn>
              <v-btn
                :disabled="!valid"
                color="blue darken-1"
                class="text-capitalize"
                text
                @click="save"
              >
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template #[`item.actions`]="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        {{ mdiPencil }}
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        {{ mdiDelete }}
      </v-icon>
    </template>
  </v-data-table>
</template>

<script lang="ts">
import Vue from 'vue'
import { mdiPencil, mdiDelete } from '@mdi/js'

export default Vue.extend({

  props: {
    value: {
      type: Array,
      default: () => [],
      required: true
    },
    title: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      headers: [
        {
          text: 'Key',
          align: 'left',
          value: 'key',
          sortable: false
        },
        {
          text: 'Value',
          align: 'left',
          value: 'value',
          sortable: false
        },
        {
          text: 'Actions',
          value: 'actions',
          sortable: false
        }
      ],
      dialog: false,
      valid: false,
      editedIndex: -1,
      editedItem: {
        'key': '',
        'value': ''
      },
      defaultItem: {
        'key': '',
        'value': ''
      },
      items: [] as string[],
      mdiPencil,
      mdiDelete
    }
  },

  methods: {
    editItem(item: {'key': string, 'value': string}) {
      this.editedIndex = this.value.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem(item: {'key': string, 'value': string}) {
      this.editedIndex = this.value.indexOf(item)
      this.editedItem = Object.assign({}, item)
      const items = Object.assign([], this.value)
      items.splice(this.editedIndex, 1)
      this.editedItem = Object.assign({}, this.defaultItem)
      this.editedIndex = -1
      this.$emit('input', items)
    },

    close() {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save() {
      const items = Object.assign([], this.value)
      if (this.editedIndex > -1) {
        Object.assign(items[this.editedIndex], this.editedItem)
      } else {
        items.push(this.editedItem)
      }
      this.close()
      this.$emit('input', items)
    }
  }
})
</script>

<style scoped>
.toolbar-control >>> .v-toolbar__content {
  padding: 0px !important;
}
</style>