From 18f898aa683f1fbf2e5501eb963721d08559309c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 19:08:19 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E6=AC=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/NewComment.vue   | 13 ++--
 .../requestDetail/RequestContent.vue          | 60 -------------------
 src/components/requestDetail/RequestLogs.vue  |  1 +
 src/components/shared/InputTextarea.vue       |  2 +-
 src/components/shared/MarkdownTextarea.vue    | 57 ++++++++++--------
 5 files changed, 41 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/requestDetail/RequestContent.vue

diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
index a96794f7..6938bca2 100644
--- a/src/components/requestDetail/NewComment.vue
+++ b/src/components/requestDetail/NewComment.vue
@@ -13,17 +13,16 @@ const { comment, isSending, submit } = useNewComment(request.value?.id ?? '')
 </script>
 
 <template>
-  <form class="mx-4 w-full">
-    <MarkdownTextarea v-model="comment" placeholder="コメント" />
-    <div class="mt-1">
+  <div class="w-full">
+    <MarkdownTextarea v-model="comment">
       <SimpleButton
-        class="ml-auto"
         :disabled="isSending"
         font-size="md"
         padding="sm"
-        @click.prevent="submit">
+        type="success"
+        @click="submit">
         コメントする
       </SimpleButton>
-    </div>
-  </form>
+    </MarkdownTextarea>
+  </div>
 </template>
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
deleted file mode 100644
index aa1fbdfc..00000000
--- a/src/components/requestDetail/RequestContent.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import MarkdownIt from '/@/components/shared/MarkdownIt.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = isRequestCreator(me.value)
-</script>
-
-<template>
-  <div class="flex w-3/5">
-    詳細：
-    <div v-if="!props.isEditMode && request" class="flex flex-grow items-end">
-      <MarkdownIt
-        class="h-32 flex-grow overflow-y-scroll border border-gray-300 pl-1"
-        :text="request.content" />
-      <SimpleButton
-        v-if="hasAuthority"
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', 'content')">
-        編集
-      </SimpleButton>
-    </div>
-    <div v-else class="flex flex-grow items-end">
-      <InputTextarea
-        v-model="editedValue.content"
-        class="h-30 flex-grow resize-none"
-        placeholder="詳細" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="emit('changeEditMode', '')">
-        完了
-      </SimpleButton>
-    </div>
-  </div>
-</template>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 3a0c8fd2..b2718a17 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -9,6 +9,7 @@ import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
 import CommentLog from './CommentLog.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
+import NewComment from './NewComment.vue'
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }
diff --git a/src/components/shared/InputTextarea.vue b/src/components/shared/InputTextarea.vue
index b583b824..20e550a7 100644
--- a/src/components/shared/InputTextarea.vue
+++ b/src/components/shared/InputTextarea.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <textarea
     ref="textareaRef"
-    class="bg-background min-h-32 rounded border border-gray-300 px-1"
+    class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"
     :required="required"
     :value="props.modelValue"
diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
index 1d7e11ec..8ff28c0f 100644
--- a/src/components/shared/MarkdownTextarea.vue
+++ b/src/components/shared/MarkdownTextarea.vue
@@ -24,16 +24,15 @@ const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 const currentTab = ref<TabType>('input')
 const selectedTemplate = ref('')
 
-const templateOptions = computed(() => {
-  return (
+const templateOptions = computed(
+  () =>
     props.templates?.map(template => {
       return {
         key: template.name,
         value: template.name
       }
     }) ?? []
-  )
-})
+)
 
 function setTemplate(template: string) {
   const foundTemplate = props.templates?.find(t => t.name === template)
@@ -48,43 +47,53 @@ function changeCurrentTab(tab: TabType) {
 </script>
 
 <template>
-  <div>
-    <div class="flex gap-2">
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'input' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('input')">
-        入力
-      </button>
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'preview' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('preview')">
-        プレビュー
-      </button>
+  <div class="flex flex-col rounded border border-gray-300">
+    <div
+      class="flex items-center justify-between rounded-t bg-gray-200 px-4 pt-3">
+      <div class="flex items-center">
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'input'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('input')">
+          入力
+        </button>
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'preview'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('preview')">
+          プレビュー
+        </button>
+      </div>
       <InputSelectSingle
         v-if="props.templates !== undefined"
         v-model="selectedTemplate"
-        class="m-1 ml-auto inline-block w-1/3"
+        class="inline-block"
         :options="templateOptions"
         placeholder="テンプレートを選択"
         @option:selected="setTemplate(selectedTemplate)">
       </InputSelectSingle>
     </div>
-    <div>
+    <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
-        class="min-h-40 w-full"
+        class="min-h-40 w-full bg-gray-200"
         :model-value="modelValue"
         :placeholder="placeholder"
         @update:model-value="emit('update:modelValue', $event)" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
-        class="min-h-40 w-full overflow-y-scroll border border-gray-500 px-1"
+        class="min-h-40 w-full overflow-y-scroll rounded bg-gray-200 border border-gray-300 px-3 py-2"
         :text="modelValue" />
+      <div class="flex justify-end pt-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>