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
2 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