diff --git a/apps/desktop/src/components/redis/RedisValueViewer.vue b/apps/desktop/src/components/redis/RedisValueViewer.vue index 9a48642cdb..b53450b7be 100644 --- a/apps/desktop/src/components/redis/RedisValueViewer.vue +++ b/apps/desktop/src/components/redis/RedisValueViewer.vue @@ -55,10 +55,16 @@ const savingMember = ref(false); const memberEditValue = ref(""); const memberDetailSheetWidth = ref(420); const isResizingMemberSheet = ref(false); +const hashTableRef = ref(null); +const hashFieldWidth = ref(280); +const isResizingHashColumns = ref(false); const selectedMemberDetail = computed(() => formatRedisMemberDetail(selectedMemberRaw.value)); const selectedMemberJsonHtml = computed(() => selectedMemberDetail.value.format === "json" ? highlightRedisJsonDetail(selectedMemberDetail.value.text) : "", ); +const hashGridStyle = computed(() => ({ + gridTemplateColumns: `${hashFieldWidth.value}px minmax(12rem, 1fr) 84px`, +})); const selectedMemberCanEdit = computed( () => selectedMemberContext.value != null && canEditRedisMemberDetail(selectedMemberContext.value.kind), ); @@ -74,6 +80,8 @@ const pendingDelete = ref(null); let memberSheetResizeStartX = 0; let memberSheetResizeStartWidth = 0; +let hashResizeStartX = 0; +let hashResizeStartWidth = 0; type RedisMemberContext = | { kind: "list"; index: number } @@ -252,6 +260,33 @@ function startResizeMemberSheet(event: PointerEvent) { window.addEventListener("pointerup", stopResizeMemberSheet); } +function clampHashFieldWidth(width: number) { + const containerWidth = hashTableRef.value?.clientWidth ?? 900; + const min = 120; + const max = Math.max(min, containerWidth - 220); + return Math.min(max, Math.max(min, width)); +} + +function stopResizeHashColumns() { + isResizingHashColumns.value = false; + window.removeEventListener("pointermove", resizeHashColumns); + window.removeEventListener("pointerup", stopResizeHashColumns); +} + +function resizeHashColumns(event: PointerEvent) { + if (!isResizingHashColumns.value) return; + const delta = event.clientX - hashResizeStartX; + hashFieldWidth.value = clampHashFieldWidth(hashResizeStartWidth + delta); +} + +function startResizeHashColumns(event: PointerEvent) { + isResizingHashColumns.value = true; + hashResizeStartX = event.clientX; + hashResizeStartWidth = hashFieldWidth.value; + window.addEventListener("pointermove", resizeHashColumns); + window.addEventListener("pointerup", stopResizeHashColumns); +} + function startEditMember() { memberEditValue.value = selectedMemberDetail.value.text; isEditingMember.value = true; @@ -449,7 +484,10 @@ function formatValue(val: any): string { } onMounted(load); -onBeforeUnmount(stopResizeMemberSheet); +onBeforeUnmount(() => { + stopResizeMemberSheet(); + stopResizeHashColumns(); +});