add new design

src/components/TeamStoryPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getAuthClient } from '@/api/auth_client';
-import type { Story } from '@/api/generated/crabs/evening_detective_server';
+import type { Place, Story } from '@/api/generated/crabs/evening_detective_server';
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { NCard, NFlex, NInput, NModal, NSpace, NText, NUpload, NUploadDragger, NAlert, NTag, NButton } from 'naive-ui'
 import { useMessage } from 'naive-ui';
@@ -14,49 +14,66 @@ const route = useRoute()
 const teamId = route.params.id
 const password = route.query.password
 
-const story = ref<Story>({
-    places: undefined
+const story = ref<AdvancedStory>({
+    places: []
 })
 
 const code = ref('')
 
-async function getStory(id: number, password: string) {
+async function getStory() {
     const res = await client.GetTeamStory({
-        id: id,
-        password: password
+        id: Number(teamId),
+        password: password as string
     })
     if (res.error != '') {
         message.error(res.error!)
         return
     }
-    story.value = res.story!
+    story.value = {
+        places: res.story!.places?.map((item) => {
+            return {
+                place: item,
+                mode: 'show'
+            }
+        }) || []
+    }
 }
-getStory(Number(teamId), password as string)
+getStory()
 
-async function addAction(id: number, password: string) {
+async function addAction(newCode: string) {
     const res = await client.AddTeamAction({
-        id: id,
-        password: password,
-        code: code.value
+        id: Number(teamId),
+        password: password as string,
+        code: newCode
     })
     if (res.error != '') {
         message.error(res.error!)
         return
     }
-    await getStory(id, password)
+    await getStory()
     code.value = ''
 }
+
+type AdvancedStory = {
+    places: AdvancedPlace[];
+}
+
+type AdvancedPlace = {
+    place: Place;
+    mode: string;
+}
 </script>
 
 <template>
     <div class="center-block-custom-big">
         <div class="places-container">
-            <PlaceBlock :place="place" mode="show-editor" v-for="place in story.places" v-bind:key="place.code">
+            <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
+                v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
             </PlaceBlock>
 
             <n-space vertical>
                 <n-input v-model:value="code" type="text" placeholder="Ы-1" />
-                <n-button @click="addAction(Number(teamId), password as string)" ghost>Поехали</n-button>
+                <n-button @click="addAction(code)" ghost>Поехали</n-button>
             </n-space>
         </div>
     </div>