add new design

src/components/PlaceBlock.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Key24Regular } from '@vicons/fluent'
 import { LockOutlined } from '@vicons/material'
+import MessagePaper from './MessagePaper.vue';
 import { Icon } from '@vicons/utils'
-import { NButton,NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { PropType } from 'vue'
 
 import type { Application, Door, Key, Place } from '@/api/generated/crabs/evening_detective_server'
@@ -24,6 +25,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  addAction: {
+    type: Function as PropType<(param: string) => void>,
+  }
 })
 
 const emit = defineEmits<{
@@ -88,19 +92,19 @@ function onCreateKey(): Key {
 
   <div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
     <div class="message-header">
-      {{ props.place.code }}: {{ props.place.name }}
+      {{ props.place?.code }}: {{ props.place?.name }}
     </div>
     <hr class="hr" />
     <div class="message-content">
-      <div v-if="props.place.image">
+      <div v-if="props.place?.image">
         <div class="message-image-border">
-          <img :src="props.place.image" class="message-image">
+          <img :src="props.place?.image" class="message-image">
         </div>
       </div>
-      {{ props.place.text }}
+      {{ props.place?.text }}
     </div>
 
-    <div v-for="door in props.place.doors" v-bind:key="door.code" class="door-block">
+    <div v-for="door in props.place?.doors" v-bind:key="door.code" class="door-block">
       {{ door.name }} <span v-for="key in door.keys" class="key-block">
         <Icon class="lock-icon">
           <LockOutlined />
@@ -108,17 +112,17 @@ function onCreateKey(): Key {
       </span>
     </div>
 
-    <hr class="hr" v-if="props.place.applications.length" />
-    <div class="message-footer application-block" v-for="application in props.place.applications"
+    <hr class="hr" v-if="props.place?.applications?.length" />
+    <div class="message-footer application-block" v-for="application in props.place?.applications"
       v-bind:key="application.name">
       Приложение: {{ application.name }}
     </div>
 
     <p class="gray-block">
-      <span v-if="place.hidden">
+      <span v-if="props.place?.hidden">
         Скрытая точка
       </span>
-      <span v-for="key in place.keys" class="key-block">
+      <span v-for="key in props.place?.keys" class="key-block">
         <Icon class="lock-icon">
           <Key24Regular />
         </Icon> {{ key.name }}
@@ -126,6 +130,45 @@ function onCreateKey(): Key {
     </p>
   </div>
 
+  <div v-if="mode == 'show'">
+    <MessagePaper>
+      <div class="message-show-header font">
+        {{ place?.code }}: {{ place?.name }}
+        <span class="collapse-icon collapse-icon-up" @click="updateMode('show-collapse')"></span>
+      </div>
+      <hr class="show-hr" />
+      <div class="message-show-content font">
+        <div v-if="place?.image?.length">
+          <div class="message-image-border">
+            <img v-bind:src="place?.image" class="message-image" />
+          </div>
+        </div>
+        {{ place?.text }}
+      </div>
+      <hr class="show-hr" v-if="props.place?.doors?.length" />
+      <div v-for="door in props.place?.doors" :key="door.code" class="button-dialog font"
+        v-on:click="addAction!(door.code!)">
+        <div class="button-dialog-text">
+          {{ door.code }} {{ door.name }}
+        </div>
+      </div>
+      <hr class="show-hr" v-if="props.place?.applications?.length" />
+      <div class="message-show-footer font" v-for="application in props.place?.applications" :key="application.name">
+        Приложение: {{ application.name }}
+        <!-- <div class="application-label">{{ application.number }}</div> -->
+      </div>
+    </MessagePaper>
+  </div>
+
+  <div v-if="mode == 'show-collapse'">
+    <MessagePaper>
+      <div class="message-header font">
+        {{ place?.code }}: {{ place?.name }}
+        <span class="collapse-icon" @click="updateMode('show')"></span>
+      </div>
+    </MessagePaper>
+  </div>
+
   <div v-if="mode == 'edit'" class="place-block">
     <n-space vertical>
       <n-input-group>
@@ -356,9 +399,70 @@ function onCreateKey(): Key {
 }
 
 .message-footer {
+  padding-right: 50px;
+  font-weight: 400;
+  color: burlywood;
+  position: relative;
+}
+
+.message-show-header {
+  font-size: 20px;
+  padding-right: 50px;
+}
+
+.collapse-icon {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 45px;
+  height: 28px;
+  cursor: pointer;
+  background-image: url("@/assets/images/collapse.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.collapse-icon-up {
+  transform: rotate(-180deg);
+}
+
+.show-hr {
+  margin: 10px 0;
+  border: dashed 1px;
+  border-color: black;
+}
+
+.font {
+  font-family: 'font_old_typer';
+  font-size: 18px;
+}
+
+.message-show-content {
+  font-weight: 500;
+  white-space: pre-wrap;
+}
+
+.message-show-footer {
   padding-right: 50px;
   font-weight: 400;
   color: var(--second-color);
   position: relative;
 }
+
+.button-dialog {
+  display: inline-block;
+  font-weight: 600;
+  border-radius: 5px;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-right: 10px;
+  background-image: url("@/assets/images/belt.png");
+  background-size: cover;
+  color: #bfa07d;
+  cursor: pointer;
+}
+
+.button-dialog-text {
+  padding: 5px 12px;
+}
 </style>