Merge pull request #185 from rwth-acis/release/2.2.0

Release/2.2.0

CHANGELOG.md

@@ -10,6 +10,24 @@ the [GitHub Release Page](https://github.com/rwth-acis/RequirementsBazaar-WebFro
 
 ## [Unreleased]
 
+## [2.2.0] - 2022-01-29
+
+### Added
+
+- Breadcrumb controls for project internal navigation (between project, categories, and requirement pages).[#171](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/171)
+- Navigate to requirement details page when clicking on title [#170](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/issues/170)
+- Display a date label for each item in the activity tracker [#181](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/issues/181)
+
+### Changed
+
+- Show active and completed requirements in the designated tabs. Also, added a 'done' label to realized requirements [#164](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/164)
+- Inline link to GitHub issue instead of oversized button [#180](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/180)
+- Show development timeline only for requirements with linked issue [#179](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/issues/179)
+- Disable development timeline in project overview [#175](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/issues/175)
+- Add menu items on requirement card to create and view GitHub issue [#180](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/180)
+
+### Removed
+- Remove GitHub option from share button and disable Twitter and Facebook options [#180](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/180)
 
 ## [2.1.0] - 2022-01-22
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reqbaz",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vite",
     "dev-local-api": "vite --mode dev-local-api",

src/components/ActivityTracker.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="activitiesList">
-    <div v-for="activity in activities" :key="activity.id" class="activity">
+    <a v-for="activity in activities" :key="activity.id" class="activity" :href="getActivityTargetUrl(activity)" target="_blank" rel="noreferrer">
       <UserAvatar :imageUrl="activity.user.profileImage" :userName="activity.user.userName" class="profileImage" />
 
-      <div class="activityText">
-        {{ activity.user.userName }}
-        {{ actionWordings[activity.activityAction] }}
-        {{ getTypeWording(activity) }}
+      <div class="activityBody p-ml-1">
+        <div class="activityText">
+          {{ activity.user.userName }}
+          {{ actionWordings[activity.activityAction] }}
+          {{ getTypeWording(activity) }}
+        </div>
+        <div class="activityDate p-mt-1">
+          <span :title="$dayjs(activity.creationDate).format('LLL')">{{ $dayjs(activity.creationDate).fromNow() }}</span>
+        </div>
       </div>
+    </a>
+    <div >
+
     </div>
   </div>
 </template>
@@ -60,7 +68,29 @@ export default defineComponent({
       }
     }
 
-    return { activities, actionWordings, getTypeWording };
+    /**
+     * Returns an URL to the target entity of the specific activity (e.g., project, category, requirement)
+     */
+    const getActivityTargetUrl = (activity) => {
+      const entityUrl = activity.dataFrontendUrl;
+
+      /*
+      * We need some replacing here because old URLs in the activity database (end even new ones?)
+      * have an outdated link format, like the following URL:
+      *     https://beta.requirements-bazaar.org/projects/110/categories/317/requirements/843
+      * while the new URLs we use for requirement links have the following format:
+      *     https://beta.requirements-bazaar.org/projects/110/requirements/843
+      */
+      const oldRequirementLinksRegex = /\/categories\/(\S)+\/requirements\//gm;
+      let targetUrl = entityUrl.replace(oldRequirementLinksRegex, '/requirements/');
+
+      // replace the beat link with the more dynamic current origin URL (enables better debugging experience when localhost is used)
+      targetUrl = targetUrl.replace('https://beta.requirements-bazaar.org', window.location.origin);
+
+      return targetUrl;
+    };
+
+    return { activities, actionWordings, getTypeWording, getActivityTargetUrl };
   },
 
 })
@@ -78,15 +108,27 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
     align-content: center;
-    height: 60px;
     border-bottom: 1px solid lightgrey;
     align-content: flex-end;
+    color: #495057; /* overrides color forced by <a> tag */
+    padding: 5px 10px;
   }
 
-  .activityText {
+  .activityBody {
     flex: 1;
+
+  }
+
+  .activityText {
     font-size: 0.95rem;
-    margin: auto 0.2rem;
+  }
+
+  .activityDate {
+    font-weight: normal;
+    font-size: 0.75em;
+    color: #5d5d5d;
+    text-align: right;
+    padding-right: 5px;
   }
 
   .profileImage {

src/components/ProjectBreadcrumbNav.vue

@@ -0,0 +1,49 @@
+<template>
+    <Breadcrumb :home="home" :model="items" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRefs } from 'vue';
+
+export default defineComponent({
+  name: 'ProjectBreadcrumbNav',
+  props: {
+    projectId: { type: Number, required: true },
+    projectName: { type: String, required: false, default: 'Project Home' },
+    categoryId: { type: Number, required: false },
+    categoryName: { type: String, required: false, default: 'Parent Category' },
+    requirementId: { type: Number, required: false },
+    requirementName: { type: String, required: false },
+  },
+  setup: (props) => {
+    const { projectId, projectName, categoryId, categoryName, requirementId, requirementName } = toRefs(props);
+
+    const home =  computed(() => {
+      return {
+        label: 'Public Projects',
+        to: `/projects`
+      }
+    });
+
+    const items = computed(() => {
+      const menuItems: { label: string, to?: string }[] = [
+        { label: projectName.value, to: `/projects/${projectId.value}` }
+      ];
+
+      if (categoryId.value && categoryName.value) {
+        menuItems.push({ label: categoryName.value, to: `/projects/${projectId.value}/categories/${categoryId.value}` });
+
+        if (requirementId.value && requirementName.value) {
+          menuItems.push({ label: requirementName.value, to: `/projects/${projectId.value}/requirements/${requirementId.value}` });
+        }
+      }
+      return menuItems;
+    });
+
+    return {
+      home,
+      items,
+    };
+  },
+})
+</script>