Skip to content

Commit

Permalink
Fixed issue when setting value
Browse files Browse the repository at this point in the history
  • Loading branch information
v.sanchez authored and v.sanchez committed May 2, 2021
1 parent 1b009fe commit 64f211e
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 34 deletions.
78 changes: 47 additions & 31 deletions MultiselectRecordsEntity/MultiselectRecords.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ import { ScrollablePane, ScrollbarVisibility } from '@fluentui/react/lib/Scrolla
import { Sticky, StickyPositionType } from '@fluentui/react/lib/Sticky';

const MultiselectRecords = (props: IMultiselectProps) => {
const context = props.context;
let temporarySelectedItems: [] | any = [];
const refSearchInput = useRef(null);
const listRef = useRef(null);
const clearIcon: IIconProps = { iconName: 'Clear' };
const acceptIcon: IIconProps = { iconName: 'Accept', styles: { root: { color: 'white' } } };
const searchIcon: IIconProps = { iconName: 'Search' };

let timeout: any = 0;
initializeIcons();
// STATE
Expand Down Expand Up @@ -62,6 +63,11 @@ const MultiselectRecords = (props: IMultiselectProps) => {
setErrorMessage(errorMessageText);
}, [isError])

useEffect(() => {

setTextFieldValue(props.inputValue || "")
}, [props.inputValue])

// FUNCTIONS
const getRecordsFromTextField = async () => {
let filter = `$filter=`;
Expand All @@ -76,7 +82,7 @@ const MultiselectRecords = (props: IMultiselectProps) => {
}
filter = filter.substring(0, filter.length - 4);
const addFilter = filter == "$filter=" ? "" : `${filter}`;
const recordsRetrieved: any = await Xrm.WebApi.retrieveMultipleRecords(props.logicalName, `?${addFilter}`)
const recordsRetrieved: any = await context.webAPI.retrieveMultipleRecords(props.logicalName, `?${addFilter}`)
return recordsRetrieved;
}

