Port import/export dialogs to Vue

scripts/build-vue-comp.ps1

@@ -12,3 +12,5 @@ $CLI_PATH="node_modules/.bin"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name bookmarks-menu  "$COMPONENTS_FOLDER/BookmarksMenu.vue"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name response-menu  "$COMPONENTS_FOLDER/ResponseMenu.vue"
 & "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name response-viewer  "$COMPONENTS_FOLDER/ResponseViewer.vue"
+& "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name import-dialog  "$COMPONENTS_FOLDER/ImportDialog.vue"
+& "$CLI_PATH/vue-cli-service.ps1" build --target lib --formats umd --dest $DIST_FOLDER --no-clean --name export-dialog  "$COMPONENTS_FOLDER/ExportDialog.vue"

scripts/build-vue-comp.sh

@@ -12,4 +12,6 @@ ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDE
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name add-folder-button  ${COMPONENTS_FOLDER}/AddFolderButton.vue
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name bookmarks-menu  ${COMPONENTS_FOLDER}/BookmarksMenu.vue
 ${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-menu  ${COMPONENTS_FOLDER}/ResponseMenu.vue
-${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-viewer  ${COMPONENTS_FOLDER}/ResponseViewer.vue
+${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name response-viewer  ${COMPONENTS_FOLDER}/ResponseViewer.vue
+${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name import-dialog  ${COMPONENTS_FOLDER}/ImportDialog.vue
+${CLI_PATH}/vue-cli-service build --target lib --formats umd --dest ${DIST_FOLDER} --no-clean --name export-dialog  ${COMPONENTS_FOLDER}/ExportDialog.vue

src/js/app/components/ExportButton.vue

@@ -13,7 +13,7 @@ import bacheca from 'Services/bacheca'
 export default {
   methods: {
     action() {
-      bacheca.publish('exportDialog')
+      bacheca.publish('showExportDialog')
     },
   },
 }

src/js/app/components/ExportDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <r-dialog
+    title="Export bookmarks"
+    :show-footer="true"
+    @dismiss-dialog="$emit('dismiss-dialog')">
+    <div class="form-group">
+      To:
+      <input type="radio" value="har" v-model="exportSrc" />
+      <label style="margin-left: 2px">har</label>
+    </div>
+    <template v-slot:footer>
+      <button class="btn btn-default" @click="exportBookmarks">Export</button>
+      <button class="btn btn-default" @click="dismissDialog">Cancel</button>
+    </template>
+  </r-dialog>
+</template>
+
+<script>
+import RDialog from 'Components/RDialog.vue'
+import bacheca from 'Services/bacheca'
+
+export default {
+  name: 'ExportDialog',
+  data() {
+    return {
+      exportSrc: 'har',
+    }
+  },
+  methods: {
+    exportBookmarks() {
+      bacheca.publish('exportBookmarks')
+      this.dismissDialog()
+    },
+    dismissDialog() {
+      this.$emit('dismiss-dialog')
+    },
+  },
+  components: {
+    RDialog,
+  },
+}
+</script>

src/js/app/components/ImportButton.vue

@@ -13,7 +13,7 @@ import bacheca from 'Services/bacheca'
 export default {
   methods: {
     action() {
-      bacheca.publish('importDialog')
+      bacheca.publish('showImportDialog')
     },
   },
 }

src/js/app/components/ImportDialog.vue

@@ -0,0 +1,46 @@
+<template>
+  <r-dialog
+    title="Import bookmarks"
+    :show-footer="true"
+    @dismiss-dialog="$emit('dismiss-dialog')">
+    <div class="form-group">
+      From:
+      <input type="radio" value="har" v-model="importSrc" />
+      <label style="margin-left: 2px">har</label>
+    </div>
+    <div class="form-group">
+      <input type="file" ref="import-file" id="import-file" />
+    </div>
+    <template v-slot:footer>
+      <button class="btn btn-default" @click="importBookmarks">Import</button>
+      <button class="btn btn-default" @click="dismissDialog">Cancel</button>
+    </template>
+  </r-dialog>
+</template>
+
+<script>
+import RDialog from 'Components/RDialog.vue'
+import bacheca from 'Services/bacheca'
+
+export default {
+  name: 'ImportDialog',
+  data() {
+    return {
+      importSrc: 'har',
+    }
+  },
+  methods: {
+    importBookmarks() {
+      bacheca.publish('importBookmarks')
+      this.dismissDialog()
+    },
+    dismissDialog() {
+      this.$refs['import-file'].value = ''
+      this.$emit('dismiss-dialog')
+    },
+  },
+  components: {
+    RDialog,
+  },
+}
+</script>

src/js/app/components/apps/DialogsApp.vue

@@ -13,6 +13,12 @@
       v-show="showFolderDialog"
       :selected-folder="selectedFolder"
       @dismiss-dialog="showFolderDialog = false"></folder-dialog>
+    <import-dialog
+      v-show="showImportDialog"
+      @dismiss-dialog="showImportDialog = false"></import-dialog>
+    <export-dialog
+      v-show="showExportDialog"
+      @dismiss-dialog="showExportDialog = false"></export-dialog>
   </div>
 </template>
 
@@ -22,6 +28,8 @@ import AboutDialog from 'Components/AboutDialog.vue'
 import CreditsDialog from 'Components/CreditsDialog.vue'
 import DonateDialog from 'Components/DonateDialog.vue'
 import FolderDialog from 'Components/FolderDialog.vue'
+import ImportDialog from 'Components/ImportDialog.vue'
+import ExportDialog from 'Components/ExportDialog.vue'
 
 export default {
   name: 'DialogsApp',
@@ -36,13 +44,17 @@ export default {
       this.showFolderDialog = true
       this.selectedFolder = selectedFolder
     })
+    bacheca.subscribe('showImportDialog', () => (this.showImportDialog = true))
+    bacheca.subscribe('showExportDialog', () => (this.showExportDialog = true))
   },
   data() {
     return {
       showAboutDialog: false,
       showCreditsDialog: false,
       showDonateDialog: false,
       showFolderDialog: false,
+      showImportDialog: false,
+      showExportDialog: false,
       selectedFolder: false,
     }
   },
@@ -51,6 +63,8 @@ export default {
     CreditsDialog,
     DonateDialog,
     FolderDialog,
+    ImportDialog,
+    ExportDialog,
   },
 }
 </script>

src/js/app/components/bookmarks/bookmarksVm.js

@@ -46,10 +46,6 @@ define([
     const bookmarkToDeleteName = ko.observable()
     const tryToDeleteFolder = ko.observable(false)
     const showBookmarkDeleteDialog = ko.observable(false)
-    const showImportDialog = ko.observable(false)
-    const showExportDialog = ko.observable(false)
-    const importSrc = ko.observable('har')
-    const exportSrc = ko.observable('har')
 
     // contextual menu
     const showBookmarkContextMenu = ko.observable(false)
@@ -115,15 +111,6 @@ define([
       deleteChildrenBookmarks(false)
     }
 
-    const dismissImportDialog = () => {
-      showImportDialog(false)
-      document.getElementById('import-file').value = ''
-    }
-
-    const dismissExportDialog = () => {
-      showExportDialog(false)
-    }
-
     const deleteBookmark = (bookmark, deleteChildrenBookmarks) => {
       if (bookmark.folder) {
         const containerFolder = bookmarks().find(
@@ -158,30 +145,10 @@ define([
       }
     }
 
-    const importBookmarks = () => {
-      _handleImport()
-      dismissImportDialog()
-    }
-
-    const exportBookmarks = () => {
-      _handleExport()
-      dismissExportDialog()
-    }
-
-    const _importDialog = () => {
-      showImportDialog(true)
-    }
-
-    const _exportDialog = () => {
-      showExportDialog(true)
-    }
-
     const closeDialogOnExcape = (data, event) => {
       const excape = 27
       if (event.keyCode === excape) {
         showBookmarkDeleteDialog(false)
-        showImportDialog(false)
-        showExportDialog(false)
         showBookmarkContextMenu(false)
         showFolderContextMenu(false)
       }
@@ -408,17 +375,11 @@ define([
      */
     bacheca.subscribe('newFolder', _addFolder)
     bacheca.subscribe('sortBookmarks', _sortBookmarks)
-    bacheca.subscribe('exportDialog', _exportDialog)
-    bacheca.subscribe('importDialog', _importDialog)
+    bacheca.subscribe('importBookmarks', _handleImport)
+    bacheca.subscribe('exportBookmarks', _handleExport)
 
     return {
       closeDialogOnExcape,
-      showImportDialog,
-      showExportDialog,
-      dismissImportDialog,
-      dismissExportDialog,
-      importSrc,
-      exportSrc,
       bookmarks,
       showBookmarkDeleteDialog,
       bookmarkToDeleteName,
@@ -431,8 +392,6 @@ define([
       deleteBookmarkFromView,
       loadBookmarkObj,
       expandFolder,
-      importBookmarks,
-      exportBookmarks,
       exportSelectedBookmarks,
       // context menu
       contextMenu,

src/js/app/components/bookmarks/bookmarks_view.html

@@ -159,51 +159,4 @@
       </li>
     </ul>
   </div>
-
-  <div
-    id="import-dialog"
-    class="panel panel-primary dialog"
-    data-bind="visible: showImportDialog">
-    <div class="panel-heading">Import bookmarks</div>
-    <div class="panel-body">
-      <div class="form-group">
-        From:
-        <input type="radio" value="har" data-bind="checked: importSrc" />
-        <label style="margin-left: 2px">har</label>
-      </div>
-      <div class="form-group">
-        <input type="file" id="import-file" />
-      </div>
-    </div>
-    <div class="panel-footer">
-      <button class="btn btn-default" data-bind="click: importBookmarks">
-        Import
-      </button>
-      <button class="btn btn-default" data-bind="click: dismissImportDialog">
-        Cancel
-      </button>
-    </div>
-  </div>
-
-  <div
-    id="export-dialog"
-    class="panel panel-primary dialog"
-    data-bind="visible: showExportDialog">
-    <div class="panel-heading">Export bookmarks</div>
-    <div class="panel-body">
-      <div class="form-group">
-        To:
-        <input type="radio" value="har" data-bind="checked: exportSrc" />
-        <label style="margin-left: 2px">har</label>
-      </div>
-    </div>
-    <div class="panel-footer">
-      <button class="btn btn-default" data-bind="click: exportBookmarks">
-        Export
-      </button>
-      <button class="btn btn-default" data-bind="click: dismissExportDialog">
-        Cancel
-      </button>
-    </div>
-  </div>
 </html>