doccano/frontend/components/comment/Comment.vue

<template>
  <v-card class="elevation-0">
    <v-card-title>
      <v-list-item class="grow ps-0">
        <v-list-item-avatar>
          <v-icon large>
            {{ mdiAccountCircle }}
          </v-icon>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>{{ comment.username }}</v-list-item-title>
          <v-list-item-subtitle>
            {{ comment.createdAt | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('DD/MM/YYYY HH:mm') }}
          </v-list-item-subtitle>
        </v-list-item-content>

        <v-row
          align="center"
          justify="end"
        >
          <v-menu
            v-if="comment.user == userId"
            bottom
            left
          >
            <template #activator="{ on, attrs }">
              <v-btn
                icon
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>{{ mdiDotsVertical }}</v-icon>
              </v-btn>
            </template>

            <v-list>
              <v-list-item>
                <v-list-item-title
                  @click="showEdit=true"
                >
                  Edit
                </v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title
                  @click="$emit('delete-comment', comment)"
                >
                  Delete
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-row>
      </v-list-item>
    </v-card-title>

    <v-card-text class="body-1">
      <span v-if="!showEdit">
        {{ comment.text }}
      </span>
      <v-form
        v-else
        v-model="valid"
      >
        <v-row>
          <v-textarea
            v-model="editText"
            auto-grow
            rows="1"
            solo
            :rules="commentRules"
          />
        </v-row>
        <v-row justify="end">
          <v-btn
            text
            class="text-capitalize"
            @click="cancel"
          >
            Cancel
          </v-btn>
          <v-btn
            :disabled="!valid"
            color="primary"
            class="text-capitalize"
            @click="updateComment(editText)"
          >
            Update
          </v-btn>
        </v-row>
      </v-form>
    </v-card-text>
    <v-divider />
  </v-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { mdiAccountCircle, mdiDotsVertical } from '@mdi/js'
import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
Vue.use(VueFilterDateFormat)
Vue.use(VueFilterDateParse)

export default Vue.extend({
  props: {
    comment: {
      required: true,
      type: Object
    },
    userId: {
      required: true,
      type: Number
    }
  },

  data() {
    return {
      showEdit: false,
      editText: this.comment.text,
      commentRules: [
        (v: string) => !!v.trim() || 'Comment is required'
      ],
      valid: false,
      mdiAccountCircle,
      mdiDotsVertical
    }
  },

  methods: {
    updateComment(newText: string) {
      this.showEdit = false
      const comment = {...this.comment, text:newText }
      this.$emit('update-comment', comment)
    },
    
    cancel() {
      this.showEdit = false
      this.editText = this.comment.text
    }
  }
})
</script>