fix: character name can be changed

Author: villetakanen

src/components/character/CharacterMetaForm.vue

@@ -1,72 +1,41 @@
 <template>
-  <EditableColumn>
-    <template #viewer>
-      <p v-if="site">
-        <Icon
-          :name="site.systemBadge+'-logo'"
-          small
-        />
-        {{ site.name }}
-      </p>
-      <p v-if="character">
-        {{ character.name }}
-      </p>
-    </template>
-    <template #editor>
-      <Icon
-        :name="site.systemBadge+'-logo'"
-        medium
-      />
-      <MaterialSelect
-        v-model="siteid"
-        :opts="siteOpts"
-        :label="$t('character.stats.game')"
-      />
-      <Textfield
-        v-model="charname"
-        :label="$t('character.stats.name')"
-        blur
-      />
-    </template>
-  </EditableColumn>
+  <Column class="CharacterMetaForm">
+    <Textfield
+      v-model="name"
+      :label="$t('character.meta.name')"
+    />
+  </Column>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import MaterialSelect from '../material/MaterialSelect.vue'
-import { useSites } from '@/state/sites'
-import { useCharacters } from '@/state/characters'
+import { Character, useCharacters } from '@/state/characters'
+import Column from '../layout/Column.vue'
 import Textfield from '../form/Textfield.vue'
-import { useSite } from '@/state/site'
-import Icon from '../material/Icon.vue'
-import EditableColumn from '../layout/EditableColumn.vue'
-import { logDebug } from '@/utils/eventLogger'
 
 export default defineComponent({
   name: 'CharacterMetaForm',
-  components: { MaterialSelect, Textfield, Icon, EditableColumn },
+  components: { Column, Textfield },
   props: {
-    characterid: {
+    characterId: {
       type: String,
       required: true
     }
   },
   setup (props) {
     const { characters } = useCharacters()
-    const character = computed(() => characters.value.get(props.characterid))
-    const { userSites } = useSites()
-    const { site } = useSite()
-    const siteOpts = computed(() => {
-      return userSites.value.filter((s) => (s.usePlayers)).map((s) => ({ key: s.id, value: s.name }))
-    })
+    const character = computed(() => (characters.value.get(props.characterId) || new Character()))
 
-    const charname = computed({
-      get: () => (character?.value?.name ?? ''),
-      set: (n: string) => {
-        logDebug('CharacterMetaForm.charname.set', n)
+    const name = computed({
+      get: () => {
+        return character.value.name
+      },
+      set: (value) => {
+        character.value.name = value
       }
     })
-    return { siteOpts, site, charname, character }
+
+    return { character, name }
   }
 })
 </script>

src/components/character/CharacterSheet.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="CharacterSheet flexList">
+  <div class="CharacterSheet">
     <div
       v-for="(block, blockIndex) in character.sheet.layout"
       :key="blockIndex"

src/components/character/CharacterStat.vue

@@ -55,5 +55,5 @@ export default defineComponent({
 
 <style lang="sass" scoped>
 .CharacterStat
-  display: inline-block
+  display: block
 </style>

src/components/profile/characters/CharacterListCard.vue

@@ -5,24 +5,17 @@
         {{ character.name }}
       </router-link>
     </h3>
-    <Toolbar>
-      <Button text>
-        {{ $t('character.title') }}
-      </Button>
-    </Toolbar>
   </Card>
 </template>
 
 <script lang="ts">
-import Button from '@/components/form/Button.vue'
 import Card from '@/components/layout/Card.vue'
-import Toolbar from '@/components/layout/Toolbar.vue'
 import { useCharacters } from '@/state/characters'
 import { Character } from '@/state/characters/Character'
 import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
-  components: { Card, Toolbar, Button },
+  components: { Card },
   props: {
     id: {
       type: String,

src/locales/en.json

@@ -3,6 +3,7 @@
     "title": "About the App"
   },
   "action": {
+    "add": "Add New",
     "addSite": "Create new",
     "addThread": "New Discussion",
     "delete": "Delete",
@@ -28,6 +29,9 @@
       "text2": "You can hide your game from public listings and hide it behind a magic link."
     }
   },
+  "character":{
+    "title": "Character"
+  },
   "home": {
     "changesCard": {
       "title": "Sites and Games",
@@ -41,6 +45,11 @@
   "post": {
     "nOfReplies": "comments"
   },
+  "profile":{
+    "characters": {
+      "title": "Characters"
+    }
+  },
   "registration": {
     "title": "Register"
   },

src/views/characters/CharacterView.vue

@@ -23,6 +23,10 @@
         :id="id"
         class="double"
       />
+      <CharacterMetaForm
+        :character-id="id"
+        class="single"
+      />
     </main>
     <Dialog
       v-model="showDeleteDialog"
@@ -72,10 +76,11 @@ import Button from '@/components/form/Button.vue'
 import Toolbar from '@/components/layout/Toolbar.vue'
 import { useUxActions } from '@/composables/useUxActions'
 import Icon from '@/components/material/Icon.vue'
+import CharacterMetaForm from '@/components/character/CharacterMetaForm.vue'
 
 export default defineComponent({
   name: 'CharacterView',
-  components: { CharacterSheet, ViewTitle, Header, SpacerDiv, MaterialMenu, Dialog, Toggle, Button, Toolbar, Icon },
+  components: { CharacterSheet, ViewTitle, Header, SpacerDiv, MaterialMenu, Dialog, Toggle, Button, Toolbar, Icon, CharacterMetaForm },
   props: {
     id: {
       type: String,