Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 1x 3x 1x 3x 1x 3x 1x 1x 1x 3x 3x 2x 2x 2x 2x 3x 3x 3x 1x | <template>
<v-card
v-show="visible && tasks.length > 0"
class="profile-todos-card"
elevation="8"
data-testid="profile-widget"
>
<v-card-title class="d-flex justify-space-between align-center py-2">
<span class="text-subtitle-1 font-weight-medium">プロフィールの設定</span>
<div class="d-flex align-center ga-1">
<v-btn
v-if="onRefresh"
icon
variant="text"
:loading="loading"
@click="onRefresh?.()"
:aria-label="'再読込'"
>
<v-icon>mdi-refresh</v-icon>
</v-btn>
<v-btn
icon
variant="text"
@click="close"
:aria-label="'閉じる'"
>
<v-icon>mdi-close</v-icon>
</v-btn>
</div>
</v-card-title>
<v-divider />
<v-card-text class="pt-2">
<div class="text-body-2 mb-2">
未設定の項目があります。はじめに設定しておくと、各機能をスムーズに使えます。
</div>
<v-alert
v-if="errorMessage"
type="error"
variant="tonal"
class="mb-2"
density="compact"
>
{{ errorMessage }}
</v-alert>
<v-skeleton-loader
v-if="loading"
type="list-item-two-line, list-item-two-line, list-item-two-line"
/>
<v-list
v-else
density="compact"
class="py-0"
>
<v-list-item
v-for="t in tasks"
:key="t.id"
class="py-1"
>
<template #prepend>
<v-icon :icon="t.icon || 'mdi-checkbox-blank-outline'" />
</template>
<v-list-item-title>
{{ t.title }}
</v-list-item-title>
<v-list-item-subtitle class="text-caption">
{{ t.subtitle }}
</v-list-item-subtitle>
<template #append>
<v-btn
size="small"
variant="elevated"
@click="() => onAction(t)"
>
作成する
</v-btn>
</template>
</v-list-item>
</v-list>
</v-card-text>
<v-divider />
<v-card-actions
class="justify-end"
>
<v-btn
variant="text"
size="small"
@click="snooze"
>
あとで（今日中は非表示）
</v-btn>
</v-card-actions>
</v-card>
</template>
<script setup lang="ts">
// region Dependency Injection
import {computed, onMounted, onUnmounted} from 'vue'
import {useProfileTodos} from '@/composables/useProfileTodos' // endregion Dependency Injection
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
type Task = {
id: string
title: string
subtitle?: string
icon?: string
routeName?: string
onClick?: () => void
}
// endregion interface
// region constants
// endregion constants
// region props
const props = defineProps<{
tasks: Task[]
loading?: boolean
errorMessage?: string | null
onAction: (task: Task) => void
onRefresh?: () => void
modelValue?: boolean
}>()
// endregion props
// region variable
// endregion variable
// region properties
// const { loading, errorMessage, todos, refresh, onAction, snooze } = useProfileTodos()
const { loading, errorMessage, refresh, onAction } = useProfileTodos()
// localStorage キー
const STORAGE_KEY_CLOSE = 'profile_todos_closed'
const STORAGE_KEY_SNOOZE = 'profile_todos_snooze_until'
// endregion properties
// region emits
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void
}>()
// endregion emits
// region validator
// endregion validator
// region methods
// visible 判定（閉じた/スヌーズ中は出さない）
const visible = computed({
get() {
if (props.modelValue === false) return false
// 閉じられていたら出さない
const closed = localStorage.getItem(STORAGE_KEY_CLOSE)
if (closed === '1') return false
// スヌーズ（今日の日付まで）は出さない
const until = localStorage.getItem(STORAGE_KEY_SNOOZE)
if (until) {
const now = new Date()
const d = new Date(until)
if (now <= d) return false
}
return true
},
set(v: boolean) {
emit('update:modelValue', v)
},
})
function close() {
localStorage.setItem(STORAGE_KEY_CLOSE, '1')
visible.value = false
}
function snooze() {
const now = new Date()
// 今日の23:59:59まで非表示
const until = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
localStorage.setItem(STORAGE_KEY_SNOOZE, until.toISOString())
visible.value = false
}
onMounted(() => {
refresh()
// 復帰時に再読込するイベントを登録
const handler = () => {
if (document.visibilityState === 'visible') {
refresh()
}
}
document.addEventListener('visibilitychange', handler)
// クリーンアップ
onUnmounted(() => {
document.removeEventListener('visibilitychange', handler)
})
})
// endregion methods
// region export
// endregion export
</script>
<style scoped>
.profile-todos-card {
position: fixed;
top: 80px; /* ヘッダー高さに合わせて調整 */
right: 24px;
width: 360px; /* 画像の赤枠イメージ寄せ */
max-height: 70vh;
overflow: auto;
z-index: 2000; /* ヘッダーや本文より前面に */
}
@media (max-width: 960px) {
.profile-todos-card {
right: 12px;
width: min(92vw, 360px);
top: 72px;
}
}
</style>
|