scinote-web/app/javascript/vue/label_template/table.vue

<template>
  <div class="h-full">
    <DataTable :columnDefs="columnDefs"
               :tableId="'labelTemplates'"
               :dataUrl="dataSource"
               :reloadingTable="reloadingTable"
               :toolbarActions="toolbarActions"
               :actionsUrl="actionsUrl"
               @tableReloaded="reloadingTable = false"
               @set_as_default="setDefault"
               @duplicate="duplicate"
               @create="createTemplate"
               @sync_fluics="syncFluicsLabels"
               @delete="deleteTemplates"
      />
      <DeleteModal
        :title="i18n.t('label_templates.index.delete_modal.title')"
        :description="i18n.t('label_templates.index.delete_modal.description')"
        :confirmClass="'btn btn-danger'"
        :confirmText="i18n.t('general.delete')"
        ref="deleteModal"
      ></DeleteModal>
  </div>
</template>

<script>
import axios from '../../packs/custom_axios.js';

import DataTable from '../shared/datatable/table.vue'
import DeleteModal from '../shared/confirmation_modal.vue'

export default {
  name: 'LabelTemplatesTable',
  components: {
    DataTable,
    DeleteModal
  },
  props: {
    dataSource: {
      type: String,
      required: true
    },
    actionsUrl: {
      type: String,
      required: true
    },
    createUrl: {
      type: String,
    },
    syncFluicsUrl: {
      type: String,
    }
  },
  data() {
    return {
      reloadingTable: false,
      columnDefs: [ { field: "default", headerName: '', width: 80, minWidth: 80,
                      cellRenderer: this.defaultRenderer, sortable: true, headerComponentParams: { html: '<i class="fas fa-thumbtack"></i>' } },
                    { field: "name", headerName: this.i18n.t('label_templates.index.thead_name'), cellRenderer: this.labelNameRenderer, sortable: true},
                    { field: "format", headerName: this.i18n.t('label_templates.index.format'), sortable: true },
                    { field: "description", headerName: this.i18n.t('label_templates.index.description'), sortable: true },
                    { field: "modified_by", headerName: this.i18n.t('label_templates.index.updated_by'), sortable: true },
                    { field: "updated_at", headerName: this.i18n.t('label_templates.index.updated_at'), sortable: true },
                    { field: "created_by", headerName: this.i18n.t('label_templates.index.created_by'), sortable: true },
                    { field: "created_at", headerName: this.i18n.t('label_templates.index.created_at'), sortable: true }
                  ]
    }
  },
  computed: {
    toolbarActions() {
      let left = []
      if (this.createUrl) {
        left.push({
          name: 'create',
          icon: 'sn-icon sn-icon-new-task',
          label: this.i18n.t('label_templates.index.toolbar.new'),
          type: 'emit',
          path: this.createUrl,
          buttonStyle: 'btn btn-primary'
        })
      }
      if (this.syncFluicsUrl) {
        left.push({
          name: 'sync_fluics',
          icon: 'fas fa-sync',
          label: this.i18n.t('label_templates.index.toolbar.update_fluics_labels'),
          type: 'emit',
          path: this.syncFluicsUrl,
          buttonStyle: 'btn btn-light'
        })
      }
      return {
        left: left,
        right: []
      }
    }
  },
  methods: {
    labelNameRenderer(params) {
      let name = params.data.name;
      let editUrl = params.data.attributes.edit_url;
      return `<a href="${editUrl}">
                ${name.icon_image_tag}
                ${name.name}
              </a>`
    },
    defaultRenderer(params) {
      let defaultSelected = params.data.default;
      return defaultSelected ? '<i class="fas fa-thumbtack"></i>' : '';
    },
    setDefault(action) {
      axios.post(action.path).then((response) => {
        this.reloadingTable = true
        HelperModule.flashAlertMsg(response.data.message, 'success');
      }).catch((error) => {
        HelperModule.flashAlertMsg(error.response.data.error, 'danger');
      });
    },
    duplicate(action, rows) {
      axios.post(action.path, { selected_ids: rows.map((row) => row.id) }).then((response) => {
        this.reloadingTable = true
        HelperModule.flashAlertMsg(response.data.message, 'success');
      }).catch((error) => {
        HelperModule.flashAlertMsg(error.response.data.error, 'danger');
      });
    },
    createTemplate(action) {
      axios.post(action.path).then((response) => {
        window.location.href = response.data.redirect_url;
      })
    },
    syncFluicsLabels(action) {
      axios.post(action.path).then((response) => {
        this.reloadingTable = true
        HelperModule.flashAlertMsg(response.data.message, 'success');
      }).catch((error) => {
        HelperModule.flashAlertMsg(error.response.data.error, 'danger');
      });
    },
    async deleteTemplates(action, rows) {
      const ok = await this.$refs.deleteModal.show()
      if (ok) {
        axios.delete(action.path, { data: { selected_ids: rows.map((row) => row.id) } }).then((response) => {
          this.reloadingTable = true
          HelperModule.flashAlertMsg(response.data.message, 'success');
        }).catch((error) => {
          HelperModule.flashAlertMsg(error.response.data.error, 'danger');
        });
      }
    }
  }
}

</script>