simple-inventory-editor/src/views/Editor.vue

<script setup lang="ts">
import { ref } from 'vue'
import Button from 'primevue/button'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import ColumnGroup from 'primevue/columngroup'
import Image from 'primevue/image'
import InputText  from 'primevue/inputtext'
import Row from 'primevue/row'
import Select from 'primevue/select'

import {
  FieldTypes,
} from '../types/data'

const sampleData = ref([
  {
    id: 'abc123',
    name: 'test a',
    category: 'type a',
    quantity: 5,
  },
  {
    id: 'def456',
    name: 'test b',
    category: 'type a',
    quantity: 10,
  },
  {
    id: 'ghi789',
    name: 'test c',
    category: 'type b',
    quantity: 2,
    image: {
      src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Loup_du_Canada_%28Canis_lupus_mackenzii%29.JPG/1280px-Loup_du_Canada_%28Canis_lupus_mackenzii%29.JPG',
      alt: 'Loup du Canada',
    },
  },
])
const editingRows = ref([])

const sampleFields = ref([
  { name: 'name', type: 'text' },
  { name: 'category', type: 'text' },
  { name: 'quantity', type: 'text' },
  { name: 'image', type: 'image' },
])
const editingFields = ref([])

const onRowEditSave = (event: { newData: any, index: number }) => {
  let { newData, index } = event
  sampleData.value[index] = newData
  console.log(sampleData.value)
}

const onFieldEditSave = (event: { newData: any, index: number }) => {
  let { newData, index } = event
  sampleFields.value[index] = newData
  console.log(sampleFields.value)
}
</script>

<template lang="pug">
DataTable(
  @row-edit-save='onFieldEditSave'
  v-model:editingRows='editingFields'
  :value='sampleFields'
  editMode='row'
  tableStyle='min-width: 50rem'
)
  Column(
    field='name'
    header='Name'
  )
    template(
      #body='slotProps'
    )
      span {{ slotProps.data.name }}
    template(
      #editor='{ data, field }'
    )
      InputText(
        v-model='data[field]'
        fluid
      )
  Column(
    field='type'
    header='Type'
  )
    template(
      #body='slotProps'
    )
      span {{ slotProps.data.type }}
    template(
      #editor='{ data, field }'
    )
      Select(
        v-model='data[field]'
        :options='FieldTypes'
      )
  Column(
    rowEditor
    style='width:10%;min-width:8rem;'
    bodyStyle='text-align:center;'
  )
    template(
      #body='slotProps'
    )
      Button(
        icon='pi pi-pencil'
        aria-label='Row Edit'
        rounded
        severity='secondary'
        variant='text'
        :onClick=`(e) => {
          slotProps.editorInitCallback(e)
        }`
      )
      Button(
        icon='pi pi-trash'
        aria-label='Delete'
        rounded
        severity='danger'
        variant='text'
      )
    template(
      #editor='slotProps'
    )
      Button(
        icon='pi pi-save'
        aria-label='Save Edit'
        rounded
        severity='secondary'
        variant='text'
        :onClick=`(e) => {
          slotProps.editorSaveCallback(e)
        }`
      )
      Button(
        icon='pi pi-times'
        aria-label='Cancel Edit'
        rounded
        severity='secondary'
        variant='text'
        :onClick=`(e) => {
          slotProps.editorCancelCallback(e)
        }`
      )
DataTable(
  @row-edit-save='onRowEditSave'
  v-model:editingRows='editingRows'
  :value='sampleData'
  editMode='row'
  tableStyle='min-width: 50rem'
)
  Column(
    v-for='col of sampleFields'
    :key='col.name'
    :field='col.name'
    :header='col.name'
    style='width:5rem;'
  )
    template(
      #body='slotProps'
    )
      div(
        v-if='col.type === "image"'
      )
        Image(
          v-if='slotProps.data.image'
          :src='slotProps.data.image.src'
          :alt='slotProps.data.image.alt'
          preview
        )
        span(
          v-else
        ) No image
      div(
        v-else
      )
        span {{ slotProps.data[col.name] }}
    template(
      #editor='{ data, field }'
    )
      div(
        v-if='col.type === "image"'
      )
        span Not Implemented
      div(
        v-else
      )
        InputText(
          v-model='data[field]'
          fluid
        )
  Column(
    :rowEditor='true'
    style='width:10%;min-width:8rem;'
    bodyStyle='text-align:center;'
  )
</template>

<style lang="sass">
.p-image
  img
    max-width: 16rem
</style>