bamort/frontend/src/components/DatasheetView.vue

<template>
    <div class="fullwidth-container datasheet-container" v-if="character">
      <!-- Character Overview -->
      <div class="character-overview">
        <div class="character-image">
          <img :src="imageSrc" alt="Character Image"/>
          <ImageUploadCropper 
            :characterId="character.id" 
            @image-updated="handleImageUpdate"
          />
        </div>
        <div class="character-stats">
          <div class="stat" v-for="(stat, index) in characterStats" :key="index">
            <span>{{ $t(stat.label) }}</span>
            <strong 
              v-if="editingIndex !== index"
              @dblclick="startEdit(index, stat.path)"
              class="editable-value"
            >
              {{ getStat(stat.path) }}
            </strong>
            <input 
              v-else
              v-model="editValue"
              @blur="saveEdit(stat.path)"
              @keyup.enter="saveEdit(stat.path)"
              @keyup.esc="cancelEdit"
              ref="editInput"
              type="number"
              class="edit-input"
            />
          </div>
        </div>
      </div>
      
      <!-- Character Information -->
      <div class="character-info">
        <div class="info-section">
          <p>
            <span 
              v-if="editingProp !== 'typ'" 
              @dblclick="startEditProp('typ', character.typ)"
              class="editable-prop"
            >{{ character.typ || 'x' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('typ')" @keyup.enter="saveProp('typ')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />
            (
            <span 
              v-if="editingProp !== 'gender'" 
              @dblclick="startEditProp('gender', character.gender)"
              class="editable-prop"
            >{{ character.gender || 'x' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('gender')" @keyup.enter="saveProp('gender')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />
            ),
            Grad:  
            <span 
              v-if="editingProp !== 'grad'" 
              @dblclick="startEditProp('grad', character.grad, 'number')"
              class="editable-prop"
            >{{ character.grad || 'x' }}</span>
            <input v-else v-model="editPropValue" type="number" @blur="saveProp('grad')" @keyup.enter="saveProp('grad')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Rasse:  
            <span 
              v-if="editingProp !== 'rasse'" 
              @dblclick="startEditProp('rasse', character.rasse)"
              class="editable-prop"
            >{{ character.rasse || 'x' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('rasse')" @keyup.enter="saveProp('rasse')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Heimat: 
            <span 
              v-if="editingProp !== 'origin'" 
              @dblclick="startEditProp('origin', character.origin)"
              class="editable-prop"
            >{{ character.origin || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('origin')" @keyup.enter="saveProp('origin')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Stand:  
            <span 
              v-if="editingProp !== 'social_class'" 
              @dblclick="startEditProp('social_class', character.social_class)"
              class="editable-prop"
            >{{ character.social_class || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('social_class')" @keyup.enter="saveProp('social_class')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />.
          </p>
          <p v-if="character.rasse==='Zwerg'">
            Hort für Grad {{ character.grad || 'x' }}: 125 GS, für nächsten Grad: 250 GS.
          </p>
          <p>
            <strong>Spezialisierung:</strong> 
            <span 
              v-if="editingProp !== 'spezialisierung'" 
              @dblclick="startEditProp('spezialisierung', character.spezialisierung)"
              class="editable-prop"
            >{{ character.spezialisierung || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('spezialisierung')" @keyup.enter="saveProp('spezialisierung')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />.
          </p>
          <p>
            Alter: 
            <span 
              v-if="editingProp !== 'alter'" 
              @dblclick="startEditProp('alter', character.alter, 'number')"
              class="editable-prop"
            >{{ character.alter || 'xx' }}</span>
            <input v-else v-model="editPropValue" type="number" @blur="saveProp('alter')" @keyup.enter="saveProp('alter')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            <strong v-if="editingProp !== 'hand'" @dblclick="startEditProp('hand', character.hand)" class="editable-prop">
              <span v-if="character.hand=='rechts'">Rechtshänder</span>
              <span v-else-if="character.hand=='links'">Linkshänder</span>
              <span v-else>Beidhändig</span>
            </strong>
            <input v-else v-model="editPropValue" @blur="saveProp('hand')" @keyup.enter="saveProp('hand')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Größe: 
            <span 
              v-if="editingProp !== 'groesse'" 
              @dblclick="startEditProp('groesse', character.groesse, 'number')"
              class="editable-prop"
            >{{ character.groesse }}</span>
            <input v-else v-model="editPropValue" type="number" @blur="saveProp('groesse')" @keyup.enter="saveProp('groesse')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />cm,
            Gewicht: 
            <span 
              v-if="editingProp !== 'gewicht'" 
              @dblclick="startEditProp('gewicht', character.gewicht, 'number')"
              class="editable-prop"
            >{{ character.gewicht }}</span>
            <input v-else v-model="editPropValue" type="number" @blur="saveProp('gewicht')" @keyup.enter="saveProp('gewicht')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />kg,
            Gestalt: 
            <span 
              v-if="editingProp !== 'merkmale.groesse'" 
              @dblclick="startEditProp('merkmale.groesse', character.merkmale?.groesse)"
              class="editable-prop"
            >{{ character.merkmale?.groesse || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('merkmale.groesse')" @keyup.enter="saveProp('merkmale.groesse')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />
            und 
            <span 
              v-if="editingProp !== 'merkmale.breite'" 
              @dblclick="startEditProp('merkmale.breite', character.merkmale?.breite)"
              class="editable-prop"
            >{{ character.merkmale?.breite || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('merkmale.breite')" @keyup.enter="saveProp('merkmale.breite')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Augen: 
            <span 
              v-if="editingProp !== 'merkmale.augenfarbe'" 
              @dblclick="startEditProp('merkmale.augenfarbe', character.merkmale?.augenfarbe)"
              class="editable-prop"
            >{{ character.merkmale?.augenfarbe || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('merkmale.augenfarbe')" @keyup.enter="saveProp('merkmale.augenfarbe')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Haare: 
            <span 
              v-if="editingProp !== 'merkmale.haarfarbe'" 
              @dblclick="startEditProp('merkmale.haarfarbe', character.merkmale?.haarfarbe)"
              class="editable-prop"
            >{{ character.merkmale?.haarfarbe || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('merkmale.haarfarbe')" @keyup.enter="saveProp('merkmale.haarfarbe')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />,
            Glaube: 
            <span 
              v-if="editingProp !== 'glaube'" 
              @dblclick="startEditProp('glaube', character.glaube)"
              class="editable-prop"
            >{{ character.glaube || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('glaube')" @keyup.enter="saveProp('glaube')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" />
          </p>
          <p>
            <strong>Merkmale:</strong> 
            <span 
              v-if="editingProp !== 'merkmale.sonstige'" 
              @dblclick="startEditProp('merkmale.sonstige', character.merkmale?.sonstige)"
              class="editable-prop"
            >{{ character.merkmale?.sonstige || '-' }}</span>
            <input v-else v-model="editPropValue" @blur="saveProp('merkmale.sonstige')" @keyup.enter="saveProp('merkmale.sonstige')" @keyup.esc="cancelEditProp" ref="propInput" class="prop-input" style="width: 300px;" />
          </p>
          <p>
            <em>Persönlicher Bonus für</em> Ausdauer 12, Schaden 5, Angriff 2,
            Abwehr 0, Zauber 0, Resistenz 3 / 4.
          </p>
        </div>
      </div>
    </div>
    <div v-else>Loading character data...</div>
</template>

<style>
/* All styles moved to main.css */
</style>

<script>
import ImageUploadCropper from './ImageUploadCropper.vue'
import API from '../utils/api'

export default {
  name: "DatasheetView",
  components: {
    ImageUploadCropper
  },
  props: {
    character: {
      type: Object,
      required: true
    }
  },
  computed: {
    imageSrc() {
      return this.character.image
        ? `${this.character.image}`
        : "/token_default.png";
    },
  },
  data() {
    return {
      editingIndex: null,
      editValue: '',
      editingProp: null,
      editPropValue: '',
      editPropType: 'text',
      characterStats: [
        { label: 'stats.strength', path: 'eigenschaften.6.value' },
        { label: 'stats.dexterity', path: 'eigenschaften.1.value' },
        { label: 'stats.agility', path: 'eigenschaften.2.value' },
        { label: 'stats.constitution', path: 'eigenschaften.4.value' },
        { label: 'stats.intelligence', path: 'eigenschaften.3.value' },
        { label: 'stats.spelltalent', path: 'eigenschaften.8.value' },
        { label: 'stats.beauty', path: 'eigenschaften.0.value' },
        { label: 'stats.charisma', path: 'eigenschaften.5.value' },
        { label: 'stats.willpower', path: 'eigenschaften.7.value' },
        { label: 'stats.poisontolerance', path: 'git' },
        { label: 'stats.movement', path: 'b.max' },
        { label: 'stats.lifepoints', path: 'lp.max'},
        { label: 'stats.staminapoints', path: 'ap.max'},
        { label: 'stats.divinegrace', path: 'bennies.gg'},
        { label: 'stats.fatesfavor', path: 'bennies.sg' }
      ]
    }
  },
  methods: {
    handleImageUpdate(newImage) {
      this.$emit('character-updated')
    },
    getStat(path) {
      if (path === 'git') {
        return '64!'
      }
      return path.split('.').reduce((obj, key) => obj?.[key], this.character) ?? '-'
    },
    startEdit(index, path) {
      if (path === 'git') return
      
      this.editingIndex = index
      this.editValue = this.getStat(path)
      this.$nextTick(() => {
        if (this.$refs.editInput && this.$refs.editInput[0]) {
          this.$refs.editInput[0].focus()
          this.$refs.editInput[0].select()
        }
      })
    },
    async saveEdit(path) {
      if (this.editingIndex === null) return
      
      const newValue = parseInt(this.editValue)
      if (isNaN(newValue)) {
        this.cancelEdit()
        return
      }
      
      try {
        // Update the character object directly
        const pathParts = path.split('.')
        let obj = this.character
        for (let i = 0; i < pathParts.length - 1; i++) {
          obj = obj[pathParts[i]]
        }
        obj[pathParts[pathParts.length - 1]] = newValue
        
        // Save to backend
        await API.put(`/api/characters/${this.character.id}`, this.character)
        
        this.$emit('character-updated')
        this.cancelEdit()
      } catch (error) {
        console.error('Failed to update stat:', error)
        alert('Fehler beim Speichern: ' + (error.response?.data?.error || error.message))
        this.cancelEdit()
      }
    },
    cancelEdit() {
      this.editingIndex = null
      this.editValue = ''
    },
    startEditProp(prop, value, type = 'text') {
      this.editingProp = prop
      this.editPropValue = value || ''
      this.editPropType = type
      this.$nextTick(() => {
        if (this.$refs.propInput) {
          const input = Array.isArray(this.$refs.propInput) ? this.$refs.propInput[0] : this.$refs.propInput
          if (input) {
            input.focus()
            input.select()
          }
        }
      })
    },
    async saveProp(prop) {
      if (this.editingProp === null) return
      // Update the character object directly
      const pathParts = prop.split('.')
      let obj = this.character
      for (let i = 0; i < pathParts.length - 1; i++) {
        if (!obj[pathParts[i]]) {
          obj[pathParts[i]] = {}
        }
        obj = obj[pathParts[i]]
      }
      obj[pathParts[pathParts.length - 1]] = newValue
      
      // Save to backend
      await API.put(`/api/characters/${this.character.id}`, this.character)
      
      this.$emit('character-updated',this.character)
      let newValue = this.editPropValue
      if (this.editPropType === 'number') {
        newValue = parseInt(this.editPropValue)
        if (isNaN(newValue)) {
          this.cancelEditProp()
          return
        }
      }
      
      try {
        this.$emit('update-property', prop, newValue)
        this.cancelEditProp()
      } catch (error) {
        console.error('Failed to update property:', error)
        alert('Fehler beim Speichern: ' + (error.response?.data?.error || error.message))
        this.cancelEditProp()
      }
    },
    cancelEditProp() {
      this.editingProp = null
      this.editPropValue = ''
      this.editPropType = 'text'
    }
  }
};
</script>