From f829404d17ee8938b98deb6ad8956333e37db0df Mon Sep 17 00:00:00 2001 From: Valerio Como Date: Mon, 12 Feb 2024 14:04:28 +0000 Subject: [PATCH 1/6] chore: setup devcontainer --- .devcontainer/Dockerfile | 5 ++ .devcontainer/devcontainer.json | 80 ++++++++++++++++++++++ .devcontainer/scripts/postCreateCommand.sh | 7 ++ .github/dependabot.yml | 14 ++++ 4 files changed, 106 insertions(+) create mode 100644 .devcontainer/Dockerfile create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/scripts/postCreateCommand.sh create mode 100644 .github/dependabot.yml diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000000..3fef81a215 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,5 @@ +FROM mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye + +# [Optional] Uncomment if you want to install an additional version of node using nvm +ARG EXTRA_NODE_VERSION="lts/hydrogen" +RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..b42e2b899a --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,80 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node +{ + "name": "@sme.up/ketchup-root", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "build": { + "dockerfile": "Dockerfile", + "args": { + "VARIANT": "18-bullseye", + "EXTRA_NODE_VERSION": "18.16" + } + }, + // Features to add to the dev container. More info: https://containers.dev/features. + "features": { + // "ghcr.io/devcontainers/features/node:1": { + // "nodeGypDependencies": true, + // "version": "lts", + // "nvmVersion": "latest" + // }, + "ghcr.io/devcontainers-contrib/features/lerna-npm:1": { + "version": "latest" + }, + "ghcr.io/devcontainers-contrib/features/nx-npm:1": { + "version": "latest" + } + }, + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh", + + // Configure tool-specific properties. + "customizations": { + "vscode": { + "extensions": [ + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "octref.vetur" + ], + "settings": { + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, + "eslint.validate": ["vue", "html", "javascript", "typescript"], + "eslint.run": "onSave", + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[vue]": { + "editor.defaultFormatter": "octref.vetur" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } + } + } + }, + "mounts": [ + "source=ketchup-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", // deps volume + "source=ketchup-vscode-extensions,target=/root/.vscode-server/extensions,type=volume" // vscode extensions volume + ] + + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" +} diff --git a/.devcontainer/scripts/postCreateCommand.sh b/.devcontainer/scripts/postCreateCommand.sh new file mode 100644 index 0000000000..313f26169d --- /dev/null +++ b/.devcontainer/scripts/postCreateCommand.sh @@ -0,0 +1,7 @@ +#!/bin/bash + +echo "Set permissions" +sudo chown -R node:node node_modules + +echo "Installing Deps" +yarn install \ No newline at end of file diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000000..ad6e672a58 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,14 @@ +# To get started with Dependabot version updates, you'll need to specify which +# package ecosystems to update and where the package manifests are located. +# Please see the documentation for more information: +# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates +# https://containers.dev/guide/dependabot + +version: 2 +updates: + - package-ecosystem: 'devcontainers' + directory: '/' + schedule: + interval: weekly + ignore: + - dependency-name: '*' From 8b93182b17925b58b6e21cd41ecda91bf4490893 Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:57:11 +0100 Subject: [PATCH 2/6] kup-planner: example 4 for check align bug --- packages/ketchup/src/assets/planner-example-4.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ketchup/src/assets/planner-example-4.js b/packages/ketchup/src/assets/planner-example-4.js index 2ab1227dd0..3ed4b07726 100644 --- a/packages/ketchup/src/assets/planner-example-4.js +++ b/packages/ketchup/src/assets/planner-example-4.js @@ -22101,11 +22101,11 @@ const phases = { }, isEditable: false, obj: { - k: '20230904', + k: '20210904', p: '*YYMD', t: 'D8', }, - value: '2023-09-04', + value: '2021-09-04', }, STIPER: { data: { @@ -22297,11 +22297,11 @@ const phases = { }, isEditable: false, obj: { - k: '20230522', + k: '20210522', p: '*YYMD', t: 'D8', }, - value: '2023-05-22', + value: '2021-05-22', }, DATFPO: { data: { From 3ecb7e19c2c5e2ba9c556987364183eb4f030854 Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Thu, 22 Feb 2024 16:32:09 +0100 Subject: [PATCH 3/6] kup-planner: created example nr. 5 with hour columns in input --- packages/ketchup/src/assets/index.js | 4 + .../ketchup/src/assets/planner-example-5.js | 2776 +++++++++++++++++ packages/ketchup/src/planner-example-5.html | 46 + packages/ketchup/stencil.config.ts | 1 + 4 files changed, 2827 insertions(+) create mode 100644 packages/ketchup/src/assets/planner-example-5.js create mode 100644 packages/ketchup/src/planner-example-5.html diff --git a/packages/ketchup/src/assets/index.js b/packages/ketchup/src/assets/index.js index c142015c46..eaca8fddbc 100644 --- a/packages/ketchup/src/assets/index.js +++ b/packages/ketchup/src/assets/index.js @@ -186,6 +186,10 @@ components.data = [ value: 'Planner example 4', id: 'planner-example-4.html', }, + { + value: 'Planner example 5', + id: 'planner-example-5.html', + }, { value: 'Progress Bar', id: 'progress-bar.html', diff --git a/packages/ketchup/src/assets/planner-example-5.js b/packages/ketchup/src/assets/planner-example-5.js new file mode 100644 index 0000000000..4242d84b08 --- /dev/null +++ b/packages/ketchup/src/assets/planner-example-5.js @@ -0,0 +1,2776 @@ +const comp = document.getElementById('planner'); + +comp.addEventListener('kup-planner-click', onclick); +comp.addEventListener('kup-planner-didunload', (e) => { + console.log('Planner removed', e); +}); +document.addEventListener('kup-button-click', () => { + console.log('Removing planner'); + comp.remove(); +}); + +const props = { + customStyle: '', + data: { + columns: [ + { + isEditable: false, + isKey: false, + name: 'R§COMM', + obj: { + k: '', + p: '', + t: 'CM', + }, + title: 'Commessa', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATPRE', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data Cons.\nAttualizz.', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATORD', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data Cons.\nP.Ordine', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'R§CDCL', + objs: [ + { + k: '', + p: 'CLP', + t: 'CN', + }, + ], + title: 'Ente', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATINZ', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data inizio\nAttualizz.', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'INZORD', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data inizio\nP.Ordine', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'INITHHMMSS', + obj: { + k: '', + p: '2', + t: 'I1', + }, + title: 'Init hour (HH:mm:ss)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'ENDHHMMSS', + obj: { + k: '', + p: '2', + t: 'I1', + }, + title: 'End hour (HH:mm:ss)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'INITHHMM', + obj: { + k: '', + p: '3', + t: 'I1', + }, + title: 'Init hour (HH:mm)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'ENDHHMM', + obj: { + k: '', + p: '3', + t: 'I1', + }, + title: 'End hour (HH:mm)', + tooltip: true, + }, + ], + rows: [ + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'BENARM', + p: 'CLP', + t: 'CN', + }, + value: 'BENARM', + displayedValue: 'BENARM', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240228', + p: '*YYMD', + t: 'D8', + }, + value: '2024-02-28', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230512', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-12', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240228', + p: '*YYMD', + t: 'D8', + }, + value: '2024-02-28', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230512', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-12', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G418', + p: '', + t: 'CM', + }, + value: 'G418', + displayedValue: 'G418', + }, + + INITHHMMSS: { + isEditable: false, + obj: { + k: '080000', + p: '2', + t: 'I1', + }, + value: '08:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '180000', + p: '2', + t: 'I1', + }, + value: '18:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0800', + p: '3', + t: 'I1', + }, + value: '08:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1800', + p: '3', + t: 'I1', + }, + value: '18:00', + }, + }, + cssClass: 'clickable', + id: '1', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'VITILL', + p: 'CLP', + t: 'CN', + }, + value: 'VITILL', + displayedValue: 'VITILL', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20241125', + p: '*YYMD', + t: 'D8', + }, + value: '2024-11-25', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240315', + p: '*YYMD', + t: 'D8', + }, + value: '2024-03-15', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20241125', + p: '*YYMD', + t: 'D8', + }, + value: '2024-11-25', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240315', + p: '*YYMD', + t: 'D8', + }, + value: '2024-03-15', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G479', + p: '', + t: 'CM', + }, + value: 'G479', + displayedValue: 'G479', + }, + + INITHHMMSS: { + isEditable: false, + obj: { + k: '100000', + p: '2', + t: 'I1', + }, + value: '10:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '140000', + p: '2', + t: 'I1', + }, + value: '14:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1000', + p: '3', + t: 'I1', + }, + value: '10:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1400', + p: '3', + t: 'I1', + }, + value: '14:00', + }, + }, + cssClass: 'clickable', + id: '2', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'ARCO', + p: 'CLP', + t: 'CN', + }, + value: 'ARCO', + displayedValue: 'ARCO', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231031', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-31', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230307', + p: '*YYMD', + t: 'D8', + }, + value: '2023-03-07', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231031', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-31', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230307', + p: '*YYMD', + t: 'D8', + }, + value: '2023-03-07', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G483', + p: '', + t: 'CM', + }, + value: 'G483', + displayedValue: 'G483', + }, + + INITHHMMSS: { + isEditable: false, + obj: { + k: '123000', + p: '2', + t: 'I1', + }, + value: '12:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '170000', + p: '2', + t: 'I1', + }, + value: '17:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1230', + p: '3', + t: 'I1', + }, + value: '12:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1700', + p: '3', + t: 'I1', + }, + value: '17:00', + }, + }, + cssClass: 'clickable', + id: '3', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'BRENAN', + p: 'CLP', + t: 'CN', + }, + value: 'BRENAN', + displayedValue: 'BRENAN', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240731', + p: '*YYMD', + t: 'D8', + }, + value: '2024-07-31', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20221222', + p: '*YYMD', + t: 'D8', + }, + value: '2022-12-22', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240731', + p: '*YYMD', + t: 'D8', + }, + value: '2024-07-31', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20221222', + p: '*YYMD', + t: 'D8', + }, + value: '2022-12-22', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G485', + p: '', + t: 'CM', + }, + value: 'G485', + displayedValue: 'G485', + }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '110000', + p: '2', + t: 'I1', + }, + value: '11:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '134500', + p: '2', + t: 'I1', + }, + value: '13:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1100', + p: '3', + t: 'I1', + }, + value: '11:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1345', + p: '3', + t: 'I1', + }, + value: '13:45', + }, + }, + cssClass: 'clickable', + id: '4', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'VITILL', + p: 'CLP', + t: 'CN', + }, + value: 'VITILL', + displayedValue: 'VITILL', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240801', + p: '*YYMD', + t: 'D8', + }, + value: '2024-08-01', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231013', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-13', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240801', + p: '*YYMD', + t: 'D8', + }, + value: '2024-08-01', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231013', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-13', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G487', + p: '', + t: 'CM', + }, + value: 'G487', + displayedValue: 'G487', + }, + + INITHHMMSS: { + isEditable: false, + obj: { + k: '070000', + p: '2', + t: 'I1', + }, + value: '07:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '170000', + p: '2', + t: 'I1', + }, + value: '17:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0700', + p: '3', + t: 'I1', + }, + value: '07:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1700', + p: '3', + t: 'I1', + }, + value: '17:00', + }, + }, + cssClass: 'clickable', + id: '5', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'AALBER', + p: 'CLP', + t: 'CN', + }, + value: 'AALBER', + displayedValue: 'AALBER', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240415', + p: '*YYMD', + t: 'D8', + }, + value: '2024-04-15', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230519', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-19', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240415', + p: '*YYMD', + t: 'D8', + }, + value: '2024-04-15', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230519', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-19', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G492', + p: '', + t: 'CM', + }, + value: 'G492', + displayedValue: 'G492', + }, + + INITHHMMSS: { + isEditable: false, + obj: { + k: '091000', + p: '2', + t: 'I1', + }, + value: '09:10:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '130000', + p: '2', + t: 'I1', + }, + value: '13:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0910', + p: '3', + t: 'I1', + }, + value: '09:10', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1300', + p: '3', + t: 'I1', + }, + value: '13:00', + }, + }, + cssClass: 'clickable', + id: '6', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'AALBER', + p: 'CLP', + t: 'CN', + }, + value: 'AALBER', + displayedValue: 'AALBER', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240329', + p: '*YYMD', + t: 'D8', + }, + value: '2024-03-29', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230519', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-19', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240329', + p: '*YYMD', + t: 'D8', + }, + value: '2024-03-29', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230519', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-19', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G493', + p: '', + t: 'CM', + }, + value: 'G493', + displayedValue: 'G493', + }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '080000', + p: '2', + t: 'I1', + }, + value: '08:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '180000', + p: '2', + t: 'I1', + }, + value: '18:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0800', + p: '3', + t: 'I1', + }, + value: '08:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1800', + p: '3', + t: 'I1', + }, + value: '18:00', + }, + }, + cssClass: 'clickable', + id: '7', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'COMISA', + p: 'CLP', + t: 'CN', + }, + value: 'COMISA', + displayedValue: 'COMISA', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240112', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-12', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230804', + p: '*YYMD', + t: 'D8', + }, + value: '2023-08-04', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240112', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-12', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230804', + p: '*YYMD', + t: 'D8', + }, + value: '2023-08-04', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G494', + p: '', + t: 'CM', + }, + value: 'G494', + displayedValue: 'G494', + }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '100000', + p: '2', + t: 'I1', + }, + value: '10:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '150000', + p: '2', + t: 'I1', + }, + value: '15:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1000', + p: '3', + t: 'I1', + }, + value: '10:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1500', + p: '3', + t: 'I1', + }, + value: '15:00', + }, + }, + cssClass: 'clickable', + id: '8', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'OMB', + p: 'CLP', + t: 'CN', + }, + value: 'OMB', + displayedValue: 'OMB', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240516', + p: '*YYMD', + t: 'D8', + }, + value: '2024-05-16', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230331', + p: '*YYMD', + t: 'D8', + }, + value: '2023-03-31', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240516', + p: '*YYMD', + t: 'D8', + }, + value: '2024-05-16', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230331', + p: '*YYMD', + t: 'D8', + }, + value: '2023-03-31', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'G495', + p: '', + t: 'CM', + }, + value: 'G495', + displayedValue: 'G495', + }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '143000', + p: '2', + t: 'I1', + }, + value: '14:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1430', + p: '3', + t: 'I1', + }, + value: '14:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, + }, + cssClass: 'clickable', + id: '9', + object: '', + readOnly: true, + }, + { + cells: { + 'R§CDCL': { + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'GTSPA', + p: 'CLP', + t: 'CN', + }, + value: 'GTSPA', + displayedValue: 'GTSPA', + }, + + DATPRE: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231122', + p: '*YYMD', + t: 'D8', + }, + value: '2023-11-22', + }, + + INZORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20991231', + p: '*YYMD', + t: 'D8', + }, + value: '2099-12-31', + }, + + DATORD: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20991231', + p: '*YYMD', + t: 'D8', + }, + value: '2099-12-31', + }, + + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20991231', + p: '*YYMD', + t: 'D8', + }, + value: '2099-12-31', + }, + + 'R§COMM': { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: 'ZZZZ', + p: '', + t: 'CM', + }, + value: 'ZZZZ', + displayedValue: 'ZZZZ', + }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '113000', + p: '2', + t: 'I1', + }, + value: '11:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1130', + p: '3', + t: 'I1', + }, + value: '11:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, + }, + cssClass: 'clickable', + id: '24', + object: '', + readOnly: true, + }, + ], + }, + detailData: {}, + detailColorCol: 'COLASS', + detailColumns: ['DECDIP', '§SKIL1'], + detailDates: ['INZRIS', 'FINRIS'], + detailHeight: 200, + detailIdCol: '§§DIPE', + detailNameCol: 'DECDIP', + detailPrevDates: [], + listCellWidth: '300px', + maxWidth: '90vw', + phaseColorCol: 'COLFAS', + phaseColumns: ['DESFAS', 'DATINI', 'DATFIN'], + phaseColParDep: '', + phaseDates: ['DATINI', 'DATFIN'], + phaseIdCol: 'CODFAS', + phaseNameCol: 'DESFAS', + phasePrevDates: ['DATINZ', 'DATFPO'], + readOnly: false, + showSecondaryDates: true, + taskColumns: ['R§COMM', 'R§CDCL', 'DATINZ', 'DATPRE'], + taskDates: ['DATINZ', 'DATPRE'], + taskHeight: 400, + taskIdCol: 'R§COMM', + taskNameCol: 'R§COMM', + taskPrevDates: ['INZORD', 'DATORD'], + titleMess: '', +}; + +if (props) { + for (const key in props) { + comp[key] = props[key]; + } +} + +function onclick(event) { + console.log('planner.js onclick', event.detail.taskAction); + if (event.detail.taskAction == 'onTaskOpening') { + comp.addPhases('G418', phases); + } +} + +const phases = { + columns: [ + { + isEditable: false, + isKey: false, + name: 'CODFAS', + obj: { + k: '', + p: '', + t: 'OP', + }, + title: 'Fase', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DESFAS', + title: 'Des\nFase', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATINI', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data\nInizio', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATINZ', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data\nInizio P.O', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATFIN', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data\nFine', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'DATFPO', + obj: { + k: '', + p: '*YYMD', + t: 'D8', + }, + title: 'Data\nFine\nPrev.Ordine', + tooltip: false, + }, + { + isEditable: false, + isKey: false, + name: 'COLFAS', + title: 'Sty\nColore', + tooltip: false, + visible: false, + }, + ], + rows: [ + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20210904', + p: '*YYMD', + t: 'D8', + }, + value: '2021-09-04', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20210522', + p: '*YYMD', + t: 'D8', + }, + value: '2021-05-22', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230904', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-04', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P410 ', + p: '', + t: 'OP', + }, + value: 'P410 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'MONTAGGIO MECCANICO', + p: '', + t: '', + }, + value: 'MONTAGGIO MECCANICO', + displayedValue: 'MONTAGGIO MECCANICO', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230522', + p: '*YYMD', + t: 'D8', + }, + value: '2023-05-22', + }, + }, + id: '1', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231013', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-13', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230830', + p: '*YYMD', + t: 'D8', + }, + value: '2023-08-30', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231013', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-13', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P420 ', + p: '', + t: 'OP', + }, + value: 'P420 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'MONTAGGIO ELETTRICO', + p: '', + t: '', + }, + value: 'MONTAGGIO ELETTRICO', + displayedValue: 'MONTAGGIO ELETTRICO', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230830', + p: '*YYMD', + t: 'D8', + }, + value: '2023-08-30', + }, + }, + id: '2', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230925', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-25', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230905', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-05', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230925', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-25', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P605 ', + p: '', + t: 'OP', + }, + value: 'P605 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'MESSA IN SERV.SW 1', + p: '', + t: '', + }, + value: 'MESSA IN SERV.SW 1', + displayedValue: 'MESSA IN SERV.SW 1', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230905', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-05', + }, + }, + id: '3', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231009', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-09', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230926', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-26', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231009', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-09', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P610 ', + p: '', + t: 'OP', + }, + value: 'P610 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'MESSA IN SERVIZIO MECC.', + p: '', + t: '', + }, + value: 'MESSA IN SERVIZIO MECC.', + displayedValue: 'MESSA IN SERVIZIO MECC.', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230926', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-26', + }, + }, + id: '4', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231109', + p: '*YYMD', + t: 'D8', + }, + value: '2023-11-09', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230926', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-26', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231109', + p: '*YYMD', + t: 'D8', + }, + value: '2023-11-09', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P630 ', + p: '', + t: 'OP', + }, + value: 'P630 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'MESSA IN SERV.SW 2', + p: '', + t: '', + }, + value: 'MESSA IN SERV.SW 2', + displayedValue: 'MESSA IN SERV.SW 2', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20230926', + p: '*YYMD', + t: 'D8', + }, + value: '2023-09-26', + }, + }, + id: '5', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#000000', + p: '', + t: '', + }, + value: '#000000', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231212', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-12', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231010', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-10', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231212', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-12', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P710 ', + p: '', + t: 'OP', + }, + value: 'P710 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'PROVA DI LAVORAZIONE', + p: '', + t: '', + }, + value: 'PROVA DI LAVORAZIONE', + displayedValue: 'PROVA DI LAVORAZIONE', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231010', + p: '*YYMD', + t: 'D8', + }, + value: '2023-10-10', + }, + }, + id: '6', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#BDD7EE', + p: '', + t: '', + }, + value: '#BDD7EE', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231219', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-19', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231213', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-13', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231219', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-19', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P720 ', + p: '', + t: 'OP', + }, + value: 'P720 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'COLLAUDO CLIENTE', + p: '', + t: '', + }, + value: 'COLLAUDO CLIENTE', + displayedValue: 'COLLAUDO CLIENTE', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20231213', + p: '*YYMD', + t: 'D8', + }, + value: '2023-12-13', + }, + }, + id: '7', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#F8CBAD', + p: '', + t: '', + }, + value: '#F8CBAD', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240111', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-11', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240104', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-04', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240111', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-11', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P730 ', + p: '', + t: 'OP', + }, + value: 'P730 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'SPEDIZIONE', + p: '', + t: '', + }, + value: 'SPEDIZIONE', + displayedValue: 'SPEDIZIONE', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240104', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-04', + }, + }, + id: '8', + object: '', + readOnly: true, + }, + { + cells: { + COLFAS: { + data: { + size: 10, + helperEnabled: false, + hiddenCounter: true, + maxLength: 10, + }, + isEditable: false, + obj: { + k: '#7030A0', + p: '', + t: '', + }, + value: '#7030A0', + }, + + DATFIN: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240228', + p: '*YYMD', + t: 'D8', + }, + value: '2024-02-28', + }, + + DATINI: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240131', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-31', + }, + DATFPO: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240228', + p: '*YYMD', + t: 'D8', + }, + value: '2024-02-28', + }, + + CODFAS: { + cssClass: 'strong-text', + data: { + size: 15, + helperEnabled: false, + hiddenCounter: true, + maxLength: 15, + }, + isEditable: false, + obj: { + k: 'P750 ', + p: '', + t: 'OP', + }, + value: 'P750 ', + }, + + DESFAS: { + data: { + size: 35, + helperEnabled: false, + hiddenCounter: true, + maxLength: 35, + }, + isEditable: false, + obj: { + k: 'INSTALLAZIONE', + p: '', + t: '', + }, + value: 'INSTALLAZIONE', + displayedValue: 'INSTALLAZIONE', + }, + DATINZ: { + data: { + size: 8, + helperEnabled: false, + hiddenCounter: true, + maxLength: 8, + }, + isEditable: false, + obj: { + k: '20240131', + p: '*YYMD', + t: 'D8', + }, + value: '2024-01-31', + }, + }, + id: '9', + object: '', + readOnly: true, + }, + ], +}; + +function dummyFilter() { + const filter = document.createElement('div'); + filter.innerText = 'Filter placeholder'; + return filter; +} diff --git a/packages/ketchup/src/planner-example-5.html b/packages/ketchup/src/planner-example-5.html new file mode 100644 index 0000000000..50142dc486 --- /dev/null +++ b/packages/ketchup/src/planner-example-5.html @@ -0,0 +1,46 @@ + + + + + + + + Ketchup planner (example 5) + + + + + + + + + + + + + diff --git a/packages/ketchup/stencil.config.ts b/packages/ketchup/stencil.config.ts index 3e0959e3cc..081ad07d97 100644 --- a/packages/ketchup/stencil.config.ts +++ b/packages/ketchup/stencil.config.ts @@ -90,6 +90,7 @@ export const config: Config = { { src: 'planner-example-2.html' }, { src: 'planner-example-3.html' }, { src: 'planner-example-4.html' }, + { src: 'planner-example-5.html' }, { src: 'probe.html' }, { src: 'progress-bar.html' }, { src: 'radio.html' }, From 3179ba7be273c680fdea3b962de619e3daa45002 Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Thu, 22 Feb 2024 17:18:45 +0100 Subject: [PATCH 4/6] kup-planner: updated example nr. 5 with hour columns in input, in phases too --- .../ketchup/src/assets/planner-example-5.js | 399 ++++++++++++++++++ 1 file changed, 399 insertions(+) diff --git a/packages/ketchup/src/assets/planner-example-5.js b/packages/ketchup/src/assets/planner-example-5.js index 4242d84b08..7e17d8c6a5 100644 --- a/packages/ketchup/src/assets/planner-example-5.js +++ b/packages/ketchup/src/assets/planner-example-5.js @@ -1702,6 +1702,54 @@ const phases = { tooltip: false, visible: false, }, + { + isEditable: false, + isKey: false, + name: 'INITHHMMSS', + obj: { + k: '', + p: '2', + t: 'I1', + }, + title: 'Init hour (HH:mm:ss)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'ENDHHMMSS', + obj: { + k: '', + p: '2', + t: 'I1', + }, + title: 'End hour (HH:mm:ss)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'INITHHMM', + obj: { + k: '', + p: '3', + t: 'I1', + }, + title: 'Init hour (HH:mm)', + tooltip: true, + }, + { + isEditable: false, + isKey: false, + name: 'ENDHHMM', + obj: { + k: '', + p: '3', + t: 'I1', + }, + title: 'End hour (HH:mm)', + tooltip: true, + }, ], rows: [ { @@ -1817,6 +1865,45 @@ const phases = { }, value: '2023-05-22', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '113000', + p: '2', + t: 'I1', + }, + value: '11:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1130', + p: '3', + t: 'I1', + }, + value: '11:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, }, id: '1', object: '', @@ -1935,6 +2022,45 @@ const phases = { }, value: '2023-08-30', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '110000', + p: '2', + t: 'I1', + }, + value: '11:00:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '160000', + p: '2', + t: 'I1', + }, + value: '16:00:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1100', + p: '3', + t: 'I1', + }, + value: '11:00', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1600', + p: '3', + t: 'I1', + }, + value: '16:00', + }, }, id: '2', object: '', @@ -2053,6 +2179,45 @@ const phases = { }, value: '2023-09-05', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '083000', + p: '2', + t: 'I1', + }, + value: '08:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '104500', + p: '2', + t: 'I1', + }, + value: '10:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0830', + p: '3', + t: 'I1', + }, + value: '08:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1045', + p: '3', + t: 'I1', + }, + value: '10:45', + }, }, id: '3', object: '', @@ -2171,6 +2336,45 @@ const phases = { }, value: '2023-09-26', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '113000', + p: '2', + t: 'I1', + }, + value: '11:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1130', + p: '3', + t: 'I1', + }, + value: '11:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, }, id: '4', object: '', @@ -2289,6 +2493,45 @@ const phases = { }, value: '2023-09-26', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '083000', + p: '2', + t: 'I1', + }, + value: '08:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '104500', + p: '2', + t: 'I1', + }, + value: '10:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0830', + p: '3', + t: 'I1', + }, + value: '08:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1045', + p: '3', + t: 'I1', + }, + value: '10:45', + }, }, id: '5', object: '', @@ -2407,6 +2650,45 @@ const phases = { }, value: '2023-10-10', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '113000', + p: '2', + t: 'I1', + }, + value: '11:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1130', + p: '3', + t: 'I1', + }, + value: '11:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, }, id: '6', object: '', @@ -2525,6 +2807,45 @@ const phases = { }, value: '2023-12-13', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '163000', + p: '2', + t: 'I1', + }, + value: '16:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '184500', + p: '2', + t: 'I1', + }, + value: '18:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1630', + p: '3', + t: 'I1', + }, + value: '16:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1845', + p: '3', + t: 'I1', + }, + value: '18:45', + }, }, id: '7', object: '', @@ -2643,6 +2964,45 @@ const phases = { }, value: '2024-01-04', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '113000', + p: '2', + t: 'I1', + }, + value: '11:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '164500', + p: '2', + t: 'I1', + }, + value: '16:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '1130', + p: '3', + t: 'I1', + }, + value: '11:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '1645', + p: '3', + t: 'I1', + }, + value: '16:45', + }, }, id: '8', object: '', @@ -2761,6 +3121,45 @@ const phases = { }, value: '2024-01-31', }, + INITHHMMSS: { + isEditable: false, + obj: { + k: '073000', + p: '2', + t: 'I1', + }, + value: '07:30:00', + }, + + ENDHHMMSS: { + isEditable: false, + obj: { + k: '094500', + p: '2', + t: 'I1', + }, + value: '09:45:00', + }, + + INITHHMM: { + isEditable: false, + obj: { + k: '0730', + p: '3', + t: 'I1', + }, + value: '07:30', + }, + + ENDHHMM: { + isEditable: false, + obj: { + k: '0945', + p: '3', + t: 'I1', + }, + value: '09:45', + }, }, id: '9', object: '', From 94a8fa2da51f3bab568474cbe8d5c6f5c75fc39f Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Fri, 1 Mar 2024 15:19:46 +0100 Subject: [PATCH 5/6] kup-box: managed "Load more data" function with pagination --- .../advanced/box/examples/BoxDemo.vue | 36 ++++++ packages/ketchup/src/components.d.ts | 54 +++++++- .../kup-box/kup-box-declarations.ts | 15 +++ .../src/components/kup-box/kup-box-state.ts | 2 + .../src/components/kup-box/kup-box.tsx | 117 +++++++++++++++++- .../ketchup/src/components/kup-box/readme.md | 63 +++++----- 6 files changed, 248 insertions(+), 39 deletions(-) diff --git a/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue b/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue index bfe0b36b62..89712803f7 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue @@ -108,6 +108,10 @@ export default { name: 'kup-box-dragstarted', type: 'CustomEvent', }, + { + name: 'kup-box-loadmoreclick', + type: 'click', + }, { name: 'kup-box-selected', type: 'CustomEvent', @@ -266,6 +270,30 @@ export default { default: 'false', try: 'switch', }, + { + prop: 'loadMoreLimit', + description: + 'Sets a maximum limit of new records which can be required by the load more functionality.', + type: 'number', + default: '1000', + try: 'field', + }, + { + prop: 'loadMoreMode', + description: + 'Establish the modality of how many new records will be downloaded.', + type: 'LoadMoreMode', + default: 'progressive_threshold', + try: 'field', + }, + { + prop: 'loadMoreStep', + description: + 'The number of records which will be requested to be downloaded when clicking on the load more button.', + type: 'number', + default: '60', + try: 'field', + }, { prop: 'multiSelection', description: 'Enable multi selection.', @@ -317,6 +345,14 @@ export default { default: '[]', try: 'json', }, + { + prop: 'showLoadMore', + description: + 'If set to true, displays the button to load more records.', + type: 'boolean', + default: 'false', + try: 'switch', + }, { prop: 'showSelection', description: 'If enabled, highlights the selected box/boxes.', diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 39deb1b65e..ce751e52e5 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -9,7 +9,7 @@ import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon import { GenericObject, KupEventPayload } from "./types/GenericTypes"; import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations"; import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; -import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations"; +import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; import { KupStore } from "./components/kup-state/kup-store"; import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; import { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; @@ -27,7 +27,7 @@ import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; import { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations"; -import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; +import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; import { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations"; import { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations"; import { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations"; @@ -58,7 +58,7 @@ export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon export { GenericObject, KupEventPayload } from "./types/GenericTypes"; export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations"; export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; -export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations"; +export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; export { KupStore } from "./components/kup-state/kup-store"; export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; export { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; @@ -76,7 +76,7 @@ export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations"; export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations"; export { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations"; -export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; +export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations"; export { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations"; export { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations"; export { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations"; @@ -347,6 +347,22 @@ export namespace Components { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ "lazyLoadRows": boolean; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + "loadMoreLimit": number; + /** + * Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. + * @see loadMoreStep * + * @see loadMoreLimit + */ + "loadMoreMode": LoadMoreMode; + /** + * The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. + * @see loadMoreMode * + * @see loadMoreLimit + */ + "loadMoreStep": number; "loadRowActions": (row: KupBoxRow, actions: KupDataRowAction[]) => Promise; /** * Enable multi selection @@ -392,6 +408,10 @@ export namespace Components { * @param props - Object containing props that will be set to the component. */ "setProps": (props: GenericObject) => Promise; + /** + * If set to true, displays the button to load more records. + */ + "showLoadMore": boolean; /** * If enabled, highlights the selected box/boxes * @default true @@ -1357,7 +1377,7 @@ export namespace Components { * @see loadMoreStep * * @see loadMoreLimit */ - "loadMoreMode": LoadMoreMode; + "loadMoreMode": LoadMoreMode1; /** * The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. * @see loadMoreMode * @@ -4091,6 +4111,7 @@ declare global { "kup-box-didload": KupEventPayload; "kup-box-didunload": KupEventPayload; "kup-box-contextmenu": KupBoxContextMenuEventPayload; + "kup-box-loadmoreclick": KupBoxLoadMoreClickEventPayload; } interface HTMLKupBoxElement extends Components.KupBox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLKupBoxElement, ev: KupBoxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -5236,6 +5257,22 @@ declare namespace LocalJSX { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ "lazyLoadRows"?: boolean; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + "loadMoreLimit"?: number; + /** + * Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. + * @see loadMoreStep * + * @see loadMoreLimit + */ + "loadMoreMode"?: LoadMoreMode; + /** + * The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. + * @see loadMoreMode * + * @see loadMoreLimit + */ + "loadMoreStep"?: number; /** * Enable multi selection * @default false @@ -5258,6 +5295,7 @@ declare namespace LocalJSX { * Triggered when stop propagation event */ "onKup-box-didunload"?: (event: KupBoxCustomEvent) => void; + "onKup-box-loadmoreclick"?: (event: KupBoxCustomEvent) => void; /** * When the row menu action icon is click */ @@ -5300,6 +5338,10 @@ declare namespace LocalJSX { * @default undefined */ "selectedRowsState"?: string; + /** + * If set to true, displays the button to load more records. + */ + "showLoadMore"?: boolean; /** * If enabled, highlights the selected box/boxes * @default true @@ -6074,7 +6116,7 @@ declare namespace LocalJSX { * @see loadMoreStep * * @see loadMoreLimit */ - "loadMoreMode"?: LoadMoreMode; + "loadMoreMode"?: LoadMoreMode1; /** * The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. * @see loadMoreMode * diff --git a/packages/ketchup/src/components/kup-box/kup-box-declarations.ts b/packages/ketchup/src/components/kup-box/kup-box-declarations.ts index 6b3ed0bbdb..915b75555b 100644 --- a/packages/ketchup/src/components/kup-box/kup-box-declarations.ts +++ b/packages/ketchup/src/components/kup-box/kup-box-declarations.ts @@ -26,6 +26,9 @@ export enum KupBoxProps { kanban = 'Displays the boxlist as a Kanban.', layout = 'How the field will be displayed. If not present, a default one will be created.', lazyLoadRows = 'When set to true, extra rows will be automatically loaded once the last row enters the viewport.', + loadMoreLimit = 'Sets a maximum limit of new records which can be required by the load more functionality.', + loadMoreMode = 'Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.', + loadMoreStep = 'The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.', multiSelection = 'Enable multi selection.', pageSelected = 'Current page number.', pagination = 'Enables pagination.', @@ -33,6 +36,7 @@ export enum KupBoxProps { scrollOnHover = 'Activates the scroll on hover function.', selectBox = 'Automatically selects the box at the specified index.', selectedRowsState = 'Multiple selection.', + showLoadMore = 'If set to true, displays the button to load more records.', showSelection = 'If enabled, highlights the selected box/boxes.', sortBy = 'If sorting is enabled, specifies which column to sort.', sortEnabled = 'Enable sorting.', @@ -40,6 +44,13 @@ export enum KupBoxProps { store = '', swipeDisabled = 'Disable swipe.', } + +//---- *NEXT functionality AKA load more ---- +export enum LoadMoreMode { + CONSTANT = 'constant', + CONSTANT_INCREMENT = 'constant_increment', + PROGRESSIVE_THRESHOLD = 'progressive_threshold', +} export interface KupBoxData { columns?: KupDataColumn[]; rows?: KupBoxRow[]; @@ -120,3 +131,7 @@ export interface KupBoxRowActionClickEventPayload extends KupEventPayload { export interface KupBoxContextMenuEventPayload extends KupEventPayload { details: KupBoxEventHandlerDetails; } + +export interface KupBoxLoadMoreClickEventPayload extends KupEventPayload { + loadItems: number; +} diff --git a/packages/ketchup/src/components/kup-box/kup-box-state.ts b/packages/ketchup/src/components/kup-box/kup-box-state.ts index 7361526d37..ccc50e8952 100644 --- a/packages/ketchup/src/components/kup-box/kup-box-state.ts +++ b/packages/ketchup/src/components/kup-box/kup-box-state.ts @@ -6,6 +6,8 @@ export class KupBoxState implements KupState { pageSelected: number = 1; rowsPerPage: number = 0; load: boolean = false; + loadMoreLimit: number = 1000; + showLoadMore: boolean = false; /*Add attribute*/ diff --git a/packages/ketchup/src/components/kup-box/kup-box.tsx b/packages/ketchup/src/components/kup-box/kup-box.tsx index 4d04f771b0..789fdb3757 100644 --- a/packages/ketchup/src/components/kup-box/kup-box.tsx +++ b/packages/ketchup/src/components/kup-box/kup-box.tsx @@ -32,6 +32,8 @@ import { KupBoxContextMenuEventPayload, KupBoxData, KupBoxEventHandlerDetails, + LoadMoreMode, + KupBoxLoadMoreClickEventPayload, } from './kup-box-declarations'; import { getColumnByName } from '../../utils/cell-utils'; import { @@ -139,6 +141,8 @@ export class KupBox { this.selectedRowsState = this.state.selectedRowsState; this.pageSelected = this.state.pageSelected; this.rowsPerPage = this.state.rowsPerPage; + this.loadMoreLimit = state.loadMoreLimit; + this.showLoadMore = state.showLoadMore; } } } @@ -203,6 +207,25 @@ export class KupBox { this.state.selectedRowsState = selectedRowsState; somethingChanged = true; } + if ( + !this.kupManager.objects.deepEqual( + this.state.loadMoreLimit, + this.loadMoreLimit + ) + ) { + this.state.loadMoreLimit = this.loadMoreLimit; + somethingChanged = true; + } + + if ( + !this.kupManager.objects.deepEqual( + this.state.showLoadMore, + this.showLoadMore + ) + ) { + this.state.showLoadMore = this.showLoadMore; + somethingChanged = true; + } if (!this.state.load) { this.state.load = true; @@ -297,6 +320,26 @@ export class KupBox { * When set to true, extra rows will be automatically loaded once the last row enters the viewport. */ @Prop() lazyLoadRows: boolean = false; + /** + * Sets a maximum limit of new records which can be required by the load more functionality. + */ + @Prop() loadMoreLimit: number = 1000; + /** + * Establish the modality of how many new records will be downloaded. + * + * This property is regulated also by loadMoreStep. + * @see loadMoreStep + * @see loadMoreLimit + */ + @Prop() loadMoreMode: LoadMoreMode = LoadMoreMode.PROGRESSIVE_THRESHOLD; + /** + * The number of records which will be requested to be downloaded when clicking on the load more button. + * + * This property is regulated also by loadMoreMode. + * @see loadMoreMode + * @see loadMoreLimit + */ + @Prop() loadMoreStep: number = 60; /** * Enable multi selection * @default false @@ -332,6 +375,10 @@ export class KupBox { * @default undefined */ @Prop({ mutable: true }) selectedRowsState: string; + /** + * If set to true, displays the button to load more records. + */ + @Prop() showLoadMore: boolean = false; /** * If enabled, highlights the selected box/boxes * @default true @@ -379,6 +426,9 @@ export class KupBox { #rowsRefs: HTMLElement[] = []; #navBarHeight: number = 0; + #loadMoreEventCounter: number = 0; + #loadMoreEventPreviousQuantity: number = 0; + /*-------------------------------------------------*/ /* E v e n t s */ /*-------------------------------------------------*/ @@ -467,6 +517,14 @@ export class KupBox { }) kupBoxContextMenu: EventEmitter; + @Event({ + eventName: 'kup-box-loadmoreclick', + composed: true, + cancelable: false, + bubbles: true, + }) + kupLoadMoreClick: EventEmitter; + /*-------------------------------------------------*/ /* W a t c h e r s */ /*-------------------------------------------------*/ @@ -517,6 +575,7 @@ export class KupBox { async getProps(descriptions?: boolean): Promise { return getProps(this, KupBoxProps, descriptions); } + @Method() async loadRowActions(row: KupBoxRow, actions: KupDataRowAction[]) { row.actions = actions; @@ -1769,10 +1828,10 @@ export class KupBox { ); const delta = this.data.rows.length - this.currentRowsPerPage; - if (delta < 10) { + if (delta < this.loadMoreStep) { this.currentRowsPerPage += delta; } else { - this.currentRowsPerPage += 10; + this.currentRowsPerPage += this.loadMoreStep; } entry.target.classList.remove('last-row'); this.#intObserver.unobserve(entry.target); @@ -1786,6 +1845,41 @@ export class KupBox { this.#intObserver = new IntersectionObserver(callback, options); } + // Handler for loadMore button is clicked. + #onLoadMoreClick() { + let loadItems: number = 0; + + switch (this.loadMoreMode) { + case LoadMoreMode.CONSTANT: + loadItems = this.loadMoreStep; + break; + case LoadMoreMode.CONSTANT_INCREMENT: + loadItems = + this.loadMoreStep * (this.#loadMoreEventCounter + 1); + break; + case LoadMoreMode.PROGRESSIVE_THRESHOLD: + loadItems = + Math.max( + this.#loadMoreEventPreviousQuantity, + this.loadMoreStep + ) * Math.min(this.#loadMoreEventCounter + 1, 2); + break; + } + + if (loadItems > this.loadMoreLimit) { + loadItems = this.loadMoreLimit; + } + + this.kupLoadMoreClick.emit({ + comp: this, + id: this.rootElement.id, + loadItems: loadItems, + }); + + this.#loadMoreEventPreviousQuantity = loadItems; + this.#loadMoreEventCounter++; + } + /*-------------------------------------------------*/ /* L i f e c y c l e H o o k s */ /*-------------------------------------------------*/ @@ -1924,18 +2018,33 @@ export class KupBox { } let paginator = null; - if (!this.lazyLoadRows && this.pagination) { + // paginaltorPos prop not managed yet + const top: boolean = true; + if (this.showLoadMore || (!this.lazyLoadRows && this.pagination)) { paginator = ( { + this.#onLoadMoreClick(); + } + : null + } + onNextPage={() => + this.handlePageChange(this.currentPage + 1) + } + onPrevPage={() => + this.handlePageChange(this.currentPage - 1) + } onPageChange={(e: CustomEvent) => this.handlePageChange(e.detail.value) } diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md index 41a595f7ab..f4ea58768b 100644 --- a/packages/ketchup/src/components/kup-box/readme.md +++ b/packages/ketchup/src/components/kup-box/readme.md @@ -5,35 +5,39 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | --------------------- | -------------------------------------------------------------------------------------------------- | --------------- | ----------- | -| `cardData` | -- | Data of the card linked to the box when the latter's layout must be a premade template. | `GenericObject` | `null` | -| `columns` | `columns` | Number of columns | `number` | `1` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Actual data of the box. | `KupBoxData` | `null` | -| `dragEnabled` | `drag-enabled` | Enable dragging | `boolean` | `false` | -| `dropEnabled` | `drop-enabled` | Enable dropping | `boolean` | `false` | -| `dropOnSection` | `drop-on-section` | Drop can be done in section | `boolean` | `false` | -| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | -| `enableRowActions` | `enable-row-actions` | If enabled, a button to load / display the row actions will be displayed on the right of every box | `boolean` | `false` | -| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | -| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | -| `kanban` | -- | Displays the boxlist as a Kanban. | `KupBoxKanban` | `null` | -| `layout` | -- | How the field will be displayed. If not present, a default one will be created. | `KupBoxLayout` | `undefined` | -| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. | `boolean` | `false` | -| `multiSelection` | `multi-selection` | Enable multi selection | `boolean` | `false` | -| `pageSelected` | `page-selected` | Current page number | `number` | `1` | -| `pagination` | `pagination` | Enables pagination | `boolean` | `false` | -| `rowsPerPage` | `rows-per-page` | Number of current rows per page | `number` | `undefined` | -| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | -| `selectBox` | `select-box` | Automatically selects the box at the specified index | `number` | `undefined` | -| `selectedRowsState` | `selected-rows-state` | Multiple selection | `string` | `undefined` | -| `showSelection` | `show-selection` | If enabled, highlights the selected box/boxes | `boolean` | `true` | -| `sortBy` | `sort-by` | If sorting is enabled, specifies which column to sort | `string` | `undefined` | -| `sortEnabled` | `sort-enabled` | Enable sorting | `boolean` | `false` | -| `stateId` | `state-id` | | `string` | `''` | -| `store` | -- | | `KupStore` | `undefined` | -| `swipeDisabled` | `swipe-disabled` | Disable swipe | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------ | +| `cardData` | -- | Data of the card linked to the box when the latter's layout must be a premade template. | `GenericObject` | `null` | +| `columns` | `columns` | Number of columns | `number` | `1` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Actual data of the box. | `KupBoxData` | `null` | +| `dragEnabled` | `drag-enabled` | Enable dragging | `boolean` | `false` | +| `dropEnabled` | `drop-enabled` | Enable dropping | `boolean` | `false` | +| `dropOnSection` | `drop-on-section` | Drop can be done in section | `boolean` | `false` | +| `editableData` | `editable-data` | When set to true, editable cells will be rendered using input components. | `boolean` | `false` | +| `enableRowActions` | `enable-row-actions` | If enabled, a button to load / display the row actions will be displayed on the right of every box | `boolean` | `false` | +| `globalFilter` | `global-filter` | When set to true it activates the global filter. | `boolean` | `false` | +| `globalFilterValue` | `global-filter-value` | The value of the global filter. | `string` | `''` | +| `kanban` | -- | Displays the boxlist as a Kanban. | `KupBoxKanban` | `null` | +| `layout` | -- | How the field will be displayed. If not present, a default one will be created. | `KupBoxLayout` | `undefined` | +| `lazyLoadRows` | `lazy-load-rows` | When set to true, extra rows will be automatically loaded once the last row enters the viewport. | `boolean` | `false` | +| `loadMoreLimit` | `load-more-limit` | Sets a maximum limit of new records which can be required by the load more functionality. | `number` | `1000` | +| `loadMoreMode` | `load-more-mode` | Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep. | `LoadMoreMode.CONSTANT \| LoadMoreMode.CONSTANT_INCREMENT \| LoadMoreMode.PROGRESSIVE_THRESHOLD` | `LoadMoreMode.PROGRESSIVE_THRESHOLD` | +| `loadMoreStep` | `load-more-step` | The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode. | `number` | `60` | +| `multiSelection` | `multi-selection` | Enable multi selection | `boolean` | `false` | +| `pageSelected` | `page-selected` | Current page number | `number` | `1` | +| `pagination` | `pagination` | Enables pagination | `boolean` | `false` | +| `rowsPerPage` | `rows-per-page` | Number of current rows per page | `number` | `undefined` | +| `scrollOnHover` | `scroll-on-hover` | Activates the scroll on hover function. | `boolean` | `false` | +| `selectBox` | `select-box` | Automatically selects the box at the specified index | `number` | `undefined` | +| `selectedRowsState` | `selected-rows-state` | Multiple selection | `string` | `undefined` | +| `showLoadMore` | `show-load-more` | If set to true, displays the button to load more records. | `boolean` | `false` | +| `showSelection` | `show-selection` | If enabled, highlights the selected box/boxes | `boolean` | `true` | +| `sortBy` | `sort-by` | If sorting is enabled, specifies which column to sort | `string` | `undefined` | +| `sortEnabled` | `sort-enabled` | Enable sorting | `boolean` | `false` | +| `stateId` | `state-id` | | `string` | `''` | +| `store` | -- | | `KupStore` | `undefined` | +| `swipeDisabled` | `swipe-disabled` | Disable swipe | `boolean` | `false` | ## Events @@ -45,6 +49,7 @@ | `kup-box-contextmenu` | Generic right click event on box. | `CustomEvent` | | `kup-box-didload` | | `CustomEvent` | | `kup-box-didunload` | Triggered when stop propagation event | `CustomEvent` | +| `kup-box-loadmoreclick` | | `CustomEvent` | | `kup-box-rowactionclick` | When the row menu action icon is click | `CustomEvent` | | `kup-box-rowactionmenuclick` | When the row menu action icon is click | `CustomEvent` | | `kup-box-selected` | Triggered when the multi selection checkbox changes value | `CustomEvent` | From 8935983a2a2dcd5f9f34f6a71a2bb14b0e2b6c2a Mon Sep 17 00:00:00 2001 From: Carina Gentiana Pasere <48244789+pasere-smeup@users.noreply.github.com> Date: Mon, 4 Mar 2024 12:43:45 +0100 Subject: [PATCH 6/6] kup-calendar: event drop: added data row info --- .../src/components/kup-calendar/kup-calendar-declarations.ts | 1 + packages/ketchup/src/components/kup-calendar/kup-calendar.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar-declarations.ts b/packages/ketchup/src/components/kup-calendar/kup-calendar-declarations.ts index 97d7dbec05..ca850cafc6 100644 --- a/packages/ketchup/src/components/kup-calendar/kup-calendar-declarations.ts +++ b/packages/ketchup/src/components/kup-calendar/kup-calendar-declarations.ts @@ -68,6 +68,7 @@ export interface KupCalendarEventDropEventPayload extends KupEventPayload { start: Date; end: Date; }; + row: KupDataRow; } export interface KupCalendarViewChangeEventPayload extends KupEventPayload { from: Date; diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.tsx b/packages/ketchup/src/components/kup-calendar/kup-calendar.tsx index 72e655aa8b..87de64569a 100644 --- a/packages/ketchup/src/components/kup-calendar/kup-calendar.tsx +++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.tsx @@ -293,6 +293,7 @@ export class KupCalendar { start: event.start, end: event.end, }, + row: oldEvent.extendedProps?.row, }); }, events: this.getEvents(),