diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index a50b3b132633e6dddaf8a8c26664adf4f4d16277..e757a909259f83ab7a49cbed5dac6b15ab115061 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,41 +1,43 @@
image: node:16
stages:
- - setup
+# - setup
- test
-variables:
- npm_config_cache: "$CI_PROJECT_DIR/.npm"
+#variables:
+# npm_config_cache: "$CI_PROJECT_DIR/.npm"
# 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
+#.dependencies_cache:
+# cache:
+# key:
+# files:
+# - package-lock.json
+# paths:
+# - .npm
+# policy: pull
-setup:
- stage: setup
- script:
- - 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
+#setup:
+# stage: setup
+# script:
+# - 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
-lint_test:
+test:
stage: test
script:
+ - npm ci
- npm run lint
-
-unit_test:
- stage: test
- script:
- npm run test:unit
+
+#unit_test:
+# stage: test
+# script:
+# - npm run test:unit
diff --git a/package-lock.json b/package-lock.json
index c5996c4127a70deafec77ff20acc4e75c67448a1..bf8401f585cf13c85d81e6a8f01912a151578266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "frontend",
"version": "0.1.0",
"dependencies": {
+ "@heroicons/vue": "^1.0.6",
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
@@ -1706,6 +1707,14 @@
"@hapi/hoek": "^9.0.0"
}
},
+ "node_modules/@heroicons/vue": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+ "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+ "peerDependencies": {
+ "vue": ">= 3"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.5.0",
"dev": true,
@@ -16071,6 +16080,12 @@
"@hapi/hoek": "^9.0.0"
}
},
+ "@heroicons/vue": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+ "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+ "requires": {}
+ },
"@humanwhocodes/config-array": {
"version": "0.5.0",
"dev": true,
diff --git a/package.json b/package.json
index 4a088f0efe3f10a8b470fb5a54debc6cb0fd0b21..66788b9ffdf616d6288db4223c4c69ed8106e191 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "@heroicons/vue": "^1.0.6",
"@mdi/font": "5.9.55",
"@vuelidate/core": "^2.0.0-alpha.40",
"@vuelidate/validators": "^2.0.0-alpha.28",
diff --git a/src/assets/members.png b/src/assets/members.png
new file mode 100644
index 0000000000000000000000000000000000000000..51775f6bead51014d3143631c292421752d024b6
Binary files /dev/null and b/src/assets/members.png differ
diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74091bb360a25e7d489994c4aded8e59544445e5
--- /dev/null
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -0,0 +1,16 @@
+<template>
+ <button
+ class="block 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 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ >
+ {{ text }}
+ </button>
+</template>
+
+<script>
+export default {
+ name: "ColoredButton",
+ props: {
+ text: String,
+ },
+};
+</script>
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..99fde7e4f3ca32f7931a1f4aed0ed7735ea87e98
--- /dev/null
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="flex items-center justify-between mx-4">
+ <div class="flex-1 min-w-0">
+ <h2
+ class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
+ >
+ {{ community.name }}
+ </h2>
+ <div
+ class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+ >
+ <div class="mt-2 flex items-center text-sm text-gray-500">
+ <svg
+ class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ {{ community.location }}
+ </div>
+ </div>
+ </div>
+ <div class="flex">
+ <span class="hidden sm:block">
+ <button
+ v-if="adminStatus"
+ @click="edit()"
+ type="button"
+ class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+ >
+ <!-- Heroicon name: solid/pencil -->
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-5 w-5"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+ />
+ </svg>
+ Edit
+ </button>
+ </span>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "CommunityHeader",
+ props: {
+ adminStatus: Boolean,
+ community: {
+ communityId: Number,
+ name: String,
+ description: String,
+ visibility: Number,
+ location: String,
+ picture: String,
+ },
+ },
+ methods: {
+ edit() {
+ this.$emit("edit");
+ },
+ },
+};
+</script>
diff --git a/src/components/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5883ed10714253ab7a6ffe1f0416c5af75f5166a
--- /dev/null
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -0,0 +1,60 @@
+<template>
+ <!-- Main modal -->
+ <div
+ v-if="visible"
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+ >
+ <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
+ <!-- Modal content -->
+ <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+ <!-- Modal header -->
+ <div
+ class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+ >
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+ {{ title }}
+ </h3>
+ <button
+ @click="close()"
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ <svg
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+ clip-rule="evenodd"
+ ></path>
+ </svg>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div class="p-6 space-y-6">
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ message }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "NotificationModal",
+ props: {
+ visible: Boolean,
+ title: String,
+ message: String,
+ },
+ methods: {
+ close() {
+ this.$emit("close");
+ },
+ },
+};
+</script>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index e322ce2c043a9a1349d7fa0e9cb7757150ea6595..bb3a4d8edfd877b35648111b8b9a28d4ab2c9575 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -101,42 +101,6 @@
</div>
</div>
- <!-- Select category -->
- <div class="mt-6">
- <label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="selectCategoryLabel"
- >Kategori</label
- >
- <select
- v-model="v$.group.select.$model"
- id="categories"
- 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 category
- </option>
- <option
- v-for="category in group.categories"
- :key="category"
- class="text-gray-900 text-sm"
- >
- {{ category }}
- </option>
- </select>
-
- <!-- error message for select box -->
- <div
- class="text-red"
- v-for="(error, index) of v$.group.select.$errors"
- :key="index"
- >
- <div class="text-red-600 text-sm">
- {{ error.$message }}
- </div>
- </div>
- </div>
-
<!-- Description -->
<div class="mt-6" :class="{ error: v$.group.description.$errors.length }">
<label
@@ -184,13 +148,16 @@
<!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm">
- <button
+ <div class="text-red-500 uppercase text-center">
+ midlertidig fjernet
+ </div>
+ <!-- <button
@click="$refs.file.click()"
- 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 cursor-not-allowed"
+ 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"
:disabled="imageAdded"
>
Velg bilde
- </button>
+ </button> -->
<!-- Button for removing an image -->
<button
@@ -266,9 +233,6 @@ export default {
maxLength(200)
),
},
- select: {
- required: helpers.withMessage(() => `Velg en kategori`, required),
- },
},
};
},
@@ -276,10 +240,8 @@ export default {
return {
group: {
name: "",
- select: null,
description: "",
images: [],
- categories: ["Borettslag", "Idrettsklubb", "Fritidsklubb"],
radio: null,
place: "",
visibility: 1,
@@ -300,45 +262,26 @@ export default {
removeImage: function () {
this.group.images.pop();
this.imageThere = false;
- console.log("Bilder nå: " + this.group.images.length);
},
checkRadioButton: function (event) {
this.group.radio = event.target.value;
- console.log(this.group.radio);
if (this.group.radio == null || this.group.radio == "Ã…pen") {
this.group.visibility = 1;
} else {
this.group.visibility = 0;
}
-
- console.log("visibility: " + this.group.visibility);
},
checkValidation: function () {
- console.log("sjekker validering");
-
this.v$.group.$touch();
if (this.v$.group.$invalid) {
- console.log("Invalid, avslutter...");
return false;
}
-
- console.log("validert!");
return true;
},
async saveClicked() {
- console.log("Attempting to save item");
-
if (this.checkValidation()) {
- console.log("validert, videre...");
- console.log("Navn: " + this.group.name);
- console.log("Sted: " + this.group.place);
- console.log("Synlighet: " + this.group.radio);
- console.log("Kategori: " + this.group.select);
- console.log("Beskrivelse: " + this.group.description);
- console.log("bilder: " + this.group.images);
-
const groupInfo = {
name: this.group.name,
description: this.group.description,
@@ -347,18 +290,13 @@ export default {
picture: "",
};
- console.log(groupInfo);
- const postCreatedGroup = await postNewgroup(groupInfo);
- console.log(postCreatedGroup);
+ await postNewgroup(groupInfo);
}
},
addImage: function (event) {
- console.log(event.target.files);
this.group.images.push(URL.createObjectURL(event.target.files[0]));
- console.log("antall bilder: " + this.group.images.length);
this.imageThere = true;
- console.log("image: " + this.imageThere);
},
},
};
diff --git a/tests/unit/create-new-group.spec.js b/tests/unit/create-new-group.spec.js
index 0d6a36443297eb891b6d62f89fa5f2c023a0b07a..9ff1f2f8c528a002ee52b053533cf8df7ac78150 100644
--- a/tests/unit/create-new-group.spec.js
+++ b/tests/unit/create-new-group.spec.js
@@ -9,7 +9,6 @@ describe("CreateNewGroup elements rendering", () => {
expect(wrapper.find("#radioBoxOpenLabel").text()).toMatch("Ã…pen");
expect(wrapper.find("#radioBoxPrivateLabel").text()).toMatch("Privat");
expect(wrapper.find("#titleLabel").text()).toMatch("Gruppenavn");
- expect(wrapper.find("#selectCategoryLabel").text()).toMatch("Kategori");
expect(wrapper.find("#descriptionLabel").text()).toMatch("Beskrivelse");
expect(wrapper.find("#imageLabel").text()).toMatch("Bilde");
});
@@ -21,10 +20,6 @@ describe("CreateNewGroup elements rendering", () => {
await titleInput.setValue("Fjellgata");
expect(titleInput.element.value).toBe("Fjellgata");
- const selectedCategory = wrapper.find("#categories");
- await selectedCategory.setValue("Borettslag");
- expect(selectedCategory.element.value).toBe("Borettslag");
-
const descriptionInput = wrapper.find("#description");
await descriptionInput.setValue("Dette er et borettslag");
expect(descriptionInput.element.value).toBe("Dette er et borettslag");