confidential_issue_sidebar.vue 1.92 KB
Newer Older
1
<script>
Phil Hughes's avatar
Phil Hughes committed
2
import Flash from '../../../flash';
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
import editForm from './edit_form.vue';

export default {
  components: {
    editForm,
  },
  props: {
    isConfidential: {
      required: true,
      type: Boolean,
    },
    isEditable: {
      required: true,
      type: Boolean,
    },
    service: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      edit: false,
    };
  },
  computed: {
    faEye() {
      const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye';
      return {
        [eye]: true,
      };
    },
  },
  methods: {
    toggleForm() {
      this.edit = !this.edit;
    },
    updateConfidentialAttribute(confidential) {
      this.service.update('issue', { confidential })
        .then(() => location.reload())
        .catch(() => new Flash('Something went wrong trying to change the confidentiality of this issue'));
    },
  },
};
</script>

<template>
50
  <div class="block issuable-sidebar-item confidentiality">
51
    <div class="sidebar-collapsed-icon">
52
      <i class="fa" :class="faEye" aria-hidden="true"></i>
53 54 55 56 57 58 59 60 61 62 63 64
    </div>
    <div class="title hide-collapsed">
      Confidentiality
      <a
        v-if="isEditable"
        class="pull-right confidential-edit"
        href="#"
        @click.prevent="toggleForm"
      >
        Edit
      </a>
    </div>
65
    <div class="value sidebar-item-value hide-collapsed">
66 67 68 69 70 71
      <editForm
        v-if="edit"
        :toggle-form="toggleForm"
        :is-confidential="isConfidential"
        :update-confidential-attribute="updateConfidentialAttribute"
      />
72 73
      <div v-if="!isConfidential" class="no-value sidebar-item-value">
        <i class="fa fa-eye sidebar-item-icon"></i>
Regis's avatar
Regis committed
74
        Not confidential
75
      </div>
76 77
      <div v-else class="value sidebar-item-value hide-collapsed">
        <i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i>
78 79 80 81 82
        This issue is confidential
      </div>
    </div>
  </div>
</template>