From 4bce4d45ea242a760649186112615c210b4dc378 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 8 Mar 2023 02:51:25 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=8C=A8?=
 =?UTF-8?q?=EB=84=90=EC=97=90=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=9A=A9=20'?=
 =?UTF-8?q?=EC=A0=91=EA=B8=B0'=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20-=20=EC=A0=91=EB=8A=94=EB=8B=A4=EA=B8=B0=20=EB=B3=B4?=
 =?UTF-8?q?=EB=8B=A4=EB=8A=94=20'=EC=82=AD=EC=A0=9C'=EC=97=90=20=EA=B0=80?=
 =?UTF-8?q?=EA=B9=8C=EC=9B=80=20-=20=EB=A9=94=EB=AA=A8=EB=A6=AC=20?=
 =?UTF-8?q?=EC=A0=88=EC=95=BD=EC=9D=84=20=EC=9C=84=ED=95=B4..?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MessagePanel.vue | 83 +++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 8 deletions(-)

diff --git a/hwe/ts/components/MessagePanel.vue b/hwe/ts/components/MessagePanel.vue
index 9a188864..b3d9fcd6 100644
--- a/hwe/ts/components/MessagePanel.vue
+++ b/hwe/ts/components/MessagePanel.vue
@@ -49,6 +49,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'public')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'public')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="NationalTalk">
@@ -67,6 +73,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'national')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'national')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="PrivateTalk">
@@ -85,6 +97,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'private')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'private')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
     <div class="DiplomacyTalk">
@@ -103,6 +121,12 @@
           :nationID="nationID"
           :permissionLevel="permissionLevel"
         ></MessagePlate>
+        <div class="d-grid Actions">
+          <button type="button" class="btn btn-dark only-mobile" @click="foldMessage($event, 'diplomacy')">접기</button>
+          <button type="button" class="btn btn-secondary" @click="loadOldMessage($event, 'diplomacy')">
+            이전 메시지 불러오기
+          </button>
+        </div>
       </template>
     </div>
   </div>
@@ -429,6 +453,43 @@ function refreshMailboxList(obj: MabilboxListResponse) {
   mailboxList.value = [favoriteBox, diplomacyMailboxList, ...nationMailboxList];
 }
 
+function foldMessage($event: MouseEvent, type: MsgType) {
+  const target = messageIndexedList[type].value;
+  if (target.length < 10) {
+    return;
+  }
+  const remain = target.slice(10);
+  target.length = 10;
+
+  for(const msg of remain){
+    messageStorage.delete(msg.id);
+  }
+}
+
+async function loadOldMessage($event: MouseEvent, type: MsgType) {
+  const target = messageIndexedList[type].value;
+  if (target.length == 0) {
+    return;
+  }
+  const last = target[target.length - 1].id;
+
+  try {
+    const response = await SammoAPI.Message.GetOldMessage({
+      to: last,
+      type,
+    });
+    updateMsgResponse(response);
+  } catch (e) {
+    if (isString(e)) {
+      toasts.warning({
+        title: "이전 메시지 불러오기 실패",
+        body: e,
+      });
+    }
+    console.error(e);
+  }
+}
+
 async function sendMessage() {
   const text = newMessageText.value;
   if (!text) {
@@ -495,9 +556,6 @@ onMounted(async () => {
   outline-color: gray;
 }
 
-.PublicTalk {
-}
-
 @include media-1000px {
   .MessagePanel {
     display: grid;
@@ -515,27 +573,36 @@ onMounted(async () => {
   .PrivateTalk {
     border-right: 1px solid gray;
   }
+
+  .only-mobile{
+    display: none;
+  }
 }
 
-@include media-500px{
-
-  #msg_submit-col{
+@include media-500px {
+  #msg_submit-col {
     order: 2;
   }
   #msg_input-col {
     order: 3;
   }
 
-  .MessageInputForm{
+  .MessageInputForm {
     position: sticky;
     top: 0px;
     z-index: 5;
   }
 
-  .stickyAnchor{
+  .stickyAnchor {
     position: relative;
     top: -68px;
     visibility: hidden;
   }
+
+  .d-grid.Actions {
+    grid-template-columns: 1fr 1fr;
+  }
+
+
 }
 </style>