Stackedit/src/components/menus/SyncMenu.vue

<template>
  <div class="side-bar__panel side-bar__panel--menu">
    <div class="side-bar__info" v-if="isCurrentTemp">
      <p><b>{{currentFileName}}</b> can not be synchronized as it's a temporary file.</p>
    </div>
    <div v-else>
      <div class="side-bar__info" v-if="noToken">
        <p>You have to <b>link an account</b> to start syncing files.</p>
      </div>
      <div class="side-bar__info" v-if="syncLocations.length">
        <p><b>{{currentFileName}}</b> is already synchronized.</p>
        <menu-entry @click.native="requestSync">
          <icon-sync slot="icon"></icon-sync>
          <div>Synchronize now</div>
          <span>Download / upload file changes.</span>
        </menu-entry>
        <menu-entry @click.native="manageSync">
          <icon-view-list slot="icon"></icon-view-list>
          <div>File synchronization</div>
          <span>Manage current file synchronized locations.</span>
        </menu-entry>
      </div>
      <hr>
      <div v-for="token in googleDriveTokens" :key="token.sub">
        <menu-entry @click.native="openGoogleDrive(token)">
          <icon-provider slot="icon" provider-id="googleDrive"></icon-provider>
          <div>Open from Google Drive</div>
          <span>{{token.name}}</span>
        </menu-entry>
        <menu-entry @click.native="saveGoogleDrive(token)">
          <icon-provider slot="icon" provider-id="googleDrive"></icon-provider>
          <div>Save on Google Drive</div>
          <span>{{token.name}}</span>
        </menu-entry>
      </div>
      <div v-for="token in dropboxTokens" :key="token.sub">
        <menu-entry @click.native="openDropbox(token)">
          <icon-provider slot="icon" provider-id="dropbox"></icon-provider>
          <div>Open from Dropbox</div>
          <span>{{token.name}}</span>
        </menu-entry>
        <menu-entry @click.native="saveDropbox(token)">
          <icon-provider slot="icon" provider-id="dropbox"></icon-provider>
          <div>Save on Dropbox</div>
          <span>{{token.name}}</span>
        </menu-entry>
      </div>
      <div v-for="token in githubTokens" :key="token.sub">
        <menu-entry @click.native="openGithub(token)">
          <icon-provider slot="icon" provider-id="github"></icon-provider>
          <div>Open from GitHub</div>
          <span>{{token.name}}</span>
        </menu-entry>
        <menu-entry @click.native="saveGithub(token)">
          <icon-provider slot="icon" provider-id="github"></icon-provider>
          <div>Save on GitHub</div>
          <span>{{token.name}}</span>
        </menu-entry>
        <menu-entry @click.native="saveGist(token)">
          <icon-provider slot="icon" provider-id="gist"></icon-provider>
          <div>Save on Gist</div>
          <span>{{token.name}}</span>
        </menu-entry>
      </div>
      <hr>
      <menu-entry @click.native="addGoogleDriveAccount">
        <icon-provider slot="icon" provider-id="googleDrive"></icon-provider>
        <span>Add Google Drive account</span>
      </menu-entry>
      <menu-entry @click.native="addDropboxAccount">
        <icon-provider slot="icon" provider-id="dropbox"></icon-provider>
        <span>Add Dropbox account</span>
      </menu-entry>
      <menu-entry @click.native="addGithubAccount">
        <icon-provider slot="icon" provider-id="github"></icon-provider>
        <span>Add GitHub account</span>
      </menu-entry>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import MenuEntry from './common/MenuEntry';
import googleHelper from '../../services/providers/helpers/googleHelper';
import dropboxHelper from '../../services/providers/helpers/dropboxHelper';
import githubHelper from '../../services/providers/helpers/githubHelper';
import googleDriveProvider from '../../services/providers/googleDriveProvider';
import dropboxProvider from '../../services/providers/dropboxProvider';
import githubProvider from '../../services/providers/githubProvider';
import syncSvc from '../../services/syncSvc';
import store from '../../store';

const tokensToArray = (tokens, filter = () => true) => Object.keys(tokens)
  .map(sub => tokens[sub])
  .filter(token => filter(token))
  .sort((token1, token2) => token1.name.localeCompare(token2.name));

const openSyncModal = (token, type) => store.dispatch('modal/open', {
  type,
  token,
}).then(syncLocation => syncSvc.createSyncLocation(syncLocation));

const onCancel = () => {};

export default {
  components: {
    MenuEntry,
  },
  computed: {
    ...mapState('queue', [
      'isSyncRequested',
    ]),
    ...mapGetters('workspace', [
      'syncToken',
    ]),
    ...mapGetters('file', [
      'isCurrentTemp',
    ]),
    ...mapGetters('syncLocation', {
      syncLocations: 'current',
    }),
    currentFileName() {
      return this.$store.getters['file/current'].name;
    },
    googleDriveTokens() {
      return tokensToArray(this.$store.getters['data/googleTokens'], token => token.isDrive);
    },
    dropboxTokens() {
      return tokensToArray(this.$store.getters['data/dropboxTokens']);
    },
    githubTokens() {
      return tokensToArray(this.$store.getters['data/githubTokens']);
    },
    noToken() {
      return !this.googleDriveTokens.length
        && !this.dropboxTokens.length
        && !this.githubTokens.length;
    },
  },
  methods: {
    requestSync() {
      if (!this.isSyncRequested) {
        syncSvc.requestSync();
      }
    },
    manageSync() {
      return this.$store.dispatch('modal/open', 'syncManagement');
    },
    addGoogleDriveAccount() {
      return this.$store.dispatch('modal/open', {
        type: 'googleDriveAccount',
        onResolve: () => googleHelper.addDriveAccount(!store.getters['data/localSettings'].googleDriveRestrictedAccess),
      })
        .catch(onCancel);
    },
    addDropboxAccount() {
      return this.$store.dispatch('modal/open', {
        type: 'dropboxAccount',
        onResolve: () => dropboxHelper.addAccount(!store.getters['data/localSettings'].dropboxRestrictedAccess),
      })
        .catch(onCancel);
    },
    addGithubAccount() {
      return this.$store.dispatch('modal/open', {
        type: 'githubAccount',
        onResolve: () => githubHelper.addAccount(store.getters['data/localSettings'].githubRepoFullAccess),
      })
        .catch(onCancel);
    },
    openGoogleDrive(token) {
      return googleHelper.openPicker(token, 'doc')
        .then(files => this.$store.dispatch(
          'queue/enqueue',
          () => googleDriveProvider.openFiles(token, files),
        ));
    },
    openDropbox(token) {
      return dropboxHelper.openChooser(token)
        .then(paths => this.$store.dispatch(
          'queue/enqueue',
          () => dropboxProvider.openFiles(token, paths),
        ));
    },
    saveGoogleDrive(token) {
      return openSyncModal(token, 'googleDriveSave')
        .catch(onCancel);
    },
    saveDropbox(token) {
      return openSyncModal(token, 'dropboxSave')
        .catch(onCancel);
    },
    openGithub(token) {
      return store.dispatch('modal/open', {
        type: 'githubOpen',
        token,
      })
        .then(syncLocation => this.$store.dispatch(
          'queue/enqueue',
          () => githubProvider.openFile(token, syncLocation),
        ));
    },
    saveGithub(token) {
      return openSyncModal(token, 'githubSave')
        .catch(onCancel);
    },
    saveGist(token) {
      return openSyncModal(token, 'gistSync')
        .catch(onCancel);
    },
  },
};
</script>