ENH: Show the name of the selected survey in Survey Routine

electron/src/git.js

@@ -380,6 +380,28 @@ export async function listGroups(username) {
 }
 
 
+/**
+ * List surveys accessible to a given user
+ */
+export async function listSurveys(username) {
+    // create URL
+    let url = new URL(`https://pavlovia.org/api/v2/surveys`)
+    // apply auth
+    if (username && username in users) {
+        url.searchParams.set(
+            "oauthToken", 
+            await users[username].getToken()
+        )
+    }
+    // get surveys
+    return await fetch(
+        url.toString()
+    ).then(
+        resp => resp.json()
+    )
+}
+
+
 export async function newProject(details, folder, username) {
     // initialise local repo
     await git.init({ 
@@ -688,6 +710,7 @@ export const handlers = {
     clearUsers: ipcMain.handle("git.clearUsers", (evt) => clearUsers()),
     listUsers: ipcMain.handle("git.listUsers", (evt) => Object.keys(users)),
     listGroups: ipcMain.handle("git.listGroups", (evt, username) => listGroups(username)),
+    listSurveys: ipcMain.handle("git.listSurveys", (evt, username) => listSurveys(username)),
     getUserInfo: ipcMain.handle("git.getUserInfo", (evt, username) => users[username]?.profile),
     getRemote: ipcMain.handle("git.getRemote", (evt, folder, user) => getRemote(folder, user)),
     getProjectInfo: ipcMain.handle("git.getProjectInfo", (evt, details, username) => getProjectInfo(details, username)),

electron/src/preload.js

@@ -122,6 +122,7 @@ const git = {
   clearUsers: () => ipcRenderer.invoke("git.clearUsers").then(resp => resp),
   listUsers: () => ipcRenderer.invoke("git.listUsers").then(resp => resp),
   listGroups: (username) => ipcRenderer.invoke("git.listGroups", username).then(resp => resp),
+  listSurveys: (username) => ipcRenderer.invoke("git.listSurveys", username).then(resp => resp),
   getUserInfo: (username) => ipcRenderer.invoke("git.getUserInfo", username).then(resp => resp),
   getRemote: (folder, user) => ipcRenderer.invoke("git.getRemote", folder, user).then(resp => resp),
   getProjectInfo: (details, username) => ipcRenderer.invoke("git.getProjectInfo", details, username).then(resp => resp),

electron/src/svelte.js

@@ -151,14 +151,6 @@ function setupAPI(server) {
     });
     console.log("Mapped API: Submit a bug report to ClickUp")
 
-    // API for getting user's surveys
-    server.get('/api/surveys', async (req, res) => await apiGet(
-        req,
-        res,
-        `https://pavlovia.org/api/v2/surveys?oauthToken=${req.headers.access}`
-    ));
-    console.log("Mapped API: Get user's Pavlovia surveys")
-
     // handle SPA fallback without wildcard
     server.use((req, res) => {
         res.sendFile(path.join(import.meta.dirname, '../../dist/index.html'));

src/lib/paramCtrls/ctrls/SurveyCtrl.svelte

@@ -2,6 +2,7 @@
     import SingleLineCtrl from "./SingleLineCtrl.svelte"
     import { CompactButton, RadioButton } from "$lib/utils/buttons"
     import { getContext } from "svelte";
+    import { git } from "$lib/globals.svelte";
     import Dialog from "$lib/utils/dialog/Dialog.svelte";
     import { translate } from "$lib/translation";
 
@@ -23,35 +24,39 @@
     let selected = $state({
         survey: undefined
     });
-
-    async function getSurveys() {
-        // request from Pavlovia
-        let data = await fetch(
-            "/api/surveys",
-            {
-                headers: current.user.token
-            }
-        ).then(
-            resp => resp.json()
-        )
-
-        return data.surveys
-    }
 </script>
 
-<SingleLineCtrl 
-    param={param} 
-    disabled={disabled}
-    {@attach element => param.registerValidator("survey", validateSurvey, -5)}
-    {...attachments}
-/>
-
-<CompactButton 
-    icon="/icons/btn-find.svg"
-    tooltip={translate("Browse your projects on Pavlovia")}
-    onclick={(evt) => showSurveysDlg = true}
-    disabled={disabled || current.user === undefined}
-/>
+<div class=wrapper>
+    <SingleLineCtrl 
+        param={param} 
+        disabled={disabled}
+        {@attach element => param.registerValidator("survey", validateSurvey, -5)}
+        {...attachments}
+    />
+    <CompactButton 
+        icon="/icons/btn-find.svg"
+        tooltip={translate("Browse your projects on Pavlovia")}
+        onclick={(evt) => showSurveysDlg = true}
+        disabled={disabled || current.user === undefined}
+    />
+    <div class=output>
+        {#await git.listSurveys(
+            $state.snapshot(current.user)
+        ) then resp}
+            {#each resp.surveys as survey}
+                {#if survey.surveyId === param.val}
+                    <a href="https://pavlovia.org/surveys/{survey.surveyId}">
+                        {survey.surveyName}
+                    </a>
+                    by
+                    <a href="https://gitlab.pavlovia.org/{survey.creatorUsername}">
+                        {survey.creatorUsername}
+                    </a>
+                {/if}
+            {/each}
+        {/await}
+    </div>
+</div>
 
 <Dialog
     id=browse-surveys
@@ -71,10 +76,12 @@
             <a href="https://pavlovia.org/dashboard?tab=4" target="_blank">here</a>
         </p>
         <div class=choice-group>
-            {#await getSurveys()}
+            {#await git.listSurveys(
+                $state.snapshot(current.user)
+            )}
                 {translate("Loading surveys...")}
-            {:then surveys}
-                {#each surveys as survey}
+            {:then resp}
+                {#each resp.surveys as survey}
                     <RadioButton
                         bind:selection={selected.survey}
                         value={survey}
@@ -118,4 +125,21 @@
         color: var(--red);
     }
 
+    .wrapper {
+        flex-grow: 1;
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        grid-template-rows: min-content min-content;
+        gap: .5rem;
+    }
+
+    .output {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        gap: .5rem;
+        align-items: center;
+        padding: 0 1rem;
+    }
+
 </style>