Merge pull request #6428 from makeplane/chore-ln-module

chore: ln support modules constants

packages/constants/src/index.ts

@@ -15,6 +15,7 @@ export * from "./tab-indices";
 export * from "./user";
 export * from "./workspace";
 export * from "./stickies";
+export * from "./module";
 export * from "./project";
 export * from "./views";
 export * from "./inbox";

web/core/constants/module.ts → packages/constants/src/module.ts

@@ -1,99 +1,105 @@
-import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 // types
-import { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
+import {
+  TModuleLayoutOptions,
+  TModuleOrderByOptions,
+  TModuleStatus,
+} from "@plane/types";
 
 export const MODULE_STATUS: {
-  label: string;
+  i18n_label: string;
   value: TModuleStatus;
   color: string;
   textColor: string;
   bgColor: string;
 }[] = [
   {
-    label: "Backlog",
+    i18n_label: "project_modules.status.backlog",
     value: "backlog",
     color: "#a3a3a2",
     textColor: "text-custom-text-400",
     bgColor: "bg-custom-background-80",
   },
   {
-    label: "Planned",
+    i18n_label: "project_modules.status.planned",
     value: "planned",
     color: "#3f76ff",
     textColor: "text-blue-500",
     bgColor: "bg-indigo-50",
   },
   {
-    label: "In Progress",
+    i18n_label: "project_modules.status.in_progress",
     value: "in-progress",
     color: "#f39e1f",
     textColor: "text-amber-500",
     bgColor: "bg-amber-50",
   },
   {
-    label: "Paused",
+    i18n_label: "project_modules.status.paused",
     value: "paused",
     color: "#525252",
     textColor: "text-custom-text-300",
     bgColor: "bg-custom-background-90",
   },
   {
-    label: "Completed",
+    i18n_label: "project_modules.status.completed",
     value: "completed",
     color: "#16a34a",
     textColor: "text-green-600",
     bgColor: "bg-green-100",
   },
   {
-    label: "Cancelled",
+    i18n_label: "project_modules.status.cancelled",
     value: "cancelled",
     color: "#ef4444",
     textColor: "text-red-500",
     bgColor: "bg-red-50",
   },
 ];
 
-export const MODULE_VIEW_LAYOUTS: { key: TModuleLayoutOptions; icon: any; title: string }[] = [
+export const MODULE_VIEW_LAYOUTS: {
+  key: TModuleLayoutOptions;
+  i18n_title: string;
+}[] = [
   {
     key: "list",
-    icon: List,
-    title: "List layout",
+    i18n_title: "project_modules.layout.list",
   },
   {
     key: "board",
-    icon: LayoutGrid,
-    title: "Gallery layout",
+    i18n_title: "project_modules.layout.board",
   },
   {
     key: "gantt",
-    icon: GanttChartSquare,
-    title: "Timeline layout",
+    i18n_title: "project_modules.layout.timeline",
   },
 ];
 
-export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: string }[] = [
+export const MODULE_ORDER_BY_OPTIONS: {
+  key: TModuleOrderByOptions;
+  i18n_label: string;
+}[] = [
   {
     key: "name",
-    label: "Name",
+    i18n_label: "project_modules.order_by.name",
   },
   {
     key: "progress",
-    label: "Progress",
+    i18n_label: "project_modules.order_by.progress",
   },
   {
     key: "issues_length",
-    label: "Number of issues",
+    i18n_label: "project_modules.order_by.issues",
   },
   {
     key: "target_date",
-    label: "Due date",
+    i18n_label: "project_modules.order_by.due_date",
   },
   {
     key: "created_at",
-    label: "Created date",
+    i18n_label: "project_modules.order_by.created_at",
   },
   {
     key: "sort_order",
-    label: "Manual",
+    i18n_label: "project_modules.order_by.manual",
   },
 ];

packages/i18n/src/locales/en/translations.json

@@ -1279,5 +1279,28 @@
     "assigned": "Assigned",
     "created": "Created",
     "subscribed": "Subscribed"
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planned",
+      "in_progress": "In Progress",
+      "paused": "Paused",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    },
+    "layout": {
+      "list": "List layout",
+      "board": "Gallery layout",
+      "timeline": "Timeline layout"
+    },
+    "order_by": {
+      "name": "Name",
+      "progress": "Progress",
+      "issues": "Number of issues",
+      "due_date": "Due date",
+      "created_at": "Created date",
+      "manual": "Manual"
+    }
   }
 }

packages/i18n/src/locales/es/translations.json

@@ -1283,5 +1283,29 @@
     "assigned": "Asignados",
     "created": "Creados",
     "subscribed": "Suscritos"
