rogee
321c61aaae
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for customization: - app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin) - app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution) - app/helpers/, app/assets/ (Rails view helpers, static assets) - enterprise/ (Enterprise edition frontend overlay) - config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain) - package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs - Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub) Excluded Rails backend: controllers, models, services, jobs, mailers, policies, db, lib, spec, public, node_modules. Update references to the new frontend location: - .gitignore: exclude frontend build artifacts (node_modules, tmp, packs), keep frontend/bin/ and frontend/vendor/ via negation - backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default reference/chatwoot -> ../frontend - backend/scripts/parity_frontend_browser_smoke.mjs: same default update - AGENTS.md: add frontend section with Rails/Vite coupling notes - README: architecture tree includes frontend/
103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { dateRanges } from '../helpers/DatePickerHelper';
|
|
import { format, isSameYear, isValid } from 'date-fns';
|
|
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
|
|
const props = defineProps({
|
|
selectedStartDate: Date,
|
|
selectedEndDate: Date,
|
|
selectedRange: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
showMonthNavigation: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
canNavigateNext: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
navigationLabel: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['open', 'navigateMonth']);
|
|
|
|
const formatDateRange = computed(() => {
|
|
const startDate = props.selectedStartDate;
|
|
const endDate = props.selectedEndDate;
|
|
|
|
if (!isValid(startDate) || !isValid(endDate)) {
|
|
return 'Select a date range';
|
|
}
|
|
|
|
const crossesYears = !isSameYear(startDate, endDate);
|
|
|
|
// Always show years when crossing year boundaries
|
|
if (crossesYears) {
|
|
return `${format(startDate, 'MMM d, yyyy')} - ${format(endDate, 'MMM d, yyyy')}`;
|
|
}
|
|
|
|
// For same year, always show the year for clarity
|
|
return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`;
|
|
});
|
|
|
|
const activeDateRange = computed(
|
|
() => dateRanges.find(range => range.value === props.selectedRange).label
|
|
);
|
|
|
|
const openDatePicker = () => {
|
|
emit('open');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="inline-flex items-center gap-1">
|
|
<button
|
|
class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1 flex-shrink-0"
|
|
@click="openDatePicker"
|
|
>
|
|
<Icon
|
|
icon="i-lucide-calendar-range"
|
|
class="text-n-slate-11 size-3.5 flex-shrink-0"
|
|
/>
|
|
<span class="text-sm font-medium text-n-slate-12 truncate">
|
|
{{ navigationLabel || $t(activeDateRange) }}
|
|
</span>
|
|
<span class="text-sm font-medium text-n-slate-11 truncate">
|
|
{{ formatDateRange }}
|
|
</span>
|
|
<Icon
|
|
icon="i-lucide-chevron-down"
|
|
class="text-n-slate-12 size-4 flex-shrink-0"
|
|
/>
|
|
</button>
|
|
<NextButton
|
|
v-if="showMonthNavigation"
|
|
v-tooltip.top="$t('DATE_PICKER.PREVIOUS_PERIOD')"
|
|
slate
|
|
faded
|
|
sm
|
|
icon="i-lucide-chevron-left"
|
|
class="rtl:rotate-180"
|
|
@click="emit('navigateMonth', 'prev')"
|
|
/>
|
|
<NextButton
|
|
v-if="showMonthNavigation"
|
|
v-tooltip.top="$t('DATE_PICKER.NEXT_PERIOD')"
|
|
slate
|
|
faded
|
|
sm
|
|
icon="i-lucide-chevron-right"
|
|
class="rtl:rotate-180"
|
|
:disabled="!canNavigateNext"
|
|
@click="emit('navigateMonth', 'next')"
|
|
/>
|
|
</div>
|
|
</template>
|