#1

Solutions/Tagging/src/Other/Solution.xml

@@ -8,7 +8,7 @@
  <Descriptions>
  <Description description="Skyvekraft has developed Thrusted Tags for Dataverse &amp; Dynamics 365. It leverages the built-in Connections technology, adding a powerful and user-friendly user interface. Thrusted Tags makes it easy for users to mark any record with either personal, organization specific or company-wide Tags. Personal tags are great for users wanting to group data according to personal needs. Organizational tags are of interest to specific business areas, roles or functions, while Global tags are relevant for all users across organizational boundaries. Tags can be organized in Groups, so that it is easy to find all related tags and related tagged business records. Tags can have an icon or photo associated for easy visual identification. Records can be individually, or bulk tagged with one or multiple tags at a time with an easy to-use interface. Tag duplication is automatically handled according to tag owners’ preferences. Related tags and tagged objects can be easily found using standard mechanisms." languagecode="1033" />
  </Descriptions>
- <Version>2021.12.10.1</Version>
+ <Version>2021.12.21.1</Version>
  <Managed>2</Managed>
  <Publisher>
  <UniqueName>skyvekraft</UniqueName>

TagList/ControlManifest.Input.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
- <control namespace="Skyvekraft" constructor="TagList" version="0.0.5" display-name-key="TagList" description-key="TagList description" control-type="standard">
+ <control namespace="Skyvekraft" constructor="TagList" version="0.0.6" display-name-key="TagList" description-key="TagList description" control-type="standard">
 
  <!-- dataset node represents a set of entity records on CDS; allow more than one datasets -->
  <data-set name="DataSet" display-name-key="ControlProps_key">

TagList/components/GroupsField.tsx

