reactivity fix for when you switch between views directly

systeminit · Jan 29, 2025 · beb6ba4 · beb6ba4
1 parent dae30e3
commit beb6ba4
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/app/web/src/components/ViewDetailsPanel.vue b/app/web/src/components/ViewDetailsPanel.vue
@@ -15,6 +15,7 @@
       >
         <div class="font-bold flex-1">Approval Requirements</div>
         <PillCounter
+          v-if="listReq.isSuccess && listReq.completed"
           class="flex-none font-bold"
           :count="requirementsCount"
           hideIfZero
@@ -23,26 +24,30 @@
       </div>
     </template>
 
-    <TreeForm v-if="requirementsCount > 0" :trees="requirementTrees" />
-    <div v-else class="flex flex-col gap-xs items-center">
-      <EmptyStateCard
-        iconName="customize"
-        primaryText="No Requirements For This View"
-        secondaryText="To add an approval requirement for this view, select the first user to be an approver from the dropdown below."
-      />
-      <UserSelectMenu class="w-full px-sm" @select="createRequirement" />
-    </div>
+    <template v-if="listReq.isSuccess && listReq.completed">
+      <TreeForm v-if="requirementsCount > 0" :trees="requirementTrees" />
+      <div v-else class="flex flex-col gap-xs items-center">
+        <EmptyStateCard
+          iconName="customize"
+          primaryText="No Requirements For This View"
+          secondaryText="To add an approval requirement for this view, select the first user to be an approver from the dropdown below."
+        />
+        <UserSelectMenu class="w-full px-sm" @select="createRequirement" />
+      </div>
+    </template>
+    <LoadingMessage v-else message="Loading..." :requestStatus="listReq" />
   </ScrollArea>
 </template>
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
 import {
+  LoadingMessage,
   PillCounter,
   ScrollArea,
   themeClasses,
 } from "@si/vue-lib/design-system";
-import { computed, onBeforeMount, PropType } from "vue";
+import { computed, PropType, watch } from "vue";
 import clsx from "clsx";
 import {
   ViewApprovalRequirementDefinition,
@@ -63,6 +68,8 @@ const authStore = useAuthStore();
 const changeSetsStore = useChangeSetsStore();
 const viewsStore = useViewsStore();
 
+const listReq = viewsStore.getRequestStatus("LIST_VIEW_APPROVAL_REQUIREMENTS");
+
 const props = defineProps({
   selectedView: { type: Object as PropType<ViewDescription>, required: true },
   selectedViewComponent: {
@@ -175,12 +182,20 @@ const requirementTrees = computed(() => {
   return trees;
 });
 
-onBeforeMount(() => {
+const refreshData = () => {
   viewsStore.LIST_VIEW_APPROVAL_REQUIREMENTS(props.selectedView.id);
   if (changeSetsStore.selectedWorkspacePk) {
     authStore.LIST_WORKSPACE_USERS(changeSetsStore.selectedWorkspacePk);
   }
-});
+};
+
+watch(
+  () => props.selectedView.id,
+  () => {
+    refreshData();
+  },
+  { immediate: true },
+);
 
 const workspaceUsersById = computed(() => authStore.workspaceUsers);