favorite dialog

packages/web/src/appobj/FavoriteFileAppObject.js

@@ -1,11 +1,19 @@
 import React from 'react';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import FavoriteModal from '../modals/FavoriteModal';
+import useShowModal from '../modals/showModal';
 import axios from '../utility/axios';
 import useOpenNewTab from '../utility/useOpenNewTab';
 import { SavedFileAppObjectBase } from './SavedFileAppObject';
 
 export function FavoriteFileAppObject({ data, commonProps }) {
-  const { file, folder, icon, tabComponent, title, props, tabdata } = data;
+  const { icon, tabComponent, title, props, tabdata } = data;
   const openNewTab = useOpenNewTab();
+  const showModal = useShowModal();
+
+  const editFavorite = () => {
+    showModal((modalState) => <FavoriteModal modalState={modalState} editingData={data} />);
+  };
 
   return (
     <SavedFileAppObjectBase
@@ -38,6 +46,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
           tabdataNew
         );
       }}
+      menuExt={<DropDownMenuItem onClick={editFavorite}>Edit</DropDownMenuItem>}
     />
   );
 }

packages/web/src/modals/FavoriteModal.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import { FormTextField, FormSubmit, FormButton, FormCheckboxField } from '../utility/forms';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
+import { FormProvider, useForm } from '../utility/FormProvider';
+import axios from '../utility/axios';
+import uuidv1 from 'uuid/v1';
+import { FontIcon } from '../icons';
+import { FormFieldTemplateDefault } from '../utility/formStyle';
+
+function FontIconPreview() {
+  const { values } = useForm();
+  return <FontIcon icon={values.icon} />;
+}
+
+export default function FavoriteModal({ modalState, editingData = undefined, savingTab = undefined }) {
+  const initialValues = React.useMemo(() => {
+    if (savingTab) {
+      return {
+        title: savingTab.title,
+        icon: savingTab.icon,
+      };
+    }
+    if (editingData) {
+      return {
+        title: editingData.title,
+        icon: editingData.icon,
+      };
+    }
+  }, []);
+
+  const saveTab = async (values) => {
+    const tabdata = {};
+
+    const re = new RegExp(`tabdata_(.*)_${savingTab.tabid}`);
+    for (const key in localStorage) {
+      const match = key.match(re);
+      if (!match) continue;
+      if (match[1] == 'editor') continue;
+      tabdata[match[1]] = JSON.parse(localStorage.getItem(key));
+    }
+
+    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,
+      },
+    });
+  };
+
+  const saveFile = async (values) => {
+    const oldDataResp = await axios.post('files/load', {
+      folder: 'favorites',
+      file: editingData.file,
+      format: 'json',
+    });
+
+    axios.post('files/save', {
+      folder: 'favorites',
+      file: editingData.file,
+      format: 'json',
+      data: {
+        ...oldDataResp.data,
+        ...values,
+      },
+    });
+  };
+
+  const handleSubmit = async (values) => {
+    modalState.close();
+    if (savingTab) {
+      saveTab(values);
+    }
+    if (editingData) {
+      saveFile(values);
+    }
+  };
+  return (
+    <ModalBase modalState={modalState}>
+      <ModalHeader modalState={modalState}>{editingData ? 'Edit favorite' : 'Add to favorites'}</ModalHeader>
+      <FormProvider initialValues={initialValues}>
+        <ModalContent>
+          <FormTextField label="Title" name="title" focused />
+          <FormTextField label="Icon" name="icon" />
+          <FormFieldTemplateDefault label="Icon preview" type="icon">
+            <FontIconPreview />
+          </FormFieldTemplateDefault>
+          <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
+          <FormCheckboxField label="Open on startup" name="openOnStartup" />
+        </ModalContent>
+        <ModalFooter>
+          <FormButton value="Cancel" onClick={() => modalState.close()} />
+          <FormSubmit value="OK" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
+    </ModalBase>
+  );
+}

packages/web/src/widgets/Toolbar.js

@@ -17,6 +17,7 @@ import useOpenNewTab from '../utility/useOpenNewTab';
 import axios from '../utility/axios';
 import tabs from '../tabs';
 import uuidv1 from 'uuid/v1';
+import FavoriteModal from '../modals/FavoriteModal';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -82,28 +83,29 @@ export default function ToolBar({ toolbarPortalRef }) {
   };
 
   const addToFavorite = () => {
-    const tabdata = {};
+    showModal((modalState) => <FavoriteModal modalState={modalState} savingTab={currentTab} />);
+    // const tabdata = {};
 
-    const re = new RegExp(`tabdata_(.*)_${currentTab.tabid}`);
-    for (const key in localStorage) {
-      const match = key.match(re);
-      if (!match) continue;
-      if (match[1] == 'editor') continue;
-      tabdata[match[1]] = JSON.parse(localStorage.getItem(key));
-    }
+    // const re = new RegExp(`tabdata_(.*)_${currentTab.tabid}`);
+    // for (const key in localStorage) {
+    //   const match = key.match(re);
+    //   if (!match) continue;
+    //   if (match[1] == 'editor') continue;
+    //   tabdata[match[1]] = JSON.parse(localStorage.getItem(key));
+    // }
 
-    axios.post('files/save', {
-      folder: 'favorites',
-      file: uuidv1(),
-      format: 'json',
-      data: {
-        title: currentTab.title,
-        icon: currentTab.icon,
-        props: currentTab.props,
-        tabComponent: currentTab.tabComponent,
-        tabdata,
-      },
-    });
+    // axios.post('files/save', {
+    //   folder: 'favorites',
+    //   file: uuidv1(),
+    //   format: 'json',
+    //   data: {
+    //     title: currentTab.title,
+    //     icon: currentTab.icon,
+    //     props: currentTab.props,
+    //     tabComponent: currentTab.tabComponent,
+    //     tabdata,
+    //   },
+    // });
   };
 
   function openTabFromButton(page) {