|
| 1 | +<script lang="ts" setup> |
| 2 | +import { NFlex, NSelect, NText } from 'naive-ui'; |
| 3 | +
|
| 4 | +import { computed, ref } from 'vue'; |
| 5 | +
|
| 6 | +import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue'; |
| 7 | +import { |
| 8 | + type DefaultListIds, |
| 9 | + DefaultLists, |
| 10 | + DefaultListsMap, |
| 11 | + type ListEntity, |
| 12 | +} from '~/models/list.model'; |
| 13 | +import { Route } from '~/models/router.model'; |
| 14 | +import { |
| 15 | + QuickAction, |
| 16 | + QuickActionDate, |
| 17 | + useExtensionSettingsStore, |
| 18 | + useExtensionSettingsStoreRefs, |
| 19 | +} from '~/stores/settings/extension.store'; |
| 20 | +import { useI18n } from '~/utils/i18n.utils'; |
| 21 | +
|
| 22 | +const i18n = useI18n('settings', 'actions'); |
| 23 | +
|
| 24 | +const { enabledTabs } = useExtensionSettingsStoreRefs(); |
| 25 | +const { |
| 26 | + getAction, |
| 27 | + setAction, |
| 28 | + getActionDate, |
| 29 | + setActionDate, |
| 30 | + getActionList, |
| 31 | + setActionList, |
| 32 | +} = useExtensionSettingsStore(); |
| 33 | +
|
| 34 | +const getActionArray = (tab: Route) => { |
| 35 | + const action = getAction(tab); |
| 36 | + if (!action) return []; |
| 37 | + return Object.entries(action) |
| 38 | + .filter(([, value]) => value) |
| 39 | + .map(([key]) => key); |
| 40 | +}; |
| 41 | +
|
| 42 | +const actionOptions = computed(() => |
| 43 | + Object.values(QuickAction).map(value => ({ |
| 44 | + label: i18n(value, 'common', 'action'), |
| 45 | + value, |
| 46 | + })), |
| 47 | +); |
| 48 | +
|
| 49 | +type ListOption = { label: string; value: DefaultListIds; list: ListEntity }; |
| 50 | +const allowedList = { |
| 51 | + [DefaultLists.Watchlist.id]: DefaultLists.Watchlist, |
| 52 | + [DefaultLists.Favorites.id]: DefaultLists.Favorites, |
| 53 | +}; |
| 54 | +const listOptions = computed<ListOption[]>(() => |
| 55 | + [DefaultLists.Watchlist, DefaultLists.Favorites].map(list => ({ |
| 56 | + label: i18n(list.name, 'list'), |
| 57 | + value: list.id, |
| 58 | + list, |
| 59 | + })), |
| 60 | +); |
| 61 | +
|
| 62 | +const dateOptions = computed(() => |
| 63 | + Object.values(QuickActionDate).map(value => ({ |
| 64 | + label: i18n(value, 'common', 'action', 'date'), |
| 65 | + value, |
| 66 | + })), |
| 67 | +); |
| 68 | +
|
| 69 | +const container = ref(); |
| 70 | +</script> |
| 71 | + |
| 72 | +<template> |
| 73 | + <div ref="container" class="actions-container"> |
| 74 | + <!-- Quick Action Date Watched --> |
| 75 | + <SettingsFormItem class="form-item" :label="i18n('label__date_watched')"> |
| 76 | + <NSelect |
| 77 | + class="date-select" |
| 78 | + :value="getActionDate(QuickAction.Watch)" |
| 79 | + :to="container" |
| 80 | + :options="dateOptions" |
| 81 | + @update:value="v => setActionDate(QuickAction.Watch, DefaultLists[v])" |
| 82 | + /> |
| 83 | + </SettingsFormItem> |
| 84 | + |
| 85 | + <!-- Quick Action Date Collect --> |
| 86 | + <SettingsFormItem class="form-item" :label="i18n('label__date_collected')"> |
| 87 | + <NSelect |
| 88 | + class="date-select" |
| 89 | + :value="getActionDate(QuickAction.Collect)" |
| 90 | + :to="container" |
| 91 | + :options="dateOptions" |
| 92 | + @update:value="v => setActionDate(QuickAction.Collect, v)" |
| 93 | + /> |
| 94 | + </SettingsFormItem> |
| 95 | + |
| 96 | + <NText class="description" tag="p">{{ i18n('description') }}</NText> |
| 97 | + |
| 98 | + <NFlex |
| 99 | + v-for="[tab] in enabledTabs.filter(([tab]) => tab !== Route.Releases)" |
| 100 | + :key="tab" |
| 101 | + class="form-row" |
| 102 | + align="center" |
| 103 | + justify="space-between" |
| 104 | + > |
| 105 | + <NText class="form-header" tag="h3">{{ i18n(tab, 'route') }}</NText> |
| 106 | + <NFlex class="form-selects" align="center" justify="space-around"> |
| 107 | + <!-- Quick Action --> |
| 108 | + <SettingsFormItem class="form-item action-select"> |
| 109 | + <NSelect |
| 110 | + :value="getActionArray(tab)" |
| 111 | + :to="container" |
| 112 | + :options="actionOptions" |
| 113 | + multiple |
| 114 | + @update:value="v => setAction(tab, v)" |
| 115 | + /> |
| 116 | + </SettingsFormItem> |
| 117 | + |
| 118 | + <!-- Quick Action List --> |
| 119 | + <SettingsFormItem class="form-item list-select"> |
| 120 | + <NSelect |
| 121 | + :value="getActionList(tab)?.id" |
| 122 | + :to="container" |
| 123 | + :options="listOptions" |
| 124 | + @update:value=" |
| 125 | + (v: ListOption['value']) => setActionList(tab, DefaultListsMap[v]) |
| 126 | + " |
| 127 | + /> |
| 128 | + </SettingsFormItem> |
| 129 | + </NFlex> |
| 130 | + </NFlex> |
| 131 | + </div> |
| 132 | +</template> |
| 133 | + |
| 134 | +<style lang="scss" scoped> |
| 135 | +.actions-container { |
| 136 | + display: flex; |
| 137 | + flex-direction: column; |
| 138 | + gap: 1.5rem; |
| 139 | +
|
| 140 | + .form-row { |
| 141 | + padding: 0.25rem 1rem; |
| 142 | + background: var(--bg-black-soft); |
| 143 | + border: 1px solid var(--white-10); |
| 144 | + border-radius: 0.5rem; |
| 145 | + transition: |
| 146 | + background 0.3s var(--n-bezier), |
| 147 | + border 0.3s var(--n-bezier); |
| 148 | +
|
| 149 | + &:active, |
| 150 | + &:focus-within, |
| 151 | + &:hover { |
| 152 | + border-color: var(--white-15); |
| 153 | + } |
| 154 | + } |
| 155 | +
|
| 156 | + .form-selects { |
| 157 | + flex: 1 1 70%; |
| 158 | + } |
| 159 | +
|
| 160 | + .form-item { |
| 161 | + padding: 0.25rem; |
| 162 | + } |
| 163 | +
|
| 164 | + .form-header { |
| 165 | + flex: 0 1 20%; |
| 166 | + } |
| 167 | +
|
| 168 | + .action-select { |
| 169 | + display: flex; |
| 170 | + flex: 1 1 23rem; |
| 171 | +
|
| 172 | + :deep(.n-form-item-blank) { |
| 173 | + flex: 1 1 auto; |
| 174 | + } |
| 175 | + } |
| 176 | +
|
| 177 | + .list-select { |
| 178 | + display: flex; |
| 179 | + flex: 1 1 8rem; |
| 180 | +
|
| 181 | + :deep(.n-form-item-blank) { |
| 182 | + flex: 1 1 auto; |
| 183 | + } |
| 184 | + } |
| 185 | +
|
| 186 | + .date-select { |
| 187 | + min-width: 10rem; |
| 188 | + } |
| 189 | +
|
| 190 | + .description { |
| 191 | + margin: 0 0 0 0.25rem; |
| 192 | + color: var(--white-70); |
| 193 | + font-weight: 600; |
| 194 | + font-size: 1rem; |
| 195 | + white-space: pre-line; |
| 196 | + } |
| 197 | +} |
| 198 | +</style> |
0 commit comments