xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 21:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Работает редактирование профиля

Browse Source
This commit is contained in:
FEARmeR 2023-05-22 10:00:12 +01:00
parent 06cfd96ce5
commit 21ae6b1a14
2 changed files with 66 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/examples/navbars/NavbarDefault.vue
View File

@ -343,9 +343,23 @@ watch(
Мой Профиль Мой Профиль
</h6> </h6>
<span class="text-sm" <span class="text-sm"
>Рассказ о том, какой я классный</span >Просмотр</span
> >
</a> </a>
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href="/EditMyProfile"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Мой Профиль
</h6>
<span class="text-sm"
>Редактирование</span
>
</a>
<a <a
class="dropdown-item py-2 ps-3 border-radius-md" class="dropdown-item py-2 ps-3 border-radius-md"
href="/CreateProject" href="/CreateProject"
@ -356,7 +370,7 @@ watch(
Создать проект Создать проект
</h6> </h6>
<span class="text-sm" <span class="text-sm"
>Чтобы стать ещё более классным</span >Страница добавления проекта</span
> >
</a> </a>
</li> </li>
@ -376,11 +390,39 @@ watch(
Мой профиль Мой профиль
</h6> </h6>
<span class="text-sm" <span class="text-sm"
>Рассказ о том, какой я классный</span >Просмотр</span
>
</a>
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href="/ViewMyProfile"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Мой профиль
</h6>
<span class="text-sm"
>Редактирование</span
>
</a>
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href="/CreateProject"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Создать проект
</h6>
<span class="text-sm"
>Страница добавления проекта</span
> >
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</li> </li>

62
src/views/LandingPages/Profile/EditProfile.vue
View File

@ -4,9 +4,6 @@ import { onMounted, ref, computed } from "vue";
import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue"; import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token'));
const userId = computed(() => sessionStorage.getItem('user_id')); const userId = computed(() => sessionStorage.getItem('user_id'));
const loggedUserName = computed(() => sessionStorage.getItem('username')); const loggedUserName = computed(() => sessionStorage.getItem('username'));
@ -14,10 +11,8 @@ const token = computed(() => sessionStorage.getItem('access_token'));
const profileData = ref([]); const profileData = ref([]);
const router = useRouter(); const router = useRouter();
const debugText = ref(''); const debugText = ref('');
const getProfile = async () => { const getProfile = async () => {
const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`); const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`);
profileData.value = processProfileData(profileDataRecieved.data); profileData.value = processProfileData(profileDataRecieved.data);
@ -25,21 +20,20 @@ const getProfile = async () => {
const processProfileData = (data) => { const processProfileData = (data) => {
return { return {
...data, name: data.name || '',
name: data.name || '🤷 No Name Provided', email: data.email || '',
location: data.location || '🌍 No Location Provided', username: data.username || '',
short_intro: data.short_intro || '📝 No Short Intro Provided', location: data.location || '',
bio: data.bio || '📘 No Bio Provided', short_intro: data.short_intro || '',
profile_image: data.profile_image || '📷 No Image Provided', bio: data.bio || '',
social_github: data.social_github || '👨‍💻 No Github Provided', social_github: data.social_github || '',
social_twitter: data.social_twitter || '🐦 No Twitter Provided', social_twitter: data.social_twitter || '',
social_vk: data.social_vk || '🔵 No VK Provided', social_vk: data.social_vk || '',
social_youtube: data.social_youtube || '▶️ No YouTube Provided', social_youtube: data.social_youtube || '',
social_website: data.social_website || '🌐 No Website Provided', social_website: data.social_website || '',
}; };
}; };
// Axios request and response interceptors
axios.interceptors.request.use((request) => { axios.interceptors.request.use((request) => {
debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2); debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2);
return request; return request;
@ -58,7 +52,7 @@ const updateProfile = async () => {
const token = computed(() => sessionStorage.getItem('access_token')); const token = computed(() => sessionStorage.getItem('access_token'));
debugText.value = `Type of token: ${typeof token.value}, Value of token: ${token.value}`; debugText.value = `Type of token: ${typeof token.value}, Value of token: ${token.value}`;
const headers = { 'Authorization': `Bearer ${token.value}` }; const headers = { 'Authorization': `Bearer ${token.value}` };
await axios.put(`http://somebodyhire.me/api/profile/${userId.value}/`, profileData.value, { headers }); await axios.patch(`http://somebodyhire.me/api/profile/${userId.value}/`, profileData.value, { headers });
router.push('/ViewMyProfile'); router.push('/ViewMyProfile');
} catch (error) { } catch (error) {
debugText.value = `Error: ${JSON.stringify(error, null, 2)}`; debugText.value = `Error: ${JSON.stringify(error, null, 2)}`;
@ -66,7 +60,6 @@ const updateProfile = async () => {
} }
}; };
const cancelUpdate = () => { const cancelUpdate = () => {
router.push('/ViewMyProfile'); router.push('/ViewMyProfile');
}; };
@ -74,42 +67,29 @@ const cancelUpdate = () => {
onMounted(async() => { onMounted(async() => {
await getProfile(); await getProfile();
}); });
</script> </script>
<script>
</script>
<template> <template>
<NavbarDefault /> <NavbarDefault />
<div class="profile-container"> <div class="profile-container">
<h1>Профиль пользователя {{ loggedUserName }}</h1> <h1>User Profile: {{ loggedUserName }}</h1>
<textarea readonly v-model="debugText"></textarea> <textarea readonly v-model="debugText"></textarea>
<input type="text" v-model="profileData.username" placeholder="Username"> <input type="text" v-model="profileData.username" placeholder="Username">
<input type="email" v-model="profileData.email" placeholder="Email"> <input type="email" v-model="profileData.email" placeholder="Email">
<input type="text" v-model="profileData.name" placeholder="Имя"> <input type="text" v-model="profileData.name" placeholder="Name">
<input type="text" v-model="profileData.short_intro" placeholder="Краткое описание"> <input type="text" v-model="profileData.short_intro" placeholder="Short Introduction">
<textarea v-model="profileData.bio" placeholder="Биография"></textarea> <textarea v-model="profileData.bio" placeholder="Biography"></textarea>
<textarea v-model="profileData.profile_image" placeholder="Ссылка на изображение"></textarea> <textarea v-model="profileData.social_github" placeholder="GitHub Link"></textarea>
<textarea v-model="profileData.social_github" placeholder="Ссылка на GitHub"></textarea> <textarea v-model="profileData.social_twitter" placeholder="Twitter Link"></textarea>
<textarea v-model="profileData.social_twitter" placeholder="Ссылка на Twitter"></textarea> <textarea v-model="profileData.social_vk" placeholder="VK Link"></textarea>
<textarea v-model="profileData.social_vk" placeholder="Ссылка на VK"></textarea> <textarea v-model="profileData.social_youtube" placeholder="YouTube Link"></textarea>
<textarea v-model="profileData.social_youtube" placeholder="Ссылка на YouTube"></textarea> <textarea v-model="profileData.social_website" placeholder="Website Link"></textarea>
<textarea v-model="profileData.social_website" placeholder="Ссылка на сайт"></textarea>
<button @click="updateProfile" class="btn-submit">Submit</button> <button @click="updateProfile" class="btn-submit">Submit</button>
<button @click="cancelUpdate" class="btn-cancel">Cancel</button> <button @click="cancelUpdate" class="btn-cancel">Cancel</button>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.profile-container { .profile-container {
display: flex; display: flex;