Skip to content
Snippets Groups Projects
Commit 512fa0a2 authored by Titus Netland's avatar Titus Netland
Browse files

Merge branch 'main' into 'create-group-connect-api' 

# Conflicts:
#   src/utils/apiutil.js
parents eb3fbdce 18fcb49b
No related branches found
No related tags found
1 merge request!39create-group-api
Pipeline #176951 failed with stages
in 1 minute and 10 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 297 additions and 231 deletions
.eslintrc.js
+ 1
− 0
View file @ 512fa0a2
......@@ -12,6 +12,7 @@ module.exports = {
parser: "@babel/eslint-parser",
},
rules: {
"linebreak-style": 0,
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
......
.gitlab-ci.yml
+ 28
− 43
View file @ 512fa0a2
# This file is a template, and might need editing before it works on your project.
# To contribute improvements to CI/CD templates, please follow the Development guide at:
# https://docs.gitlab.com/ee/development/cicd/templates.html
# This specific template is located at:
# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Getting-Started.gitlab-ci.yml
# This is a sample GitLab CI/CD configuration file that should run without any modifications.
# It demonstrates a basic 3 stage CI/CD pipeline. Instead of real tests or scripts,
# it uses echo commands to simulate the pipeline execution.
#
# A pipeline is composed of independent jobs that run scripts, grouped into stages.
# Stages run in sequential order, but jobs within stages run in parallel.
#
# For more information, see: https://docs.gitlab.com/ee/ci/yaml/index.html#stages
image: node:16
stages: # List of stages for jobs, and their order of execution
- build
stages:
- setup
- test
image: node:16
variables:
npm_config_cache: "$CI_PROJECT_DIR/.npm"
cache:
paths:
- node_modules/
install_dependencies_job: # This job runs in the build stage, which runs first.
stage: build
# Define a hidden job to be used with extends
# Better than default to avoid activating cache for all jobs
.dependencies_cache:
cache:
key:
files:
- package-lock.json
paths:
- .npm
policy: pull
setup:
stage: setup
script:
- echo "Installing dependencies..."
- npm install
- echo "Dependencies installed."
- npm ci
extends: .dependencies_cache
cache:
policy: pull-push
artifacts:
expire_in: 3 days #delete cache after 3 days to conserve space
paths:
- node_modules/
- node_modules
lint-test-job: # This job also runs in the test stage.
stage: test # It can run at the same time as unit-test-job (in parallel).
lint_test:
stage: test
script:
- echo "Linting the code..."
- npm run lint
- echo "Code-linting complete."
artifacts:
paths:
- node_modules/
unit-test-job: # This job runs in the test stage.
stage: test # It only starts when the job in the build stage completes successfully.
unit_test:
stage: test
script:
- echo "Running unit tests..."
- npm run test:unit -- --coverage
- echo "Unit tests complete."
artifacts:
paths:
- node_modules/
- npm run test:unit
public/favicon.ico deleted 100644 → 0
+ 0
− 0
View file @ eb3fbdce
public/favicon.ico

4.19 KiB

public/index.html deleted 100644 → 0
+ 0
− 17
View file @ eb3fbdce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue
+ 3
− 3
View file @ 512fa0a2
<template>
<div>
<NavBar />
<router-view />
<NavBar />
<router-view />
</div>
</template>
......@@ -19,4 +19,4 @@ export default defineComponent({
NavBar,
},
});
</script>
\ No newline at end of file
</script>
src/components/AddNewItem.vue
+ 31
− 34
View file @ 512fa0a2
......@@ -68,24 +68,23 @@
</div>
</div>
<!-- Select Group -->
<div class="mb-6">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>Gruppe</label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>Gruppe</label
>
<select
v-model="v$.item.selectGroup.$model"
class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
v-model="v$.item.selectGroup.$model"
class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option class="text-gray-400" value="" disabled selected>
Select a Group
</option>
<option
v-for="group in groups"
:key="group"
class="text-gray-900 text-sm"
v-for="group in groups"
:key="group"
class="text-gray-900 text-sm"
>
{{ group }}
</option>
......@@ -93,9 +92,9 @@
<!-- error message for select box -->
<div
class="text-red"
v-for="(error, index) of v$.item.selectGroup.$errors"
:key="index"
class="text-red"
v-for="(error, index) of v$.item.selectGroup.$errors"
:key="index"
>
<div class="text-red-600 text-sm">
{{ error.$message }}
......@@ -157,25 +156,25 @@
</div>
</div>
<!-- Address -->
<div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Adresse</label>
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Adresse</label
>
<input
type="text"
class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
v-model="v$.item.address.$model"
id="adress"
required
type="text"
class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
v-model="v$.item.address.$model"
id="adress"
required
/>
<!-- error message for address-->
<div
class="text-red"
v-for="(error, index) of v$.item.address.$errors"
:key="index"
class="text-red"
v-for="(error, index) of v$.item.address.$errors"
:key="index"
>
<div class="text-red-600 text-sm">
{{ error.$message }}
......@@ -183,7 +182,6 @@
</div>
</div>
<!-- Images -->
<div>
<label
......@@ -252,8 +250,8 @@ export default {
item: {
title: {
required: helpers.withMessage(
() => "Tittelen kan ikke være tom",
required
() => "Tittelen kan ikke være tom",
required
),
max: helpers.withMessage(
() => `Tittelen kan inneholde max 50 tegn`,
......@@ -262,8 +260,8 @@ export default {
},
description: {
required: helpers.withMessage(
() => "Beskrivelsen kan ikke være tom",
required
() => "Beskrivelsen kan ikke være tom",
required
),
max: helpers.withMessage(
() => `Beskrivelsen kan inneholde max 200 tegn`,
......@@ -289,12 +287,12 @@ export default {
},
address: {
required: helpers.withMessage(
() => "Addressen kan ikke være tom",
required
() => "Addressen kan ikke være tom",
required
),
max: helpers.withMessage(
() => `Addressen kan inneholde max 50 tegn`,
maxLength(50)
() => `Addressen kan inneholde max 50 tegn`,
maxLength(50)
),
},
},
......@@ -365,11 +363,10 @@ export default {
const postRequest = await postNewItem(itemInfo);
console.log("posted: " + postRequest);
}
},
checkUser: async function (){
checkUser: async function () {
let user = parseUserFromToken(this.$store.state.user.token);
this.item.userId = parseInt(user.accountId);
console.log("id: " + this.item.userId);
......@@ -380,6 +377,6 @@ export default {
this.item.images.push(URL.createObjectURL(event.target.files[0]));
console.log("antall bilder: " + this.item.images.length);
},
}
},
};
</script>
src/components/HomeComponent.vue
+ 3
− 4
View file @ 512fa0a2
......@@ -6,8 +6,7 @@
<router-link to="/about" class="m-6">Om BoCo</router-link>
<div @click="logout" class="m-6 cursor-pointer"><p>Logout</p></div>
<div @click="logout" class="m-6 cursor-pointer"><p>Logout</p></div>
</div>
</template>
......@@ -18,9 +17,9 @@ export default {
data: () => ({}),
methods: {
logout (){
logout() {
this.$store.commit("logout");
},
}
},
};
</script>
src/components/LoginForm.vue
+ 13
− 9
View file @ 512fa0a2
<template>
<div class="App">
<div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
<div class="flex justify-center text-2xl ">Logg inn</div>
<div
id="emailField"
class="m-6"
:class="{ error: v$.user.email.$errors.length }">
:class="{ error: v$.user.email.$errors.length }"
>
<div class="mb-6">
<label
for="email"
......@@ -44,7 +48,7 @@
<input
type="password"
id="password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
v-model="v$.user.password.$model"
required
@keyup.enter="loginClicked"
......@@ -68,20 +72,20 @@
<div id="buttonsField" class="m-6">
<div class="align-items: flex-end; mb-6">
<div class="ml-3 text-sm">
<router-link to="/resetPassword" class="text-blue-600"
<router-link to="/resetPassword" class="text-blue-600 flex justify-end"
>Glemt passord</router-link
>
</div>
</div>
<button
@click="loginClicked"
class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
>
Logg inn
</button>
<div class="align-items: flex-end; mb-6 mt-6">
<div class="ml-3 text-sm">
<router-link to="register" class="text-blue-600"
<div class="align-items: flex-end; mb-6 mt-12">
<div class="text-sm">
<router-link to="register" class="text-blue-600 flex justify-center"
>Ny bruker</router-link
>
</div>
......@@ -153,7 +157,7 @@ export default {
this.$store.commit("logout");
} else if (loginResponse.isLoggedIn === true) {
this.$store.commit("saveToken", loginResponse.token);
await this.$router.push('/');
await this.$router.push("/");
} else {
console.log("Something went wrong");
}
......
src/components/MemberList.vue 0 → 100644
+ 36
− 0
View file @ 512fa0a2
<template>
<ul>
<li v-for="member in memberlist" :key="member.userId">
<user-list-item-card :admin="admin" :user="member" />
</li>
</ul>
</template>
<script>
import UserListItemCard from "./UserProfileComponents/UserListItemCard.vue";
export default {
data() {
return {
memberlist: [
{
userId: 2,
firstName: "erik",
lastName: "hansen",
},
{
userId: 1,
firstName: "Test",
lastName: "Testesen",
},
],
};
},
components: {
UserListItemCard,
},
props: {
admin: Boolean,
},
};
</script>
src/components/MessagesForm.vue
+ 4
− 6
View file @ 512fa0a2
<template>
<div> This is a message page</div>
<div>This is a message page</div>
</template>
<script>
export default {
name: "MessagesForm"
}
name: "MessagesForm",
};
</script>
<style scoped>
</style>
\ No newline at end of file
<style scoped></style>
src/components/NavBar.vue
+ 37
− 22
View file @ 512fa0a2
<template>
<nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
<nav class="flex items-center justify-between bg-white h-20 border-1 border-b border-gray-300 border-solid">
<div class="logo">
<img class="m-2 cursor-pointer h-16 " src="../assets/logo3.svg" alt="BoCo logo" @click="$router.push('/')"/>
<img
class="m-2 cursor-pointer h-16"
src="../assets/logo3.svg"
alt="BoCo logo"
@click="$router.push('/')"
/>
</div>
<ul class="flex">
<li>
<img class="m-6 cursor-pointer h-8 " src="../assets/additem.png" alt="Legg til" @click="$router.push('/addNewItem')"/>
<img
class="m-6 cursor-pointer h-8"
src="../assets/additem.png"
alt="Legg til"
@click="$router.push('/addNewItem')"
/>
</li>
<li>
<img class="m-6 cursor-pointer h-8 " src="../assets/messages.png" alt="Meldinger" @click="$router.push('/messages')"/>
<img
class="m-6 cursor-pointer h-8"
src="../assets/messages.png"
alt="Meldinger"
@click="$router.push('/messages')"
/>
</li>
<li>
<img class="m-6 cursor-pointer h-8 " src="../assets/profile.png" alt="Profil" @click="loadProfile"/>
<img
class="m-6 cursor-pointer h-8"
src="../assets/profile.png"
alt="Profil"
@click="loadProfile"
/>
</li>
</ul>
</nav>
</template>
<script>
import {parseUserFromToken} from "@/utils/token-utils";
import { parseUserFromToken } from "@/utils/token-utils";
export default {
name: "NavBar.vue",
methods: {
async loadProfile() {
if(this.$store.state.user.token !== null){
let user = parseUserFromToken(this.$store.state.user.token);
console.log(user);
let id = user.accountId;
console.log(id);
await this.$router.push("/profile/" + id);
}
else {
if (this.$store.state.user.token !== null) {
let user = parseUserFromToken(this.$store.state.user.token);
console.log(user);
let id = user.accountId;
console.log(id);
await this.$router.push("/profile/" + id);
} else {
await this.$router.push("/login");
}
}
}
}
},
},
};
</script>
<style scoped>
</style>
\ No newline at end of file
<style scoped></style>
src/components/NewPasswordForm.vue
+ 26
− 29
View file @ 512fa0a2
<template>
<div
class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800"
class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8 "
>
<div id="logoField" class="flex justify-center m-6">
<img src="../assets/logo3.svg" alt="BoCo logo" />
</div>
<div
id="firstPasswordField"
:class="{ error: v$.user.password.$errors.length }"
id="firstPasswordField"
:class="{ error: v$.user.password.$errors.length }"
>
<label
for="password"
class="block text-sm text-gray-800 dark:text-gray-200"
>Nytt passord</label
for="password"
class="block text-sm text-gray-800 dark:text-gray-200"
>Nytt passord</label
>
<input
type="password"
v-model="v$.user.password.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
type="password"
v-model="v$.user.password.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
<!-- error message -->
<div v-for="(error, index) of v$.user.password.$errors" :key="index">
<div
class="text-red-600 text-sm"
v-show="showError"
id="passwordErrorId"
class="text-red-600 text-sm"
v-show="showError"
id="passwordErrorId"
>
{{ error.$message }}
</div>
......@@ -33,29 +30,29 @@
</div>
<div
id="secondPasswordField"
class="mt-4"
:class="{ error: v$.user.rePassword.$errors.length }"
id="secondPasswordField"
class="mt-4"
:class="{ error: v$.user.rePassword.$errors.length }"
>
<div class="flex items-center justify-between">
<label
for="rePassword"
class="block text-sm text-gray-800 dark:text-gray-200"
>Gjenta nytt passord</label
for="rePassword"
class="block text-sm text-gray-800 dark:text-gray-200"
>Gjenta nytt passord</label
>
</div>
<input
type="password"
v-model="v$.user.rePassword.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
type="password"
v-model="v$.user.rePassword.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
<!-- error message -->
<div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
<div
class="text-red-600 text-sm"
v-show="showError"
id="rePasswordErrorId"
class="text-red-600 text-sm"
v-show="showError"
id="rePasswordErrorId"
>
{{ error.$message }}
</div>
......@@ -64,8 +61,8 @@
<div id="buttonsField" class="mt-6">
<button
@click="setNewPassword"
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
@click="setNewPassword"
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
>
Endre passord
</button>
......
src/components/NotificationsForm.vue
+ 4
− 6
View file @ 512fa0a2
<template>
<div> This is a notification page</div>
<div>This is a notification page</div>
</template>
<script>
export default {
name: "NotificationsForm"
}
name: "NotificationsForm",
};
</script>
<style scoped>
</style>
\ No newline at end of file
<style scoped></style>
src/components/ResetPassword.vue
+ 26
− 25
View file @ 512fa0a2
<template>
<div class="resetPassword">
<div
id="emailField"
class="m-6"
:class="{ error: v$.email.$errors.length }">
id="emailField"
class="m-6"
:class="{ error: v$.email.$errors.length }"
>
<div class="mb-6">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>E-post</label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>E-post</label
>
<input
type="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="eksempel@eksempel.no"
v-model="v$.email.$model"
required
type="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="eksempel@eksempel.no"
v-model="v$.email.$model"
required
/>
<!-- error message -->
<div v-for="(error, index) of v$.email.$errors" :key="index">
<div
class="text-red-600 text-sm"
v-show="showError"
id="emailErrorId"
class="text-red-600 text-sm"
v-show="showError"
id="emailErrorId"
>
{{ error.$message }}
</div>
......@@ -31,8 +32,8 @@
</div>
</div>
<button
@click="sendHome"
class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
@click="sendHome"
class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Send e-post
</button>
......@@ -56,14 +57,14 @@ export default {
},
validations() {
return {
email: {
required,
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
email: {
required,
email: helpers.withMessage(`E-posten er ugyldig`, email),
},
};
},
methods: {
sendHome(){
sendHome() {
this.showError = true;
this.v$.email.$touch();
......@@ -71,10 +72,10 @@ export default {
if (this.v$.email.$invalid) {
console.log("Ugyldig, avslutter...");
return;
} else {
this.$router.push("/");
}
else{this.$router.push('/');}
}
},
},
validate() {
this.$refs.form.validate();
......
src/components/UserProfileComponents/LargeProfileCard.vue
+ 29
− 15
View file @ 512fa0a2
<template>
<div
class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<div v-show="isCurrentUser" class="flex justify-end px-4 pt-4">
<div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
<button
id="dropdownDefault"
data-dropdown-toggle="dropdown"
@click="dropdown = !dropdown"
class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
type="button"
>
<svg
......@@ -25,7 +25,6 @@
<div
id="dropdown"
v-show="dropdown"
zindex="2"
class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
<ul class="py-1" aria-labelledby="dropdownDefault">
......@@ -50,6 +49,13 @@
>Leiehistorikk</router-link
>
</li>
<li>
<div
@click="logout"
class="cursor-pointer block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>Logg ut
</div>
</li>
<li>
<router-link
to="/newPassword"
......@@ -67,6 +73,7 @@
</ul>
</div>
</div>
<div class="flex flex-col items-center pb-10">
<img
class="mb-3 w-24 h-24 rounded-full shadow-lg"
......@@ -95,8 +102,7 @@
<script>
import RatingComponent from "@/components/UserProfileComponents/RatingComponent.vue";
import { parseCurrentUser } from "@/utils/token-utils";
import { getUser, getRenterRating, getOwnerRating } from "@/utils/apiutil";
import router from "@/router";
import { getUser, getAverageRating } from "@/utils/apiutil";
export default {
name: "LargeProfileCard",
......@@ -106,8 +112,8 @@ export default {
currentUser: {},
id: -1,
isCurrentUser: false,
renterRating: -1, //getRenterRating(this.userID),
ownerRating: -1, //getOwnerRating(this.userID),
renterRating: -1,
ownerRating: -1,
dropdown: false,
};
},
......@@ -116,23 +122,31 @@ export default {
},
methods: {
async getUser() {
this.currentUser = parseCurrentUser();
this.id = router.currentRoute.value.params.id;
if (this.id == this.currentUser.account_id) {
this.currentUser = await parseCurrentUser();
this.id = await this.$router.currentRoute.value.params.id;
if (this.id === this.currentUser.accountId) {
this.isCurrentUser = true;
this.user = this.currentUser;
return;
}
this.user = await getUser(this.id);
this.renterRating = getRenterRating(this.id);
this.ownerRating = getOwnerRating(this.id);
let rating = await getAverageRating(this.id);
if (rating >= 0 && rating <= 5) {
this.renterRating = rating;
this.ownerRating = rating;
}
},
getProfilePicture() {
/* if (this.user.picture != "") {
if (this.user.picture !== "") {
return this.user.picture;
} */
}
return "../assets/defaultUserProfileImage.jpg";
},
logout(){
this.$store.commit('logout');
this.$router.push('/')
}
},
beforeMount() {
this.getUser();
......
src/components/UserProfileComponents/RatingComponent.vue
+ 2
− 7
View file @ 512fa0a2
<template>
<ul v-if="compRating != -1" class="flex justify-center">
<ul v-if="rating != -1" class="flex justify-center">
<li>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
{{ ratingType }}:&nbsp;
......@@ -19,7 +19,7 @@
</li>
<li>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
{{ compRating }} out of 5
{{ rating }} out of 5
</p>
</li>
</ul>
......@@ -40,11 +40,6 @@
<script>
export default {
name: "RatingComponent",
data() {
return {
compRating: this.rating + 0,
};
},
props: {
rating: Number,
ratingType: String,
......
src/components/UserProfileComponents/UserListItemCard.vue
+ 35
− 7
View file @ 512fa0a2
<template>
<div
class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4"
class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
>
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<router-link to="">
<img alt="profil" :src="getProfilePicture" />
<div class="h-10 w-10 flex flex-col justify-center items-center mr-4">
<router-link :to="'/profile/' + user.userId">
<img alt="profil" src="../../assets/defaultUserProfileImage.jpg" />
</router-link>
</div>
<div class="flex-1 pl-1">
<div class="font-medium dark:text-white">
{{ user.first_name }} {{ user.last_name }}
{{ user.firstName }} {{ user.lastName }}
</div>
</div>
<div class="hidden md:block flex-auto">
<rating-component :rating="rating" :ratingType="'Gjennomsnitts rating'" />
</div>
<div class="flex flex-row justify-center">
<button class="w-10 text-right flex justify-end">Åpne chat</button>
<button v-if="admin" class="w-10 text-right flex justify-end">
<button
v-if="!admin"
class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
>
Åpne chat
</button>
<button
v-if="admin"
class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
>
Fjern bruker
</button>
</div>
......@@ -22,8 +33,19 @@
</template>
<script>
import { getAverageRating } from "@/utils/apiutil";
import RatingComponent from "./RatingComponent.vue";
export default {
name: "UserListItem",
data() {
return {
rating: this.getRating(),
};
},
components: {
RatingComponent,
},
props: {
user: Object,
admin: Boolean,
......@@ -35,6 +57,12 @@ export default {
}
return "../assets/defaultUserProfileImage.jpg";
},
async getRating() {
this.rating = await getAverageRating(this.user.userId);
},
},
beforeMount() {
this.getRating();
},
};
</script>
src/router/index.js
+ 6
− 2
View file @ 512fa0a2
......@@ -12,8 +12,7 @@ function guardRoute(to, from, next) {
let isAuthenticated = store.state.user.token != null;
if (isAuthenticated) {
next(); // allow to enter route
}
else {
} else {
next("/login"); // go to '/login';
}
}
......@@ -65,6 +64,11 @@ const routes = [
path: "/createNewGroup",
name: "createNewGroup",
component: () => import("../views/CreateNewGroupView.vue"),
},
{
path: "/group/:id/memberlist",
name: "memberlist",
component: () => import("../views/MemberListView.vue"),
beforeEnter: guardRoute,
},
{
......
src/utils/apiutil.js
+ 12
− 0
View file @ 512fa0a2
......@@ -72,6 +72,18 @@ export function getOwnerRating(userid) {
});
}
export function getAverageRating(userid) {
return axios
.get(API_URL + "rating/" + userid + "/average", {
headers: tokenHeader(),
})
.then((response) => {
return response.data;
})
.catch((error) => {
console.error(error);
});
}
export function doNewPassword() {
//m
//add newPasswordInfo to input
......
src/views/AboutView.vue
+ 1
− 2
View file @ 512fa0a2
......@@ -10,7 +10,6 @@ import { defineComponent } from "vue";
export default defineComponent({
name: "HomeView",
components: {
},
components: {},
});
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment