From 71b22398e562a49d248a501b78b21a99c86506d3 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 20:31:14 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS 何も分からない
---
 src/pages/AdminPage.vue | 102 ++++++++++++++++++++++------------------
 1 file changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 20cde50d..97e6b2f3 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -20,10 +20,12 @@ const userStore = useUserStore()
 const tagStore = useTagStore()
 const toast = useToast()
 
-const { isAdminFetched, admins, adminOptions } = storeToRefs(adminStore)
+const { isAdminFetched, adminOptions } = storeToRefs(adminStore)
 const { me, isUserFetched, isAdmin, userMap } = storeToRefs(userStore)
 const { isTagFetched, tagIdOptions } = storeToRefs(tagStore)
 
+const admins = ['test', 'mehm']
+
 const addList = ref<string[]>([])
 const removeList = ref<string[]>([])
 const deleteTagList = ref<string[]>([])
@@ -56,60 +58,66 @@ if (me.value?.admin) {
 </script>
 
 <template>
-  <div v-if="!isAdmin" class="p-2">権限がありません。</div>
+  <div v-if="isAdmin" class="p-2">権限がありません。</div>
   <div v-else class="min-w-160 mx-auto flex w-2/3 flex-col px-12 pt-8">
-    <h1 class="pb-8 text-center text-3xl">管理ページ</h1>
-    <div class="flex items-center">
-      管理者：
-      <ul class="flex gap-2">
+    <h1 class="text-2xl">管理</h1>
+    <div class="mt-6">
+      <label class="text-base font-medium">管理者</label>
+      <ul class="flex gap-2 mt-3">
         <li v-for="admin in admins" :key="admin">
           <div class="border-surface-secondary rounded border px-2 text-center">
-            {{ userMap[admin] }}
+            {{ admin }}
           </div>
         </li>
       </ul>
     </div>
-    <div class="mt-4 flex gap-4">
-      <InputSelectMultiple
-        v-model="addList"
-        class="!w-1/2"
-        :options="absentMembers"
-        placeholder="追加する管理者を選択" />
-      <SimpleButton
-        :disabled="isSending"
-        font-size="lg"
-        padding="sm"
-        @click.stop="addAdmins(addList)">
-        選択した管理者を追加
-      </SimpleButton>
-    </div>
-    <div class="mt-12 flex gap-4">
-      <InputSelectMultiple
-        v-model="removeList"
-        class="!w-1/2"
-        :options="adminOptions"
-        placeholder="削除する管理者を選択" />
-      <SimpleButton
-        :disabled="isSending"
-        font-size="lg"
-        padding="sm"
-        @click.stop="removeAdmins(removeList)">
-        選択した管理者を削除
-      </SimpleButton>
+    <div class="mt-4">
+      <label class="text-base font-medium">管理者の操作</label>
+      <div class="flex gap-3 mt-3">
+        <InputSelectMultiple
+          v-model="addList"
+          class="!w-2/3"
+          :options="absentMembers"
+          placeholder="追加する管理者を選択" />
+        <SimpleButton
+          :disabled="isSending"
+          font-size="lg"
+          padding="sm"
+          @click.stop="addAdmins(addList)">
+          選択した管理者を追加
+        </SimpleButton>
+      </div>
+      <div class="flex gap-3 mt-3">
+        <InputSelectMultiple
+          v-model="removeList"
+          class="!w-2/3"
+          :options="adminOptions"
+          placeholder="削除する管理者を選択" />
+        <SimpleButton
+          :disabled="isSending"
+          font-size="lg"
+          padding="sm"
+          @click.stop="removeAdmins(removeList)">
+          選択した管理者を削除
+        </SimpleButton>
+      </div>
     </div>
-    <div class="mt-24 flex gap-4">
-      <InputSelectMultiple
-        v-model="deleteTagList"
-        class="!w-1/2"
-        :options="tagIdOptions"
-        placeholder="削除するタグを選択" />
-      <SimpleButton
-        :disabled="deleteTagList.length === 0 || isSending"
-        font-size="lg"
-        padding="sm"
-        @click.stop="handleDeleteTags">
-        選択したタグを削除
-      </SimpleButton>
+    <div class="mt-6">
+      <label class="text-base font-medium">その他の操作</label>
+      <div class="flex gap-3 mt-3">
+        <InputSelectMultiple
+          v-model="deleteTagList"
+          class="!w-2/3"
+          :options="tagIdOptions"
+          placeholder="削除するタグを選択" />
+        <SimpleButton
+          :disabled="deleteTagList.length === 0 || isSending"
+          font-size="lg"
+          padding="sm"
+          @click.stop="handleDeleteTags">
+          選択したタグを削除
+        </SimpleButton>
+      </div>
     </div>
   </div>
 </template>

From 3181bd29e59429171084b5ce45a4214a059d316d Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 20:34:01 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A5=20=E9=96=8B=E7=99=BA=E7=94=A8?=
 =?UTF-8?q?=E3=81=AE=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPage.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 97e6b2f3..95c39c81 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -20,12 +20,10 @@ const userStore = useUserStore()
 const tagStore = useTagStore()
 const toast = useToast()
 
-const { isAdminFetched, adminOptions } = storeToRefs(adminStore)
+const { isAdminFetched, admins, adminOptions } = storeToRefs(adminStore)
 const { me, isUserFetched, isAdmin, userMap } = storeToRefs(userStore)
 const { isTagFetched, tagIdOptions } = storeToRefs(tagStore)
 
-const admins = ['test', 'mehm']
-
 const addList = ref<string[]>([])
 const removeList = ref<string[]>([])
 const deleteTagList = ref<string[]>([])
@@ -63,10 +61,10 @@ if (me.value?.admin) {
     <h1 class="text-2xl">管理</h1>
     <div class="mt-6">
       <label class="text-base font-medium">管理者</label>
-      <ul class="flex gap-2 mt-3">
+      <ul class="flex gap-3 mt-3">
         <li v-for="admin in admins" :key="admin">
-          <div class="border-surface-secondary rounded border px-2 text-center">
-            {{ admin }}
+          <div class="border-text-primary rounded border px-2 text-center">
+            {{ userMap[admin] }}
           </div>
         </li>
       </ul>

From f6dc6528548795a6e7b288e27845790b8e0b5a91 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 7 Sep 2024 14:39:42 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=9E=E3=83=AB=E3=83=81?=
 =?UTF-8?q?=E3=82=BB=E3=83=AC=E3=82=AF=E3=83=88=E3=81=AE=E6=A8=AA=E5=B9=85?=
 =?UTF-8?q?=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/InputSelectMultiple.vue |  6 ++--
 src/pages/AdminPage.vue                       | 35 ++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index a55fc334..126d5361 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -181,7 +181,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value = (focusingListItemIndex.value + 1) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
       .firstChild as HTMLButtonElement
@@ -202,7 +202,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value =
       (focusingListItemIndex.value - 1 + length) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
@@ -241,7 +241,7 @@ const calcWidth = computed(() => {
   if (/w-/.test(props.class)) {
     return props.class
   }
-  return `${props.class} w-70`
+  return `${props.class}`
 })
 
 /* ドロップダウンの位置を計算する処理 */
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 95c39c81..7052d74c 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -56,7 +56,7 @@ if (me.value?.admin) {
 </script>
 
 <template>
-  <div v-if="isAdmin" class="p-2">権限がありません。</div>
+  <div v-if="!isAdmin" class="p-2">権限がありません。</div>
   <div v-else class="min-w-160 mx-auto flex w-2/3 flex-col px-12 pt-8">
     <h1 class="text-2xl">管理</h1>
     <div class="mt-6">
@@ -72,11 +72,12 @@ if (me.value?.admin) {
     <div class="mt-4">
       <label class="text-base font-medium">管理者の操作</label>
       <div class="flex gap-3 mt-3">
-        <InputSelectMultiple
-          v-model="addList"
-          class="!w-2/3"
-          :options="absentMembers"
-          placeholder="追加する管理者を選択" />
+        <div class="flex-grow">
+          <InputSelectMultiple
+            v-model="addList"
+            :options="absentMembers"
+            placeholder="追加する管理者を選択" />
+        </div>
         <SimpleButton
           :disabled="isSending"
           font-size="lg"
@@ -86,11 +87,12 @@ if (me.value?.admin) {
         </SimpleButton>
       </div>
       <div class="flex gap-3 mt-3">
-        <InputSelectMultiple
-          v-model="removeList"
-          class="!w-2/3"
-          :options="adminOptions"
-          placeholder="削除する管理者を選択" />
+        <div class="flex-grow">
+          <InputSelectMultiple
+            v-model="removeList"
+            :options="adminOptions"
+            placeholder="削除する管理者を選択" />
+        </div>
         <SimpleButton
           :disabled="isSending"
           font-size="lg"
@@ -103,11 +105,12 @@ if (me.value?.admin) {
     <div class="mt-6">
       <label class="text-base font-medium">その他の操作</label>
       <div class="flex gap-3 mt-3">
-        <InputSelectMultiple
-          v-model="deleteTagList"
-          class="!w-2/3"
-          :options="tagIdOptions"
-          placeholder="削除するタグを選択" />
+        <div class="flex-grow">
+          <InputSelectMultiple
+            v-model="deleteTagList"
+            :options="tagIdOptions"
+            placeholder="削除するタグを選択" />
+        </div>
         <SimpleButton
           :disabled="deleteTagList.length === 0 || isSending"
           font-size="lg"

From a0904fe03bc095dded6fa9922dadb50d799f8131 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 7 Sep 2024 16:46:32 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=8E=A8=20Fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/InputSelectMultiple.vue |  2 +-
 src/pages/AdminPage.vue                       | 33 +++++++++----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index 126d5361..65a50ec9 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -241,7 +241,7 @@ const calcWidth = computed(() => {
   if (/w-/.test(props.class)) {
     return props.class
   }
-  return `${props.class}`
+  return `${props.class} w-70`
 })
 
 /* ドロップダウンの位置を計算する処理 */
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 7052d74c..a2c5ade3 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -72,12 +72,11 @@ if (me.value?.admin) {
     <div class="mt-4">
       <label class="text-base font-medium">管理者の操作</label>
       <div class="flex gap-3 mt-3">
-        <div class="flex-grow">
-          <InputSelectMultiple
-            v-model="addList"
-            :options="absentMembers"
-            placeholder="追加する管理者を選択" />
-        </div>
+        <InputSelectMultiple
+          v-model="addList"
+          class="flex-grow"
+          :options="absentMembers"
+          placeholder="追加する管理者を選択" />
         <SimpleButton
           :disabled="isSending"
           font-size="lg"
@@ -87,12 +86,11 @@ if (me.value?.admin) {
         </SimpleButton>
       </div>
       <div class="flex gap-3 mt-3">
-        <div class="flex-grow">
-          <InputSelectMultiple
-            v-model="removeList"
-            :options="adminOptions"
-            placeholder="削除する管理者を選択" />
-        </div>
+        <InputSelectMultiple
+          v-model="removeList"
+          class="flex-grow"
+          :options="adminOptions"
+          placeholder="削除する管理者を選択" />
         <SimpleButton
           :disabled="isSending"
           font-size="lg"
@@ -105,12 +103,11 @@ if (me.value?.admin) {
     <div class="mt-6">
       <label class="text-base font-medium">その他の操作</label>
       <div class="flex gap-3 mt-3">
-        <div class="flex-grow">
-          <InputSelectMultiple
-            v-model="deleteTagList"
-            :options="tagIdOptions"
-            placeholder="削除するタグを選択" />
-        </div>
+        <InputSelectMultiple
+          v-model="deleteTagList"
+          class="flex-grow"
+          :options="tagIdOptions"
+          placeholder="削除するタグを選択" />
         <SimpleButton
           :disabled="deleteTagList.length === 0 || isSending"
           font-size="lg"

From 61f729f1a2496f5dc592b7749e2d52fd7a8ebf6a Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Tue, 24 Sep 2024 22:08:49 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=8E=A8=20=E5=88=B6=E9=99=90=E3=82=92?=
 =?UTF-8?q?=E7=84=A1=E3=81=8F=E3=81=97=E3=81=A6=E3=81=8A=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/InputSelectMultiple.vue |  4 ++--
 src/pages/AdminPage.vue                       | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index 18f2a0b6..7828c06f 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -286,12 +286,12 @@ onUnmounted(() => {
           :id="props.id"
           ref="inputRef"
           v-model="searchQuery"
-          class="flex-grow bg-transparent pl-1 focus:outline-none"
+          class="bg-transparent pl-1 focus:outline-none"
           :placeholder="selectedValues.length === 0 ? placeholder : ''"
           @focus="isDropdownOpen = true"
           @keydown="handleInputKeydown" />
       </div>
-      <ChevronDownIcon class="min-w-4 mx-1 h-4" />
+      <ChevronDownIcon class="min-w-4 ml-auto mx-1 h-4" />
     </div>
     <ul
       v-if="isDropdownOpen && searchedOptions.length > 0"
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 8195fdb2..9dfae49b 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -57,7 +57,7 @@ if (me.value?.admin) {
 
 <template>
   <div v-if="!isAdmin" class="p-2">権限がありません。</div>
-  <div v-else class="min-w-[640px] mx-auto flex w-2/3 flex-col px-12 pt-8">
+  <div v-else class="mx-auto flex w-2/3 flex-col px-12 pt-8">
     <h1 class="text-2xl">管理</h1>
     <div class="mt-6">
       <label class="text-base font-medium">管理者</label>
@@ -71,10 +71,10 @@ if (me.value?.admin) {
     </div>
     <div class="mt-4">
       <label class="text-base font-medium">管理者の操作</label>
-      <div class="flex gap-3 mt-3">
+      <div class="flex flex-wrap gap-3 mt-3">
         <InputSelectMultiple
           v-model="addList"
-          class="flex-grow"
+          class="flex-grow w-auto"
           :options="absentMembers"
           placeholder="追加する管理者を選択" />
         <SimpleButton
@@ -85,10 +85,10 @@ if (me.value?.admin) {
           選択した管理者を追加
         </SimpleButton>
       </div>
-      <div class="flex gap-3 mt-3">
+      <div class="flex flex-wrap gap-3 mt-3">
         <InputSelectMultiple
           v-model="removeList"
-          class="flex-grow"
+          class="flex-grow w-auto"
           :options="adminOptions"
           placeholder="削除する管理者を選択" />
         <SimpleButton
@@ -102,10 +102,10 @@ if (me.value?.admin) {
     </div>
     <div class="mt-6">
       <label class="text-base font-medium">その他の操作</label>
-      <div class="flex gap-3 mt-3">
+      <div class="flex flex-wrap gap-3 mt-3">
         <InputSelectMultiple
           v-model="deleteTagList"
-          class="flex-grow"
+          class="flex-grow w-auto"
           :options="tagIdOptions"
           placeholder="削除するタグを選択" />
         <SimpleButton