Survey edit access check

frontend/package.json

@@ -27,7 +27,7 @@
     "lodash": "^4.17.21",
     "memoize-immutable": "^3.0.0",
     "primeicons": "^7.0.0",
-    "primereact": "^10.6.3",
+    "primereact": "^10.8.4",
     "proj4": "^2.9.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -65,11 +65,11 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@types/leaflet": "^1.9.12",
+    "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.6.2",
     "jest": "^29.6.2",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.3.1",
     "process": "^0.11.10",
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^18.2.0",
+    "vite": "^5.3.1"
   }
 }

frontend/src/admin/admin.tsx

@@ -13,12 +13,11 @@ import {JsonButton} from "./json-button";
 import {DeeplinkButton} from "./deeplink-button"
 import {ZeroLayout} from "../components/zero-layout"
 
-import {ImportExcelButton} from "./import-excel-button"
-import {NewSurveyButton} from "./new-survey-button"
 import {AdminButtonRow} from "./admin-button-row"
+import {SurveyActiveCheckbox} from "./survey-active-checkbox"
 
 export const Admin: FunctionComponent = () => {
-    const {loading, surveys, removeSurvey} = useSurveys()
+    const {loading, surveys, changeSurvey, removeSurvey} = useSurveys()
 
     const multipleProjects = surveys.map(survey => survey.zenmoProject)
         .filter((value, index, self) => self.indexOf(value) === index).length > 1
@@ -30,6 +29,7 @@ export const Admin: FunctionComponent = () => {
                     <AdminButtonRow/>
                 </div>
                     <DataTable
+                        key={String(multipleProjects)}
                         value={surveys}
                         loading={loading}
                         sortField="created"
@@ -53,7 +53,15 @@ export const Admin: FunctionComponent = () => {
                                 ))}
                             </>
                         )}/>
