Merge pull request #2516 from threefoldtech/development_update_filter…

…s_ui Move filters to side instead of top
threefoldtech · Apr 3, 2024 · ac00f84 · ac00f84
2 parents 561dfe6 + 14dfc8e
commit ac00f84
Show file tree

Hide file tree

Showing 9 changed files with 683 additions and 454 deletions.
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -177,7 +177,7 @@
                 @click="openSidebar = true"
                 icon="mdi-menu"
                 variant="tonal"
-                class="mr-2"
+                class="mr-2 mb-4"
               />
             </div>
 
@@ -214,11 +214,28 @@ const navbarConfig = ref();
 
 const hasGrid = computed(() => !!gridStore.grid);
 
+// eslint-disable-next-line no-undef
+const permanent = ref(window.innerWidth > 980);
+const openSidebar = ref(permanent.value);
+
+function setSidebarOnResize() {
+  permanent.value =
+    window.innerWidth >
+    ($route.meta && "sidebarBreakpoint" in $route.meta && typeof $route.meta["sidebarBreakpoint"] === "number"
+      ? $route.meta.sidebarBreakpoint
+      : 980);
+  openSidebar.value = permanent.value;
+}
+
+window.addEventListener("resize", setSidebarOnResize);
+
 watch(
   () => $route.meta,
   meta => {
     (document.title = "Threefold Dashboard" + (meta && "title" in meta ? ` | ${meta.title}` : ``)),
       (navbarConfig.value = meta.navbarConfig);
+
+    setSidebarOnResize();
   },
 );
 function navigateToHome() {
@@ -396,10 +413,6 @@ const routes: AppRoute[] = [
   },
 ];
 
-// eslint-disable-next-line no-undef
-const permanent = window.innerWidth > 980;
-const openSidebar = ref(permanent);
-
 const baseUrl = import.meta.env.BASE_URL;
 
 function clickHandler({ route, url }: AppRouteItem): void {

diff --git a/packages/playground/src/components/filters/TfFilter.vue b/packages/playground/src/components/filters/TfFilter.vue
@@ -21,7 +21,7 @@ import { useRouter } from "vue-router";
 import type { AsyncRule, SyncRule } from "../input_validator.vue";
 import { useFiltersContainerService } from "./TfFiltersContainer.vue";
 
-const colProps = { class: "py-2 px-4", cols: 12, md: 6, lg: 3 };
+const colProps = { class: "tf-filter-item py-1", cols: 12 };
 
 function normalizeValue(v: string) {
   if (v === "true") return true;
@@ -91,3 +91,9 @@ export default {
   },
 };
 </script>
+
+<style>
+.tf-filter-item .v-label {
+  font-size: 14px !important;
+}
+</style>
diff --git a/packages/playground/src/components/filters/TfFiltersContainer.vue b/packages/playground/src/components/filters/TfFiltersContainer.vue
@@ -1,65 +1,75 @@
 <template>
-  <VExpansionPanels :model-value="[0]">
-    <VExpansionPanel eager>
-      <VExpansionPanelTitle class="text-h6"> Filters </VExpansionPanelTitle>
-      <VExpansionPanelText eager>
-        <VForm :disabled="loading">
+  <VCard>
+    <VCardTitle
+      class="d-flex align-center"
+      :style="[collapsible ? { cursor: 'pointer' } : {}]"
+      @click="collapsible ? (filterOpened = !filterOpened) : undefined"
+    >
+      <span>Filters</span>
+      <VSpacer />
+      <VBtn
+        variant="outlined"
+        :disabled="loading || !valid || empty"
+        @click.stop="clear"
+        text="Clear"
+        density="compact"
+      />
+      <VBtn
+        variant="outlined"
+        color="primary"
+        density="compact"
+        :disabled="!valid || !changed"
+        @click.stop="apply"
+        text="Apply"
+        :loading="loading"
+        class="mx-2"
+      />
+      <VBtn
+        :icon="filterOpened ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        density="compact"
+        variant="flat"
+        v-if="collapsible"
+      />
+    </VCardTitle>
+
+    <VDivider />
+
+    <VRow no-gutters v-show="valid && (changed || (!loading && !empty))">
+      <VAlert color="info" variant="tonal" class="rounded-0">
+        <span>
+          {{ changed ? "Filter options were updated but not applied." : "" }} Click
+          <VCard
+            class="d-inline pa-1"
+            v-text="changed ? 'Apply' : 'Clear'"
+            flat
+            :color="$vuetify.theme.global.name === 'light' ? 'info' : undefined"
+          />
+          {{ changed ? "in order to reload your data." : "to reset your selected filters." }}
+        </span>
+      </VAlert>
+    </VRow>
+
+    <VCardText :style="{ maxHeight: '750px', overflowY: 'auto' }" :class="{ 'pa-0': collapsible && !filterOpened }">
+      <VExpandTransition mode="in-out">
+        <VForm :disabled="loading" v-show="!collapsible || filterOpened">
           <FormValidator valid-on-init v-model="valid">
             <VContainer fluid>
               <VRow no-gutters>
                 <slot />
               </VRow>
-
-              <VRow class="mb-4" no-gutters v-show="valid && (changed || (!loading && !empty))">
-                <VAlert type="info" variant="tonal">
-                  <span>
-                    {{ changed ? "Filter options were updated but not applied." : "" }} Click
-                    <VCard
-                      class="d-inline pa-1"
-                      v-text="changed ? 'Apply' : 'Clear'"
-                      flat
-                      :color="$vuetify.theme.global.name === 'light' ? 'info' : undefined"
-                    />
-                    {{ changed ? "in order to reload your data." : "to reset your selected filters." }}
-                  </span>
-                </VAlert>
-              </VRow>
-
-              <VRow no-gutters>
-                <VDivider />
-              </VRow>
-            </VContainer>
-
-            <VContainer fluid>
-              <VRow no-gutters>
-                <VSpacer />
-                <VBtn
-                  variant="outlined"
-                  :disabled="loading || !valid || empty"
-                  @click="clear"
-                  text="Clear"
-                  class="mr-2"
-                />
-                <VBtn
-                  variant="outlined"
-                  color="primary"
-                  :disabled="!valid || !changed"
-                  @click="apply"
-                  text="Apply"
-                  :loading="loading"
-                />
-              </VRow>
             </VContainer>
           </FormValidator>
         </VForm>
-      </VExpansionPanelText>
-    </VExpansionPanel>
-  </VExpansionPanels>
+      </VExpandTransition>
+    </VCardText>
+  </VCard>
 </template>
 
 <script lang="ts">
+import { watch } from "vue";
+import { onUnmounted } from "vue";
 import { computed, type ComputedRef, inject, onMounted, provide, ref } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 const key = Symbol("key:filters-container");
 
@@ -87,6 +97,7 @@ export default {
   },
   setup(_, ctx) {
     const router = useRouter();
+    const route = useRoute();
     const filters = ref(new Map<string, ComputedRef<FilterService>>());
 
     const valid = ref(false);
@@ -134,7 +145,20 @@ export default {
       ctx.emit("apply");
     }
 
-    return { empty, changed, clear, apply, valid };
+    const collapsible = ref(false);
+    const filterOpened = ref(true);
+
+    const breakpoint = route.meta.filtersCollapsibleBreakpoint as number;
+
+    function onResize() {
+      collapsible.value = breakpoint > window.innerWidth;
+    }
+
+    onMounted(() => typeof breakpoint === "number" && window.addEventListener("resize", onResize));
+    onUnmounted(() => typeof breakpoint === "number" && window.removeEventListener("resize", onResize));
+    typeof breakpoint === "number" && onResize();
+
+    return { empty, changed, clear, apply, valid, collapsible, filterOpened };
   },
 };
 </script>
