add or replace bookmarks when importing data

src/component/bookmark/index.js

@@ -478,8 +478,23 @@ bookmark.count = () => {
 };
 
 bookmark.restore = (dataToRestore) => {
+
   bookmark.all = dataToRestore.bookmark;
-  console.log('bookmark restored');
+
+  console.log('bookmarks restored');
+
+};
+
+bookmark.append = (dataToAppend) => {
+
+  dataToAppend.bookmark.forEach((item, i) => {
+
+    bookmark.all.push(item);
+
+  });
+
+  console.log('bookmarks appended');
+
 };
 
 bookmark.reset = () => {

src/component/data/index.js

@@ -24,12 +24,20 @@ data.get = (key) => {
 };
 
 data.import = {
-  state: { setup: true, bookmark: true, theme: true },
+  state: {
+    setup: { include: true },
+    bookmark: { include: true, type: 'restore' },
+    theme: { include: true }
+  },
   reset: () => {
 
-    for (let key in data.import.state) {
+    data.import.state.setup.include = true;
-      data.import.state[key] = true;
+
-    };
+    data.import.state.bookmark.include = true;
+
+    data.import.state.bookmark.type = 'restore';
+
+    data.import.state.theme.include = true;
 
   },
   file: ({
@@ -104,7 +112,7 @@ data.validateFile = ({
             width: 'small',
             successAction: () => {
 
-              if (data.import.state.setup || data.import.state.theme || data.import.state.bookmark) {
+              if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
 
                 let dataToRestore = JSON.parse(event.target.result);
 
@@ -255,16 +263,28 @@ data.restore = (dataToRestore) => {
 
     console.log('data found to load');
 
-    if (data.import.state.setup) {
+    if (data.import.state.setup.include) {
       state.set.restore.setup(dataToRestore);
     };
 
-    if (data.import.state.theme) {
+    if (data.import.state.theme.include) {
       state.set.restore.theme(dataToRestore);
     };
 
-    if (data.import.state.bookmark) {
+    if (data.import.state.bookmark.include) {
-      bookmark.restore(dataToRestore);
+
+      switch (data.import.state.bookmark.type) {
+
+        case 'restore':
+          bookmark.restore(dataToRestore);
+          break;
+
+        case 'append':
+          bookmark.append(dataToRestore);
+          break;
+
+      };
+
     };
 
   } else {

src/component/importForm/index.js

@@ -50,39 +50,76 @@ export const ImportForm = function({
 
   this.control = {
     import: {
-      bookmark: new Control_checkbox({
+      bookmark: {
-        object: state,
+        include: new Control_checkbox({
-        path: 'bookmark',
+          object: state,
-        id: 'bookmark',
+          path: 'bookmark.include',
-        labelText: 'Bookmarks',
+          id: 'bookmark-include',
-        description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? `Bookmarks` : `Bookmark`}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? `Groups` : `Group`}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.']
+          labelText: 'Bookmarks',
-      }),
+          description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? `Bookmarks` : `Bookmark`}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? `Groups` : `Group`}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
-      theme: new Control_checkbox({
+          action: () => {
-        object: state,
+            this.disable();
-        path: 'theme',
+          }
-        id: 'theme',
+        }),
-        labelText: 'Theme',
+        type: new Control_radio({
-        description: 'This includes the Colour, Accent, Fonts, Background and any saved Custom Themes.'
+          object: state,
-      }),
+          radioGroup: [
-      setup: new Control_checkbox({
+            { id: 'bookmark-type-restore', labelText: 'Replace existing bookmarks', value: 'restore' },
-        object: state,
+            { id: 'bookmark-type-append', labelText: 'Add to existing bookmarks', value: 'append' }
-        path: 'setup',
+          ],
-        id: 'setup',
+          groupName: 'bookmark-type',
-        labelText: 'Settings',
+          path: 'bookmark.type'
-        description: 'This includes Layout size and position, Header area size, Bookmark area size and other user settings.'
+        })
-      })
+      },
+      theme: {
+        include: new Control_checkbox({
+          object: state,
+          path: 'theme.include',
+          id: 'theme-include',
+          labelText: 'Theme',
+          description: 'This includes the Colour, Accent, Fonts, Background and any saved Custom Themes.'
+        })
+      },
+      setup: {
+        include: new Control_checkbox({
+          object: state,
+          path: 'setup.include',
+          id: 'setup-include',
+          labelText: 'Settings',
+          description: 'This includes Layout size and position, Header area size, Bookmark area size and other user settings.'
+        })
+      }
     }
   };
 
-  this.disable = () => {};
+  this.disable = () => {
+
+    if (state.bookmark.include) {
+      this.control.import.bookmark.type.enable();
+    } else {
+      this.control.import.bookmark.type.disable();
+    };
+
+  };
 
   this.assemble = () => {
 
     this.element.form.append(node('div', [
       this.element.description,
-      this.control.import.bookmark.wrap(),
+      this.control.import.bookmark.include.wrap(),
-      this.control.import.theme.wrap(),
+      form.wrap({
-      this.control.import.setup.wrap()
+        children: [
+          form.indent({
+            children: [
+              this.control.import.bookmark.type.wrap(),
+            ]
+          })
+        ]
+      }),
+      node('hr'),
+      this.control.import.theme.include.wrap(),
+      node('hr'),
+      this.control.import.setup.include.wrap()
     ]));
 
   };