From ebfbdfdfd794e58923ee1952fd9593bfb5bc7708 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Thu, 22 Feb 2024 14:05:36 +0300 Subject: [PATCH 1/5] added licence key data field --- client/packages/lowcoder-comps/package.json | 4 +- .../src/comps/calendarComp/calendarComp.tsx | 85 ++++-- .../comps/calendarComp/calendarConstants.tsx | 8 +- .../src/i18n/comps/locales/en.ts | 287 +++++++++--------- 4 files changed, 219 insertions(+), 165 deletions(-) diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index 1bf1dae92..d1f7f0a91 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-comps", - "version": "0.0.24", + "version": "0.0.25", "type": "module", "license": "MIT", "dependencies": { @@ -10,6 +10,8 @@ "@fullcalendar/list": "^6.1.9", "@fullcalendar/moment": "^6.1.6", "@fullcalendar/react": "^6.1.6", + "@fullcalendar/resource": "^6.1.11", + "@fullcalendar/resource-timeline": "^6.1.11", "@fullcalendar/timegrid": "^6.1.6", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 72f292ece..320076851 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -26,6 +26,7 @@ import { default as Form } from "antd/es/form"; import { default as Input } from "antd/es/input"; import { trans, getCalendarLocale } from "../../i18n/comps"; import { createRef, useContext, useRef, useState } from "react"; +import resourceTimelinePlugin from "@fullcalendar/resource-timeline"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; @@ -66,8 +67,9 @@ const childrenMap = { dayMaxEvents: withDefault(NumberControl, 2), eventMaxStack: withDefault(NumberControl, 0), style: styleControl(CalendarStyle), + licenceKey: withDefault(StringControl, ""), }; - + let CalendarBasicComp = (function () { return new UICompBuilder(childrenMap, (props) => { const theme = useContext(ThemeContext); @@ -83,7 +85,9 @@ let CalendarBasicComp = (function () { start: dayjs(item.start, DateParser).format(), end: dayjs(item.end, DateParser).format(), allDay: item.allDay, - color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary, + color: isValidColor(item.color || "") + ? item.color + : theme?.theme?.primary, ...(item.groupId ? { groupId: item.groupId } : null), }; }); @@ -104,8 +108,13 @@ let CalendarBasicComp = (function () { function renderEventContent(eventInfo: EventContentArg) { const isList = eventInfo.view.type === "listWeek"; let sizeClass = ""; - if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) { - const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes"); + if ( + [ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType) + ) { + const duration = dayjs(eventInfo.event.end).diff( + dayjs(eventInfo.event.start), + "minutes" + ); if (duration <= 30 || eventInfo.event.allDay) { sizeClass = "small"; } else if (duration <= 60) { @@ -137,7 +146,9 @@ let CalendarBasicComp = (function () { onClick={(e) => { e.stopPropagation(); props.onEvent("change"); - const event = events.filter((item: EventType) => item.id !== eventInfo.event.id); + const event = events.filter( + (item: EventType) => item.id !== eventInfo.event.id + ); props.events.onChange(event); }} onMouseDown={(e) => { @@ -195,7 +206,9 @@ let CalendarBasicComp = (function () { }; const showModal = (event: EventType, ifEdit: boolean) => { - const modalTitle = ifEdit ? trans("calendar.editEvent") : trans("calendar.creatEvent"); + const modalTitle = ifEdit + ? trans("calendar.editEvent") + : trans("calendar.creatEvent"); form && form.setFieldsValue(event); const eventId = editEvent.current?.id; CustomModal.confirm({ @@ -209,14 +222,18 @@ let CalendarBasicComp = (function () { } name="id" - rules={[{ required: true, message: trans("calendar.eventIdRequire") }]} + rules={[ + { required: true, message: trans("calendar.eventIdRequire") }, + ]} > @@ -239,9 +256,13 @@ let CalendarBasicComp = (function () { form.submit(); return form.validateFields().then(() => { const { id, groupId, color, title = "" } = form.getFieldsValue(); - const idExist = props.events.value.findIndex((item: EventType) => item.id === id); + const idExist = props.events.value.findIndex( + (item: EventType) => item.id === id + ); if (idExist > -1 && id !== eventId) { - form.setFields([{ name: "id", errors: [trans("calendar.eventIdExist")] }]); + form.setFields([ + { name: "id", errors: [trans("calendar.eventIdExist")] }, + ]); throw new Error(); } if (ifEdit) { @@ -306,7 +327,14 @@ let CalendarBasicComp = (function () { locale={getCalendarLocale()} locales={allLocales} firstDay={Number(firstDay)} - plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]} + plugins={[ + dayGridPlugin, + timeGridPlugin, + interactionPlugin, + listPlugin, + momentPlugin, + resourceTimelinePlugin, + ]} headerToolbar={headerToolbar} moreLinkClick={(info) => { let left = 0; @@ -319,15 +347,19 @@ let CalendarBasicComp = (function () { } } else { if (info.allDay) { - left = ele.offsetParent?.parentElement?.parentElement?.offsetLeft || 0; + left = + ele.offsetParent?.parentElement?.parentElement?.offsetLeft || + 0; } else { left = - ele.offsetParent?.parentElement?.parentElement?.parentElement?.offsetLeft || 0; + ele.offsetParent?.parentElement?.parentElement?.parentElement + ?.offsetLeft || 0; } } setLeft(left); }} buttonText={buttonText} + schedulerLicenseKey={props.licenceKey.value} views={views} eventClassNames={() => (!showEventTime ? "no-time" : "")} slotLabelFormat={slotLabelFormat} @@ -346,7 +378,9 @@ let CalendarBasicComp = (function () { eventContent={renderEventContent} select={(info) => handleCreate(info)} eventClick={(info) => { - const event = events.find((item: EventType) => item.id === info.event.id); + const event = events.find( + (item: EventType) => item.id === info.event.id + ); editEvent.current = event; setTimeout(() => { editEvent.current = undefined; @@ -387,12 +421,19 @@ let CalendarBasicComp = (function () { .setPropertyViewFn((children) => { return ( <> -
{children.events.propertyView({})}
-
{children.onEvent.getPropertyView()}
+
+ {children.events.propertyView({})} +
+
+ {children.licenceKey.propertyView({ + label: trans("calendar.licence"), + })} + {children.onEvent.getPropertyView()} +
{children.editable.propertyView({ - label: trans("calendar.editable"), - })} + label: trans("calendar.editable"), + })} {children.defaultDate.propertyView({ label: trans("calendar.defaultDate"), tooltip: trans("calendar.defaultDateTooltip"), @@ -424,8 +465,12 @@ let CalendarBasicComp = (function () { tooltip: trans("calendar.eventMaxStackTooltip"), })}
-
{hiddenPropertyView(children)}
-
{children.style.getPropertyView()}
+
+ {hiddenPropertyView(children)} +
+
+ {children.style.getPropertyView()} +
); }) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 93c07c462..37cca2c1c 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -205,9 +205,9 @@ export const Wrapper = styled.div<{ flex-direction: inherit; } .fc-day-today .fc-daygrid-day-number { - background-color: ${(props) => props.$theme.primary}; + background-color: ${(props) => props.$theme?.primary}; color: ${(props) => - contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)}; + contrastText(props.$theme?.primary || "", props.$theme?.textDark, props.$theme?.textLight)}; } .fc-daygrid-day-events { padding: 1px 0 5px 0; @@ -585,10 +585,10 @@ export const Wrapper = styled.div<{ } .fc-day-today.fc-col-header-cell { background-color: ${(props) => - isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"}; + isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"}; a { color: ${(props) => - !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)}; + !isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)}; } } .fc-col-header-cell-cushion { diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 9cac1339b..048650e24 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -1,145 +1,152 @@ export const en = { - "chart": { - "delete": "Delete", - "data": "Data", - "mode": "Mode", - "config": "Configuration", - "UIMode": "UI Mode", - "chartType": "Chart Type", - "xAxis": "X-axis", - "chartSeries": "Chart Series", - "customSeries": "Custom Series", - "add": "Add", - "confirmDelete": "Confirm Delete: ", - "seriesName": "Series Name", - "dataColumns": "Data Columns", - "title": "Title", - "xAxisDirection": "X-axis Direction", - "xAxisName": "X-axis Name", - "xAxisType": "X-axis Type", - "xAxisTypeTooltip": "Automatically detected based on X-axis data. For type description, refer to: ", - "logBase": "Log Base", - "yAxisName": "Y-axis Name", - "yAxisType": "Y-axis Type", - "yAxisDataFormat": "Y-axis Data Type", - "yAxisDataFormatTooltip": "Indicates the value of each coordinate. Example: '{{value * 100 + \"%\"}}'", - "basicBar": "Basic Bar", - "stackedBar": "Stacked Bar", - "barType": "Bar Chart Type", - "categoryAxis": "Category Axis", - "valueAxis": "Value Axis", - "timeAxis": "Time Axis", - "logAxis": "Log Axis", - "auto": "Default", - "legendPosition": "Legend Position", - "basicLine": "Basic Line", - "stackedLine": "Stacked Line", - "areaLine": "Area Line", - "smooth": "Smooth Curve", - "lineType": "Line Chart Type", - "basicPie": "Basic Pie", - "doughnutPie": "Doughnut Pie", - "rosePie": "Rose Pie", - "pieType": "Pie Chart Type", - "spending": "Spending", - "budget": "Budget", - "bar": "Bar Chart", - "line": "Line Chart", - "scatter": "Scatter Chart", - "pie": "Pie Chart", - "horizontal": "Horizontal", - "vertical": "Vertical", - "noData": "No Data", - "unknown": "Unknown", - "select": "Select", - "unSelect": "Unselect", - "echartsOptionLabel": "Option", - "echartsOptionTooltip": "ECharts Option", - "echartsOptionExamples": "ECharts Examples", - "echartsMapOptionTooltip": "ECharts Map Option", - "echartsMapOptionExamples": "ECharts Map Examples", - "selectDesc": "Triggered when a user selects part of the data in the chart", - "unselectDesc": "Triggered when a user unselects part of the data in the chart", - "selectedPointsDesc": "Selected Points", - "dataDesc": "JSON Data for the Chart", - "titleDesc": "Current Chart Title", - "scatterShape": "Scatter Shape", - "circle": "Circle", - "rect": "Rectangle", - "triangle": "Triangle", - "diamond": "Diamond", - "pin": "Pin", - "arrow": "Arrow", - "pointColorLabel": "Point Color", - "pointColorTooltip": "Set point color based on series name and value. Variables: seriesName, value. Example: '{{value < 25000 ? \"red\" : \"green\"}}'", - "mapReady": "Map Ready", - "mapReadyDesc": "Triggers when the map is ready", - "zoomLevelChange": "Zoom Level Change", - "zoomLevelChangeDesc": "Triggers when the map zoom level changes", - "centerPositionChange": "Center Position Change", - "centerPositionChangeDesc": "Triggers when the map center position changes" + chart: { + delete: "Delete", + data: "Data", + mode: "Mode", + config: "Configuration", + UIMode: "UI Mode", + chartType: "Chart Type", + xAxis: "X-axis", + chartSeries: "Chart Series", + customSeries: "Custom Series", + add: "Add", + confirmDelete: "Confirm Delete: ", + seriesName: "Series Name", + dataColumns: "Data Columns", + title: "Title", + xAxisDirection: "X-axis Direction", + xAxisName: "X-axis Name", + xAxisType: "X-axis Type", + xAxisTypeTooltip: + "Automatically detected based on X-axis data. For type description, refer to: ", + logBase: "Log Base", + yAxisName: "Y-axis Name", + yAxisType: "Y-axis Type", + yAxisDataFormat: "Y-axis Data Type", + yAxisDataFormatTooltip: + "Indicates the value of each coordinate. Example: '{{value * 100 + \"%\"}}'", + basicBar: "Basic Bar", + stackedBar: "Stacked Bar", + barType: "Bar Chart Type", + categoryAxis: "Category Axis", + valueAxis: "Value Axis", + timeAxis: "Time Axis", + logAxis: "Log Axis", + auto: "Default", + legendPosition: "Legend Position", + basicLine: "Basic Line", + stackedLine: "Stacked Line", + areaLine: "Area Line", + smooth: "Smooth Curve", + lineType: "Line Chart Type", + basicPie: "Basic Pie", + doughnutPie: "Doughnut Pie", + rosePie: "Rose Pie", + pieType: "Pie Chart Type", + spending: "Spending", + budget: "Budget", + bar: "Bar Chart", + line: "Line Chart", + scatter: "Scatter Chart", + pie: "Pie Chart", + horizontal: "Horizontal", + vertical: "Vertical", + noData: "No Data", + unknown: "Unknown", + select: "Select", + unSelect: "Unselect", + echartsOptionLabel: "Option", + echartsOptionTooltip: "ECharts Option", + echartsOptionExamples: "ECharts Examples", + echartsMapOptionTooltip: "ECharts Map Option", + echartsMapOptionExamples: "ECharts Map Examples", + selectDesc: "Triggered when a user selects part of the data in the chart", + unselectDesc: + "Triggered when a user unselects part of the data in the chart", + selectedPointsDesc: "Selected Points", + dataDesc: "JSON Data for the Chart", + titleDesc: "Current Chart Title", + scatterShape: "Scatter Shape", + circle: "Circle", + rect: "Rectangle", + triangle: "Triangle", + diamond: "Diamond", + pin: "Pin", + arrow: "Arrow", + pointColorLabel: "Point Color", + pointColorTooltip: + 'Set point color based on series name and value. Variables: seriesName, value. Example: \'{{value < 25000 ? "red" : "green"}}\'', + mapReady: "Map Ready", + mapReadyDesc: "Triggers when the map is ready", + zoomLevelChange: "Zoom Level Change", + zoomLevelChangeDesc: "Triggers when the map zoom level changes", + centerPositionChange: "Center Position Change", + centerPositionChangeDesc: "Triggers when the map center position changes", }, - "imageEditor": { - "defaultSrc": "", - "save": "Save", - "saveDesc": "Save Image", - "src": "Image Source", - "name": "Image Name", - "buttonText": "Button Text", - "srcDesc": "Image Source", - "nameDesc": "Image Name", - "dataURIDesc": "Image Data URI", - "dataDesc": "Image Data", - "buttonTextDesc": "Button Text" + imageEditor: { + defaultSrc: "", + save: "Save", + saveDesc: "Save Image", + src: "Image Source", + name: "Image Name", + buttonText: "Button Text", + srcDesc: "Image Source", + nameDesc: "Image Name", + dataURIDesc: "Image Data URI", + dataDesc: "Image Data", + buttonTextDesc: "Button Text", }, - "calendar": { - "events": "Events Data", - "editable": "Editable", - "defaultDate": "Default Date", - "defaultDateTooltip": "Initial display date of the calendar", - "defaultView": "Default View", - "defaultViewTooltip": "Initial view of the calendar", - "showEventTime": "Show Event Times", - "showEventTimeTooltip": "Display event time text", - "showWeekends": "Show Weekends", - "showAllDay": "Show All-Day", - "showAllDayTooltip": "Display all-day slot in week and day views", - "dayMaxEvents": "Day Max Events", - "dayMaxEventsTooltip": "Max events per day in month view, 0 for cell height limit", - "eventMaxStack": "Event Max Stack", - "eventMaxStackTooltip": "Max events to stack horizontally in week and day views, 0 for no limit", - "selectInterval": "Selected Interval", - "selectEvent": "Selected Event", - "changeSet": "Changed Event Object", - "headerBtnBackground": "Button Background", - "btnText": "Button Text", - "title": "Title", - "selectBackground": "Selected Background", - "today": "Today", - "month": "Month", - "week": "Week", - "day": "Day", - "list": "List", - "monday": "Monday", - "tuesday": "Tuesday", - "wednesday": "Wednesday", - "thursday": "Thursday", - "friday": "Friday", - "saturday": "Saturday", - "sunday": "Sunday", - "startWeek": "Start From", - "creatEvent": "Create Event", - "editEvent": "Edit Event", - "eventName": "Event Name", - "eventColor": "Event Color", - "eventGroupId": "Group ID", - "groupIdTooltip": "Group ID groups events for drag and resize together.", - "more": "More", - "allDay": "All Day", - "eventNameRequire": "Enter Event Name", - "eventId": "Event ID", - "eventIdRequire": "Enter Event ID", - "eventIdTooltip": "Unique ID for each event", - "eventIdExist": "ID Exists" + calendar: { + events: "Events Data", + editable: "Editable", + licence: "Licence Key", + defaultDate: "Default Date", + defaultDateTooltip: "Initial display date of the calendar", + defaultView: "Default View", + defaultViewTooltip: "Initial view of the calendar", + showEventTime: "Show Event Times", + showEventTimeTooltip: "Display event time text", + showWeekends: "Show Weekends", + showAllDay: "Show All-Day", + showAllDayTooltip: "Display all-day slot in week and day views", + dayMaxEvents: "Day Max Events", + dayMaxEventsTooltip: + "Max events per day in month view, 0 for cell height limit", + eventMaxStack: "Event Max Stack", + eventMaxStackTooltip: + "Max events to stack horizontally in week and day views, 0 for no limit", + selectInterval: "Selected Interval", + selectEvent: "Selected Event", + changeSet: "Changed Event Object", + headerBtnBackground: "Button Background", + btnText: "Button Text", + title: "Title", + selectBackground: "Selected Background", + today: "Today", + month: "Month", + week: "Week", + day: "Day", + list: "List", + monday: "Monday", + tuesday: "Tuesday", + wednesday: "Wednesday", + thursday: "Thursday", + friday: "Friday", + saturday: "Saturday", + sunday: "Sunday", + startWeek: "Start From", + creatEvent: "Create Event", + editEvent: "Edit Event", + eventName: "Event Name", + eventColor: "Event Color", + eventGroupId: "Group ID", + groupIdTooltip: "Group ID groups events for drag and resize together.", + more: "More", + allDay: "All Day", + eventNameRequire: "Enter Event Name", + eventId: "Event ID", + eventIdRequire: "Enter Event ID", + eventIdTooltip: "Unique ID for each event", + eventIdExist: "ID Exists", }, }; From df156a58fa17f1275f3c38b443100c4f6505de60 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 23 Feb 2024 13:04:51 +0300 Subject: [PATCH 2/5] fixed access of licence in the full calendar --- .../lowcoder-comps/src/comps/calendarComp/calendarComp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 320076851..5cb817e31 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -103,6 +103,7 @@ let CalendarBasicComp = (function () { style, firstDay, editable, + licenceKey, } = props; function renderEventContent(eventInfo: EventContentArg) { @@ -309,6 +310,8 @@ let CalendarBasicComp = (function () { initialDate = undefined; } + + return ( (!showEventTime ? "no-time" : "")} slotLabelFormat={slotLabelFormat} From 0e95abd0c16f3529e225089336a104335bfaf2e8 Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Fri, 23 Feb 2024 13:05:29 +0300 Subject: [PATCH 3/5] fixed bug on licence key input filled --- .../src/comps/comps/remoteComp/loaders.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx index 24038fb45..93011ee73 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx @@ -1,11 +1,18 @@ import { NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins"; import { trans } from "i18n"; import { CompConstructor } from "lowcoder-core"; -import { RemoteCompInfo, RemoteCompLoader, RemoteCompSource } from "types/remoteComp"; +import { + RemoteCompInfo, + RemoteCompLoader, + RemoteCompSource, +} from "types/remoteComp"; -async function npmLoader(remoteInfo: RemoteCompInfo): Promise { +async function npmLoader( + remoteInfo: RemoteCompInfo +): Promise { const { packageName, packageVersion = "latest", compName } = remoteInfo; const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/index.js`; + // const entry = `../../../../../public/package/index.js`; // console.log("Entry", entry); try { const module = await import(/* webpackIgnore: true */ entry); @@ -21,7 +28,9 @@ async function npmLoader(remoteInfo: RemoteCompInfo): Promise { +async function bundleLoader( + remoteInfo: RemoteCompInfo +): Promise { const { packageName, packageVersion = "latest", compName } = remoteInfo; const entry = `/${packageName}/${packageVersion}/index.js?v=${REACT_APP_COMMIT_ID}`; const module = await import(/* webpackIgnore: true */ entry); From a1918e511c12a8f83f6481594a44f5ab2643bbcb Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Mon, 26 Feb 2024 16:00:19 +0300 Subject: [PATCH 4/5] "add premium and free calendar options drop down" --- client/packages/lowcoder-comps/package.json | 2 + .../src/comps/calendarComp/calendarComp.tsx | 48 +++++-- .../comps/calendarComp/calendarConstants.tsx | 92 ++++++++++---- .../src/i18n/comps/locales/en.ts | 1 + client/yarn.lock | 119 ++++++++++++++++++ 5 files changed, 227 insertions(+), 35 deletions(-) diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index d67a915cd..fe4d32f98 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -4,6 +4,7 @@ "type": "module", "license": "MIT", "dependencies": { + "@fullcalendar/adaptive": "^6.1.11", "@fullcalendar/core": "^6.1.6", "@fullcalendar/daygrid": "^6.1.6", "@fullcalendar/interaction": "^6.1.6", @@ -11,6 +12,7 @@ "@fullcalendar/moment": "^6.1.6", "@fullcalendar/react": "^6.1.6", "@fullcalendar/resource": "^6.1.11", + "@fullcalendar/resource-timegrid": "^6.1.11", "@fullcalendar/resource-timeline": "^6.1.11", "@fullcalendar/timegrid": "^6.1.6", "@types/react": "^18.2.45", diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 5cb817e31..195e5c1fb 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -27,6 +27,9 @@ import { default as Input } from "antd/es/input"; import { trans, getCalendarLocale } from "../../i18n/comps"; import { createRef, useContext, useRef, useState } from "react"; import resourceTimelinePlugin from "@fullcalendar/resource-timeline"; +import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid"; +import adaptivePlugin from "@fullcalendar/adaptive"; + import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; @@ -36,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all"; import { EventContentArg, DateSelectArg } from "@fullcalendar/core"; import momentPlugin from "@fullcalendar/moment"; import { - DefaultViewOptions, + DefaultWithFreeViewOptions, + DefaultWithPremiumViewOptions, FirstDayOptions, Wrapper, Event, @@ -53,13 +57,20 @@ import { } from "./calendarConstants"; import dayjs from "dayjs"; +function filterViews() {} + const childrenMap = { events: jsonValueExposingStateControl("events", defaultData), onEvent: ChangeEventHandlerControl, editable: withDefault(BoolControl, true), defaultDate: withDefault(StringControl, "{{ new Date() }}"), - defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"), + defaultFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), + defaultPremiumView: dropdownControl( + DefaultWithPremiumViewOptions, + "timeGridWeek" + ), + firstDay: dropdownControl(FirstDayOptions, "1"), showEventTime: withDefault(BoolControl, true), showWeekends: withDefault(BoolControl, true), @@ -69,7 +80,7 @@ const childrenMap = { style: styleControl(CalendarStyle), licenceKey: withDefault(StringControl, ""), }; - + let CalendarBasicComp = (function () { return new UICompBuilder(childrenMap, (props) => { const theme = useContext(ThemeContext); @@ -94,7 +105,8 @@ let CalendarBasicComp = (function () { const { defaultDate, - defaultView, + defaultFreeView, + defaultPremiumView, showEventTime, showWeekends, showAllDay, @@ -309,8 +321,10 @@ let CalendarBasicComp = (function () { } catch (error) { initialDate = undefined; } - - + let defaultView = defaultFreeView; + if (licenceKey != "") { + defaultView = defaultPremiumView; + } return ( { @@ -362,7 +378,7 @@ let CalendarBasicComp = (function () { setLeft(left); }} buttonText={buttonText} - schedulerLicenseKey={licenceKey} + schedulerLicenseKey={"CC-Attribution-NonCommercial-NoDerivatives"} views={views} eventClassNames={() => (!showEventTime ? "no-time" : "")} slotLabelFormat={slotLabelFormat} @@ -422,6 +438,7 @@ let CalendarBasicComp = (function () { ); }) .setPropertyViewFn((children) => { + let licence = children.licenceKey.getView(); return ( <>
@@ -435,16 +452,21 @@ let CalendarBasicComp = (function () {
{children.editable.propertyView({ - label: trans("calendar.editable"), - })} + label: trans("calendar.editable"), + })} {children.defaultDate.propertyView({ label: trans("calendar.defaultDate"), tooltip: trans("calendar.defaultDateTooltip"), })} - {children.defaultView.propertyView({ - label: trans("calendar.defaultView"), - tooltip: trans("calendar.defaultViewTooltip"), - })} + {licence == "" + ? children.defaultFreeView.propertyView({ + label: trans("calendar.defaultView"), + tooltip: trans("calendar.defaultViewTooltip"), + }) + : children.defaultPremiumView.propertyView({ + label: trans("calendar.defaultView"), + tooltip: trans("calendar.defaultViewTooltip"), + })} {children.firstDay.propertyView({ label: trans("calendar.startWeek"), })} diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index bbc02cafd..394c0427a 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -205,9 +205,14 @@ export const Wrapper = styled.div<{ flex-direction: inherit; } .fc-day-today .fc-daygrid-day-number { - background-color: ${(props) => props.$theme?.primary ? props.$theme.primary : props.$style.background}; + background-color: ${(props) => + props.$theme?.primary ? props.$theme.primary : props.$style.background}; color: ${(props) => - contrastText(props.$theme?.primary || "", props.$theme?.textDark || "#000000", props.$theme?.textLight || "#ffffff")}; + contrastText( + props.$theme?.primary || "", + props.$theme?.textDark || "#000000", + props.$theme?.textLight || "#ffffff" + )}; } .fc-daygrid-day-events { padding: 1px 0 5px 0; @@ -330,7 +335,8 @@ export const Wrapper = styled.div<{ height: 20px; padding-left: 15px; font-weight: 500; - background-color: ${(props) => lightenColor(props.$style.background, 0.1)}; + background-color: ${(props) => + lightenColor(props.$style.background, 0.1)}; } } } @@ -368,7 +374,7 @@ export const Wrapper = styled.div<{ } &:hover { .event-remove { - opacity: ${(props) => props.$editable ? 1 : undefined}; + opacity: ${(props) => (props.$editable ? 1 : undefined)}; } } } @@ -398,7 +404,8 @@ export const Wrapper = styled.div<{ // border-radius, bg .fc-theme-standard .fc-list { background-color: ${(props) => props.$style.background}; - border-radius: ${(props) => `0 0 ${props.$style.radius} ${props.$style.radius}`}; + border-radius: ${(props) => + `0 0 ${props.$style.radius} ${props.$style.radius}`}; border-color: ${(props) => props.$style.border}; border-top-color: ${(props) => toHex(props.$style.border) === "#D7D9E0" @@ -406,7 +413,8 @@ export const Wrapper = styled.div<{ : lightenColor(props.$style.border, 0.03)}; } .fc-scrollgrid-liquid { - border-radius: ${(props) => `0 0 ${props.$style.radius} ${props.$style.radius}`}; + border-radius: ${(props) => + `0 0 ${props.$style.radius} ${props.$style.radius}`}; overflow: hidden; border-right-width: 1px; border-bottom-width: 1px; @@ -459,7 +467,8 @@ export const Wrapper = styled.div<{ margin-bottom: 0; border: 1px solid ${(props) => props.$style.border}; border-bottom: none; - border-radius: ${(props) => `${props.$style.radius} ${props.$style.radius} 0 0`}; + border-radius: ${(props) => + `${props.$style.radius} ${props.$style.radius} 0 0`}; background-color: ${(props) => props.$style.background}; } .fc-toolbar-title { @@ -488,7 +497,9 @@ export const Wrapper = styled.div<{ border-color: ${(props) => toHex(props.$style.headerBtnBackground) === "#FFFFFF" ? "#D7D9E0" - : backgroundToBorder(genHoverColor(props.$style.headerBtnBackground))}; + : backgroundToBorder( + genHoverColor(props.$style.headerBtnBackground) + )}; } } &:not(:disabled):focus { @@ -500,7 +511,8 @@ export const Wrapper = styled.div<{ &, &:hover { background-color: ${(props) => props.$style.headerBtnBackground}; - border-color: ${(props) => backgroundToBorder(props.$style.headerBtnBackground)}; + border-color: ${(props) => + backgroundToBorder(props.$style.headerBtnBackground)}; color: ${(props) => toHex(props.$style.btnText) === "#222222" ? "#B8B9BF" @@ -518,7 +530,8 @@ export const Wrapper = styled.div<{ font-size: 14px; margin-left: 8px; background-color: ${(props) => props.$style.headerBtnBackground}; - border-color: ${(props) => backgroundToBorder(props.$style.headerBtnBackground)}; + border-color: ${(props) => + backgroundToBorder(props.$style.headerBtnBackground)}; color: ${(props) => props.$style.btnText}; &.fc-today-button { min-width: 52px; @@ -538,8 +551,8 @@ export const Wrapper = styled.div<{ toHex(props.$style.headerBtnBackground) === "#FFFFFF" ? "#EFEFF1" : isDarkColor(props.$style.headerBtnBackground) - ? props.$style.headerBtnBackground - : darkenColor(props.$style.headerBtnBackground, 0.1)}; + ? props.$style.headerBtnBackground + : darkenColor(props.$style.headerBtnBackground, 0.1)}; border-radius: 4px; margin-left: 16px; .fc-button-primary { @@ -585,10 +598,13 @@ export const Wrapper = styled.div<{ } .fc-day-today.fc-col-header-cell { background-color: ${(props) => - isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"}; + isDarkColor(props.$style.background) + ? "#ffffff19" + : toHex(props.$theme?.primary!) + "19"}; a { color: ${(props) => - !isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)}; + !isDarkColor(props.$style.background) && + darkenColor(props.$theme?.primary!, 0.1)}; } } .fc-col-header-cell-cushion { @@ -649,7 +665,8 @@ export const Event = styled.div<{ box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"}; border: 1px solid ${(props) => props.$style.border}; display: ${(props) => props.isList && "flex"}; - background-color: ${(props) => !props.isList && lightenColor(props.$style.background, 0.1)}; + background-color: ${(props) => + !props.isList && lightenColor(props.$style.background, 0.1)}; overflow: hidden; font-size: 13px; line-height: 19px; @@ -671,7 +688,9 @@ export const Event = styled.div<{ .event-time { color: ${(props) => !props.isList && - (isDarkColor(props.$style.text) ? lightenColor(props.$style.text, 0.2) : props.$style.text)}; + (isDarkColor(props.$style.text) + ? lightenColor(props.$style.text, 0.2) + : props.$style.text)}; margin-left: 15px; white-space: pre-wrap; margin-top: 2px; @@ -710,14 +729,15 @@ export const Event = styled.div<{ } } &.past { - background-color: ${(props) => isDarkColor(props.$style.background) && props.$style.background}; + background-color: ${(props) => + isDarkColor(props.$style.background) && props.$style.background}; &::before { background-color: ${(props) => toHex(props.$style.text) === "#3C3C3C" ? "#8B8FA3" : isDarkColor(props.$style.text) - ? lightenColor(props.$style.text, 0.3) - : props.$style.text}; + ? lightenColor(props.$style.text, 0.3) + : props.$style.text}; } &::before, .event-title, @@ -758,9 +778,34 @@ export enum ViewType { WEEK = "timeGridWeek", DAY = "timeGridDay", LIST = "listWeek", + TIMEGRID = "timeGridDay", } -export const DefaultViewOptions = [ + +export const DefaultWithPremiumViewOptions = [ + { + label: trans("calendar.month"), + value: "dayGridMonth", + }, + { + label: trans("calendar.week"), + value: "timeGridWeek", + }, + { + label: trans("calendar.timeline"), + value: "resourceTimeline", + }, + { + label: trans("calendar.day"), + value: "timeGridDay", + }, + { + label: trans("calendar.list"), + value: "listWeek", + }, +] as const; + +export const DefaultWithFreeViewOptions = [ { label: trans("calendar.month"), value: "dayGridMonth", @@ -815,7 +860,7 @@ export const defaultData = [ id: "1", title: "Coding", start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT), - end: dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT), + end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT), color: "#079968", }, { @@ -831,6 +876,7 @@ export const buttonText = { today: trans("calendar.today"), month: trans("calendar.month"), week: trans("calendar.week"), + timeline: trans("calendar.timeline"), day: trans("calendar.day"), list: trans("calendar.list"), }; @@ -843,7 +889,9 @@ export const headerToolbar = { const weekHeadContent = (info: DayHeaderContentArg) => { const text = info.text.split(" "); return { - html: ` + html: ` ${text[0]} ${text[1]} `, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 048650e24..18c022991 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -127,6 +127,7 @@ export const en = { week: "Week", day: "Day", list: "List", + timeline: "TimeLine", //added by fred monday: "Monday", tuesday: "Tuesday", wednesday: "Wednesday", diff --git a/client/yarn.lock b/client/yarn.lock index 385109146..a852f80e2 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -2542,6 +2542,17 @@ __metadata: languageName: node linkType: hard +"@fullcalendar/adaptive@npm:^6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/adaptive@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: abfead327433c7142eec5abae9cce7af217f86218c95aa156ab028ae87f90edfc4336090a55764050861aab221217cea5dc7a80658c26f795004eb9d3c290f92 + languageName: node + linkType: hard + "@fullcalendar/core@npm:^6.1.6": version: 6.1.10 resolution: "@fullcalendar/core@npm:6.1.10" @@ -2560,6 +2571,15 @@ __metadata: languageName: node linkType: hard +"@fullcalendar/daygrid@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/daygrid@npm:6.1.11" + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: 6eb5606de58b7a8ec30d96618a6d15b2c0d7108c94593ff94e81a8d87ce8efb1f29f3849c6c3f2b8ae56198ffe6235e2ec0e4a1270993c022dc194016e595685 + languageName: node + linkType: hard + "@fullcalendar/interaction@npm:^6.1.6": version: 6.1.10 resolution: "@fullcalendar/interaction@npm:6.1.10" @@ -2588,6 +2608,15 @@ __metadata: languageName: node linkType: hard +"@fullcalendar/premium-common@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/premium-common@npm:6.1.11" + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: 54751d6a7245ecec3005450084e4492a2938d90d8538376840572c98ced36101b5a6ea0ce654d3bf98ad173d2e7d45c6fe5d6c530dca785c48e74dcb1eb3556f + languageName: node + linkType: hard + "@fullcalendar/react@npm:^6.1.6": version: 6.1.10 resolution: "@fullcalendar/react@npm:6.1.10" @@ -2599,6 +2628,69 @@ __metadata: languageName: node linkType: hard +"@fullcalendar/resource-daygrid@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/resource-daygrid@npm:6.1.11" + dependencies: + "@fullcalendar/daygrid": ~6.1.11 + "@fullcalendar/premium-common": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + "@fullcalendar/resource": ~6.1.11 + checksum: afa8a9e240afd9678a5b22c243e64f89568ef3b4d4de62dece6d6d84915774a65f39ff7bc476add50c06a53716fc4011c5a23b19cd47f2723805bcc81f113cfa + languageName: node + linkType: hard + +"@fullcalendar/resource-timegrid@npm:^6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/resource-timegrid@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + "@fullcalendar/resource-daygrid": ~6.1.11 + "@fullcalendar/timegrid": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + "@fullcalendar/resource": ~6.1.11 + checksum: 5e85ef1338cc627598ca644e8f8bcca9f4dab049dd4df1edacf2f9a732663c82ee14fac03552e5b31f9d03804c853c02485d3452e062184e7cd0264ba8161719 + languageName: node + linkType: hard + +"@fullcalendar/resource-timeline@npm:^6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/resource-timeline@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + "@fullcalendar/scrollgrid": ~6.1.11 + "@fullcalendar/timeline": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + "@fullcalendar/resource": ~6.1.11 + checksum: ad9d27a642f097e6f50d1277dd1a09ea8789d7e936ac995e9287e86c8b346dd173c31018d0b29474ebae0fbd5b4a44720fc05db5b671394903767f4095695e2b + languageName: node + linkType: hard + +"@fullcalendar/resource@npm:^6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/resource@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: 6b7266f2e3be6920d3e70fe31aaa42c8eb0f8962d76f79acfeb2e52b50f9f3fac1b98644d5f9b89b5b4109daeb961de6cbd32b58b5b215c426ca0a9534fa6b14 + languageName: node + linkType: hard + +"@fullcalendar/scrollgrid@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/scrollgrid@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: f7e54b33245170fd0a696898fdd4076644b3772132ba35996558f7d80836fb1161ccd180a4f064dd8aa5a4f728a1abee063ef909b28ac3a3be46e168f6976ede + languageName: node + linkType: hard + "@fullcalendar/timegrid@npm:^6.1.6": version: 6.1.10 resolution: "@fullcalendar/timegrid@npm:6.1.10" @@ -2610,6 +2702,29 @@ __metadata: languageName: node linkType: hard +"@fullcalendar/timegrid@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/timegrid@npm:6.1.11" + dependencies: + "@fullcalendar/daygrid": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: 4a11e6dd908e7d7f660149e6d61eff847efa14d0dcf532f8793de6b035d1a573ef7423fea0df791b6dc5f3d9792df77b72c7e6a1150289d04eca3ff9959a80ec + languageName: node + linkType: hard + +"@fullcalendar/timeline@npm:~6.1.11": + version: 6.1.11 + resolution: "@fullcalendar/timeline@npm:6.1.11" + dependencies: + "@fullcalendar/premium-common": ~6.1.11 + "@fullcalendar/scrollgrid": ~6.1.11 + peerDependencies: + "@fullcalendar/core": ~6.1.11 + checksum: 79341e274a69ae9a63ec67c39b6233ab937daf51177b3689cbe91baf216729805a3fffc12febccece768410b773ae7bb7c51a3eb72b4de64acafedef2b953eff + languageName: node + linkType: hard + "@gilbarbara/deep-equal@npm:^0.1.1": version: 0.1.2 resolution: "@gilbarbara/deep-equal@npm:0.1.2" @@ -11833,12 +11948,16 @@ __metadata: version: 0.0.0-use.local resolution: "lowcoder-comps@workspace:packages/lowcoder-comps" dependencies: + "@fullcalendar/adaptive": ^6.1.11 "@fullcalendar/core": ^6.1.6 "@fullcalendar/daygrid": ^6.1.6 "@fullcalendar/interaction": ^6.1.6 "@fullcalendar/list": ^6.1.9 "@fullcalendar/moment": ^6.1.6 "@fullcalendar/react": ^6.1.6 + "@fullcalendar/resource": ^6.1.11 + "@fullcalendar/resource-timegrid": ^6.1.11 + "@fullcalendar/resource-timeline": ^6.1.11 "@fullcalendar/timegrid": ^6.1.6 "@types/react": ^18.2.45 "@types/react-dom": ^18.2.18 From 4b865841fd9923b1f4f320218319117a8ea856fa Mon Sep 17 00:00:00 2001 From: freddysundowner Date: Mon, 26 Feb 2024 16:03:54 +0300 Subject: [PATCH 5/5] removed hand coded licence key --- .../lowcoder-comps/src/comps/calendarComp/calendarComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 195e5c1fb..c65de7873 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -378,7 +378,7 @@ let CalendarBasicComp = (function () { setLeft(left); }} buttonText={buttonText} - schedulerLicenseKey={"CC-Attribution-NonCommercial-NoDerivatives"} + schedulerLicenseKey={licenceKey} views={views} eventClassNames={() => (!showEventTime ? "no-time" : "")} slotLabelFormat={slotLabelFormat}