+  },
+
+  "project_modules": {
+    "status": {
+      "backlog": "Pendientes",
+      "planned": "Planificado",
+      "in_progress": "En progreso",
+      "paused": "Pausado",
+      "completed": "Completado",
+      "cancelled": "Cancelado"
+    },
+    "layout": {
+      "list": "Vista lista",
+      "board": "Vista galería",
+      "timeline": "Vista cronológica"
+    },
+    "order_by": {
+      "name": "Nombre",
+      "progress": "Progreso",
+      "issues": "Número de problemas",
+      "due_date": "Fecha de vencimiento",
+      "created_at": "Fecha de creación",
+      "manual": "Manual"
+    } 
   }
 }

packages/i18n/src/locales/fr/translations.json

@@ -1278,5 +1278,29 @@
     "assigned": "Assignés",
     "created": "Créés",
     "subscribed": "Abonnés"
+  },
+
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planifié",
+      "in_progress": "En cours",
+      "paused": "En pause",
+      "completed": "Terminé",
+      "cancelled": "Annulé"
+    },
+    "layout": {
+      "list": "Vue liste",
+      "board": "Vue galerie",
+      "timeline": "Vue chronologique"
+    },
+    "order_by": {
+      "name": "Nom",
+      "progress": "Progression",
+      "issues": "Nombre de problèmes",
+      "due_date": "Date d'échéance",
+      "created_at": "Date de création",
+      "manual": "Manuel"
+    }
   }
 }

packages/i18n/src/locales/ja/translations.json

@@ -1281,5 +1281,31 @@
     "assigned": "割り当て済み",
     "created": "作成済み",
     "subscribed": "購読済み"
+  },
+
+
+  "project_modules": {
+    "status": {
+      "backlog": "バックログ",
+      "planned": "計画済み",
+      "in_progress": "進行中",
+      "paused": "一時停止",
+      "completed": "完了",
+      "cancelled": "キャンセル"
+    },
+    "layout": {
+      "list": "リスト表示",
+      "board": "ギャラリー表示",
+      "timeline": "タイムライン表示"
+    },
+    "order_by": {
+      "name": "名前",
+      "progress": "進捗",
+      "issues": "課題数",
+      "due_date": "期限",
+      "created_at": "作成日",
+      "manual": "手動"
+    }
   }
+
 }

packages/i18n/src/locales/zh-CN/translations.json

@@ -852,5 +852,30 @@
     "common": {
       "months_count": "{months, plural, one{#个月} other{#个月}}"
     }
+  },
+
+  "project_modules": {
+    "status": {
+      "backlog": "待办",
+      "planned": "已规划",
+      "in_progress": "进行中",
+      "paused": "已暂停",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "layout": {
+      "list": "列表视图",
+      "board": "画廊视图",
+      "timeline": "时间轴视图"
+    },
+    "order_by": {
+      "name": "名称",
+      "progress": "进度",
+      "issues": "问题数量",
+      "due_date": "截止日期",
+      "created_at": "创建日期",
+      "manual": "手动"
+    }
   }
+
 }

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx

@@ -2,13 +2,16 @@
 
 import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { CustomMenu, Row } from "@plane/ui";
-import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
+import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter, useProject } from "@/hooks/store";
 
 export const ModulesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   const { updateDisplayFilters } = useModuleFilter();
+  const { t } = useTranslation();
 
   return (
     <div className="flex justify-start md:hidden">
@@ -34,8 +37,8 @@ export const ModulesListMobileHeader = observer(() => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <ModuleLayoutIcon layoutType={layout.key} />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           );
         })}

web/core/components/modules/analytics-sidebar/root.tsx

@@ -18,6 +18,8 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane types
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
 import {
@@ -46,7 +48,7 @@ import {
   MODULE_LINK_UPDATED,
   MODULE_UPDATED,
 } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
+
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -84,7 +86,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
 
   // store hooks
-
+  const { t } = useTranslation();
   const { allowPermissions } = useUserPermissions();
 
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
@@ -374,7 +376,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                         backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
                       }}
                     >
-                      {moduleStatus?.label ?? "Backlog"}
+                      {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
                     </span>
                   }
                   value={value}
@@ -387,7 +389,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     <CustomSelect.Option key={status.value} value={status.value}>
                       <div className="flex items-center gap-2">
                         <ModuleStatusIcon status={status.value} />
-                        {status.label}
+                        {t(status.i18n_label)}
                       </div>
                     </CustomSelect.Option>
                   ))}

web/core/components/modules/applied-filters/status.tsx

@@ -3,9 +3,10 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ModuleStatusIcon } from "@plane/ui";
 // constants
-import { MODULE_STATUS } from "@/constants/module";
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -15,6 +16,7 @@ type Props = {
 
 export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -25,7 +27,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
         return (
           <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
-            {statusDetails.label}
+            {t(statusDetails.i18n_label)}
             {editable && (
               <button
                 type="button"