Merge pull request stakwork#803 from MuhammadUmer44/feature/workspace…

…-planner-view [Feature]: Add Workspace Planner View with Header and Filters
MahtabBukhari · Dec 21, 2024 · e507870 · e507870
2 parents 7eea971 + dee1f1e
commit e507870
Show file tree

Hide file tree

Showing 2 changed files with 212 additions and 7 deletions.
diff --git a/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx b/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { EuiText } from '@elastic/eui';
+import MaterialIcon from '@material/react-material-icon';
+import { Workspace } from 'store/interface';
+import { useStores } from '../../../store';
+import { userCanManageBounty } from '../../../helpers';
+import { PostModal } from '../../widgetViews/postBounty/PostModal';
+import { colors } from '../../../config';
+import {
+  FillContainer,
+  ImageContainer,
+  CompanyNameAndLink,
+  CompanyLabel,
+  UrlButtonContainer,
+  UrlButton,
+  RightHeader,
+  CompanyDescription,
+  Button,
+  Filters,
+  FiltersRight,
+  NewStatusContainer,
+  StatusContainer,
+  InnerContainer
+} from '../../../pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles';
+
+import { Header, Leftheader } from '../../../pages/tickets/style';
+import addBounty from '../../../pages/tickets/workspace/workspaceHeader/Icons/addBounty.svg';
+import websiteIcon from '../../../pages/tickets/workspace/workspaceHeader/Icons/websiteIcon.svg';
+import githubIcon from '../../../pages/tickets/workspace/workspaceHeader/Icons/githubIcon.svg';
+
+const color = colors['light'];
+
+interface WorkspacePlannerHeaderProps {
+  workspace_uuid: string;
+  workspaceData: Workspace;
+}
+
+export const WorkspacePlannerHeader = ({
+  workspace_uuid,
+  workspaceData
+}: WorkspacePlannerHeaderProps) => {
+  const { main, ui } = useStores();
+  const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
+  const [canPostBounty, setCanPostBounty] = useState(false);
+
+  const checkUserPermissions = useCallback(async () => {
+    const hasPermission = await userCanManageBounty(workspace_uuid, ui.meInfo?.pubkey, main);
+    setCanPostBounty(hasPermission);
+  }, [workspace_uuid, ui.meInfo, main]);
+
+  useEffect(() => {
+    checkUserPermissions();
+  }, [checkUserPermissions]);
+
+  const handlePostBountyClick = () => {
+    setIsPostBountyModalOpen(true);
+  };
+
+  const handleWebsiteButton = (websiteUrl: string) => {
+    window.open(websiteUrl, '_blank');
+  };
+
+  const handleGithubButton = (githubUrl: string) => {
+    window.open(githubUrl, '_blank');
+  };
+
+  const { name, img, description, website, github } = workspaceData || {};
+  const selectedWidget = 'bounties';
+
+  return (
+    <>
+      <FillContainer>
+        <Header>
+          <Leftheader>
+            <ImageContainer src={img} width="72px" height="72px" alt="workspace icon" />
+            <CompanyNameAndLink>
+              <CompanyLabel>{name}</CompanyLabel>
+              <UrlButtonContainer data-testid="url-button-container">
+                {website && (
+                  <UrlButton onClick={() => handleWebsiteButton(website)}>
+                    <img src={websiteIcon} alt="" />
+                    Website
+                  </UrlButton>
+                )}
+                {github && (
+                  <UrlButton onClick={() => handleGithubButton(github)}>
+                    <img src={githubIcon} alt="" />
+                    Github
+                  </UrlButton>
+                )}
+              </UrlButtonContainer>
+            </CompanyNameAndLink>
+          </Leftheader>
+          <RightHeader>
+            <CompanyDescription>{description}</CompanyDescription>
+            {canPostBounty && (
+              <Button onClick={handlePostBountyClick}>
+                <img src={addBounty} alt="" />
+                Post a Bounty
+              </Button>
+            )}
+          </RightHeader>
+        </Header>
+      </FillContainer>
+
+      <FillContainer>
+        <Filters>
+          <FiltersRight>
+            <NewStatusContainer>
+              <StatusContainer color={color}>
+                <InnerContainer>
+                  <EuiText className="statusText">Feature</EuiText>
+                  <div className="filterStatusIconContainer">
+                    <MaterialIcon className="materialStatusIcon" icon="keyboard_arrow_down" />
+                  </div>
+                </InnerContainer>
+              </StatusContainer>
+            </NewStatusContainer>
+
+            <NewStatusContainer>
+              <StatusContainer color={color}>
+                <InnerContainer>
+                  <EuiText className="statusText">Phase</EuiText>
+                  <div className="filterStatusIconContainer">
+                    <MaterialIcon className="materialStatusIcon" icon="keyboard_arrow_down" />
+                  </div>
+                </InnerContainer>
+              </StatusContainer>
+            </NewStatusContainer>
+
+            <NewStatusContainer>
+              <StatusContainer color={color}>
+                <InnerContainer>
+                  <EuiText className="statusText">Status</EuiText>
+                  <div className="filterStatusIconContainer">
+                    <MaterialIcon className="materialStatusIcon" icon="keyboard_arrow_down" />
+                  </div>
+                </InnerContainer>
+              </StatusContainer>
+            </NewStatusContainer>
+          </FiltersRight>
+        </Filters>
+      </FillContainer>
+
+      <PostModal
+        widget={selectedWidget}
+        isOpen={isPostBountyModalOpen}
+        onClose={() => setIsPostBountyModalOpen(false)}
+      />
+    </>
+  );
+};
diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx
@@ -1,9 +1,62 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useParams } from 'react-router-dom';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import styled from 'styled-components';
+import { useStores } from '../../store';
+import { colors } from '../../config';
+import { WorkspacePlannerHeader } from './WorkspacePlannerHeader';
 
-const WorkspacePlanner = () => (
-  <div style={{ padding: '20px', textAlign: 'center' }}>
-    <h1>Welcome to the new Workspace Planner</h1>
-  </div>
-);
+const PlannerContainer = styled.div`
+  padding: 0;
+  height: calc(100vh - 65px);
+  background: ${colors.light.grayish.G950};
+  overflow-y: auto;
+`;
 
-export default WorkspacePlanner;
+const ContentArea = styled.div`
+  width: 90%;
+  margin: 20px auto;
+  background: white;
+  border-radius: 8px;
+  min-height: 500px;
+  text-align: center;
+  padding: 20px;
+`;
+
+const WorkspacePlanner = () => {
+  const { uuid } = useParams<{ uuid: string }>();
+  const { main } = useStores();
+  const [loading, setLoading] = useState(true);
+  const [workspaceData, setWorkspaceData] = useState<any>(null);
+
+  useEffect(() => {
+    const fetchWorkspaceData = async () => {
+      if (!uuid) return;
+      const data = await main.getUserWorkspaceByUuid(uuid);
+      setWorkspaceData(data);
+      setLoading(false);
+    };
+
+    fetchWorkspaceData();
+  }, [main, uuid]);
+
+  if (loading) {
+    return (
+      <PlannerContainer style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <EuiLoadingSpinner size="xl" />
+      </PlannerContainer>
+    );
+  }
+
+  return (
+    <PlannerContainer>
+      <WorkspacePlannerHeader workspace_uuid={uuid} workspaceData={workspaceData} />
+      <ContentArea>
+        <h1>Welcome to the new Workspace Planner</h1>
+      </ContentArea>
+    </PlannerContainer>
+  );
+};
+
+export default observer(WorkspacePlanner);