From 78fe46b99484bfbd1eb1c74d610697a51587f5a0 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Fri, 22 Nov 2024 07:00:13 +0500
Subject: [PATCH] Add Phase Planner Page with Feature and Phase name

---
 src/pages/tickets/style.ts                  |  9 ++
 src/people/widgetViews/PhasePlannerView.tsx | 92 +++++++++++++++++----
 src/people/widgetViews/workspace/style.ts   | 10 +++
 src/store/main.ts                           | 24 ++++++
 4 files changed, 120 insertions(+), 15 deletions(-)

diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
index 2230fc97..797df7ac 100644
--- a/src/pages/tickets/style.ts
+++ b/src/pages/tickets/style.ts
@@ -470,3 +470,12 @@ export const FeatureOptionsWrap = styled.div`
     padding: 2px 10px;
   }
 `;
+
+export const PhaseLabel = styled.h5`
+  font-size: 1.1rem;
+  font-weight: bolder;
+`;
+
+export const LabelValue = styled.span`
+  font-weight: normal;
+`;
diff --git a/src/people/widgetViews/PhasePlannerView.tsx b/src/people/widgetViews/PhasePlannerView.tsx
index 49e580ae..aeed13cd 100644
--- a/src/people/widgetViews/PhasePlannerView.tsx
+++ b/src/people/widgetViews/PhasePlannerView.tsx
@@ -1,13 +1,22 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
-
-const Container = styled.div`
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-`;
+import React, { useCallback, useEffect, useState } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { Feature } from 'store/interface';
+import MaterialIcon from '@material/react-material-icon';
+import { useStores } from 'store';
+import {
+  FeatureBody,
+  FeatureDataWrap,
+  FieldWrap,
+  PhaseLabel,
+  LabelValue
+} from 'pages/tickets/style';
+import {
+  FeatureHeadNameWrap,
+  FeatureHeadWrap,
+  WorkspaceName,
+  PhaseFlexContainer
+} from './workspace/style';
+import { Phase } from './workspace/interface';
 
 interface PhasePlannerParams {
   feature_uuid: string;
@@ -16,13 +25,66 @@ interface PhasePlannerParams {
 
 const PhasePlannerView: React.FC = () => {
   const { feature_uuid, phase_uuid } = useParams<PhasePlannerParams>();
+  const [featureData, setFeatureData] = useState<Feature | null>(null);
+  const [phaseData, setPhaseData] = useState<Phase | null>(null);
+  const { main } = useStores();
+  const history = useHistory();
+
+  const getFeatureData = useCallback(async () => {
+    if (!feature_uuid) return;
+    const data = await main.getFeaturesByUuid(feature_uuid);
+    if (data) {
+      setFeatureData(data);
+    }
+    return data;
+  }, [feature_uuid, main]);
+
+  const getPhaseData = useCallback(async () => {
+    if (!feature_uuid || !phase_uuid) return;
+    const data = await main.getFeaturePhaseByUUID(feature_uuid, phase_uuid);
+    if (data) {
+      setPhaseData(data);
+    }
+    return data;
+  }, [feature_uuid, phase_uuid, main]);
+
+  useEffect(() => {
+    getFeatureData();
+    getPhaseData();
+  }, [getFeatureData, getPhaseData]);
+
+  const handleClose = () => {
+    history.push(`/feature/${feature_uuid}`);
+  };
 
   return (
-    <Container>
-      <h1>Phase Planner</h1>
-      <p>Feature UUID: {feature_uuid}</p>
-      <p>Phase UUID: {phase_uuid}</p>
-    </Container>
+    <FeatureBody>
+      <FeatureHeadWrap>
+        <FeatureHeadNameWrap>
+          <MaterialIcon
+            onClick={handleClose}
+            icon={'arrow_back'}
+            style={{
+              fontSize: 25,
+              cursor: 'pointer'
+            }}
+          />
+          <WorkspaceName>Phase Planner</WorkspaceName>
+        </FeatureHeadNameWrap>
+      </FeatureHeadWrap>
+      <FeatureDataWrap>
+        <FieldWrap>
+          <PhaseFlexContainer>
+            <PhaseLabel>
+              Feature Name: <LabelValue>{featureData?.name}</LabelValue>
+            </PhaseLabel>
+            <PhaseLabel>
+              Phase: <LabelValue>{phaseData?.name}</LabelValue>
+            </PhaseLabel>
+          </PhaseFlexContainer>
+        </FieldWrap>
+      </FeatureDataWrap>
+    </FeatureBody>
   );
 };
 
diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
index 7ccac8ca..ceca48e6 100644
--- a/src/people/widgetViews/workspace/style.ts
+++ b/src/people/widgetViews/workspace/style.ts
@@ -1332,6 +1332,8 @@ export const PostABounty = styled.div`
   align-items: center;
   justify-content: flex-end;
   direction: row;
+  padding-bottom: 20px;
+  margin-right: 10px;
 
   button {
     div {
@@ -1560,3 +1562,11 @@ export const AudioModalBody = styled.div`
 export const StyledEuiModalFooter = styled(EuiModalFooter)`
   padding: 4px 15px 15px;
 `;
+
+export const PhaseFlexContainer = styled.div`
+  display: flex;
+  align-items: left;
+  width: 100%;
+  flex-direction: column;
+  gap: 16px;
+`;
diff --git a/src/store/main.ts b/src/store/main.ts
index 10404e49..f7b18ae9 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -3515,6 +3515,30 @@ export class MainStore {
     }
   }
 
+  async getFeaturePhaseByUUID(
+    feature_uuid: string,
+    phase_uuid: string
+  ): Promise<Phase | undefined> {
+    try {
+      if (!uiStore.meInfo) return undefined;
+      const info = uiStore.meInfo;
+
+      const r: any = await fetch(`${TribesURL}/features/${feature_uuid}/phase/${phase_uuid}`, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+          'x-jwt': info.tribe_jwt,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      return r.json();
+    } catch (e) {
+      console.error('getFeaturePhaseByUUID', e);
+      return undefined;
+    }
+  }
+
   async createOrUpdatePhase(phase: Phase): Promise<any> {
     try {
       if (!uiStore.meInfo) return [];