merge: #2308

2308: feat(web): split asset list and show per-asset functions below assets r=zacharyhamm a=zacharyhamm Splits the asset list panel to add a list of functions connected to each asset. Currently they will open the function in the functions screen (function tabs on asset screen and routing to follow) Co-authored-by: Zachary Hamm <[email protected]>
systeminit · Jun 8, 2023 · 7cb2244 · 7cb2244
2 parents cb00ba0 + 5af9314
commit 7cb2244
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 51 deletions.
diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <ScrollArea v-if="assetStore.selectedAssetId">
+      <template #top>
+        <SidebarSubpanelTitle class="border-t-0 text-center">
+          Asset Functions
+        </SidebarSubpanelTitle>
+      </template>
+
+      <ul class="overflow-y-auto min-h-[200px]">
+        <li
+          v-for="func in assetStore.assetsById[assetStore.selectedAssetId]
+            ?.funcs ?? []"
+          :key="func.id"
+        >
+          <SiFuncListItem :func="func" color="#921ed6" />
+        </li>
+      </ul>
+    </ScrollArea>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ScrollArea } from "@si/vue-lib/design-system";
+import { useAssetStore } from "@/store/asset.store";
+import SiFuncListItem from "@/components/SiFuncListItem.vue";
+import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
+
+const assetStore = useAssetStore();
+
+defineProps<{
+  assetId?: string;
+}>();
+</script>
diff --git a/app/web/src/components/FuncEditor/FuncListPanel.vue b/app/web/src/components/FuncEditor/FuncListPanel.vue
@@ -49,11 +49,7 @@
           </template>
           <template #default>
             <li v-for="func in funcsByVariant[variant] ?? []" :key="func.id">
-              <SiFuncListItem
-                :func="func"
-                color="#921ed6"
-                @click="routeToFunc(func.id)"
-              />
+              <SiFuncListItem :func="func" color="#921ed6" />
             </li>
           </template>
         </SiCollapsible>

diff --git a/app/web/src/components/SiPanelResizer.vue b/app/web/src/components/SiPanelResizer.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, PropType, ref } from "vue";
+import { computed, onBeforeUnmount, PropType, ref, reactive } from "vue";
 import clsx from "clsx";
 import { Icon } from "@si/vue-lib/design-system";
 
@@ -120,3 +120,29 @@ onBeforeUnmount(() => {
   window.removeEventListener("mouseup", onMouseUp);
 });
 </script>
+
+<script lang="ts">
+// Handles the most common resizing case
+export const defaultSizer = (defaultHeight: number, minHeight: number) => {
+  const sizer = reactive({
+    height: defaultHeight,
+    beginResizeValue: 0,
+
+    onResizeStart() {
+      sizer.beginResizeValue = sizer.height;
+    },
+
+    onResizeMove(delta: number) {
+      const adjustedDetla = -delta;
+      const newHeight = sizer.beginResizeValue + adjustedDetla;
+
+      sizer.height = Math.max(newHeight, minHeight);
+    },
+
+    resetSize() {
+      sizer.height = defaultHeight;
+    },
+  });
+  return sizer;
+};
+</script>
diff --git a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
@@ -2,12 +2,32 @@
 <template>
   <SiPanel remember-size-key="func-picker" side="left" :min-size="300">
     <div class="flex flex-col h-full">
-      <ChangeSetPanel
-        class="border-b-2 dark:border-neutral-500 mb-2 flex-shrink-0"
+      <div
+        :style="{ height: `${topSplitSizer.height}px` }"
+        class="relative flex flex-col flex-shrink-0"
+      >
+        <ChangeSetPanel
+          class="border-b-2 dark:border-neutral-500 mb-2 flex-shrink-0"
+        />
+
+        <CustomizeTabs tab-content-slug="assets">
+          <AssetListPanel :asset-id="assetId" />
+        </CustomizeTabs>
+      </div>
+
+      <SiPanelResizer
+        panel-side="bottom"
+        :style="{ top: `${topSplitSizer.height}px` }"
+        class="w-full"
+        @resize-start="topSplitSizer.onResizeStart"
+        @resize-move="topSplitSizer.onResizeMove"
+        @resize-reset="topSplitSizer.resetSize"
       />
