add avatar

src/components/navbar/components/dropdowns/ProfileDropdown.vue

@@ -10,7 +10,12 @@
         <VaButton preset="secondary" color="textPrimary">
           <span class="profile-dropdown__anchor min-w-max">
             <slot />
-            <VaAvatar :size="32" color="warning"> 😍 </VaAvatar>
+            <VaAvatar :size="32" color="warning"> <img
+        :src="store.avatar"
+        width="100"
+        height="100"
+        alt=""
+      > </VaAvatar>
           </span>
         </VaButton>
       </template>
@@ -45,8 +50,10 @@
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useColors } from "vuestic-ui";
+import { useUserStore } from "../../../../stores/user-store";
 
 const { colors, setHSLAColor } = useColors();
+const store = useUserStore();
 const hoverColor = computed(() => setHSLAColor(colors.focus, { a: 0.1 }));
 
 const { t } = useI18n();

src/pages/auth/CheckTheEmail.vue

@@ -38,6 +38,7 @@ const submit = () => {
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
         localStorage.setItem('user', JSON.stringify(response.data.user));
+        localStorage.setItem('attachments', JSON.stringify(response.data.attachments));
 
         router.push({ name: "dashboard" }).catch((error) => { });
       }).catch((error) => {

src/pages/auth/Login.vue

@@ -89,6 +89,7 @@ const submit = () => {
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
         localStorage.setItem('user', JSON.stringify(response.data.user));
+        localStorage.setItem('attachments', JSON.stringify(response.data.attachments));
         
         init({ message: "Вы успешно вошли!", color: "success" });
         push({ name: "dashboard" });

src/pages/auth/Signup.vue

@@ -106,6 +106,7 @@ const submit = () => {
         localStorage.setItem('token', response.data.token);
         localStorage.setItem('profile', JSON.stringify(response.data.profile));
         localStorage.setItem('user', JSON.stringify(response.data.user));
+        localStorage.setItem('attachments', JSON.stringify(response.data.attachments));
         init({
           message: "Вы успешно вошли",
           color: "success",

src/pages/preferences/modals/EditNameModal.vue

@@ -62,15 +62,15 @@ const submit = () => {
   if (Surname.value === store.userSurname && Name.value === store.userName) {
     return emits("cancel");
   }
-  let dataUser = JSON.parse(localStorage.getItem("profile")!);
+  let dataProfile = JSON.parse(localStorage.getItem("profile")!);
-  dataUser.first_name = Name.value;
+  dataProfile.first_name = Name.value;
-  dataUser.surname = Surname.value;
+  dataProfile.surname = Surname.value;
   const config = {
       headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
   };
   axios
       .patch(`${HOST}/api/v0/profiles/${store.profileID}`, {
-        "profile": dataUser,
+        "profile": dataProfile,
       }, config)
       .then((response) => {
         store.changeUserName(Name.value, Surname.value);

src/pages/preferences/preferences-header/PreferencesHeader.vue

@@ -1,7 +1,19 @@
 <template>
-  <VaAvatar size="large" color="warning"
+  <VaAvatar size="large" color="warning">
-    ><span class="text-4xl"> 😍 </span></VaAvatar
+    <img
-  >
+        :src="store.avatar"
+        width="100"
+        height="100"
+        alt=""
+      >
+  </VaAvatar>
+  <VaFileUpload 
+  v-model="file" 
+    file-types="image/*" 
+    type="single" 
+    v-on:update:model-value="onFileChanged"
+    color="#F4F6F8"
+  />
   <div class="flex flex-col justify-center">
     <h2 class="text-[28px] md:text-[32px] leading-10 font-bold">
       {{ store.userName }}
@@ -12,8 +24,88 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts" setup> 
+import { inject } from 'vue'
+import { VaFileUpload } from "vuestic-ui";
 import { useUserStore } from "../../../stores/user-store";
-
+import axios from "axios";
+import { useToast } from "vuestic-ui/web-components";
+import { ref } from 'vue'
 const store = useUserStore();
+const HOST = inject('HOST');
+const { init } = useToast();
+const avatar = ref(store.avatar);
+
+let file: { 
+  name: "Example", 
+  url: "",
+  size: 0, 
+  webkitRelativePath: "", 
+  type: "", 
+  arrayBuffer: () => Promise<ArrayBuffer> ,
+  slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob, 
+  stream: () => ReadableStream<Uint8Array>, 
+  text: () => Promise<string>,
+};
+
+function onFileChanged() {
+    var formData = new FormData();
+    formData.append("file", file);
+    axios.post(`${HOST}/api/v0/attachment/upload`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'Authorization': `Bearer ${localStorage.getItem("token")}`,
+        }
+    }).then(function (response) {
+        console.log('SUCCESS!!', response.data);
+        let dataUser = JSON.parse(localStorage.getItem("user")!);
+        dataUser["attachment_id"] = response.data.id;
+        store.changeAvatar(response.data.url);
+        avatar.value = response.data.url;
+        axios
+            .patch(`${HOST}/api/v0/profiles/${store.profileID}`, {
+              "user": dataUser,
+            }, {
+                  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
+              })
+            .then((response) => {
+              init({ message: "Фото успешно загружено!", color: "success" });
+            })
+            .catch((error) => {
+              console.log("1", error);
+                init({
+                  message: "Что-то пошло не так.",
+                  color: "error",
+                });
+
+            });
+        })
+        .catch(function (error) {
+          console.log("2", error);
+          init({
+            message: "Что-то пошло не так.",
+            color: "error",
+          });
+        });
+}
+
+function readFile(event: ProgressEvent<FileReader>) {
+  if (event == null) {
+    return;
+  }
+  if (event.target == null) {
+    return;
+  }
+  console.log(event.target.result);
+}
+
 </script>
+
+<style>
+.custom-upload-file-area {
+  width: max-content;
+  padding: 1rem;
+  border: 1px solid #cccccc;
+  text-align: center;
+}
+</style>