summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
blob: 8a86c409b6292841468049d7a55c928a0006038d (plain)
1
2
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script>
  import Flash from '../../../flash';
  import editForm from './edit_form.vue';
  import Icon from '../../../vue_shared/components/icon.vue';
  import { __ } from '../../../locale';

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

<template>
  <div class="block issuable-sidebar-item confidentiality">
    <div class="sidebar-collapsed-icon">
      <icon
        :name="confidentialityIcon"
        :size="16"
        aria-hidden="true"
      />
    </div>
    <div class="title hide-collapsed">
      {{ __('Confidentiality') }}
      <a
        v-if="isEditable"
        class="pull-right confidential-edit"
        href="#"
        @click.prevent="toggleForm"
      >
        {{ __('Edit') }}
      </a>
    </div>
    <div class="value sidebar-item-value hide-collapsed">
      <editForm
        v-if="edit"
        :toggle-form="toggleForm"
        :is-confidential="isConfidential"
        :update-confidential-attribute="updateConfidentialAttribute"
      />
      <div
        v-if="!isConfidential"
        class="no-value sidebar-item-value">
        <icon
          name="eye"
          :size="16"
          aria-hidden="true"
          class="sidebar-item-icon inline"
        />
        {{ __('Not confidential') }}
      </div>
      <div
        v-else
        class="value sidebar-item-value hide-collapsed">
        <icon
          name="eye-slash"
          :size="16"
          aria-hidden="true"
          class="sidebar-item-icon inline is-active"
        />
        {{ __('This issue is confidential') }}
      </div>
    </div>
  </div>
</template>