diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 348e60a278d44a882a535860aa6976314846a5b3..80a3cfd1ef8c30d6eeeca137f47baa4bc7f2b0a1 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- Hamburger menu for community header, contains options for adding a new listing,
+ seeing all members in the community, administrating the community if admin and
+ leaving the community -->
<div
id="dropdown"
class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index d5d55e2c09c7b5c8e329444d11a3a35eb5fcd1dd..c4303c3225413382bd65ca5a20e56c64eb9028a1 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -1,5 +1,10 @@
<template>
+ <!-- Community header contains the community's name and address, a join button if
+ the user is not in the community and community hamburger menu if the user is
+ in the community -->
<div>
+ <!-- A warning asking user is it is sure it wants to leave the community when leave community
+ from hamburger menu is clicked -->
<CustomFooterModal
:title="'Er du sikker på at du vil forlate felleskapet?'"
:message="'Dersom felleskapet er låst er du nødt til å spørre om å bli med på nytt.'"
@@ -20,9 +25,13 @@
/>
</div>
</CustomFooterModal>
+
+ <!-- The load spinner will show while community and it's members are being loaded from the db -->
<div v-if="loading" class="flex place-content-center mx-4">
<LoaderSpinner />
</div>
+
+ <!-- After loaded the community header shows -->
<div v-else class="flex items-center justify-between mx-4">
<router-link
:to="'/community/' + community.communityId"
@@ -97,7 +106,6 @@
:community-i-d="community.communityId"
:admin="admin"
/>
- <!-- class="absolute" -->
</div>
</div>
</div>
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 49103a9a86db563b3d2efd6dc733b4ef7efc7f40..2e09b5104951dba94cbb936cb63c1a5f9e4d70ff 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -1,8 +1,12 @@
<template>
+ <!-- The community home page, shows all the items in the community with the possibility of
+ clicking on an item to be redirected to the item info page -->
<div>
+ <!-- Shows loading component while loading the content for the page -->
<div v-if="loading" class="flex place-content-center">
<LoaderSpinner />
</div>
+ <!-- When finish loading the home page for community is shown -->
<section v-else class="w-full px-5 py-4 mx-auto rounded-md">
<CommunityHeader :admin="false" class="mb-5" />
@@ -27,7 +31,7 @@
<input
type="text"
class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
- placeholder="Search"
+ placeholder="Søk"
v-model="search"
@change="searchWritten"
/>
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index b6641f92549da76ed1f956e600842d9b07615eb5..8354bd25ce4cd34d3644522768e19a6298e89ad6 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A list conatining all the communities -->
<p v-if="!communities.length" class="flex place-content-center text-gray-400">
Ingen grupper
</p>
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 40d90645e430cd49f104c91c7def3e125b9721fb..8001e01a3aaba188a781c75428ecfa28a02bbd72 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -39,7 +39,7 @@
/>
</div>
- <!-- If a user is not logges in and tries to join a community, this message shows -->
+ <!-- If a user is not logged in and tries to join a community, this message shows -->
<div class="flex justify-center p-2">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
{{ responseToUser }}
diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue
index 8508efd202f46350266f1c198b5f7419aca8aac3..f00a8bf6b473e75353fae3ca159d5e1d6ef98e9e 100644
--- a/src/components/CommunityComponents/CommunityRequestForm.vue
+++ b/src/components/CommunityComponents/CommunityRequestForm.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A request form for joining a private community -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
@@ -99,7 +100,6 @@ export default {
routeToHome() {
this.$router.push("/");
},
- //TODO fix so that community id is set (not null)
async saveClicked() {
this.communityID = await this.$router.currentRoute.value.params
.communityID;
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index 3818146ff63024c1dab742805231a0e0baa582c9..c832615512e4f260e990c7e2d3deed9e6e54de82 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Shows all members in a community -->
<ul>
<li v-for="member in members" :key="member.userId">
<UserListItemCard :buttons="buttons" :user="member" />
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index a088cd5d4f487b4e5cf2d36d7d81c7a823be802e..9776ad8c614bc84c27b5d601a502e1131e059b08 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A form for creating a new community -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index 30bc58a9142e8e5b02ef7f595d25c6b495848ea0..1170cf219609946018e813d174625b145adf19e4 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
@@ -2,34 +2,46 @@
exports[`CommunityHeader component renders correctly 1`] = `
<div
- adminstatus="true"
- community="[object Object]"
+ data-v-app=""
>
-
- <!-- Main modal -->
- <!--v-if-->
-
+
+ <!-- Community header contains the community's name and address, a join button if
+ the user is not in the community and community hamburger menu if the user is
+ in the community -->
<div
- class="flex place-content-center mx-4"
+ adminstatus="true"
+ community="[object Object]"
>
+ <!-- A warning asking user is it is sure it wants to leave the community when leave community
+ from hamburger menu is clicked -->
+
+ <!-- Main modal -->
+ <!--v-if-->
+
+ <!-- The load spinner will show while community and it's members are being loaded from the db -->
<div
- class="loadingio-spinner-bean-eater-o5tefvffeqm"
+ class="flex place-content-center mx-4"
>
<div
- class="ldio-sweozsnwol"
+ class="loadingio-spinner-bean-eater-o5tefvffeqm"
>
- <div>
- <div />
- <div />
- <div />
- </div>
- <div>
- <div />
- <div />
- <div />
+ <div
+ class="ldio-sweozsnwol"
+ >
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
+ <div>
+ <div />
+ <div />
+ <div />
+ </div>
</div>
</div>
</div>
</div>
+
</div>
`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
index 9888519e7bc965cf1feeadf34dc0c6053e58a2fc..83c59184e09f451bb1334d6e3c47254818595145 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -2,160 +2,167 @@
exports[`CreateNewGroup elements rendering renders correctly 1`] = `
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ data-v-app=""
>
- <!-- Component heading -->
- <div
- class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
- >
- Opprett ny gruppe
- </div>
- <!-- Radio boxes -->
+
+ <!-- A form for creating a new community -->
<div
- class="mt-6"
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="radioBoxLabel"
+ <!-- Component heading -->
+ <div
+ class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
- Synlighet
- </label>
+ Opprett ny gruppe
+ </div>
+ <!-- Radio boxes -->
<div
- class="form-check"
+ class="mt-6"
>
- <input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- id="flexRadioOpen"
- name="flexRadioDefault"
- type="radio"
- value="Ã…pen"
- />
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioOpen"
- id="radioBoxOpenLabel"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="radioBoxLabel"
>
- Ã…pen
+ Synlighet
</label>
+ <div
+ class="form-check"
+ >
+ <input
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ id="flexRadioOpen"
+ name="flexRadioDefault"
+ type="radio"
+ value="Ã…pen"
+ />
+ <label
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioOpen"
+ id="radioBoxOpenLabel"
+ >
+ Ã…pen
+ </label>
+ </div>
+ <div
+ class="form-check"
+ >
+ <input
+ class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+ id="flexRadioPrivate"
+ name="flexRadioDefault"
+ type="radio"
+ value="Privat"
+ />
+ <label
+ class="form-check-label inline-block text-gray-800"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
+ >
+ Privat
+ </label>
+ </div>
</div>
+ <!-- Title -->
<div
- class="form-check"
+ class="mt-6"
>
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="titleLabel"
+ >
+ Gruppenavn
+ </label>
<input
- class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
- id="flexRadioPrivate"
- name="flexRadioDefault"
- type="radio"
- value="Privat"
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="title"
+ required=""
+ type="text"
/>
+ <!-- error message for title-->
+
+
+ </div>
+ <!-- Place -->
+ <div
+ class="mt-6"
+ >
<label
- class="form-check-label inline-block text-gray-800"
- for="flexRadioPrivate"
- id="radioBoxPrivateLabel"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ id="positionLabel"
>
- Privat
+ By/Sted
</label>
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ required=""
+ type="text"
+ />
+ <!-- error message for place-->
+
+
</div>
- </div>
- <!-- Title -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="titleLabel"
- >
- Gruppenavn
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="title"
- required=""
- type="text"
- />
- <!-- error message for title-->
-
-
- </div>
- <!-- Place -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
- id="positionLabel"
- >
- By/Sted
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- required=""
- type="text"
- />
- <!-- error message for place-->
-
-
- </div>
- <!-- Description -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="descriptionLabel"
- >
- Beskrivelse
- </label>
- <textarea
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="description"
- required=""
- rows="4"
- />
- <!-- error message for description -->
-
-
- </div>
- <!-- Images -->
- <div
- class="mt-6"
- >
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ <!-- Description -->
+ <div
+ class="mt-6"
>
- Bilde (bildet må være .png)
- </label>
- <input
- accept="image/png"
- multiple=""
- style="display: none;"
- type="file"
- />
- <!-- Button for adding an image -->
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="descriptionLabel"
+ >
+ Beskrivelse
+ </label>
+ <textarea
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="description"
+ required=""
+ rows="4"
+ />
+ <!-- error message for description -->
+
+
+ </div>
+ <!-- Images -->
<div
- class="inline-flex rounded-md shadow-sm"
+ class="mt-6"
>
- <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
- <button
- class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
+ >
+ Bilde (bildet må være .png)
+ </label>
+ <input
+ accept="image/png"
+ multiple=""
+ style="display: none;"
+ type="file"
+ />
+ <!-- Button for adding an image -->
+ <div
+ class="inline-flex rounded-md shadow-sm"
>
- Velg bilde
- </button>
+ <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+ <button
+ class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
+ >
+ Velg bilde
+ </button>
+ </div>
+ <!-- Div box for showing all chosen images -->
+
+
+ </div>
+ <!-- Save item button -->
+ <div
+ class="flex justify-center mt-10 float-right"
+ >
+ <button-stub
+ buttoncolor="blue"
+ id="saveButton"
+ text="Lagre"
+ />
</div>
- <!-- Div box for showing all chosen images -->
-
-
- </div>
- <!-- Save item button -->
- <div
- class="flex justify-center mt-10 float-right"
- >
- <button-stub
- buttoncolor="blue"
- id="saveButton"
- text="Lagre"
- />
</div>
+
</div>
`;