From d9db90eb5856d91dc301b79daffaa56c77c47814 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Thu, 20 Apr 2023 11:06:25 +0200
Subject: [PATCH 01/25] chore: init
---
src/components/UserCard.vue | 31 +++++++++++++++++++++++++++++++
src/views/HouseholdView.vue | 10 ++++++++++
2 files changed, 41 insertions(+)
create mode 100644 src/components/UserCard.vue
create mode 100644 src/views/HouseholdView.vue
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
new file mode 100644
index 0000000..875f22a
--- /dev/null
+++ b/src/components/UserCard.vue
@@ -0,0 +1,31 @@
+<template>
+ <el-card
+ shadow="never"
+ :body-style="{
+ padding: '30px',
+ overflow: 'hidden',
+ }"
+ class="relative m-2 w-full max-w-xl overflow-visible"
+ >
+ <h2 class="mb-5">Bruker</h2>
+ <p class="text-[#868e96]">
+ Front-end developer and open source enthusiast. We hope to develop a UI platform that can help
+ many people in the future. I still working hard to make this dream come true.
+ </p>
+ <div class="absolute -top-10 right-5">
+ <el-avatar src="https://avatars.githubusercontent.com/u/27342882?v=4" :size="80" />
+ </div>
+ <footer class="mt-2 text-right">
+ <el-link href="https://github.com/ryuhangyeong" type="primary" target="_blank">
+ Utnevn til superbruker
+ </el-link>
+ </footer>
+ </el-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.component-name-wrapper {
+}
+</style>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
new file mode 100644
index 0000000..3a2f029
--- /dev/null
+++ b/src/views/HouseholdView.vue
@@ -0,0 +1,10 @@
+<template>
+ <main id="component-name" class="component-name-wrapper">Component content</main>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.component-name-wrapper {
+}
+</style>
--
GitLab
From 8c0da87dbe1ed10657d249919fe3afaa13b72897 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 09:37:56 +0200
Subject: [PATCH 02/25] chore: add householdtopbar
---
src/views/HouseholdView.vue | 35 +++++++++++++++++++++++++++++++----
1 file changed, 31 insertions(+), 4 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 3a2f029..657d107 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,10 +1,37 @@
<template>
- <main id="component-name" class="component-name-wrapper">Component content</main>
+ <main id="component-name" class="component-name-wrapper">
+ <div><HouseholdTopBar /></div>
+ <div>
+ <el-row :gutter="20">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="16" class="mb-5">
+ <UserCard user-name="Trond KÃ¥re" />
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb-5">
+ <UserCard user-name="Test Testesen"/>
+ </el-col>
+ </el-row>
+ </div>
+ </main>
+
+
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import UserCard from "@/components/UserCard.vue";
+import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
+
+const user = [
+ {
+ id: 1,
+ name: "trond arild",
+ },
+ {
+ id: 2,
+ name: "KÃ¥re Konradsen",
+ },
+];
+</script>
<style scoped>
-.component-name-wrapper {
-}
+
</style>
--
GitLab
From 766a2fdea53a455e4ad466ab04b8a14bc0d36a3a Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 09:39:14 +0200
Subject: [PATCH 03/25] chore: add householdtopbar
---
src/components/HouseholdTopBar.vue | 53 ++++++++++++++++++++++++++++++
src/components/UserCard.vue | 24 +++++++++-----
2 files changed, 69 insertions(+), 8 deletions(-)
create mode 100644 src/components/HouseholdTopBar.vue
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
new file mode 100644
index 0000000..a3ea328
--- /dev/null
+++ b/src/components/HouseholdTopBar.vue
@@ -0,0 +1,53 @@
+<template>
+ <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect" class="menu">
+
+ <el-text type="primary" size="large" class="menu-item-text">
+ Legg til nytt medlem i husholdningen
+ </el-text>
+
+ <el-button type="primary" class="menu-item-button">
+ <el-icon>
+ <Plus />
+ </el-icon>
+ </el-button>
+ <div class="flex-grow" />
+ <el-button type="danger" class="menu-item-button">
+ <span>Slett Husholdning</span>
+ </el-button>
+ </el-menu>
+</template>
+
+<script setup lang="ts">
+
+import { Plus } from '@element-plus/icons-vue';
+import { ref } from "vue";
+
+
+const activeIndex = ref("1");
+
+
+
+const handleSelect = (key: string, keyPath: string[]) => {
+ console.log(key, keyPath);
+};
+
+</script>
+
+<style>
+.menu {
+ padding: 10px;
+}
+
+.flex-grow {
+ flex-grow: 1;
+}
+
+.menu-item-button {
+ margin: auto 1rem;
+ align-content: center;
+}
+
+.menu-item-text{
+ padding-left: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 875f22a..2a35e68 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -7,25 +7,33 @@
}"
class="relative m-2 w-full max-w-xl overflow-visible"
>
- <h2 class="mb-5">Bruker</h2>
+ <h2 class="mb-5">{{ props.userName }}</h2>
<p class="text-[#868e96]">
- Front-end developer and open source enthusiast. We hope to develop a UI platform that can help
- many people in the future. I still working hard to make this dream come true.
+ Superbruker
</p>
<div class="absolute -top-10 right-5">
- <el-avatar src="https://avatars.githubusercontent.com/u/27342882?v=4" :size="80" />
+ <el-icon color="black" size="80" >
+ <UserFilled />
+ </el-icon>
</div>
<footer class="mt-2 text-right">
- <el-link href="https://github.com/ryuhangyeong" type="primary" target="_blank">
+ <el-link href="https://vg.no" type="primary" target="_blank">
Utnevn til superbruker
</el-link>
</footer>
</el-card>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+import { UserFilled } from '@element-plus/icons-vue'
+
+
+
+const props = defineProps<{
+ userName: string;
+}>();
+</script>
<style scoped>
-.component-name-wrapper {
-}
</style>
--
GitLab
From 8ad930c0da0682ffd0ca25c4e44087bab4d9cec9 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 09:50:49 +0200
Subject: [PATCH 04/25] chore: add householdview to router
---
src/router/index.ts | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/router/index.ts b/src/router/index.ts
index 792c312..8e9871f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
import NotFoundView from "../views/NotFoundView.vue";
import { useSessionStore } from "@/stores/session";
import { AccountApi } from "@/services/index";
+import HouseholdView from "@/views/HouseholdView.vue";
let startup = true;
const router = createRouter({
@@ -56,6 +57,11 @@ const router = createRouter({
fullScreen: true,
},
},
+ {
+ path: "/household",
+ name: "household",
+ component: HouseholdView,
+ },
],
});
--
GitLab
From f17e755bf55d864e59d226f7857ed87c9f46b049 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 10:29:15 +0200
Subject: [PATCH 05/25] chore: fixes formatting issues
---
src/components/HouseholdTopBar.vue | 60 ++++++++++++-------------
src/components/UserCard.vue | 14 ++----
src/views/HouseholdView.vue | 70 +++++++++++++++++++++++-------
3 files changed, 88 insertions(+), 56 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index a3ea328..b254bea 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -1,53 +1,53 @@
<template>
- <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect" class="menu">
-
- <el-text type="primary" size="large" class="menu-item-text">
- Legg til nytt medlem i husholdningen
- </el-text>
-
- <el-button type="primary" class="menu-item-button">
- <el-icon>
- <Plus />
- </el-icon>
- </el-button>
- <div class="flex-grow" />
- <el-button type="danger" class="menu-item-button">
- <span>Slett Husholdning</span>
- </el-button>
- </el-menu>
+ <el-menu
+ :default-active="activeIndex"
+ mode="horizontal"
+ :ellipsis="false"
+ @select="handleSelect"
+ class="menu"
+ >
+ <el-text type="primary" size="large" class="menu-item-text">
+ Legg til nytt medlem i husholdningen
+ </el-text>
+
+ <el-button type="primary" class="menu-item-button">
+ <el-icon>
+ <Plus />
+ </el-icon>
+ </el-button>
+ <div class="flex-grow" />
+ <el-button type="danger" class="menu-item-button">
+ <span>Slett Husholdning</span>
+ </el-button>
+ </el-menu>
</template>
<script setup lang="ts">
-
-import { Plus } from '@element-plus/icons-vue';
+import { Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
-
const activeIndex = ref("1");
-
-
const handleSelect = (key: string, keyPath: string[]) => {
- console.log(key, keyPath);
+ console.log(key, keyPath);
};
-
</script>
<style>
.menu {
- padding: 10px;
+ padding: 10px;
}
.flex-grow {
- flex-grow: 1;
+ flex-grow: 1;
}
.menu-item-button {
- margin: auto 1rem;
- align-content: center;
+ margin: auto 1rem;
+ align-content: center;
}
-.menu-item-text{
- padding-left: 20px;
+.menu-item-text {
+ padding-left: 20px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 2a35e68..696a4ef 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -8,11 +8,9 @@
class="relative m-2 w-full max-w-xl overflow-visible"
>
<h2 class="mb-5">{{ props.userName }}</h2>
- <p class="text-[#868e96]">
- Superbruker
- </p>
+ <p class="text-[#868e96]">Superbruker</p>
<div class="absolute -top-10 right-5">
- <el-icon color="black" size="80" >
+ <el-icon color="black" size="80">
<UserFilled />
</el-icon>
</div>
@@ -25,15 +23,11 @@
</template>
<script setup lang="ts">
-
-import { UserFilled } from '@element-plus/icons-vue'
-
-
+import { UserFilled } from "@element-plus/icons-vue";
const props = defineProps<{
userName: string;
}>();
</script>
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 657d107..0682cb5 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,37 +1,75 @@
<template>
- <main id="component-name" class="component-name-wrapper">
- <div><HouseholdTopBar /></div>
+ <el-main id="component-name" class="component-name-wrapper">
+ <div class="top-bar"><HouseholdTopBar /></div>
<div>
- <el-row :gutter="20">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="16" class="mb-5">
- <UserCard user-name="Trond KÃ¥re" />
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb-5">
- <UserCard user-name="Test Testesen"/>
- </el-col>
- </el-row>
- </div>
- </main>
-
-
+ <el-row gutter="20">
+ <el-col
+ v-for="user in users"
+ :key="user.id"
+ :xs="24"
+ :sm="12"
+ :md="12"
+ :lg="12"
+ :xl="16"
+ class="mb-5"
+ >
+ <UserCard :user-name="user.name" />
+ </el-col>
+ </el-row>
+ </div>
+ </el-main>
</template>
<script setup lang="ts">
import UserCard from "@/components/UserCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
-const user = [
+const users = [
{
id: 1,
- name: "trond arild",
+ name: "Trond Arild",
},
{
id: 2,
name: "KÃ¥re Konradsen",
},
+ {
+ id: 3,
+ name: "Trond Arild",
+ },
+ {
+ id: 4,
+ name: "KÃ¥re Konradsen",
+ },
+ {
+ id: 5,
+ name: "KÃ¥re Konradsen",
+ },
+ {
+ id: 6,
+ name: "KÃ¥re Konradsen",
+ },
+ {
+ id: 7,
+ name: "KÃ¥re Konradsen",
+ },
+ {
+ id: 8,
+ name: "KÃ¥re Konradsen",
+ },
+ {
+ id: 9,
+ name: "KÃ¥re Konradsen",
+ },
];
</script>
<style scoped>
+.el-col {
+ margin-bottom: 20px;
+}
+.top-bar {
+ margin-bottom: 20px;
+}
</style>
--
GitLab
From be33549ab8ed1c38ef0dfd060662c04a21fc2603 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 11:13:22 +0200
Subject: [PATCH 06/25] chore: adds types
---
src/components/HouseholdTopBar.vue | 2 +-
src/components/UserCard.vue | 10 +++----
src/views/HouseholdView.vue | 46 +++++++-----------------------
3 files changed, 17 insertions(+), 41 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index b254bea..3f0f2c7 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -33,7 +33,7 @@ const handleSelect = (key: string, keyPath: string[]) => {
};
</script>
-<style>
+<style scoped>
.menu {
padding: 10px;
}
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 696a4ef..9b6fabb 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -7,26 +7,26 @@
}"
class="relative m-2 w-full max-w-xl overflow-visible"
>
- <h2 class="mb-5">{{ props.userName }}</h2>
+ <h2 class="mb-5">{{ user.firstName }}</h2>
<p class="text-[#868e96]">Superbruker</p>
+ <p class="text-[#868e96]">{{ user.email }}</p>
<div class="absolute -top-10 right-5">
<el-icon color="black" size="80">
<UserFilled />
</el-icon>
</div>
<footer class="mt-2 text-right">
- <el-link href="https://vg.no" type="primary" target="_blank">
- Utnevn til superbruker
- </el-link>
+ <el-button type="primary"> Utnevn til superbruker </el-button>
</footer>
</el-card>
</template>
<script setup lang="ts">
+import type { UserFull } from "@/services";
import { UserFilled } from "@element-plus/icons-vue";
const props = defineProps<{
- userName: string;
+ user: UserFull;
}>();
</script>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 0682cb5..75e95ea 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -13,7 +13,7 @@
:xl="16"
class="mb-5"
>
- <UserCard :user-name="user.name" />
+ <UserCard :user="user" />
</el-col>
</el-row>
</div>
@@ -21,47 +21,23 @@
</template>
<script setup lang="ts">
+import { ref } from "vue";
+import type { UserFull } from "@/services";
import UserCard from "@/components/UserCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
-const users = [
+const users = ref<UserFull[]>([
{
id: 1,
- name: "Trond Arild",
- },
+ email: "trond@gmail.com",
+ firstName: "Trond",
+ } as UserFull,
{
id: 2,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 3,
- name: "Trond Arild",
- },
- {
- id: 4,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 5,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 6,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 7,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 8,
- name: "KÃ¥re Konradsen",
- },
- {
- id: 9,
- name: "KÃ¥re Konradsen",
- },
-];
+ email: "gjøran@gmail.com",
+ firstName: "Gjøran",
+ } as UserFull,
+]);
</script>
<style scoped>
--
GitLab
From ea1e4fb501b5cc515856f2e9ea1c27491e35fefb Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 13:40:32 +0200
Subject: [PATCH 07/25] chore: makes promote and demote buttons reflect user
priveliges
---
src/components/HouseholdTopBar.vue | 10 ++------
src/components/UserCard.vue | 14 ++++++++---
src/views/HouseholdView.vue | 38 ++++++++++++++++++++----------
3 files changed, 39 insertions(+), 23 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index 3f0f2c7..6971d51 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -1,11 +1,5 @@
<template>
- <el-menu
- :default-active="activeIndex"
- mode="horizontal"
- :ellipsis="false"
- @select="handleSelect"
- class="menu"
- >
+ <el-container>
<el-text type="primary" size="large" class="menu-item-text">
Legg til nytt medlem i husholdningen
</el-text>
@@ -19,7 +13,7 @@
<el-button type="danger" class="menu-item-button">
<span>Slett Husholdning</span>
</el-button>
- </el-menu>
+</el-container>
</template>
<script setup lang="ts">
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 9b6fabb..a25d17f 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -8,7 +8,7 @@
class="relative m-2 w-full max-w-xl overflow-visible"
>
<h2 class="mb-5">{{ user.firstName }}</h2>
- <p class="text-[#868e96]">Superbruker</p>
+ <p class="text-[#868e96]">{{ userType }}</p>
<p class="text-[#868e96]">{{ user.email }}</p>
<div class="absolute -top-10 right-5">
<el-icon color="black" size="80">
@@ -16,7 +16,12 @@
</el-icon>
</div>
<footer class="mt-2 text-right">
- <el-button type="primary"> Utnevn til superbruker </el-button>
+ <el-button v-if="userType == 'Bruker'" type="primary">
+ Utnevn til superbruker
+ </el-button>
+ <el-button v-else type="primary">
+ Degrader til bruker
+ </el-button>
</footer>
</el-card>
</template>
@@ -27,7 +32,10 @@ import { UserFilled } from "@element-plus/icons-vue";
const props = defineProps<{
user: UserFull;
+ userType: String,
}>();
</script>
-<style scoped></style>
+<style scoped>
+
+</style>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 75e95ea..47360b2 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,11 +1,12 @@
<template>
<el-main id="component-name" class="component-name-wrapper">
+ <h1>{{ household.name }}</h1>
<div class="top-bar"><HouseholdTopBar /></div>
<div>
<el-row gutter="20">
<el-col
v-for="user in users"
- :key="user.id"
+ :key="user.user.id"
:xs="24"
:sm="12"
:md="12"
@@ -13,7 +14,7 @@
:xl="16"
class="mb-5"
>
- <UserCard :user="user" />
+ <UserCard :user="user.user" :user-type="user.userType" />
</el-col>
</el-row>
</div>
@@ -22,22 +23,35 @@
<script setup lang="ts">
import { ref } from "vue";
-import type { UserFull } from "@/services";
+import type { UserFull, Household } from "@/services";
import UserCard from "@/components/UserCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
-const users = ref<UserFull[]>([
+const users = ref([
{
- id: 1,
- email: "trond@gmail.com",
- firstName: "Trond",
- } as UserFull,
+ user: {
+ id: 1,
+ email: "tore@gmail.com",
+ firstName: "Tore"
+ } as UserFull,
+ userType: "Superbruker" as String
+ },
{
- id: 2,
- email: "gjøran@gmail.com",
- firstName: "Gjøran",
- } as UserFull,
+ user: {
+ id: 2,
+ email: "trond@gmail.com",
+ firstName: "Trond"
+ } as UserFull,
+ userType: "Bruker" as String
+ },
]);
+
+const household = ref<Household>(
+ {
+ id: 1,
+ name: "Husholdning 1",
+ } as Household,
+);
</script>
<style scoped>
--
GitLab
From 920269ad8c53744db574d53f55b3128104e9153f Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 14:21:53 +0200
Subject: [PATCH 08/25] chore: adds non functional form for adding new user to
household
---
src/components/HouseholdTopBar.vue | 43 +++++++++++++++++++++++++-----
src/components/UserCard.vue | 14 +++-------
src/views/HouseholdView.vue | 18 ++++++-------
3 files changed, 48 insertions(+), 27 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index 6971d51..0fd349d 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -4,27 +4,56 @@
Legg til nytt medlem i husholdningen
</el-text>
- <el-button type="primary" class="menu-item-button">
+ <el-button class="menu-item-button" @click="dialogFormVisible = true" type="primary">
<el-icon>
<Plus />
</el-icon>
</el-button>
+
+ <el-dialog v-model="dialogFormVisible" title="Legg til nytt medlem i husholdningen">
+ <el-form :model="form">
+ <el-form-item label="Brukerens epost" :label-width="formLabelWidth">
+ <el-input v-model="form.name" autocomplete="off" />
+ </el-form-item>
+ <el-form-item label="nivå" :label-width="formLabelWidth">
+ <el-select v-model="form.region" placeholder="Velg brukerens rettighets nivå">
+ <el-option label="suberbruker" value="SUPERBRUKER" />
+ <el-option label="bruker" value="BRUKER" />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">Cancel</el-button>
+ <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
+ </span>
+ </template>
+ </el-dialog>
+
<div class="flex-grow" />
<el-button type="danger" class="menu-item-button">
<span>Slett Husholdning</span>
</el-button>
-</el-container>
+ </el-container>
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
-import { ref } from "vue";
+import { ref, reactive } from "vue";
-const activeIndex = ref("1");
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
-const handleSelect = (key: string, keyPath: string[]) => {
- console.log(key, keyPath);
-};
+const form = reactive({
+ name: "",
+ region: "",
+ date1: "",
+ date2: "",
+ delivery: false,
+ type: [],
+ resource: "",
+ desc: "",
+});
</script>
<style scoped>
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index a25d17f..1268a1a 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -16,12 +16,8 @@
</el-icon>
</div>
<footer class="mt-2 text-right">
- <el-button v-if="userType == 'Bruker'" type="primary">
- Utnevn til superbruker
- </el-button>
- <el-button v-else type="primary">
- Degrader til bruker
- </el-button>
+ <el-button v-if="userType == 'Bruker'" type="primary"> Utnevn til superbruker </el-button>
+ <el-button v-else type="primary"> Degrader til bruker </el-button>
</footer>
</el-card>
</template>
@@ -32,10 +28,8 @@ import { UserFilled } from "@element-plus/icons-vue";
const props = defineProps<{
user: UserFull;
- userType: String,
+ userType: String;
}>();
</script>
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 47360b2..1d9ff8c 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -32,26 +32,24 @@ const users = ref([
user: {
id: 1,
email: "tore@gmail.com",
- firstName: "Tore"
+ firstName: "Tore",
} as UserFull,
- userType: "Superbruker" as String
+ userType: "Superbruker" as String,
},
{
user: {
id: 2,
email: "trond@gmail.com",
- firstName: "Trond"
+ firstName: "Trond",
} as UserFull,
- userType: "Bruker" as String
+ userType: "Bruker" as String,
},
]);
-const household = ref<Household>(
- {
- id: 1,
- name: "Husholdning 1",
- } as Household,
-);
+const household = ref<Household>({
+ id: 1,
+ name: "Husholdning 1",
+} as Household);
</script>
<style scoped>
--
GitLab
From 7ac8eaf27fb2938218d76fef9adc3cc2d1b6ed6e Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 14:59:49 +0200
Subject: [PATCH 09/25] chore: adds confirmaion on delete household button
---
src/components/HouseholdTopBar.vue | 31 ++++++++++++++++++++++++------
1 file changed, 25 insertions(+), 6 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index 0fd349d..e19ca9f 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -15,8 +15,8 @@
<el-form-item label="Brukerens epost" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
- <el-form-item label="nivå" :label-width="formLabelWidth">
- <el-select v-model="form.region" placeholder="Velg brukerens rettighets nivå">
+ <el-form-item label="Rettighetsnivå" :label-width="formLabelWidth">
+ <el-select v-model="form.region" placeholder="Velg rettighetsnivå">
<el-option label="suberbruker" value="SUPERBRUKER" />
<el-option label="bruker" value="BRUKER" />
</el-select>
@@ -31,15 +31,27 @@
</el-dialog>
<div class="flex-grow" />
- <el-button type="danger" class="menu-item-button">
- <span>Slett Husholdning</span>
- </el-button>
+ <el-popconfirm
+ confirm-button-text="Yes"
+ cancel-button-text="No"
+ :icon="Plus"
+ icon-color="#626AEF"
+ title="Are you sure to delete this?"
+ @confirm="deleteHousehold"
+ >
+ <template #reference>
+ <el-button type="danger" class="menu-item-button">
+ <span>Slett Husholdning</span>
+ </el-button>
+ </template>
+ </el-popconfirm>
</el-container>
</template>
<script setup lang="ts">
-import { Plus } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
+import { Plus } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
@@ -54,6 +66,13 @@ const form = reactive({
resource: "",
desc: "",
});
+
+const deleteHousehold = () => {
+ ElMessage({
+ message: "Husholdningen er blitt slettet",
+ type: "success",
+ });
+};
</script>
<style scoped>
--
GitLab
From 82d78bb00e783c9cc0e42eacfdaf169e0ad5917a Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Fri, 21 Apr 2023 15:14:38 +0200
Subject: [PATCH 10/25] chore: tweaks confirmation dialog
---
src/components/HouseholdTopBar.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index e19ca9f..305ebff 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -34,8 +34,8 @@
<el-popconfirm
confirm-button-text="Yes"
cancel-button-text="No"
- :icon="Plus"
- icon-color="#626AEF"
+ :icon="WarnTriangleFilled"
+ icon-color="#F89898"
title="Are you sure to delete this?"
@confirm="deleteHousehold"
>
@@ -50,7 +50,7 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, WarnTriangleFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false);
--
GitLab
From ad03ba4bc3e462f296ecff7932d99dee989d30b7 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Sat, 22 Apr 2023 16:02:26 +0200
Subject: [PATCH 11/25] chore: adds routing and store
---
src/router/index.ts | 6 +++---
src/views/HouseholdView.vue | 18 ++++++++++++------
2 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/src/router/index.ts b/src/router/index.ts
index 8e9871f..8d53044 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -58,9 +58,9 @@ const router = createRouter({
},
},
{
- path: "/household",
- name: "household",
- component: HouseholdView,
+ path: "/edit-household",
+ name: "edit household",
+ component: () => import("@/views/HouseholdView.vue"),
},
],
});
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 1d9ff8c..05dce0e 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,6 +1,6 @@
<template>
<el-main id="component-name" class="component-name-wrapper">
- <h1>{{ household.name }}</h1>
+ <h1>{{ householdStore.getHousehold()?.name }}</h1>
<div class="top-bar"><HouseholdTopBar /></div>
<div>
<el-row gutter="20">
@@ -22,10 +22,13 @@
</template>
<script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
import type { UserFull, Household } from "@/services";
import UserCard from "@/components/UserCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
+import { useHouseholdStore } from "@/stores/household";
+
+const householdStore = useHouseholdStore();
const users = ref([
{
@@ -46,10 +49,13 @@ const users = ref([
},
]);
-const household = ref<Household>({
- id: 1,
- name: "Husholdning 1",
-} as Household);
+onMounted(() => {
+ householdStore.setHousehold({
+ id: 1,
+ name: "Husholdning 15",
+ } as Household);
+ console.log("mounted");
+});
</script>
<style scoped>
--
GitLab
From 86d67d768fbe7f6e81a7651b48a194a85466f9cb Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Sat, 22 Apr 2023 16:24:45 +0200
Subject: [PATCH 12/25] chore: small fixes
---
src/components/{UserCard.vue => HouseholdCard.vue} | 0
src/views/HouseholdView.vue | 4 ++--
2 files changed, 2 insertions(+), 2 deletions(-)
rename src/components/{UserCard.vue => HouseholdCard.vue} (100%)
diff --git a/src/components/UserCard.vue b/src/components/HouseholdCard.vue
similarity index 100%
rename from src/components/UserCard.vue
rename to src/components/HouseholdCard.vue
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 05dce0e..f20c419 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -51,8 +51,8 @@ const users = ref([
onMounted(() => {
householdStore.setHousehold({
- id: 1,
- name: "Husholdning 15",
+ id: 234,
+ name: "Hjemme",
} as Household);
console.log("mounted");
});
--
GitLab
From f223f18761171ce967a502ba8c66f0064add0993 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 14:00:35 +0200
Subject: [PATCH 13/25] chore: adds remove user api call
---
src/components/HouseholdCard.vue | 20 ++++++++++--
src/components/HouseholdTopBar.vue | 46 +++++++++++++-------------
src/views/HouseholdView.vue | 52 +++++++++++++++++++++++++++---
3 files changed, 88 insertions(+), 30 deletions(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 1268a1a..026fa93 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -16,8 +16,19 @@
</el-icon>
</div>
<footer class="mt-2 text-right">
- <el-button v-if="userType == 'Bruker'" type="primary"> Utnevn til superbruker </el-button>
- <el-button v-else type="primary"> Degrader til bruker </el-button>
+ <el-button
+ v-if="userType == 'Bruker'"
+ type="primary"
+ @click="emit('updateUserPrivelige', user)"
+ >
+ Utnevn til superbruker
+ </el-button>
+ <el-button v-else type="primary" @click="emit('updateUserPrivelige', user)">
+ Degrader til bruker
+ </el-button>
+ <el-button type="danger" @click="emit('removeUser', user)">
+ Fjern bruker fra husholdning
+ </el-button>
</footer>
</el-card>
</template>
@@ -26,6 +37,11 @@
import type { UserFull } from "@/services";
import { UserFilled } from "@element-plus/icons-vue";
+const emit = defineEmits<{
+ (event: "removeUser", args: UserFull): void;
+ (event: "updateUserPrivelige", args: UserFull): void;
+}>();
+
const props = defineProps<{
user: UserFull;
userType: String;
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index 305ebff..07c2f8e 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -13,19 +13,21 @@
<el-dialog v-model="dialogFormVisible" title="Legg til nytt medlem i husholdningen">
<el-form :model="form">
<el-form-item label="Brukerens epost" :label-width="formLabelWidth">
- <el-input v-model="form.name" autocomplete="off" />
- </el-form-item>
- <el-form-item label="Rettighetsnivå" :label-width="formLabelWidth">
- <el-select v-model="form.region" placeholder="Velg rettighetsnivå">
- <el-option label="suberbruker" value="SUPERBRUKER" />
- <el-option label="bruker" value="BRUKER" />
- </el-select>
+ <el-input v-model="form.newUserEmail" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
- <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
+ <el-button
+ type="primary"
+ @click="
+ dialogFormVisible = false;
+ printTest();
+ "
+ >
+ Confirm
+ </el-button>
</span>
</template>
</el-dialog>
@@ -37,7 +39,7 @@
:icon="WarnTriangleFilled"
icon-color="#F89898"
title="Are you sure to delete this?"
- @confirm="deleteHousehold"
+ @confirm="emit('deleteHousehold')"
>
<template #reference>
<el-button type="danger" class="menu-item-button">
@@ -51,28 +53,24 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { Plus, WarnTriangleFilled } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
- name: "",
- region: "",
- date1: "",
- date2: "",
- delivery: false,
- type: [],
- resource: "",
- desc: "",
+ newUserEmail: "" as String,
});
-const deleteHousehold = () => {
- ElMessage({
- message: "Husholdningen er blitt slettet",
- type: "success",
- });
-};
+//delete this
+function printTest() {
+ console.log(form.newUserEmail);
+ form.newUserEmail = "";
+}
+
+const emit = defineEmits<{
+ (event: "addUser", args: String): void;
+ (event: "deleteHousehold"): void;
+}>();
</script>
<style scoped>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index f20c419..002e4ba 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,7 +1,9 @@
<template>
<el-main id="component-name" class="component-name-wrapper">
<h1>{{ householdStore.getHousehold()?.name }}</h1>
- <div class="top-bar"><HouseholdTopBar /></div>
+ <div class="top-bar">
+ <HouseholdTopBar :newUserEmail="users" @delete-household="deleteHousehold()" />
+ </div>
<div>
<el-row gutter="20">
<el-col
@@ -14,7 +16,12 @@
:xl="16"
class="mb-5"
>
- <UserCard :user="user.user" :user-type="user.userType" />
+ <UserCard
+ :user="user.user"
+ :user-type="user.userType"
+ @remove-user="removeUser(user.user)"
+ @update-user-privelige="updateUserPrivelige(user.user)"
+ />
</el-col>
</el-row>
</div>
@@ -24,13 +31,17 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { UserFull, Household } from "@/services";
-import UserCard from "@/components/UserCard.vue";
+import UserCard from "@/components/HouseholdCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
import { useHouseholdStore } from "@/stores/household";
+import { HouseholdApi } from "@/services/index";
+import { ElMessage } from "element-plus";
const householdStore = useHouseholdStore();
+const householdApi = new HouseholdApi();
-const users = ref([
+//test data
+let users = ref([
{
user: {
id: 1,
@@ -49,6 +60,39 @@ const users = ref([
},
]);
+//test data
+const testHousehold = {
+ id: 234,
+ name: "Hjemme",
+} as Household;
+
+function removeUser(user: UserFull) {
+ return householdApi
+ .removeUserFromHousehold(testHousehold.id !== undefined ? testHousehold.id : -1, user.id!)
+ .then((data) => {
+ ElMessage.success("Fjernet bruker fra husholdning");
+ console.log("removed user: " + user.firstName + ", status: " + data.status);
+ })
+ .catch((error) => {
+ ElMessage.error("Kunne ikke fjerne bruker fra husholdning" + error);
+ console.log(error);
+ });
+}
+
+function updateUserPrivelige(user: UserFull) {
+ console.log("updated user privelige: " + user.firstName);
+}
+
+/*
+function addUser(email: String) {
+ console.log("added user: " + email);
+}
+ */
+function deleteHousehold() {
+ console.log("deleted household");
+}
+
+//test store
onMounted(() => {
householdStore.setHousehold({
id: 234,
--
GitLab
From 0b9a00978a452a8defc204e2f348b8655584dade Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 14:41:30 +0200
Subject: [PATCH 14/25] chore: adds conditional rendering for usercard
---
src/components/HouseholdCard.vue | 23 ++++++++++++++++++++---
1 file changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 026fa93..9aed655 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -17,16 +17,20 @@
</div>
<footer class="mt-2 text-right">
<el-button
- v-if="userType == 'Bruker'"
+ v-if="userType == 'Bruker' && currentUser.id != user.id"
type="primary"
@click="emit('updateUserPrivelige', user)"
>
Utnevn til superbruker
</el-button>
- <el-button v-else type="primary" @click="emit('updateUserPrivelige', user)">
+ <el-button
+ v-else-if="currentUser.id != user.id"
+ type="primary"
+ @click="emit('updateUserPrivelige', user)"
+ >
Degrader til bruker
</el-button>
- <el-button type="danger" @click="emit('removeUser', user)">
+ <el-button v-if="currentUser.id != user.id" type="danger" @click="emit('removeUser', user)">
Fjern bruker fra husholdning
</el-button>
</footer>
@@ -34,8 +38,21 @@
</template>
<script setup lang="ts">
+import { ref } from "vue";
import type { UserFull } from "@/services";
import { UserFilled } from "@element-plus/icons-vue";
+import { useSessionStore } from "@/stores/session";
+
+const sessionStore = useSessionStore();
+
+//make use of sessionstore
+const currentUser = ref({
+ id: 1,
+ email: "tore@gmail.com",
+ firstName: "Tore",
+} as UserFull);
+
+const currentUserFromStore = ref(sessionStore.getUser);
const emit = defineEmits<{
(event: "removeUser", args: UserFull): void;
--
GitLab
From 15d243659a84e6f4a20d94e804a0af17005b97f9 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 15:18:40 +0200
Subject: [PATCH 15/25] chore: removes user when user is removed
---
src/components/HouseholdCard.vue | 2 +-
src/components/HouseholdTopBar.vue | 8 ++++----
src/views/HouseholdView.vue | 31 +++++++++++-------------------
3 files changed, 16 insertions(+), 25 deletions(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 9aed655..c75bd14 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -17,7 +17,7 @@
</div>
<footer class="mt-2 text-right">
<el-button
- v-if="userType == 'Bruker' && currentUser.id != user.id"
+ v-if="userType == 'USER' && currentUser.id != user.id"
type="primary"
@click="emit('updateUserPrivelige', user)"
>
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index 07c2f8e..c9af1bd 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -4,7 +4,7 @@
Legg til nytt medlem i husholdningen
</el-text>
- <el-button class="menu-item-button" @click="dialogFormVisible = true" type="primary">
+ <el-button class="menu-item-add-button" @click="dialogFormVisible = true" type="primary">
<el-icon>
<Plus />
</el-icon>
@@ -82,12 +82,12 @@ const emit = defineEmits<{
flex-grow: 1;
}
-.menu-item-button {
+.menu-item-add-button {
margin: auto 1rem;
- align-content: center;
+ align-content: right;
}
.menu-item-text {
- padding-left: 20px;
+ padding-left: 0px;
}
</style>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 002e4ba..10a7bab 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -34,32 +34,21 @@ import type { UserFull, Household } from "@/services";
import UserCard from "@/components/HouseholdCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
import { useHouseholdStore } from "@/stores/household";
+import { useSessionStore } from "@/stores/session";
import { HouseholdApi } from "@/services/index";
import { ElMessage } from "element-plus";
const householdStore = useHouseholdStore();
+const sessionStore = useSessionStore();
const householdApi = new HouseholdApi();
//test data
-let users = ref([
- {
- user: {
- id: 1,
- email: "tore@gmail.com",
- firstName: "Tore",
- } as UserFull,
- userType: "Superbruker" as String,
- },
- {
- user: {
- id: 2,
- email: "trond@gmail.com",
- firstName: "Trond",
- } as UserFull,
- userType: "Bruker" as String,
- },
-]);
-
+let users = ref([]);
+//test api
+householdApi.getUsers(23).then((data) => {
+ users.value = data.data;
+ console.log("users: " + users.value);
+});
//test data
const testHousehold = {
id: 234,
@@ -70,7 +59,8 @@ function removeUser(user: UserFull) {
return householdApi
.removeUserFromHousehold(testHousehold.id !== undefined ? testHousehold.id : -1, user.id!)
.then((data) => {
- ElMessage.success("Fjernet bruker fra husholdning");
+ ElMessage.success("Fjernet " + user.firstName + " fra husholdning");
+ users.value = users.value.filter((u) => u.user.id !== user.id);
console.log("removed user: " + user.firstName + ", status: " + data.status);
})
.catch((error) => {
@@ -98,6 +88,7 @@ onMounted(() => {
id: 234,
name: "Hjemme",
} as Household);
+
console.log("mounted");
});
</script>
--
GitLab
From 368450a9e72c0f6d46079f7b906e32eac366f27e Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 19:35:37 +0200
Subject: [PATCH 16/25] chore: adds api call for changing users priveliges
---
src/views/HouseholdView.vue | 44 ++++++++++++++++++++++++++++++-------
1 file changed, 36 insertions(+), 8 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 10a7bab..39af933 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -44,20 +44,16 @@ const householdApi = new HouseholdApi();
//test data
let users = ref([]);
-//test api
+
+//use household store
householdApi.getUsers(23).then((data) => {
users.value = data.data;
console.log("users: " + users.value);
});
-//test data
-const testHousehold = {
- id: 234,
- name: "Hjemme",
-} as Household;
function removeUser(user: UserFull) {
return householdApi
- .removeUserFromHousehold(testHousehold.id !== undefined ? testHousehold.id : -1, user.id!)
+ .removeUserFromHousehold(23, user.id!)
.then((data) => {
ElMessage.success("Fjernet " + user.firstName + " fra husholdning");
users.value = users.value.filter((u) => u.user.id !== user.id);
@@ -70,7 +66,39 @@ function removeUser(user: UserFull) {
}
function updateUserPrivelige(user: UserFull) {
- console.log("updated user privelige: " + user.firstName);
+ console.log(user.email);
+ let userToUpdate = users.value.filter((u) => u.user.id === user.id)[0];
+ console.log("userToUpdateType: " + userToUpdate.userType);
+ if (userToUpdate.userType === "SUPERUSER") {
+ userToUpdate.userType = "USER";
+ } else {
+ userToUpdate.userType = "SUPERUSER";
+ }
+ return householdApi
+ .updateHouseholdMemberRole(23, userToUpdate?.id, userToUpdate.userType)
+ .then((data) => {
+ ElMessage.success("Oppdaterte bruker " + user.firstName + " til " + userToUpdate.userType);
+ users.value = users.value.map((u) => {
+ if (u.user.id === user.id && u.userType === "USER") {
+ u.userType = "USER";
+ } else if (u.user.id === user.id && u.userType === "SUPERUSER") {
+ u.userType = "SUPERUSER";
+ }
+ return u;
+ });
+ console.log(
+ "updated user: " +
+ user.firstName +
+ ", status: " +
+ data.status +
+ " to " +
+ userToUpdate.userType
+ );
+ })
+ .catch((error) => {
+ ElMessage.error("Kunne ikke oppdatere bruker" + error);
+ console.log(error);
+ });
}
/*
--
GitLab
From bc5f45fca8c28187049b460688a2f82aa9eca90b Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 21:09:49 +0200
Subject: [PATCH 17/25] chore: adds api call adding user to household
---
src/components/HouseholdCard.vue | 2 --
src/components/HouseholdTopBar.vue | 5 ++--
src/views/HouseholdView.vue | 43 ++++++++++++++++++++++++------
3 files changed, 38 insertions(+), 12 deletions(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index c75bd14..5539200 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -52,8 +52,6 @@ const currentUser = ref({
firstName: "Tore",
} as UserFull);
-const currentUserFromStore = ref(sessionStore.getUser);
-
const emit = defineEmits<{
(event: "removeUser", args: UserFull): void;
(event: "updateUserPrivelige", args: UserFull): void;
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index c9af1bd..f3e0599 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -23,6 +23,7 @@
type="primary"
@click="
dialogFormVisible = false;
+ emit('addUser', form.newUserEmail as string);
printTest();
"
>
@@ -58,7 +59,7 @@ const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
- newUserEmail: "" as String,
+ newUserEmail: "" as string,
});
//delete this
@@ -68,7 +69,7 @@ function printTest() {
}
const emit = defineEmits<{
- (event: "addUser", args: String): void;
+ (event: "addUser", args: string): void;
(event: "deleteHousehold"): void;
}>();
</script>
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 39af933..af13a45 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -2,7 +2,7 @@
<el-main id="component-name" class="component-name-wrapper">
<h1>{{ householdStore.getHousehold()?.name }}</h1>
<div class="top-bar">
- <HouseholdTopBar :newUserEmail="users" @delete-household="deleteHousehold()" />
+ <HouseholdTopBar @delete-household="deleteHousehold()" @add-user="addUser" />
</div>
<div>
<el-row gutter="20">
@@ -35,12 +35,13 @@ import UserCard from "@/components/HouseholdCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
import { useHouseholdStore } from "@/stores/household";
import { useSessionStore } from "@/stores/session";
-import { HouseholdApi } from "@/services/index";
+import { HouseholdApi, AccountApi } from "@/services/index";
import { ElMessage } from "element-plus";
const householdStore = useHouseholdStore();
const sessionStore = useSessionStore();
const householdApi = new HouseholdApi();
+const accountApi = new AccountApi();
//test data
let users = ref([]);
@@ -75,9 +76,9 @@ function updateUserPrivelige(user: UserFull) {
userToUpdate.userType = "SUPERUSER";
}
return householdApi
- .updateHouseholdMemberRole(23, userToUpdate?.id, userToUpdate.userType)
+ .updateHouseholdMemberRole(23, userToUpdate.id, userToUpdate.userType)
.then((data) => {
- ElMessage.success("Oppdaterte bruker " + user.firstName + " til " + userToUpdate.userType);
+ ElMessage.success("Oppdaterte bruker " + user.firstName + " til: " + userToUpdate.userType);
users.value = users.value.map((u) => {
if (u.user.id === user.id && u.userType === "USER") {
u.userType = "USER";
@@ -101,11 +102,37 @@ function updateUserPrivelige(user: UserFull) {
});
}
-/*
-function addUser(email: String) {
- console.log("added user: " + email);
+//This currently works with id and not email :( backend should return user
+function addUser(value: string) {
+ console.log("add user: " + value);
+ let userId: number = 3;
+ return householdApi
+ .addUser(23, { userId })
+ .then((data) => {
+ ElMessage.success("La til " + value + " i husholdning");
+ addUserLocally(userId);
+ console.log("added user: " + value + ", status: " + data.status);
+ })
+ .catch((error) => {
+ ElMessage.error("Kunne ikke legge til bruker" + error);
+ console.log(error);
+ });
}
- */
+
+function addUserLocally(id: number) {
+ console.log("add user locally: " + id);
+ return accountApi
+ .getUserById(id)
+ .then((data) => {
+ users.value.push({ user: data.data, userType: "USER" });
+
+ console.log("added user: " + data.data.firstName);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+}
+
function deleteHousehold() {
console.log("deleted household");
}
--
GitLab
From 2516d3c9e55517607afbf5c7aae79086a31f1b08 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Mon, 24 Apr 2023 21:42:50 +0200
Subject: [PATCH 18/25] chore: users are now sorted by role
---
src/views/HouseholdView.vue | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index af13a45..5e6669f 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -7,7 +7,7 @@
<div>
<el-row gutter="20">
<el-col
- v-for="user in users"
+ v-for="user in users.sort((a, b) => a.userType.localeCompare(b.userType))"
:key="user.user.id"
:xs="24"
:sm="12"
@@ -125,7 +125,6 @@ function addUserLocally(id: number) {
.getUserById(id)
.then((data) => {
users.value.push({ user: data.data, userType: "USER" });
-
console.log("added user: " + data.data.firstName);
})
.catch((error) => {
--
GitLab
From 018dd8f31f231c55c70deab7f32ecde223d2836d Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Tue, 25 Apr 2023 09:43:40 +0200
Subject: [PATCH 19/25] chore: small fixes
---
src/views/HouseholdView.vue | 9 +--------
1 file changed, 1 insertion(+), 8 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 5e6669f..7a8dc56 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -137,14 +137,7 @@ function deleteHousehold() {
}
//test store
-onMounted(() => {
- householdStore.setHousehold({
- id: 234,
- name: "Hjemme",
- } as Household);
-
- console.log("mounted");
-});
+onMounted(() => {});
</script>
<style scoped>
--
GitLab
From d69dc56ea3a8fe800f28e0ce59816d695222b333 Mon Sep 17 00:00:00 2001
From: Arunan Gnanasekaran <arunan2212@gmail.com>
Date: Tue, 25 Apr 2023 11:06:42 +0200
Subject: [PATCH 20/25] chore: remove unused import
---
src/router/index.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/router/index.ts b/src/router/index.ts
index 8d53044..d28271c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,6 @@ import HomeView from "../views/HomeView.vue";
import NotFoundView from "../views/NotFoundView.vue";
import { useSessionStore } from "@/stores/session";
import { AccountApi } from "@/services/index";
-import HouseholdView from "@/views/HouseholdView.vue";
let startup = true;
const router = createRouter({
--
GitLab
From 416ffd9e1d298d06aeb9342785fbe54a13f44d02 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Tue, 25 Apr 2023 11:28:23 +0200
Subject: [PATCH 21/25] chore: fixes issue of horizontal scrollbar
---
src/components/HouseholdCard.vue | 2 +-
src/views/HouseholdView.vue | 12 ++++++++++--
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 5539200..4a0d281 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -45,7 +45,7 @@ import { useSessionStore } from "@/stores/session";
const sessionStore = useSessionStore();
-//make use of sessionstore
+//make use of sessionstore (remove)
const currentUser = ref({
id: 1,
email: "tore@gmail.com",
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 7a8dc56..6ddba6a 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,5 +1,5 @@
<template>
- <el-main id="component-name" class="component-name-wrapper">
+ <div id="householdview" class="householdview-wrapper">
<h1>{{ householdStore.getHousehold()?.name }}</h1>
<div class="top-bar">
<HouseholdTopBar @delete-household="deleteHousehold()" @add-user="addUser" />
@@ -25,7 +25,7 @@
</el-col>
</el-row>
</div>
- </el-main>
+ </div>
</template>
<script setup lang="ts">
@@ -148,4 +148,12 @@ onMounted(() => {});
.top-bar {
margin-bottom: 20px;
}
+
+.householdview-wrapper {
+ width: 100%;
+ height: 100%;
+ padding: 1rem 2rem;
+ margin: 0;
+ overflow: hidden;
+}
</style>
--
GitLab
From 54c07341a428aa6cda76695eec269a1d0530f52a Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Tue, 25 Apr 2023 13:24:02 +0200
Subject: [PATCH 22/25] chore: gets users from household in householdstore
---
src/views/HouseholdView.vue | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 6ddba6a..640bb98 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -43,13 +43,10 @@ const sessionStore = useSessionStore();
const householdApi = new HouseholdApi();
const accountApi = new AccountApi();
-//test data
let users = ref([]);
-//use household store
-householdApi.getUsers(23).then((data) => {
+householdApi.getUsers(householdStore.getHousehold()?.id!).then((data) => {
users.value = data.data;
- console.log("users: " + users.value);
});
function removeUser(user: UserFull) {
--
GitLab
From 52ca0429294eee301bff1afa7bb77dc13b7429cb Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Tue, 25 Apr 2023 14:18:41 +0200
Subject: [PATCH 23/25] chore: displays select household if no household exists
---
src/views/HouseholdView.vue | 24 ++++++++++++++++++------
1 file changed, 18 insertions(+), 6 deletions(-)
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index 640bb98..e87a929 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,6 +1,7 @@
<template>
<div id="householdview" class="householdview-wrapper">
- <h1>{{ householdStore.getHousehold()?.name }}</h1>
+ <h1 v-if="currentHousehold?.id">{{ currentHousehold?.name }}</h1>
+ <h1 v-else>Velg husholdning</h1>
<div class="top-bar">
<HouseholdTopBar @delete-household="deleteHousehold()" @add-user="addUser" />
</div>
@@ -44,18 +45,19 @@ const householdApi = new HouseholdApi();
const accountApi = new AccountApi();
let users = ref([]);
+const currentHousehold = householdStore.getHousehold();
-householdApi.getUsers(householdStore.getHousehold()?.id!).then((data) => {
+householdApi.getUsers(currentHousehold?.id!).then((data) => {
users.value = data.data;
});
function removeUser(user: UserFull) {
return householdApi
.removeUserFromHousehold(23, user.id!)
- .then((data) => {
+ .then(() => {
ElMessage.success("Fjernet " + user.firstName + " fra husholdning");
users.value = users.value.filter((u) => u.user.id !== user.id);
- console.log("removed user: " + user.firstName + ", status: " + data.status);
+ console.log("removed user: " + user.firstName);
})
.catch((error) => {
ElMessage.error("Kunne ikke fjerne bruker fra husholdning" + error);
@@ -102,9 +104,10 @@ function updateUserPrivelige(user: UserFull) {
//This currently works with id and not email :( backend should return user
function addUser(value: string) {
console.log("add user: " + value);
+ //todo: fix this
let userId: number = 3;
return householdApi
- .addUser(23, { userId })
+ .addUser(currentHousehold?.id!, { userId })
.then((data) => {
ElMessage.success("La til " + value + " i husholdning");
addUserLocally(userId);
@@ -130,10 +133,19 @@ function addUserLocally(id: number) {
}
function deleteHousehold() {
+ householdApi
+ .deleteHousehold(currentHousehold?.id!)
+ .then(() => {
+ ElMessage.success("Slettet husholdning");
+ console.log("deleted household: " + currentHousehold?.name);
+ })
+ .catch((error) => {
+ ElMessage.error("Kunne ikke slette husholdning" + error);
+ console.log(error);
+ });
console.log("deleted household");
}
-//test store
onMounted(() => {});
</script>
--
GitLab
From abfd50430628f2fbc97a7309054dee3a7263380c Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Tue, 25 Apr 2023 22:20:26 +0200
Subject: [PATCH 24/25] chore: adds vitest for household
---
src/components/HouseholdCard.vue | 13 +--
src/components/HouseholdTopBar.vue | 1 +
.../__tests__/HouseholdCard.spec.ts | 89 +++++++++++++++++++
src/views/HouseholdView.vue | 10 +--
4 files changed, 102 insertions(+), 11 deletions(-)
create mode 100644 src/components/__tests__/HouseholdCard.spec.ts
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 4a0d281..5ddcab8 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -24,13 +24,13 @@
Utnevn til superbruker
</el-button>
<el-button
- v-else-if="currentUser.id != user.id"
+ v-else-if="currentUser?.id != user.id"
type="primary"
@click="emit('updateUserPrivelige', user)"
>
Degrader til bruker
</el-button>
- <el-button v-if="currentUser.id != user.id" type="danger" @click="emit('removeUser', user)">
+ <el-button v-if="currentUser?.id != user.id" type="danger" @click="emit('removeUser', user)">
Fjern bruker fra husholdning
</el-button>
</footer>
@@ -38,19 +38,20 @@
</template>
<script setup lang="ts">
-import { ref } from "vue";
import type { UserFull } from "@/services";
import { UserFilled } from "@element-plus/icons-vue";
import { useSessionStore } from "@/stores/session";
const sessionStore = useSessionStore();
-//make use of sessionstore (remove)
-const currentUser = ref({
+//make use of sessionstore (remove) prop
+/* var currentUser = ref({
id: 1,
email: "tore@gmail.com",
firstName: "Tore",
-} as UserFull);
+} as UserFull); */
+
+const currentUser = sessionStore.getUser();
const emit = defineEmits<{
(event: "removeUser", args: UserFull): void;
diff --git a/src/components/HouseholdTopBar.vue b/src/components/HouseholdTopBar.vue
index f3e0599..d417fac 100644
--- a/src/components/HouseholdTopBar.vue
+++ b/src/components/HouseholdTopBar.vue
@@ -20,6 +20,7 @@
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button
+ ref="confirmButton"
type="primary"
@click="
dialogFormVisible = false;
diff --git a/src/components/__tests__/HouseholdCard.spec.ts b/src/components/__tests__/HouseholdCard.spec.ts
new file mode 100644
index 0000000..fdbf329
--- /dev/null
+++ b/src/components/__tests__/HouseholdCard.spec.ts
@@ -0,0 +1,89 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { setActivePinia, createPinia } from "pinia";
+import { useSessionStore } from "@/stores/session";
+
+import HouseholdCard from "../HouseholdCard.vue";
+import type { UserFull } from "@/services/index";
+
+let user: UserFull = {};
+let userType: string = "";
+
+beforeEach(() => {
+ user = {
+ id: 13,
+ firstName: "Joe",
+ email: "shmoe@gmail.com",
+ } as UserFull;
+ userType = "SUPERUSER";
+ setActivePinia(createPinia());
+});
+
+describe("HouseholdCard", () => {
+ it("has users first name in title", () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+ expect(wrapper.text()).toContain(user.firstName);
+ });
+ it("has users email in text", () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ },
+ });
+ expect(wrapper.text()).toContain(user.email);
+ });
+ it("has users type in text", () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+ expect(wrapper.text()).toContain(userType);
+ });
+ it("has demote to user button if user is superuser", () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+ expect(wrapper.find("el-button[type=primary]").text()).toContain("Degrader til bruker");
+ });
+ it("emits demote event when demote button is clicked", async () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+ await wrapper.find("el-button[type=primary]").trigger("click");
+ expect(wrapper.emitted("updateUserPrivelige")).toBeTruthy();
+ });
+ it("has remove from household button", () => {
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+ expect(wrapper.find("el-button[type=danger]").text()).toContain("Fjern bruker fra husholdning");
+ });
+ it("user with same id as logged in user does not have remove from household button, demote or promote", () => {
+ useSessionStore().authenticate(user);
+ const wrapper = mount(HouseholdCard as any, {
+ props: {
+ user,
+ userType,
+ },
+ });
+
+ expect(wrapper.find("el-button[type=danger]").exists()).toBeFalsy();
+ expect(wrapper.find("el-button[type=primary]").exists()).toBeFalsy();
+ });
+});
diff --git a/src/views/HouseholdView.vue b/src/views/HouseholdView.vue
index e87a929..c7ed754 100644
--- a/src/views/HouseholdView.vue
+++ b/src/views/HouseholdView.vue
@@ -1,8 +1,8 @@
<template>
<div id="householdview" class="householdview-wrapper">
<h1 v-if="currentHousehold?.id">{{ currentHousehold?.name }}</h1>
- <h1 v-else>Velg husholdning</h1>
- <div class="top-bar">
+ <h1 v-else>Velg husholdning i meny</h1>
+ <div class="top-bar" v-if="currentHousehold?.id">
<HouseholdTopBar @delete-household="deleteHousehold()" @add-user="addUser" />
</div>
<div>
@@ -31,7 +31,7 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
-import type { UserFull, Household } from "@/services";
+import type { UserFull } from "@/services";
import UserCard from "@/components/HouseholdCard.vue";
import HouseholdTopBar from "@/components/HouseholdTopBar.vue";
import { useHouseholdStore } from "@/stores/household";
@@ -40,7 +40,7 @@ import { HouseholdApi, AccountApi } from "@/services/index";
import { ElMessage } from "element-plus";
const householdStore = useHouseholdStore();
-const sessionStore = useSessionStore();
+/* const sessionStore = useSessionStore(); */
const householdApi = new HouseholdApi();
const accountApi = new AccountApi();
@@ -101,7 +101,7 @@ function updateUserPrivelige(user: UserFull) {
});
}
-//This currently works with id and not email :( backend should return user
+//This currently works with id and not email :( backend should return user?
function addUser(value: string) {
console.log("add user: " + value);
//todo: fix this
--
GitLab
From 2fc4e43dbacb5edefd80667acddb6b17371dabd4 Mon Sep 17 00:00:00 2001
From: JonasKos <jonas.kosmo@gmail.com>
Date: Wed, 26 Apr 2023 09:47:54 +0200
Subject: [PATCH 25/25] fix: fixes userCurrent is undefined bug
---
src/components/HouseholdCard.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/HouseholdCard.vue b/src/components/HouseholdCard.vue
index 5ddcab8..23537b8 100644
--- a/src/components/HouseholdCard.vue
+++ b/src/components/HouseholdCard.vue
@@ -17,7 +17,7 @@
</div>
<footer class="mt-2 text-right">
<el-button
- v-if="userType == 'USER' && currentUser.id != user.id"
+ v-if="userType == 'USER' && currentUser?.id != user.id"
type="primary"
@click="emit('updateUserPrivelige', user)"
>
--
GitLab