update editor

src/components/PlaceBlock.vue

@@ -7,9 +7,17 @@ import { Key24Regular } from '@vicons/fluent'
 import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
 
 const props = defineProps({
+  newPlaceCode: {
+    type: String,
+  },
+  newPlaceName: {
+    type: String,
+  },
+  newPlaceText: {
+    type: String,
+  },
   place: {
     type: Object as PropType<Place>,
-    required: true,
   },
   mode: {
     type: String,
@@ -17,9 +25,22 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{ 'update:mode': [value: string] }>()
+const emit = defineEmits<{
+  'update:newPlaceCode': [value: string],
+  'update:newPlaceName': [value: string],
+  'update:newPlaceText': [value: string],
+  'update:mode': [value: string]
+}>()
+const updateCode = (code: string) => {
+  emit('update:newPlaceCode', code)
+}
+const updateName = (name: string) => {
+  emit('update:newPlaceName', name)
+}
+const updateText = (text: string) => {
+  emit('update:newPlaceText', text)
+}
 const updateMode = (mode: string) => {
-  console.log(mode)
   emit('update:mode', mode)
 }
 
@@ -53,9 +74,13 @@ function onCreateKey(): Key {
   <div v-if="mode == 'add'" class="place-block">
     <n-space vertical>
       <n-input-group>
-        <n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder="Ы-1" />
-        <n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder="Дом №Ы" />
+        <n-input :style="{ width: '20%' }" :value="newPlaceCode" @update:value="updateCode" type="text"
+          placeholder="Ы-1" />
+        <n-input :style="{ width: '80%' }" :value="newPlaceName" @update:value="updateName" type="text"
+          placeholder="Дом №Ы" />
       </n-input-group>
+      <n-input :value="newPlaceText" @update:value="updateText" type="textarea" :autosize="{ minRows: 3 }"
+        placeholder="В начале было слово..." />
       <slot></slot>
     </n-space>
   </div>

src/components/ScenariosEditorPage.vue

@@ -33,18 +33,6 @@ const scenario = ref<Scenario>({
   publishedAt: undefined,
 })
 
-const newPlace = ref<Place>({
-  code: undefined,
-  name: undefined,
-  text: undefined,
-  image: undefined,
-  hidden: undefined,
-  applications: undefined,
-  doors: undefined,
-  keys: undefined,
-  mode: 'mini-add',
-})
-
 async function getScenario(id: number) {
   const res = await client.GetScenario({ id: id })
   if (res.error != '') {
@@ -106,10 +94,25 @@ function uint8ToBase64(uint8Array: Uint8Array) {
   return btoa(binaryString)
 }
 
+const code = ref('')
+const name = ref('')
+const text = ref('')
+const mode = ref('mini-add')
+
+
 async function addPlace() {
   const res = await client.AddScenarioPlace({
     id: scenario.value.id,
-    place: newPlace.value,
+    place: {
+      code: code.value,
+      name: name.value,
+      text: text.value,
+      image: undefined,
+      hidden: undefined,
+      applications: undefined,
+      doors: undefined,
+      keys: undefined,
+    },
   })
   if (res.error != '') {
     message.error(res.error!)
@@ -117,17 +120,10 @@ async function addPlace() {
   }
   await getScenario(Number(scenarioId))
 
-  newPlace.value = {
-    code: undefined,
-    name: undefined,
-    text: undefined,
-    image: undefined,
-    hidden: undefined,
-    applications: undefined,
-    doors: undefined,
-    keys: undefined,
-    mode: 'add'
-  }
+  code.value = ''
+  name.value = ''
+  text.value = ''
+  mode.value = 'add'
 }
 
 async function addNotFoundDoors(scenario: Scenario, place: Place) {
@@ -208,10 +204,14 @@ async function deletePlace(place: Place) {
         </n-button>
       </div>
 
-      <PlaceBlock :place="newPlace" v-model:mode="newPlace.mode">
+      {{ code }}
+      {{ name }}
+      {{ text }}
+      <PlaceBlock v-model:mode="mode" v-model:newPlaceCode="code" v-model:newPlaceName="name"
+        v-model:newPlaceText="text">
         <n-flex justify="end">
-          <n-button @click="collapseAddPlace(newPlace)">Отмена</n-button>
-          <n-button @click="addPlace()" :disabled="!newPlace.code">Добавить точку</n-button>
+          <n-button @click="mode = 'add'">Отмена</n-button>
+          <n-button @click="addPlace()" :disabled="!code">Добавить точку</n-button>
         </n-flex>
       </PlaceBlock>