Merge branch 'v2' into home-page

Musketeer-Developers · May 21, 2022 · 276574d · 276574d
2 parents 9b3487f + eefd0a9
commit 276574d
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 27 deletions.
diff --git a/src/modules/builder/BuilderLayout.tsx b/src/modules/builder/BuilderLayout.tsx
@@ -1,14 +1,20 @@
 import EditorLayout from './editor/EditorLayout';
 import NavBarLayout from './nav-bar/NavBarLayout';
+import ResumeHeader from './resume/components/ResumeHeader';
 import { ResumeLayout } from './resume/ResumeLayout';
 
 const BuilderLayout = () => {
   return (
     <div className="flex flex-col h-screen">
       <NavBarLayout />
       <main className="flex flex-1 max-h-[calc(100vh_-_3.5rem)]">
-        <div className="flex flex-1 justify-center bg-custom-grey100">
-          <ResumeLayout />
+        <div className="flex flex-col flex-1 justify-center bg-custom-grey100">
+          <header className="w-[210mm] mt-5 mb-3 mx-auto">
+            <ResumeHeader />
+          </header>
+          <div className="overflow-auto no-scrollbar">
+            <ResumeLayout />
+          </div>
         </div>
         <aside className="w-[25vw] min-w-[20rem]">
           <EditorLayout />

diff --git a/src/modules/builder/resume/ResumeLayout.tsx b/src/modules/builder/resume/ResumeLayout.tsx
@@ -1,22 +1,20 @@
-import { MordernTemplate } from 'src/templates/modern/MordernTemplate';
+// import { MordernTemplate } from 'src/templates/modern/MordernTemplate';
 import ProfessionalTemplate from 'src/templates/professional/ProfessionalTemplate';
-import ResumeHeader from './components/ResumeHeader';
 import { Context, createContext } from 'react';
 import { useResumeStore } from 'src/stores/useResumeStore';
+import { useZoom } from 'src/stores/useZoom';
 
 export let StateContext: Context<any> = createContext(null);
 
 export const ResumeLayout = () => {
   const resumeData = useResumeStore();
+  const zoom = useZoom((state) => state.zoom);
   StateContext = createContext(resumeData);
 
   return (
-    <div className="m-5">
-      <header className="mb-3">
-        <ResumeHeader />
-      </header>
-      <div className="h-[calc(100%_-_2.75rem)] overflow-auto no-scrollbar">
-        <div className="w-[210mm] h-[296mm] bg-white">
+    <div className="mx-5">
+      <div style={{ transform: `scale(${zoom})` }} className="origin-top">
+        <div className="w-[210mm] h-[296mm] bg-white my-0 mx-auto">
           <StateContext.Provider value={resumeData}>
             <ProfessionalTemplate />
           </StateContext.Provider>

diff --git a/src/modules/builder/resume/atoms/ResumeController.tsx b/src/modules/builder/resume/atoms/ResumeController.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-const ResumeController = () => {
+const ResumeController = ({ zoomIn, zoomOut }: { zoomIn: () => void; zoomOut: () => void }) => {
   return (
     <div className="grid grid-cols-3 items-center gap-6 ">
       <Image
@@ -9,13 +9,15 @@ const ResumeController = () => {
         alt="Zoom in"
         width="24px"
         height="24px"
+        onClick={zoomIn}
       />
       <Image
         src="/icons/zoom-out.svg"
         className="cursor-pointer"
         alt="Zoom out"
         width="24px"
         height="24px"
+        onClick={zoomOut}
       />
       <Image
         src="/icons/full-screen.svg"

diff --git a/src/modules/builder/resume/components/ResumeHeader.tsx b/src/modules/builder/resume/components/ResumeHeader.tsx
@@ -1,11 +1,14 @@
+import { useZoom } from 'src/stores/useZoom';
 import ResumeController from '../atoms/ResumeController';
 import { ResumeTitle } from '../atoms/ResumeTitle';
 
 const ResumeHeader = () => {
+  const { zoomIn, zoomOut } = useZoom.getState();
+
   return (
     <div className="flex items-center justify-between">
       <ResumeTitle title="Modern Resume" />
-      <ResumeController />
+      <ResumeController zoomIn={zoomIn} zoomOut={zoomOut} />
     </div>
   );
 };

diff --git a/src/stores/useZoom.tsx b/src/stores/useZoom.tsx
@@ -0,0 +1,26 @@
+import create, { SetState, GetState } from 'zustand';
+
+interface IZoomStore {
+  zoom: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  setZoom: (zoom: number) => void;
+}
+
+const handleZoomIn = (get: GetState<IZoomStore>) => () => get().setZoom(get().zoom * 1.1);
+
+const handleZoomOut = (get: GetState<IZoomStore>) => () => get().setZoom(get().zoom / 1.1);
+
+const handleSetZoom = (set: SetState<IZoomStore>) => (zoom: number) =>
+  set(() => {
+    if (zoom > 1.5) return { zoom: 1.5 };
+    if (zoom < 0.9) return { zoom: 0.9 };
+    return { zoom: +zoom.toFixed(1) };
+  });
+
+export const useZoom = create<IZoomStore>((set, get) => ({
+  zoom: 1,
+  setZoom: handleSetZoom(set),
+  zoomIn: handleZoomIn(get),
+  zoomOut: handleZoomOut(get),
+}));
diff --git a/src/templates/professional/components/Education.tsx b/src/templates/professional/components/Education.tsx
@@ -5,19 +5,35 @@ export const Education = ({ education }: { education: EducationIntrf[] }) => {
 
   return (
     <>
-      {education.map((item: EducationIntrf, index: number) => (
-        <div key={index} className="mt-3">
-          <div>
-            <p className="font-normal">
-              {item.studyType} - {item.area}
-            </p>
-            <div className="flex justify-between items-center">
-              <p className="font-normal text-[#1AB0B3]">{item.institution}</p>
-              <p className="gap-3 text-xs">{`${item.startDate} - ${item.endDate}`}</p>
+      {education.map((item: EducationIntrf, index: number) => {
+        let startDate;
+        let endDate;
+        if (item.startDate !== null) {
+          startDate =
+            typeof item.startDate === 'object' ? item.startDate.format('MMM YYYY') : item.startDate;
+        }
+        if (item.endDate !== null) {
+          endDate =
+            typeof item.endDate === 'object' ? item.endDate.format('MMM YYYY') : item.endDate;
+        }
+        return (
+          <div key={index} className="mt-3">
+            <div>
+              <p className="font-normal">
+                {item.studyType} - {item.area}
+              </p>
+              <div className="flex justify-between items-center">
+                <p className="font-normal text-[#1AB0B3]">{item.institution}</p>
+                <div className="flex gap-3">
+                  <p className="text-xs">
+                    {startDate} - {endDate}
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </>
   );
 };
diff --git a/src/templates/professional/components/RatedSkills.tsx b/src/templates/professional/components/RatedSkills.tsx
@@ -2,10 +2,7 @@ import { SkillItemIntf } from 'src/stores/skill.interface';
 import styled from '@emotion/styled';
 
 const ProgressBar = styled.div`
-  width: ${(props: { level: number }) => {
-    console.log(props);
-    return props.level;
-  }}%;
+  width: ${(props: { level: number }) => props.level}%;
   height: 6px;
   background-color: yellowgreen;
 `;