utils/datatable.js

/**
 * @namespace Utils
 * @category Utils
 * @module Datatable*/

import colors from '@/styles/colors'
import { createComponentRender } from '@/components/shared/DataTable/DataTable.vue'

/**
 * Creates a column definition for a true/false (boolean) column.
 *
 * @param {string} columnTitle - The title of the column.
 * @param {string} propertyName - The name of the property in the row data that corresponds to the column.
 * @param {Object} [options={}] - An optional object of configuration options.
 * @param {Object} [options.i18n] - An object containing translation functions for internationalization.
 * @param {Function} [options.$t] - A translation function for internationalization.
 * @param {Function} [options.t] - Another translation function for internationalization.
 * @param {Function} [options.translate] - A third translation function for internationalization.
 * @param {string} [options.falseI18nCode='common.no'] - The code for the translation of the "false" value.
 * @param {string} [options.trueI18nCode='common.yes'] - The code for the translation of the "true" value.
 *
 * @returns {Object} - A column definition object with a "title" property and a "data" function.
 */
export function createTruFalseColumnDefinition(
  columnTitle,
  propertyName,
  options = {}
) {
  let translateHandler = (c) =>
    options.i18n
      ? options.i18n.t(c)
      : (options.$t && options.$t(c)) ||
        (options.t && options.t(c)) ||
        (options.translate && options.translate(c)) ||
        c
  let falseI18nCode = options.falseI18nCode || 'common.no'
  let trueI18nCode = options.falseI18nCode || 'common.yes'
  return {
    title: columnTitle,
    data(row, type, val) {
      if (type === 'set') {
        row[propertyName] = val === undefined ? row[propertyName] : val
      }
      if (['display', 'filter'].includes(type)) {
        return row[propertyName]
          ? translateHandler(trueI18nCode)
          : translateHandler(falseI18nCode)
      }
      return row[propertyName]
    },
  }
}

/**
 * Creates a sortable column definition object.Useful when you need to sort using one field and display a different field (i.g Sorting a Date column by timestamp but displaying a formatted date)
 *
 * @param {string} sortBy - The data property to sort by.
 * @param {string} display - The data property to display.
 * @param {string} title - The title of the column.
 * @returns {Object} A sortable column definition object.
 */
export function createSortableColumnDefinition(sortBy, display, title) {
  return {
    data: {
      _: sortBy,
      filter: display, //Filter using what user see
      display,
      sort: sortBy,
    },
    title,
  }
}

/**
 *
 * Helper to create buttons/icons inside tables in V3.
 *
 * - Create a Vue component that can be registered as a datatable (https://www.datatables.net/) column.
 *
 * Usage:
 * columns:[createIconActionButtonDatatableColumn({handleClick(row){console.log(row)}})]
 *
 * @param {*} options.components define custom components
 * @param {*} options.template define custom template
 * @param {*} options.handleClick define custom click handler
 * @returns
 */
export function createActionButtonDatatableColumn(options = {}) {
  return {
    title: options.title || undefined,
    orderable: options.orderable !== undefined ? options.orderable : false,
    render: createComponentRender({
      ...options,
      ...{
        name: options.name || 'ShareActionButton',
        template:
          options.template ||
          `<em @click="handleClick" class="fas fa-search" style="cursor:pointer;"></em>`,
        components:
          options.components ||
          {
            //ShareIcon: () => import("vue-material-design-icons/ShareVariant.vue"),
          },
        data:
          options.data ||
          (() => {
            return { colors }
          }),
        methods: options.methods || {
          handleClick(e) {
            e.stopPropagation()
            options.handleClick && options.handleClick(this.row)
          },
        },
      },
    }),
  }
}