feat(web) #74

galaplexus · Mar 11, 2022 · c4857d8 · c4857d8
1 parent 8a8ff2b
commit c4857d8
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 18 deletions.
diff --git a/web/src/components/Project.vue b/web/src/components/Project.vue
@@ -1,7 +1,8 @@
 <template>
-  <router-link :to="`/${project}/${latestVersion}`">
-    <md-card>
-      <md-card-header>
+
+  <md-card>
+      <router-link :to="`/${project}/${latestVersion}`">
+    <md-card-header>
         <md-avatar :class="{ hidden: hideAvatar }">
           <img
             :alt="`${project} project logo`"
@@ -13,8 +14,14 @@
         <div class="md-title">{{ project }}</div>
         <div class="md-subhead">{{ versions.length }} Versions </div>
       </md-card-header>
+    </router-link>
+      <md-card-actions>
+        <md-button class="md-icon-button" @click="switchFavourite()">
+          <md-icon v-if="isFavourite" id="favourite-star">star</md-icon>
+          <md-icon v-if="!isFavourite" id="not-favourite-star">star</md-icon>
+        </md-button>
+      </md-card-actions>
     </md-card>
-  </router-link>
 </template>
 
 <script>
@@ -23,26 +30,39 @@ import ProjectRepository from '@/repositories/ProjectRepository'
 export default {
   name: 'Project',
   props: {
-    project: String
+    project: String,
   },
   data() {
     return {
       logoURL: '',
       latestVersion: '',
       versions: [],
-      hideAvatar: false
+      hideAvatar: false,
+      isFavourite: false,
     }
   },
   async created() {
     document.title = this.project + " | docat"
-    this.logoURL = ProjectRepository.getProjectLogoURL(this.project)
-    this.versions = await ProjectRepository.getVersions(this.project)
-    this.latestVersion = (this.versions.find((version) => version.name == 'latest') || this.versions[0]).name
+    this.logoURL = "sdfff" //ProjectRepository.getProjectLogoURL(this.project)
+    this.versions = [1, 2, 4] //await ProjectRepository.getVersions(this.project)
+    this.latestVersion = "ss"//(this.versions.find((version) => version.name == 'latest') || this.versions[0]).name
+    this.isFavourite = ProjectRepository.isFavourite(this.project)
+  },
+  methods: {
+    switchFavourite() {
+      ProjectRepository.setFavourite(this.project, !this.isFavourite);
+      this.isFavourite = !this.isFavourite;
+    }
   }
 }
 </script>
 <style lang="scss">
 .md-avatar.hidden {
   display: none;
 }
+#favourite-star {
+  color: yellow;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: black;
+}
 </style>
diff --git a/web/src/components/ProjectOverview.vue b/web/src/components/ProjectOverview.vue
@@ -1,13 +1,25 @@
 <template>
-  <div class="md-layout">
-    <Project
-      class="md-layout-item md-size-25"
-      v-for="project of projects"
-      v-bind:key="project.name"
-      :project="project.name"
-    />
+  <div>
+    <div class="md-layout favourite-projects">
+      <Project
+        class="md-layout-item md-size-25"
+        v-for="project of favouriteProjects"
+        v-bind:key="project.name"
+        :project="project.name"
+      />
+    </div>
+    <br/>
+    <div class="md-layout">
+      <Project
+        class="md-layout-item md-size-25"
+        v-for="project of nonFavouriteProjects"
+        v-bind:key="project.name"
+        :project="project.name"
+      />
+    </div>
     <Help v-if="!projects.length" />
   </div>
+
 </template>
 
 <script>
@@ -24,12 +36,25 @@ export default {
   },
   data() {
     return {
-      projects: []
+      projects: [],
+      favouriteProjects: [],
+      nonFavouriteProjects: [],
     }
   },
   async created() {
-    this.projects = await ProjectRepository.get()
+    this.projects = [{name: "projecta"}, {name: "projectb"}]//await ProjectRepository.get()
+    this.favouriteProjects = this.projects.filter(p => ProjectRepository.isFavourite(p.name))
+    this.nonFavouriteProjects = this.projects.filter(p => !ProjectRepository.isFavourite(p.name))
   }
 }
 </script>
 
+<style>
+.favourite-projects {
+  margin-top : 30px;
+  margin-bottom: 0px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid #e8e8e8;
+}
+</style>
+
diff --git a/web/src/repositories/ProjectRepository.js b/web/src/repositories/ProjectRepository.js
@@ -114,5 +114,28 @@ export default {
         headers: headers
       }
     )
+  },
+
+  /**
+   * Returns boolean indicating if the project name is part of the favourites.
+   * @param {string} projectName name of the prject
+   * @returns bool - true is project is favourite
+   */
+  isFavourite(projectName) {
+    return localStorage.getItem(projectName) == "favourite";
+  },
+
+  /**
+   * Sets favourite preference on project
+   * @param {string} projectName 
+   * @param {boolean} shouldBeFavourite 
+   */
+  setFavourite(projectName, shouldBeFavourite) {
+    if (shouldBeFavourite) {
+      localStorage.setItem(projectName, "favourite");
+    } else {
+      localStorage.removeItem(projectName);
+    }
   }
+
 }
diff --git a/web/tests/unit/project-repository.spec.js b/web/tests/unit/project-repository.spec.js
@@ -91,4 +91,14 @@ describe('ProjectRepository', () => {
       }
     )
   })
+
+  it('should add and remove favourite projects correctly', () => {
+      expect(ProjectRepository.isFavourite("mytest-project")).toBeFalsy()
+      ProjectRepository.setFavourite("mytest-project", false)
+      expect(ProjectRepository.isFavourite("mytest-project")).toBeFalsy()
+      ProjectRepository.setFavourite("mytest-project", true)
+      expect(ProjectRepository.isFavourite("mytest-project")).toBeTruthy()
+      ProjectRepository.setFavourite("mytest-project", false)
+      expect(ProjectRepository.isFavourite("mytest-project")).toBeFalsy()
+  })
 })