debian-mirror-gitlab/app/assets/javascripts/boards/components/sidebar/remove_issue.vue

<script>
import { GlButton } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { deprecatedCreateFlash as Flash } from '../../../flash';
import { __ } from '../../../locale';
import boardsStore from '../../stores/boards_store';

export default {
  components: {
    GlButton,
  },
  props: {
    issue: {
      type: Object,
      required: true,
    },
    list: {
      type: Object,
      required: true,
    },
  },
  computed: {
    updateUrl() {
      return this.issue.path;
    },
  },
  methods: {
    removeIssue() {
      const { issue } = this;
      const lists = issue.getLists();
      const req = this.buildPatchRequest(issue, lists);

      const data = {
        issue: this.seedPatchRequest(issue, req),
      };

      if (data.issue.label_ids.length === 0) {
        data.issue.label_ids = [''];
      }

      // Post the remove data
      axios.patch(this.updateUrl, data).catch(() => {
        Flash(__('Failed to remove issue from board, please try again.'));

        lists.forEach((list) => {
          list.addIssue(issue);
        });
      });

      // Remove from the frontend store
      lists.forEach((list) => {
        list.removeIssue(issue);
      });

      boardsStore.clearDetailIssue();
    },
    /**
     * Build the default patch request.
     */
    buildPatchRequest(issue, lists) {
      const listLabelIds = lists.map((list) => list.label.id);

      const labelIds = issue.labels
        .map((label) => label.id)
        .filter((id) => !listLabelIds.includes(id));

      return {
        label_ids: labelIds,
      };
    },
    /**
     * Seed the given patch request.
     *
     * (This is overridden in EE)
     */
    seedPatchRequest(issue, req) {
      return req;
    },
  },
};
</script>
<template>
  <div class="block list">
    <gl-button variant="default" category="secondary" block="block" @click="removeIssue">
      {{ __('Remove from board') }}
    </gl-button>
  </div>
</template>