board_form.vue 6.8 KB
Newer Older
Simon Knox's avatar
Simon Knox committed
1 2 3
<script>
/* global BoardService */

4
import Flash from '~/flash';
5 6
import modal from '~/vue_shared/components/modal.vue';
import { visitUrl } from '~/lib/utils/url_utility';
Simon Knox's avatar
Simon Knox committed
7
import BoardMilestoneSelect from './milestone_select.vue';
Simon Knox's avatar
Simon Knox committed
8
import BoardWeightSelect from './weight_select.vue';
Simon Knox's avatar
Simon Knox committed
9
import BoardLabelsSelect from './labels_select.vue';
Simon Knox's avatar
Simon Knox committed
10
import AssigneeSelect from './assignee_select.vue';
Simon Knox's avatar
Simon Knox committed
11 12 13 14 15

window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};

const Store = gl.issueBoards.BoardsStore;
16 17 18 19 20 21 22 23 24
const boardDefaults = {
  id: false,
  name: '',
  labels: [],
  milestone_id: undefined,
  assignee: {},
  assignee_id: undefined,
  weight: null,
};
Simon Knox's avatar
Simon Knox committed
25

Simon Knox's avatar
Simon Knox committed
26
export default {
27 28 29 30 31 32 33
  components: {
    AssigneeSelect,
    BoardLabelsSelect,
    BoardMilestoneSelect,
    BoardWeightSelect,
    modal,
  },
Simon Knox's avatar
Simon Knox committed
34
  props: {
Simon Knox's avatar
Simon Knox committed
35 36 37 38 39
    canAdminBoard: {
      type: Boolean,
      required: true,
    },
    milestonePath: {
Simon Knox's avatar
Simon Knox committed
40
      type: String,
41
      required: true,
Simon Knox's avatar
Simon Knox committed
42
    },
Simon Knox's avatar
Simon Knox committed
43 44
    labelsPath: {
      type: String,
45 46
      required: true,
    },
47 48 49 50 51
    scopedIssueBoardFeatureEnabled: {
      type: Boolean,
      required: false,
      default: false,
    },
Simon Knox's avatar
Simon Knox committed
52
    projectId: {
53
      type: Number,
Simon Knox's avatar
Simon Knox committed
54
      required: false,
55
      default: 0,
Simon Knox's avatar
Simon Knox committed
56 57
    },
    groupId: {
58
      type: Number,
Simon Knox's avatar
Simon Knox committed
59
      required: false,
60
      default: 0,
Simon Knox's avatar
Simon Knox committed
61
    },
62 63 64
    weights: {
      type: String,
      required: false,
65
      default: '',
66
    },
Simon Knox's avatar
Simon Knox committed
67 68 69
  },
  data() {
    return {
70
      board: { ...boardDefaults, ...this.currentBoard },
71
      expanded: false,
Simon Knox's avatar
Simon Knox committed
72 73 74 75 76
      issue: {},
      currentBoard: Store.state.currentBoard,
      currentPage: Store.state.currentPage,
      milestones: [],
      milestoneDropdownOpen: false,
77
      isLoading: false,
Simon Knox's avatar
Simon Knox committed
78 79 80
    };
  },
  computed: {
81 82 83 84 85 86 87 88 89
    isNewForm() {
      return this.currentPage === 'new';
    },
    isDeleteForm() {
      return this.currentPage === 'delete';
    },
    isEditForm() {
      return this.currentPage === 'edit';
    },
90 91 92
    isVisible() {
      return this.currentPage !== '';
    },
Simon Knox's avatar
Simon Knox committed
93
    buttonText() {
94
      if (this.isNewForm) {
95
        return 'Create board';
Simon Knox's avatar
Simon Knox committed
96
      }
97
      if (this.isDeleteForm) {
98 99
        return 'Delete';
      }
100
      return 'Save changes';
Simon Knox's avatar
Simon Knox committed
101
    },
102
    buttonKind() {
103 104 105
      if (this.isNewForm) {
        return 'success';
      }
106
      if (this.isDeleteForm) {
107 108 109 110
        return 'danger';
      }
      return 'info';
    },
Simon Knox's avatar
Simon Knox committed
111
    title() {
112
      if (this.isNewForm) {
Simon Knox's avatar
Simon Knox committed
113 114
        return 'Create new board';
      }
115
      if (this.isDeleteForm) {
116 117 118 119 120
        return 'Delete board';
      }
      if (this.readonly) {
        return 'Board scope';
      }
Simon Knox's avatar
Simon Knox committed
121 122
      return 'Edit board';
    },
123
    expandButtonText() {
Simon Knox's avatar
Simon Knox committed
124
      return this.expanded ? 'Collapse' : 'Expand';
125 126
    },
    collapseScope() {
127
      return this.isNewForm;
128 129 130 131
    },
    readonly() {
      return !this.canAdminBoard;
    },
132 133
    weightsArray() {
      return JSON.parse(this.weights);
Simon Knox's avatar
Simon Knox committed
134
    },
135 136 137
    submitDisabled() {
      return this.isLoading || this.board.name.length === 0;
    },
Simon Knox's avatar
Simon Knox committed
138
  },
139 140 141 142 143 144
  mounted() {
    this.resetFormState();
    if (this.$refs.name) {
      this.$refs.name.focus();
    }
  },
Simon Knox's avatar
Simon Knox committed
145 146
  methods: {
    submit() {
147 148
      if (this.board.name.length === 0) return;
      this.isLoading = true;
149
      if (this.isDeleteForm) {
Simon Knox's avatar
Simon Knox committed
150
        gl.boardService.deleteBoard(this.currentBoard)
151
          .then(() => {
Phil Hughes's avatar
Phil Hughes committed
152
            visitUrl(Store.rootPath);
Simon Knox's avatar
Simon Knox committed
153 154
          })
          .catch(() => {
Simon Knox's avatar
Simon Knox committed
155
            Flash('Failed to delete board. Please try again.');
156
            this.isLoading = false;
Simon Knox's avatar
Simon Knox committed
157 158 159
          });
      } else {
        gl.boardService.createBoard(this.board)
Eric Eastwood's avatar
Eric Eastwood committed
160
          .then(resp => resp.data)
Simon Knox's avatar
Simon Knox committed
161
          .then((data) => {
Phil Hughes's avatar
Phil Hughes committed
162
            visitUrl(data.board_path);
Simon Knox's avatar
Simon Knox committed
163 164
          })
          .catch(() => {
Simon Knox's avatar
Simon Knox committed
165
            Flash('Unable to save your changes. Please try again.');
166
            this.isLoading = false;
Simon Knox's avatar
Simon Knox committed
167 168
          });
      }
Simon Knox's avatar
Simon Knox committed
169 170 171 172
    },
    cancel() {
      Store.state.currentPage = '';
    },
173
    resetFormState() {
Simon Knox's avatar
Simon Knox committed
174
      if (this.isNewForm) {
175
        // Clear the form when we open the "New board" modal
176
        this.board = { ...boardDefaults };
Simon Knox's avatar
Simon Knox committed
177
      } else if (this.currentBoard && Object.keys(this.currentBoard).length) {
178
        this.board = { ...boardDefaults, ...this.currentBoard };
179 180
      }
    },
Simon Knox's avatar
Simon Knox committed
181
  },
Simon Knox's avatar
Simon Knox committed
182
};
Simon Knox's avatar
Simon Knox committed
183
</script>
Simon Knox's avatar
Simon Knox committed
184 185

