Table: Datepicker, AutoComplete, Select Cell Editor #2387
Merged
Conversation
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
ElishaSamPeterPrabhu
changed the title
✅ Deploy Preview for moduswebcomponents ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…ble-date-cell-picker
…310/table-date-cell-picker
ElishaSamPeterPrabhu
changed the title
2 tasks
|
@ElishaSamPeterPrabhu Some observations:
Component:
|
coliff
changed the title
|
@ElishaSamPeterPrabhu I went over these changes again and this is what I think is needed before we can merge:
|
Have worked on all of the above suggestions Components._.Table.-.Inline.Editing.Storybook.-.Google.Chrome.2024-06-05.11-19-16.mp4 |
cjwinsor
requested changes
Jun 7, 2024
| @@ -86,6 +86,10 @@ import { createGuid } from '../../utils/utils'; | |||
| export class ModusTable { | |||
| @Element() element: HTMLElement; | |||
|
|
|||
| @Prop() editableCellId: string[] = []; | |||
| @Watch('editableCellId') onEditableCellIdsChange(newVal: string[]) { | |||
| console.log('editableCellIds', newVal); | |||
There was a problem hiding this comment.
Remove console.log, and was this editableCellId prop only used for debugging? If so, remove, otherwise we will need to discuss its purpose.
There was a problem hiding this comment.
Oops committed it by mistake, will remove it
| @@ -373,6 +377,7 @@ export class ModusTable { | |||
| this.setTableState(initialTableState); | |||
| this.onRowsExpandableChange(this.rowsExpandable); | |||
| this.initializeTable(); | |||
| console.log('editableCellId232s', this.editableCellId); | |||
There was a problem hiding this comment.
Removed
| @@ -25,28 +26,40 @@ import { ModusAutocompleteOption } from '../../../../modus-autocomplete/modus-au | |||
| }) | |||
| export class ModusTableCellEditor { | |||
| @Prop() args: ModusTableCellEditorArgs; | |||
| @Prop() value: string; | |||
| @Prop() dataType: string; | |||
| @Prop() value: any; | |||
There was a problem hiding this comment.
Don't use any, if we can't establish the type then use unknown
There was a problem hiding this comment.
Replaced with unknown
| @Prop() type: string; | ||
| @Prop() valueChange: (newValue: string) => void; | ||
| @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; | ||
|
|
||
| private editedValue: string; | ||
| private editedValue: any; |
There was a problem hiding this comment.
Don't use any, if we can't establish the type then use unknown
There was a problem hiding this comment.
Replaced with unknown
| private inputElement: HTMLElement; | ||
| private outsideClickListener: (event: any) => void; |
There was a problem hiding this comment.
Wouldn't this be of type MouseEvent
There was a problem hiding this comment.
Yes, changed
| }; | ||
| if (this.type == 'date') document.addEventListener('click', this.outsideClickListener); | ||
| } | ||
| disconnectedCallback(): void { |
There was a problem hiding this comment.
Ultimately if we use the @Listen then we won't need to have this.
There was a problem hiding this comment.
Replaced the callback logic with listen
| const args = this.args as ModusTableCellSelectEditorArgs; | ||
| const options = args?.options || []; | ||
| const optionsDisplayProp = args?.optionsDisplayProp || valueKey; | ||
| const selectedOption = options.find((option) => option[optionsDisplayProp] === this.value) as any; |
There was a problem hiding this comment.
Type would be unknown. Always be mindful of these lint errors and correct when they are seen. Avoid using any even when prototyping.
There was a problem hiding this comment.
Replaced with unknown
| size="large" | ||
| options={options} | ||
| onInputBlur={this.handleBlur} | ||
| onKeyDown={(e) => handleEnter(e, this.handleKeyDown)} | ||
| onValueChange={(e: CustomEvent<unknown>) => { | ||
| this.editedValue = e.detail[valueKey]; | ||
| if (this.dataType === 'badge') { | ||
| const { display, ...restProps } = e.detail as any; |
There was a problem hiding this comment.
Replaced with unknown
| const options = ((this.args as ModusTableCellDropdownEditorArgs)?.options || []) as ModusAutocompleteOption[] | string[]; | ||
| let options, selectedOption; | ||
| const args = this.args as ModusTableCellAutocompleteEditorArgs; | ||
| // const { noResultsFoundText, noResultsFoundSubtext, showNoResultsFoundMessage, showOptionsOnFocus } = args; |
There was a problem hiding this comment.
Removed
| {...this.getDefaultProps('Autocomplete input')} | ||
| include-search-icon="false" | ||
| size="medium" | ||
| //onClick={(e: MouseEvent) => e.stopPropagation()} |
There was a problem hiding this comment.
Removed
|
For the autocomplete focus issue: |
cjwinsor
approved these changes
Jun 7, 2024
This was referenced Jun 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
References
#2310 , #2311 , #2313
Type of change
How Has This Been Tested?
https://deploy-preview-2387--moduswebcomponents.netlify.app/
Checklist