[frontend] Refactoring import

vite.config.js

@@ -6,10 +6,11 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   root: "web/src",
+  base: "/",
   build: {
      outDir: "../public"
   },
-  // publicDir: "",
+  publicDir: "public",
   plugins: [vue()],
   resolve: {
     alias: {

web/src/App.vue

@@ -1,30 +1,35 @@
-<script setup>
+<script>
 import LoginPage from './components/LoginPage.vue'
 import MainPage from './components/MainPage.vue'
 import {useAuthStore} from './stores/auth.js'
-</script>
-
-<script>
 import * as client from "./client/client.js";
 
 export default {
-  data() {
-    return {
-      authStore: useAuthStore(),
-    }
-  },
-  created() {
-    let res = client.jsonRequest(client.methodGet, client.routeCheckAuth)
-    if (res.status === client.statusOK) {
-      this.authStore.setAuth(res.data.username)
-    } else {
-      this.authStore.resetAuth()
-    }
-  },
+    components: {
+        LoginPage,
+        MainPage,
+    },
+    setup() {
+        const authStore = useAuthStore();
+        return {authStore};
+    },
+    data() {
+        return {
+            authStore: useAuthStore(),
+        }
+    },
+    created() {
+        let res = client.jsonRequest(client.methodGet, client.routeCheckAuth)
+        if (res.status === client.statusOK) {
+            this.authStore.setAuth(res.data.username)
+        } else {
+            this.authStore.resetAuth()
+        }
+    },
 }
 </script>
 
 <template>
-  <LoginPage></LoginPage>
-  <MainPage></MainPage>
+    <LoginPage></LoginPage>
+    <MainPage></MainPage>
 </template>

web/src/components/LoginPage.vue

@@ -1,14 +1,15 @@
-<script setup>
-import {useAuthStore} from '../stores/auth.js'</script>
-
 <script>
-import * as client from "../client/client.js";
+import {useAuthStore} from "../stores/auth.js"
+import * as client from "../client/client.js"
 import * as auth from "../auth/auth.js"
 
 export default {
+    setup() {
+        const authStore = useAuthStore()
+        return {authStore}
+    },
     data() {
         return {
-            authStore: useAuthStore(),
             form: {
                 username: "",
                 password: "",

web/src/components/MainPage.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script>
 import PlaceTreeItem from './PlaceTreeItem.vue'
 import ModalAddPlace from './modal/ModalAddPlace.vue'
 import ModalUpdatePlace from "./modal/ModalUpdatePlace.vue"
@@ -16,25 +16,42 @@ import ModalUpdatePassword from "./modal/ModalUpdatePassword.vue"
 import ModalToast from "./modal/ModalToast.vue"
 import {useAuthStore} from '../stores/auth.js'
 import {usePlaceStore} from '../stores/place.js'
-import {useThingStore} from '../stores/thing.js'
+import {useThingStore, typePlace} from '../stores/thing.js'
 import {useImageStore} from '../stores/image.js'
 import {useTagStore} from '../stores/tag.js'
-</script>
-
-<script>
 import * as auth from "../auth/auth.js"
-import * as client from "../client/client.js";
-import {formatDate} from "../helpers/date.js";
-import {typePlace} from "../stores/thing";
+import * as client from "../client/client.js"
+import {formatDate} from "../helpers/date.js"
 
 export default {
+    components: {
+        PlaceTreeItem,
+        ModalAddPlace,
+        ModalUpdatePlace,
+        ModalDeletePlace,
+        ModalAddThing,
+        ModalUpdateThing,
+        ModalDeleteThing,
+        ModalAddImage,
+        ModalSearchThing,
+        ModalTags,
+        ModalShowImage,
+        ModalAddUser,
+        ModalUpdateUsername,
+        ModalUpdatePassword,
+        ModalToast,
+    },
+    setup() {
+        const authStore = useAuthStore()
+        const placeStore = usePlaceStore()
+        const thingStore = useThingStore()
+        const imageStore = useImageStore()
+        const tagStore = useTagStore()
+
+        return {authStore, placeStore, thingStore, imageStore, tagStore}
+    },
     data() {
         return {
-            authStore: useAuthStore(),
-            placeStore: usePlaceStore(),
-            thingStore: useThingStore(),
-            imageStore: useImageStore(),
-            tagStore: useTagStore(),
             placeTree: [],
             thingList: [],
         };

web/src/components/PlaceTreeItem.vue

@@ -1,15 +1,16 @@
-<script setup>
+<script>
 import {usePlaceStore} from '../stores/place.js'
-</script>
 
-<script>
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        return {placeStore}
+    },
     props: {
         item: Object,
     },
     data: function () {
         return {
-            placeStore: usePlaceStore(),
             open: false,
         };
     },

web/src/components/modal/ModalAddImage.vue

@@ -1,19 +1,19 @@
-<script setup>
+<script>
 import {usePlaceStore} from '../../stores/place.js'
 import {useThingStore, typePlace, typeThing} from "../../stores/thing.js";
-</script>
-
-<script>
 import * as client from "../../client/client.js"
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        const thingStore = useThingStore()
+        return {placeStore, thingStore}
+    },
     expose: ['init'],
     emits: ['after-add-image'],
     data() {
         return {
-            placeStore: usePlaceStore(),
-            thingStore: useThingStore(),
             maxFiles: 6,
             typePlace: typePlace,
             typeThing: typeThing,

web/src/components/modal/ModalAddPlace.vue

@@ -1,17 +1,17 @@
-<script setup>
-import {usePlaceStore} from '../../stores/place.js'
-</script>
-
 <script>
+import {usePlaceStore} from '../../stores/place.js'
 import * as client from "../../client/client.js"
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        return {placeStore}
+    },
     expose: ['init'],
     emits: ['after-add-place'],
     data() {
         return {
-            placeStore: usePlaceStore(),
             modal: Object,
             form: {
                 parentID: 0,

web/src/components/modal/ModalAddThing.vue

@@ -1,18 +1,18 @@
-<script setup>
-import {usePlaceStore} from '../../stores/place.js'
-</script>
-
 <script>
+import {usePlaceStore} from '../../stores/place.js'
 import * as client from "../../client/client.js"
 import {Modal} from 'bootstrap'
-import {getPlacesListWithNestedTitles} from "../../helpers/places";
+import {getPlacesListWithNestedTitles} from "../../helpers/places.js";
 
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        return {placeStore}
+    },
     expose: ['init'],
     emits: ['after-add-thing'],
     data() {
         return {
-            placeStore: usePlaceStore(),
             modal: Object,
             maxFiles: 4,
             form: {

web/src/components/modal/ModalDeletePlace.vue

@@ -1,17 +1,17 @@
-<script setup>
-import {usePlaceStore} from '../../stores/place.js'
-</script>
-
 <script>
+import {usePlaceStore} from '../../stores/place.js'
 import * as client from "../../client/client.js"
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        return {placeStore}
+    },
     expose: ['init'],
     emits: ['after-delete-place'],
     data() {
         return {
-            placeStore: usePlaceStore(),
             modal: Object,
             form: {
                 title: "",
@@ -67,12 +67,14 @@ export default {
                     <div v-else>
                         Подтвердите удаление <b>{{ form.title }}</b>
                         <br><br>
-                        <small class="text-secondary">Будут удалены все вещи и фото, прикрепленные к данному месту</small>
+                        <small class="text-secondary">Будут удалены все вещи и фото, прикрепленные к данному
+                            месту</small>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Отмена</button>
-                    <button v-if="!form.error" type="button" class="btn btn-danger btn-sm" @click="submitForm">Удалить</button>
+                    <button v-if="!form.error" type="button" class="btn btn-danger btn-sm" @click="submitForm">Удалить
+                    </button>
                 </div>
             </div>
         </div>

web/src/components/modal/ModalDeleteThing.vue

@@ -1,17 +1,17 @@
-<script setup>
-import {useThingStore} from '../../stores/thing.js'
-</script>
-
 <script>
+import {useThingStore} from '../../stores/thing.js'
 import * as client from "../../client/client.js"
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const thingStore = useThingStore()
+        return {thingStore}
+    },
     expose: ['init'],
     emits: ['after-delete-thing'],
     data() {
         return {
-            thingStore: useThingStore(),
             modal: Object,
             form: {
                 title: "",

web/src/components/modal/ModalShowImage.vue

@@ -1,15 +1,15 @@
-<script setup>
-import {useImageStore} from '../../stores/image.js'
-</script>
-
 <script>
+import {useImageStore} from '../../stores/image.js'
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const imageStore = useImageStore()
+        return {imageStore}
+    },
     expose: ['init'],
     data() {
         return {
-            imageStore: useImageStore(),
             modal: Object,
             activeImageID: 0,
             activeImagePlaceID: 0,
@@ -46,10 +46,12 @@ export default {
                                 <img :src="image.image" class="d-block w-100">
                             </div>
                         </div>
-                        <button class="carousel-control-prev" type="button" data-bs-target="#imagesCarousel" data-bs-slide="prev">
+                        <button class="carousel-control-prev" type="button" data-bs-target="#imagesCarousel"
+                                data-bs-slide="prev">
                             <span class="carousel-control-prev-icon"></span>
                         </button>
-                        <button class="carousel-control-next" type="button" data-bs-target="#imagesCarousel" data-bs-slide="next">
+                        <button class="carousel-control-next" type="button" data-bs-target="#imagesCarousel"
+                                data-bs-slide="next">
                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
                         </button>
                     </div>

web/src/components/modal/ModalUpdatePlace.vue

@@ -1,18 +1,18 @@
-<script setup>
-import {usePlaceStore} from '../../stores/place.js'
-</script>
-
 <script>
+import {usePlaceStore} from '../../stores/place.js'
 import * as client from "../../client/client.js"
 import {getPlacesListWithNestedTitles} from "../../helpers/places.js";
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const placeStore = usePlaceStore()
+        return {placeStore}
+    },
     expose: ['init'],
     emits: ['after-update-place'],
     data() {
         return {
-            placeStore: usePlaceStore(),
             modal: Object,
             form: {
                 title: "",

web/src/components/modal/ModalUpdateThing.vue

@@ -1,18 +1,18 @@
-<script setup>
-import {useThingStore} from '../../stores/thing.js'
-</script>
-
 <script>
+import {useThingStore} from '../../stores/thing.js'
 import * as client from "../../client/client.js"
 import {getPlacesListWithNestedTitles} from "../../helpers/places.js";
 import {Modal} from 'bootstrap'
 
 export default {
+    setup() {
+        const thingStore = useThingStore()
+        return {thingStore}
+    },
     expose: ['init'],
     emits: ['after-update-thing'],
     data() {
         return {
-            thingStore: useThingStore(),
             modal: Object,
             form: {
                 title: "",