mirror of https://github.com/nocodb/nocodb
Browse Source
* feat: remove calendar top bar * fix: remove debug logs * fix: update styles * fix: update styles * fix: posthog telementry * fix: calendar tests * fix: updates ui * test: reorder options * fix: month view - use local time with timezone * fix: update styles and move components fix: tests * fix: update styles and move components * fix: update styles * test: fix tests * fix: update toolbar styles * fix: failing tests * fix: cmd f search shortcut * fix: change side menu sizes * fix: calendar test corrections * fix(nc-gui): update size logic * fix(nc-gui): update styles * fix(nc-gui): update some more styles * fix(nc-gui): update toolbar styles * fix(nc-gui): update select component * fix: update styles * fix: calendar test * fix: ux changes * fix: final changes * fix: calendar testspull/8475/head
Anbarasu
7 months ago
committed by
GitHub
50 changed files with 914 additions and 576 deletions
@ -0,0 +1,11 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
const { activeCalendarView } = useCalendarViewStoreOrThrow() |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<span class="opacity-0" data-testid="nc-active-calendar-view"> |
||||||
|
{{ activeCalendarView }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import { computed } from '#imports' |
||||||
|
|
||||||
|
const { selectedDate, selectedMonth, selectedDateRange, activeCalendarView, paginateCalendarView, activeDates, pageDate } = |
||||||
|
useCalendarViewStoreOrThrow() |
||||||
|
|
||||||
|
const calendarRangeDropdown = ref(false) |
||||||
|
|
||||||
|
const headerText = computed(() => { |
||||||
|
switch (activeCalendarView.value) { |
||||||
|
case 'day': |
||||||
|
return dayjs(selectedDate.value).format('D MMM YYYY') |
||||||
|
case 'week': |
||||||
|
if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) { |
||||||
|
return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YY')}` |
||||||
|
} else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) { |
||||||
|
return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YY')}` |
||||||
|
} else { |
||||||
|
return `${selectedDateRange.value.start.format('D MMM YY')} - ${selectedDateRange.value.end.format('D MMM YY')}` |
||||||
|
} |
||||||
|
case 'month': |
||||||
|
return dayjs(selectedMonth.value).format('MMM YYYY') |
||||||
|
case 'year': |
||||||
|
return dayjs(selectedDate.value).format('YYYY') |
||||||
|
default: |
||||||
|
return '' |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex gap-1"> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> {{ $t('labels.previous') }}</template> |
||||||
|
<a-button |
||||||
|
v-e="`['c:calendar:calendar-${activeCalendarView}-prev-btn']`" |
||||||
|
class="w-6 h-6 !rounded-lg flex items-center justify-center !bg-gray-100 !border-0" |
||||||
|
data-testid="nc-calendar-prev-btn" |
||||||
|
size="small" |
||||||
|
@click="paginateCalendarView('prev')" |
||||||
|
> |
||||||
|
<component :is="iconMap.arrowLeft" class="h-4 !mb-0.9 !-ml-0.8 w-4" /> |
||||||
|
</a-button> |
||||||
|
</NcTooltip> |
||||||
|
|
||||||
|
<NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']"> |
||||||
|
<NcButton |
||||||
|
:class="{ |
||||||
|
'w-20': activeCalendarView === 'year', |
||||||
|
'w-26.5': activeCalendarView === 'month', |
||||||
|
'w-29': activeCalendarView === 'day', |
||||||
|
'w-38': activeCalendarView === 'week', |
||||||
|
}" |
||||||
|
class="!h-6 !bg-gray-100 !border-0" |
||||||
|
full-width |
||||||
|
size="small" |
||||||
|
type="secondary" |
||||||
|
> |
||||||
|
<div class="flex w-full px-1 items-center justify-between"> |
||||||
|
<span |
||||||
|
:class="{ |
||||||
|
'max-w-38 truncate': activeCalendarView === 'week', |
||||||
|
}" |
||||||
|
class="font-bold text-[13px] text-center text-gray-800" |
||||||
|
data-testid="nc-calendar-active-date" |
||||||
|
>{{ headerText }}</span |
||||||
|
> |
||||||
|
<div class="flex-1" /> |
||||||
|
<component :is="iconMap.arrowDown" class="h-4 min-w-4 text-gray-700" /> |
||||||
|
</div> |
||||||
|
</NcButton> |
||||||
|
|
||||||
|
<template #overlay> |
||||||
|
<div v-if="calendarRangeDropdown" class="w-[287px]" @click.stop> |
||||||
|
<NcDateWeekSelector |
||||||
|
v-if="activeCalendarView === ('day' as const)" |
||||||
|
v-model:active-dates="activeDates" |
||||||
|
v-model:page-date="pageDate" |
||||||
|
v-model:selected-date="selectedDate" |
||||||
|
size="medium" |
||||||
|
/> |
||||||
|
<NcDateWeekSelector |
||||||
|
v-else-if="activeCalendarView === ('week' as const)" |
||||||
|
v-model:active-dates="activeDates" |
||||||
|
v-model:page-date="pageDate" |
||||||
|
v-model:selected-week="selectedDateRange" |
||||||
|
is-week-picker |
||||||
|
size="medium" |
||||||
|
/> |
||||||
|
<NcMonthYearSelector |
||||||
|
v-else-if="activeCalendarView === ('month' as const)" |
||||||
|
v-model:page-date="pageDate" |
||||||
|
v-model:selected-date="selectedMonth" |
||||||
|
size="medium" |
||||||
|
/> |
||||||
|
<NcMonthYearSelector |
||||||
|
v-else-if="activeCalendarView === ('year' as const)" |
||||||
|
v-model:page-date="pageDate" |
||||||
|
v-model:selected-date="selectedDate" |
||||||
|
is-year-picker |
||||||
|
size="medium" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> {{ $t('labels.next') }}</template> |
||||||
|
<a-button |
||||||
|
v-e="`['c:calendar:calendar-${activeCalendarView}-next-btn']`" |
||||||
|
class="w-6 h-6 !rounded-lg flex items-center !bg-gray-100 !border-0 justify-center" |
||||||
|
data-testid="nc-calendar-next-btn" |
||||||
|
size="small" |
||||||
|
@click="paginateCalendarView('next')" |
||||||
|
> |
||||||
|
<component :is="iconMap.arrowRight" class="h-4 !mb-0.8 !-ml-0.5 w-4" /> |
||||||
|
</a-button> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-cal-toolbar-header { |
||||||
|
@apply !h-6 !w-6; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
const { selectedDate, selectedMonth, selectedDateRange, pageDate, activeCalendarView } = useCalendarViewStoreOrThrow() |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const goToToday = () => { |
||||||
|
$e('c:calendar:calendar-today-btn', activeCalendarView.value) |
||||||
|
selectedDate.value = dayjs() |
||||||
|
pageDate.value = dayjs() |
||||||
|
selectedMonth.value = dayjs() |
||||||
|
selectedDateRange.value = { |
||||||
|
start: dayjs().startOf('week'), |
||||||
|
end: dayjs().endOf('week'), |
||||||
|
} |
||||||
|
|
||||||
|
document?.querySelector('.nc-calendar-today')?.scrollIntoView({ |
||||||
|
behavior: 'smooth', |
||||||
|
block: 'center', |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcButton |
||||||
|
class="!border-0 !h-6 !bg-gray-100" |
||||||
|
data-testid="nc-calendar-today-btn" |
||||||
|
size="small" |
||||||
|
type="secondary" |
||||||
|
@click="goToToday" |
||||||
|
> |
||||||
|
<span class="text-gray-700 !text-[13px]"> |
||||||
|
{{ $t('labels.today') }} |
||||||
|
</span> |
||||||
|
</NcButton> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
@ -1,63 +0,0 @@ |
|||||||
import { expect, Locator } from '@playwright/test'; |
|
||||||
import BasePage from '../../Base'; |
|
||||||
import { CalendarPage } from './index'; |
|
||||||
|
|
||||||
export class CalendarTopbarPage extends BasePage { |
|
||||||
readonly parent: CalendarPage; |
|
||||||
|
|
||||||
readonly today_btn: Locator; |
|
||||||
readonly prev_btn: Locator; |
|
||||||
readonly next_btn: Locator; |
|
||||||
|
|
||||||
readonly side_bar_btn: Locator; |
|
||||||
|
|
||||||
constructor(parent: CalendarPage) { |
|
||||||
super(parent.rootPage); |
|
||||||
this.parent = parent; |
|
||||||
|
|
||||||
this.next_btn = this.get().getByTestId('nc-calendar-next-btn'); |
|
||||||
this.prev_btn = this.get().getByTestId('nc-calendar-prev-btn'); |
|
||||||
this.today_btn = this.get().getByTestId('nc-calendar-today-btn'); |
|
||||||
|
|
||||||
this.side_bar_btn = this.get().getByTestId('nc-calendar-side-bar-btn'); |
|
||||||
} |
|
||||||
|
|
||||||
get() { |
|
||||||
return this.rootPage.getByTestId('nc-calendar-topbar'); |
|
||||||
} |
|
||||||
|
|
||||||
async getActiveDate() { |
|
||||||
return this.get().getByTestId('nc-calendar-active-date').textContent(); |
|
||||||
} |
|
||||||
|
|
||||||
async verifyActiveCalendarView({ view }: { view: string }) { |
|
||||||
const activeView = this.get().getByTestId('nc-active-calendar-view'); |
|
||||||
|
|
||||||
await expect(activeView).toContainText(view); |
|
||||||
} |
|
||||||
|
|
||||||
async clickPrev() { |
|
||||||
await this.prev_btn.click(); |
|
||||||
} |
|
||||||
async clickNext() { |
|
||||||
await this.next_btn.click(); |
|
||||||
} |
|
||||||
async clickToday() { |
|
||||||
await this.today_btn.click(); |
|
||||||
} |
|
||||||
|
|
||||||
async moveToDate({ date, action }: { date: string; action: 'prev' | 'next' }) { |
|
||||||
while ((await this.getActiveDate()) !== date) { |
|
||||||
if (action === 'prev') { |
|
||||||
await this.clickPrev(); |
|
||||||
} else { |
|
||||||
await this.clickNext(); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async toggleSideBar() { |
|
||||||
await this.side_bar_btn.click(); |
|
||||||
await this.rootPage.waitForTimeout(500); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue