update and fixes

Update github timeline demo , add more commands to manage timeline: Remove-TimelineItem, Add-TimelineItem,
Clear-Timeline,

src/Components/autocomplete/autocomplete.jsx

@@ -9,9 +9,9 @@ export default function AntdAutoComplete({ id, ...props }) {
   const [dataSource, setDataSource] = React.useState([])
   const [{ attributes }] = useDashboardEvent(id, props)
   const { autoRefresh, refreshInterval, filterKeys, customInput, suffixIcon, ...restOfProps } = attributes
-  const { data, error, status, isFetching } = useAutoComplete(id, autoRefresh, refreshInterval)
+  const { data, error, status, isFetching, refetch } = useAutoComplete(id, autoRefresh, refreshInterval)
   const debouncedData = useDebounce(dataSource, 500)
-  const event$ = useEventEmitter()
+
   // callback to run on item select.
   const onSelect = (value) => {
     let selectedOption = filterKeys.map(fk => data.find(i => i[fk] === value))[0]
@@ -21,7 +21,6 @@ export default function AntdAutoComplete({ id, ...props }) {
       eventName: "onSelect",
       eventData: JSON.stringify(selectedOption)
     })
-    event$.emit(`I just selected an item ${selectedOption}`)
   }
 
   // filter the options base on the input text and return new array of the results.
@@ -52,14 +51,6 @@ export default function AntdAutoComplete({ id, ...props }) {
   // testing for errors in the react-query part from useAutoComplete function.
   if (status === "error") return <Alert message={ error.message } type="error" />
 
-  event$.useSubscription(val => {
-    console.log(val)
-  })
-
-  console.log("data", data)
-  console.log("dataSource", dataSource)
-  console.log("debouncedData", debouncedData)
-
   return (
     <AutoComplete
       { ...restOfProps }
@@ -69,7 +60,7 @@ export default function AntdAutoComplete({ id, ...props }) {
       onSelect={ onSelect }
       dataSource={ debouncedData }
     >
-      <Input size="large" />
+      <Input />
     </AutoComplete>
   )
 }

src/Components/calander/gh-calendar.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import GitHubCalendar from 'react-github-calendar'
+import ReactTooltip from 'react-tooltip'
+import { useTheme } from 'antd-theme'
+
+export default function AntdGithubCalendar({ username, color, ...props }) {
+    const [{ variables }] = useTheme()
+    return (
+        <GitHubCalendar { ...props } color={ color || variables['primary-color'] } username={ username }>
+            <ReactTooltip delayShow={ 50 } html />
+        </GitHubCalendar>
+    )
+}

src/Components/form/antForm.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/display-name */
 import React from "react"
-import { Form, Button, Space } from "antd"
-import { message } from "antd"
+import { Form, Space, Button } from "antd"
 import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
 function useForm() {
@@ -15,10 +14,13 @@ function useForm() {
 		})
 	}
 
