Merge pull request #757 from openstad/fix/participatory-budget-fixes

Fix/participatory budget fixes
openstad · Feb 13, 2025 · 2df2df2 · 2df2df2
2 parents 3d9a4d2 + 445b9c5
commit 2df2df2
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 33 deletions.
diff --git a/apps/admin-server/src/pages/projects/[project]/authentication/requiredfields.tsx b/apps/admin-server/src/pages/projects/[project]/authentication/requiredfields.tsx
@@ -102,7 +102,7 @@ export default function ProjectAuthenticationRequiredFields() {
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
-      const project = await updateProject({
+      const updatedConfig = {
         auth: {
           provider: {
             openstad: {
@@ -119,8 +119,12 @@ export default function ProjectAuthenticationRequiredFields() {
             }
           }
         }
-      });
-      if (project) {
+      };
+
+      const project = await updateProject(updatedConfig);
+      const doubleSave = await updateProject(updatedConfig);
+
+      if ( doubleSave && project ) {
         toast.success('Project aangepast!');
       } else {
         toast.error('Er is helaas iets mis gegaan.')

diff --git a/apps/api-server/src/routes/api/project.js b/apps/api-server/src/routes/api/project.js
@@ -626,7 +626,7 @@ router.route('/:projectId') //(\\d+)
           await adapter.service.updateClient({ authConfig: merged, project });
           // delete req.body.config?.auth?.provider?.[authConfig.provider]?.authTypes;
           // delete req.body.config?.auth?.provider?.[authConfig.provider]?.twoFactorRoles;
-          delete req.body.config?.auth?.provider?.[authConfig.provider]?.requiredUserFields;
+          // delete req.body.config?.auth?.provider?.[authConfig.provider]?.requiredUserFields;
           delete req.body.config?.auth?.provider?.[authConfig.provider]?.config;
         }
       }

diff --git a/apps/api-server/src/routes/auth/me.js b/apps/api-server/src/routes/auth/me.js
@@ -18,7 +18,7 @@ router
         where: { id: req.user.id, projectId: req.params.projectId }
       });
 
-      userNickName = user.nickName || '';
+      userNickName = user?.nickName || '';
     } catch (error) {
       next(error);
     }

diff --git a/packages/stem-begroot/package-lock.json b/packages/stem-begroot/package-lock.json
diff --git a/packages/stem-begroot/src/stem-begroot.css b/packages/stem-begroot/src/stem-begroot.css
@@ -216,11 +216,6 @@ article.stem-begroot--container .stembegroot--infolabels {
     width: 100%;
   }
 
-  .osc-listview.osc-listview-template-columns-3 {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    grid-gap: 10px;
-  }
-
   .osc-stem-begroot-content-item-footer {
     flex-wrap: wrap;
   }
@@ -314,6 +309,42 @@ section.osc-begrootmodule-resource-detail-photo
   flex: var(--osc-budget-left);
 }
 
