filebrowser/frontend/src/views/Settings.vue

109 lines
2.6 KiB
Vue
Raw Normal View History

2018-02-01 12:17:04 +00:00
<template>
2024-09-16 21:01:16 +00:00
<div class="dashboard" style="padding-bottom: 30vh">
2024-11-21 00:15:30 +00:00
<div v-if="isRootSettings && !userPage" class="settings-views">
2024-08-24 22:02:33 +00:00
<div
v-for="setting in settings"
:key="setting.id + '-main'"
:id="setting.id + '-main'"
2024-11-21 00:15:30 +00:00
@click="setView(setting.id + '-main')"
2024-08-24 22:02:33 +00:00
>
<!-- Dynamically render the component based on the setting -->
2024-09-16 21:01:16 +00:00
<component v-if="shouldShow(setting)" :is="setting.component"></component>
</div>
</div>
<div v-else class="settings-views">
<div class="active">
<UserSettings />
2021-02-19 16:01:43 +00:00
</div>
</div>
2018-02-01 12:17:04 +00:00
<div v-if="loading">
<h2 class="message delayed">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<span>{{ $t("files.loading") }}</span>
</h2>
</div>
2018-02-01 12:17:04 +00:00
</div>
</template>
<script>
2024-08-24 22:02:33 +00:00
import { state, getters, mutations } from "@/store";
import { settings } from "@/utils/constants";
import GlobalSettings from "@/views/settings/Global.vue";
import ProfileSettings from "@/views/settings/Profile.vue";
import SharesSettings from "@/views/settings/Shares.vue";
2024-09-16 21:01:16 +00:00
import UserManagement from "@/views/settings/Users.vue";
import UserSettings from "@/views/settings/User.vue";
2024-11-21 00:15:30 +00:00
import ApiKeys from "@/views/settings/Api.vue";
2018-02-01 12:17:04 +00:00
export default {
2021-03-21 11:51:58 +00:00
name: "settings",
2024-08-24 22:02:33 +00:00
components: {
2024-09-16 21:01:16 +00:00
UserManagement,
UserSettings,
2024-08-24 22:02:33 +00:00
GlobalSettings,
ProfileSettings,
SharesSettings,
2024-11-21 00:15:30 +00:00
ApiKeys,
2024-08-24 22:02:33 +00:00
},
data() {
return {
settings, // Initialize the settings array in data
};
2023-09-04 19:39:06 +00:00
},
2021-02-25 18:37:07 +00:00
computed: {
2024-09-16 21:01:16 +00:00
isRootSettings() {
2024-11-21 00:15:30 +00:00
return getters.currentView() == "settings";
2024-09-16 21:01:16 +00:00
},
2024-11-21 00:15:30 +00:00
userPage() {
return getters.routePath().startsWith(`/settings/users/`);
2024-09-16 21:01:16 +00:00
},
2024-07-30 17:45:27 +00:00
loading() {
2024-08-24 22:02:33 +00:00
return getters.isLoading();
2024-07-30 17:45:27 +00:00
},
user() {
return state.user;
},
2024-08-24 22:02:33 +00:00
currentHash() {
return getters.currentHash();
},
},
mounted() {
mutations.setActiveSettingsView(getters.currentHash());
},
methods: {
2024-09-16 21:01:16 +00:00
shouldShow(setting) {
2024-11-21 00:15:30 +00:00
const perm = setting?.perm || {};
// Check if all keys in setting.perm exist in state.user.perm and have truthy values
return Object.keys(perm).every((key) => state.user.perm[key]);
2024-08-24 22:02:33 +00:00
},
setView(view) {
if (state.activeSettingsView === view) return;
mutations.setActiveSettingsView(view);
},
2021-03-21 11:51:58 +00:00
},
};
2024-07-30 17:45:27 +00:00
</script>
2024-08-24 22:02:33 +00:00
<style>
.dashboard {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
.settings-views {
max-width: 1000px;
padding-bottom: 35vh;
2024-09-16 21:01:16 +00:00
width: 100%;
2024-08-24 22:02:33 +00:00
}
2024-11-21 00:15:30 +00:00
.settings-views .card {
2024-08-24 22:02:33 +00:00
border-style: solid;
opacity: 1;
}
</style>