[@dhealthdapps/frontend] fix(screens): add dynamic values to transact…

…ions page

runtime/backend/src/payout/routes/PayoutsController.ts

@@ -88,8 +88,8 @@ namespace HTTPResponses {
  *
  * @since v0.3.2
  */
-@ApiTags("Activities")
-@Controller("activities")
+@ApiTags("Payouts")
+@Controller("payouts")
 export class PayoutsController {
   /**
    * Constructs an instance of this controller.

runtime/backend/src/users/models/ActivitySchema.ts

@@ -317,10 +317,13 @@ export class Activity extends Transferable<ActivityDTO> {
   public static fillDTO(doc: ActivityDocument, dto: ActivityDTO): ActivityDTO {
     dto.address = doc.address;
     dto.slug = doc.slug;
-    dto.distance = doc.distance;
-    dto.sport = doc.sport;
-    dto.elevationGain = doc.elevationGain;
-    dto.elapsedTime = doc.elapsedTime;
+    if (doc.activityData) {
+      dto.distance = doc.activityData.distance;
+      dto.sport = doc.activityData.sport;
+      dto.elevationGain = doc.activityData.elevation;
+      dto.elapsedTime = doc.activityData.elapsedTime;
+      dto.provider = doc.provider;
+    }
     return dto;
   }
 }

runtime/backend/tests/unit/users/models/ActivitySchema.spec.ts

@@ -9,7 +9,10 @@
  */
 // internal dependencies
 import { ActivityDTO } from "../../../../src/users/models/ActivityDTO";
-import { Activity, ActivityDocument } from "../../../../src/users/models/ActivitySchema";
+import {
+  Activity,
+  ActivityDocument,
+} from "../../../../src/users/models/ActivitySchema";
 
 describe("users/ActivitySchema", () => {
   describe("toQuery()", () => {
@@ -55,10 +58,13 @@ describe("users/ActivitySchema", () => {
       const expectedResult = { address, slug };
 
       // act
-      const result = Activity.fillDTO(activity as ActivityDocument, new ActivityDTO());
+      const result = Activity.fillDTO(
+        activity as ActivityDocument,
+        new ActivityDTO(),
+      );
 
       // assert
       expect(result).toEqual(expectedResult);
     });
   });
-});
+});

runtime/backend/tests/unit/users/routes/ActivitiesController.spec.ts

@@ -10,7 +10,7 @@
 
 // external dependencies
 import { getModelToken } from "@nestjs/mongoose";
-import { Test, TestingModule } from "@nestjs/testing";;
+import { Test, TestingModule } from "@nestjs/testing";
 import { ConfigService } from "@nestjs/config";
 import { JwtService } from "@nestjs/jwt";
 