-	const onFormReset = form => {
+	const onFormReset = (form, id, hasResetCallback) => {
 		form.resetFields()
-		new message.info({
-			content: "Form was reset!",
+		hasResetCallback && UniversalDashboard.publish("element-event", {
+			type: "clientEvent",
+			eventId: id + "onReset",
+			eventName: "onReset",
+			eventData: "",
 		})
 	}
 
@@ -36,29 +38,35 @@ function useForm() {
 
 function useFormComponent(api) {
 	const AntdForm = React.useMemo(
-		() => ({ id, ...props }) => {
+		() => ({ id, hasResetCallback, ...props }) => {
 			const [form] = Form.useForm()
 			const { onFormSubmit, onFormReset } = AntdForm.api
 			const [{ content, attributes }] = useDashboardEvent(id, props)
-			const { layout, formName } = attributes
+			const { layout, formName, submitButton } = attributes
 
-			return <div style={{ padding: 48 }}>
-				<Form id={id} form={form} name={formName || `form-${id}`} layout={layout} onFinish={(values) => onFormSubmit(id, values)}>
-					{UniversalDashboard.renderComponent(content)}
-					<Space direction="horizontal" size="large">
+			return (
+				<Form
+					id={ id }
+					form={ form }
+					name={ formName || `form-${id}` }
+					layout={ layout }
+					onFinish={ (values) => onFormSubmit(id, values) }
+				>
+					{ UniversalDashboard.renderComponent(content) }
+					<Space direction="horizontal" size="small">
 						<Form.Item>
-							<Button htmlType="submit" type="primary" style={{ marginRight: 16 }}>
+							{ !submitButton && <Button htmlType="submit" type="primary">
 								Send
-							</Button>
+							</Button> || UniversalDashboard.renderComponent(submitButton) }
 						</Form.Item>
 						<Form.Item>
-							<Button htmlType="button" type="dashed" onClick={() => onFormReset(form)}>
+							<Button htmlType="button" type="dashed" onClick={ () => onFormReset(form, id, hasResetCallback) }>
 								Reset
 							</Button>
 						</Form.Item>
 					</Space>
 				</Form>
-			</div>
+			)
 		},
 		[]
 	)
@@ -69,6 +77,6 @@ function useFormComponent(api) {
 
 export default props => {
 	const { AntdForm } = useForm()
-	return <AntdForm {...props} />
+	return <AntdForm { ...props } />
 }
 

src/Components/framework/core/theme/togglePrimaryColor.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { useTheme } from 'antd-theme'
-import { presetPrimaryColors, presetDarkPalettes, presetPalettes } from '@ant-design/colors'
-import Block from 'react-color/lib/Block'
+import { presetDarkPalettes, presetPalettes } from '@ant-design/colors'
+import Circle from 'react-color/lib/Circle'
+import { Popover } from 'antd'
 
 export default function TogglePrimaryColor() {
   const [{ name, variables }, setTheme] = useTheme()
@@ -13,19 +14,27 @@ export default function TogglePrimaryColor() {
     } else {
       colors = Object.keys(presetPalettes).map(color => presetPalettes[color].primary)
     }
-    console.log("colors", colors)
     return colors
   }
 
   return (
-    <Block
-      colors={ getPrimaryColors() }
-      onChange={ (color) => {
-        // Will update all css attributes affected by primary-color
-        setTheme({ name, variables: { 'primary-color': color.hex, 'progress-default-color': color.hex } })
-      } }
-      triangle="hide"
-    // width="100%"
-    />
+    <Popover content={
+      <Circle
+        colors={ getPrimaryColors() }
+        onChange={ (color) => {
+          setTheme({ name, variables: { 'primary-color': color.hex, 'progress-default-color': color.hex } })
+        } }
+      /> }
+      trigger="click"
+      arrowContent={ null }
+    >
+      <div style={ {
+        background: `${variables['primary-color']} none repeat scroll 0% 0%`,
+        width: 22,
+        height: 22,
+        borderRadius: 4,
+        cursor: "pointer",
+      } } />
+    </Popover >
   )
 }

src/Components/index.js

@@ -203,9 +203,9 @@ const ToggleColorMode = lazy(
 const TogglePrimaryColor = lazy(
 	() => import(/* webpackChunkName: 'TogglePrimaryColor' */ "./framework/core/theme/togglePrimaryColor")
 )
-// const AddToTimeline = lazy(
-// 	() => import(/* webpackChunkName: 'AddToTimeline' */ "./timeline/addToTimeline")
-// )
+const AntdGithubCalendar = lazy(
+	() => import(/* webpackChunkName: 'AntdGithubCalendar' */ "./calander/gh-calendar")
+)
 
 export default function registerComponents() {
 	[
@@ -276,7 +276,7 @@ export default function registerComponents() {
 		{ type: "ud-antd-divider", component: AntdDivider },
 		{ type: "ud-antd-toggle-color-mode", component: ToggleColorMode },
 		{ type: "ud-antd-toggle-primary-color", component: TogglePrimaryColor },
-		// { type: "ud-antd-utils-addToTimeline", component: AddToTimeline },
+		{ type: "ud-antd-github-calendar", component: AntdGithubCalendar },
 	].forEach(
 		({ type, component }) => UniversalDashboard.register(type, component)
 	)

src/Components/popover/popover.js

@@ -1,25 +1,23 @@
-import React from "react";
-import { Popover } from "antd";
-import useDashboardEvent from "../api/Hooks/useDashboardEvent";
+import React from "react"
+import { Popover } from "antd"
+import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
 const AntdPopover = props => {
-  const [{ content, attributes }] = useDashboardEvent(props.id, props);
+  const [{ content, attributes }] = useDashboardEvent(props.id, props)
   const title = (
     <span>
-      {attributes.title && UniversalDashboard.renderComponent(attributes.title)}
+      { attributes.title && UniversalDashboard.renderComponent(attributes.title) }
     </span>
   )
-  
+
   return <Popover
-      {...attributes}
-      title={title}
-      content={UniversalDashboard.renderComponent(content)}
-      autoAdjustOverflow={true}
-    >
-      {attributes.children.map(item =>
-        item.type && UniversalDashboard.renderComponent(item) || item
-      )}
-    </Popover>
-};
+    { ...attributes }
+    title={ title }
+    content={ UniversalDashboard.renderComponent(content) }
+    autoAdjustOverflow={ true }
+  >
+    { content && UniversalDashboard.renderComponent(children) }
+  </Popover>
+}
 
-export default AntdPopover;
+export default AntdPopover

src/Components/timeline/clearTimeline.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { useMutation, queryCache } from 'react-query'
+
+export default function useClearTimeline() {
+    const clearTimeline = ({ timelineId }) => {
+        queryCache.setQueryData(["timeline", { id: timelineId }], [])
+    }
+    return useMutation(clearTimeline)
+}

src/Components/timeline/timeline.jsx

@@ -5,33 +5,47 @@ import { useEndpointSubscription } from "../api/Hooks/useDashboardEvent"
 import useTimeline from "./useTimeline"
 import useAddToTimeline from "./addToTimeline"
 import useRemoveFromTimeline from "./removeFromTimeline"
+import useClearTimeline from "./clearTimeline"
 
 
 export default function AntdTimeline({ id, ...props }) {
 	const { autoRefresh, refreshInterval, ...restOfProps } = props
-	const [add] = useAddToTimeline()
+	const [add, { status: addStatus, reset, data: addData }] = useAddToTimeline()
 	const [remove] = useRemoveFromTimeline()
-	const { data, status, error } = useTimeline(id, autoRefresh, refreshInterval)
+	const [clear] = useClearTimeline()
 
-	useEndpointSubscription(id, (message, event) => {
+	const { data, status, error, isFetching, isStale, refetch } = useTimeline(id, autoRefresh, refreshInterval)
+
+	useEndpointSubscription(id, (_, event) => {
 		if (event.type === "addTimelineItem") {
-			add({ timelineId: event.data.timelineId, item: event.data.item })
+			add({ timelineId: event?.data?.timelineId, item: event?.data?.item })
 		}
 		if (event.type === "removeTimelineItem") {
-			remove({ timelineId: event.data.timelineId, itemId: event.data.itemId })
+			remove({ timelineId: event?.data?.timelineId, itemId: event?.data?.itemId })
+		}
+		if (event.type === "clearTimeline") {
+			clear({ timelineId: event?.data?.timelineId })
 		}
 	})
 
 	if (status === "error") return <Alert message={ error.message } type="error" />
 
+	console.log("addStatus", addStatus)
+	console.log("status", status)
+	console.log("addData", addData)
+	console.log("data", data)
 	return (
 		<Timeline
+			pending={ addStatus === "loading" && "Getting data..." }
 			{ ...restOfProps }
 		>
 			{ data !== undefined && data.map(
-				item => <Timeline.Item key={ item.id } { ...item }
-					dot={ item.dot && UniversalDashboard.renderComponent(item.dot) }
-					label={ item.label && UniversalDashboard.renderComponent(item.label) }
+				item => <Timeline.Item
+					{ ...item }
+					key={ item?.id }
+					dot={ UniversalDashboard.renderComponent(item?.dot) }
+					label={ UniversalDashboard.renderComponent(item?.label) }
+					onClick={ () => reset() }
 				>
 					{ UniversalDashboard.renderComponent(item.content) }
 				</Timeline.Item>) }

src/Components/timeline/useTimeline.js

@@ -8,6 +8,6 @@ export default function useTimeline(id) {
     }
 
     return useQuery(
-        id && ["timeline", { id }], () => getItems(), { refetchOnMount: true }
+        id && ["timeline", { id }], () => getItems(), { refetchOnMount: true, refetchOnWindowFocus: true }
     )
 }

src/Dashboard/Configuration/AppBar/AppBar.ps1

@@ -1,2 +1,5 @@
 Import-Module $Root\Configuration\AppBar\AppBarMenu.ps1 -Variable * -Force
-$AppBar = New-UDAntdAppBar -Visible -Content { $AppBarMenu }
+$AppBar = New-UDAntdAppBar -Visible -Content { 
+    $AppBarMenu
+
+}

src/Dashboard/Configuration/AppBar/AppBarMenu.ps1

@@ -22,4 +22,10 @@ $AppBarMenu = New-UDAntdMenu -Mode horizontal -Content {
         New-UDAntdIcon -Icon ReadOutlined
     ) -Text "Badges" -To "/Badges"
     $UserProfileBtn
+    New-UDAntdMenuItem -Content (
+        New-UDAntdTogglePrimaryColor
+    )
+    New-UDAntdMenuItem -Content (
+        New-UDAntdToggleColorMode
+    )
 }  

src/Dashboard/Configuration/AppBar/UserProfileButton.ps1

@@ -13,12 +13,6 @@ $UserProfileBtn = New-UDAntdMenuItem -Content (
             New-UDAntdMenuItem -Icon (
                 New-UDAntdIcon -Icon LockOutlined
             ) -Text "Security"  -To "#" 
-            New-UDAntdMenuItem -Content (
-                New-UDAntdTogglePrimaryColor
-            )
-            New-UDAntdMenuItem -Content (
-                New-UDAntdToggleColorMode
-            )
         }
     )
 )

src/Dashboard/Pages/Examples/Form_Page.ps1

@@ -49,5 +49,5 @@ New-UDPage -Title 'Forms' -Name 'Form' -Content {
                 duration    = 3
             }
         }
-    }
+    } 
 }