update editor

src/assets/main.css

@@ -25,7 +25,7 @@ body {
 
 .content-block {
   margin-top: 70px;
-  padding: 0 20px;
+  padding: 0;
   /* background-color: #553333; */
 }
 

src/components/PlaceBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server';
-import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui'
+import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput, NInputGroup } from 'naive-ui'
 import type { PropType } from 'vue';
 
 const props = defineProps({
@@ -15,6 +15,12 @@ const props = defineProps({
     }
 })
 
+const emit = defineEmits<{ 'update:mode': [value: String] }>()
+const updateMode = (mode: string) => {
+    console.log(mode)
+    emit('update:mode', mode)
+}
+
 function onCreateApplication(): Application {
     return {
         name: undefined,
@@ -39,17 +45,24 @@ function onCreateKey(): Key {
 </script>
 
 <template>
-    <div class="place-block">
+    <div v-if="mode == 'mini-add'" class="place-block-plus show-editor-block" @click="updateMode('edit')">
-        <div v-if="mode == 'show'">
+        <p class="place-image-plus">+</p>
-            <p>{{ place.code }}</p>
-            <p>{{ place.name }}</p>
-            <p>{{ place.text }}</p>
     </div>
-        <div v-if="mode == 'edit'">
+
+    <div v-if="mode == 'show-editor'" class="place-block show-editor-block" @click="updateMode('edit')">
+        <p>[{{ props.place.code }}] - {{ props.place.name }}</p>
+        <div class="message-content">{{ props.place.text }}</div>
+        <p v-for="application in props.place.applications">{{ application.name }}</p>
+    </div>
+
+    <div v-if="mode == 'edit'" class="place-block">
         <n-space vertical>
-                <n-input v-model:value="place.code" type="text" placeholder='Ы-1' />
+            <n-input-group>
-                <n-input v-model:value="place.name" type="text" placeholder='Дом №Ы' />
+                <n-input :style="{ width: '20%' }" v-model:value="props.place.code" type="text" placeholder='Ы-1' />
-                <n-input v-model:value="place.text" type="textarea" placeholder='В начале было слово...' />
+                <n-input :style="{ width: '80%' }" v-model:value="props.place.name" type="text" placeholder='Дом №Ы' />
+            </n-input-group>
+            <n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
+                placeholder='В начале было слово...' />
             <!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
                 <n-upload-dragger>
                     <n-text style="font-size: 16px">
@@ -57,9 +70,9 @@ function onCreateKey(): Key {
                     </n-text>
                 </n-upload-dragger>
             </n-upload> -->
-                <n-switch v-model:value="place.hidden" />
+            <n-switch v-model:value="props.place.hidden" />
 
-                <n-dynamic-input v-model:value="place.applications" :on-create="onCreateApplication">
+            <n-dynamic-input v-model:value="props.place.applications" :on-create="onCreateApplication">
                 <template #create-button-default>
                     Добавить улику
                 </template>
@@ -70,14 +83,14 @@ function onCreateKey(): Key {
                 </template>
             </n-dynamic-input>
 
-                <n-dynamic-input v-model:value="place.doors" :on-create="onCreateDoor">
+            <n-dynamic-input v-model:value="props.place.doors" :on-create="onCreateDoor">
                 <template #create-button-default>
                     Добавить действие
                 </template>
                 <template #default="{ value: door }">
                     <div style="display: flex; align-items: center; width: 100%">
-                            <n-input v-model:value="door.code" type="text" />
+                        <n-input v-model:value="door.code" type="text" placeholder="Код" />
-                            <n-input v-model:value="door.name" type="text" />
+                        <n-input v-model:value="door.name" type="text" placeholder="Название" />
 
                         <n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
                             <template #create-button-default>
@@ -85,7 +98,7 @@ function onCreateKey(): Key {
                             </template>
                             <template #default="{ value: key }">
                                 <div style="display: flex; align-items: center; width: 100%">
-                                        <n-input v-model:value="key.name" type="text" />
+                                    <n-input v-model:value="key.name" type="text" placeholder="Название" />
                                 </div>
                             </template>
                         </n-dynamic-input>
@@ -93,27 +106,57 @@ function onCreateKey(): Key {
                 </template>
             </n-dynamic-input>
 
-                <n-dynamic-input v-model:value="place.keys" :on-create="onCreateKey">
+            <n-dynamic-input v-model:value="props.place.keys" :on-create="onCreateKey">
                 <template #create-button-default>
                     Добавить ключ
                 </template>
                 <template #default="{ value: key }">
                     <div style="display: flex; align-items: center; width: 100%">
-                            <n-input v-model:value="key.name" type="text" />
+                        <n-input v-model:value="key.name" type="text" placeholder="Название" />
                     </div>
                 </template>
             </n-dynamic-input>
 
+            <slot></slot>
+
         </n-space>
     </div>
-    </div>
 </template>
 
 <style scoped>
 .place-block {
-    margin: 20px 0;
+    margin: 20px;
     padding: 20px;
     border-radius: 10px;
     border: 1px solid #444444;
 }
+
+.place-block:hover {
+    color: #63e2b7;
+}
+
+.place-block-plus {
+    margin: 20px;
+    border-radius: 10px;
+    border: 1px solid #444444;
+}
+
+.place-block-plus:hover {
+    color: #63e2b7;
+}
+
+.place-image-plus {
+    font-size: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.show-editor-block {
+    cursor: pointer;
+}
+
+.message-content {
+    white-space: pre-wrap;
+}
 </style>

src/components/ScenariosEditorPage.vue

@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
 import { Icon } from '@vicons/utils'
 import { Settings } from '@vicons/carbon'
 import router from '@/router';
-import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui'
+import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NFlex, NSwitch, NDynamicInput } from 'naive-ui'
 import PlaceBlock from '@/components/PlaceBlock.vue';
 
 const client = getAuthClient();
@@ -21,7 +21,6 @@ const deletedScenarioName = ref('')
 const message = useMessage()
 
 const fileList = ref<UploadFileInfo[]>([])
-const newPlaceFileList = ref<UploadFileInfo[]>([])
 
 const scenario = ref<Scenario>({
     id: undefined,
@@ -41,7 +40,8 @@ const newPlace = ref<Place>({
     hidden: undefined,
     applications: undefined,
     doors: undefined,
-    keys: undefined
+    keys: undefined,
+    mode: 'mini-add'
 })
 
 async function getScenario(id: number) {
@@ -51,6 +51,10 @@ async function getScenario(id: number) {
         return
     }
     scenario.value = res.scenario!
+    scenario.value.story?.places?.forEach((item) => {
+        item.oldCode = item.code
+        item.mode = 'show-editor'
+    })
 }
 getScenario(Number(scenarioId))
 
@@ -101,27 +105,6 @@ function uint8ToBase64(uint8Array: Uint8Array) {
     return btoa(binaryString);
 }
 
-function onCreateApplication(): Application {
-    return {
-        name: undefined,
-        image: undefined
-    }
-}
-
-function onCreateDoor(): Door {
-    return {
-        code: undefined,
-        name: undefined,
-        keys: undefined
-    }
-}
-
-function onCreateKey(): Key {
-    return {
-        name: undefined
-    }
-}
-
 async function addPlace() {
     const res = await client.AddScenarioPlace({
         id: scenario.value.id,
@@ -145,12 +128,50 @@ async function addPlace() {
     }
 }
 
+async function collapseAddPlace(place: Place) {
+    place.mode = 'mini-add'
+}
+
+async function cancelUpdatePlace(place: Place) {
+    await getScenario(Number(scenarioId))
+
+    place.mode = 'show-editor'
+}
+
+async function updatePlace(place: Place) {
+    const res = await client.UpdateScenarioPlace({
+        id: scenario.value.id,
+        code: place.oldCode,
+        place: place
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getScenario(Number(scenarioId))
+
+    place.mode = 'show-editor'
+}
+
+async function deletePlace(place: Place) {
+    const res = await client.DeleteScenarioPlace({
+        id: scenario.value.id,
+        code: place.oldCode,
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getScenario(Number(scenarioId))
+}
+
 </script>
 
 <template>
     <HeaderMenu :add-logout="true" active="scenarios" />
 
-    <div class="center-block-custom content-block">
+    <div class="center-block-custom-big content-block">
+        <div class="places-container">
             <div class="settings-block">
                 <n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
                     <Icon class="settings-icon">
@@ -158,78 +179,22 @@ async function addPlace() {
                     </Icon>
                     Настройки
                 </n-button>
-            <h3 class="settings-header">{{ scenario.name }}</h3>
             </div>
 
-        <div class="places-container">
+            <PlaceBlock :place="newPlace" v-model:mode="newPlace.mode">
-            <div class="place-block">
+                <n-flex justify="end">
-                <n-space vertical>
+                    <n-button @click="collapseAddPlace(newPlace)">Отмена</n-button>
-                    <n-input v-model:value="newPlace.code" type="text" placeholder='Ы-1' />
+                    <n-button @click="addPlace()" :disabled="!newPlace.code">Добавить точку</n-button>
-                    <n-input v-model:value="newPlace.name" type="text" placeholder='Дом №Ы' />
+                </n-flex>
-                    <n-input v-model:value="newPlace.text" type="textarea" placeholder='В начале было слово...' />
+            </PlaceBlock>
-                    <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
-                        <n-upload-dragger>
-                            <n-text style="font-size: 16px">
-                                Щелкните или перетащите файл в эту область для загрузки
-                            </n-text>
-                        </n-upload-dragger>
-                    </n-upload>
-                    <n-switch v-model:value="newPlace.hidden" />
-
-                    <n-dynamic-input v-model:value="newPlace.applications" :on-create="onCreateApplication">
-                        <template #create-button-default>
-                            Добавить улику
-                        </template>
-                        <template #default="{ value }">
-                            <div style="display: flex; align-items: center; width: 100%">
-                                <n-input v-model:value="value.name" type="text" />
-                            </div>
-                        </template>
-                    </n-dynamic-input>
-
-                    <n-dynamic-input v-model:value="newPlace.doors" :on-create="onCreateDoor">
-                        <template #create-button-default>
-                            Добавить действие
-                        </template>
-                        <template #default="{ value: door }">
-                            <div style="display: flex; align-items: center; width: 100%">
-                                <n-input v-model:value="door.code" type="text" />
-                                <n-input v-model:value="door.name" type="text" />
-
-                                <n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
-                                    <template #create-button-default>
-                                        Добавить ключ
-                                    </template>
-                                    <template #default="{ value: key }">
-                                        <div style="display: flex; align-items: center; width: 100%">
-                                            <n-input v-model:value="key.name" type="text" />
-                                        </div>
-                                    </template>
-                                </n-dynamic-input>
-                            </div>
-                        </template>
-                    </n-dynamic-input>
-
-                    <n-dynamic-input v-model:value="newPlace.keys" :on-create="onCreateKey">
-                        <template #create-button-default>
-                            Добавить ключ
-                        </template>
-                        <template #default="{ value: key }">
-                            <div style="display: flex; align-items: center; width: 100%">
-                                <n-input v-model:value="key.name" type="text" />
-                            </div>
-                        </template>
-                    </n-dynamic-input>
-
-                    <n-button @click="addPlace()" ghost>
-                        Добавить место
-                    </n-button>
-
-                </n-space>
-            </div>
-
-            <PlaceBlock :place="place" mode="show" v-for="place in scenario.story?.places"></PlaceBlock>
 
+            <PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places">
+                <n-flex justify="end">
+                    <n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
+                    <n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
+                    <n-button @click="updatePlace(place)">Сохранить</n-button>
+                </n-flex>
+            </PlaceBlock>
         </div>
     </div>
 
@@ -295,10 +260,6 @@ async function addPlace() {
     /* background-color: brown; */
 }
 
-.settings-header {
-    padding: 5px 0 0 5px;
-}
-
 .settings-button {
     float: right;
 }
@@ -326,14 +287,15 @@ async function addPlace() {
     flex-direction: column;
     flex-wrap: nowrap;
     overflow-y: auto;
-    padding: 40px 0;
+    padding: 20px 0;
-    height: calc(100vh - 150px - 40px);
+    height: calc(100vh - 150px);
     /* border: 1px solid red; */
 }
 
 @media (min-width: 1024px) {
     .places-container {
-        height: calc(100vh - 70px - 40px);
+        padding: 20px 250px;
+        height: calc(100vh - 70px);
     }
 }
 </style>