Overleaf/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js

import _ from 'lodash'
/* eslint-disable
    camelcase,
    node/handle-callback-err,
    max-len,
    no-return-assign,
    no-unused-vars,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
 * decaffeinate suggestions:
 * DS102: Remove unnecessary code created because of implicit returns
 * DS103: Rewrite code to no longer use __guard__
 * DS207: Consider shorter variations of null checks
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
import App from '../../../base'
App.controller(
  'FileTreeController',
  function ($scope, $modal, ide, $rootScope) {
    $scope.openNewDocModal = reactBridgeParentFolderId =>
      $modal.open({
        templateUrl: 'newFileModalTemplate',
        controller: 'NewFileModalController',
        size: 'lg',
        resolve: {
          parent_folder() {
            if (reactBridgeParentFolderId) {
              return { id: reactBridgeParentFolderId }
            }
            return ide.fileTreeManager.getCurrentFolder()
          },
          projectFeatures() {
            return ide.$scope.project.features
          },
          type() {
            return 'doc'
          },
          userFeatures() {
            return ide.$scope.user.features
          },
        },
      })

    $scope.openNewFolderModal = () =>
      $modal.open({
        templateUrl: 'newFolderModalTemplate',
        controller: 'NewFolderModalController',
        resolve: {
          parent_folder() {
            return ide.fileTreeManager.getCurrentFolder()
          },
        },
      })

    $scope.openUploadFileModal = reactBridgeParentFolderId =>
      $modal.open({
        templateUrl: 'newFileModalTemplate',
        controller: 'NewFileModalController',
        size: 'lg',
        resolve: {
          projectFeatures() {
            return ide.$scope.project.features
          },
          parent_folder() {
            if (reactBridgeParentFolderId) {
              return { id: reactBridgeParentFolderId }
            }
            return ide.fileTreeManager.getCurrentFolder()
          },
          type() {
            return 'upload'
          },
          userFeatures() {
            return ide.$scope.user.features
          },
        },
      })

    if (
      window.showReactFileTree &&
      !window.FileTreeReactBridgeOpenNewDocModalListened
    ) {
      window.FileTreeReactBridgeOpenNewDocModalListened = true
      window.addEventListener(
        'FileTreeReactBridge.openNewDocModal',
        ({ detail }) => {
          if (detail.mode === 'upload') {
            $scope.openUploadFileModal(detail.parentFolderId)
          } else {
            $scope.openNewDocModal(detail.parentFolderId)
          }
        }
      )
    }

    $scope.orderByFoldersFirst = function (entity) {
      if ((entity != null ? entity.type : undefined) === 'folder') {
        return '0'
      }
      return '1'
    }

    $scope.startRenamingSelected = () => $scope.$broadcast('rename:selected')

    return ($scope.openDeleteModalForSelected = () =>
      $scope.$broadcast('delete:selected'))
  }
)

App.controller(
  'NewFolderModalController',
  function ($scope, ide, $modalInstance, $timeout, parent_folder) {
    $scope.inputs = { name: 'name' }
    $scope.state = { inflight: false }

    $modalInstance.opened.then(() =>
      $timeout(() => $scope.$broadcast('open'), 200)
    )

    $scope.create = function () {
      const { name } = $scope.inputs
      if (name == null || name.length === 0) {
        return
      }
      $scope.state.inflight = true
      return ide.fileTreeManager
        .createFolder(name, $scope.parent_folder)
        .then(function () {
          $scope.state.inflight = false
          return $modalInstance.dismiss('done')
        })
        .catch(function (response) {
          const { data } = response
          $scope.error = data
          return ($scope.state.inflight = false)
        })
    }

    return ($scope.cancel = () => $modalInstance.dismiss('cancel'))
  }
)

App.controller(
  'DuplicateFileModalController',
  function ($scope, $modalInstance, fileName) {
    $scope.fileName = fileName
    $scope.cancel = () => $modalInstance.dismiss('cancel')
  }
)

App.controller(
  'NewFileModalController',
  function (
    $scope,
    ide,
    type,
    parent_folder,
    $modalInstance,
    eventTracking,
    projectFeatures,
    userFeatures
  ) {
    $scope.file_count = ide.fileTreeManager.getFullCount()
    $scope.type = type
    $scope.parent_folder = parent_folder
    $scope.state = {
      inflight: false,
      valid: true,
    }
    $scope.cancel = () => $modalInstance.dismiss('cancel')
    $scope.create = () => $scope.$broadcast('create')

    const hasMendeleyFeature =
      (projectFeatures && projectFeatures.references) ||
      (projectFeatures && projectFeatures.mendeley) ||
      (userFeatures && userFeatures.references) ||
      (userFeatures && userFeatures.mendeley)

    const hasZoteroFeature =
      (projectFeatures && projectFeatures.references) ||
      (projectFeatures && projectFeatures.zotero) ||
      (userFeatures && userFeatures.references) ||
      (userFeatures && userFeatures.zotero)

    $scope.$watch('type', function () {
      if ($scope.type === 'mendeley' && !hasMendeleyFeature) {
        eventTracking.send(
          'subscription-funnel',
          'editor-click-feature',
          $scope.type
        )
      }
      if ($scope.type === 'zotero' && !hasZoteroFeature) {
        eventTracking.send(
          'subscription-funnel',
          'editor-click-feature',
          $scope.type
        )
      }
    })
    $scope.$on('done', (e, opts = {}) => {
      const isBibFile = opts.name && /^.*\.bib$/.test(opts.name)
      if (opts.shouldReindexReferences || isBibFile) {
        ide.$scope.$emit('references:should-reindex', {})
      }
      $modalInstance.dismiss('done')
    })

    if (
      window.showReactFileTree &&
      !window.FileTreeReactBridgeOpenNewFileModalListened
    ) {
      window.FileTreeReactBridgeOpenNewFileModalListened = true
      window.addEventListener(
        'FileTreeReactBridge.openNewFileModal',
        ({ detail }) => {
          if (detail.done) {
            ide.$scope.FileTreeReactBridgePromise.resolve()
          }
          if (detail.error) {
            ide.$scope.FileTreeReactBridgePromise.reject(detail)
          }
        }
      )
    }
  }
)

App.controller('NewDocModalController', function ($scope, ide, $timeout) {
  $scope.inputs = { name: 'name.tex' }

  $timeout(() => $scope.$broadcast('open'), 200)

  return $scope.$on('create', function () {
    const { name } = $scope.inputs
    if (name == null || name.length === 0) {
      return
    }
    $scope.state.inflight = true
    return ide.fileTreeManager
      .createDoc(name, $scope.parent_folder)
      .then(function () {
        $scope.state.inflight = false
        return $scope.$emit('done')
      })
      .catch(function (response) {
        const { data } = response
        $scope.error = data
        $scope.state.inflight = false
      })
      .finally(function () {
        if (!$scope.$$phase) {
          $scope.$apply()
        }
      })
  })
})

App.controller(
  'UploadFileModalController',
  function ($scope, $rootScope, ide, $timeout, $window) {
    $scope.parent_folder_id =
      $scope.parent_folder != null ? $scope.parent_folder.id : undefined
    $scope.project_id = ide.project_id
    $scope.tooManyFiles = false
    $scope.rateLimitHit = false
    $scope.secondsToRedirect = 10
    $scope.notLoggedIn = false
    $scope.conflicts = []
    $scope.control = {}

    const needToLogBackIn = function () {
      $scope.notLoggedIn = true
      var decreseTimeout = () =>
        $timeout(function () {
          if ($scope.secondsToRedirect === 0) {
            return ($window.location.href = `/login?redir=/project/${ide.project_id}`)
          } else {
            decreseTimeout()
            return ($scope.secondsToRedirect = $scope.secondsToRedirect - 1)
          }
        }, 1000)

      return decreseTimeout()
    }

    $scope.max_files = 40
    $scope.onComplete = (error, name, response) =>
      $timeout(function () {
        uploadCount--
        if (response.success) {
          $rootScope.$broadcast('file:upload:complete', response)
        }
        if (uploadCount === 0 && response != null && response.success) {
          return $scope.$emit('done', { name: name })
        }
      }, 250)

    $scope.onValidateBatch = function (files) {
      if (files.length > $scope.max_files) {
        $timeout(() => ($scope.tooManyFiles = true), 1)
        return false
      } else {
        return true
      }
    }

    $scope.onError = function (id, name, reason) {
      console.log(id, name, reason)
      if (reason.indexOf('429') !== -1) {
        return ($scope.rateLimitHit = true)
      } else if (reason.indexOf('403') !== -1) {
        return needToLogBackIn()
      }
    }

    let _uploadTimer = null
    const uploadIfNoConflicts = function () {
      if ($scope.conflicts.length === 0) {
        return $scope.doUpload()
      }
    }

    var uploadCount = 0
    $scope.onSubmit = function (id, name) {
      uploadCount++
      if (ide.fileTreeManager.existsInFolder($scope.parent_folder_id, name)) {
        $scope.conflicts.push(name)
        $scope.$apply()
      }
      if (_uploadTimer == null) {
        _uploadTimer = setTimeout(function () {
          _uploadTimer = null
          return uploadIfNoConflicts()
        }, 0)
      }
      return true
    }

    $scope.onCancel = function (id, name) {
      uploadCount--
      const index = $scope.conflicts.indexOf(name)
      if (index > -1) {
        $scope.conflicts.splice(index, 1)
      }
      $scope.$apply()
      return uploadIfNoConflicts()
    }

    return ($scope.doUpload = () =>
      __guard__($scope.control != null ? $scope.control.q : undefined, x =>
        x.uploadStoredFiles()
      ))
  }
)

App.controller(
  'ProjectLinkedFileModalController',
  function ($scope, ide, $timeout) {
    $scope.data = {
      projects: null, // or []
      selectedProjectId: null,
      projectEntities: null, // or []
      projectOutputFiles: null, // or []
      selectedProjectEntity: null,
      selectedProjectOutputFile: null,
      buildId: null,
      name: null,
    }
    $scope.state.inFlight = {
      projects: false,
      entities: false,
      compile: false,
    }
    $scope.state.isOutputFilesMode = false
    $scope.state.error = false

    $scope.$watch('data.selectedProjectId', function (newVal, oldVal) {
      if (!newVal) {
        return
      }
      $scope.data.selectedProjectEntity = null
      $scope.data.selectedProjectOutputFile = null
      if ($scope.state.isOutputFilesMode) {
        return $scope.compileProjectAndGetOutputFiles(
          $scope.data.selectedProjectId
        )
      } else {
        return $scope.getProjectEntities($scope.data.selectedProjectId)
      }
    })

    $scope.$watch('state.isOutputFilesMode', function (newVal, oldVal) {
      if (!newVal && !oldVal) {
        return
      }
      $scope.data.selectedProjectOutputFile = null
      if (newVal === true) {
        return $scope.compileProjectAndGetOutputFiles(
          $scope.data.selectedProjectId
        )
      } else {
        return $scope.getProjectEntities($scope.data.selectedProjectId)
      }
    })

    // auto-set filename based on selected file
    $scope.$watch('data.selectedProjectEntity', function (newVal, oldVal) {
      if (!newVal) {
        return
      }
      const fileName = newVal.split('/').reverse()[0]
      if (fileName) {
        $scope.data.name = fileName
      }
    })

    // auto-set filename based on selected file
    $scope.$watch('data.selectedProjectOutputFile', function (newVal, oldVal) {
      if (!newVal) {
        return
      }
      if (newVal === 'output.pdf') {
        const project = _.find(
          $scope.data.projects,
          p => p._id === $scope.data.selectedProjectId
        )
        $scope.data.name =
          (project != null ? project.name : undefined) != null
            ? `${project.name}.pdf`
            : 'output.pdf'
      } else {
        const fileName = newVal.split('/').reverse()[0]
        if (fileName) {
          $scope.data.name = fileName
        }
      }
    })

    const _setInFlight = type => ($scope.state.inFlight[type] = true)

    const _reset = function (opts) {
      const isError = opts.err === true
      const { inFlight } = $scope.state
      inFlight.projects = inFlight.entities = inFlight.compile = false
      $scope.state.inflight = false
      return ($scope.state.error = isError)
    }

    $scope.toggleOutputFilesMode = function () {
      if (!$scope.data.selectedProjectId) {
        return
      }
      return ($scope.state.isOutputFilesMode = !$scope.state.isOutputFilesMode)
    }

    $scope.shouldEnableProjectSelect = function () {
      const { state, data } = $scope
      return !state.inFlight.projects && data.projects
    }

    $scope.hasNoProjects = function () {
      const { state, data } = $scope
      return (
        !state.inFlight.projects &&
        (data.projects == null || data.projects.length === 0)
      )
    }

    $scope.shouldEnableProjectEntitySelect = function () {
      const { state, data } = $scope
      return (
        !state.inFlight.projects &&
        !state.inFlight.entities &&
        data.projects &&
        data.selectedProjectId
      )
    }

    $scope.shouldEnableProjectOutputFileSelect = function () {
      const { state, data } = $scope
      return (
        !state.inFlight.projects &&
        !state.inFlight.compile &&
        data.projects &&
        data.selectedProjectId
      )
    }

    const validate = function () {
      const { state } = $scope
      const { data } = $scope
      $scope.state.valid =
        !state.inFlight.projects &&
        !state.inFlight.entities &&
        data.projects &&
        data.selectedProjectId &&
        ((!$scope.state.isOutputFilesMode &&
          data.projectEntities &&
          data.selectedProjectEntity) ||
          ($scope.state.isOutputFilesMode &&
            data.projectOutputFiles &&
            data.selectedProjectOutputFile)) &&
        data.name
    }
    $scope.$watch('state', validate, true)
    $scope.$watch('data', validate, true)

    $scope.getUserProjects = function () {
      _setInFlight('projects')
      return ide.$http
        .get('/user/projects', {
          _csrf: window.csrfToken,
        })
        .then(function (resp) {
          $scope.data.projectEntities = null
          $scope.data.projects = resp.data.projects.filter(
            p => p._id !== ide.project_id
          )
          return _reset({ err: false })
        })
        .catch(err => _reset({ err: true }))
    }

    $scope.getProjectEntities = project_id => {
      _setInFlight('entities')
      return ide.$http
        .get(`/project/${project_id}/entities`, {
          _csrf: window.csrfToken,
        })
        .then(function (resp) {
          if ($scope.data.selectedProjectId === resp.data.project_id) {
            $scope.data.projectEntities = resp.data.entities
            return _reset({ err: false })
          }
        })
        .catch(err => _reset({ err: true }))
    }

    $scope.compileProjectAndGetOutputFiles = project_id => {
      _setInFlight('compile')
      return ide.$http
        .post(`/project/${project_id}/compile`, {
          check: 'silent',
          draft: false,
          incrementalCompilesEnabled: false,
          _csrf: window.csrfToken,
        })
        .then(function (resp) {
          if (resp.data.status === 'success') {
            const filteredFiles = resp.data.outputFiles.filter(f =>
              f.path.match(/.*\.(pdf|png|jpeg|jpg|gif)/)
            )
            $scope.data.projectOutputFiles = filteredFiles
            $scope.data.buildId = __guard__(
              filteredFiles != null ? filteredFiles[0] : undefined,
              x => x.build
            )
            console.log('>> build_id', $scope.data.buildId)
            return _reset({ err: false })
          } else {
            $scope.data.projectOutputFiles = null
            return _reset({ err: true })
          }
        })
        .catch(function (err) {
          console.error(err)
          return _reset({ err: true })
        })
    }

    $scope.init = () => $scope.getUserProjects()
    $timeout($scope.init, 0)

    return $scope.$on('create', function () {
      let payload, provider
      const projectId = $scope.data.selectedProjectId
      const { name } = $scope.data
      if ($scope.state.isOutputFilesMode) {
        provider = 'project_output_file'
        payload = {
          source_project_id: projectId,
          source_output_file_path: $scope.data.selectedProjectOutputFile,
          build_id: $scope.data.buildId,
        }
      } else {
        provider = 'project_file'
        payload = {
          source_project_id: projectId,
          source_entity_path: $scope.data.selectedProjectEntity,
        }
      }
      _setInFlight('create')
      ide.fileTreeManager
        .createLinkedFile(name, $scope.parent_folder, provider, payload)
        .then(function () {
          _reset({ err: false })
          return $scope.$emit('done', { name: name })
        })
        .catch(function (response) {
          const { data } = response
          $scope.error = data
        })
        .finally(function () {
          if (!$scope.$$phase) {
            $scope.$apply()
          }
        })
    })
  }
)

export default App.controller(
  'UrlLinkedFileModalController',
  function ($scope, ide, $timeout) {
    $scope.inputs = {
      name: '',
      url: '',
    }
    $scope.nameChangedByUser = false

    $timeout(() => $scope.$broadcast('open'), 200)

    const validate = function () {
      const { name, url } = $scope.inputs
      if (name == null || name.length === 0) {
        return ($scope.state.valid = false)
      } else if (url == null || url.length === 0) {
        return ($scope.state.valid = false)
      } else {
        return ($scope.state.valid = true)
      }
    }
    $scope.$watch('inputs.name', validate)
    $scope.$watch('inputs.url', validate)

    $scope.$watch('inputs.url', function (url) {
      if (url != null && url !== '' && !$scope.nameChangedByUser) {
        url = url.replace('://', '') // Ignore http:// etc
        const parts = url.split('/').reverse()
        if (parts.length > 1) {
          // Wait for at one /
          return ($scope.inputs.name = parts[0])
        }
      }
    })

    return $scope.$on('create', function () {
      const { name, url } = $scope.inputs
      if (name == null || name.length === 0) {
        return
      }
      if (url == null || url.length === 0) {
        return
      }
      $scope.state.inflight = true
      return ide.fileTreeManager
        .createLinkedFile(name, $scope.parent_folder, 'url', { url })
        .then(function () {
          $scope.state.inflight = false
          return $scope.$emit('done', { name: name })
        })
        .catch(function (response) {
          const { data } = response
          $scope.error = data
          return ($scope.state.inflight = false)
        })
        .finally(function () {
          if (!$scope.$$phase) {
            $scope.$apply()
          }
        })
    })
  }
)

function __guard__(value, transform) {
  return typeof value !== 'undefined' && value !== null
    ? transform(value)
    : undefined
}