All files / app/assets/javascripts/boards/components board_new_issue.vue

95% Statements 19/20
77.77% Branches 7/9
100% Functions 10/10
95% Lines 19/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120              12x                                             15x               30x     15x           11x 11x                             15x     4x         4x 4x 4x   4x                     2x 2x           2x   2x 1x     2x     1x                                  
<script>
import { s__ } from '~/locale';
import { getMilestone, formatIssueInput, getBoardQuery } from 'ee_else_ce/boards/boards_util';
 
import { setError } from '../graphql/cache_updates';
 
import BoardNewItem from './board_new_item.vue';
import ProjectSelect from './project_select.vue';
 
export default {
  name: 'BoardNewIssue',
  i18n: {
    errorFetchingBoard: s__('Boards|An error occurred while fetching board. Please try again.'),
  },
  components: {
    BoardNewItem,
    ProjectSelect,
  },
  inject: ['boardType', 'groupId', 'fullPath', 'isGroupBoard', 'isEpicBoard'],
  props: {
    list: {
      type: Object,
      required: true,
    },
    boardId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      selectedProject: {},
      board: {},
    };
  },
  apollo: {
    board: {
      query() {
        return getBoardQuery(this.boardType, this.isEpicBoard);
      },
      variables() {
        return {
          fullPath: this.fullPath,
          boardId: this.boardId,
        };
      },
      update(data) {
        const { board } = data.workspace;
        return {
          ...board,
          labels: board.labels?.nodes,
        };
      },
      error(error) {
        setError({
          error,
          message: this.$options.i18n.errorFetchingBoard,
        });
      },
    },
  },
  computed: {
    disableSubmit() {
      return this.isGroupBoard ? !this.selectedProject.name : false;
    },
    projectPath() {
      return this.isGroupBoard ? this.selectedProject.fullPath : this.fullPath;
    },
  },
  methods: {
    submit({ title }) {
      const labels = this.list.label ? [this.list.label] : [];
      const assignees = this.list.assignee ? [this.list.assignee] : [];
      const milestone = getMilestone(this.list);
 
      return this.addNewIssueToList({
        issueInput: {
          title,
          labelIds: labels?.map((l) => l.id),
          assigneeIds: assignees?.map((a) => a?.id),
          milestoneId: milestone?.id,
          projectPath: this.projectPath,
        },
      });
    },
    addNewIssueToList({ issueInput }) {
      const { labels, assignee, milestone, weight } = this.board;
      const config = {
        labels,
        assigneeId: assignee?.id || null,
        milestoneId: milestone?.id || null,
        weight,
      };
      const input = formatIssueInput(issueInput, config);
 
      if (!this.isGroupBoard) {
        input.projectPath = this.fullPath;
      }
 
      this.$emit('addNewIssue', input);
    },
    cancel() {
      this.$emit('toggleNewForm');
    },
  },
};
</script>
 
<template>
  <board-new-item
    :list="list"
    :submit-button-title="__('Create issue')"
    :disable-submit="disableSubmit"
    @form-submit="submit"
    @form-cancel="cancel"
  >
    <project-select v-if="isGroupBoard" v-model="selectedProject" :list="list" />
  </board-new-item>
</template>