tethys.backend/resources/js/app.ts
Arno Kaimbacher 36cd7a757b
All checks were successful
CI / container-job (push) Successful in 41s
feat: Integrate official drive_provider, update user profile features & UI improvements
- adonisrc.ts: Load official drive_provider and unload custom driver_provider.
- packages.json: Add @headlessui/vue dependency for tab components.
- AvatarController.ts: Rewrite avatar generation logic to always return the same avatar per user.
- auth/UserController.ts: Add profile and profileUpdate methods to support user profile editing.
- Submitter/datasetController.ts & app/models/file.ts: Adapt code to use the official drive_provider.
- app/models/user.ts: Introduce “isAdmin” getter.
- config/drive.ts: Create new configuration for the official drive_provider.
- providers/vinejs_provider.ts: Adapt allowedExtensions control to use provided options or database enabled extensions.
- resource/js/app.ts: Load default Head and Link components.
- resources/js/menu.ts: Add settings-profile.edit menu point.
- resources/js/Components/action-message.vue: Add new component for improved user feedback after form submissions.
- New avatar-input.vue component: Enable profile picture selection.
- Components/CardBox.vue: Alter layout to optionally show HeaderIcon in title bar.
- FormControl.vue: Define a readonly prop for textareas.
- Improve overall UI with updates to NavBar.vue, UserAvatar.vue, UserAvatarCurrentUser.vue, and add v-model support to password-meter.vue.
- Remove profile editing logic from AccountInfo.vue and introduce new profile components (show.vue, update-password-form.vue, update-profile-information.vue).
- app.edge: Modify page (add @inertiaHead tag) for better meta management.
- routes.ts: Add new routes for editing user profiles.
- General npm updates.
2025-02-27 16:24:25 +01:00

98 lines
3.1 KiB
TypeScript

import '../css/app.css';
import { createApp, h } from 'vue';
import { Inertia } from '@inertiajs/inertia';
import { Head, Link, createInertiaApp } from '@inertiajs/vue3';
// import DefaultLayout from '@/Layouts/Default.vue';
import { createPinia } from 'pinia';
import { StyleService } from '@/Stores/style.service';
import { LayoutService } from '@/Stores/layout';
import { LocaleStore } from '@/Stores/locale';
import { darkModeKey, styleKey } from '@/config';
import type { DefineComponent } from 'vue';
import { resolvePageComponent } from '@adonisjs/inertia/helpers';
const pinia = createPinia();
// import i18n from './i18n';
import { EmitterPlugin } from '@/EmitterDirective';
import { initRoutes } from '@eidellev/adonis-stardust/client/index.js';
initRoutes();
// import { loadTranslations } from './utils/tethyscloud-l10n';
import asyncPlugin from '@/apps/settings/asyncPlugin';
// const translation = await asyncPlugin.install('settings');
// interface SetupOptions {
// el: Element;
// App: App;
// props: Record<string, any>;
// plugin: Plugin;
// }
// import '@fontsource/archivo-black/index.css';
// import '@fontsource/inter/index.css';
createInertiaApp({
progress: {
// color: '#4B5563',
color: '#22C55E',
showSpinner: true,
},
// Webpack
// resolve: async (name: string) => {
// // Dynamically import the Vue component using import
// const { default: page } = await import(`./Pages/${name}.vue`);
// // const page = require(`./Pages/${name}.vue`).default;
// // if (!page.layout) {
// // page.layout = DefaultLayout;
// // }
// return page;
// },
resolve: (name) => {
return resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'));
},
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) })
.use(plugin)
.use(pinia)
// .use(i18n)
.use(EmitterPlugin);
// .component('inertia-link', Link)
app.component('Head', Head);
app.component('Link', Link);
// Listen for navigation event to handle layout changes
// window.addEventListener('inertia:navigate', () => {
// layoutService.isAsideMobileExpanded = false;
// layoutService.isAsideLgActive = false;
// });
asyncPlugin.install('settings').then(() => {
app.mount(el);
});
},
});
const styleService = StyleService(pinia);
const layoutService = LayoutService(pinia);
const localeService = LocaleStore(pinia);
localeService.initializeLocale();
// const mainService = MainService(pinia);
// mainService.setUser(user);
/* App style */
styleService.setStyle(localStorage[styleKey] ?? 'basic');
/* Dark mode */
if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
styleService.setDarkMode(true);
}
/* Collapse mobile aside menu on route change */
Inertia.on('navigate', () => {
layoutService.isAsideMobileExpanded = false;
layoutService.isAsideLgActive = false;
});