Merge pull request #75 from AplinkosMinisterija/66-paruosti-ivykiu-fi…

…ltravima

ivykiu zemelapis

src/components/CopiedFromDSContentLayout.tsx

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { JSX } from 'react';
+import { AppRoute, device } from '@aplinkosministerija/design-system';
+interface Props {
+  children: any;
+  title?: string;
+  customSubTitle?: any;
+  customTitle?: any;
+  currentRoute?: AppRoute;
+  pageActions?: JSX.Element;
+  limitWidth?: boolean;
+}
+const CopiedFromDSContentLayout = ({
+  children,
+  title,
+  customSubTitle,
+  customTitle,
+  currentRoute,
+  pageActions,
+  limitWidth = false,
+}: Props) => {
+  const pageTitle = title || currentRoute?.title;
+  return (
+    <Container $limitWidth={limitWidth}>
+      {pageActions}
+      <InnerContainer>
+        {customTitle || (pageTitle && <Title>{pageTitle}</Title>)}
+        {customSubTitle ||
+          (currentRoute?.description && <SubTitle>{currentRoute?.description}</SubTitle>)}
+        {children}
+      </InnerContainer>
+    </Container>
+  );
+};
+export default CopiedFromDSContentLayout;
+
+const SubTitle = styled.div`
+  color: ${({ theme }) => theme.colors.text?.primary || '#101010'};
+  margin-bottom: 16px;
+`;
+
+const Container = styled.div<{ $limitWidth: boolean }>`
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  min-height: 100%;
+  padding: 0 12px;
+  ${({ $limitWidth }) =>
+    $limitWidth &&
+    `@media ${device.desktop} {
+    max-width: 700px;
+  }`}
+`;
+
+const InnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+  align-self: center;
+  align-items: center;
+  padding: 0 12px;
+  background-color: white;
+  @media ${device.desktop} {
+    border-radius: 16px;
+    margin: 0 auto;
+    padding: 40px;
+    overflow-y: auto;
+    height: fit-content;
+  }
+`;
+
+const Title = styled.div`
+  color: ${({ theme }) => theme.colors.text?.primary || '#101010'};
+  font-size: 3.2rem;
+  font-weight: 800;
+  margin: 16px 0;
+  text-align: center;
+`;

src/components/EventFilterModal.tsx

@@ -8,6 +8,7 @@ import {
   App,
   Filters,
   IconName,
+  Subscription,
   TimeRangeItem,
   buttonsTitles,
   subtitle,
@@ -16,24 +17,32 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import api from '../utils/api';
 import { UserContext, UserContextType } from './UserProvider';
+import Loader from './Loader';
 
-const EventFilterModal = ({ onClose, visible = false }: any) => {
-  const { loggedIn } = useContext<UserContextType>(UserContext);
+const EventFilterModal = ({ isMyEvents = false, onClose, visible = false }: any) => {
   const {
     value: filters,
     setValue: setFilters,
     resetValue: resetFilters,
   } = useStorage<Filters>('filters', {}, true);
 
   const [selectedApps, setSelectedApps] = useState<App[]>([]);
+  const [selectedSubs, setSelectedSubs] = useState<Subscription[]>([]);
   const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRangeItem[]>([]);
+  const { loggedIn } = useContext<UserContextType>(UserContext);
+
+  const { data: appsResponse, isLoading: loadingApps } = useQuery({
+    queryKey: ['apps', 'all'],
+    queryFn: () => api.getAllApps(),
+  });
+  const apps = appsResponse ?? [];
 
-  const { data: appsResponse } = useQuery({
-    queryKey: ['apps'],
-    queryFn: () => api.getApps({ page: 1 }),
+  const { data: subsResponse, isLoading: loadingSubs } = useQuery({
+    queryKey: ['subscriptions', 'all'],
+    queryFn: () => api.getAllSubscriptions(),
     enabled: loggedIn,
   });
-  const apps: App[] = appsResponse?.rows || [];
+  const subs = subsResponse ?? [];
 
   const clearFilter = () => {
     resetFilters();
@@ -43,18 +52,60 @@ const EventFilterModal = ({ onClose, visible = false }: any) => {
   useEffect(() => {
     if (visible) {
       setSelectedApps(filters.apps || []);
+      setSelectedSubs(filters.subscriptions || []);
       setSelectedTimeRange(filters.timeRange ? [filters.timeRange] : []);
     }
   }, [visible]);
 
   const onFilterClick = () => {
     setFilters({
       ...(selectedApps.length > 0 ? { apps: selectedApps } : null),
+      ...(selectedSubs.length > 0 ? { subscriptions: selectedSubs } : null),
       ...(selectedTimeRange ? { timeRange: selectedTimeRange[0] } : null),
     });
     onClose();
   };
 
+  const renderSubs = () => {
+    if (loadingSubs) {
+      return <Loader />;
+    }
+    if (isMyEvents && subs?.length > 0) {
+      return (
+        <FilterGroup>
+          <Subtitle>{subtitle.subscriptions}</Subtitle>
+          <FilterPicker
+            allowMultipleSelection
+            getItemKey={(item) => item.id}
+            data={subs}
+            selectedItems={selectedSubs}
+            setSelectedItems={(items) => setSelectedSubs(items)}
+          />
+        </FilterGroup>
+      );
+    }
+  };
+
+  const renderApps = () => {
+    if (loadingApps) {
+      return <Loader />;
+    }
+    if (apps?.length > 0) {
+      return (
+        <FilterGroup>
+          <Subtitle>{subtitle.category}</Subtitle>
+          <FilterPicker
+            allowMultipleSelection
+            getItemKey={(item) => item.key}
+            data={apps}
+            selectedItems={selectedApps}
+            setSelectedItems={(items) => setSelectedApps(items)}
+          />
+        </FilterGroup>
+      );
+    }
+  };
+
   return (
     <Modal visible={visible} onClose={onClose}>
       <Container>
@@ -66,21 +117,14 @@ const EventFilterModal = ({ onClose, visible = false }: any) => {
           </IconContainer>
         </HeaderWrapper>
         <Title>{buttonsTitles.filter}</Title>
-        {apps.length > 0 && (
-          <FilterGroup>
-            <Subtitle>{subtitle.category}</Subtitle>
-            <FilterPicker
-              allowMultipleSelection
-              data={apps}
-              selectedItems={selectedApps}
-              setSelectedItems={(items) => setSelectedApps(items)}
-            />
-          </FilterGroup>
-        )}
+
+        {renderSubs()}
+        {renderApps()}
 
         <FilterGroup>
           <Subtitle>{subtitle.date}</Subtitle>
           <FilterPicker
+            getItemKey={(item) => item.key}
             data={timeRangeItems}
             selectedItems={selectedTimeRange}
             setSelectedItems={(items) => setSelectedTimeRange(items)}