@@ -18,7 +18,11 @@ export const GroupsField: React.FunctionComponent<{ tagId?: string, context: Com
 
  return (<div>
  {groups.map((value) => {
- return <Link key={ value['skyve_taggroupid']} onClick={() => {
+ return <Link styles={{
+ root: {
+ paddingRight: 5
+ }
+ }} key={value['skyve_taggroupid']} onClick={() => {
  context.navigation.openForm({entityId: value['skyve_taggroupid'], entityName: 'skyve_taggroup', openInNewWindow:true})
  }} >{value['skyve_name']}</Link>
  })}

TagList/components/Picker.tsx

@@ -1,10 +1,10 @@
 import * as React from "react"
 import {
- TagPicker, ITag,  ITagPickerProps, BasePicker,
+ TagPicker, ITag, ITagPickerProps, BasePicker,
  IBasePickerState, ISuggestionItemProps, IBasePickerSuggestionsProps, ValidationState
 } from '@fluentui/react/lib/Pickers'
-import { Stack} from '@fluentui/react/lib/Stack'
-import { IconButton, BaseButton, Button} from '@fluentui/react/lib/Button'
+import { Stack } from '@fluentui/react/lib/Stack'
+import { IconButton, BaseButton, Button } from '@fluentui/react/lib/Button'
 import { TagService } from "../../services/TagService"
 import { SelectedTagItem } from "../components/SelectedTagItem"
 import { EntityToTagItem, getLocalString } from "../../Utilities"
@@ -147,7 +147,7 @@ export class Picker extends React.Component<IPickerProps, IPickerState> {
  <span style={{ width: 150, margin: 4, padding: 4, textAlign: "left", fontWeight: 600 }}>{props.name}</span>
  <span style={{ width: 140, margin: 4, padding: 4, textAlign: "left" }}>{props.groups}</span>
  <span style={{ width: 95, margin: 4, padding: 4, textAlign: "left" }}> {props.tagType}</span>
- <span style={{ width: 120, margin: 4, padding: 4 , textAlign: "left"}}>{props.createdBy}</span>
+ <span style={{ width: 120, margin: 4, padding: 4, textAlign: "left" }}>{props.createdBy}</span>
  </Stack>)
  }
 
@@ -179,7 +179,7 @@ export class Picker extends React.Component<IPickerProps, IPickerState> {
 
  const suggestedTags = getLocalString(this.props.context, 'Suggested_Tags_Text', 'Suggested Tags (Name, Groups, Type, Owner)')
  const forseResolveText = getLocalString(this.props.context, 'Force_Resolve_Text', 'Create new personal Tag?')
- const searchPlaceHolder= getLocalString(this.props.context, 'Search_Placeholder_Text', 'Type here to search for existing tags...')
+ const searchPlaceHolder = getLocalString(this.props.context, 'Search_Placeholder_Text', 'Type here to search for existing tags...')
 
  const pickerProps: IBasePickerSuggestionsProps = {
  suggestionsHeaderText: suggestedTags,
@@ -194,9 +194,9 @@ export class Picker extends React.Component<IPickerProps, IPickerState> {
  else { return false }
  }
  }
-  let index=0
+
  return (
- <Stack >
+ <Stack>
  <Stack horizontal={true}>
  <TagPicker
  inputProps={{ placeholder: searchPlaceHolder }}
@@ -223,13 +223,12 @@ export class Picker extends React.Component<IPickerProps, IPickerState> {
  onItemSelected={this.props.onSelected}
  onRenderItem={(props) => {
  return (<SelectedTagItem
- key={`selectedtagitem_${index++}`}
- innerElement = { this.props.innerElement }
- tagProps = {{
+ innerElement={this.props.innerElement}
+ tagProps={{
  ...props, onRemoveItem: this.props.onRemove ?
  () => {
- this.props.onRemove ? this.props.onRemove(props.item as TagItem) : null
- } : props.onRemoveItem
+  this.props.onRemove ? this.props.onRemove(props.item as TagItem) : null
+  } : props.onRemoveItem
  }} context={this.props.context} />)
  }}
  />

TagList/components/SelectedTagItem.tsx

@@ -1,6 +1,5 @@
 import { IPickerItemProps } from "@fluentui/react/lib/Pickers"
 import { IButtonProps, IconButton } from "@fluentui/react/lib/Button"
-import { Image } from "@fluentui/react/lib/Image"
 import { Text } from "@fluentui/react/lib/Text"
 import { Icon } from "@fluentui/react/lib/Icon"
 import { HoverCard, HoverCardType, IPlainCardProps } from "@fluentui/react/lib/HoverCard"
@@ -10,6 +9,7 @@ import { TagService } from "../../services/TagService"
 import * as React from "react"
 import { getLocalString } from "../../Utilities"
 import { TagItem } from "../../types/TagItem"
+import { TagImage } from "./TagImage"
 
 export const SelectedTagItem: React.FunctionComponent<{
  tagProps: IPickerItemProps<TagItem>,
@@ -65,10 +65,7 @@ export const SelectedTagItem: React.FunctionComponent<{
  }
  }, [existsPersonal])
 
- const imageSection = props.tagProps.item?.entityimage ? <Image src={`data:image;base64,${props.tagProps.item?.entityimage}`} height={25} width={25} /> :
- <Icon styles={{
- root: { width: 25, height: 25, fontSize: 25 },
- }} iconName={'Tag'} />
+
  const newIcon = <TooltipHost
  content={personalWillBeCreated}
  id={`${props.tagProps.item.key}_tooltip_add`}
@@ -78,7 +75,7 @@ export const SelectedTagItem: React.FunctionComponent<{
 
  return <Card tokens={cardTokens} horizontal>
  <Card.Section>
- {props.tagProps.item.toCreate !== true ? imageSection : newIcon}
+ {props.tagProps.item.toCreate !== true ? <TagImage entityImage={props.tagProps.item?.entityimage } /> : newIcon}
  </Card.Section>
  {warning}
  <Card.Section>

TagList/components/TagImage.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import { Image } from "@fluentui/react/lib/Image"
+import { Icon } from "@fluentui/react/lib/Icon"
+
+export const TagImage: React.FC<{ entityImage?: string }> = ({ entityImage }) => {
+ return (entityImage ? <Image src={`data:image;base64,${entityImage}`} height={25} width={25} /> :
+ <Icon styles={{
+ root: { width: 25, height: 25, fontSize: 25 },
+ }} iconName={'Tag'} />
+ );
+}
+

TagList/components/TagsListControl.tsx

@@ -97,7 +97,7 @@ export class TagsListControl extends React.Component<ITagsListProps, ITagsListSt
  this.tagService.unlinkTag(connectionId).then(() => {
  const { tags } = this.state
  for (let i = 0; i < tags.length; i++) {
- if (tags[i].connectionid == connectionId) {
+ if (tags[i].connectionid === connectionId) {
  tags.splice(i, 1)
  }
  }