Skip to content

Commit 211cf66

Browse files
dvcoldvcol
committed
feat(settings): adds settings tabs card
1 parent 20ae9ab commit 211cf66

File tree

7 files changed

+231
-43
lines changed

7 files changed

+231
-43
lines changed

‎src/components/common/navbar/NavbarComponent.vue

+7-11
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDop
77
88
import { Route } from '~/router';
99
import { NavbarService } from '~/services/navbar.service';
10+
import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
1011
import { useI18n } from '~/utils';
1112
1213
const props = defineProps({
@@ -28,22 +29,16 @@ const navigate = (to: Route) => {
2829
router.push({ name: to });
2930
};
3031
31-
const routes = [
32-
Route.Progress,
33-
Route.Calendar,
34-
Route.History,
35-
Route.Watchlist,
36-
Route.Search,
37-
];
32+
const { enabledRoutes } = useExtensionSettingsStoreRefs();
3833
39-
const activableRoutes = [...routes, Route.Settings];
34+
const activableRoutes = computed(() => [...enabledRoutes.value, Route.Settings]);
4035
4136
const activeRoute = computed(() => {
4237
const _name = route.name?.toString();
4338
if (!_name) return;
4439
return (
45-
activableRoutes.find(r => r === _name) ??
46-
routes.find(r => _name.startsWith(r)) ??
40+
activableRoutes.value.find(r => r === _name) ??
41+
enabledRoutes.value.find(r => _name.startsWith(r)) ??
4742
Route.Settings
4843
);
4944
});
@@ -75,6 +70,7 @@ const navElement = ref<HTMLElement>();
7570
@focusout="isFocus = false"
7671
>
7772
<NTabs
73+
:key="enabledRoutes.join('-')"
7874
:value="activeRoute"
7975
class="tabs"
8076
type="segment"
@@ -88,7 +84,7 @@ const navElement = ref<HTMLElement>();
8884
'--n-color-segment': 'inherit',
8985
}"
9086
>
91-
<template v-for="_route in routes" :key="_route">
87+
<template v-for="_route in enabledRoutes" :key="_route">
9288
<NTab
9389
:style="
9490
_route === activeRoute

‎src/components/common/navbar/NavbarPageSizeSelect.vue

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<script setup lang="ts">
2-
import { NIcon, NSelect, NTooltip, type SelectOption } from 'naive-ui';
2+
import { NIcon, NSelect, NTooltip } from 'naive-ui';
33
44
import { computed, defineProps, onMounted, ref, toRefs, watch } from 'vue';
55
66
import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
77
import IconPage from '~/components/icons/IconPage.vue';
88
import IconPageDouble from '~/components/icons/IconPageDouble.vue';
99
10+
import { pageSizeOptions } from '~/models/page-size.model';
1011
import { useI18n } from '~/utils';
1112
1213
const i18n = useI18n('navbar');
@@ -30,14 +31,6 @@ const emit = defineEmits<{
3031
(e: 'update:pageSize', value: number): void;
3132
}>();
3233
33-
const pageSizeOptions: SelectOption[] = [
34-
{ label: '50', value: 50 },
35-
{ label: '100', value: 100 },
36-
{ label: '200', value: 200 },
37-
{ label: '500', value: 500 },
38-
{ label: '1000', value: 1000 },
39-
];
40-
4134
const { pageSize } = toRefs(props);
4235
const innerValue = ref(pageSize.value);
4336

‎src/components/views/settings/SettingsFormItem.vue

+32-6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ defineProps({
88
type: String,
99
required: false,
1010
},
11+
warning: {
12+
type: String,
13+
required: false,
14+
},
1115
form: {
1216
type: Object as PropType<FormItemGiProps>,
1317
required: false,
@@ -16,12 +20,22 @@ defineProps({
1620
</script>
1721

1822
<template>
19-
<NFormItem class="form-row" label-placement="left" :show-feedback="false" v-bind="form">
20-
<template #label>
21-
<span class="from-label">{{ label }}</span>
22-
</template>
23-
<slot />
24-
</NFormItem>
23+
<div>
24+
<NFormItem
25+
class="form-row"
26+
label-placement="left"
27+
:show-feedback="false"
28+
v-bind="form"
29+
>
30+
<template #label>
31+
<span class="from-label">{{ label }}</span>
32+
</template>
33+
<slot />
34+
</NFormItem>
35+
<div class="form-warning" :class="{ show: !!warning }">
36+
<span v-if="warning">{{ warning }}</span>
37+
</div>
38+
</div>
2539
</template>
2640

2741
<style lang="scss" scoped>
@@ -32,6 +46,18 @@ defineProps({
3246
transition: color 0.3s var(--n-bezier);
3347
}
3448
49+
.form-warning {
50+
display: flex;
51+
flex: 1 0 100%;
52+
height: 0;
53+
color: var(--color-warning);
54+
transition: height 0.3s var(--n-bezier);
55+
56+
&.show {
57+
height: 1.5rem;
58+
}
59+
}
60+
3561
.form-row {
3662
display: flex;
3763
flex: 1 1 auto;

‎src/components/views/settings/SettingsTabs.vue

+102-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,109 @@
11
<script lang="ts" setup>
2-
import { NFlex } from 'naive-ui';
2+
import { NSelect, NSwitch } from 'naive-ui';
33
4-
import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
4+
import { ref } from 'vue';
55
6-
const { progressTab } = useExtensionSettingsStore();
6+
import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
7+
import { pageSizeOptions } from '~/models/page-size.model';
8+
import { Route } from '~/router';
9+
import { useHistoryStoreRefs } from '~/stores/data/history.store';
10+
import { useListStoreRefs } from '~/stores/data/list.store';
11+
import { useSearchStoreRefs } from '~/stores/data/search.store';
12+
import {
13+
useExtensionSettingsStore,
14+
useExtensionSettingsStoreRefs,
15+
} from '~/stores/settings/extension.store';
16+
import { useI18n } from '~/utils';
17+
18+
const i18n = useI18n('settings', 'tabs');
19+
20+
const { enabledTabs, restoreRoute, routeDictionary } = useExtensionSettingsStoreRefs();
21+
const { toggleTab } = useExtensionSettingsStore();
22+
23+
const { pageSize: historyPageSize } = useHistoryStoreRefs();
24+
const { pageSize: listPageSize } = useListStoreRefs();
25+
const { pageSize: searchPageSize } = useSearchStoreRefs();
26+
27+
const container = ref();
728
</script>
829

930
<template>
10-
<NFlex> This is the tabs card : {{ progressTab }} </NFlex>
31+
<div ref="container" class="tabs-container">
32+
<!-- Restore tab -->
33+
<SettingsFormItem :label="i18n('label_restore_tab')">
34+
<NSwitch v-model:value="restoreRoute" class="form-switch">
35+
<template #checked>{{ i18n('on', 'common', 'button') }}</template>
36+
<template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
37+
</NSwitch>
38+
</SettingsFormItem>
39+
40+
<!-- Enable tabs -->
41+
<SettingsFormItem
42+
v-for="[route, state] of enabledTabs"
43+
:key="route"
44+
:label="i18n(`label_route_${ route }`)"
45+
:warning="
46+
state && route === Route.Progress
47+
? i18n(`label_route_${ route }_warning`)
48+
: undefined
49+
"
50+
>
51+
<NSwitch :value="state" class="form-switch" @click="toggleTab(route)">
52+
<template #checked>{{ i18n('on', 'common', 'button') }}</template>
53+
<template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
54+
</NSwitch>
55+
</SettingsFormItem>
56+
57+
<!-- Page Size -->
58+
<SettingsFormItem :label="i18n('label_history_page_size')">
59+
<NSelect
60+
v-model:value="historyPageSize"
61+
:disabled="!routeDictionary.history"
62+
class="form-select"
63+
:to="container"
64+
:options="pageSizeOptions"
65+
/>
66+
</SettingsFormItem>
67+
68+
<SettingsFormItem :label="i18n('label_list_page_size')">
69+
<NSelect
70+
v-model:value="listPageSize"
71+
:disabled="!routeDictionary.watchlist"
72+
class="form-select"
73+
:to="container"
74+
:options="pageSizeOptions"
75+
/>
76+
</SettingsFormItem>
77+
78+
<SettingsFormItem :label="i18n('label_search_page_size')">
79+
<NSelect
80+
v-model:value="searchPageSize"
81+
:disabled="!routeDictionary.search"
82+
class="form-select"
83+
:to="container"
84+
:options="pageSizeOptions"
85+
/>
86+
</SettingsFormItem>
87+
</div>
1188
</template>
89+
90+
<style lang="scss" scoped>
91+
.tabs-container {
92+
display: flex;
93+
flex-direction: column;
94+
gap: 1.5rem;
95+
96+
.form-switch {
97+
display: flex;
98+
flex: 1 1 auto;
99+
justify-content: flex-end;
100+
min-width: 4rem;
101+
padding: 0 0.5rem;
102+
font-size: 0.75rem;
103+
}
104+
}
105+
106+
.form-select {
107+
min-width: 5.5rem;
108+
}
109+
</style>

‎src/i18n/en/settings/settings-tabs.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"settings__tabs__label_restore_tab": {
3+
"message": "Restore active tab on startup",
4+
"description": "Label for the 'Restore active tab on startup' setting"
5+
},
6+
"settings__tabs__label_route_progress": {
7+
"message": "Enable the progress tab",
8+
"description": "Label for the 'Enable the progress tab' setting"
9+
},
10+
"settings__tabs__label_route_progress_warning": {
11+
"message": "This tab is experimental and may not work as expected.",
12+
"description": "Warning message for the 'Enable the progress tab' setting"
13+
},
14+
"settings__tabs__label_route_calendar": {
15+
"message": "Enable the calendar tab",
16+
"description": "Label for the 'Enable the calendar tab' setting"
17+
},
18+
"settings__tabs__label_route_history": {
19+
"message": "Enable the history tab",
20+
"description": "Label for the 'Enable the history tab' setting"
21+
},
22+
"settings__tabs__label_route_watchlist": {
23+
"message": "Enable the list tab",
24+
"description": "Label for the 'Enable the list tab' setting"
25+
},
26+
"settings__tabs__label_route_search": {
27+
"message": "Enable the search tab",
28+
"description": "Label for the 'Enable the search tab' setting"
29+
},
30+
"settings__tabs__label_history_page_size": {
31+
"message": "History page size",
32+
"description": "Label for the 'History page size' setting"
33+
},
34+
"settings__tabs__label_list_page_size": {
35+
"message": "List page size",
36+
"description": "Label for the 'List page size' setting"
37+
},
38+
"settings__tabs__label_search_page_size": {
39+
"message": "Search page size",
40+
"description": "Label for the 'Search page size' setting"
41+
}
42+
}

‎src/models/page-size.model.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { SelectOption } from 'naive-ui';
2+
3+
export const pageSizeOptions: SelectOption[] = [
4+
{ label: '50', value: 50 },
5+
{ label: '100', value: 100 },
6+
{ label: '200', value: 200 },
7+
{ label: '500', value: 500 },
8+
{ label: '1000', value: 1000 },
9+
];

0 commit comments

Comments
 (0)