+.osc .osc-listview-template-columns-3 {
+  grid-column-start: span 3;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 10px;
+}
+
+.osc .osc-listview-template-columns-2 {
+  grid-column-start: span 2;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1360px) {
+  .osc .osc-listview-template-columns-3 {
+    grid-column-start: span 2;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .osc .osc-listview-template-columns-2 {
+    grid-column-start: span 1;
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .osc .osc-listview-template-columns-3 {
+    grid-column-start: span 1;
+    grid-template-columns: 1fr;
+  }
+
+  .begrootmodule-dialog .osc-begrootmodule-resource-detail {
+    flex-direction: column;
+  }
+}
+
+
 .budget-badge.budget-badge-primary.osc-budget-0 { flex: var(--osc-budget-0); }
 .budget-badge.budget-badge-primary.osc-budget-1 { flex: var(--osc-budget-1); }
 .budget-badge.budget-badge-primary.osc-budget-2 { flex: var(--osc-budget-2); }

diff --git a/packages/stem-begroot/src/step-1/begroot-budget-list/stem-begroot-budget-list.tsx b/packages/stem-begroot/src/step-1/begroot-budget-list/stem-begroot-budget-list.tsx
@@ -56,24 +56,28 @@ export const StemBegrootBudgetList = ({
 
   return (
     <>
-      {showInfoMenu && (
+      {(showInfoMenu || !!introText) && (
         <section className="stem-begroot-budget-list">
-          <div className="stem-begroot-budget-list-used-budgets">
-            <div className="stem-begroot-helptext-and-budget-section-helptext">
-              <Paragraph>{introText}</Paragraph>
+          {!!introText && (
+            <div className="stem-begroot-budget-list-used-budgets">
+              <div className="stem-begroot-helptext-and-budget-section-helptext">
+                <Paragraph>{introText}</Paragraph>
+              </div>
             </div>
-          </div>
-          <BudgetStatusPanel
-            typeIsBudgeting={typeIsBudgeting}
-            maxNrOfResources={maxNrOfResources}
-            nrOfResourcesSelected={selectedResources.length}
-            maxBudget={maxBudget}
-            budgetUsed={budgetUsed}
-            showInfoMenu={showInfoMenu}
-            title={panelTitle}
-            budgetChosenTitle={budgetChosenTitle}
-            budgetRemainingTitle={budgetRemainingTitle}
-          />
+          )}
+          {showInfoMenu && (
+            <BudgetStatusPanel
+              typeIsBudgeting={typeIsBudgeting}
+              maxNrOfResources={maxNrOfResources}
+              nrOfResourcesSelected={selectedResources.length}
+              maxBudget={maxBudget}
+              budgetUsed={budgetUsed}
+              showInfoMenu={showInfoMenu}
+              title={panelTitle}
+              budgetChosenTitle={budgetChosenTitle}
+              budgetRemainingTitle={budgetRemainingTitle}
+            />
+          )}
         </section>
       )}
       <section className="budget-list-container">

diff --git a/packages/stem-begroot/src/step-1/begroot-detail-dialog/stem-begroot-detail-dialog.tsx b/packages/stem-begroot/src/step-1/begroot-detail-dialog/stem-begroot-detail-dialog.tsx
@@ -1,6 +1,6 @@
 import './stem-begroot-detail-dialog.css';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Icon,
   IconButton,
@@ -72,6 +72,7 @@ export const StemBegrootResourceDetailDialog = ({
 }) => {
   // @ts-ignore
   const intTags = tags.map(tag => parseInt(tag, 10));
+  const [carouselIndexSetter, setCarouselIndexSetter] = useState<((index: number) => void) | null>(null);
 
   const groupedTags: { [key: string]: number[] } = {};
 
@@ -136,15 +137,23 @@ export const StemBegrootResourceDetailDialog = ({
     }
   }
 
+  const handleBeforeIndexChange = () => {
+    if (carouselIndexSetter) {
+      carouselIndexSetter(0);
+    }
+  };
+
   return (
     <Dialog
       open={openDetailDialog}
       onOpenChange={setOpenDetailDialog}
+      className="begrootmodule-dialog"
       children={
         <Carousel
           startIndex={resourceDetailIndex}
           buttonText={{next: 'Volgende inzending', previous: 'Vorige inzending'}}
           items={filtered || []}
+          beforeIndexChange={handleBeforeIndexChange}
           itemRenderer={(resource) => {
             const canUseButton = resourceBtnEnabled(resource);
             const primaryButtonText = resourceBtnTextHandler(resource);
@@ -191,6 +200,7 @@ export const StemBegrootResourceDetailDialog = ({
                     <Carousel
                       items={resourceImages}
                       buttonText={{next: 'Volgende afbeelding', previous: 'Vorige afbeelding'}}
+                      setIndexInParent={setCarouselIndexSetter}
                       itemRenderer={(i) => {
                         if (i.url) {
                           return <Image src={i.url}/>

diff --git a/packages/stem-begroot/src/step-2/selected-overview.tsx b/packages/stem-begroot/src/step-2/selected-overview.tsx
@@ -140,6 +140,8 @@ export const BegrotenSelectedOverview = ({
             <Spacer size={1.5}/>
           }
 
+          <Heading3 className='step2Title'>{step2Title}</Heading3>
+
           {resourcesToShow.map((resource) => {
             let defaultImage = '';
 
@@ -159,7 +161,6 @@ export const BegrotenSelectedOverview = ({
 
             return (
               <>
-              <Heading3 className='step2Title'>{step2Title}</Heading3>
               <React.Fragment key={`budget-overview-row-${resource.id}`}>
                 <div className="budget-two-text-row-spaced">
                   <section className={`budget-overview-row ${hasImages}`}>

diff --git a/packages/ui/src/carousel/index.tsx b/packages/ui/src/carousel/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState } from 'react';
 import '../index.css';
 import './index.css';
 import { IconButton } from '../iconbutton';
@@ -13,19 +13,37 @@ type Props = {
     next?: string;
     previous?: string;
   }
+  beforeIndexChange?: () => void;
+  setIndexInParent?: (setter: (index: number) => void) => void;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export function Carousel({
   startIndex = 0,
   items = [],
   itemRenderer,
   buttonText,
+  beforeIndexChange = () => {},
+  setIndexInParent = () => {},
   ...props
 }: Props) {
   const [index, setIndex] = useState<number>(startIndex);
 
   if (items.length === 0) return null;
 
+  useEffect(() => {
+    if (setIndexInParent) {
+      setIndexInParent(() => setIndex);
+    }
+  }, [setIndexInParent]);
+
+  const handleIndexChange = (newIndex: number) => {
+    if (beforeIndexChange) {
+      beforeIndexChange();
+    }
+
+    setIndex(newIndex);
+  };
+
   return (
     <div
       {...props}
@@ -41,7 +59,7 @@ export function Carousel({
               disabled={index === 0}
               text={buttonText?.previous || 'Vorige slide'}
               iconOnly={true}
-              onClick={() => setIndex(index - 1)}
+              onClick={() => handleIndexChange(index - 1)}
             />
           </div>
           <div className="osc-carousel-navigation-button-wrapper osc-carousel-next">
@@ -51,7 +69,7 @@ export function Carousel({
               disabled={index === items.length - 1}
               text={buttonText?.next || 'Volgende slide'}
               iconOnly={true}
-              onClick={() => setIndex(index + 1)}
+              onClick={() => handleIndexChange(index + 1)}
             />
           </div>
         </div>

diff --git a/packages/ui/src/dialog/index.tsx b/packages/ui/src/dialog/index.tsx
@@ -18,8 +18,11 @@ export const Dialog = ({
   children,
   open,
   onOpenChange,
+  className,
   ...props
-}: PropsWithChildren<RadixDialog.DialogProps>) => {
+}: PropsWithChildren<RadixDialog.DialogProps & {
+  className?: string;
+}>) => {
   useEffect(() => {
     if (!open) {
       focusActiveResource();
@@ -31,7 +34,7 @@ export const Dialog = ({
       <RadixDialog.Portal>
         <div className="openstad">
           <RadixDialog.Overlay className="osc-DialogOverlay" />
-          <RadixDialog.Content className="osc osc-DialogContent">
+          <RadixDialog.Content className={`osc osc-DialogContent ${className}`}>
             <div>
               <RadixDialog.Close asChild>
                 <IconButton