feat(web) #74 - favouring projects

fixed favourite star design Auto refresh Improved responsiveness Improve overall design
galaplexus · Aug 21, 2022 · 59b5a26 · 59b5a26
1 parent 848202b
commit 59b5a26
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 18 deletions.
diff --git a/web/src/components/Project.vue b/web/src/components/Project.vue
@@ -1,6 +1,7 @@
 <template>
-  <router-link :to="`/${project}/${latestVersion}`">
-    <md-card>
+
+  <md-card class="project-card">
+    <router-link :to="`/${project}/${latestVersion}`">
       <md-card-header>
         <md-avatar :class="{ hidden: hideAvatar }">
           <img
@@ -9,12 +10,18 @@
             @error="() => hideAvatar = true"
           />
         </md-avatar>
-
         <div class="md-title">{{ project }}</div>
         <div class="md-subhead">{{ versions.length }} Versions </div>
       </md-card-header>
+      </router-link>
+
+      <div class="star-div">
+        <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>
+      </div>
     </md-card>
-  </router-link>
 </template>
 
 <script>
@@ -23,26 +30,57 @@ 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.isFavourite = ProjectRepository.isFavourite(this.project)
+  },
+  methods: {
+    switchFavourite() {
+      ProjectRepository.setFavourite(this.project, !this.isFavourite)
+      this.isFavourite = !this.isFavourite;
+      this.$emit("favouriteChanged")
+    }
   }
 }
 </script>
 <style lang="scss">
+.project-card {
+  margin-bottom: 10px;
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+.md-card-header {
+  float: left;
+  padding: 0px;
+  padding-left: 16px;
+}
+.star-div {
+  padding-right: 16px;
+  float: right;
+}
 .md-avatar.hidden {
   display: none;
 }
+#favourite-star {
+  color: rgb(80, 80, 80);
+}
+#not-favourite-star {
+  color: #fff;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: rgb(80, 80, 80);
+}
 </style>
diff --git a/web/src/components/ProjectOverview.vue b/web/src/components/ProjectOverview.vue
@@ -1,11 +1,24 @@
 <template>
-  <div class="md-layout">
-    <Project
-      class="md-layout-item md-size-25"
-      v-for="project of projects"
-      v-bind:key="project"
-      :project="project"
-    />
+  <div>
+    <div class="md-layout" v-if="favouriteProjects.length" >
+      <Project
+        @favouriteChanged="load"
+        class="md-layout-item md-size-25"
+        v-for="project of favouriteProjects"
+        v-bind:key="project"
+        :project="project"
+      />
+    </div>
+    <div class="divider" v-if="nonFavouriteProjects.length && favouriteProjects.length"></div>
+    <div class="md-layout" v-if="nonFavouriteProjects.length">
+      <Project
+        class="md-layout-item md-size-25"
+        @favouriteChanged="load"
+        v-for="project of nonFavouriteProjects"
+        v-bind:key="project"
+        :project="project"
+      />
+    </div>
     <Help v-if="!projects.length" />
   </div>
 </template>
@@ -24,12 +37,29 @@ export default {
   },
   data() {
     return {
-      projects: []
+      projects: [],
+      favouriteProjects: [],
+      nonFavouriteProjects: [],
     }
   },
   async created() {
     this.projects = await ProjectRepository.get()
+    this.load()
+  },
+  methods: {
+    load() {
+      this.favouriteProjects = this.projects.filter(p => ProjectRepository.isFavourite(p))
+      this.nonFavouriteProjects = this.projects.filter(p => !ProjectRepository.isFavourite(p))
+    }
   }
 }
 </script>
 
+<style>
+.divider {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+}
+</style>
+
diff --git a/web/src/repositories/ProjectRepository.js b/web/src/repositories/ProjectRepository.js
@@ -37,7 +37,7 @@ export default {
   },
 
   /**
-   * Returns the project documentatino URL
+   * Returns the project documentation URL
    * @param {string} projectName Name of the project
    * @param {string} version Version name
    * @param {string?} docsPath Path to the documentation page
@@ -47,7 +47,7 @@ export default {
   },
 
   /**
-   * Returns the docs path only without the prefix, porject and version
+   * Returns the docs path only without the prefix, project and version
    * @param {string} projectName Name of the project
    * @param {string} version Version name
    * @param {string} fullDocsPath Full path to the docs including prefix, project and version
@@ -146,5 +146,27 @@ export default {
           }
           return semver.compare(versionA, versionB);
       }
-   }
+   },
+
+   /**
+   * Returns boolean indicating if the project name is part of the favourites.
+   * @param {string} projectName name of the project
+   * @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-component.spec.js b/web/tests/unit/project-component.spec.js
@@ -17,7 +17,9 @@ const wrapper = shallowMount(Project, {
     'router-link': true,
     'md-card': true,
     'md-card-header': true,
-    'md-avatar': true
+    'md-avatar': true,
+    'md-button': true,
+    'md-icon': true
   }
 })
 

diff --git a/web/tests/unit/project-repository.spec.js b/web/tests/unit/project-repository.spec.js
@@ -136,4 +136,14 @@ describe('ProjectRepository', () => {
     expect(ProjectRepository.compareVersions('1.2.0', '1.0')).toBeGreaterThan(0);
     expect(ProjectRepository.compareVersions('1.2', '2.0.0')).toBeLessThan(0);
   })
+
+  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()
+  })
 })