Merge branch 'main' into myItems

.gitlab-ci.yml

@@ -3,6 +3,7 @@ image: node:16
 stages:
 #  - setup
   - test
+  - deploy
 
 #variables:
 #  npm_config_cache: "$CI_PROJECT_DIR/.npm"
@@ -37,6 +38,21 @@ test:
     - npm run lint
     - npm run test:unit
 
+deploy-backend:
+  image: ubuntu:latest
+  stage: deploy
+  script:
+    - chmod og= $ID_RSA
+    - apt update
+    - apt install --assume-yes rsync
+    - apt install --assume-yes openssh-client
+    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $SERVERUSER@$SERVERIP "sudo /bin/systemctl restart cleanfront.service"
+    - rsync --archive --rsync-path=/usr/bin/rsync --delete --exclude='.git' --exclude='node_modules' -e "ssh -i $ID_RSA -o StrictHostKeyChecking=no -l $SERVERUSER -p 22" . $SERVERIP:./app/frontend
+    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $SERVERUSER@$SERVERIP "cd app/frontend;npm install"
+    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $SERVERUSER@$SERVERIP "sudo /bin/systemctl restart frontend.service"
+  only:
+    - main
+
 #unit_test:
 #  stage: test
 #  script:

src/components/BaseComponents/PaginationTemplate.vue

+<template>
+  <div v-if="totalPages() > 0">
+    <span v-if="showPreviousLink()"
+          class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+          @click="updatePage(currentPage - 1)">
+      Forrige
+    </span>
+    <label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label>
+    <span
+        v-if="showNextLink()"
+        class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
+        @click="updatePage(currentPage + 1)">
+      Neste
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'paginationTemplate',
+  props: ['items', 'currentPage', 'pageSize'],
+  methods: {
+    updatePage(pageNumber) {
+      this.$emit('page:update', pageNumber);
+    },
+    totalPages() {
+      return Math.ceil(this.items.length / this.pageSize);
+    },
+    showPreviousLink() {
+      return this.currentPage == 0 ? false : true;
+    },
+    showNextLink() {
+      return this.currentPage == (this.totalPages() - 1) ? false : true;
+    }
+  }
+}
+</script>

src/components/CommunityComponents/CommunityHome.vue

@@ -26,19 +26,39 @@
         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"
         v-model="search"
+        @change="searchWritten"
       />
     </div>
 
-    <!-- Item cards -->
-    <div class="absolute inset-x-0 px-6 py-3">
+
+    <div class="absolute inset-x-0 px-5 py-3">
+
+      <!-- ItemCards -->
+      <div class="flex items-center justify-center w-screen">
+        <!-- Shows items based on pagination -->
+        <div
+            class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
+            v-if="showItems">
+          <ItemCard  v-for="item in visibleItems" :key="item" :item="item" @click="goToItemInfoPage(item.listingID)" />
+        </div>
+
+        <!-- Shows items based on search field input -->
         <div
             class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
-      >
-        <ItemCard
-          v-for="item in searchedItems"
-          :key="item"
-          :item="item"
-          @click="goToItemInfoPage(item.listingID)"
+            v-if="showSearchedItems">
+          <ItemCard v-for="item in searchedItems" :key="item" :item="item" @click="goToItemInfoPage(item.listingID)" />
+        </div>
+      </div>
+
+
+      <!-- pagination -->
+      <div class="flex justify-center" v-if="showItems">
+        <PaginationTemplate
+            v-bind:items="items"
+            v-on:page:update="updatePage"
+            v-bind:currentPage="currentPage"
+            v-bind:pageSize="pageSize"
+            class="mt-10"
         />
       </div>
     </div>
@@ -46,8 +66,10 @@
 </template>
 
 <script>
-import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
 import ItemCard from "@/components/ItemComponents/ItemCard";
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
+import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+
 import {
   GetCommunity,
   GetListingsInCommunity,
@@ -59,6 +81,7 @@ export default {
   components: {
     CommunityHeader,
     ItemCard,
+    PaginationTemplate,
   },
 
   computed: {
@@ -93,6 +116,14 @@ export default {
       search: "",
       communityID: -1,
       community: {},
+
+      showItems: true,
+      showSearchedItems: false,
+
+      //Variables connected to pagination
+      currentPage: 0,
+      pageSize: 12,
+      visibleItems: [],
     };
   },
   methods: {
@@ -107,7 +138,6 @@ export default {
       this.items = await GetListingsInCommunity(this.communityID);
       for (var i = 0; i < this.items.length; i++) {
         let images = await getItemPictures(this.items[i].listingID);
-        console.log(images);
         if (images.length > 0) {
           this.items[i].img = images[0].picture;
         }
@@ -120,10 +150,36 @@ export default {
       let res = await getItemPictures(itemid);
       return res;
     },
+    searchWritten: function (){
+      //This method triggers when search input field is changed
+      if(this.search.length > 0){
+        this.showItems = false;
+        this.showSearchedItems = true;
+      }
+      else{
+        this.showItems = true;
+        this.showSearchedItems = false;
+      }
+    },
+
+    //Pagination
+    updatePage(pageNumber) {
+      this.currentPage = pageNumber;
+      this.updateVisibleTodos();
+    },
+    updateVisibleTodos() {
+      this.visibleItems = this.items.slice(this.currentPage * this.pageSize, (this.currentPage * this.pageSize) + this.pageSize);
+
+      // if we have 0 visible items, go back a page
+      if (this.visibleItems.length === 0 && this.currentPage > 0) {
+        this.updatePage(this.currentPage -1);
+      }
+    },
   },
-  beforeMount() {
-    this.getCommunityFromAPI(); //To get the id of the community before mounting the view
-    this.getListingsOfCommunityFromAPI();
+  async beforeMount() {
+    await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
+    await this.getListingsOfCommunityFromAPI();
+    this.updateVisibleTodos();
   },
 };
 </script>

src/components/FormComponents/NewPasswordForm.vue

@@ -134,12 +134,19 @@ export default {
         return;
       }
 
-      const newPasswordInfo = {
-        token: this.token,
-        newPassword: this.password,
-      };
+      const newPassword = this.user.password;
 
-      const newPasswordResponse = doNewPassword(newPasswordInfo);
+      const newPasswordResponse = await doNewPassword(newPassword);
+
+      if (newPasswordResponse != null) {
+        console.log("New password set");
+        this.$store.commit("saveToken", newPasswordResponse);
+        await this.$router.push("/");
+      } else {
+        console.log("Couldn't set new password");
+      }
+
+      /*
 
       if (newPasswordResponse.newPasswordSet === true) {
         console.log("New password set");
@@ -149,6 +156,8 @@ export default {
       } else {
         console.log("Something went wrong");
       }
+
+      */
     },
     validate() {
       this.$refs.form.validate();

src/utils/apiutil.js

@@ -84,15 +84,22 @@ export function getAverageRating(userid) {
       console.error(error);
     });
 }
-export function doNewPassword() {
-  //m
-  //add newPasswordInfo to input
-  const auth = { newPasswordSet: false };
-  //return axios
-  //.post(API_URL + "newPassword", newPasswordInfo)
-  //.then((response) => {auth.newPasswordSet = true;return auth;})
-  //.catch((error) => {console.log(error);return auth;});
-  return auth; //remove after axios is added
+export async function doNewPassword(password) {
+  let res = await axios({
+    method: "put",
+    url: API_URL + "user/profile/password",
+    headers: tokenHeader(),
+    data: {
+      password: password,
+    },
+  })
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  return res.data;
 }
 
 export function postNewItem(itemInfo) {