init

worklenz-frontend/src/components/task-list-common/phaseDropdown/PhaseDropdown.tsx

@@ -0,0 +1,66 @@
+import { Badge, Flex, Select, Typography } from 'antd';
+import React, { useState } from 'react';
+// custom css file
+import './phaseDropdown.css';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { PhaseOption } from '../../../types/phase.types';
+import { colors } from '../../../styles/colors';
+import { useTranslation } from 'react-i18next';
+
+const PhaseDropdown = ({ projectId }: { projectId: string }) => {
+  const [currentPhaseOption, setCurrentPhaseOption] = useState<PhaseOption | null>(null);
+
+  // localization
+  const { t } = useTranslation('task-list-table');
+
+  // get phase data from redux
+  const phaseList = useAppSelector(state => state.phaseReducer.phaseList);
+
+  //get phases details from phases slice
+  const phase = phaseList.find(el => el.projectId === projectId);
+
+  const handlePhaseOptionSelect = (value: string) => {
+    const selectedOption = phase?.phaseOptions.find(option => option.optionId === value);
+    if (selectedOption) {
+      setCurrentPhaseOption(selectedOption);
+    }
+  };
+
+  return (
+    <Select
+      value={currentPhaseOption?.optionId}
+      placeholder={
+        <Typography.Text type="secondary" style={{ fontSize: 13 }}>
+          {t('selectText')}
+        </Typography.Text>
+      }
+      onChange={handlePhaseOptionSelect}
+      style={{
+        width: 'fit-content',
+        minWidth: 120,
+      }}
+      dropdownStyle={{
+        padding: 0,
+      }}
+      variant={'borderless'}
+    >
+      {phase?.phaseOptions.map(option => (
+        <Select.Option key={option.optionId} value={option.optionId}>
+          <Flex gap={4} align="center">
+            <Badge color={option.optionColor} />
+            <Typography.Text
+              style={{
+                fontSize: 13,
+                color: colors.darkGray,
+              }}
+            >
+              {option.optionName}
+            </Typography.Text>
+          </Flex>
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};
+
+export default PhaseDropdown;

worklenz-frontend/src/components/task-list-common/phaseDropdown/phaseDropdown.css

@@ -0,0 +1,19 @@
+.phase-dropdown .ant-dropdown-menu {
+  padding: 0 !important;
+  margin-top: 8px !important;
+  overflow: hidden;
+}
+
+.phase-dropdown .ant-dropdown-menu-item {
+  padding: 0 !important;
+}
+
+.phase-dropdown-card .ant-card-body {
+  padding: 0 !important;
+}
+
+.phase-menu .ant-menu-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}