From 45ad844c22ed3ebee0e9398bc68362df44586fab Mon Sep 17 00:00:00 2001 From: nejcc Date: Thu, 5 Oct 2023 21:27:15 +0200 Subject: [PATCH] - update js --- database/seeders/UserTableSeeder.php | 1 + resources/js/app.js | 41 ++++++--------------- resources/js/axiosInstance.js | 12 ++++++ resources/js/components/NavbarComponent.vue | 41 +++++++++++++++++++++ resources/js/constants.js | 2 + resources/js/registerComponents.js | 9 +++++ resources/js/registerPlugins.js | 12 ++++++ 7 files changed, 88 insertions(+), 30 deletions(-) create mode 100644 resources/js/axiosInstance.js create mode 100644 resources/js/components/NavbarComponent.vue create mode 100644 resources/js/constants.js create mode 100644 resources/js/registerComponents.js create mode 100644 resources/js/registerPlugins.js diff --git a/database/seeders/UserTableSeeder.php b/database/seeders/UserTableSeeder.php index 58095a6..7f93510 100644 --- a/database/seeders/UserTableSeeder.php +++ b/database/seeders/UserTableSeeder.php @@ -105,6 +105,7 @@ private function GenerateAllUsers(): void ['name' => 'Admin', 'username' => 'admin', 'email' => null, 'password' => 'admin', 'role' => 'super-admin'], ['name' => 'Paweł Kuna', 'username' => 'pawel', 'email' => null, 'password' => 'codecalm', 'role' => 'super-admin'], ['name' => 'user', 'username' => 'user', 'email' => null, 'password' => 'user', 'role' => 'user'], + ['name' => 'neic', 'username' => 'neic', 'email' => null, 'password' => 'secret', 'role' => 'super-admin'], ]; foreach ($users as $user) { diff --git a/resources/js/app.js b/resources/js/app.js index 7bfe5ab..f352513 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,39 +1,20 @@ -/** - * First we will load all of this project's JavaScript dependencies which - * includes Vue and other libraries. It is a great starting point when - * building robust, powerful web applications using Vue and Laravel. - */ import './bootstrap'; import { createApp } from 'vue'; +import axiosInstance from './axiosInstance'; +import { APP_TOKEN, API_BASE_URL } from './constants'; -/** - * Next, we will create a fresh Vue application instance. You may then begin - * registering components with the application instance so they are ready - * to use in your application's views. An example is included for you. - */ +import registerPlugins from './registerPlugins'; +import registerComponents from './registerComponents'; const app = createApp({}); -import ExampleComponent from './components/ExampleComponent.vue'; -// app.component('example-component', ExampleComponent); +// Global Configurations +app.config.globalProperties.$axios = axiosInstance; -/** - * The following block of code may be used to automatically register your - * Vue components. It will recursively scan this directory for the Vue - * components and automatically register them with their "basename". - * - * Eg. ./components/ExampleComponent.vue -> - */ +// Register Plugins and Components +registerPlugins(app); +registerComponents(app); -// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => { -// app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default); -// }); - -/** - * Finally, we will attach the application instance to a HTML element with - * an "id" attribute of "app". This element is included with the "auth" - * scaffolding. Otherwise, you will need to add an element yourself. - */ - -app.mount('#app'); +// Mount App +app.mount('#app'); \ No newline at end of file diff --git a/resources/js/axiosInstance.js b/resources/js/axiosInstance.js new file mode 100644 index 0000000..3976091 --- /dev/null +++ b/resources/js/axiosInstance.js @@ -0,0 +1,12 @@ +import axios from 'axios'; +import {APP_TOKEN} from "@/constants"; + +const axiosInstance = axios.create({ + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + 'app-token': APP_TOKEN, + } +}); + +export default axiosInstance; \ No newline at end of file diff --git a/resources/js/components/NavbarComponent.vue b/resources/js/components/NavbarComponent.vue new file mode 100644 index 0000000..fb5e114 --- /dev/null +++ b/resources/js/components/NavbarComponent.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/resources/js/constants.js b/resources/js/constants.js new file mode 100644 index 0000000..c1d4ada --- /dev/null +++ b/resources/js/constants.js @@ -0,0 +1,2 @@ +export const APP_TOKEN = 'rfg45t54t3g3g32g2g542g25f254ff52f2f54tg'; +export const API_BASE_URL = 'http://api.example.com'; \ No newline at end of file diff --git a/resources/js/registerComponents.js b/resources/js/registerComponents.js new file mode 100644 index 0000000..650c3c6 --- /dev/null +++ b/resources/js/registerComponents.js @@ -0,0 +1,9 @@ +// registerComponents.js + + +import NavbarComponent from "@/components/NavbarComponent.vue"; + + +export default function registerComponents(app) { + app.component('vue-navbar', NavbarComponent); +} \ No newline at end of file diff --git a/resources/js/registerPlugins.js b/resources/js/registerPlugins.js new file mode 100644 index 0000000..feb1628 --- /dev/null +++ b/resources/js/registerPlugins.js @@ -0,0 +1,12 @@ + +// import VueAutosuggest from "vue-autosuggest"; +// import VueClipboard from "vue-clipboard2"; +// import { Bootstrap5Pagination } from "laravel-vue-pagination"; +// import Multiselect from "vue-multiselect"; + +export default function registerPlugins(app) { + // app.use(VueAutosuggest); + // app.use(VueClipboard); + // app.component('pagination', Bootstrap5Pagination); + // app.component('multiselect', Multiselect); +} \ No newline at end of file