diff --git a/packages/playground/src/components/filters/TfFiltersLayout.vue b/packages/playground/src/components/filters/TfFiltersLayout.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="tf-layout-container d-flex">
+    <div :style="{ width }">
+      <slot name="filters" />
+    </div>
+    <div :style="{ marginLeft: '16px', width: `calc(100% - 16px - ${width})` }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+const WIDTH_SIZE = 300;
+
+export default {
+  name: "TfFiltersLayout",
+  setup() {
+    return { width: WIDTH_SIZE + "px" };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <VCard
-    class="rounded-0 w-100 pb-3"
+    class="tf-node-card rounded-0 w-100 pb-3"
     :class="{ 'selected-node': status !== 'Init' }"
     :color="
       status === 'Valid'
@@ -70,7 +70,7 @@
 
     <template #append>
       <template v-if="node">
-        <div class="d-flex">
+        <div class="d-flex align-center">
           <VTooltip
             :text="dedicated ? 'This node is dedicated for one user only' : 'Multiple users can deploy on this node'"
             location="top"
@@ -150,7 +150,7 @@
 
     <template #text>
       <VRow>
-        <VCol>
+        <VCol class="tf-node-resource">
           <ResourceDetails
             name="CPU"
             :used="node?.used_resources.cru ?? 0"
@@ -159,7 +159,7 @@
             :cpuType="dmi?.processor[0]?.version"
           />
         </VCol>
-        <VCol>
+        <VCol class="tf-node-resource">
           <ResourceDetails
             name="Memory"
             :used="node?.used_resources.mru ?? 0"
@@ -171,15 +171,15 @@
       </VRow>
 
       <VRow>
-        <VCol>
+        <VCol class="tf-node-resource">
           <ResourceDetails
             name="SSD Disks"
             :used="node?.used_resources.sru ?? 0"
             :total="node?.total_resources.sru ?? 0"
             :text="sruText"
           />
         </VCol>
-        <VCol>
+        <VCol class="tf-node-resource">
           <ResourceDetails
             name="HDD Disks"
             :used="node?.used_resources.hru ?? 0"

diff --git a/packages/playground/src/components/nodes_table.vue b/packages/playground/src/components/nodes_table.vue
@@ -3,6 +3,7 @@
     <v-row>
       <v-col>
         <v-data-table-server
+          height="750px"
           :loading="loading"
           loading-text="Loading nodes..."
           :headers="headers"

diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
@@ -17,6 +17,8 @@ export interface RouteMeta {
   info?: InfoMeta;
   publicPath?: boolean;
   requireSSH?: boolean;
+  sidebarBreakpoint?: number;
+  filtersCollapsibleBreakpoint?: number;
 }
 
 /**
@@ -403,7 +405,7 @@ function createTFFarmsRoutes(): RouteRecordRaw[] {
         {
           path: DashboardRoutes.Farms.FarmFinder,
           component: () => import("@/views/farms.vue"),
-          meta: { title: "Farm Finder", publicPath: true },
+          meta: { title: "Farm Finder", publicPath: true, sidebarBreakpoint: 1000, filtersCollapsibleBreakpoint: 1350 },
         },
         {
           path: DashboardRoutes.Farms.Simulator,
@@ -475,7 +477,7 @@ function createDeployRoutes(): RouteRecordRaw[] {
         {
           path: DashboardRoutes.Deploy.NodeFinder,
           component: () => import("@/views/nodes.vue"),
-          meta: { title: "Nodes", publicPath: true },
+          meta: { title: "Nodes", publicPath: true, sidebarBreakpoint: 1150, filtersCollapsibleBreakpoint: 850 },
         },
         {
           path: DashboardRoutes.Deploy.VirtualMachines,