scinote-web/app/javascript/vue/components/action_toolbar.vue

<template>
  <div v-if="!paramsAreBlank"
       class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md"
       :class="{ 'sn-action-toolbar--button-overflow': buttonOverflow }"
       :style="`width: ${width}px; bottom: ${bottomOffset}px; transform: translateX(${leftOffset}px)`">
    <div class="sn-action-toolbar__actions flex gap-4">
      <div v-if="loading && !actions.length" class="sn-action-toolbar__action">
        <a class="rounded flex items-center py-1.5 px-2.5 bg-transparent text-transparent no-underline"></a>
      </div>
      <div v-if="!loading && actions.length === 0" class="sn-action-toolbar__message">
        {{ i18n.t('action_toolbar.no_actions') }}
      </div>
      <div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
          <div v-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length > 1" class="export-actions-dropdown sci-dropdown dropup">
            <button class="btn btn-primary dropdown-toggle single-object-action rounded" type="button" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <i class="sn-icon sn-icon-export"></i>
              <span>{{ action.group_label }}</span>
              <span class="sn-icon sn-icon-down"></span>
            </button>
            <ul class="sci-dropdown dropup dropdown-menu dropdown-menu-right px-2" aria-labelledby="<%= id %>">
              <li v-for="groupAction in action.actions" class="">
                <a :class="`flex gap-2 items-center bg-sn-white color-sn-blue no-underline ${groupAction.button_class}`"
                  :href="(['link', 'remote-modal']).includes(groupAction.type) ? groupAction.path : '#'"
                  :id="groupAction.button_id"
                  :title="groupAction.label"
                  :data-url="groupAction.path"
                  :data-target="groupAction.target"
                  :data-toggle="groupAction.type === 'modal' && 'modal'"
                  :data-object-type="groupAction.item_type"
                  :data-object-id="groupAction.item_id"
                  :data-action="groupAction.type"
                  :data-e2e="`e2e-BT-actionToolbar-${groupAction.name}`"
                  @click="closeExportDropdown($event); doAction(groupAction, $event);">
                  <span class="sn-action-toolbar__button-text">{{ groupAction.label }}</span>
                </a>
              </li>
            </ul>
          </div>
          <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.actions[0].button_class}`"
            v-else-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length == 1"
            :href="(['link', 'remote-modal']).includes(action.actions[0].type) ? action.actions[0].path : '#'"
            :id="action.actions[0].button_id"
            :title="action.group_label"
            :data-url="action.actions[0].path"
            :data-target="action.actions[0].target"
            :data-toggle="action.actions[0].type === 'modal' && 'modal'"
            :data-object-type="action.actions[0].item_type"
            :data-object-id="action.actions[0].item_id"
            :data-action="action.actions[0].type"
            :data-e2e="`e2e-BT-actionToolbar-${action.name}`"
            @click="doAction(action.actions[0], $event);">
            <i :class="action.actions[0].icon"></i>
            <span class="sn-action-toolbar__button-text">{{ action.group_label }}</span>
          </a>
          <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.button_class}`"
            :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
            :id="action.button_id"
            :title="action.label"
            :data-url="action.path"
            :data-target="action.target"
            v-else
            :data-toggle="action.type === 'modal' && 'modal'"
            :data-object-type="action.item_type"
            :data-object-id="action.item_id"
            :data-action="action.type"
            :data-e2e="`e2e-BT-actionToolbar-${action.name}`"
            @click="doAction(action, $event)">
            <i :class="action.icon"></i>
            <span class="sn-action-toolbar__button-text">{{ action.label }}</span>
          </a>
        </div>
      </div>
  </div>
</template>

<script>
  import {debounce} from '../shared/debounce.js';

  export default {
    name: 'ActionToolbar',
    props: {
      actionsUrl: { type: String, required: true }
    },
    data() {
      return {
        actions: [],
        shown: false,
        multiple: false,
        params: {},
        reloadCallback: null,
        loaded: false,
        loading: false,
        width: 0,
        bottomOffset: 0,
        leftOffset: 0,
        buttonOverflow: false
      }
    },
    created() {
      window.actionToolbarComponent = this;
      window.onresize = this.setWidth;

      this.debouncedFetchActions = debounce((params) => {
        this.params = params;

        $.get(`${this.actionsUrl}?${new URLSearchParams(this.params).toString()}`, (data) => {
          this.actions = data.actions;
          this.loading = false;
          this.setButtonOverflow();
        });
      }, 10);
    },
    mounted() {
      this.$nextTick(this.setWidth);
      window.addEventListener('scroll', this.setLeftOffset);
    },
    beforeUnmount() {
      delete window.actionToolbarComponent;
      window.removeEventListener('scroll', this.setLeftOffset);
    },
    computed: {
      paramsAreBlank() {
        let values = Object.values(this.params);

        if (values.length === 0) return true;

        return !values.some((v) => v.length);
      }
    },
    methods: {
      setWidth() {
        this.width = $(this.$el).parent().width();
        this.setButtonOverflow();
      },
      setButtonOverflow() {
        // detects if the last action button is outside the toolbar container
        this.buttonOverflow = false;

        this.$nextTick(() => {
          if (
                !(this.$el.getBoundingClientRect &&
                document.querySelector('.sn-action-toolbar__action:last-child'))
              ) return;

          let containerRect = this.$el.getBoundingClientRect();
          let lastActionRect = document.querySelector('.sn-action-toolbar__action:last-child').getBoundingClientRect();

          this.buttonOverflow = containerRect.left + containerRect.width < lastActionRect.left + lastActionRect.width;
        });
      },
      setLeftOffset() {
        this.leftOffset = -(window.pageXOffset || document.documentElement.scrollLeft);
      },
      setBottomOffset(pixels) {
        this.bottomOffset = pixels;
      },
      fetchActions(params) {
        this.loading = true;
        this.debouncedFetchActions(params);
      },
      setReloadCallback(func) {
        this.reloadCallback = func;
      },
      doAction(action, event) {
        switch(action.type) {
          case 'legacy':
            // do nothing, this is handled by legacy code based on the button class
            break;
          case 'link':
            // do nothing, already handled by href
            break;
          case 'modal':
            // do nothihg, boostrap modal handled by data-toggle="modal" and data-target
          case 'remote-modal':
            // do nothing, handled by the data-action="remote-modal" binding
            break;
          case 'download':
            event.stopPropagation();
            window.location.href = action.path;
            break;
          case 'request':
            event.stopPropagation();

            $.ajax({
              type: action.request_method,
              url: action.path,
              data: this.params
            }).done((data) => {
              HelperModule.flashAlertMsg(data.responseJSON && data.responseJSON.message || data.message, 'success');
            }).fail((data) => {
              HelperModule.flashAlertMsg(data.responseJSON && data.responseJSON.message || data.message, 'danger');
            }).always(() => {
              if (this.reloadCallback) this.reloadCallback();
            });
            break;
        }
      },
      closeExportDropdown(event) {
        event.preventDefault();
        $(event.target).closest('.export-actions-dropdown').removeClass('open')
      }
    }
  }
</script>