Merge branch 'release/1.0.0' of https://github.com/ita-social-project…

…s/StreetCode_Client into feature/issue-1307
ita-social-projects · Jun 25, 2024 · 5f14f5d · 5f14f5d
2 parents 348b421 + 8e6294c
commit 5f14f5d
Show file tree

Hide file tree

Showing 36 changed files with 1,474 additions and 453 deletions.
diff --git a/__mocks__/@stores/root-store.tsx b/__mocks__/@stores/root-store.tsx
@@ -1,5 +1,7 @@
-import Context, {ContextCreate} from "@models/additional-content/context.model";
-import ContextsApi from "@api/additional-content/contexts.api";
+import Context, {ContextCreate} from '@models/additional-content/context.model';
+import ContextsApi from '@api/additional-content/contexts.api';
+import TeampositionsApi from '@api/additional-content/teampositions.api';
+import Position from '@models/additional-content/teampositions.model';
 
 export const mockID = 1;
 export const mockIsOpen = true;
@@ -59,6 +61,28 @@ export const useMobx = () => ({
             },
         ],
     },
+    teamPositionsStore: {
+        fetchPositions: jest.fn(),
+        createPosition: (position: Position) => {
+            TeampositionsApi.create(position);
+        },
+        updatePosition: (position: Position) => {
+            TeampositionsApi.update(position);
+        },
+        deletePosition: (id: number) => {
+            TeampositionsApi.delete(id);
+        },
+        getPositionsArray: [
+            {
+                id: 1,
+                position: 'pos1',
+            },
+            {
+                id: 2,
+                position: 'pos 2',
+            },
+        ],
+    },
 });
 
 export default useMobx;
diff --git a/src/app/api/additional-content/teampositions.api.ts b/src/app/api/additional-content/teampositions.api.ts
@@ -0,0 +1,21 @@
+import Agent from '@api/agent.api';
+import { API_ROUTES } from '@constants/api-routes.constants';
+import Position, {PositionCreate} from '@models/additional-content/teampositions.model';
+
+const PositionsApi = {
+    getById: (id: number) => Agent.get<Position>(`${API_ROUTES.POSITION.GET_BY_ID}/${id}`),
+
+    getByTitle: (title: string) => Agent.get<Position>(`${API_ROUTES.POSITION.GET_BY_TITLE}/${title}`),
+
+    getAll: () => Agent.get<Position[]>(`${API_ROUTES.POSITION.GET_ALL}`),
+
+    create: (position: PositionCreate) => Agent.post<Position>(`${API_ROUTES.POSITION.CREATE}`, position),
+
+    update: (position: Position) => Agent.put<Position>(`${API_ROUTES.POSITION.UPDATE}`, position),
+
+    delete: (id: number) => Agent.delete(`${API_ROUTES.POSITION.DELETE}/${id}`),
+
+    getAllWithTeamMembers: () => Agent.get<Position[]>(`${API_ROUTES.POSITION.GET_ALL_WITH_TEAM_MEMBERS}`),
+};
+
+export default PositionsApi;
diff --git a/src/app/common/components/ArtGallery/ArtGalleryBlock.component.tsx b/src/app/common/components/ArtGallery/ArtGalleryBlock.component.tsx
@@ -15,6 +15,7 @@ import StreetcodeArtSlide from "@models/media/streetcode-art-slide.model";
 import useMobx, { useStreetcodeDataContext } from "@stores/root-store";
 import BlockHeading from "@streetcode/HeadingBlock/BlockHeading.component";
 import ArtGalleryTemplatesModal from "../modals/ArtGalleryTemplates/ArtGalleryTemplatesModal.component";
+import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
 
 import { Button } from "antd";
 import { useMediaQuery } from "react-responsive";
