ImageEditor -> InputImage

src-tauri/capabilities/default.json

@@ -9,6 +9,12 @@
     {
       "identifier": "fs:scope",
       "allow": [
+        {
+          "path": "$HOME"
+        },
+        {
+          "path": "$HOME/*"
+        },
         {
           "path": "$APPCONFIG"
         },
@@ -22,6 +28,8 @@
     "opener:default",
     "dialog:default",
     "fs:allow-write-text-file",
+    "fs:allow-home-read-recursive",
+    "fs:allow-home-write-recursive",
     "fs:default"
   ]
 }

src/components/InputImage.vue

@@ -13,13 +13,13 @@ import InputGroupAddon from 'primevue/inputgroupaddon'
 import InputText from 'primevue/inputtext'
 
 import { useAppStore } from 'src/store'
-import { type EditingRow } from './types'
+import type { EditingRow } from 'src/types/editing'
 
 const store = useAppStore()
 
-const visible = defineModel<boolean>('visible', { default: false })
 const emit = defineEmits<{
   (e: 'saved', val: string): void
+  (e: 'canceled'): void
 }>()
 const row = defineModel<EditingRow | null>('row')
 const filePath = ref(store.currentInventory.filePath.replace('.json', '/'))
@@ -56,6 +56,7 @@ const onBrowseForImage = async (e: Event) => {
 
 const onCancel = (e: Event) => {
   e.preventDefault()
+  emit('canceled')
   reset()
 }
 
@@ -76,7 +77,6 @@ function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void,
 }
 
 const reset = () => {
-  visible.value = false
   row.value = null
   currentSrc.value = ''
 }
@@ -91,11 +91,7 @@ const onSave = async (e: Event) => {
 </script>
 
 <template lang="pug">
-Dialog(
-  v-model:visible='visible'
-  modal
-  header='Edit Image'
-)
+.input-image
   .content(
     v-if='!renderedSrc'
   )
@@ -110,7 +106,7 @@ Dialog(
       ImageComponent(
         :src='renderedSrc'
       )
-  template(#footer)
+  .footer
     Button(
       label='Save'
       @click='onSave'

src/types/editing.ts

@@ -0,0 +1,9 @@
+import {
+  type Row,
+} from './data'
+
+export interface EditingRow {
+  data: Row
+  index: number
+  field: string
+}

src/views/Editor/DataEditor.vue

@@ -11,6 +11,7 @@ import Checkbox from 'primevue/checkbox'
 import Column from 'primevue/column'
 import Chip from 'primevue/chip'
 import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
 import Image from 'primevue/image'
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
@@ -23,8 +24,8 @@ import {
   type Column as DataColumn,
 } from 'src/types/data'
 import DataEditorModal from './DataEditorModal.vue'
-import ImageEditor from './ImageEditor.vue'
-import { type EditingRow } from './types'
+import InputImage from 'src/components/InputImage.vue'
+import type { EditingRow } from 'src/types/editing'
 
 const props = defineProps<{
   columns: DataColumn[],
@@ -121,9 +122,16 @@ const onSaveImage = (image: string) => {
     rows.splice(indexOfEditing, 1)
     editingRows.value = rows
     emits('dirty')
+    editingImage.value = false
+    editingImageRow.value = null
   }
 }
 
+const onCancelImage = () => {
+  editingImageRow.value = null
+  editingImage.value = false
+}
+
 const onSaveRow = (row: DataRow, editingRow: EditingRow) => {
   model.value[editingRow.index] = row
   emits('dirty')
@@ -131,11 +139,16 @@ const onSaveRow = (row: DataRow, editingRow: EditingRow) => {
 </script>
 
 <template lang="pug">
-ImageEditor(
+Dialog(
   v-model:visible='editingImage'
+  modal
+  header='Edit Image'
+)
+  InputImage(
     v-model:row='editingImageRow'
     @saved='onSaveImage'
-)
+    @canceled='onCancelImage'
+  )
 DataEditorModal(
   v-model:visible='editingRow'
   :row='editingRowData'

src/views/Editor/DataEditorModal.vue

@@ -14,7 +14,7 @@ import MultiSelect from 'primevue/multiselect'
 import Select from 'primevue/select'
 
 import { useAppStore } from 'src/store'
-import { type EditingRow } from './types'
+import type { EditingRow } from 'src/types/editing'
 import type { Row as DataRow, Column as DataColumn } from 'src/types/data'
 
 const store = useAppStore()
@@ -45,11 +45,6 @@ const onSave = async (e: Event) => {
 </script>
 
 <template lang="pug">
-ImageEditor(
-  v-model:visible='editingImage'
-  v-model:row='editingImageRow'
-  @saved='onSaveImage'
-)
 Dialog(
   v-model:visible='visible'
   modal

src/views/Editor/types.ts

@@ -1,9 +0,0 @@
-import {
-  type Row,
-} from 'src/types/data'
-
-export interface EditingRow {
-  data: Row
-  index: number
-  field: string
-}

src/views/Home/Home.vue

@@ -16,7 +16,7 @@ import Panel from 'primevue/panel'
 
 import { useAppStore } from 'src/store'
 import { getConfig, readJson } from 'src/utils/io'
-import { Inventory } from 'src/types/data'
+import type { Inventory } from 'src/types/data'
 
 const router = useRouter()
 const toast = useToast()