complete frontend

openScoringFrontend/package.json

@@ -12,7 +12,8 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.6.0"
+    "vuetify": "^2.6.0",
+    "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

openScoringFrontend/src/App.vue

@@ -1,11 +1,10 @@
 <template>
   <div id="app">
     <v-app id="inspire">
-      <div id="nav">
-          <router-link to="/">Оформление кредита</router-link> |
-          <router-link to="/permissionRequest">Авторизация</router-link> |
-        <router-link to="/sentRequests">Отправленные заявки</router-link> |
-          <router-link to="/recommendations">Рекомендации</router-link>
+      <div id="nav" style="font-size: 20px;">
+        <router-link to="/permissionRequest">Авторизация</router-link> |
+        <router-link to="/">Оформление кредита</router-link> |
+        <router-link to="/sentRequests">Отправленные заявки</router-link>
       </div>
       <router-view/>
     </v-app>

openScoringFrontend/src/components/Card.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <v-col class="px-0">
+      <v-slider
+        :messages="'от ' + data.amountLowerBound + ' до ' + data.amountUpperBound"
+        label="Сумма кредита"
+        class="align-center"
+        v-model="sum"
+        :max="data.amountUpperBound"
+        :min="data.amountLowerBound"
+        :step="10000"
+      >
+        <template v-slot:append>
+          <v-text-field
+            v-model="sum"
+            class="mt-0 pt-0"
+            hide-details
+            single-line
+            type="number"
+            style="width: 90px"
+          ></v-text-field>
+        </template>
+      </v-slider>
+    </v-col>
+    <v-col class="px-0">
+      <v-slider
+        :messages="'от ' + data.timeLimitMonthLower.value + ' месяцев до ' + data.timeLimitMonthUpper.value + ' месяцев'"
+        label="Срок кредита"
+        class="align-center"
+        v-model="periodInMonth"
+        :max="12"
+        :min="data.timeLimitMonthLower.value"
+        :step="1"
+      >
+        <template v-slot:append>
+          <v-text-field
+            v-model="periodInMonth"
+            class="mt-0 pt-0"
+            hide-details
+            single-line
+            type="number"
+            style="width: 90px"
+          ></v-text-field>
+        </template>
+      </v-slider>
+    </v-col>
+    <v-col class="px-0">
+      Ставка: {{ data.percentage }}%
+      Ежемесячный платеж: {{ Math.round(sum * (creditBase(data)* Math.pow((1+ creditBase(data)), periodInMonth)/(Math.pow((1+ creditBase(data)), periodInMonth)-1))) + ' ' + application.currency }}
+    </v-col>
+  </div>
+</template>
+<script>
+export default {
+  props: ['data', 'application'],
+  data: () => ({
+    periodInMonth: 0,
+    sum: 0,
+  }),
+  methods: {
+    creditBase(data) {
+      return data.percentage / this.periodInMonth / 100
+    },
+  }
+}
+</script>

openScoringFrontend/src/components/SentApplication.vue

@@ -0,0 +1,85 @@
+<template>
+<div>
+  <v-toolbar color="indigo" dark>
+    <!-- <v-app-bar-nav-icon></v-app-bar-nav-icon> -->
+
+    <v-toolbar-title
+    >
+    {{'Сумма: ' + application.sum +' ' + application.currency}}
+    </v-toolbar-title>
+    <v-spacer></v-spacer>
+
+    <!-- <v-btn icon>
+    <v-icon>mdi-magnify</v-icon>
+  </v-btn> -->
+  </v-toolbar>
+  <v-card-text class="text-left">
+    {{ 'Срок: ' + application.periodInMonth + ' месяцев' }}
+  </v-card-text>
+
+  <v-card-actions>
+    <v-spacer></v-spacer>
+  <v-dialog
+    v-model="dialog"
+    persistent
+    max-width="900"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn icon v-on="on" v-bind="attrs" @click="openDetails(application.id)">
+    <v-icon>mdi-clipboard-text-outline</v-icon>
+  </v-btn>
+    </template>
+    <v-card>
+      <template v-if="dialogData && dialogData.length">
+        <v-card-title class="text-h4">
+          Предложения
+        </v-card-title>
+
+        <v-card v-for="(data, i) in dialogData" :key="application.id + i" class="ma-5 pa-3">
+              <card :data="data" :application="application"></card>
+        </v-card>
+      </template>
+      <v-card-title v-else class="text-h5">
+          Для данной заявки предложения отсутствуют
+        </v-card-title>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          text
+          @click="dialog = false"
+        >
+          Закрыть
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <v-btn icon @click="removeApplication(application.id)">
+    <v-icon>mdi-delete</v-icon>
+  </v-btn>
+  </v-card-actions>
+</div>
+</template>
+<script>
+import Card from '../components/Card.vue';
+import RequestService from "@/services/RequestService";
+export default {
+  components: { Card },
+  props: ['application'],
+  data: () =>({
+    dialog: false,
+    dialogData: [],
+  }),
+  
+  methods: {
+
+    async openDetails(id) {
+      this.dialogData = await RequestService.loadApplicationDetails(id);
+    },
+
+    async removeApplication(id) {
+      this.$emit('removeApplication', id)
+    }
+  }
+}
+</script>

openScoringFrontend/src/main.js

@@ -2,10 +2,12 @@ import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import router from './router'
+import store from './store';
 
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   vuetify,
   router,
   render: h => h(App)

openScoringFrontend/src/services/RequestService.js

@@ -12,9 +12,9 @@ export default class RequestService {
   static async loadAccountsAsync() {
     try {
       const result = await axios.get("/accounts", {
-        headers: {
-          ...this.config,
-        },
+        // headers: {
+        //   ...this.config,
+        // },
       });
 
       if (result.data) {
@@ -25,4 +25,57 @@ export default class RequestService {
       console.log(e);
     }
   }
+
+  static async loadApplication(id) {
+    try {
+      const result = await axios.get(`/creditapplication/${id}`, {
+      });
+
+      if (result.data) {
+        console.log(result.data)
+        return result.data;
+      }
+      console.log('Unknown error')
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  static async removeApplication(id) {
+    try {
+      const result = await axios.delete(`/creditapplication/${id}`, {
+      });
+
+      if (result.status === 200) {
+        return true;
+      }
+      console.log('Unknown error')
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  static async loadApplicationDetails(id) {
+    try {
+      const result = await axios.get(`/creditapplication/result/${id}`, {
+      });
+
+      if (result.data) {
+        return result.data;
+      }
+      console.log('Unknown error')
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  static async createCreditApplication(body) {
+      const result = await axios.post("/creditapplication", {
+        ...body
+      });
+
+      if (result.data) {
+        return result.data
+      }
+  }
 }

openScoringFrontend/src/store/index.js

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    sentApplications: [],
+  },
+
+  getters: {
+    sentApplications({ sentApplications }) {
+      return sentApplications;
+    },
+  },
+
+  mutations: {
+    ADD_APPLICATION(state, { id }) {
+      state.sentApplications = [...state.sentApplications, id];
+    },
+
+    REMOVE_APPLICATION(state, { id }) {
+      state.sentApplications = state.sentApplications.filter(x => x !==id);
+    },
+  },
+
+  actions: {
+    addApplication({ commit }, { applicationId }) {
+      commit({
+        type: 'ADD_APPLICATION',
+        id: applicationId,
+      });
+    },
+
+    removeApplication({ commit }, { applicationId }) {
+      commit({
+        type: 'REMOVE_APPLICATION',
+        id: applicationId,
+      });
+    }
+  }
+});