Untitled

 avatar
unknown
javascript
16 days ago
2.0 kB
8
Indexable
import { useSyncPaginationStoreWithQuery } from '@/composables/syncPaginationStoreWithQuery';
import {
  computed,
  ref
} from 'vue';
import { filterEmptyValues } from '@/utils/filterEmptyValues';

/**
 *
 * @param {string} sortByStoreKey
 * @param {string} sortOrderStoreKey
 * @param {object} defaults
 * @param {string} defaults.sortBy
 * @param {string} defaults.sortOrder
 */
export const useSorting = (sortByStoreKey, sortOrderStoreKey, defaults = {}) => {
  let sortBy

  if (sortByStoreKey) {
    sortBy = useSyncPaginationStoreWithQuery('sortBy', sortByStoreKey, '', {
      resetPage: true,
      transformToQuery: value => value ?? ''
    })
  } else {
    sortBy = ref(defaults.sortBy || '')
  }

  let sortOrder

  if (sortOrderStoreKey) {
    sortOrder = useSyncPaginationStoreWithQuery('sortOrder', sortOrderStoreKey, '', {
      resetPage: true,
      transformToQuery: value => value ?? ''
    })
  } else {
    sortOrder = ref(defaults.sortOrder || '')
  }

  const sortOrderToDigit = (value) => {
    if (typeof value !== 'string') {
      return value
    }

    switch (value) {
      case 'asc':
        return 1
      case 'desc':
        return -1
      default:
        return null
    }
  }

  const sortOrderToString = (value) => {
    if (typeof value !== 'number') {
      return value
    }

    switch (value) {
      case 1:
        return 'asc'
      case -1:
        return 'desc'
      default:
        return null
    }
  }

  const sortOrderDigit = computed({
    get() {
      return sortOrderToDigit(sortOrder.value)
    },
    set(value) {
      sortOrder.value = sortOrderToString(value)
    }
  })

  const processedSort = computed(() => {
    return filterEmptyValues({
      sortBy: sortBy.value,
      sortOrder: sortOrder.value
    })
  })

  return {
    sortBy,
    sortOrder,
    sortOrderDigit,
    processedSort,
  }
}
Leave a Comment