Merge pull request #281 from rwth-acis/develop

Add Gamification and priority labels
rwth-acis · May 10, 2023 · 8444747 · 8444747
2 parents 5798756 + 3f22ee0
commit 8444747
Show file tree

Hide file tree

Showing 19 changed files with 606 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,21 @@ Releases prior to v2.0.1 are only documented on
 the [GitHub Release Page](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/releases)
 
 ## [Unreleased]
+## [2.6.0] - 2023-05-10
+
+### Added
+
+- Add priority labels to requirements
+  [#280](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/280)
+- Add Gamification
+  [#279](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/pull/279)
+
+### Changed
+
+- Changed export to include labels as headings
+  [commit fa175d9e3145ee0bf4cf204b6dd0211723214edc](https://github.com/rwth-acis/RequirementsBazaar-WebFrontend/commit/fa175d9e3145ee0bf4cf204b6dd0211723214edc)
+
+
 ## [2.5.0] - 2023-01-30
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "pdfmake": "^0.2.7",
     "primeflex": "^2.0.0",
     "primeicons": "^6.0.1",
-    "primevue": "^3.3.4",
+    "primevue": "^3.23.0",
     "puppeteer": "^19.4.1",
     "quill": "^1.3.7",
     "turndown": "^7.0.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,21 @@
 <template>
-  <div class="layout-wrapper layout-static layout-static-sidebar-inactive" :class="{'dir-rtl': isRtl}">
+  <div class="layout-wrapper layout-static layout-static-sidebar-inactive" :class="{ 'dir-rtl': isRtl }">
     <AppTopbar></AppTopbar>
     <div id="layout" :class="{ 'p-mr-3': !activityTrackerVisible }">
       <div id="container">
         <div id="content">
+          <Toast position="bottom-right" group="br" successIcon="pi pi-star" />
           <GlobalErrorMessage></GlobalErrorMessage>
           <router-view></router-view>
           <ConfirmDialog group="dialog"></ConfirmDialog>
           <ConfirmPopup group="popup"></ConfirmPopup>
         </div>
         <footer>
-          <router-link to="/about">{{ t('about') }}</router-link> &middot; <router-link to="/developer">{{ t('developer') }}</router-link> &middot; <a href="https://rwth-aachen.de/disclaimer" target="_blank">{{ t('privacyPolicy') }}</a>
+          <router-link to="/about">{{ t('about') }}</router-link> &middot; <router-link to="/developer">{{
+            t('developer')
+            }}</router-link> &middot; <a href="https://rwth-aachen.de/disclaimer" target="_blank">{{
+            t('privacyPolicy')
+            }}</a>
         </footer>
       </div>
       <div id="activityTrackerPlaceholder" v-if="activityTrackerVisible"></div>
@@ -19,7 +24,7 @@
   </div>
 
   <Dialog v-model:visible="isLoading" :closable="false" :showHeader="false">
-    <ProgressSpinner :style="{'margin-top': '2rem'}" />
+    <ProgressSpinner :style="{ 'margin-top': '2rem' }" />
     <div>{{ t('pleaseBePatient') }}</div>
   </Dialog>
 </template>
@@ -30,9 +35,14 @@ import AppTopbar from './components/AppTopbar.vue';
 import ActivityTracker from './components/ActivityTracker.vue';
 import GlobalErrorMessage from './components/GlobalErrorMessage.vue';
 import { useI18n } from 'vue-i18n';
+import { useStore } from "vuex";
+import { useToast } from "primevue/usetoast";
+import Toast from 'primevue/toast';
+import { GamificationNotification } from '@/types/bazaar-api';
 
 import { useProgress } from '@/service/ProgressService';
 
+
 export default defineComponent({
   name: 'App',
   components: {
@@ -43,9 +53,26 @@ export default defineComponent({
   setup: () => {
     const { t, locale } = useI18n({ useScope: 'global' });
     const isRtl = ref(false);
+    const store = useStore();
+    const toast = useToast();
+    watch(() => store.getters.getNotifications(),
+      (notifications, prevMessages) => {
+        if (notifications) {
+          notifications.forEach((notification: GamificationNotification) => {
+            toast.add({
+            severity: "success",
+            summary: t(notification.type),
+            detail: notification.message,
+            group: "br",
+            life: 6000,
+          });
+          });
+        }
+      }
+    );
     watch(locale, (newLocale) => {
       isRtl.value = (newLocale === 'fa') ? true : false;
-		});
+    });
 
     const { isLoading } = useProgress()
 

diff --git a/src/components/DashboardList.vue b/src/components/DashboardList.vue
@@ -1,17 +1,30 @@
 <template>
+  <template v-if="dashboard && dashboard.isGamified == 'true'">
+    <div class="rank">
+      <h3 style="display: inline-block; white-space: pre">{{ t('level') }} {{ dashboard.status.memberLevel }}: {{ dashboard.status.memberLevelName }}</h3>
+    </div>
+    <div class="parent">
+      <div class="progressBar">
+        <ProgressBar :value="dashboard.status.progress" :show-value="true">
+          {{ dashboard.status.memberPoint }} / {{ dashboard.status.nextLevelPoint }}
+        </ProgressBar>
+      </div>
+
+      <div class="progress">
+        <h4 style="display: inline-block">{{  t('next-rank') }} </h4>
+        <span style="margin-left: 0.5rem"> {{ dashboard.status.nextLevelName }}</span>
+      </div>
+    </div>
+  </template>
+
   <h2>{{ t('dashboard-projects') }}</h2>
 
   <masonry-layout maxcolwidth="400" gap="15" cols="auto">
     <div v-for="project in dashboard.projects" :key="project.id">
       <router-link :to="'/projects/' + project.id">
-        <ProjectCard
-          :id="project.id"
-          :name="project.name"
-          :description="project.description"
-          :creationDate="project.creationDate"
-          :lastActivity="project.lastActivity"
-          :numberOfCategories="project.numberOfCategories"
-          :numberOfFollowers="project.numberOfFollowers"
+        <ProjectCard :id="project.id" :name="project.name" :description="project.description"
+          :creationDate="project.creationDate" :lastActivity="project.lastActivity"
+          :numberOfCategories="project.numberOfCategories" :numberOfFollowers="project.numberOfFollowers"
           :numberOfRequirements="project.numberOfRequirements">
         </ProjectCard>
       </router-link>
@@ -23,14 +36,9 @@
   <masonry-layout maxcolwidth="400" gap="15" cols="auto">
     <div v-for="category in dashboard.categories" :key="category.id">
       <router-link :to="'/projects/' + category.projectId + '/categories/' + category.id">
-        <CategoryCard
-          :id="category.id"
-          :name="category.name"
-          :description="category.description"
-          :creationDate="category.creationDate"
-          :lastActivity="category.lastActivity"
-          :numberOfFollowers="category.numberOfFollowers"
-          :numberOfRequirements="category.numberOfRequirements">
+        <CategoryCard :id="category.id" :name="category.name" :description="category.description"
+          :creationDate="category.creationDate" :lastActivity="category.lastActivity"
+          :numberOfFollowers="category.numberOfFollowers" :numberOfRequirements="category.numberOfRequirements">
         </CategoryCard>
       </router-link>
     </div>
@@ -40,27 +48,32 @@
   <masonry-layout maxcolwidth="400" gap="15" cols="auto">
     <div v-for="requirement in dashboard.requirements" :key="requirement.id">
       <router-link :to="'/projects/' + requirement.projectId + '/categories/' + requirement.categories[0]">
-        <RequirementCard
-          :id="requirement.id"
-          :projectId="requirement.projectId"
-          :categories="requirement.categories"
-          :name="requirement.name"
-          :description="requirement.description"
-          :upVotes="requirement.upVotes"
-          :numberOfComments="requirement.numberOfComments"
-          :numberOfFollowers="requirement.numberOfFollowers"
-          :creator="requirement.creator"
-          :creationDate="requirement.creationDate"
-          :lastActivity="requirement.lastActivity"
-          :userVoted="requirement.userContext.userVoted"
+        <RequirementCard :id="requirement.id" :projectId="requirement.projectId" :categories="requirement.categories"
+          :name="requirement.name" :description="requirement.description" :upVotes="requirement.upVotes"
+          :numberOfComments="requirement.numberOfComments" :numberOfFollowers="requirement.numberOfFollowers"
+          :creator="requirement.creator" :creationDate="requirement.creationDate"
+          :lastActivity="requirement.lastActivity" :userVoted="requirement.userContext.userVoted"
           :isFollower="requirement.userContext.isFollower ? true : false"
-          :isDeveloper="requirement.userContext.isDeveloper ? true : false"
-          :realized="requirement.realized"
-          :brief="true">
+          :isDeveloper="requirement.userContext.isDeveloper ? true : false" :realized="requirement.realized"
+          :brief="true"
+          :tags ="requirement.tags ?? {}"
+          :projectTags="requirement.tags ?? {}">
         </RequirementCard>
       </router-link>
     </div>
   </masonry-layout>
+  <template v-if= "dashboard && dashboard.isGamified == 'true'">
+    <h2>{{ t('dashboard-badges') }}</h2>
+    <masonry-layout maxcolwidth="1000" gap="10" cols="auto">
+      <div class="figs">
+        <figure v-for="badge in dashboard.badges">
+          <img v-bind:src="'data:image/png;base64,' + badge.img" alt="gf_badge" v-tooltip.top="badge.description" />
+          <figcaption>{{ badge.name }}</figcaption>
+        </figure>
+      </div>
+    </masonry-layout>
+  </template>
+
 </template>
 
 <script lang="ts">
@@ -72,7 +85,7 @@ import { useStore } from 'vuex';
 import ProjectCard from '../components/ProjectCard.vue';
 import CategoryCard from '../components/CategoryCard.vue';
 import RequirementCard from '../components/RequirementCard.vue';
-
+import Tooltip from 'primevue/tooltip';
 
 export default defineComponent({
   name: 'Dashboard',
@@ -81,6 +94,9 @@ export default defineComponent({
     CategoryCard,
     RequirementCard,
   },
+  directives: {
+    'tooltip': Tooltip
+  },
   setup: () => {
     const { t } = useI18n({ useScope: 'global' });
     const store = useStore();
@@ -98,4 +114,55 @@ export default defineComponent({
 
 
 <style scoped>
+.figs {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  max-width: 600px;
+}
+figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin:0 0.5rem;
+  margin-top: 0.2rem;
+  width: 8rem;
+  height: 11rem;
+}
+
+figure img {
+  vertical-align: top;
+  width: 6rem;
+  height: 6rem;
+}
+
+figure figcaption {
+  text-align: center;
+  font-weight: bold;
+  word-break: break-word;
+  margin-top: 0.5rem;
+}
+
+.parent {
+  display: grid;
+  grid-template-columns: 1rem auto 1rem auto;
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.progressBar {
+  grid-area: 1 / 2 / 2 / 3;
+  white-space: pre;
+}
+
+.progress {
+  grid-area: 2 / 1 / 3 / 4;
+  text-align: center;
+  white-space: pre;
+  margin-top: -4%;
+}
+
+.p-progressbar {
+  min-width: 5rem;
+  max-width: auto;
+}
 </style>