diff --git a/packages/web/src/icons.js b/packages/web/src/icons.js index 8a7623f17..ecc48052f 100644 --- a/packages/web/src/icons.js +++ b/packages/web/src/icons.js @@ -10,6 +10,7 @@ const iconNames = { 'icon new-connection': 'mdi mdi-database-plus', 'icon tables': 'mdi mdi-table-multiple', 'icon favorite': 'mdi mdi-star', + 'icon share': 'mdi mdi-share-variant', 'icon database': 'mdi mdi-database', 'icon server': 'mdi mdi-server', diff --git a/packages/web/src/modals/FavoriteModal.js b/packages/web/src/modals/FavoriteModal.js index a8ec0c146..190aab126 100644 --- a/packages/web/src/modals/FavoriteModal.js +++ b/packages/web/src/modals/FavoriteModal.js @@ -1,6 +1,14 @@ import React from 'react'; import ModalBase from './ModalBase'; -import { FormTextField, FormSubmit, FormButton, FormCheckboxField, FormFieldTemplate } from '../utility/forms'; +import { + FormTextField, + FormSubmit, + FormButton, + FormCheckboxField, + FormFieldTemplate, + FormCondition, + FormSelectField, +} from '../utility/forms'; import ModalHeader from './ModalHeader'; import ModalContent from './ModalContent'; import ModalFooter from './ModalFooter'; @@ -10,6 +18,8 @@ import uuidv1 from 'uuid/v1'; import { FontIcon } from '../icons'; import useHasPermission from '../utility/useHasPermission'; import _ from 'lodash'; +import getElectron from '../utility/getElectron'; +import { copyTextToClipboard } from '../utility/clipboard'; function FontIconPreview() { const { values } = useForm(); @@ -18,6 +28,8 @@ function FontIconPreview() { export default function FavoriteModal({ modalState, editingData = undefined, savingTab = undefined }) { const hasPermission = useHasPermission(); + const electron = getElectron(); + const savedProperties = ['title', 'icon', 'showInToolbar', 'openOnStartup', 'urlPath']; const initialValues = React.useMemo(() => { if (savingTab) { return { @@ -27,17 +39,13 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav }; } if (editingData) { - return { - title: editingData.title, - icon: editingData.icon, - showInToolbar: editingData.showInToolbar, - openOnStartup: editingData.openOnStartup, - urlPath: editingData.urlPath, - }; + return _.pick(editingData, savedProperties); } }, []); - const saveTab = async (values) => { + // const savedFile = savingTab && savingTab.props && savingTab.props.savedFile; + + const getTabSaveData = async (values) => { const tabdata = {}; const re = new RegExp(`tabdata_(.*)_${savingTab.tabid}`); @@ -48,20 +56,22 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav tabdata[match[1]] = JSON.parse(localStorage.getItem(key)); } + return { + props: savingTab.props, + tabComponent: savingTab.tabComponent, + tabdata, + ..._.pick(values, savedProperties), + }; + }; + + const saveTab = async (values) => { + const data = await getTabSaveData(values); + axios.post('files/save', { folder: 'favorites', file: uuidv1(), format: 'json', - data: { - props: savingTab.props, - tabComponent: savingTab.tabComponent, - tabdata, - ...values, - // title: values.title, - // icon: values.icon, - // showInToolbar: values.showInToolbar, - // openOnStartup: values.openOnStartup, - }, + data, }); }; @@ -92,6 +102,12 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav saveFile(values); } }; + + const handleCopyLink = async (values) => { + const tabdata = await getTabSaveData(values); + copyTextToClipboard(`${document.location.origin}#tabdata=${encodeURIComponent(JSON.stringify(tabdata))}`); + }; + return ( {editingData ? 'Edit favorite' : 'Add to favorites'} @@ -103,12 +119,31 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav - - + {!!savingTab && !electron && } + !values.shareAsLink}> + + + + { + + + + {/* */} + + + {/* + */} + +} + !values.shareAsLink && hasPermission('files/favorites/write')}> + + + values.shareAsLink}> + + modalState.close()} /> - {hasPermission('files/favorites/write') && } diff --git a/packages/web/src/utility/forms.js b/packages/web/src/utility/forms.js index 9c17cf0af..ec6cb25da 100644 --- a/packages/web/src/utility/forms.js +++ b/packages/web/src/utility/forms.js @@ -24,6 +24,12 @@ export function FormFieldTemplate({ label, children, type }) { ); } +export function FormCondition({ condition, children }) { + const { values } = useForm(); + if (condition(values)) return children; + return null; +} + export function FormTextFieldRaw({ name, focused = false, ...other }) { const { values, setFieldValue } = useForm(); const handleChange = (event) => { diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js index 84e820d41..fb7a43b4c 100644 --- a/packages/web/src/widgets/Toolbar.js +++ b/packages/web/src/widgets/Toolbar.js @@ -17,6 +17,7 @@ import useOpenNewTab from '../utility/useOpenNewTab'; import tabs from '../tabs'; import FavoriteModal from '../modals/FavoriteModal'; import { useOpenFavorite } from '../appobj/FavoriteFileAppObject'; +import ErrorMessageModal from '../modals/ErrorMessageModal'; const ToolbarContainer = styled.div` display: flex; @@ -88,18 +89,26 @@ export default function ToolBar({ toolbarPortalRef }) { React.useEffect(() => { const { hash } = document.location; - const favname = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null; - if (favname) { - const open = (favorites || []).find((x) => x.urlPath == favname); + const openFavoriteName = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null; + const openTabdata = hash && hash.startsWith('#tabdata=') ? hash.substring('#tabdata='.length) : null; + if (openFavoriteName) { + const open = (favorites || []).find((x) => x.urlPath == openFavoriteName); if (open) { openFavorite(open); window.history.replaceState(null, null, ' '); } - } else { - if (!openedTabs.find((x) => x.closedTime == null)) { - for (const fav of (favorites || []).filter((x) => x.openOnStartup)) { - openFavorite(fav); - } + } else if (openTabdata) { + try { + const json = JSON.parse(decodeURIComponent(openTabdata)); + console.log('TABDATA', json); + openFavorite(json); + window.history.replaceState(null, null, ' '); + } catch (err) { + showModal((modalState) => ); + } + } else if (!openedTabs.find((x) => x.closedTime == null)) { + for (const fav of (favorites || []).filter((x) => x.openOnStartup)) { + openFavorite(fav); } } }, [favorites]); @@ -137,8 +146,8 @@ export default function ToolBar({ toolbarPortalRef }) { tabs[currentTab.tabComponent].allowAddToFavorites && currentTab.props && tabs[currentTab.tabComponent].allowAddToFavorites(currentTab.props) && ( - - Add to favorites + + Share )}