Merge pull request #60 from spendingjp/feature/50_call_budget_api

osoken · web-flow · commit ff8b90760f1c · 2022-02-28T09:58:02.000+09:00
Feature/50 call budget api
diff --git a/components/molecules/HouseTypeSelection.vue b/components/molecules/HouseTypeSelection.vue
@@ -41,9 +41,20 @@ export default Vue.extend({
       selected: 'SINGLE',
     }
   },
-  mounted() {
-    this.selectHouseType(this.$props.selectedType)
+  computed: {
+    parsedCofogData() {
+      return this.$accessor.regionCofogData.parsedCofogData
+    },
+  },
+  watch: {
+    parsedCofogData(val, old) {
+      if (!('amount' in old) && 'amount' in val) {
+        // @ts-ignore
+        this.selectHouseType(this.$props.selectedType)
+      }
+    },
   },
+  mounted() {},
   methods: {
     /**
      * 世帯種別を選択する
@@ -55,6 +66,7 @@ export default Vue.extend({
       }
       this.$emit('selectd-value', type)
       this.$accessor.dailyBreadData.setHouseType(type)
+      // @ts-ignore
       this.selected = type
     },
   },
diff --git a/components/molecules/IncomeSelector.vue b/components/molecules/IncomeSelector.vue
@@ -133,6 +133,9 @@ export default Vue.extend({
     yearlyTax() {
       return this.$accessor.dailyBreadData.yearlyTax
     },
+    parsedCofogData() {
+      return this.$accessor.regionCofogData.parsedCofogData
+    },
   },
   watch: {
     sliderValue(newVal) {
@@ -142,10 +145,13 @@ export default Vue.extend({
         this.$accessor.dailyBreadData.setIncome(newVal)
       }, 100)
     },
+    parsedCofogData(val, old) {
+      if (!('amount' in old) && 'amount' in val) {
+        this.$accessor.dailyBreadData.setIncome(this.value)
+      }
+    },
   },
-  mounted() {
-    this.$accessor.dailyBreadData.setIncome(this.value)
-  },
+  mounted() {},
 } as ThisTypedComponentOptionsWithRecordProps<Vue, DataType, MethodType, ComputedType, PropType>)
 </script>
 
diff --git a/pages/bubbletree.vue b/pages/bubbletree.vue
@@ -288,8 +288,35 @@ export default Vue.extend({
       title: '使途別予算額',
     }
   },
-  created() {
-    const cofogData: CofogData = this.$repositories('cofogData').Get()
+  async beforeMount() {
+    // TODO: move to middleware
+    const hostname = window.location.hostname
+    try {
+      this.$accessor.regionCofogData.setHostname(hostname)
+    } catch (err) {
+      if (err instanceof SyntaxError) {
+        console.error('Error on beforeMount: ', err)
+        this.$router.push({
+          path: '404.html',
+        })
+        return
+      }
+    }
+
+    try {
+      await this.$accessor.regionCofogData.fetchBudgetListAndWdmmgData()
+    } catch (err) {
+      if (err instanceof ReferenceError) {
+        console.error('Error on beforeMount: ', err)
+        this.$router.push({
+          path: '404.html',
+        })
+      }
+    }
+    const cofogData: CofogData = this.$accessor.regionCofogData.parsedCofogData
+    if (!('amount' in cofogData)) {
+      this.$router.push({ path: '/' })
+    }
     this.circlePackData.childrenData = cofogData.taxList.map((item) => ({
       name: item.cofog.Name,
       value: item.amount.value,
@@ -302,8 +329,7 @@ export default Vue.extend({
         })),
       })),
     }))
-  },
-  mounted() {
+
     const svg = d3.select('#graph')
 
     const viewBox = svg.attr('viewBox')
@@ -331,6 +357,7 @@ export default Vue.extend({
     })
     this.setListText(this.circlePackData, '')
   },
+  mounted() {},
   methods: {
     /**
      * ズーム
diff --git a/pages/index.vue b/pages/index.vue
@@ -17,5 +17,32 @@ export default Vue.extend({
       title: '使途一日あたり',
     }
   },
+  async beforeMount() {
+    // execute only on client side.
+    // TODO: move to middleware
+    const hostname = window.location.hostname
+    try {
+      this.$accessor.regionCofogData.setHostname(hostname)
+    } catch (err) {
+      if (err instanceof SyntaxError) {
+        console.error('Error on beforeMount: ', err)
+        this.$router.push({
+          path: '404.html',
+        })
+        return
+      }
+    }
+
+    try {
+      await this.$accessor.regionCofogData.fetchBudgetListAndWdmmgData()
+    } catch (err) {
+      if (err instanceof ReferenceError) {
+        console.error('Error on beforeMount: ', err)
+        this.$router.push({
+          path: '404.html',
+        })
+      }
+    }
+  },
 })
 </script>
diff --git a/plugins/Axios.ts b/plugins/Axios.ts
@@ -5,6 +5,13 @@ let $axios: NuxtAxiosInstance
 export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
   $axios = axiosInstance
 
+  $axios.defaults.xsrfCookieName = 'csrftoken'
+  $axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN'
+  $axios.defaults.headers = {
+    'Content-Type': 'application/json',
+    'X-Requested-With': 'XMLHttpRequest',
+  }
+
   $axios.onRequest((config) => {
     console.log('request to ' + config.baseURL)
     return config
diff --git a/plugins/api/BudgetList.ts b/plugins/api/BudgetList.ts
@@ -0,0 +1,21 @@
+export type BudgetResponse = {
+  id: string
+  name: string
+  slug: string
+  year: string
+  subtitle: string
+  classificationSystem: string
+  government: string
+  sourceBudget?: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type Budget = BudgetResponse
+
+export type BudgetListResponse = {
+  "budgets": BudgetResponse[]
+  "defaultBudgets": BudgetResponse
+}
+
+export type BudgetList = BudgetListResponse
diff --git a/plugins/applicationServices/BudgetListApiService.ts b/plugins/applicationServices/BudgetListApiService.ts
@@ -0,0 +1,27 @@
+import { NuxtAppOptions } from '@nuxt/types/app'
+import { BudgetList, BudgetListResponse } from '../api/BudgetList'
+
+
+export class BudgetListApiService {
+  private app: NuxtAppOptions
+
+  constructor(app: NuxtAppOptions) {
+    this.app = app
+  }
+
+  /**
+   * APIからBudgetListデータを取得する
+   * @returns BudgetListデータ
+   */
+  public async GetData(): Promise<BudgetList> {
+    try {
+      const repo = this.app.$repositories('budget')
+      const budgetListResponse: BudgetListResponse = await repo.Get()
+
+      return budgetListResponse
+    } catch (e) {
+      console.log(e)
+      throw new Error('APIレスポンスをオブジェクトに変換失敗')
+    }
+  }
+}
diff --git a/plugins/applicationServices/COFOGAPIService.ts b/plugins/applicationServices/COFOGAPIService.ts
@@ -24,25 +24,25 @@ export class COFOGAPIService {
    * APIからCOFOGデータを取得する
    * @returns COFOGデータ
    */
-  public async GetData(): Promise<CofogData> {
+  public async GetData(budgetSlug: string): Promise<CofogData> {
     try {
       const apiResponse: COFOGAPIResponse = await this.app
         .$repositories('cofog')
-        .Get()
+        .Get(budgetSlug)
 
       const taxList: TaxItemLevel1[] = apiResponse.budgets.map((item) => ({
         ...this.ConvertBudget2TaxItem(item),
         children:
           item.children !== null
             ? item.children.map((level2item) => ({
-                ...this.ConvertBudget2TaxItem(level2item),
-                children:
-                  level2item.children !== null
-                    ? level2item.children.map((level3item) =>
-                        this.ConvertBudget2TaxItem(level3item)
-                      )
-                    : [],
-              }))
+              ...this.ConvertBudget2TaxItem(level2item),
+              children:
+                level2item.children !== null
+                  ? level2item.children.map((level3item) =>
+                    this.ConvertBudget2TaxItem(level3item)
+                  )
+                  : [],
+            }))
             : [],
       }))
 
@@ -51,7 +51,7 @@ export class COFOGAPIService {
         taxList,
         year: apiResponse.year,
         governmentName: apiResponse.government.name,
-        budgetName: apiResponse.sourceBudget.name,
+        budgetName: apiResponse.name,
       }
     } catch (e) {
       throw new Error('APIレスポンスをオブジェクトに変換失敗')
diff --git a/plugins/applicationServices/TaxApplicationService.ts b/plugins/applicationServices/TaxApplicationService.ts
@@ -31,8 +31,9 @@ export class TaxApplicationService {
    */
   public GetDailyBreadData(person: Person): DailyBread {
     // COFOGデータを取得
-    const cofogData: CofogData = this.app.$repositories('cofogData').Get()
-    if (cofogData === undefined) {
+    // const cofogData: CofogData = this.app.$repositories('cofogData').Get()
+    const cofogData: CofogData = this.app.$accessor.regionCofogData.parsedCofogData
+    if (!("amount" in cofogData)) {
       throw new Error('COFOGデータなし')
     }
 
@@ -76,8 +77,8 @@ export class TaxApplicationService {
       children:
         'children' in item
           ? item.children.map((child: TaxItemLevel2 | TaxItemLevel3) =>
-              this.ConvertTax2BreadItem(child, service, person, government)
-            )
+            this.ConvertTax2BreadItem(child, service, person, government)
+          )
           : null,
     }
   }
diff --git a/plugins/factories/ApiRepositoryFactory.ts b/plugins/factories/ApiRepositoryFactory.ts
@@ -3,16 +3,19 @@ import { CofogDataRepository } from '../repositories/CofogDataRepository'
 import {
   CofogRepository
 } from '~/plugins/repositories/CofogRepository'
+import { BudgetRepository } from '../repositories/BudgetRepository'
 
 export interface Repositories {
-  cofog: typeof CofogRepository,
+  cofog: typeof CofogRepository
   cofogData: typeof CofogDataRepository
+  budget: typeof BudgetRepository
   // sample: typeof SampleRepository
 }
 
 export const repositories: Repositories = {
   cofog: CofogRepository,
-  cofogData: CofogDataRepository
+  cofogData: CofogDataRepository,
+  budget: BudgetRepository,
   // sample: SampleRepository
 }
 
diff --git a/plugins/repositories/BudgetRepository.ts b/plugins/repositories/BudgetRepository.ts
@@ -0,0 +1,25 @@
+import { NuxtAppOptions } from '@nuxt/types/app'
+import { BudgetListResponse } from '../api/BudgetList'
+
+/**
+ * APIリポジトリ
+ */
+export class BudgetRepository {
+  private app: NuxtAppOptions
+
+  constructor(app: NuxtAppOptions) {
+    this.app = app
+  }
+
+  /**
+   * APIからデータを取得する
+   * @returns オブジェクト変換結果
+   */
+  public async Get(): Promise<BudgetListResponse> {
+    const slug = this.app.$accessor.regionCofogData.governmentSlug
+    const uri = `/governments/${slug}/budgets/` // nuxt.config.tsで設定したbaseUrlに続くURLを指定可能
+    const apiResponse = await this.app.$axios.$get<BudgetListResponse>(uri)
+    return apiResponse
+  }
+
+}
diff --git a/plugins/repositories/CofogDataRepository.ts b/plugins/repositories/CofogDataRepository.ts
@@ -15,8 +15,10 @@ export class CofogDataRepository {
    * 保存されたCOFOGデータを取得する
    * @returns COFOGデータ
    */
-  public Get(): CofogData {
+  public Get(): CofogData | null {
     const storeData = this.app.store?.getters['regionCofogData/regionCofogData']
+    if (!("amount" in storeData)) return null
+
     const data: CofogData = {
       amount: Price.create(storeData.amount._value),
       budgetName: storeData.budgetName,
diff --git a/plugins/repositories/CofogRepository.ts b/plugins/repositories/CofogRepository.ts
@@ -15,15 +15,16 @@ export class CofogRepository {
    * APIからデータを取得する
    * @returns オブジェクト変換結果
    */
-  public async Get(): Promise<COFOGAPIResponse> {
-    const slug = 'tsukuba-shi-cofog2021'
-    const uri = `/wdmmg/${slug}/` // nuxt.config.tsで設定したbaseUrlに続くURLを指定可能
+  public async Get(budgetSlug: string): Promise<COFOGAPIResponse> {
+    const uri = `/wdmmg/${budgetSlug}/` // nuxt.config.tsで設定したbaseUrlに続くURLを指定可能
     const apiResponse = await this.app.$axios.$get<COFOGAPIResponse>(uri)
-    if (this.isValidAPIResponse(apiResponse)) {
-      return apiResponse
-    } else {
-      throw new Error('APIレスポンスが異常')
-    }
+    return apiResponse
+    // FIXME
+    // if (this.isValidAPIResponse(apiResponse)) {
+    //   return apiResponse
+    // } else {
+    //   throw new Error('APIレスポンスが異常')
+    // }
   }
 
   /**
@@ -38,8 +39,7 @@ export class CofogRepository {
       json.government === undefined ||
       json.budgets === undefined ||
       json.sourceBudget === undefined ||
-      json.government.name === undefined ||
-      json.sourceBudget.name === undefined
+      json.government.name === undefined
     ) {
       return false
     }
diff --git a/plugins/repositories/Repository.ts b/plugins/repositories/Repository.ts
@@ -10,6 +10,9 @@ export default (app: NuxtApp, inject: Inject) => {
       case 'cofogData':
         return new (apiRepositoryFactory.get('cofogData'))(app)
 
+      case 'budget':
+        return new (apiRepositoryFactory.get('budget'))(app)
+
       // case 'sample':
       //   return new SampleRepository()
 
diff --git a/store/index.ts b/store/index.ts
diff --git a/store/regionCofogData.ts b/store/regionCofogData.ts
diff --git a/test/api/COFOGAPIService.spec.ts b/test/api/COFOGAPIService.spec.ts
diff --git a/test/repositories/CofogRepository.spec.ts b/test/repositories/CofogRepository.spec.ts
