feat: Files drawer improvements + git clone dialog (wip) + git prefs …

…(wip)

src-electron/handlers.js

@@ -16,19 +16,23 @@ export async function openDocument (mainWindow) {
   })
   if (!files.canceled) {
     for (const fl of files.filePaths) {
-      const fileContents = await fs.readFile(fl, 'utf8')
-      const filePath = path.parse(fl)
-      mainWindow.webContents.send('openDocument', {
-        type: filePath.ext.slice(1),
-        path: fl,
-        fileName: filePath.base,
-        data: fileContents
-      })
-      app.addRecentDocument(fl)
+      await loadDocument(fl)
     }
   }
 }
 
+async function loadDocument (mainWindow, filePath) {
+  const fileContents = await fs.readFile(filePath, 'utf8')
+  const pathInfo = path.parse(filePath)
+  mainWindow.webContents.send('openDocument', {
+    type: pathInfo.ext.slice(1),
+    path: filePath,
+    fileName: pathInfo.base,
+    data: fileContents
+  })
+  app.addRecentDocument(filePath)
+}
+
 export async function saveDocument (mainWindow, filePath, contents) {
   try {
     await fs.writeFile(filePath, contents, 'utf8')
@@ -118,6 +122,9 @@ export function registerCallbacks (mainWindow, mainMenu) {
   ipcMain.on('promptSaveAs', (ev, opts) => {
     saveDocumentAs(mainWindow, opts.type, opts.fileName)
   })
+  ipcMain.on('openFromPath', (ev, opts) => {
+    loadDocument(mainWindow, opts.path)
+  })
   ipcMain.handle('promptWorkingDirectory', async (ev, opts) => {
     return selectWorkingDirectory(mainWindow, opts.current)
   })

src/components/CloneRepositoryDialog.vue

@@ -0,0 +1,128 @@
+<template lang="pug">
+q-dialog(ref='dialogRef' @hide='onDialogHide' no-backdrop-dismiss)
+  q-card.mica(style='min-width: 800px;')
+    q-card-section.flex.items-center.bg-light-blue-10
+      q-icon(name='mdi-git', left, size='sm')
+      span Clone Repository
+    q-card-section.card-border
+      q-card-section
+        .row
+          .col-12
+            .text-body2 Git Repository URL
+            .text-caption.text-grey-5 The HTTPS Web URL of the repository to clone.
+          .col-12
+            q-input.q-mt-sm(
+              autofocus
+              color='white'
+              outlined
+              dense
+              placeholder='e.g. https://github.com/rfc-editor/draft-abc-def-ghi'
+              clearable
+              v-model='state.url'
+              tabindex='0'
+              )
+              template(#prepend)
+                q-icon(name='mdi-source-branch')
+        .row.q-mt-lg
+          .col-12
+            .text-body2 Local Target Directory
+            .text-caption.text-grey-5 The destination folder will be created automatically if it doesn't exist.
+          .col-12
+            q-input.q-mt-sm(
+              autofocus
+              color='white'
+              dense
+              outlined
+              clearable
+              v-model='state.target'
+              tabindex='1'
+              )
+              template(#prepend)
+                q-icon(name='mdi-folder-wrench-outline')
+        .row.q-mt-lg
+          .col
+            .text-body2 Switch Working Directory
+            .text-caption.text-grey-5 Automatically set the local target directory as the working directory.
+          .col-auto
+            q-toggle(
+              v-model='editorStore.formatOnType'
+            )
+      q-card-actions(align='right')
+        q-btn(
+          outline
+          label='Cancel'
+          color='grey-5'
+          padding='xs md'
+          @click='onDialogCancel'
+          tabindex='4'
+          )
+        q-btn(
+          unelevated
+          label='Clone'
+          color='primary'
+          padding='xs md'
+          @click='cloneRepo'
+          tabindex='3'
+          )
+
+</template>
+
+<script setup>
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { reactive } from 'vue'
+// import { useDocsStore } from 'src/stores/docs'
+import { useEditorStore } from 'src/stores/editor'
+
+const $q = useQuasar()
+
+// EMITS
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+])
+
+// STORES
+
+// const docsStore = useDocsStore()
+const editorStore = useEditorStore()
+
+// QUASAR
+
+const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } = useDialogPluginComponent()
+
+// STATE
+
+const state = reactive({
+  url: '',
+  target: editorStore.workingDirectory
+})
+
+// METHODS
+
+async function cloneRepo () {
+  try {
+    if (!state.url) {
+      throw new Error('You must enter a valid URL!')
+    }
+    if (!state.target) {
+      throw new Error('You must enter a valid local target directory!')
+    }
+
+    $q.notify({
+      message: 'Not yet implemented!',
+      color: 'negative',
+      icon: 'mdi-alert'
+    })
+
+    onDialogOK()
+  } catch (err) {
+    $q.notify({
+      message: 'Failed to clone repository',
+      caption: err.message,
+      color: 'negative',
+      icon: 'mdi-alert'
+    })
+  }
+}
+
+</script>

src/components/DrawerFiles.vue

@@ -3,17 +3,46 @@
   .flex.items-center
     .text-caption.text-light-blue-3
       strong Files
-      q-tooltip {{ editorStore.workingDirectory }}
-    q-space
-    q-btn(
-      v-if='editorStore.workingDirectory'
-      size='sm'
-      icon='mdi-folder-edit'
-      padding='xs xs'
-      text-color='light-blue-3'
-      @click='setWorkingDirectory'
-      )
-      q-tooltip Set Working Directory...
+    template(v-if='editorStore.workingDirectory')
+      q-icon.q-ml-sm(name='mdi-information-outline' color='light-blue-3')
+        q-tooltip {{ editorStore.workingDirectory }}
+      q-space
+      //- q-btn(
+      //-   flat
+      //-   size='sm'
+      //-   icon='mdi-folder-plus-outline'
+      //-   padding='xs xs'
+      //-   text-color='light-blue-3'
+      //-   @click='setWorkingDirectory'
+      //-   )
+      //-   q-tooltip Create Folder
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-format-vertical-align-center'
+        padding='xs xs'
+        text-color='light-blue-3'
+        @click='collapse'
+        )
+        q-tooltip Collapse Folders
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-refresh'
+        padding='xs xs'
+        text-color='light-blue-3'
+        @click='reloadWorkingDirectory'
+        )
+        q-tooltip Refresh
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-folder-edit-outline'
+        padding='xs xs'
+        text-color='light-blue-3'
+        @click='setWorkingDirectory'
+        )
+        q-tooltip Set Working Directory...
   q-btn.full-width.q-mt-sm(
     v-if='!editorStore.workingDirectory'
     icon='mdi-folder-open'
@@ -24,6 +53,8 @@
     @click='setWorkingDirectory'
   )
   q-tree.q-mt-md(
+    v-else
+    ref='tree'
     :nodes='editorStore.workingDirFiles'
     node-key='id'
     label-key='name'
@@ -34,9 +65,12 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, watch } from 'vue'
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { useDocsStore } from 'src/stores/docs'
 import { useEditorStore } from 'src/stores/editor'
