profile page

code4romania · Nov 9, 2023 · 294af52 · 294af52
1 parent 133647b
commit 294af52
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 22 deletions.
diff --git a/database/data/harta_reciclarii.sql b/database/data/harta_reciclarii.sql
@@ -1011,6 +1011,7 @@ INSERT INTO `reported_point_issue_types` (`id`, `accept_images`, `title`, `creat
     (7, 1, 'Altă problemă', '2023-10-27 00:19:55', '2023-10-27 00:19:43', '["other-problem"]');
 
 -- Dumping structure for table harta_reciclarii.reported_point_issue_type_items
+DROP TABLE IF EXISTS `reported_point_issue_type_items`;
 CREATE TABLE IF NOT EXISTS `reported_point_issue_type_items` (
  `id` int NOT NULL AUTO_INCREMENT,
  `reported_point_issue_type_id` int NOT NULL DEFAULT '0',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
         "filepond": "^4.30.4",
         "filepond-plugin-image-preview": "^4.6.11",
         "lodash": "^4.17.21",
+        "moment": "^2.29.4",
         "tiny-emitter": "^2.1.0",
         "vue": "^3.3.4",
         "vue-axios": "^3.5.2",

diff --git a/public/assets/images/logo_white.png b/public/assets/images/logo_white.png
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -6,10 +6,13 @@ import router from './router/index.ts'
 
 import {LoadingPlugin} from 'vue-loading-overlay';
 import 'vue-loading-overlay/dist/css/index.css';
+import {addAuthToken} from "./general.js";
 
 const app = createApp(App);
 
 app.use(router)
 app.use(LoadingPlugin)
 
 app.mount('#app')
+
+addAuthToken();
diff --git a/resources/js/components/IndexPage.vue b/resources/js/components/IndexPage.vue
@@ -104,6 +104,7 @@ import eventBus from "../eventBus.js";
 import _ from "lodash";
 import axios, {HttpStatusCode} from "axios";
 import PointDetails from "./pointDetails.vue";
+import {getUserProfile} from "../general.js";
 
 export default
 {
@@ -204,25 +205,13 @@ export default
 			};
 			navigator.geolocation.getCurrentPosition(success, error);
 		},
-		getUserInfo ()
+		async getUserInfo ()
 		{
-			const session = localStorage.getItem('userSession');
-			if (session)
+			console.log(`start get profile`);
+			this.userInfo = await getUserProfile();
+			if (Object.keys(this.userInfo).length > 0)
 			{
-				axios
-					.get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.USER.PROFILE.INFO)
-					.then((response) =>
-					{
-						this.userInfo = _.get(response, 'data.data', {});
-						this.isAuthenticated = true;
-					}).catch((err) =>
-				{
-					this.isAuthenticated = false
-				});
-			}
-			else
-			{
-				this.isAuthenticated = false;
+				this.isAuthenticated = true;
 			}
 		},
 		getMapPoints(filters = {})

diff --git a/resources/js/components/profilePage.vue b/resources/js/components/profilePage.vue
@@ -1,22 +1,175 @@
 <template>
-	profile
+	<div class="min-h-full">
+		<Disclosure as="nav" class="bg-black" v-slot="{ open }">
+		<div class="mx-auto max-w-full px-4 sm:px-6 lg:px-8">
+			<div class="flex h-16 items-center justify-between">
+				<div class="flex items-center">
+					<div class="flex-shrink-0 cursor-pointer" v-on:click="$router.push('/');">
+						<img class="h-8 w-auto" src="/assets/images/logo_white.png" alt="Harta Reciclarii" />
+					</div>
+				</div>
+				<div class="hidden sm:ml-6 sm:block">
+					<div class="flex items-center">
+
+						<!-- Profile dropdown -->
+						<Menu as="div" class="relative ml-3">
+							<div>
+								<MenuButton class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+									<span class="absolute -inset-1.5" />
+									<span class="sr-only">Open user menu</span>
+									<img class="h-8 w-8 rounded-full" v-if="this.userInfo.image != ''" :src="this.userInfo.image" alt="" />
+									<span class="h-8 w-8 rounded-full bg-neutral-100 pt-1.5 text-black" v-else>{{ this.userInfo.firstname.substr(0,1) }} {{ this.userInfo.lastname.substr(0,1) }}</span>
+								</MenuButton>
+							</div>
+							<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+								<MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+									<MenuItem v-slot="{ active }">
+										<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">
+											{{CONSTANTS.LABELS.TOP_MENU.LOGOUT}}
+										</a>
+									</MenuItem>
+								</MenuItems>
+							</transition>
+						</Menu>
+					</div>
+				</div>
+				<div class="-mr-2 flex sm:hidden">
+					<!-- Mobile menu button -->
+					<DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+						<span class="absolute -inset-0.5" />
+						<span class="sr-only">Open main menu</span>
+						<Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
+						<XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
+					</DisclosureButton>
+				</div>
+			</div>
+		</div>
+
+		<DisclosurePanel class="sm:hidden">
+			<div class="border-t border-gray-700 pb-3 pt-4">
+				<div class="flex items-center px-5">
+					<div class="flex-shrink-0">
+						<img class="h-10 w-10 rounded-full" v-if="this.userInfo.image != ''" :src="this.userInfo.image" alt="" />
+						<span class="h-10 w-10 rounded-full bg-neutral-100 pt-2 text-black" v-else>{{ this.userInfo.firstname.substr(0,1) }} {{ this.userInfo.lastname.substr(0,1) }}</span>
+					</div>
+					<div class="ml-3">
+						<div class="text-base font-medium text-white">{{this.userInfo.firstname}} {{this.userInfo.lastname}}</div>
+						<div class="text-sm font-medium text-gray-400">{{this.userInfo.email}}</div>
+					</div>
+				</div>
+				<div class="mt-3 space-y-1 px-2">
+					<DisclosureButton
+						as="a"
+						class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white cursor-pointer"
+					>
+						{{CONSTANTS.LABELS.TOP_MENU.LOGOUT}}
+					</DisclosureButton>
+				</div>
+			</div>
+		</DisclosurePanel>
+	</Disclosure>
+		<div class="pt-5">
+			<header>
+				<div class="mx-auto max-w-full px-4 sm:px-6 lg:px-8">
+					<a class="text-sm font-medium text-black leading-none cursor-pointer" v-on:click="$router.push('/');">
+						<arrow-left-icon class="h-5 w-5 text-black inline"></arrow-left-icon>
+						<span class="pt-2 ml-1 inline">{{CONSTANTS.LABELS.TOP_MENU.BACK}}</span>
+					</a>
+				</div>
+			</header>
+			<main>
+				<div class="mx-auto max-w-full sm:px-6 lg:px-8 py-10">
+					<h1 class="text-black text-2xl font-bold leading-none mb-10">
+						{{CONSTANTS.LABELS.PROFILE.HEADING}}
+					</h1>
+					<div class="grid grid-cols-6 gap-4">
+						<div class="lg:w-44 w-full">
+							<div class="relative bg-gray-300 rounded-lg">
+								<div class="w-28 h-28"></div>
+								<div class="w-7 h-7"></div>
+							</div>
+						</div>
+						<div class="lg:w-44 w-full">
+							<div class="text-black text-2xl font-normal leading-none">{{this.userInfo.firstname}} {{this.userInfo.lastname}}</div>
+							<div class="text-black text-sm font-normal  leading-none">Membru din 23 Mai 2022</div>
+							<div class="py-5"></div>
+							<div class="text-gray-700 text-sm font-medium leading-tight">{{CONSTANTS.LABELS.PROFILE.EMAIL}}</div>
+							<div class="text-black text-sm font-normal leading-none">{{this.userInfo.email}}</div>
+						</div>
+						<div class="lg:w-44 w-full">
+							<a v-on:click="editUser()" class="cursor-pointer">
+								<pencil-square-icon class="h-5 w-5 text-black inline"></pencil-square-icon>
+								{{CONSTANTS.LABELS.PROFILE.EDIT}}
+							</a>
+						</div>
+						<div class="col-span-2 self-center content-end items-end">
+							<div class="flex self-center content-center justify-end">
+								<div class="w-64 h-64 relative bg-neutral-100 rounded-lg">
+									<div class="left-[36px] top-[103px] absolute text-center">
+										<span class="text-stone-500 text-xs font-normal  leading-none"><br/><br/></span>
+										<span class="text-stone-500 text-3xl font-normal leading-none">contribuții</span></div>
+									<div class="left-[31px] top-[64px] absolute text-center"><span class="text-stone-500 text-8xl font-bold leading-none">2</span><span class="text-stone-500 text-8xl font-normal leading-none"> </span></div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	</div>
 </template>
 
 <script>
 import {CONSTANTS} from "../constants.js";
+import {getUserProfile} from "../general.js";
+import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { ArrowLeftIcon, PencilSquareIcon } from '@heroicons/vue/20/solid'
+
 
 export default
 {
 	components:
 	{
+		MenuItem,
+		MenuItems,
+		Disclosure,
+		MenuButton,
+		DisclosurePanel,
+		DisclosureButton,
+		Bars3Icon,
+		BellIcon,
+		XMarkIcon,
+		Menu,
+		ArrowLeftIcon,
+		PencilSquareIcon
 	},
 	data ()
 	{
 		return {
+			userInfo: {},
+			isAuthenticated: false,
 		};
 	},
 	methods:
 	{
+		async getUserInfo ()
+		{
+			this.userInfo = await getUserProfile();
+
+			if (Object.keys(this.userInfo).length > 0)
+			{
+				this.isAuthenticated = true;
+			}
+			else
+			{
+				this.$router.push('/');
+			}
+		},
+	},
+	mounted ()
+	{
+		this.getUserInfo();
 	},
 	computed: {
 		CONSTANTS ()
@@ -26,3 +179,4 @@ export default
 	}
 };
 </script>
+
diff --git a/resources/js/components/topMenu.vue b/resources/js/components/topMenu.vue
@@ -65,7 +65,7 @@
 				<div>
 					<MenuButton class="flex rounded-full items-center gap-x-2 bg-white px-5 py-1 text-black">
 						<menu-my-account-icon></menu-my-account-icon>
-						{{CONSTANTS.LABELS.TOP_MENU.MY_ACCOUNT}}
+						{{this.userInfo.firstname}}
 					</MenuButton>
 				</div>
 

diff --git a/resources/js/constants.js b/resources/js/constants.js
@@ -93,6 +93,14 @@ export const CONSTANTS =
 			MY_ACCOUNT: `Contul meu`,
 			LOGOUT: `Logout`,
 			MY_PROFILE: `Profilul meu`,
+			BACK: `Înapoi la hartă`
+		},
+		PROFILE:
+		{
+			HEADING: `Profilul meu`,
+			EMAIL: `Email`,
+			MEMBER_FROM: `Membru din {date}`,
+			EDIT: `Modifică`,
 		},
 		LOCATION:
 		{

diff --git a/resources/js/general.js b/resources/js/general.js
@@ -130,4 +130,23 @@ export function addAuthToken()
             return Promise.reject(error);
         }
     );
-}
+}
+
+export async function getUserProfile()
+{
+    let userInfo = {};
+    const session = localStorage.getItem('userSession');
+    if (session)
+    {
+        await axios
+            .get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.USER.PROFILE.INFO)
+            .then((response) =>
+            {
+                userInfo = _.get(response, 'data.data', {});
+            }).catch((err) =>
+        {
+        });
+    }
+
+    return userInfo;
+}
diff --git a/resources/js/router/index.ts b/resources/js/router/index.ts
@@ -3,7 +3,7 @@ import IndexPage from '/resources/js/components/IndexPage.vue';
 import ProfilePage from '/resources/js/components/profilePage.vue';
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.APP_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',

diff --git a/routes/web.php b/routes/web.php
@@ -17,6 +17,10 @@
 {
     return view('welcome');
 });
+Route::get('/profile', function ()
+{
+	return view('welcome');
+});
 use Illuminate\Support\Facades\Route;
 
 Route::prefix('admin')->group(function ()
@@ -30,3 +34,4 @@
         Route::get('users-reports', UsersReport::class)->name('reports-users');
     });
 });
+