-                        <Column field="createdToString" body={survey => formatDatetime(survey.created.toString())} header="Opgestuurd op" sortable/>
+
+                        <Column field="createdAtToString" body={(survey: Survey ) => formatDatetime(survey.createdAt.toString())} header="Opgestuurd op" sortable/>
+                        <Column field="createdByToString" header="Aangemaakt door" sortable filter />
+                        <Column field="active" header="Actief" sortable
+                                body={(survey: Survey) => <SurveyActiveCheckbox
+                                    active={survey.active}
+                                    surveyId={survey.id}
+                                    setActive={(active) => changeSurvey(survey.withActive(active))}
+                                />}/>
                         <Column body={(survey: Survey) => (
                             <div css={{
                                 display: 'flex',

frontend/src/admin/boolean-checkbox.tsx

@@ -0,0 +1,51 @@
+import {FunctionComponent} from "react"
+import {ClassNames} from "@emotion/react"
+import {MultiStateCheckbox} from "primereact/multistatecheckbox"
+
+/**
+ * Generic checkbox which behaves like a toggle
+ */
+export const BooleanCheckbox: FunctionComponent<{
+    value: boolean,
+    disabled?: boolean,
+    onChange: (newValue: boolean) => void
+}> = ({value, disabled = false, onChange})  => {
+    const options = [
+        {
+            value: false,
+            icon: "pi pi-times",
+        },
+        {
+            value: true,
+            icon: "pi pi-check",
+        },
+    ];
+
+    const color = value ? "lightgreen" : "red"
+
+    return (
+        <ClassNames>
+            {({ css, cx }) => (
+                <MultiStateCheckbox
+                    value={value}
+                    options={options}
+                    optionValue="value"
+                    empty={false}
+                    onChange={(e) => { onChange(e.value) }}
+                    disabled={disabled}
+                    pt={{
+                        root: {
+                            asdf: "onChange",
+                            className: css`
+                                & .p-checkbox-box {
+                                    background-color: ${color};
+                                    border-color: ${color};
+                                }
+                            `
+                        },
+                    }}
+                />
+            )}
+        </ClassNames>
+    )
+}

frontend/src/admin/survey-active-checkbox.tsx

@@ -0,0 +1,36 @@
+import {FunctionComponent, useState} from "react"
+import {ztorFetch} from "../services/ztor-fetch"
+import {BooleanCheckbox} from "./boolean-checkbox"
+
+export const SurveyActiveCheckbox: FunctionComponent<{
+    surveyId: any,
+    active: boolean,
+    setActive: (active: boolean) => void
+}> = (
+    {surveyId, active, setActive}
+) => {
+    const [disabled, setDisabled] = useState(false);
+    const onChange = async (active: boolean) => {
+        setDisabled(true);
+        try {
+            await ztorFetch(`/company-surveys/${surveyId}/active`, {
+                method: 'PUT',
+                body: JSON.stringify(active),
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            })
+            setActive(active)
+        } catch (e) {
+            alert(`Error setting active state: ${e}`)
+        } finally {
+            setDisabled(false);
+        }
+    }
+
+    return <BooleanCheckbox
+        value={active}
+        onChange={onChange}
+        disabled={disabled}
+    />
+}

frontend/src/admin/use-surveys.ts

@@ -5,13 +5,19 @@ import {Survey, surveysFromJson} from "zero-zummon"
 type UseSurveyReturn = {
     loading: boolean,
     surveys: Survey[],
+    // for syncing the state
+    changeSurvey: (newSurvey: Survey) => void,
     removeSurvey: (surveyId: string) => void,
 }
 
 export const useSurveys = (): UseSurveyReturn => {
     const [loading, setLoading] = useState(true)
     const [surveys, setSurveys] = useState<Survey[]>([])
 
+    const changeSurvey = (newSurvey: Survey) => {
+        setSurveys(surveys.map(s => s.id.toString() === newSurvey.id.toString() ? newSurvey : s))
+    }
+
     useOnce(async () => {
         try {
             const response = await fetch(import.meta.env.VITE_ZTOR_URL + '/company-surveys', {
@@ -37,10 +43,11 @@ export const useSurveys = (): UseSurveyReturn => {
     return {
         loading,
         surveys,
+        changeSurvey,
         removeSurvey,
     }
 }
 
 export const redirectToLogin = () => {
     window.location.href = import.meta.env.VITE_ZTOR_URL + '/login?redirectUrl=' + encodeURIComponent(window.location.href)
-}
+}

frontend/src/components/bedrijven-form-v1.tsx

@@ -29,11 +29,12 @@ export const BedrijvenFormV1: FunctionComponent = () => {
         try {
             const response = await fetch(url, {
                 method: 'POST',
+                credentials: 'include',
                 headers: {
                     'Content-Type': 'application/json',
                     'Accept': 'application/json',
                 },
-                body: JSON.stringify(values)
+                body: JSON.stringify(values),
             })
 
             if (response.status !== 201) {

frontend/src/excel-import/save.tsx

@@ -14,6 +14,7 @@ export const Save: FunctionComponent<{survey: Survey}> = ({survey}) => {
         try {
             const response = await fetch(url, {
                 method: 'POST',
+                credentials: 'include',
                 headers: {
                     'Content-Type': 'application/json',
                     'Accept': 'application/json',
@@ -55,4 +56,4 @@ export const Save: FunctionComponent<{survey: Survey}> = ({survey}) => {
             <Button label="Opslaan" icon="pi pi-save" onClick={save}/>
         </div>
     )
-}
+}

frontend/src/services/ztor-fetch.ts

@@ -19,5 +19,9 @@ export async function ztorFetch<T>(
         throw new Error(await response.text())
     }
 
+    if (response.headers.get("Content-Length") === "0") {
+        return undefined as T
+    }
+
     return await response.json()
 }

migrations/V30__survey_created_by.sql

@@ -0,0 +1,5 @@
+ALTER TABLE company_survey
+    ADD created_by_id uuid
+        CONSTRAINT fk_company_survey_created_by_id__id
+            REFERENCES "user"
+            ON UPDATE RESTRICT ON DELETE RESTRICT;

migrations/V31__active.sql

@@ -0,0 +1,2 @@
+ALTER TABLE company_survey
+    ADD COLUMN active BOOLEAN NOT NULL DEFAULT TRUE;

vallum/src/main/kotlin/Vallum.kt

@@ -26,7 +26,8 @@ constructor(
     fun getHessenpoortSurveys(): List<Survey> =
         getSurveysByProject("Hessenpoort")
 
-    fun getSurveysByProject(project: String): List<Survey> {
+    @JvmOverloads
+    fun getSurveysByProject(project: String, active: Boolean? = true): List<Survey> {
         val client = HttpClient(CIO) {
             install(ContentNegotiation) {
                 json(Json {
@@ -39,6 +40,7 @@ constructor(
             val accessToken = getAccessToken(client)
             client.get(baseUrl.trimEnd('/') + "/company-surveys") {
                 parameter("project", project)
+                parameter("active", active)
                 headers {
                     append("Authorization", "Bearer $accessToken")
                 }

zorm/src/main/kotlin/com/zenmo/orm/companysurvey/MockSurvey.kt

@@ -12,6 +12,7 @@ fun createMockSurvey(projectName: String = "Project") = Survey(
     personName = "John Doe",
     email = "[email protected]",
     dataSharingAgreed = true,
+    active = false,
     addresses = listOf(
         Address(
             id = UUID.randomUUID(),