@@ -37,39 +38,58 @@ const ArtGallery = ({
   const { streetcodeArtSlideStore, artGalleryTemplateStore, artStore } =
     useMobx();
   const {
-    streetcodeStore: { getStreetCodeId, errorStreetCodeId },
+    streetcodeStore: {
+      itChangedIdChange,
+      itChangedId,
+      trackChange,
+      getStreetCodeId,
+      errorStreetCodeId
+    },
   } = useStreetcodeDataContext();
-  const {
-    fetchNextArtSlidesByStreetcodeId,
-    streetcodeArtSlides,
-    amountOfSlides,
-  } = streetcodeArtSlideStore;
+  const { fetchNextArtSlidesByStreetcodeId, streetcodeArtSlides, amountOfSlides, setStartingSlideAndId } = streetcodeArtSlideStore;
   const { streetcodeArtSlides: templateArtSlides } = artGalleryTemplateStore;
   const [slickProps, setSlickProps] = useState<SliderSettings>(SLIDER_PROPS);
+  const [isTemplateSelected, setIsTemplateSelected] = useState(title === "Шаблони");
   const [modalAddOpened, setModalAddOpened] = useState<boolean>(false);
   const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isTemplateSelected, setIsTemplateSelected] = useState(title === "Шаблони");
   const secondRender = useRef(false);
+  const windowsize = useWindowSize();
   const isMobile = useMediaQuery({
     query: "(max-width: 680px)",
   });
+  const [fetchedData, setFetchedData] = useState<boolean>(false)
 
   const { id } = useParams<any>();
   const parseId = id ? +id : errorStreetCodeId;
 
-  useAsync(async () => {
+  useEffect(() => {
+    if(isAdmin || isConfigurationGallery){
+      fetchData().then(() => {
+        setFetchedData(true);
+      }).then(() => {
+        itChangedIdChange();
+      });
+    } else {
+      trackChange();
+  if (itChangedId) {
+    fetchData().then(() => {
+      setFetchedData(true);
+    }).then(() => {
+      itChangedIdChange();
+    });
+  }
+        }
+  });
+
+  async function fetchData() {
     if (streetcodeIdValidAndFetchingRequired()) {
       secondRender.current = true;
       let currentSlide = 0;
-
       while (currentSlide < MAX_SLIDES_AMOUNT) {
         try {
           // eslint-disable-next-line no-await-in-loop
-          await fetchNextArtSlidesByStreetcodeId(
-            getStreetCodeId !== -1 ? getStreetCodeId : parseId
-          );
-
+          await fetchNextArtSlidesByStreetcodeId(getStreetCodeId !== -1 ? getStreetCodeId : parseId);
           if (isFillArtsStore) {
             copyArtsFromSlidesToStore();
           }
@@ -79,8 +99,9 @@ const ArtGallery = ({
           currentSlide = MAX_SLIDES_AMOUNT;
         }
       }
+      setStartingSlideAndId(getStreetCodeId);
     }
-  }, [getStreetCodeId, parseId]);
+  }
 
   function streetcodeIdValidAndFetchingRequired() {
     return (
@@ -138,21 +159,21 @@ const ArtGallery = ({
                 artGalleryTemplateStore.isRedact = false;
             })
         } else {
-            newSlide.index = streetcodeArtSlides.length + 1;
+            newSlide.index = streetcodeArtSlides.length;
             newSlide.streetcodeId = parseId ?? -1;
 
             runInAction(() => {
                 streetcodeArtSlides.push(newSlide);
             });
-            
+
             console.log(artGalleryTemplateStore);
         }
-  
-  
+
+
     setSelectedTemplateIndex(0);
   }
-  
-  
+
+
   const handleOpenModal = () => {
     setIsModalOpen(true);
     setIsTemplateSelected(true);
@@ -173,10 +194,21 @@ const ArtGallery = ({
     setIsTemplateSelected(title === "Шаблони");
     setSelectedTemplateIndex(0);
   }
+  const sliderProps = {
+    className: 'artGallerySliderContainer',
+    infinite: false,
+    arrows: true,
+    dots: true,
+    draggable: true,
+    touchThreshold: 25,
+    slidesToScroll: 1,
+    slidesToShow: 1,
+    centerPadding: '0px',
+};
 
   return (
     <div>
-      {(streetcodeArtSlides.length > 0 || isConfigurationGallery) && (
+      {((streetcodeArtSlides.length > 0 || isConfigurationGallery)) && (
         <div id="art-gallery" className="artGalleryWrapper">
           <div className="artGalleryContainer container">
             <BlockHeading headingText={title} />
@@ -195,25 +227,33 @@ const ArtGallery = ({
               onClose={handleCloseModal}
               onTemplateSelect={handleTemplateSelect}
             />
-            
+
             <div className="artGalleryContentContainer">
               <div className="artGallerySliderContainer">
                 {isMobile ? (
-                  !isConfigurationGallery ? (
-                    convertSlidesToTemplates(
-                      [
-                        templateArtSlides[selectedTemplateIndex],
-                      ] as StreetcodeArtSlide[],
-                      true
-                    )
-                  ) : (
-                    convertSlidesToTemplates(
-                      streetcodeArtSlideStore.getVisibleSortedSlides() as StreetcodeArtSlide[],
-                      false,
-                      isAdmin
-                    )
-                  )
-                ) : (
+ <SlickSlider {...sliderProps}>
+ { isTemplateSelected && !artGalleryTemplateStore.isRedact ? (
+   convertSlidesToTemplates(
+     [templateArtSlides[selectedTemplateIndex]] as StreetcodeArtSlide[],
+     true
+   )
+ ) : (
+   isConfigurationGallery ? (
+     convertSlidesToTemplates(
+       templateArtSlides as StreetcodeArtSlide[],
+       true
+     )
+   ) : (
+     convertSlidesToTemplates(
+       streetcodeArtSlideStore.getVisibleSortedSlides(getStreetCodeId !== -1 ? getStreetCodeId : parseId) as StreetcodeArtSlide[],
+       false,
+       isAdmin
+     )
+   )
+ )}
+</SlickSlider>
+)
+ : (
                   <SlickSlider {...slickProps}>
                     { isTemplateSelected && !artGalleryTemplateStore.isRedact ? (
                       convertSlidesToTemplates(
@@ -228,7 +268,7 @@ const ArtGallery = ({
                         )
                       ) : (
                         convertSlidesToTemplates(
-                          streetcodeArtSlideStore.getVisibleSortedSlides() as StreetcodeArtSlide[],
+                          streetcodeArtSlideStore.getVisibleSortedSlides(getStreetCodeId !== -1 ? getStreetCodeId : parseId) as StreetcodeArtSlide[],
                           false,
                           isAdmin
                         )

diff --git a/src/app/common/components/ArtGallery/ArtGalleryBlock.styles.scss b/src/app/common/components/ArtGallery/ArtGalleryBlock.styles.scss
@@ -140,25 +140,3 @@
     }
 }
 
-@media screen and (max-width:680px) {
-    .artGalleryWrapper {
-        .artGalleryContainer {
-            .artGalleryContentContainer {
-                .artGallerySliderContainer {
-                    @include mut.rem-padded(0, s.$art-gallery-gap-mobile, 0, 0);
-                    gap: pxToRem(s.$art-gallery-gap-mobile);
-                    height: pxToRem(362px);
-                    overflow-y: hidden;
-                    display: flex;
-                    flex-direction: column;
-                    flex-wrap: wrap;
-                }
-            }
-            .container-for-arts-block {
-                margin-left: 160px;
-                margin-top: -95px;
-            }
-        }
-    }
-}
-
diff --git a/src/app/common/components/ArtGallery/components/BaseArtGallerySlide.component.tsx b/src/app/common/components/ArtGallery/components/BaseArtGallerySlide.component.tsx
@@ -14,6 +14,7 @@ import StreetcodeArtSlide from "@models/media/streetcode-art-slide.model";
 
 import type { MenuProps } from 'antd';
 import { Dropdown, Modal, Space } from 'antd';
+import StreetcodeArt from '@/models/media/streetcode-art.model';
 
 const BaseArtGallerySlide = ({
     streetcodeArts, className, artSlideId, isDroppable, isAdmin, slideIndex,
@@ -23,6 +24,7 @@ const BaseArtGallerySlide = ({
     const { modalStore: { setModal } } = useModalContext();
     const [confirmationModalVisibility, setConfirmationModalVisibility] = useState(false);
     const [selectedTemplate, setSelectedTemplate] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
     const isDesktop = useMediaQuery({
         query: '(min-width: 1025px)',
     });
@@ -64,6 +66,7 @@ const BaseArtGallerySlide = ({
         }
     }
 
+
     function onMoveSlideBackward() {
         const currentSlide = streetcodeArtSlides.find(
             (s) => s.index === slideIndex,
@@ -97,7 +100,7 @@ const BaseArtGallerySlide = ({
     }
 
     function checkMoveSlideForward(slideIndex : number) : boolean {
-        let sortedSlides = streetcodeArtSlideStore.getVisibleSortedSlides();
+        let sortedSlides = streetcodeArtSlideStore.getVisibleSortedSlidesWithoutParam();
         if (sortedSlides.length > 0)
             {
                 let lengthSlides = sortedSlides.length;
@@ -107,14 +110,13 @@ const BaseArtGallerySlide = ({
     }
 
     function checkMoveSlideBackward(slideIndex : number) : boolean {
-        let sortedSlides = streetcodeArtSlideStore.getVisibleSortedSlides();
+        let sortedSlides = streetcodeArtSlideStore.getVisibleSortedSlidesWithoutParam();
         if (sortedSlides.length > 0)
             {
                 return slideIndex <= sortedSlides[0].index
             }
         return false;
     }
-
     const editDropdownOptions: MenuProps['items'] = [
         {
             label: <button onClick={onEditSlideClick}>Редагувати</button>,
@@ -135,6 +137,18 @@ const BaseArtGallerySlide = ({
             disabled: checkMoveSlideBackward(slideIndex),
         },
     ];
+    const handleMouseDown = () => {
+        setIsDragging(false);
+    };
+
+    const handleMouseMove = () => {
+        setIsDragging(true);
+    };
+    const handleImageClick = (streetcodeArt: StreetcodeArt) => {
+        if (!isDroppable && !isDragging) {
+            setModal('artGallery', streetcodeArt.art.id);
+        }
+    };
 
     return (
         <div className={`${className} baseArtSlide`}>
@@ -146,10 +160,10 @@ const BaseArtGallerySlide = ({
                             className={`baseArtImage img${streetcodeArt.index}`}
                             src={base64ToUrl(image.base64, image.mimeType)}
                             alt={image.imageDetails?.title}
-                            onClick={() => !isDroppable && setModal(
-                                'artGallery',
-                                streetcodeArt.art.id,
-                            )}
+                            onMouseDown={handleMouseDown}
+
+            onMouseMove={handleMouseMove}
+            onClick={() => handleImageClick(streetcodeArt)}
                         />
                         {isDesktop && (
                             <div