-      <CustomizeTabs tab-content-slug="assets">
-        <AssetListPanel :asset-id="assetId" />
-      </CustomizeTabs>
+      <div
+        class="h-full border-t dark:border-neutral-600 relative z-20 p-8 dark:bg-neutral-800 bg-shade-0"
+      >
+        <AssetFuncListPanel />
+      </div>
     </div>
   </SiPanel>
   <div
@@ -26,16 +46,26 @@
 import * as _ from "lodash-es";
 import { watch } from "vue";
 import { useAssetStore } from "@/store/asset.store";
+import SiPanelResizer, { defaultSizer } from "@/components/SiPanelResizer.vue";
 import ChangeSetPanel from "../ChangeSetPanel.vue";
 import SiPanel from "../SiPanel.vue";
 import AssetListPanel from "../AssetListPanel.vue";
 import CustomizeTabs from "../CustomizeTabs.vue";
 import AssetEditor from "../AssetEditor.vue";
 import AssetDetailsPanel from "../AssetDetailsPanel.vue";
+import AssetFuncListPanel from "../AssetFuncListPanel.vue";
 
 const assetStore = useAssetStore();
 const loadAssetsReqStatus = assetStore.getRequestStatus("LOAD_ASSET_LIST");
 
+const TOP_SPLIT_DEFAULT_HEIGHT = 700;
+const TOP_SPLIT_MIN_HEIGHT = 150;
+
+const topSplitSizer = defaultSizer(
+  TOP_SPLIT_DEFAULT_HEIGHT,
+  TOP_SPLIT_MIN_HEIGHT,
+);
+
 const props = defineProps<{
   assetId?: string;
   workspacePk: string;

diff --git a/app/web/src/components/Workspace/WorkspaceModelAndViewNew.vue b/app/web/src/components/Workspace/WorkspaceModelAndViewNew.vue
@@ -299,7 +299,7 @@
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
-import { computed, ref, watch, reactive } from "vue";
+import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import plur from "plur";
 import clsx from "clsx";
@@ -328,7 +328,7 @@ import { useStatusStore } from "@/store/status.store";
 import { Recommendation, useFixesStore } from "@/store/fixes.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import RecommendationSprite from "@/components/RecommendationSprite2.vue";
-import SiPanelResizer from "@/components/SiPanelResizer.vue";
+import SiPanelResizer, { defaultSizer } from "@/components/SiPanelResizer.vue";
 import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
 import { nilId } from "@/utils/nilId";
 import GenericDiagram from "../GenericDiagram/GenericDiagram.vue";
@@ -913,45 +913,15 @@ const SUB_PANEL_DEFAULT_HEIGHT = 350;
 const SUB_PANEL_MIN_HEIGHT = 150;
 
 // TODO: Move panels to their own components after they stabilize a bit
-const topRightPanel = reactive({
-  height: SUB_PANEL_DEFAULT_HEIGHT,
-  beginResizeValue: 0,
-
-  onResizeStart() {
-    topRightPanel.beginResizeValue = topRightPanel.height;
-  },
-
-  onResizeMove(delta: number) {
-    const adjustedDelta = -delta;
-    const newHeight = topRightPanel.beginResizeValue + adjustedDelta;
-
-    topRightPanel.height = Math.max(newHeight, SUB_PANEL_MIN_HEIGHT);
-  },
-
-  resetSize() {
-    topRightPanel.height = SUB_PANEL_DEFAULT_HEIGHT;
-  },
-});
-
-const topLeftPanel = reactive({
-  height: SUB_PANEL_DEFAULT_HEIGHT,
-  beginResizeValue: 0,
-
-  onResizeStart() {
-    topLeftPanel.beginResizeValue = topLeftPanel.height;
-  },
-
-  onResizeMove(delta: number) {
-    const adjustedDelta = -delta;
-    const newHeight = topLeftPanel.beginResizeValue + adjustedDelta;
-
-    topLeftPanel.height = Math.max(newHeight, SUB_PANEL_MIN_HEIGHT);
-  },
+const topRightPanel = defaultSizer(
+  SUB_PANEL_DEFAULT_HEIGHT,
+  SUB_PANEL_MIN_HEIGHT,
+);
 
-  resetSize() {
-    topLeftPanel.height = SUB_PANEL_DEFAULT_HEIGHT;
-  },
-});
+const topLeftPanel = defaultSizer(
+  SUB_PANEL_DEFAULT_HEIGHT,
+  SUB_PANEL_MIN_HEIGHT,
+);
 </script>
 
 <style lang="less" scoped>