From fd53bb80783fd30efcb5ce41298a4be9a0a38901 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Mon, 1 Jan 2024 23:59:02 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E8=A6=8B=E3=81=9F=E7=9B=AE?=
 =?UTF-8?q?=E3=82=92=E8=AA=BF=E6=95=B4=20=E3=83=A2=E3=83=BC=E3=83=80?=
 =?UTF-8?q?=E3=83=AB=E5=86=85=E3=81=AEcheckbox=E3=82=92=E8=A3=BD=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/CacheClearModal/CacheClearModal.vue | 83 +++++++++++++------
 1 file changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/components/Modal/CacheClearModal/CacheClearModal.vue b/src/components/Modal/CacheClearModal/CacheClearModal.vue
index 8d0376d38..8db9aadf7 100644
--- a/src/components/Modal/CacheClearModal/CacheClearModal.vue
+++ b/src/components/Modal/CacheClearModal/CacheClearModal.vue
@@ -3,31 +3,34 @@
     title="キャッシュの削除"
     subtitle="キャッシュを削除する項目を選んで下さい。"
   >
-    <div>
-      <div :class="$style.content">
-        <p v-if="cacheData && cacheData.usage" :class="$style.usage">
-          <template v-if="cacheData.usageDetails">
-            <label v-for="(usage, key) in cacheData.usageDetails" :key="key">
-              <input v-model="selectedCaches" type="checkbox" :value="key" />
-              {{ key }} {{ prettifyFileSize(usage) }}
-            </label>
-          </template>
-          <template v-else>
-            {{ prettifyFileSize(cacheData.usage) }}
-          </template>
-        </p>
-        <form-button
-          :class="$style.button"
-          label="キャンセル"
-          @click="clearModal"
-        />
-        <form-button
-          :class="$style.button"
-          label="削除する"
-          is-danger
-          @click="clearCache"
-        />
-      </div>
+    <div :class="$style.content">
+      <p v-if="cacheData && cacheData.usage" :class="$style.usage">
+        <template v-if="cacheData.usageDetails">
+          <div v-for="(usage, key) in cacheData.usageDetails" :key="key">
+            <form-checkbox v-model="selectedCaches" :label="cacheLabel(key)" />
+            {{ prettifyFileSize(usage) }}
+            <div v-if="selectedCaches.includes(key)">a</div>
+            <div v-else>b</div>
+          </div>
+        </template>
+        <template v-else>
+          {{ prettifyFileSize(cacheData.usage) }}
+        </template>
+      </p>
+      <p v-else>キャッシュデータは存在しません</p>
+      <form-button
+        :class="$style.button"
+        label="キャンセル"
+        type="tertiary"
+        @click="clearModal"
+      />
+      <form-button
+        :class="$style.button"
+        label="削除する"
+        type="secondary"
+        is-danger
+        @click="clearCache"
+      />n
     </div>
   </modal-frame>
 </template>
@@ -38,7 +41,6 @@ import { useToastStore } from '/@/store/ui/toast'
 import { wait } from '/@/lib/basic/timer'
 import { checkStorageManagerSupport } from '/@/lib/dom/browser'
 import { prettifyFileSize } from '/@/lib/basic/file'
-import { useStampsStore } from '/@/store/entities/stamps'
 
 declare global {
   interface StorageEstimate {
@@ -63,8 +65,8 @@ const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
 import ModalFrame from '../Common/ModalFrame.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
 import { useModalStore } from '/@/store/ui/modal'
+import FormCheckbox from '/@/components/UI/FormCheckbox.vue'
 
-const { fetchStamps } = useStampsStore()
 const { addSuccessToast } = useToastStore()
 const showToast = (extraMesage?: string) => {
   addSuccessToast(`削除に成功しました${extraMesage ? `: ${extraMesage}` : ''}`)
@@ -77,6 +79,33 @@ const setCacheData = async () => {
 onMounted(setCacheData)
 
 const selectedCaches = ref<Array<string>>([])
+const [caches, indexedDB, serviceWorkerRegistrations] = [
+  ref<boolean>(),
+  ref<boolean>(),
+  ref<boolean>()
+]
+
+const cacheVariable = (cacheName: string) => {
+  switch (cacheName) {
+    case 'caches':
+      return caches
+    case 'indexedDB':
+      return indexedDB
+    case 'serviceWorkerRegistrations':
+      return serviceWorkerRegistrations
+  }
+}
+
+const cacheLabel = (cacheName: string) => {
+  switch (cacheName) {
+    case 'caches':
+      return 'traQ本体'
+    case 'indexedDB':
+      return 'ファイルの本体一覧'
+    case 'serviceWorkerRegistrations':
+      return 'ファイルのサムネイル一覧'
+  }
+}
 
 const { clearModal } = useModalStore()