Introducing Kanban Preview

lowcoder-org · FalkWolsky · Sep 21, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 31, 2024
commit 833c12dcf9d5168f26bcd44ac92e0eb5695f4d0f
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -336,6 +336,7 @@ export { ReactComponent as VideoCameraStreamCompIconSmall } from "./v2/camera-st
 export { ReactComponent as VideoScreenshareCompIconSmall } from "./v2/screen-share-stream-s.svg"; // new
 export { ReactComponent as SignatureCompIconSmall } from "./v2/signature-s.svg";
 export { ReactComponent as StepCompIconSmall } from "./v2/steps-s.svg"; 
+export { ReactComponent as KanbanCompIconSmall } from "./v2/kanban-s.svg"; // new
 
 export { ReactComponent as CandlestickChartCompIconSmall } from "./v2/candlestick-chart-s.svg"; // new
 export { ReactComponent as FunnelChartCompIconSmall } from "./v2/funnel-chart-s.svg"; // new
@@ -441,6 +442,7 @@ export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-st
 export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg";
 export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg";
 export { ReactComponent as GanttCompIcon } from "./v2/gantt-chart-m.svg";
+export { ReactComponent as KanbanCompIcon } from "./v2/kanban-m.svg";
 
 export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg";
 export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg";

diff --git a/client/packages/lowcoder-design/src/icons/v2/kanban-l.svg b/client/packages/lowcoder-design/src/icons/v2/kanban-l.svg
diff --git a/client/packages/lowcoder-design/src/icons/v2/kanban-m.svg b/client/packages/lowcoder-design/src/icons/v2/kanban-m.svg
diff --git a/client/packages/lowcoder-design/src/icons/v2/kanban-s.svg b/client/packages/lowcoder-design/src/icons/v2/kanban-s.svg
diff --git a/client/packages/lowcoder/src/comps/hooks/utilsComp.ts b/client/packages/lowcoder/src/comps/hooks/utilsComp.ts
@@ -112,7 +112,7 @@ UtilsComp = withMethodExposing(UtilsComp, [
   {
     method: {
       name: "logoutUser",
-      description: trans("utilsComp.downloadFile"),
+      description: trans("utilsComp.logoutUser"),
       params: [],
     },
     execute: (comp, params) => {

diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
@@ -110,6 +110,7 @@ import {
   PivotTableCompIcon,
   GraphChartCompIcon,
   GanttCompIcon,
+  KanbanCompIcon,
 
 } from "lowcoder-design";
 
@@ -1248,6 +1249,26 @@ export var uiCompMap: Registry = {
     },
   },
 
+  kanban: {
+    name: trans("uiComp.kanbanCompName"),
+    enName: "Kanban",
+    description: trans("uiComp.kanbanCompDesc"),
+    categories: ["projectmanagement"],
+    icon: KanbanCompIcon,
+    keywords: trans("uiComp.kanbanCompKeywords"),
+    comp: remoteComp({
+      compName: "kanban",
+      packageName: "lowcoder-comp-kanban",
+      source: "npm",
+      isRemote: true,
+    }),
+    compName: "lowcoder-comp-kanban",
+    layoutInfo: {
+      w: 20,
+      h: 60,
+    },
+  },
+
   hillchart: {
     name: trans("uiComp.hillchartCompName"),
     enName: "Hillchart",

diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -162,6 +162,7 @@ export type UICompType =
   | "basicChart"
   | "columnLayout"
   | "ganttChart"
+  | "kanban"
   ;
 
 

diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -1199,6 +1199,9 @@ export const de = {
   "ganttChartCompName": "Gantt-Diagramm",
   "ganttChartCompDesc": "Ein Diagramm, das einen Projektplan mit den Start- und Endterminen von Elementen und Abhängigkeiten darstellt.",
   "ganttChartCompKeywords": "Gantt-Diagramm, Projektmanagement, Zeitplan",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Eine visuelle Organisationsmethode zur Verwaltung von Aufgaben und Workflows in einem Board mit Spalten und Karten.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Farbwähler",
   "colorPickerCompDesc": "Intuitive Farbauswahl zur individuellen Gestaltung.",
   "colorPickerCompKeywords": "farbe, auswahl, anpassung",

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1250,6 +1250,10 @@ export const en = {
     "ganttChartCompDesc" : "A chart that illustrates a project schedule, showing the start and finish dates of elements and dependencies.",
     "ganttChartCompKeywords" : "gantt chart, project management, schedule",
 
+    "kanbanCompName" : "Kanban Board (preview!)",
+    "kanbanCompDesc" : "A board for visualizing workflow, with columns representing stages of work and cards representing tasks.",
+    "kanbanCompKeywords" : "kanban, board, workflow, tasks",
+
     // by mousheng
 
     "colorPickerCompName": "Color Picker",
@@ -2446,7 +2450,8 @@ export const en = {
     "openUrl": "Open URL",
     "openApp": "Open App",
     "copyToClipboard": "Copy to Clipboard",
-    "downloadFile": "Download File"
+    "downloadFile": "Download File",
+    "logoutUser" : "Logout User",
   },
   "messageComp": {
     "info": "Send a Notification",

diff --git a/client/packages/lowcoder/src/i18n/locales/es.ts b/client/packages/lowcoder/src/i18n/locales/es.ts
@@ -1199,6 +1199,9 @@ export const es = {
   "ganttChartCompName": "Diagrama de Gantt",
   "ganttChartCompDesc": "Gráfico que ilustra el calendario de un proyecto, mostrando las fechas de inicio y fin de los elementos y las dependencias.",
   "ganttChartCompKeywords": "diagrama de gantt, gestión de proyectos, calendario",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Un tablero de Kanban interactivo para la gestión visual de tareas y flujos de trabajo.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Selector de color",
   "colorPickerCompDesc": "Selección intuitiva de colores para personalizar.",
   "colorPickerCompKeywords": "color, selector, personalización",

diff --git a/client/packages/lowcoder/src/i18n/locales/it.ts b/client/packages/lowcoder/src/i18n/locales/it.ts
@@ -1199,6 +1199,9 @@ export const it = {
   "ganttChartCompName": "Grafico di Gantt",
   "ganttChartCompDesc": "Un grafico che illustra la pianificazione di un progetto, mostrando le date di inizio e fine degli elementi e le dipendenze.",
   "ganttChartCompKeywords": "diagramma di gantt, gestione del progetto, pianificazione",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Un componente per la visualizzazione e la gestione delle attività in un flusso di lavoro Kanban, con colonne per le fasi di lavoro e le schede per le attività.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Picker di colori",
   "colorPickerCompDesc": "Selezione intuitiva dei colori per la personalizzazione.",
   "colorPickerCompKeywords": "colore, selezionatore, personalizzazione",

diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -1199,6 +1199,9 @@ export const pt = {
   "ganttChartCompName": "Gráfico de Gantt",
   "ganttChartCompDesc": "Um gráfico que ilustra o calendário de um projeto, mostrando as datas de início e de fim dos elementos e as dependências.",
   "ganttChartCompKeywords": "gráfico de Gantt, gestão de projectos, calendário",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Um quadro de kanban interativo para visualizar e gerenciar o fluxo de trabalho e as tarefas em um projeto.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Seletor de Cores",
   "colorPickerCompDesc": "Seleção intuitiva de cores para personalização.",
   "colorPickerCompKeywords": "cor, seletor, personalização",

diff --git a/client/packages/lowcoder/src/i18n/locales/ru.ts b/client/packages/lowcoder/src/i18n/locales/ru.ts
@@ -1199,6 +1199,9 @@ export const ru = {
   "ganttChartCompName": "Диаграмма Ганта",
   "ganttChartCompDesc": "Диаграмма, иллюстрирующая график проекта и показывающая даты начала и завершения элементов и зависимостей.",
   "ganttChartCompKeywords": "диаграмма Ганта, управление проектами, расписание",
+  "kanbanCompName" : "Kanban Board (preview!)",
+  "kanbanCompDesc" : "Компонент доски Kanban для управления рабочим процессом и задачами, используемый в методологии управления проектами Kanban.",
+  "kanbanCompKeywords" : "kanban, board, workflow, tasks",
   "colorPickerCompName": "Подборщик цветов",
   "colorPickerCompDesc": "Интуитивно понятный выбор цвета для персонализации.",
   "colorPickerCompKeywords": "цвет, подборщик, настройка",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1042,6 +1042,9 @@ export const zh: typeof en = {
         "pageLayoutCompName": "布局容器",
         "pageLayoutCompDesc": "一个容器，用于创建包含页眉、页脚和主要内容区域的布局",
         "pageLayoutCompKeywords": "布局、容器、导航、页面",
+        "kanbanCompName" : "看板(预览!)",
+        "kanbanCompDesc" : "一个用于可视化工作流程的板,其中列代表工作阶段,卡片代表任务。",
+        "kanbanCompKeywords" : "看板、板、工作流程、任务",
     },
 
     comp: {

diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -83,6 +83,7 @@ import {
   TransferCompIconSmall,
   ShapesCompIconSmall,
   GanttCompIconSmall,
+  KanbanCompIconSmall,
 
   CandlestickChartCompIconSmall,
   FunnelChartCompIconSmall,
@@ -186,6 +187,7 @@ export const CompStateIcon: {
 
   hillchart: <HillchartCompIconSmall/>,  
   ganttChart: <GanttCompIconSmall/>,
+  kanban: <KanbanCompIconSmall/>,
   openLayersGeoMap: <GeoMapLayersCompIconSmall/>,  
   chartsGeoMap: <GeoMapChartsCompIconSmall/>,  
   bpmnEditor: <BPMNEditorCompIconSmall/>,