edit and remove images

src/types/data.ts

@@ -22,7 +22,7 @@ export type Columns = Column[]
 
 export type Row = {
   _id: string
-} & Record<string, string>
+} & Record<string, string | any>
 
 export interface Inventory {
   columns: Column[]

src/views/Editor/DataEditor.vue

@@ -12,12 +12,7 @@ import {
   type Column as DataColumn,
 } from 'src/types/data'
 import ImageEditor from './ImageEditor.vue'
-
-interface EditingRow {
-  data: DataRow
-  index: number
-  field: string
-}
+import { type EditingRow } from './types'
 
 const props = defineProps<{
   columns: DataColumn[],
@@ -26,7 +21,7 @@ const emits = defineEmits<{
   (e: 'dirty'): void
 }>()
 const model = defineModel<DataRow[]>({ required: true })
-const editingRows = ref([])
+const editingRows = ref<DataRow[]>([])
 const editingImage = ref(false)
 const editingImageRow = ref(null as EditingRow | null)
 
@@ -55,18 +50,37 @@ const onDeleteRow = (event: Event, slotProps: { index: number }) => {
   emits('dirty')
 }
 
-const onEditImage = (event: Event, slotProps: { data: DataRow, index: number, field: string }) => {
+const onEditImage = (event: Event, slotProps: EditingRow) => {
   event.preventDefault()
   editingImage.value = true
   editingImageRow.value = slotProps
 }
 
+const onRemoveImage = (event: Event, slotProps: EditingRow) => {
+  event.preventDefault()
+  const row = { ...model.value[slotProps.index] } as any
+  delete row[slotProps.field]
+  model.value[slotProps.index] = row
+  const indexOfEditing = editingRows.value.findIndex(other => other._id === slotProps.data._id)
+  if (indexOfEditing > -1) {
+    let rows = editingRows.value
+    rows.splice(indexOfEditing, 1)
+    editingRows.value = rows
+  }
+}
+
 const onSaveImage = (image: string) => {
   const row = { ...model.value[editingImageRow.value!.index] } as any
   row[editingImageRow.value!.field] = {
     src: image,
   }
   model.value[editingImageRow.value!.index] = row
+  const indexOfEditing = editingRows.value.findIndex(other => other._id === editingImageRow.value!.data._id)
+  if (indexOfEditing > -1) {
+    let rows = editingRows.value
+    rows.splice(indexOfEditing, 1)
+    editingRows.value = rows
+  }
 }
 </script>
 
@@ -98,7 +112,7 @@ DataTable.data-editor(
         v-if='col.type === "image"'
       )
         Image(
-          v-if='slotProps.data[col.name]'
+          v-if='!!slotProps.data[col.name] && !!slotProps.data[col.name].src'
           :src='slotProps.data[col.name].src'
           preview
         )
@@ -119,6 +133,12 @@ DataTable.data-editor(
           label='Edit Image'
           :onClick='(e) => onEditImage(e, slotProps)'
         )
+        Button(
+          label='Remove Image'
+          severity='danger'
+          :disabled='!slotProps.data[col.name]'
+          :onClick='(e) => onRemoveImage(e, slotProps)'
+        )
       div(
         v-else
       )

src/views/Editor/ImageEditor.vue

@@ -12,10 +12,8 @@ import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
 import InputText from 'primevue/inputtext'
 
-import {
-  type Row as DataRow,
-} from 'src/types/data'
 import { useAppStore } from 'src/store'
+import { type EditingRow } from './types'
 
 const store = useAppStore()
 
@@ -23,10 +21,16 @@ const visible = defineModel<boolean>('visible', { default: false })
 const emit = defineEmits<{
   (e: 'saved', val: string): void
 }>()
-const row = defineModel<DataRow>('row')
+const row = defineModel<EditingRow | null>('row')
 const filePath = ref(store.currentInventory.filePath.replace('.json', '/'))
-const fileName = ref('')
 const currentSrc = ref('')
+const renderedSrc = computed(() => {
+  return currentSrc.value
+    ? currentSrc.value
+    : !!row.value && !!row.value.data[row.value.field] && !!(row.value.data[row.value.field]).src
+      ? (row.value.data[row.value.field]).src
+      : ''
+})
 const currentBlob = ref<Blob>()
 
 const onBrowseForImage = async (e: Event) => {
@@ -52,7 +56,7 @@ const onBrowseForImage = async (e: Event) => {
 
 const onCancel = (e: Event) => {
   e.preventDefault()
-  visible.value = false
+  reset()
 }
 
 function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void, outputFormat: string) {
@@ -71,11 +75,17 @@ function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void,
   image.src = url
 }
 
+const reset = () => {
+  visible.value = false
+  row.value = null
+  currentSrc.value = ''
+}
+
 const onSave = async (e: Event) => {
   e.preventDefault()
   convertToDataUrlViaCanvas(currentSrc.value, (val) => {
     emit('saved', val)
-    visible.value = false
+    reset()
   }, currentBlob.value!.type)
 }
 </script>
@@ -87,7 +97,7 @@ Dialog(
   header='Edit Image'
 )
   .content(
-    v-if='!currentSrc'
+    v-if='!renderedSrc'
   )
     Button(
       label='Browse For Image'
@@ -98,7 +108,7 @@ Dialog(
   )
     InputGroup.image-group
       ImageComponent(
-        :src='currentSrc'
+        :src='renderedSrc'
       )
   template(#footer)
     Button(
@@ -109,7 +119,7 @@ Dialog(
     Button(
       label='Replace'
       @click='onBrowseForImage'
-      :disabled='!currentSrc'
+      :disabled='!renderedSrc && !currentSrc'
     )
     Button(
       label='Cancel'

src/views/Editor/types.ts

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