diff --git a/src/types/data.ts b/src/types/data.ts index 025992c..62ff26d 100644 --- a/src/types/data.ts +++ b/src/types/data.ts @@ -22,7 +22,7 @@ export type Columns = Column[] export type Row = { _id: string -} & Record +} & Record export interface Inventory { columns: Column[] diff --git a/src/views/Editor/DataEditor.vue b/src/views/Editor/DataEditor.vue index ded0e1a..3507f02 100644 --- a/src/views/Editor/DataEditor.vue +++ b/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({ required: true }) -const editingRows = ref([]) +const editingRows = ref([]) 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 + } } @@ -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 ) diff --git a/src/views/Editor/ImageEditor.vue b/src/views/Editor/ImageEditor.vue index c4df122..9257fe2 100644 --- a/src/views/Editor/ImageEditor.vue +++ b/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('visible', { default: false }) const emit = defineEmits<{ (e: 'saved', val: string): void }>() -const row = defineModel('row') +const row = defineModel('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() 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) } @@ -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' diff --git a/src/views/Editor/types.ts b/src/views/Editor/types.ts new file mode 100644 index 0000000..2ae1244 --- /dev/null +++ b/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 +}