-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#845 Create instances from ontology view
- Loading branch information
Showing
15 changed files
with
483 additions
and
80 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
2 changes: 1 addition & 1 deletion
2
...-browser/src/components/Details/index.tsx → ...r/data-browser/src/components/Details.tsx
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
17 changes: 17 additions & 0 deletions
17
browser/data-browser/src/components/Dialog/waitForActiveDocument.ts
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,17 @@ | ||
| /** | ||
| * Waits for when the document becomes active again after it has been inert. | ||
| * (Useful for waiting for a dialog to close before navigating to a new page) | ||
| */ | ||
| export function waitForActiveDocument(callback: () => void) { | ||
| const observer = new MutationObserver(() => { | ||
| if (!document.body.hasAttribute('inert')) { | ||
| callback(); | ||
| observer.disconnect(); | ||
| } | ||
| }); | ||
|
|
||
| observer.observe(document.body, { | ||
| attributes: true, | ||
| attributeFilter: ['inert'], | ||
| }); | ||
| } |
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
51 changes: 51 additions & 0 deletions
51
browser/data-browser/src/components/ParentPicker/ParentPicker.tsx
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,51 @@ | ||
| import { styled } from 'styled-components'; | ||
| import { Column } from '../Row'; | ||
| import { ParentPickerItem } from './ParentPickerItem'; | ||
| import { InputStyled, InputWrapper } from '../forms/InputStyles'; | ||
| import { useSettings } from '../../helpers/AppSettings'; | ||
| import { FaFolderOpen } from 'react-icons/fa6'; | ||
|
|
||
| export interface ParentPickerProps { | ||
| root?: string; | ||
| value: string | undefined; | ||
| onChange: (subject: string) => void; | ||
| } | ||
|
|
||
| export function ParentPicker({ | ||
| root, | ||
| value, | ||
| onChange, | ||
| }: ParentPickerProps): React.JSX.Element { | ||
| const { drive } = useSettings(); | ||
|
|
||
| return ( | ||
| <Column> | ||
| <InputWrapper hasPrefix> | ||
| <FaFolderOpen size='1rem' /> | ||
| <InputStyled | ||
| placeholder='Enter a subject' | ||
| value={value ?? ''} | ||
| onChange={e => onChange(e.target.value)} | ||
| /> | ||
| </InputWrapper> | ||
| <PickerWrapper aria-label='parent selector'> | ||
| <ParentPickerItem | ||
| inialOpen={true} | ||
| subject={root ?? drive} | ||
| onClick={onChange} | ||
| selectedValue={value} | ||
| /> | ||
| </PickerWrapper> | ||
| </Column> | ||
| ); | ||
| } | ||
|
|
||
| const PickerWrapper = styled.section` | ||
| background-color: ${p => p.theme.colors.bg}; | ||
| border-radius: ${p => p.theme.radius}; | ||
| border: 1px solid ${p => p.theme.colors.bg2}; | ||
| padding: ${p => p.theme.margin}rem; | ||
| height: 20.5rem; | ||
| overflow-y: auto; | ||
| `; |
77 changes: 77 additions & 0 deletions
77
browser/data-browser/src/components/ParentPicker/ParentPickerDialog.tsx
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,77 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { | ||
| Dialog, | ||
| DialogActions, | ||
| DialogContent, | ||
| DialogTitle, | ||
| useDialog, | ||
| } from '../Dialog'; | ||
| import { ParentPicker } from './ParentPicker'; | ||
| import { Button } from '../Button'; | ||
| import { waitForActiveDocument } from '../Dialog/waitForActiveDocument'; | ||
|
|
||
| interface ParentPickerDialogProps { | ||
| root?: string; | ||
| open: boolean; | ||
| onSelect: (subject: string) => void; | ||
| onCancel?: () => void; | ||
| onOpenChange?: (open: boolean) => void; | ||
| title?: string; | ||
| } | ||
|
|
||
| export function ParentPickerDialog({ | ||
| open, | ||
| root, | ||
| title, | ||
| onSelect, | ||
| onCancel, | ||
| onOpenChange, | ||
| }: ParentPickerDialogProps): React.JSX.Element { | ||
| const [selected, setSelected] = useState<string>(); | ||
|
|
||
| const [dialogProps, show, close, isOpen] = useDialog({ | ||
| onCancel, | ||
| bindShow: onOpenChange, | ||
| }); | ||
|
|
||
| const select = () => { | ||
| if (!selected) return; | ||
|
|
||
| waitForActiveDocument(() => { | ||
| onSelect(selected); | ||
| }); | ||
| close(true); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (open) { | ||
| show(); | ||
| } else { | ||
| close(); | ||
| setSelected(undefined); | ||
| } | ||
| }, [open]); | ||
|
|
||
| return ( | ||
| <Dialog {...dialogProps}> | ||
| {isOpen && ( | ||
| <> | ||
| <DialogTitle> | ||
| <h1>{title ?? 'Select a location'}</h1> | ||
| </DialogTitle> | ||
| <DialogContent> | ||
| <ParentPicker root={root} value={selected} onChange={setSelected} /> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button subtle onClick={() => close(false)}> | ||
| Cancel | ||
| </Button> | ||
| <Button onClick={select} disabled={!selected}> | ||
| Select | ||
| </Button> | ||
| </DialogActions> | ||
| </> | ||
| )} | ||
| </Dialog> | ||
| ); | ||
| } |
148 changes: 148 additions & 0 deletions
148
browser/data-browser/src/components/ParentPicker/ParentPickerItem.tsx
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,148 @@ | ||
| import { | ||
| core, | ||
| dataBrowser, | ||
| Resource, | ||
| server, | ||
| useArray, | ||
| useCollection, | ||
| useResource, | ||
| useStore, | ||
| } from '@tomic/react'; | ||
| import { Details } from '../Details'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { getIconForClass } from '../../views/FolderPage/iconMap'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const shouldBeRendered = (resource: Resource) => | ||
| resource.hasClasses(dataBrowser.classes.folder) || | ||
| resource.hasClasses(server.classes.drive); | ||
|
|
||
| interface ParentPickerItemProps { | ||
| subject: string; | ||
| selectedValue: string | undefined; | ||
| inialOpen?: boolean; | ||
| onClick: (subject: string) => void; | ||
| } | ||
|
|
||
| export const ParentPickerItem: React.FC<ParentPickerItemProps> = ({ | ||
| subject, | ||
| ...props | ||
| }) => { | ||
| const resource = useResource(subject); | ||
|
|
||
| if ( | ||
| !resource.hasClasses(dataBrowser.classes.folder) && | ||
| !resource.hasClasses(server.classes.drive) | ||
| ) { | ||
| return null; | ||
| } | ||
|
|
||
| return <InnerItem subject={subject} {...props} />; | ||
| }; | ||
|
|
||
| const InnerItem = ({ | ||
| subject, | ||
| selectedValue, | ||
| inialOpen, | ||
| onClick, | ||
| }: ParentPickerItemProps) => { | ||
| const store = useStore(); | ||
| const { collection } = useCollection({ | ||
| property: core.properties.parent, | ||
| value: subject, | ||
| }); | ||
|
|
||
| const [children, setChildren] = useState<string[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| collection.getAllMembers().then(async (members: string[]) => { | ||
| const resources = await Promise.all( | ||
| members.map(s => store.getResource(s)), | ||
| ); | ||
| const filtered = resources.filter(shouldBeRendered); | ||
|
|
||
| setChildren(filtered.map(r => r.subject)); | ||
| }); | ||
| }, [collection]); | ||
|
|
||
| if (children.length === 0) { | ||
| return ( | ||
| <Title | ||
| indented | ||
| subject={subject} | ||
| onClick={onClick} | ||
| selected={selectedValue === subject} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Details | ||
| initialState={inialOpen} | ||
| open={inialOpen} | ||
| title={ | ||
| <Title | ||
| subject={subject} | ||
| selected={selectedValue === subject} | ||
| onClick={onClick} | ||
| /> | ||
| } | ||
| > | ||
| {children.map(child => ( | ||
| <ParentPickerItem | ||
| key={child} | ||
| subject={child} | ||
| selectedValue={selectedValue} | ||
| onClick={onClick} | ||
| /> | ||
| ))} | ||
| </Details> | ||
| ); | ||
| }; | ||
|
|
||
| interface TitleProps extends Omit<ParentPickerItemProps, 'selectedValue'> { | ||
| indented?: boolean; | ||
| selected?: boolean; | ||
| } | ||
|
|
||
| const Title = ({ | ||
| subject, | ||
| indented, | ||
| selected, | ||
| onClick, | ||
| }: TitleProps): React.JSX.Element => { | ||
| const resource = useResource(subject); | ||
| const [isA] = useArray(resource, core.properties.isA); | ||
|
|
||
| const Icon = getIconForClass(isA[0]); | ||
|
|
||
| return ( | ||
| <FolderButton | ||
| selected={selected} | ||
| indented={indented} | ||
| onClick={() => onClick(subject)} | ||
| > | ||
| <Icon /> | ||
| {resource.title} | ||
| </FolderButton> | ||
| ); | ||
| }; | ||
|
|
||
| const FolderButton = styled.button<{ indented?: boolean; selected?: boolean }>` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 1ch; | ||
| background-color: ${p => (p.selected ? p.theme.colors.bg1 : 'transparent')}; | ||
| color: ${p => (p.selected ? p.theme.colors.main : p.theme.colors.textLight)}; | ||
| cursor: pointer; | ||
| border: none; | ||
| padding: 0.3rem 0.5rem; | ||
| margin-inline-start: ${p => (p.indented ? '2rem' : '0')}; | ||
| border-radius: ${p => p.theme.radius}; | ||
| user-select: none; | ||
| &:hover { | ||
| background-color: ${p => p.theme.colors.bg1}; | ||
| color: ${p => (p.selected ? p.theme.colors.main : p.theme.colors.text)}; | ||
| } | ||
| `; |
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
Oops, something went wrong.