From 6b55e740d3f20e1b02a1e5cc3f47e6d5f185c080 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Wed, 20 May 2026 20:02:10 +0530
Subject: [PATCH 1/3] Add id prop to ProjectGroupPicker for labeling

Expose an optional id prop on ProjectGroupPicker and bind it to the internal input. Update usages across dashboard and workspace create/export pages to pass unique ids and restructure markup so labels use for="..." (replacing implicit label-wrapping with explicit labels and container divs). This improves accessibility by ensuring labels are correctly associated with the picker inputs; no functional behavior changes.
---
 components/ProjectGroupPicker.vue    |  3 ++-
 pages/dashboard.vue                  |  5 ++++-
 pages/workspace/[id]/export/tdei.vue |  9 ++++++---
 pages/workspace/create/blank.vue     | 13 +++++++++----
 pages/workspace/create/file.vue      | 10 ++++++----
 pages/workspace/create/tdei.vue      |  9 ++++++---
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 19eb4ec..ea4c154 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -2,6 +2,7 @@
   <div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
     <input
       v-model="searchText"
+      :id="props.id"
       type="text"
       class="form-select"
       :disabled="props.disabled"
@@ -88,7 +89,7 @@ import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
 import type { TdeiProjectGroupItem } from '~/types/tdei'
 
