Merge pull request #13 from beohoang98/feature/partner-management

Feature/partner management

.circleci/config.yml

@@ -71,7 +71,7 @@ jobs:
                 name: test
                 command: yarn test:cov
             - store_test_results:
-                path: ./server/coverage
+                path: ./packages/server/coverage
     build_client:
         executor: node
         steps:

packages/client/package.json

@@ -6,7 +6,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit --passWithNoTests",
     "lint": "vue-cli-service lint --fix",
-    "format": "prettier --write --ext .js,.ts,.vue"
+    "format": "prettier --write \"src/**/*.{ts,vue,js}\""
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.29",

packages/client/src/admins/components/Partner/PartnerDetailModal.vue

@@ -0,0 +1,171 @@
+<template>
+    <el-dialog
+        close-on-press-escape
+        :close-on-click-modal="false"
+        :visible="localVisible"
+        @close="handleOnClose"
+        @closed="handleClosed"
+        fullscreen
+        modal-fade
+        v-loading="isLoading || !isLoaded"
+    >
+        <template #title>
+            <el-page-header
+                title="Back"
+                content="Details"
+                @back="handleOnClose"
+            />
+        </template>
+        <el-tabs tab-position="top">
+            <el-tab-pane label="Info">
+                <el-form
+                    ref="form"
+                    label-position="left"
+                    :model="info"
+                    :rules="editInfoRules"
+                >
+                    <el-form-item label="Public Key" prop="publicKey">
+                        <el-input
+                            readonly
+                            type="password"
+                            show-password
+                            v-model="info.publicKey"
+                        />
+                    </el-form-item>
+                    <el-collapse>
+                        <el-collapse-item title="More">
+                            <el-form-item
+                                label="New Password"
+                                prop="newPassword"
+                            >
+                                <el-input
+                                    readonly
+                                    show-password
+                                    type="password"
+                                    v-model="info.newPassword"
+                                />
+                            </el-form-item>
+                        </el-collapse-item>
+                    </el-collapse>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="Transactions">
+                <el-row>
+                    <el-col>
+                        <el-card>
+                            <template #header>
+                                <h2>Total transaction</h2>
+                            </template>
+                            <p>{{ stat.transCount }}</p>
+                        </el-card>
+                    </el-col>
+                    <el-col>
+                        <el-card>
+                            <template #header>
+                                <h2>Total amount</h2>
+                            </template>
+                            <p>{{ stat.transSum | vndFormat }}</p>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                <el-divider />
+                <el-table :data="transactions"></el-table>
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Ref, Vue } from "vue-property-decorator";
+import { Form } from "element-ui";
+import { axiosInstance } from "@/utils/axios";
+
+@Component({
+    name: "partner-detail-modal",
+})
+export default class PartnerDetailModal extends Vue {
+    @Ref("form") form!: Form;
+
+    localVisible = false;
+    isLoading = false;
+    isLoaded = false;
+
+    transactions: Transaction[] = [];
+
+    info = {
+        publicKey: "",
+        newPassword: "",
+    };
+    editInfoRules = {
+        publicKey: [{ type: "string", required: false }],
+        newPassword: [{ type: "string", min: 6, required: false }],
+    };
+    stat = {
+        transCount: 0,
+        transSum: 0,
+    };
+
+    handleOnClose() {
+        this.form.resetFields();
+        this.localVisible = false;
+    }
+    handleClosed() {
+        this.isLoaded = false;
+        this.$router.replace({
+            name: "partner-management",
+        });
+    }
+
+    get partnerId() {
+        return this.$route.params.id;
+    }
+
+    fetchTransaction() {
+        axiosInstance
+            .get<Paginate<PartnerTransLog>>(
+                `/admin/partner/${this.partnerId}/transactions`,
+            )
+            .then(({ data }) => {
+                this.transactions = data.items.map((item) => item.transaction);
+            });
+
+        axiosInstance
+            .get(`/admin/partner/${this.partnerId}/transaction-total`)
+            .then(({ data }) => {
+                console.debug(data);
+                this.stat = data[0];
+            });
+    }
+
+    fetchInfo() {
+        this.isLoading = true;
+        axiosInstance
+            .get<Partner>(`/admin/partner/${this.partnerId}`)
+            .then(({ data }) => {
+                this.info = {
+                    publicKey: data.publicKey,
+                    newPassword: "",
+                };
+            })
+            .catch((error) => {
+                this.$notify({
+                    title: "Error",
+                    type: "error",
+                    message: error + "",
+                });
+            })
+            .finally(() => {
+                this.isLoading = false;
+                this.isLoaded = true;
+            });
+    }
+
+    mounted() {
+        this.localVisible = true;
+        this.fetchInfo();
+        this.fetchTransaction();
+    }
+}
+</script>
+
+<style lang="scss"></style>

