action_component.vue 2.19 KB
Newer Older
1
<script>
2
import $ from 'jquery';
3 4 5 6 7 8 9 10
import axios from '~/lib/utils/axios_utils';
import { dasherize } from '~/lib/utils/text_utility';
import { __ } from '~/locale';
import createFlash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';

11
/**
12 13 14 15 16 17 18 19
 * Renders either a cancel, retry or play icon button and handles the post request
 *
 * Used in:
 * - mr widget mini pipeline graph: `mr_widget_pipeline.vue`
 * - pipelines table
 * - pipelines table in merge request page
 * - pipelines table in commit page
 * - pipelines detail page in big graph
20 21 22 23
 */
export default {
  components: {
    Icon,
24
    LoadingIcon,
25
  },
Filipa Lacerda's avatar
Filipa Lacerda committed
26

27 28 29
  directives: {
    tooltip,
  },
Filipa Lacerda's avatar
Filipa Lacerda committed
30

31 32 33 34 35
  props: {
    tooltipText: {
      type: String,
      required: true,
    },
36

37 38 39 40
    link: {
      type: String,
      required: true,
    },
41

42 43 44 45
    actionIcon: {
      type: String,
      required: true,
    },
46

47
  },
48 49
  data() {
    return {
50
      isLoading: false,
51 52 53
    };
  },

54 55 56 57 58
  computed: {
    cssClass() {
      const actionIconDash = dasherize(this.actionIcon);
      return `${actionIconDash} js-icon-${actionIconDash}`;
    },
59
  },
60
  methods: {
61 62 63 64 65 66
    /**
     * The request should not be handled here.
     * However due to this component being used in several
     * different apps it avoids repetition & complexity.
     *
     */
67 68
    onClickAction() {
      $(this.$el).tooltip('hide');
69 70 71 72 73 74 75 76 77 78 79 80 81

      this.isLoading = true;

      axios.post(`${this.link}.json`)
        .then(() => {
          this.isLoading = false;
          this.$emit('pipelineActionRequestComplete');
        })
        .catch(() => {
          this.isLoading = false;

          createFlash(__('An error occurred while making the request.'));
        });
82
    },
83 84
  },
};
85 86
</script>
<template>
87 88 89
  <button
    type="button"
    @click="onClickAction"
90
    v-tooltip
91
    :title="tooltipText"
92
    class="js-ci-action btn btn-blank
93
btn-transparent ci-action-icon-container ci-action-icon-wrapper"
Tim Zallmann's avatar
Tim Zallmann committed
94
    :class="cssClass"
Filipa Lacerda's avatar
Filipa Lacerda committed
95
    data-container="body"
96
    :disabled="isLoading"
Filipa Lacerda's avatar
Filipa Lacerda committed
97
  >
98 99 100 101 102
    <icon
      v-if="!isLoading"
      :name="actionIcon"
    />
    <loading-icon v-else />
103
  </button>
104
</template>