-const props = withDefaults(defineProps<{ disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
+const props = withDefaults(defineProps<{ id?: string; disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
   disabled: false,
 })
 
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 275291a..1411f8b 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -4,7 +4,10 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
+        <project-group-picker
+          id="ws_project_group_picker"
+          v-model="currentProjectGroup"
+        />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />
diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index 9d9e187..0a208b7 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -62,13 +62,16 @@
               Dataset Name
               <input v-model.trim="datasetName" class="form-control" />
             </label>
-            <label class="d-block mt-3">
-              Project Group
+            <div class="mt-3">
+              <label class="d-block" for="export_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="export_tdei_project_group"
                 v-model="workspace.tdeiProjectGroupId"
                 :options="eligibleProjectGroups"
               />
-            </label>
+            </div>
             <label class="d-block mt-3">
               Service
               <service-picker
diff --git a/pages/workspace/create/blank.vue b/pages/workspace/create/blank.vue
index 59173ba..f76f450 100644
--- a/pages/workspace/create/blank.vue
+++ b/pages/workspace/create/blank.vue
@@ -11,10 +11,15 @@
               <input v-model.trim="workspaceTitle" class="form-control" />
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
-              <project-group-picker v-model="projectGroupId" />
-            </label>
+            <div class="mb-3">
+              <label class="d-block" for="create_blank_project_group">
+                Project Group
+              </label>
+              <project-group-picker
+                id="create_blank_project_group"
+                v-model="projectGroupId"
+              />
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio v-model="datasetType" class="mb-3" />
diff --git a/pages/workspace/create/file.vue b/pages/workspace/create/file.vue
index 8b7d3a5..fe1cc00 100644
--- a/pages/workspace/create/file.vue
+++ b/pages/workspace/create/file.vue
@@ -16,14 +16,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_file_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_file_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio
@@ -109,4 +112,3 @@ async function create() {
   }
 }
 </script>
-
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index 1db82ef..461bcc5 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -20,14 +20,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_tdei_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <label v-if="!$route.query.tdeiRecordId" class="d-block mb-3">
               Dataset

From dc9132e5d789bc38f9eed22d11431c01450ca3db Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Wed, 20 May 2026 20:50:21 +0530
Subject: [PATCH 2/3] Add optional group-memory and picker fixes

Introduce a rememberSelection prop to ProjectGroupPicker (default false) to control persisting and showing cached project-group names. Update scroll hint logic (showScrollHint computed) and related class bindings. Only persist/load cached names when rememberSelection is enabled and refine selection initialization when options are passed. Fix ServicePicker selection logic to keep the current service if it still exists, otherwise pick the first or null. Wire remember-selection in dashboard, add a :key to the service-picker in the TDEI exporter, and make the fetched workspace reactive to ensure proper updates.
---
 components/ProjectGroupPicker.vue    | 22 ++++++++++++++--------
 components/ServicePicker.vue         |  7 ++++---
 pages/dashboard.vue                  |  1 +
 pages/workspace/[id]/export/tdei.vue |  5 ++++-
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index ea4c154..b87250b 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -23,7 +23,7 @@
             Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
             <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
-          <template v-else-if="!hasMore">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
+          <template v-else-if="!showScrollHint">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
           <template v-else>
             Showing first {{ projectGroups.length }} results
             <span v-if="!loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
@@ -33,7 +33,7 @@
       </div>
       <div
         class="pg-list-wrap"
-        :class="{ 'pg-has-more': hasMore && !loading }"
+        :class="{ 'pg-has-more': showScrollHint && !loading }"
         ref="listRef"
         @scroll="onScroll"
       >
@@ -89,8 +89,9 @@ import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
 import type { TdeiProjectGroupItem } from '~/types/tdei'
 
-const props = withDefaults(defineProps<{ id?: string; disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
+const props = withDefaults(defineProps<{ id?: string; disabled?: boolean; options?: TdeiProjectGroupItem[]; rememberSelection?: boolean }>(), {
   disabled: false,
+  rememberSelection: false,
 })
 
 const model = defineModel({ required: true })
@@ -105,6 +106,7 @@ const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
 
 const projectGroups = computed(() => props.options ?? fetchedGroups.value)
+const showScrollHint = computed(() => !props.options && hasMore.value)
 
 let pageNo = 1
 const hasMore = ref(true)
@@ -144,7 +146,9 @@ const loadGroups = async (reset = false) => {
     if (total !== undefined) totalCount.value = total
     fetchedGroups.value.push(...newGroups)
     const selected = newGroups.find(g => g.tdei_project_group_id === model.value)
-    if (selected) persistCachedName(selected.tdei_project_group_id, selected.name)
+    if (selected && props.rememberSelection) {
+      persistCachedName(selected.tdei_project_group_id, selected.name)
+    }
 
     if (newGroups.length < pageSize) {
       hasMore.value = false
@@ -205,7 +209,9 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    persistCachedName(pg.tdei_project_group_id, pg.name)
+    if (props.rememberSelection) {
+      persistCachedName(pg.tdei_project_group_id, pg.name)
+    }
   }
 }
 
@@ -296,7 +302,7 @@ watch(
   (groups) => {
     if (groups.length > 0) {
       const pgId = model.value as string | undefined
-      if (!pgId || !groups.some(pg => pg.tdei_project_group_id === pgId)) {
+      if (!pgId || (props.options && !groups.some(pg => pg.tdei_project_group_id === pgId))) {
         model.value = groups[0]?.tdei_project_group_id
       }
       const selected = groups.find(pg => pg.tdei_project_group_id === model.value)
@@ -311,7 +317,7 @@ watch(
 
 onMounted(async () => {
   // Show cached name immediately before the API call completes
-  if (model.value && loadCachedName(model.value as string)) {
+  if (props.rememberSelection && model.value && loadCachedName(model.value as string)) {
     applyCachedName()
   }
 
@@ -323,7 +329,7 @@ onMounted(async () => {
       if (selected) {
         searchText.value = selected.name
         selectedGroupName.value = selected.name
-      } else if (model.value && loadCachedName(model.value as string)) {
+      } else if (props.rememberSelection && model.value && loadCachedName(model.value as string)) {
         // Group is beyond page 1 — use the cached name for display
         applyCachedName()
       } else if (model.value) {
diff --git a/components/ServicePicker.vue b/components/ServicePicker.vue
index e361ff4..6d1fbfc 100644
--- a/components/ServicePicker.vue
+++ b/components/ServicePicker.vue
@@ -37,10 +37,11 @@ async function refreshServices() {
   services.value = (await tdeiUserClient.getMyServices(props.projectGroupId, props.serviceType))
     .sort((a, b) => a.name.localeCompare(b.name));
 
-  if (!model.value && services.length > 0) {
-    model.value = services[0].id
+  const selectedServiceStillExists = services.value.some(s => s.id === model.value)
+
+  if (!selectedServiceStillExists) {
+    model.value = services.value[0]?.id ?? null
   }
 }
 
 </script>
-
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 1411f8b..2394cb5 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -7,6 +7,7 @@
         <project-group-picker
           id="ws_project_group_picker"
           v-model="currentProjectGroup"
+          remember-selection
         />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index 0a208b7..95415ad 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -75,6 +75,7 @@
             <label class="d-block mt-3">
               Service
               <service-picker
+                :key="workspace.tdeiProjectGroupId"
                 v-model="workspace.tdeiServiceId"
                 :project-group-id="workspace.tdeiProjectGroupId"
                 :service-type="workspace.type"
@@ -126,11 +127,13 @@ const exporter = new TdeiExporter(tdeiClient, osmClient, context);
 const route = useRoute();
 const workspaceId = Number(route.params.id);
 
-const [workspace, { items: myProjectGroups }] = await Promise.all([
+const [workspaceData, { items: myProjectGroups }] = await Promise.all([
   workspacesClient.getWorkspace(workspaceId),
   tdeiUserClient.getMyProjectGroups(1, '', 10000),
 ]);
 
+const workspace = reactive(workspaceData);
+
 const dataGeneratorRole = `${workspace.type}_data_generator`;
 const eligibleProjectGroups = myProjectGroups.filter(pg =>
   pg.roles.includes('poc') || pg.roles.includes(dataGeneratorRole),

From cfa0bc3d11a325e4fbbf78bc9e988af8031ff0ac Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Thu, 21 May 2026 10:22:16 +0530
Subject: [PATCH 3/3] Remove :key binding from service-picker

Remove the :key="workspace.tdeiProjectGroupId" binding from the service-picker in pages/workspace/[id]/export/tdei.vue. This prevents unnecessary component remounts when the project group id changes, preserving the picker's internal state and avoiding re-initialization or UI flicker.
---
 pages/workspace/[id]/export/tdei.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/workspace/[id]/export/tdei.vue b/pages/workspace/[id]/export/tdei.vue
index 95415ad..e6ba869 100644
--- a/pages/workspace/[id]/export/tdei.vue
+++ b/pages/workspace/[id]/export/tdei.vue
@@ -75,7 +75,6 @@
             <label class="d-block mt-3">
               Service
               <service-picker
-                :key="workspace.tdeiProjectGroupId"
                 v-model="workspace.tdeiServiceId"
                 :project-group-id="workspace.tdeiProjectGroupId"
                 :service-type="workspace.type"