@empathyco/x-components/js/x-modules/history-queries/components/my-history.vue2.js

Empathy X Components

import { defineComponent, inject, computed } from 'vue';
import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue.js';
import { useState } from '../../../composables/use-state.js';
import { AnimationProp } from '../../../types/animation-prop.js';
import { groupItemsBy, isArrayEmpty } from '../../../utils/array.js';
import { historyQueriesXModule } from '../x-module.js';
import HistoryQuery from './history-query.vue.js';

/**
 * The component renders the full history of user searched queries grouped by the day
 * they were performed.
 *
 * @remarks
 *
 * Allows the user to select one of them, emitting the needed events.
 * A history query is just another type of suggestion that contains a query that the user has
 * made in the past.
 * @public
 */
var _sfc_main = defineComponent({
    name: 'MyHistory',
    xModule: historyQueriesXModule.name,
    components: {
        HistoryQuery,
        BaseSuggestions,
    },
    props: {
        /**
         * Animation component that will be used to animate the suggestions.
         *
         * @public
         */
        animation: {
            type: AnimationProp,
            default: 'ul',
        },
        /**
         * The current locale.
         *
         * @public
         */
        locale: {
            type: String,
            default: 'en',
        },
        /** Class inherited by content element. */
        queriesListClass: String,
    },
    setup(props) {
        /**
         * The list of history queries.
         *
         * @internal
         */
        const { historyQueries } = useState('historyQueries');
        /**
         * The provided {@link SnippetConfig}.
         *
         * @internal
         */
        const snippetConfig = inject('snippetConfig');
        /**
         * The locale that it is going to be used. It can be the one send it by the snippet config or
         * the one pass it using the prop.
         *
         * @returns The locale to be used.
         * @internal
         */
        const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);
        /**
         * Returns a record of history queries grouped by date.
         *
         * @example
         * ```typescript
         *  const historyQueriesGrouped = {
         *    'Monday, January 10th, 2022' : [{
         *      query: 'lego',
         *      modelName: 'HistoryQuery',
         *      timestamp: 121312312
         *    }],
         *    'Tuesday, January 11th, 2022' : [{
         *      query: 'barbie',
         *      modelName: 'HistoryQuery',
         *      timestamp: 15221212
         *    }]
         *  }
         * ```
         * @returns The history queries grouped by date.
         * @internal
         */
        const groupByDate = computed(() => {
            return groupItemsBy(historyQueries.value, current => {
                return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
                    day: 'numeric',
                    weekday: 'long',
                    month: 'long',
                    year: 'numeric',
                });
            });
        });
        /**
         * Formats a timestamp into `hh:mm [PM/AM]` format.
         *
         * @example
         * ```typescript
         * // locale 'es'
         * console.log(formatTime(Date.now()) // '16:54'.
         *
         * // locale 'en'
         * console.log(formatTime(Date.now()) // '16:54 PM'.
         * ```
         * @param timestamp - The timestamp to format.
         * @returns The formatted time.
         * @internal
         */
        const formatTime = (timestamp) => new Date(timestamp).toLocaleTimeString(usedLocale.value, {
            hour: '2-digit',
            minute: '2-digit',
        });
        /**
         * The `hasHistoryQueries` computed property is a flag representing if there are history queries
         * stored.
         *
         * @returns True if there are history queries; false otherwise.
         * @internal
         */
        const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
        return {
            hasHistoryQueries,
            groupByDate,
            historyQueries,
            formatTime,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=my-history.vue2.js.map