packages/client/src/admins/pages/PartnerManagement.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="partner-management">
+        <el-table v-loading="isLoading" stripe border fit :data="partners">
+            <el-table-column label="id" prop="id" />
+            <el-table-column label="type" prop="type" />
+            <el-table-column label="actions" align="right">
+                <template slot-scope="{ row }">
+                    <el-button type="link" @click="() => showDetail(row)"
+                        >Details</el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <router-view />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { axiosInstance } from "@/utils/axios";
+
+@Component({
+    name: "admin-partner-management",
+})
+export default class AdminPartnerManagement extends Vue {
+    partners: Partner[] = [];
+    isLoading = false;
+
+    async fetch() {
+        this.isLoading = true;
+        try {
+            const { data } = await axiosInstance.get<Partner[]>(
+                "/admin/partner",
+            );
+            this.partners = data;
+        } catch (e) {
+            this.$notify({
+                type: "error",
+                title: "Error",
+                message: e?.response?.data?.message || e + "",
+            });
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    showDetail(row: Partner) {
+        this.$router.push({
+            name: "partner-detail",
+            params: {
+                id: row.id,
+            },
+        });
+    }
+
+    mounted() {
+        this.fetch();
+    }
+}
+</script>
+
+<style lang="scss"></style>

packages/client/src/components/History/History.vue

@@ -33,7 +33,6 @@ import {
     Icon,
     Input,
     InputNumber,
-    Message,
     Option,
     Popconfirm,
     Select,

packages/client/src/override.d.ts

@@ -1,5 +1,3 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
-import Vue from "vue";
 import { AxiosRequestConfig } from "axios";
 
 declare module "vue/types/vue" {

packages/client/src/router/admin.ts

@@ -49,10 +49,20 @@ const routes: Array<RouteConfig> = [
                         path: "partner",
                         name: "partner-management",
                         component: () =>
-                            import("@/admins/pages/UserManagement.vue"),
+                            import("@/admins/pages/PartnerManagement.vue"),
                         meta: {
                             role: ["ADMIN"],
                         },
+                        children: [
+                            {
+                                path: ":id",
+                                name: "partner-detail",
+                                component: () =>
+                                    import(
+                                        "@/admins/components/Partner/PartnerDetailModal.vue"
+                                    ),
+                            },
+                        ],
                     },
                 ],
             },

packages/client/src/router/index.ts

@@ -3,8 +3,7 @@ import VueRouter, { RouteConfig } from "vue-router";
 import AppLoad from "@/container/AppLoad.vue";
 import { Component } from "vue-property-decorator";
 import AppStore from "@/store";
-import AppLayout from "@/container/AppLayout.vue";
-import NotFound from "../views/NotFound.vue";
+import NotFound from "@/views/NotFound.vue";
 
 Vue.use(VueRouter);
 Component.registerHooks(["beforeRouteUpdate"]);

packages/client/src/types/partner.d.ts

@@ -0,0 +1,12 @@
+declare interface Partner {
+    id: string;
+    publicKey: string;
+}
+
+declare interface PartnerTransLog {
+    id: string;
+    client: Partner;
+    transaction: Transaction;
+    createdAt: Date;
+    updatedAt: Date;
+}

packages/client/src/types/transaction.d.ts

@@ -1,4 +1,4 @@
-declare class Transaction {
+declare interface Transaction {
     id: number;
     note: string;
     sourceAccount: string;
@@ -7,4 +7,7 @@ declare class Transaction {
     bankType: string;
     isDebtPay: boolean;
     isMyBankSend: boolean;
+
+    createdAt: Date;
+    updatedAt: Date;
 }

packages/client/src/views/Home.vue

@@ -6,8 +6,8 @@
 
 <script>
 import Vue from "vue";
-import AppPaymentAccount from "@/components/BankAccountList/PaymentAccount";
-import { Aside, Container, Main } from "element-ui";
+import AppPaymentAccount from "@/components/BankAccountList/PaymentAccount.vue";
+import { Aside, Main } from "element-ui";
 
 Vue.use(Aside);
 Vue.use(Main);

packages/server/package.json

@@ -100,6 +100,7 @@
     },
     "lint-staged": {
         "*.{js,ts}": [
+            "yarn format",
             "yarn lint"
         ]
     }