+import { find, last } from 'lodash-es'
 
+const docsStore = useDocsStore()
 const editorStore = useEditorStore()
 
 watch(() => editorStore.workingDirectory, reloadWorkingDirectory)
@@ -47,8 +81,14 @@ const state = reactive({
   selected: ''
 })
 
+const tree = ref(null)
+
 // METHODS
 
+function collapse () {
+  tree.value.collapseAll()
+}
+
 async function setWorkingDirectory () {
   const wdPath = await window.ipcBridge.promptWorkingDirectory(editorStore.workingDirectory)
   if (wdPath) {
@@ -73,13 +113,66 @@ function processFiles (files) {
       selectable: false
     }),
     ...(!f.isDirectory && {
-      icon: 'mdi-file',
-      expandable: false,
-      selectable: true
+      ...getFromFileExt(f),
+      expandable: false
     })
   }))
 }
 
+function getFromFileExt (f) {
+  const ext = last(f.name.split('.'))
+  switch (ext) {
+    case 'md': {
+      return {
+        icon: 'mdi-language-markdown',
+        iconColor: 'indigo-2',
+        selectable: true,
+        handler () {
+          selectFile(f.path)
+        }
+      }
+    }
+    case 'txt': {
+      return {
+        icon: 'mdi-file-document-outline',
+        iconColor: 'pink-4',
+        selectable: true,
+        handler () {
+          selectFile(f.path)
+        }
+      }
+    }
+    case 'xml': {
+      return {
+        icon: 'mdi-file-xml-box',
+        iconColor: 'blue-3',
+        selectable: true,
+        handler () {
+          selectFile(f.path)
+        }
+      }
+    }
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'svg':
+      return {
+        icon: 'mdi-image',
+        iconColor: 'green-4',
+        selectable: true,
+        disabled: true
+      }
+    default: {
+      return {
+        icon: 'mdi-file',
+        iconColor: 'grey-3',
+        selectable: false,
+        disabled: true
+      }
+    }
+  }
+}
+
 async function onLazyLoad ({ node, done, fail }) {
   try {
     const files = await window.ipcBridge.readDirectory(node.path)
@@ -89,6 +182,18 @@ async function onLazyLoad ({ node, done, fail }) {
   }
 }
 
+function selectFile (target) {
+  const openedDoc = find(docsStore.opened, ['path', target])
+  if (openedDoc) {
+    docsStore.active = openedDoc.id
+  } else {
+    docsStore.openDocumentFromPath(target)
+  }
+  nextTick(() => {
+    state.selected = ''
+  })
+}
+
 // MOUNTED
 
 onMounted(() => {