<template>
186
  <modal
187
    v-show="isVisible"
188
    modal-dialog-class="board-config-modal"
Simon Knox's avatar
Simon Knox committed
189
    :hide-footer="readonly"
Simon Knox's avatar
Simon Knox committed
190 191 192 193
    :title="title"
    :primary-button-label="buttonText"
    :kind="buttonKind"
    :submit-disabled="submitDisabled"
194
    @cancel="cancel"
Simon Knox's avatar
Simon Knox committed
195 196
    @submit="submit"
  >
197 198 199 200 201 202 203
    <template slot="body">
      <p v-if="isDeleteForm">
        Are you sure you want to delete this board?
      </p>
      <form
        v-else
        class="js-board-config-modal"
204
        @submit.prevent
Simon Knox's avatar
Simon Knox committed
205 206
      >
        <div
207 208
          v-if="!readonly"
          class="append-bottom-20"
Simon Knox's avatar
Simon Knox committed
209
        >
210 211 212 213 214
          <label
            class="form-section-title label-light"
            for="board-new-name"
          >
            Board name
Simon Knox's avatar
Simon Knox committed
215
          </label>
216 217 218 219 220 221
          <input
            ref="name"
            class="form-control"
            type="text"
            id="board-new-name"
            v-model="board.name"
222
            @keyup.enter="submit"
223
            placeholder="Enter board name"
224
          />
Simon Knox's avatar
Simon Knox committed
225
        </div>
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251
        <div v-if="scopedIssueBoardFeatureEnabled">
          <div
            v-if="canAdminBoard"
            class="media append-bottom-10"
          >
            <label class="form-section-title label-light media-body">
              Board scope
            </label>
            <button
              type="button"
              class="btn"
              @click="expanded = !expanded"
              v-if="collapseScope"
            >
              {{ expandButtonText }}
            </button>
          </div>
          <p class="text-secondary append-bottom-10">
            Board scope affects which issues are displayed for anyone who visits this board
          </p>
          <div v-if="!collapseScope || expanded">
            <board-milestone-select
              :board="board"
              :milestone-path="milestonePath"
              :can-edit="canAdminBoard"
            />
Simon Knox's avatar
Simon Knox committed
252

253 254 255 256 257
            <board-labels-select
              :board="board"
              :can-edit="canAdminBoard"
              :labels-path="labelsPath"
            />
Simon Knox's avatar
Simon Knox committed
258

Simon Knox's avatar
Simon Knox committed
259
            <assignee-select
260 261 262 263 264 265 266 267 268 269 270
              any-user-text="Any assignee"
              :board="board"
              field-name="assignee_id"
              label="Assignee"
              :selected="board.assignee"
              :can-edit="canAdminBoard"
              placeholder-text="Select assignee"
              :project-id="projectId"
              :group-id="groupId"
              wrapper-class="assignee"
            />
Simon Knox's avatar
Simon Knox committed
271

272 273 274 275 276 277 278
            <board-weight-select
              :board="board"
              :weights="weightsArray"
              v-model="board.weight"
              :can-edit="canAdminBoard"
            />
          </div>
Simon Knox's avatar
Simon Knox committed
279
        </div>
280 281
      </form>
    </template>
282
  </modal>
Simon Knox's avatar
Simon Knox committed
283
</template>