@@ -35,7 +35,7 @@ describe("users/ActivitiesController", () => {
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
       controllers: [ActivitiesController],
-      providers: [ 
+      providers: [
         AuthService, // requirement from ActivitiesService
         NetworkService, // requirement from AuthService
         AccountsService, // requirement from AuthService
@@ -61,7 +61,7 @@ describe("users/ActivitiesController", () => {
           provide: getModelToken("Activity"),
           useValue: MockModel,
         }, // requirement from ActivitiesService
-      ]
+      ],
     }).compile();
 
     controller = module.get<ActivitiesController>(ActivitiesController);
@@ -83,7 +83,7 @@ describe("users/ActivitiesController", () => {
           pagination: {
             pageNumber: 1,
             pageSize: 100,
-            total: 1
+            total: 1,
           },
           isLastPage: () => true,
         });
@@ -92,13 +92,13 @@ describe("users/ActivitiesController", () => {
         pagination: {
           pageNumber: 1,
           pageSize: 100,
-          total: 1
+          total: 1,
         },
       };
 
       // act
       const result = await (controller as any).find({
-        pageNumber: 1
+        pageNumber: 1,
       });
 
       // assert
@@ -120,7 +120,7 @@ describe("users/ActivitiesController", () => {
           pagination: {
             pageNumber: 1,
             pageSize: 100,
-            total: 1
+            total: 1,
           },
           isLastPage: () => true,
         });
@@ -129,16 +129,16 @@ describe("users/ActivitiesController", () => {
         pagination: {
           pageNumber: 1,
           pageSize: 100,
-          total: 1
+          total: 1,
         },
       };
 
       // act
       const result = await (controller as any).findByUser(
         {},
         {
-          pageNumber: 1
-        }
+          pageNumber: 1,
+        },
       );
 
       // assert

runtime/dapp-frontend-vue/src/components/DappSelect/DappSelect.ts

@@ -32,4 +32,11 @@ export default class DappSelect extends MetaView {
   @Prop({ default: "" }) placeholder?: string;
 
   @Prop({ default: "" }) icon?: string;
+
+  public val = "";
+
+  protected onInput(evt: any) {
+    this.val = evt.value;
+    this.$emit("input", evt.value);
+  }
 }

runtime/dapp-frontend-vue/src/components/DappSelect/DappSelect.vue

@@ -26,6 +26,7 @@
           :placeholder="placeholder"
           :input-id="inputId"
           :clearable="false"
+          @input="onInput"
         >
           <template #open-indicator="{ attributes }">
             <span v-bind="attributes">

runtime/dapp-frontend-vue/src/models/ActivityDTO.ts

@@ -34,4 +34,5 @@ export interface ActivityEntryDTO {
   elapsedTime: number;
   distance: number;
   elevationGain: number;
+  sport: string;
 }

runtime/dapp-frontend-vue/src/services/ActivityService.ts

@@ -51,6 +51,6 @@ export class ActivitiesService extends BackendService {
     );
 
     // responds with a singular configuration object
-    return response.data as ActivityEntryDTO[];
+    return response.data.data as ActivityEntryDTO[];
   }
 }

runtime/dapp-frontend-vue/src/state/store/ActivitiesModule.ts

@@ -9,6 +9,7 @@
  */
 // external dependencies
 import { ActionContext } from "vuex";
+import moment from "moment";
 
 // internal dependencies
 import { RootState } from "./Store";
@@ -93,7 +94,13 @@ export const ActivitiesModule = {
         const service = new ActivitiesService();
         const items = await service.getActivities(address);
 
-        context.commit("setActivities", items);
+        const mappedItems = items.map((item) => ({
+          ...item,
+          elapsedTime: moment(item.elapsedTime).format("HH:mm:ss"),
+          avgPace: (item.elapsedTime / item.distance).toFixed(2),
+        }));
+
+        context.commit("setActivities", mappedItems);
       } catch (err) {
         console.log("fetchActivities", err);
       }

runtime/dapp-frontend-vue/src/views/Activities/Activities.scss

@@ -98,9 +98,16 @@
     border: 1px solid $black;
     border-radius: 16px;
 
