adds for controlling tab view / list view

Samfundet · Nov 2, 2024 · 21494ed · 21494ed
1 parent b7e0fe6
commit 21494ed
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.module.scss b/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.module.scss
@@ -13,7 +13,7 @@
   margin: 1rem;
 }
 
-.organizationHeader{
+.organizationHeader {
   display: grid;
   grid-template-columns: auto auto;
   align-items: center;
@@ -27,51 +27,52 @@
   width: 50%;
   aspect-ratio: 16 / 9;
   border: none;
-  @include for-tablet-down{
+  @include for-tablet-down {
     width: 80%;
   }
 }
 
-.basicRecruitmentSubHeader{
+.basicRecruitmentSubHeader {
   @include flex-row-center;
   width: 100%;
   padding: 0.25rem;
   border-radius: 0.15rem;
   text-align: center;
 }
 
-.samfRecruitmentSubHeader{
+.samfRecruitmentSubHeader {
   @extend .basicRecruitmentSubHeader;
   color: white;
   background-color: $red-samf;
 }
 
-.optionsContainer{
+.optionsContainer {
   @include flex-row-center;
   gap: 1rem;
-
 }
 
 .personalRow {
   @include flex-row-center;
   gap: 1rem;
 }
 
-.ukaRecruitmentSubHeader{
+.ukaRecruitmentSubHeader {
   @extend .samfRecruitmentSubHeader;
   background-color: $blue-uka;
 }
 
-.isfitRecruitmentSubHeader{
+.isfitRecruitmentSubHeader {
   @extend .samfRecruitmentSubHeader;
   background-color: $blue-isfit;
 }
 
 .openPositionsWrapper {
-  @include  flex-column-center;
+  @include flex-column-center;
   width: 100%;
   gap: 1rem;
 }
 
-
-
+.viewModeControll {
+  display: flex;
+  gap: 2rem;
+}
diff --git a/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx b/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { Logo, OccupiedFormModal, Page, SamfundetLogoSpinner, Text, ToggleSwitch, Video } from '~/Components';
+import { Button, Logo, OccupiedFormModal, Page, SamfundetLogoSpinner, Text, Video } from '~/Components';
 import { PersonalRow } from '~/Pages/RecruitmentPage';
 import { getOrganization, getRecruitment } from '~/api';
 import { useOrganizationContext } from '~/context/OrgContextProvider';
@@ -14,10 +14,12 @@ import { dbT, getObjectFieldOrNumber } from '~/utils';
 import { GangSeparatePositions, GangTypeContainer, RecruitmentTabs } from './Components';
 import styles from './OrganizationRecruitmentPage.module.scss';
 
+type ViewMode = 'list' | 'tab';
+
 export function OrganizationRecruitmentPage() {
   const isDesktop = useDesktop();
   const { recruitmentId } = useParams<{ recruitmentId: string }>();
-  const [viewAllPositions, setViewAllPositions] = useState<boolean>(true);
+  const [positionsViewMode, setViewMode] = useState<ViewMode>('list');
   const { t } = useTranslation();
   const { changeOrgTheme, organizationTheme } = useOrganizationContext();
   const [recruitment, setRecruitment] = useState<RecruitmentDto>();
@@ -59,11 +61,6 @@ export function OrganizationRecruitmentPage() {
     }
   }, [organizationName, changeOrgTheme]);
 
-  function toggleViewAll() {
-    const toggledValue = !viewAllPositions;
-    setViewAllPositions(toggledValue);
-  }
-
   return (
     <Page className={styles.recruitmentPage}>
       {loading ? (
@@ -76,13 +73,7 @@ export function OrganizationRecruitmentPage() {
               {dbT(recruitment, 'name')}
             </Text>
           </div>
-          {recruitment?.promo_media ? (
-            <>
-              <Video embedId={recruitment.promo_media} className={styles.video} />
-            </>
-          ) : (
-            <></>
-          )}
+          {recruitment?.promo_media && <Video embedId={recruitment.promo_media} className={styles.video} />}
           <div
             className={classNames(
               organizationName === 'Samfundet' && styles.samfRecruitmentSubHeader,
@@ -109,12 +100,25 @@ export function OrganizationRecruitmentPage() {
           </div>
           <div className={styles.openPositionsWrapper}>
             <div className={styles.optionsContainer}>
-              <ToggleSwitch checked={viewAllPositions} onChange={toggleViewAll} />
-              <Text>Placeholder for tag-autocomplete search </Text>
-              {/*^^^ issue #1275 */}
+              <div className={styles.viewModeControll}>
+                <Button
+                  theme={positionsViewMode === 'list' ? 'basic' : 'samf'}
+                  onClick={() => setViewMode('list')}
+                  className={positionsViewMode === 'list' ? styles.activeButton : ''}
+                >
+                  List view
+                </Button>
+                <Button theme={positionsViewMode === 'tab' ? 'basic' : 'samf'} onClick={() => setViewMode('tab')}>
+                  Tab view
+                </Button>
+              </div>
             </div>
             {recruitmentId &&
-              (viewAllPositions ? <GangTypeContainer recruitmentId={recruitmentId} /> : <RecruitmentTabs />)}
+              (positionsViewMode === 'list' ? (
+                <GangTypeContainer recruitmentId={recruitmentId} />
+              ) : (
+                <RecruitmentTabs />
+              ))}
             {recruitment?.separate_positions && recruitment.separate_positions.length > 0 && (
               <GangSeparatePositions recruitmentSeparatePositions={recruitment.separate_positions} />
             )}