diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 88925ff34c..f6117f941a 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -6,6 +6,7 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ # Define env vars ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium +ENV NODE_OPTIONS=--max-old-space-size=8192 # [Optional] Uncomment if you want to install an additional version of node using nvm ARG EXTRA_NODE_VERSION="lts/hydrogen" diff --git a/.devcontainer/scripts/git/pre-push b/.devcontainer/scripts/git/pre-push new file mode 100644 index 0000000000..415ef0262a --- /dev/null +++ b/.devcontainer/scripts/git/pre-push @@ -0,0 +1,4 @@ +#!/bin/sh + +yarn run k:build +yarn run k:test:all \ No newline at end of file diff --git a/.devcontainer/scripts/postCreateCommand.sh b/.devcontainer/scripts/postCreateCommand.sh index 313f26169d..08ff58d37a 100644 --- a/.devcontainer/scripts/postCreateCommand.sh +++ b/.devcontainer/scripts/postCreateCommand.sh @@ -3,5 +3,10 @@ echo "Set permissions" sudo chown -R node:node node_modules +echo "Set Git hooks" +echo "Set pre-push hook" +cp .devcontainer/scripts/git/pre-push .git/hooks +chmod +x .git/hooks/pre-push + echo "Installing Deps" yarn install \ No newline at end of file diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js index 584e48db67..650db95bb5 100644 --- a/packages/ketchup/src/assets/input-panel.js +++ b/packages/ketchup/src/assets/input-panel.js @@ -238,6 +238,7 @@ let data = { }, ], }, + fun: 'FUN ', shape: 'ACP', }, LIS: { @@ -451,5 +452,29 @@ const inputPanelCallback = [ }, ]; +const optionsHandlerCallback = () => { + return Promise.resolve({ + type: 'SmeupTree', + messages: [], + children: [ + { + content: { + codice: 'ROM', + testo: 'Rome', + }, + children: [], + }, + { + content: { + codice: 'TAR', + testo: 'Taranto', + }, + children: [], + }, + ], + }); +}; + inputPanel.valueChangeCb = inputPanelCallback; +inputPanel.optionsHandler = optionsHandlerCallback; inputPanel.submitCb = (e) => console.log(e); diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index fd2976a397..1d3501a0f2 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -43,7 +43,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations"; import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; import { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -import { InputPanelEventsCallback, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations"; +import { InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations"; import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations"; @@ -93,7 +93,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations"; export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; export { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -export { InputPanelEventsCallback, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations"; +export { InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations"; export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations"; @@ -2483,16 +2483,16 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; - /** - * Sets the callbacks functions on ketchup events - * @default [] - */ - "handleEventsCallbacks": InputPanelEventsCallback[]; /** * Creates a hidden submit button in order to submit the form with enter. * @default false */ "hiddenSubmitButton": boolean; + /** + * Sets the callback function on loading options via FUN + * @default [] + */ + "optionsHandler": InputPanelOptionsHandler; /** * This method is used to trigger a new render of the component. */ @@ -7216,11 +7216,6 @@ declare namespace LocalJSX { * @default null */ "data"?: KupInputPanelData; - /** - * Sets the callbacks functions on ketchup events - * @default [] - */ - "handleEventsCallbacks"?: InputPanelEventsCallback[]; /** * Creates a hidden submit button in order to submit the form with enter. * @default false @@ -7230,6 +7225,11 @@ declare namespace LocalJSX { * When component load is complete */ "onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent) => void; + /** + * Sets the callback function on loading options via FUN + * @default [] + */ + "optionsHandler"?: InputPanelOptionsHandler; /** * Sets the callback function on submit form * @default null diff --git a/packages/ketchup/src/components/kup-image-list/readme.md b/packages/ketchup/src/components/kup-image-list/readme.md index c2448f711c..1a9c4747f6 100644 --- a/packages/ketchup/src/components/kup-image-list/readme.md +++ b/packages/ketchup/src/components/kup-image-list/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | -------------- | -------------- | ---------------------------------------------------------------- | ------------------------ | ----------- | -| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `4` | +| `columns` | `columns` | Number of columns to display in the grid layout. | `number` | `null` | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `data` | -- | Actual data of the component. | `KupImageListDataNode[]` | `[]` | | `ripple` | `ripple` | When enabled displays Material's ripple effect on clicked items. | `boolean` | `true` | diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index c24fc2868d..22cd63a37d 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -73,7 +73,8 @@ export interface KupInputPanelLayoutField { export type DataAdapterFn = ( options: GenericObject, fieldLabel: string, - currentValue: string + currentValue: string, + fun?: string ) => Object; export type InputPanelCells = { @@ -89,15 +90,12 @@ export type InputPanelEvent = { }; }; -export type InputPanelEventsCallback = { - eventName: string; - eventCallback: (e: InputPanelEvent) => unknown; -}; +export type InputPanelOptionsHandler = (fun: string) => Promise; export enum KupInputPanelProps { customStyle = 'Custom style of the component.', data = 'Actual data of the input panel.', hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.', submitCb = 'Sets the callback function on submit form', - handleEventsCallbacks = 'Sets the callback function on value change event', + optionsHandler = 'Sets the callback function to recieve options', } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts index e407b41532..e328a24cbe 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -110,24 +110,30 @@ describe('kup-input-panel', () => { editable: true, mandatory: true, options: [ - 'Florence', - 'Venice', - 'Rome', - 'Madrid', - 'Barcelona', - 'Seville', - 'Berlin', - 'Munich', - 'Hamburg', - 'Paris', - 'Marseille', - 'Lyon', - 'Lisbon', - 'Porto', - 'Faro', - 'London', - 'Manchester', - 'Liverpool', + { + id: 'FLO', + label: 'Florence', + }, + { + id: 'VEN', + label: 'Venice', + }, + { + id: 'ROM', + label: 'Rome', + }, + { + id: 'MAD', + label: 'Madrid', + }, + { + id: 'BAR', + label: 'Barcelona', + }, + { + id: 'SEV', + label: 'Seville', + }, ], shape: 'ACP', }, @@ -176,7 +182,7 @@ describe('kup-input-panel', () => { const listOptions = await page.findAll('kup-list >>> ul.list li'); expect(listOptions).not.toBeNull(); - expect(listOptions).toHaveLength(2); + expect(listOptions).toHaveLength(1); const firstOptionValue = await listOptions[0].find('span'); expect(firstOptionValue).toEqualText('Rome'); @@ -207,12 +213,30 @@ describe('kup-input-panel', () => { NAT: { value: '', options: [ - 'Italy', - 'Spain', - 'Germany', - 'France', - 'Portugal', - 'England', + { + id: 'ITA', + label: 'Italy', + }, + { + id: 'SPA', + label: 'Spain', + }, + { + id: 'GER', + label: 'Germany', + }, + { + id: 'FRA', + label: 'France', + }, + { + id: 'POR', + label: 'Portugal', + }, + { + id: 'ENG', + label: 'England', + }, ], editable: true, shape: 'CMB', @@ -345,7 +369,24 @@ describe('kup-input-panel', () => { cells: { RAD: { value: '1', - options: ['1', '2', '3', '4'], + options: [ + { + id: '1', + label: 'One', + }, + { + id: '2', + label: 'Two', + }, + { + id: '3', + label: 'Three', + }, + { + id: '4', + label: 'Four', + }, + ], editable: true, shape: 'RAD', }, @@ -375,13 +416,13 @@ describe('kup-input-panel', () => { for (const [i, radioButton] of radioButtons.entries()) { const label = await radioButton.find('label'); expect(label).not.toBeNull(); - expect(label).toEqualText(radioOptions[i]); + expect(label).toEqualText(radioOptions[i].label); const input = await radioButton.find('input'); expect(input).not.toBeNull(); const value = await input.getProperty('value'); - expect(value).toBe(radioOptions[i]); + expect(value).toBe(radioOptions[i].id); if (data.rows[0].cells.RAD.value === value) { const radioButtonCircle = await radioButton.find('div.radio'); diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index d274e33308..4fbfd66538 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -4,6 +4,7 @@ import { Event, EventEmitter, Host, + Listen, Method, Prop, State, @@ -12,7 +13,7 @@ import { forceUpdate, h, } from '@stencil/core'; -import { KupDataCell } from '../../components'; +import { KupAutocompleteEventPayload, KupDataCell } from '../../components'; import { FButton } from '../../f-components/f-button/f-button'; import { FCell } from '../../f-components/f-cell/f-cell'; import { @@ -36,8 +37,7 @@ import { componentWrapperId } from '../../variables/GenericVariables'; import { DataAdapterFn, InputPanelCells, - InputPanelEvent, - InputPanelEventsCallback, + InputPanelOptionsHandler, KupInputPanelCell, KupInputPanelColumn, KupInputPanelData, @@ -91,10 +91,10 @@ export class KupInputPanel { @Prop() submitCb: (e: KupInputPanelSubmit) => unknown = null; /** - * Sets the callbacks functions on ketchup events + * Sets the callback function on loading options via FUN * @default [] */ - @Prop() handleEventsCallbacks: InputPanelEventsCallback[] = []; + @Prop() optionsHandler: InputPanelOptionsHandler = null; //#endregion //#region STATES @@ -423,7 +423,9 @@ export class KupInputPanel { const adapter = dataAdapterMap.get(cellType); - return adapter ? adapter(options, fieldLabel, currentValue) : null; + return adapter + ? adapter(options, fieldLabel, currentValue, cell.fun) + : null; } #slotData(cell: KupInputPanelCell, col: KupInputPanelColumn) { @@ -492,11 +494,12 @@ export class KupInputPanel { } #CMBandACPAdapter( - options: GenericObject, + rawOptions: GenericObject, fieldLabel: string, - currentValue: string + currentValue: string, + fun: string ) { - return { + const configCMandACP = { data: { 'kup-text-field': { trailingIcon: true, @@ -505,13 +508,26 @@ export class KupInputPanel { }, 'kup-list': { showIcons: true, - data: !options - ? [] - : this.#optionsTreeComboAdapter(options, currentValue), + data: [], }, }, label: fieldLabel, }; + + const options = fun ? this.optionsHandler(fun) : rawOptions; + + if (options instanceof Promise) { + options.then( + (data) => + (configCMandACP.data['kup-list'].data = + this.#optionsTreeComboAdapter(data, currentValue) ?? []) + ); + } else if (options) { + configCMandACP.data['kup-list'].data = + this.#optionsTreeComboAdapter(options, currentValue); + } + + return configCMandACP; } #CHKAdapter( @@ -622,23 +638,23 @@ export class KupInputPanel { this.kupReady.emit({ comp: this, id: this.rootElement.id }); this.#kupManager.debug.logLoad(this, true); - this.handleEventsCallbacks.map((cbData) => { - this.rootElement.addEventListener(cbData.eventName, (e: any) => { - const inputPanelEvent: InputPanelEvent = { - state: this.inputPanelCells.find((data) => - data.cells.find( - (cell) => cell.column.name === e.detail.id - ) - ).cells, - data: { - field: e.detail.id, - value: e.detail.inputValue || e.detail.value, - }, - }; - - cbData.eventCallback(inputPanelEvent); - }); - }); + // this.handleEventsCallbacks.map((cbData) => { + // this.rootElement.addEventListener(cbData.eventName, (e: any) => { + // const inputPanelEvent: InputPanelEvent = { + // state: this.inputPanelCells.find((data) => + // data.cells.find( + // (cell) => cell.column.name === e.detail.id + // ) + // ).cells, + // data: { + // field: e.detail.id, + // value: e.detail.inputValue || e.detail.value, + // }, + // }; + + // cbData.eventCallback(inputPanelEvent); + // }); + // }); } componentWillRender() { diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md index a14118aa68..e6fd8dad82 100644 --- a/packages/ketchup/src/components/kup-input-panel/readme.md +++ b/packages/ketchup/src/components/kup-input-panel/readme.md @@ -7,13 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ---------------------- | ---------------------------------------------------------------------- | ------------------------------------- | ------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the form. | `KupInputPanelData` | `null` | -| `handleEventsCallbacks` | -- | Sets the callbacks functions on ketchup events | `InputPanelEventsCallback[]` | `[]` | -| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` | -| `submitCb` | -- | Sets the callback function on submit form | `(e: KupInputPanelSubmit) => unknown` | `null` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ---------------------------------------------------------------------- | ----------------------------------------- | ------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the form. | `KupInputPanelData` | `null` | +| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean` | `false` | +| `optionsHandler` | -- | Sets the callback function on loading options via FUN | `(fun: string) => Promise` | `null` | +| `submitCb` | -- | Sets the callback function on submit form | `(e: KupInputPanelSubmit) => unknown` | `null` | ## Events diff --git a/packages/ketchup/src/components/kup-planner/readme.md b/packages/ketchup/src/components/kup-planner/readme.md index 3ec6261e78..21e27d06b2 100644 --- a/packages/ketchup/src/components/kup-planner/readme.md +++ b/packages/ketchup/src/components/kup-planner/readme.md @@ -7,52 +7,57 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------------- | ------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------ | ----------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Dataset containg the tasks list | `KupDataDataset` | `undefined` | -| `detailColorCol` | `detail-color-col` | Column containing the detail color, in hex format | `string` | `undefined` | -| `detailColumns` | -- | Columns containing informations displayed in the left box, near the gantt of details | `string[]` | `undefined` | -| `detailData` | -- | Dataset containg the details list | `KupDataDataset` | `undefined` | -| `detailDates` | -- | Columns containing detail duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `detailFilter` | `detail-filter` | Sets the detail's filter. | `string` | `undefined` | -| `detailHeight` | `detail-height` | Height for detail gantt | `number` | `undefined` | -| `detailIconCol` | `detail-icon-col` | Column containing icon name to show, for detail | `string` | `undefined` | -| `detailIdCol` | `detail-id-col` | Column containing unique detail identifier | `string` | `undefined` | -| `detailInitialScrollX` | `detail-initial-scroll-x` | Sets the initial scroll X for the detail. | `number` | `undefined` | -| `detailInitialScrollY` | `detail-initial-scroll-y` | Sets the initial scroll Y for the detail. | `number` | `undefined` | -| `detailNameCol` | `detail-name-col` | Column containing detail name displayed | `string` | `undefined` | -| `detailPrevDates` | -- | Columns containing forecast detail duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `enableVerticalDragAndDrop` | `enable-vertical-drag-and-drop` | Whether to enable vertical drag and drop for phases. | `boolean` | `false` | -| `listCellWidth` | `list-cell-width` | Total size of the cells inside to the left box, near the gantt | `string` | `'300px'` | -| `mainFilter` | -- | Sets the filter for main gantt. | `HTMLElement` | `undefined` | -| `maxWidth` | `max-width` | Max width for component | `string` | `'90vw'` | -| `phaseColParDep` | `phase-col-par-dep` | Column containing the name of the parent phases | `string` | `undefined` | -| `phaseColorCol` | `phase-color-col` | Column containing the phase color in hex format | `string` | `undefined` | -| `phaseColumns` | -- | Columns containing informations displayed in the left box ,near the gantt of phases | `string[]` | `undefined` | -| `phaseDates` | -- | Columns containing phase duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `phaseIconCol` | `phase-icon-col` | Column containing icon name to show, for phase | `string` | `undefined` | -| `phaseIdCol` | `phase-id-col` | Column containing unique phase identifier | `string` | `undefined` | -| `phaseNameCol` | `phase-name-col` | Column containing phase name displayed | `string` | `undefined` | -| `phasePrevDates` | -- | Columns containing forecast phase duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `readOnly` | `read-only` | When true, the two gantts are not interactable. | `boolean` | `false` | -| `scrollableTaskList` | `scrollable-task-list` | Sets the scroll bar for task list. | `boolean` | `false` | -| `secondaryFilter` | -- | Sets the filter for secondary gantt. | `HTMLElement` | `undefined` | -| `showSecondaryDates` | `show-secondary-dates` | Enable/disable display of secondary dates | `boolean` | `false` | -| `stateId` | `state-id` | | `string` | `''` | -| `store` | -- | | `KupStore` | `undefined` | -| `taskColumns` | -- | Columns containing informations displayed in the left box, near the gantt | `string[]` | `undefined` | -| `taskDates` | -- | Columns containing task duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `taskFilter` | `task-filter` | Sets the task's filter. | `string` | `undefined` | -| `taskHeight` | `task-height` | Height for main gantt | `number` | `undefined` | -| `taskIconCol` | `task-icon-col` | Column containing icon name to show, for task | `string` | `undefined` | -| `taskIdCol` | `task-id-col` | Column containing unique task identifier | `string` | `undefined` | -| `taskInitialScrollX` | `task-initial-scroll-x` | Sets the initial scroll X for the task. | `number` | `undefined` | -| `taskInitialScrollY` | `task-initial-scroll-y` | Sets the initial scroll Y for the task. | `number` | `undefined` | -| `taskNameCol` | `task-name-col` | Column containing task name displayed | `string` | `undefined` | -| `taskPrevDates` | -- | Columns containing forecast task duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | -| `titleMess` | `title-mess` | Message displayed on top | `string` | `undefined` | -| `viewMode` | `view-mode` | Sets the view mode. | `"day" \| "hour" \| "month" \| "week" \| "year"` | `'month'` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------ | ----------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Dataset containg the tasks list | `KupDataDataset` | `undefined` | +| `detailColorCol` | `detail-color-col` | Column containing the detail color, in hex format | `string` | `undefined` | +| `detailColumns` | -- | Columns containing informations displayed in the left box, near the gantt of details | `string[]` | `undefined` | +| `detailData` | -- | Dataset containg the details list | `KupDataDataset` | `undefined` | +| `detailDates` | -- | Columns containing detail duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `detailFilter` | `detail-filter` | Sets the detail's filter. | `string` | `undefined` | +| `detailHeight` | `detail-height` | Height for detail gantt | `number` | `undefined` | +| `detailHours` | -- | Columns containing detail hour duration, from (firstDate) to (secondDate) | `string[]` | `[]` | +| `detailIconCol` | `detail-icon-col` | Column containing icon name to show, for detail | `string` | `undefined` | +| `detailIdCol` | `detail-id-col` | Column containing unique detail identifier | `string` | `undefined` | +| `detailInitialScrollX` | `detail-initial-scroll-x` | Sets the initial scroll X for the detail. | `number` | `undefined` | +| `detailInitialScrollY` | `detail-initial-scroll-y` | Sets the initial scroll Y for the detail. | `number` | `undefined` | +| `detailNameCol` | `detail-name-col` | Column containing detail name displayed | `string` | `undefined` | +| `detailPrevDates` | -- | Columns containing forecast detail duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `detailPrevHours` | -- | Columns containing forecast detail duration, from (firstHour) to (secondHour) | `string[]` | `[]` | +| `listCellWidth` | `list-cell-width` | Total size of the cells inside to the left box, near the gantt | `string` | `'300px'` | +| `mainFilter` | -- | Sets the filter for main gantt. | `HTMLElement` | `undefined` | +| `maxWidth` | `max-width` | Max width for component | `string` | `'90vw'` | +| `phaseColParDep` | `phase-col-par-dep` | Column containing the name of the parent phases | `string` | `undefined` | +| `phaseColorCol` | `phase-color-col` | Column containing the phase color in hex format | `string` | `undefined` | +| `phaseColumns` | -- | Columns containing informations displayed in the left box ,near the gantt of phases | `string[]` | `undefined` | +| `phaseDates` | -- | Columns containing phase duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `phaseHours` | -- | Columns containing phase hour duration, from (firstDate) to (secondDate) | `string[]` | `[]` | +| `phaseIconCol` | `phase-icon-col` | Column containing icon name to show, for phase | `string` | `undefined` | +| `phaseIdCol` | `phase-id-col` | Column containing unique phase identifier | `string` | `undefined` | +| `phaseNameCol` | `phase-name-col` | Column containing phase name displayed | `string` | `undefined` | +| `phasePrevDates` | -- | Columns containing forecast phase duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `phasePrevHours` | -- | Columns containing forecast phase duration, from (firstHour) to (secondHour) | `string[]` | `[]` | +| `readOnly` | `read-only` | When true, the two gantts are not interactable. | `boolean` | `false` | +| `scrollableTaskList` | `scrollable-task-list` | Sets the scroll bar for task list. | `boolean` | `false` | +| `secondaryFilter` | -- | Sets the filter for secondary gantt. | `HTMLElement` | `undefined` | +| `showSecondaryDates` | `show-secondary-dates` | Enable/disable display of secondary dates | `boolean` | `false` | +| `stateId` | `state-id` | | `string` | `''` | +| `store` | -- | | `KupStore` | `undefined` | +| `taskColumns` | -- | Columns containing informations displayed in the left box, near the gantt | `string[]` | `undefined` | +| `taskDates` | -- | Columns containing task duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `taskFilter` | `task-filter` | Sets the task's filter. | `string` | `undefined` | +| `taskHeight` | `task-height` | Height for main gantt | `number` | `undefined` | +| `taskHours` | -- | Columns containing task hours duration, from (firstDate) to (secondDate) | `string[]` | `[]` | +| `taskIconCol` | `task-icon-col` | Column containing icon name to show, for task | `string` | `undefined` | +| `taskIdCol` | `task-id-col` | Column containing unique task identifier | `string` | `undefined` | +| `taskInitialScrollX` | `task-initial-scroll-x` | Sets the initial scroll X for the task. | `number` | `undefined` | +| `taskInitialScrollY` | `task-initial-scroll-y` | Sets the initial scroll Y for the task. | `number` | `undefined` | +| `taskNameCol` | `task-name-col` | Column containing task name displayed | `string` | `undefined` | +| `taskPrevDates` | -- | Columns containing forecast task duration, from (firstDate) to (secondDate) | `string[]` | `undefined` | +| `taskPrevHours` | -- | Columns containing forecast task duration, from (firstHour) to (secondHour) | `string[]` | `[]` | +| `titleMess` | `title-mess` | Message displayed on top | `string` | `undefined` | +| `viewMode` | `view-mode` | Sets the view mode. | `"day" \| "hour" \| "month" \| "week" \| "year"` | `'month'` | ## Events @@ -64,6 +69,7 @@ | `kup-planner-datechange` | | `CustomEvent` | | `kup-planner-dblclick` | | `CustomEvent` | | `kup-planner-didunload` | When component unload is complete | `CustomEvent` | +| `kup-planner-phasedrop` | | `CustomEvent` | | `kup-planner-ready` | | `CustomEvent` | diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/readme.md index bb42deb006..d14b0aff3d 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/readme.md +++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/readme.md @@ -32,7 +32,6 @@ | `displayedStartDate` | -- | | `Date` | `undefined` | | `doubleClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | | `doubleView` | `double-view` | | `boolean` | `undefined` | -| `enableVerticalDragAndDrop` | `enable-vertical-drag-and-drop` | | `boolean` | `undefined` | | `expanderClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | | `filter` | -- | | `HTMLElement` | `undefined` | | `fontFamily` | `font-family` | | `string` | `'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue'` | @@ -54,6 +53,7 @@ | `label` | `label` | | `string` | `undefined` | | `listCellWidth` | `list-cell-width` | | `string` | `'300px'` | | `locale` | `locale` | | `string` | `'en-GB'` | +| `phaseDrop` | -- | | `(originalPhaseData: KupPlannerTask, originalTaskData: KupPlannerTask, finalPhaseData: KupPlannerTask, destinationData: KupPlannerTask) => boolean \| void \| Promise \| Promise` | `undefined` | | `preStepsCount` | `pre-steps-count` | | `number` | `1` | | `progressChange` | -- | | `(task: KupPlannerTask, children: KupPlannerTask[]) => boolean \| void \| Promise \| Promise` | `undefined` | | `projectBackgroundColor` | `project-background-color` | | `string` | `'#fac465'` | diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/readme.md index 19fadedf21..b15b36c7fb 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/readme.md +++ b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/readme.md @@ -7,40 +7,41 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------------- | ------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `arrowColor` | `arrow-color` | | `string` | `''` | -| `arrowIndent` | `arrow-indent` | | `number` | `0` | -| `barClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | -| `barContextMenu` | -- | | `(event: UIEvent, task: KupPlannerTask) => void` | `undefined` | -| `barDblClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | -| `columnWidth` | `column-width` | | `number` | `0` | -| `currentDateIndicator` | -- | | `KupPlannerCurrentDateIndicator` | `undefined` | -| `dateChange` | -- | | `(task: KupPlannerTask, children: KupPlannerTask[]) => boolean \| void \| Promise \| Promise` | `undefined` | -| `dates` | -- | | `Date[]` | `undefined` | -| `delete` | -- | | `(task: KupPlannerTask) => boolean \| void \| Promise \| Promise` | `undefined` | -| `doubleClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | -| `eMouseDown` | -- | | `(event: MouseEvent) => void` | `undefined` | -| `enableVerticalDragAndDrop` | `enable-vertical-drag-and-drop` | | `boolean` | `false` | -| `eventStart` | -- | | `(action: KupPlannerGanttContentMoveAction, selectedTask: KupPlannerBarTask, event?: KeyboardEvent \| MouseEvent) => any` | `undefined` | -| `fontFamily` | `font-family` | | `string` | `''` | -| `fontSize` | `font-size` | | `string` | `''` | -| `ganttEvent` | -- | | `{ changedTask?: KupPlannerBarTask; originalSelectedTask?: KupPlannerBarTask; action: KupPlannerGanttContentMoveAction; }` | `undefined` | -| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` | -| `hideLabel` | `hide-label` | | `boolean` | `false` | -| `progressChange` | -- | | `(task: KupPlannerTask, children: KupPlannerTask[]) => boolean \| void \| Promise \| Promise` | `undefined` | -| `projection` | -- | | `{ x0: number; xf: number; color: string; }` | `undefined` | -| `readOnly` | `read-only` | | `boolean` | `false` | -| `rowHeight` | `row-height` | | `number` | `0` | -| `rtl` | `rtl` | | `boolean` | `false` | -| `selectedTask` | -- | | `KupPlannerBarTask` | `undefined` | -| `setFailedTask` | -- | | `(value: KupPlannerBarTask) => void` | `undefined` | -| `setGanttEvent` | -- | | `(gantt: KupPlannerGanttEvent) => void` | `undefined` | -| `setSelectedTask` | -- | | `(taskId: string) => void` | `undefined` | -| `showSecondaryDates` | `show-secondary-dates` | | `boolean` | `false` | -| `taskHeight` | `task-height` | | `number` | `0` | -| `tasks` | -- | | `KupPlannerBarTask[]` | `undefined` | -| `timeStep` | `time-step` | | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | +| `arrowColor` | `arrow-color` | | `string` | `''` | +| `arrowIndent` | `arrow-indent` | | `number` | `0` | +| `barClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | +| `barContextMenu` | -- | | `(event: UIEvent, task: KupPlannerTask) => void` | `undefined` | +| `barDblClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | +| `columnWidth` | `column-width` | | `number` | `0` | +| `currentDateIndicator` | -- | | `KupPlannerCurrentDateIndicator` | `undefined` | +| `dateChange` | -- | | `(task: KupPlannerTask, children: KupPlannerTask[]) => boolean \| void \| Promise \| Promise` | `undefined` | +| `dates` | -- | | `Date[]` | `undefined` | +| `delete` | -- | | `(task: KupPlannerTask) => boolean \| void \| Promise \| Promise` | `undefined` | +| `doubleClick` | -- | | `(task: KupPlannerTask) => void` | `undefined` | +| `eMouseDown` | -- | | `(event: MouseEvent) => void` | `undefined` | +| `eventStart` | -- | | `(action: KupPlannerGanttContentMoveAction, selectedTask: KupPlannerBarTask, event?: KeyboardEvent \| MouseEvent) => any` | `undefined` | +| `fontFamily` | `font-family` | | `string` | `''` | +| `fontSize` | `font-size` | | `string` | `''` | +| `ganttEvent` | -- | | `{ changedTask?: KupPlannerBarTask; originalSelectedTask?: KupPlannerBarTask; action: KupPlannerGanttContentMoveAction; }` | `undefined` | +| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` | +| `hideLabel` | `hide-label` | | `boolean` | `false` | +| `phaseDragScroll` | -- | | `(scrollY: number) => void` | `undefined` | +| `phaseDrop` | -- | | `(originalPhaseData: KupPlannerTask, originalTaskData: KupPlannerTask, finalPhaseData: KupPlannerTask, destinationData: KupPlannerTask) => boolean \| void \| Promise \| Promise` | `undefined` | +| `progressChange` | -- | | `(task: KupPlannerTask, children: KupPlannerTask[]) => boolean \| void \| Promise \| Promise` | `undefined` | +| `projection` | -- | | `{ x0: number; xf: number; color: string; }` | `undefined` | +| `readOnly` | `read-only` | | `boolean` | `false` | +| `rowHeight` | `row-height` | | `number` | `0` | +| `rtl` | `rtl` | | `boolean` | `false` | +| `selectedTask` | -- | | `KupPlannerBarTask` | `undefined` | +| `setFailedTask` | -- | | `(value: KupPlannerBarTask) => void` | `undefined` | +| `setGanttEvent` | -- | | `(gantt: KupPlannerGanttEvent) => void` | `undefined` | +| `setSelectedTask` | -- | | `(taskId: string) => void` | `undefined` | +| `showSecondaryDates` | `show-secondary-dates` | | `boolean` | `false` | +| `taskHeight` | `task-height` | | `number` | `0` | +| `tasks` | -- | | `KupPlannerBarTask[]` | `undefined` | +| `timeStep` | `time-step` | | `number` | `0` | ## Dependencies diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md index 684d86d1cc..4e4d6bb08b 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md +++ b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/readme.md @@ -7,18 +7,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------------- | ------------------------ | ----------- | -------------------------- | ----------- | -| `horizontalScroll` | -- | | `(event: UIEvent) => void` | `undefined` | -| `horizontalTaskListScroll` | -- | | `(event: UIEvent) => void` | `undefined` | -| `listCellWidth` | `list-cell-width` | | `string` | `"300px"` | -| `rtl` | `rtl` | | `boolean` | `undefined` | -| `scrollNumber` | `scroll-number` | | `number` | `undefined` | -| `scrollableTaskList` | `scrollable-task-list` | | `boolean` | `false` | -| `svgWidth` | `svg-width` | | `number` | `undefined` | -| `taskGanttRef` | -- | | `HTMLDivElement` | `undefined` | -| `taskListScrollWidth` | `task-list-scroll-width` | | `number` | `undefined` | -| `taskListWidth` | `task-list-width` | | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------------- | ------------------------- | ----------- | -------------------------- | ----------- | +| `horizontalScroll` | -- | | `(event: UIEvent) => void` | `undefined` | +| `horizontalTaskListScroll` | -- | | `(event: UIEvent) => void` | `undefined` | +| `listCellWidth` | `list-cell-width` | | `string` | `'300px'` | +| `rtl` | `rtl` | | `boolean` | `undefined` | +| `scrollNumber` | `scroll-number` | | `number` | `undefined` | +| `scrollableTaskList` | `scrollable-task-list` | | `boolean` | `false` | +| `svgWidth` | `svg-width` | | `number` | `undefined` | +| `taskListScrollNumber` | `task-list-scroll-number` | | `number` | `undefined` | +| `taskListScrollWidth` | `task-list-scroll-width` | | `number` | `undefined` | +| `taskListTrueRef` | -- | | `HTMLKupTaskListElement` | `undefined` | +| `taskListWidth` | `task-list-width` | | `number` | `undefined` | ## Dependencies diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/readme.md b/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/readme.md index 9eb580dadd..0f326e0dd1 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/readme.md +++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-gantt/readme.md @@ -7,15 +7,16 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `barProps` | -- | | `{ tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; enableVerticalDragAndDrop?: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption` | `undefined` | -| `calendarProps` | -- | | `{ dateSetup: KupPlannerDateSetup; locale: string; viewMode: KupPlannerViewMode; rtl: boolean; headerHeight: number; columnWidth: number; fontFamily: string; fontSize: string; dateTimeFormatters?: KupPlannerDateTimeFormatters; singleLineHeader: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; }` | `undefined` | -| `ganttHeight` | `gantt-height` | | `number` | `undefined` | -| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` | -| `scrollX` | `scroll-x` | | `number` | `undefined` | -| `scrollY` | `scroll-y` | | `number` | `undefined` | -| `taskGanttRef` | -- | | `HTMLDivElement` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `barProps` | -- | | `{ tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption` | `undefined` | +| `calendarProps` | -- | | `{ dateSetup: KupPlannerDateSetup; locale: string; viewMode: KupPlannerViewMode; rtl: boolean; headerHeight: number; columnWidth: number; fontFamily: string; fontSize: string; dateTimeFormatters?: KupPlannerDateTimeFormatters; singleLineHeader: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; }` | `undefined` | +| `ganttHeight` | `gantt-height` | | `number` | `undefined` | +| `gridProps` | -- | | `{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }` | `undefined` | +| `phaseDragScroll` | -- | | `(scrollY: number) => void` | `undefined` | +| `scrollX` | `scroll-x` | | `number` | `undefined` | +| `scrollY` | `scroll-y` | | `number` | `undefined` | +| `taskGanttRef` | -- | | `HTMLDivElement` | `undefined` | ## Dependencies