+    @include devices(tablet) {
+      overflow-x: scroll;
+    }
+
     .row {
       display: flex;
       justify-content: space-between;
+      @include devices(tablet) {
+        width: 1000px;
+      }
 
       &.titles {
         padding-bottom: 53px;

runtime/dapp-frontend-vue/src/views/Activities/Activities.ts

@@ -46,6 +46,26 @@ export default class Activities extends MetaView {
    */
   public currentUserAddress?: string;
 
+  /**
+   * This property represents current selected filter.
+   *
+   * @access public
+   * @async
+   */
+  public sportFilter = "";
+
+  /**
+   * This method sets current filter value
+   *
+   * @access protected
+   * @param {string}
+   * @returns void
+   * @async
+   */
+  protected handleInput(val: string) {
+    this.sportFilter = val;
+  }
+
   /**
    * This property represents mocked and formatted user balance
    *
@@ -54,7 +74,7 @@ export default class Activities extends MetaView {
    */
   public get balance() {
     // temporary use hardcoded value
-    return `${this.formatAmount(31392355)} $FIT`;
+    return `${this.formatAmount(0)} $FIT`;
   }
 
   /**
@@ -64,7 +84,7 @@ export default class Activities extends MetaView {
    * @returns {string}
    */
   public get dhpAmount() {
-    return `≈${this.formatAmount(31392355)} DHP`;
+    return `≈${this.formatAmount(0)} DHP`;
   }
 
   /**
@@ -82,56 +102,32 @@ export default class Activities extends MetaView {
    *
    * @access public
    */
-  public get mockedItems() {
-    if (this.getActivities?.length) {
-      return this.getActivities;
-    } else {
-      return [
-        {
-          type: "activity",
-          activityType: "Ride",
-          time: "01:47:41",
-          distance: 16.64,
-          gain: 74,
-          pace: 6.28,
-          fit: 0.15,
-        },
-        {
-          type: "activity",
-          activityType: "Swim",
-          time: "00:20:41",
-          distance: 5.14,
-          gain: 20,
-          pace: 1.28,
-          fit: 0.015,
-        },
-        {
-          type: "activity",
-          activityType: "Walk",
-          time: "03:05:20",
-          distance: 52.14,
-          gain: 8,
-          pace: 30.28,
-          fit: 20.02,
-        },
-      ];
-    }
+  public get activityItems() {
+    return this.sportFilter
+      ? this.getActivities?.filter(
+          (item) => item?.sport.toLowerCase() === this.sportFilter
+        )
+      : this.getActivities;
   }
 
   public get mockedSportTypes() {
     return [
       {
-        label: "Walk",
-        value: "walk",
+        label: "All",
+        value: "",
       },
       {
-        label: "Ride",
-        value: "ride",
+        label: "Walk",
+        value: "walk",
       },
       {
-        label: "Swim",
-        value: "swim",
+        label: "Run",
+        value: "run",
       },
+      // {
+      //   label: "Swim",
+      //   value: "swim",
+      // },
     ];
   }
 

runtime/dapp-frontend-vue/src/views/Activities/Activities.vue

@@ -41,9 +41,10 @@
       <div class="dapp-screen-activities__filters">
         <DappSelect
           :placeholder="'Type'"
-          class="type"
           :items="mockedSportTypes"
           :icon="'gift-icon.svg'"
+          @input="handleInput"
+          class="type"
         />
         <!-- <DappSelect class="date" :items="mockedSportTypes" /> -->
       </div>
@@ -59,23 +60,36 @@
         </div>
         <div
           class="row"
-          v-for="(item, index) in mockedItems"
-          :key="index + item.activityType + item.distance"
+          v-for="(item, index) in activityItems"
+          :key="index + item.distance"
         >
-          <div
+          <div class="item">
+            <img
+              v-if="item.sport"
+              :src="getImageUrl(`activities-icons/${item.sport}.svg`)"
+              :alt="item.sport"
+            />
+            {{ item.sport }}
+          </div>
+          <div class="item" v-html="item.elapsedTime" />
+          <div class="item" v-html="item.distance" />
+          <div class="item" v-html="item.elevationGain" />
+          <div class="item" v-html="item.avgPace" />
+          <div class="item" v-html="0" />
+          <!-- <div
             class="item"
             v-for="(key, index) in Object.keys(item).filter(
-              (keyItem) => keyItem !== 'type'
+              (keyItem) => keyItem !== 'type' && keyItem !== 'address'
             )"
             :key="key + index"
           >
             <img
-              v-if="key === 'activityType'"
+              v-if="key === 'sport'"
               :src="getImageUrl(`activities-icons/${item[key]}.svg`)"
               :alt="item[key]"
             />
             {{ item[key] }}
-          </div>
+          </div> -->
         </div>
       </div>
     </div>