-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #10293 The Table Editor Widget allows adding rows and columns, editing cells and renaming columns. [Screencast from 2024-08-07 13-17-37.webm](https://github.com/user-attachments/assets/d2e708b5-6516-4107-bc17-f018e455c111) # Important Notes * The parts of Table Visualization which were useful for the widget were put in vue component. On this occasion, we use aggrid vue.
- Loading branch information
Showing
16 changed files
with
1,404 additions
and
245 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
app/gui2/src/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <script lang="ts"> | ||
| import type { IHeaderParams } from 'ag-grid-community' | ||
| import { ref, watch } from 'vue' | ||
| /** Parameters recognized by this header component. | ||
| * | ||
| * They are set through `headerComponentParams` option in AGGrid column definition. | ||
| */ | ||
| export interface HeaderParams { | ||
| /** Setter called when column name is changed by the user. */ | ||
| nameSetter?: (newName: string) => void | ||
| /** Column is virtual if it is not represented in the AST. Such column might be used | ||
| * to create new one. | ||
| */ | ||
| virtualColumn?: boolean | ||
| onHeaderEditingStarted?: (stop: (cancel: boolean) => void) => void | ||
| onHeaderEditingStopped?: () => void | ||
| } | ||
| </script> | ||
|
|
||
| <script setup lang="ts"> | ||
| const props = defineProps<{ | ||
| params: IHeaderParams & HeaderParams | ||
| }>() | ||
| const editing = ref(false) | ||
| const inputElement = ref<HTMLInputElement>() | ||
| watch(editing, (newVal, oldVal) => { | ||
| if (newVal) { | ||
| props.params.onHeaderEditingStarted?.((cancel: boolean) => { | ||
| if (cancel) editing.value = false | ||
| else acceptNewName() | ||
| }) | ||
| } else { | ||
| props.params.onHeaderEditingStopped?.() | ||
| } | ||
| }) | ||
| watch(inputElement, (newVal, oldVal) => { | ||
| if (newVal != null && oldVal == null) { | ||
| // Whenever input field appears, focus and select text | ||
| newVal.focus() | ||
| newVal.select() | ||
| } | ||
| }) | ||
| function acceptNewName() { | ||
| if (inputElement.value == null) { | ||
| console.error('Tried to accept header new name without input element!') | ||
| return | ||
| } | ||
| props.params.nameSetter?.(inputElement.value.value) | ||
| editing.value = false | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="ag-cell-label-container" role="presentation" @pointerdown.stop @click.stop> | ||
| <div class="ag-header-cell-label" role="presentation"> | ||
| <input | ||
| v-if="editing" | ||
| ref="inputElement" | ||
| class="ag-input-field-input ag-text-field-input" | ||
| :value="params.displayName" | ||
| @change="acceptNewName()" | ||
| @keydown.arrow-left.stop | ||
| @keydown.arrow-right.stop | ||
| @keydown.arrow-up.stop | ||
| @keydown.arrow-down.stop | ||
| /> | ||
| <span | ||
| v-else | ||
| class="ag-header-cell-text" | ||
| :class="{ virtualColumn: params.virtualColumn === true }" | ||
| @click="editing = params.nameSetter != null" | ||
| >{{ params.displayName }}</span | ||
| > | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .virtualColumn { | ||
| color: rgba(0, 0, 0, 0.5); | ||
| } | ||
| </style> |
Oops, something went wrong.