CacheClearModalのプロトタイプができた

Author: reiroop

src/components/Settings/BrowserTab/ClearCache.vue renamed to src/components/Modal/CacheClearModal/CacheClearModal.vue

@@ -1,34 +1,35 @@
 <template>
-  <div>
-    <h3 :class="$style.header">キャッシュの削除</h3>
-    <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>
-      <div v-for="(cache, index) in selectedCaches" :key="index">
-        {{ cache }}
+  <modal-frame
+    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>
-      <form-button
-        :class="$style.button"
-        label="キャンセル"
-        @click="closeModal"
-      />
-      <form-button
-        :class="$style.button"
-        label="削除する"
-        is-danger
-        @click="clearCache"
-      />
     </div>
-  </div>
+  </modal-frame>
 </template>
 
 <script lang="ts">
@@ -59,7 +60,9 @@ const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
 </script>
 
 <script lang="ts" setup>
+import ModalFrame from '../Common/ModalFrame.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
+import { useModalStore } from '/@/store/ui/modal'
 
 const { fetchStamps } = useStampsStore()
 const { addSuccessToast } = useToastStore()
@@ -75,9 +78,7 @@ onMounted(setCacheData)
 
 const selectedCaches = ref<Array<string>>([])
 
-const closeModal = () => {
-  return
-}
+const { clearModal } = useModalStore()
 
 const clearCache = async () => {
   if (!confirmClear()) return

src/components/Modal/ModalContainer.vue

@@ -63,6 +63,7 @@ import GroupCreateModal from './GroupCreateModal/GroupCreateModal.vue'
 import GroupMemberEditModal from './GroupMemberEditModal/GroupMemberEditModal.vue'
 import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
+import CacheClearModal from './CacheClearModal/CacheClearModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -96,6 +97,8 @@ const component = computed(() => {
       return GroupAdminAddModal
     case 'group-member-add':
       return GroupMemberAddModal
+    case 'cache-clear':
+      return CacheClearModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)

src/components/Settings/BrowserTab/CacheManager.vue

@@ -13,7 +13,6 @@
         @click="openClearCacheModal"
       />
     </div>
-    <clear-cache />
   </div>
 </template>
 
@@ -38,16 +37,19 @@ const getStorageUsage = async () => {
 
 <script lang="ts" setup>
 import FormButton from '/@/components/UI/FormButton.vue'
-import ClearCache from './ClearCache.vue'
+import { useModalStore } from '/@/store/ui/modal'
 
 const cacheData = ref<StorageEstimate | null>(null)
 const setCacheData = async () => {
   cacheData.value = await getStorageUsage()
 }
 onMounted(setCacheData)
 
+const { pushModal } = useModalStore()
 const openClearCacheModal = async () => {
-  return
+  pushModal({
+    type: 'cache-clear'
+  })
 }
 </script>
 

src/store/ui/modal/states.ts

@@ -24,6 +24,7 @@ type ModalStateType =
   | 'group-member-edit'
   | 'group-admin-add'
   | 'group-member-add'
+  | 'cache-clear'
 
 export type ModalState =
   | UserModalState
@@ -40,6 +41,7 @@ export type ModalState =
   | GroupMemberEditModalState
   | GroupAdminAddModalState
   | GroupMemberAddModalState
+  | CacheClearModalState
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -123,3 +125,7 @@ interface GroupMemberAddModalState extends BaseModalState {
   type: 'group-member-add'
   id: UserGroupId
 }
+
+interface CacheClearModalState extends BaseModalState {
+  type: 'cache-clear'
+}