Expand Down Expand Up @@ -119,15 +125,28 @@ const MultiselectRecords = (props: IMultiselectProps) => {
}

}
const setItemsFromTextFieldValue = () => {
let valuesInTheTextField: any = []
if (textFieldValue != null && textFieldValue != "" && textFieldValue != "[]") {
let textFieldTemp = JSON.parse(textFieldValue);
for (var item of textFieldTemp) {
valuesInTheTextField.push(JSON.stringify(item));
const setItemsFromTextFieldValue = async () => {
debugger
try {
let valuesInTheTextField: any = []
if (textFieldValue != null && textFieldValue != "" && textFieldValue != "[]") {
let textFieldTemp = JSON.parse(textFieldValue);
for (var item of textFieldTemp) {
valuesInTheTextField.push(JSON.stringify(item));
}
} else {
if (textFieldValue == "[]") {
setTextFieldValue("");
props.eventOnChangeValue("");
}
}
let itemsThatHaveBeenSelected = await getRecordsFromTextField();
itemsThatHaveBeenSelected = itemsThatHaveBeenSelected == null ? [] : itemsThatHaveBeenSelected.entities;
setSelectedItems(itemsThatHaveBeenSelected)
setMyItems(valuesInTheTextField);
} catch (e) {
console.log(e);
}
setMyItems(valuesInTheTextField);
}

const selectRecordItemsAndPushThem = () => {
Expand Down Expand Up @@ -164,20 +183,24 @@ const MultiselectRecords = (props: IMultiselectProps) => {
const onClickRow = async (item: any, event: React.FocusEvent<HTMLElement>) => {
const rowTarget: any = event.currentTarget
const row: any = rowTarget.firstElementChild.classList;
let selectedItemsCopy: any = selectedItems;
const selectedItemsChoose = temporarySelectedItems.length != 0 ? temporarySelectedItems : selectedItems;
let selectedItemsCopy: any = selectedItemsChoose;

if (row.contains("is-selected")) {
row.remove("is-selected");
selectedItemsCopy = selectedItems.filter((x: any) => x[props.attributeid] != item[props.attributeid])
selectedItemsCopy = selectedItemsChoose.filter((x: any) => x[props.attributeid] != item[props.attributeid])
} else {
row.add("is-selected");
selectedItemsCopy = selectedItems;
selectedItemsCopy = selectedItemsChoose;
selectedItemsCopy.push(item)
}
//Remove duplicates
if (selectedItemsCopy.length > 0) {
selectedItemsCopy = selectedItemsCopy.filter((a: any, b: any) => selectedItemsCopy.indexOf(a) === b)
}
temporarySelectedItems = selectedItemsCopy;
setSelectedItems(selectedItemsCopy);
listRef
}

/**
Expand Down Expand Up @@ -271,20 +294,20 @@ const MultiselectRecords = (props: IMultiselectProps) => {

const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
if (!props) {
return null;
return null;
}
const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = tooltipHostProps => (
<TooltipHost {...tooltipHostProps} />
<TooltipHost {...tooltipHostProps} />
);
return (
<Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
{defaultRender!({
...props,
onRenderColumnHeaderTooltip,
})}
</Sticky>
<Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
{defaultRender!({
...props,
onRenderColumnHeaderTooltip,
})}
</Sticky>
);
};
};

/**
* Renders the list and the buttons
Expand Down Expand Up @@ -341,7 +364,7 @@ const MultiselectRecords = (props: IMultiselectProps) => {
checkButtonAriaLabel="Checkbox"
onRenderRow={onRenderRow}
componentRef={listRef}
onRenderDetailsHeader={onRenderDetailsHeader}
onRenderDetailsHeader={onRenderDetailsHeader}
/>
</ScrollablePane>
</Stack.Item>
Expand Down Expand Up @@ -423,7 +446,7 @@ const MultiselectRecords = (props: IMultiselectProps) => {
//Set the value of our textfield to the input
setTextFieldValue(target.value)
//This is needed for loading the textFieldValue
props.eventOnChangeValue(textFieldValue);
props.eventOnChangeValue(target.value);
}

/**
Expand Down Expand Up @@ -522,11 +545,10 @@ const MultiselectRecords = (props: IMultiselectProps) => {
setSelectedRecordItems(filterItemsWithoutTheRemovedOne)
setSelectedItems(filterSelectedItemsWithoutTheRemovedOne)
setSearchValue("")
debugger
const filteredText = JSON.parse(textFieldValue).filter((myItem: any) => myItem["id"] != id).map((x: any) => x)
const filteredTextString = filteredText.map((x: any) => JSON.stringify(x));
let text: any = JSON.stringify(filteredText);
text = text !== "[]" ? text: "";
text = text !== "[]" ? text : "";
setTextFieldValue(text)
setMyItems(filteredTextString);
setIsError(0);
Expand All @@ -535,11 +557,6 @@ const MultiselectRecords = (props: IMultiselectProps) => {
props.eventOnChangeValue(text);
}


const removeDuplicatesFromArray = (arr: []) => [...new Set(
arr.map(el => JSON.stringify(el))
)].map(e => JSON.parse(e));

/**
* Method to fill the selected items from the box
*/
Expand Down Expand Up @@ -605,7 +622,6 @@ const MultiselectRecords = (props: IMultiselectProps) => {
* When close button is triggered
*/
const clearItems = (): void => {
debugger
setSearchValue("")
setListItems([])
const copyItems = getTextFieldJSON();
Expand Down
5 changes: 4 additions & 1 deletion MultiselectRecordsEntity/MultiselectRecords.types.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { IInputs } from "./generated/ManifestTypes";

export interface IColumnObject {
key: string,
name: string,
Expand Down Expand Up @@ -32,5 +34,6 @@ export interface IMultiselectProps {
widthProp: number,
heightProp: number,
filterTags: boolean,
numberIfRecordsToBeShown: number
numberIfRecordsToBeShown: number,
context: ComponentFramework.Context<IInputs>
}
5 changes: 3 additions & 2 deletions MultiselectRecordsEntity/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export class MultiselectRecordsEntity implements ComponentFramework.StandardCont
openWindow: "",
widthProp: 200,
heightProp: 500,
filterTags: true
filterTags: true,
context: null
}

/**
Expand Down Expand Up @@ -106,12 +107,12 @@ export class MultiselectRecordsEntity implements ComponentFramework.StandardCont
*/
public async updateView(context: ComponentFramework.Context<IInputs>): Promise<void> {
// Add code to update control view
//this.props.records = await MultiselectModel.GetDataFromMock();
this.props.inputValue = this._context.parameters.field.raw || null;
this.props.isControlDisabled = context.mode.isControlDisabled;
this.props.isControlVisible = context.mode.isVisible;
this.props.widthProp = context.mode.allocatedWidth;
this.props.heightProp = context.mode.allocatedHeight;
this.props.context = context;
this.renderElement()
}

Expand Down

0 comments on commit 64f211e

Please sign in to comment.