From 893ce11acc4b3fcf7e74a713f66e6ee23586a29d Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Thu, 2 Nov 2023 00:01:14 -0400 Subject: [PATCH 01/21] Add persistentToggle composable. This can be used for persisting the toggled state of particular sections in the UI. --- client/src/composables/persistentToggle.ts | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 client/src/composables/persistentToggle.ts diff --git a/client/src/composables/persistentToggle.ts b/client/src/composables/persistentToggle.ts new file mode 100644 index 000000000000..6b9b414aea1a --- /dev/null +++ b/client/src/composables/persistentToggle.ts @@ -0,0 +1,28 @@ +import { type Ref, ref, watch } from "vue"; + +interface ToggleStateInterface { + toggled: Ref; + toggle: () => void; +} + +export function usePersistentToggle(uniqueId: string): ToggleStateInterface{ + const localStorageKey = `toggle-state-${uniqueId}`; + + // Retrieve the toggled state from localStorage if available, otherwise default to false + const toggled = ref(localStorage.getItem(localStorageKey) === "true"); + + // Watch for changes in the toggled state and persist them to localStorage + watch(toggled, (newVal: boolean) => { + localStorage.setItem(localStorageKey, String(newVal)); + }); + + // Expose a function for toggling state + const toggle = () => { + toggled.value = !toggled.value; + }; + + return { + toggled, + toggle, + }; +} From 129d3c24a6b0a18dc781f05563b392b9b245a848 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Mon, 6 Nov 2023 14:01:17 -0500 Subject: [PATCH 02/21] Add basic collapse to heading -- work on styling... --- client/src/components/Common/Heading.vue | 9 +++++++++ client/src/composables/persistentToggle.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue index 815680b6dc88..8454314c276c 100644 --- a/client/src/components/Common/Heading.vue +++ b/client/src/components/Common/Heading.vue @@ -14,10 +14,14 @@ interface Props { inline?: boolean; size?: "xl" | "lg" | "md" | "sm" | "text"; icon?: string | [string, string]; + collapsible?: boolean; + collapsed?: boolean; } const props = defineProps(); +defineEmits(["click"]); + const sizeClass = computed(() => { return `h-${props.size ?? "lg"}`; }); @@ -37,6 +41,10 @@ const element = computed(() => {
+
@@ -47,6 +55,7 @@ const element = computed(() => { :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']"> + diff --git a/client/src/composables/persistentToggle.ts b/client/src/composables/persistentToggle.ts index 6b9b414aea1a..154f4c2b4a42 100644 --- a/client/src/composables/persistentToggle.ts +++ b/client/src/composables/persistentToggle.ts @@ -5,7 +5,7 @@ interface ToggleStateInterface { toggle: () => void; } -export function usePersistentToggle(uniqueId: string): ToggleStateInterface{ +export function usePersistentToggle(uniqueId: string): ToggleStateInterface { const localStorageKey = `toggle-state-${uniqueId}`; // Retrieve the toggled state from localStorage if available, otherwise default to false From 75cbcab6df2f6d645b6064c9de4c21a2759f6e6f Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Mon, 6 Nov 2023 14:08:10 -0500 Subject: [PATCH 03/21] Swap AWSEstimate to use persistentToggle --- .../src/components/JobMetrics/AwsEstimate.vue | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/client/src/components/JobMetrics/AwsEstimate.vue b/client/src/components/JobMetrics/AwsEstimate.vue index da194e56a6d4..ae8e4a686609 100644 --- a/client/src/components/JobMetrics/AwsEstimate.vue +++ b/client/src/components/JobMetrics/AwsEstimate.vue @@ -1,6 +1,10 @@