dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(calendar): replace CSS-transform zoom with GSAP flying-rect animation and scope data to year

Browse Source 
- Add CalendarDateRange input to GraphQL schema; server resolver now accepts from/to params
- Frontend query sends year-scoped date range variables reactively
- Rewrite zoom-in/zoom-out animations using GSAP flying-rect overlay (650ms vs 2400ms)
- Add flying-rect element to CrmCalendarPanel with proper CSS
- Remove old calendarSceneTransformStyle CSS-transition approach
- Add calendarKillTweens cleanup in onBeforeUnmount

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-02-24 11:41:35 +07:00
parent 638652b4d8
commit 227030b9ae
6 changed files with 217 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/graphql/generated.ts
View File

@@ -23,6 +23,11 @@ export type ArchiveCalendarEventInput = {
id: Scalars['ID']['input'];
};
export type CalendarDateRange = {
from?: InputMaybe<Scalars['String']['input']>;
to?: InputMaybe<Scalars['String']['input']>;
};
export type CalendarEvent = {
__typename?: 'CalendarEvent';
archiveNote: Scalars['String']['output'];
@@ -387,6 +392,11 @@ export type Query = {
};
export type QuerycalendarArgs = {
dateRange?: InputMaybe<CalendarDateRange>;
};
export type QuerygetClientTimelineArgs = {
contactId: Scalars['ID']['input'];
limit?: InputMaybe<Scalars['Int']['input']>;
@@ -418,7 +428,10 @@ export type ArchiveChatConversationMutationMutationVariables = Exact<{
export type ArchiveChatConversationMutationMutation = { __typename?: 'Mutation', archiveChatConversation: { __typename?: 'MutationResult', ok: boolean } };
export type CalendarQueryQueryVariables = Exact<{ [key: string]: never; }>;
export type CalendarQueryQueryVariables = Exact<{
from?: InputMaybe<Scalars['String']['input']>;
to?: InputMaybe<Scalars['String']['input']>;
}>;
export type CalendarQueryQuery = { __typename?: 'Query', calendar: Array<{ __typename?: 'CalendarEvent', id: string, title: string, start: string, end: string, contact: string, note: string, isArchived: boolean, createdAt: string, archiveNote: string, archivedAt: string }> };
@@ -670,8 +683,8 @@ export function useArchiveChatConversationMutationMutation(options: VueApolloCom
}
export type ArchiveChatConversationMutationMutationCompositionFunctionResult = VueApolloComposable.UseMutationReturn<ArchiveChatConversationMutationMutation, ArchiveChatConversationMutationMutationVariables>;
export const CalendarQueryDocument = gql`
query CalendarQuery {
calendar {
query CalendarQuery($from: String, $to: String) {
calendar(dateRange: {from: $from, to: $to}) {
id
title
start
@@ -693,16 +706,20 @@ export const CalendarQueryDocument = gql`
* When your component renders, `useCalendarQueryQuery` returns an object from Apollo Client that contains result, loading and error properties
* you can use to render your UI.
*
* @param variables that will be passed into the query
* @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
*
* @example
* const { result, loading, error } = useCalendarQueryQuery();
* const { result, loading, error } = useCalendarQueryQuery({
* from: // value for 'from'
* to: // value for 'to'
* });
*/
export function useCalendarQueryQuery(options: VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> = {}) {
return VueApolloComposable.useQuery<CalendarQueryQuery, CalendarQueryQueryVariables>(CalendarQueryDocument, {}, options);
export function useCalendarQueryQuery(variables: CalendarQueryQueryVariables | VueCompositionApi.Ref<CalendarQueryQueryVariables> | ReactiveFunction<CalendarQueryQueryVariables> = {}, options: VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> = {}) {
return VueApolloComposable.useQuery<CalendarQueryQuery, CalendarQueryQueryVariables>(CalendarQueryDocument, variables, options);
}
export function useCalendarQueryLazyQuery(options: VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> = {}) {
return VueApolloComposable.useLazyQuery<CalendarQueryQuery, CalendarQueryQueryVariables>(CalendarQueryDocument, {}, options);
export function useCalendarQueryLazyQuery(variables: CalendarQueryQueryVariables | VueCompositionApi.Ref<CalendarQueryQueryVariables> | ReactiveFunction<CalendarQueryQueryVariables> = {}, options: VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<CalendarQueryQuery, CalendarQueryQueryVariables>> = {}) {
return VueApolloComposable.useLazyQuery<CalendarQueryQuery, CalendarQueryQueryVariables>(CalendarQueryDocument, variables, options);
}
export type CalendarQueryQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<CalendarQueryQuery, CalendarQueryQueryVariables>;
export const ChatConversationsQueryDocument = gql`