Merge pull request #157 from Disfactory/release/2.5.0

Release 2.5.0

README.md

@@ -1,7 +1,11 @@
 # Disfactory frontend
 
+## Links
+
 - Staging Server: https://dev.disfactory.tw (latest `master` branch)
 - Production server: https://disfactory.tw (`production` branch)
+- [JD](./docs/JD.md)
+- [Disfactory_UI_design - Figma](https://www.figma.com/file/nTYqE10obqYSy2x9zY6Oer/Disfactory_UI_design?node-id=244%3A648)
 
 ## Project setup
 

docs/JD.md

@@ -0,0 +1,13 @@
+# Job Description for Disfactory Project
+
+[Disfactory - 違章工廠檢舉系統](https://github.com/Disfactory/frontend/) 徵求各路前端工程師，專案描述如下：
+
+- 前後端分離的 Vue 2~3 專案。會說 2 到 3 是因為雖然用的版本是 Vue 2，但有用到 Vue 3 [composition API](https://github.com/vuejs/composition-api) 的寫法，未來升級會相對容易
+- Vue CLI 開的專案，符合一般習慣
+- 使用 TypeScript 並開啟嚴格模式
+- [OpenLayers](https://openlayers.org/) 來呈現地圖，與國土測繪圖資服務雲用同一套方便作業，如果你換一套也 OK
+- 使用 [Vuetify](https://vuetifyjs.com/) 這套 Material Design 風格的 Vue Framework
+- 專案用 GitHub Actions 設定了 CI (linting & typecheck，目前並無測試) 及 CD ([staging](https://dev.disfactory.tw) & [production](https://disfactory.tw))，也會為每個 PR 自動部屬 Review App (via Netlify)，手動測試驗證相信會非常舒適
+- 並「沒有」用到 Vuex 及 Vue-router 等函式庫，列在這不是優缺點，而是現況
+- 目前還在使用 npm，若有升級到 yarn 的想法，這會是你第一個 PR :stuck_out_tongue_closed_eyes: 
+- 與設計使用 Figma 溝通畫面

package.json

@@ -16,6 +16,7 @@
     "axios": "^0.19.0",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.4.2",
+    "lodash.debounce": "^4.0.8",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-carousel": "^0.18.0",
@@ -27,6 +28,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/vue": "^5.6.1",
     "@types/jest": "^24.9.1",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/ol": "^6.4.2",
     "@typescript-eslint/eslint-plugin": "^2.8.0",
     "@typescript-eslint/parser": "^3.10.1",
@@ -47,7 +49,6 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-testing-library": "^3.10.1",
     "eslint-plugin-vue": "^6.0.1",
-    "fibers": "^4.0.3",
     "lint-staged": "^9.4.3",
     "ol": "^6.5.0",
     "ol-mapbox-style": "^6.3.1",

src/components/FactoryDetailPage.vue

@@ -76,6 +76,7 @@
           </template>
 
           <hr v-if="full || $vuetify.breakpoint.mdAndUp">
+
           <v-btn text depressed elevation="0" :ripple="false" color="#697F01" class="m-0 mb-0 px-0 v-btn-plain" @click="expandFactoryDetail" v-if="!full && !$vuetify.breakpoint.mdAndUp">
             顯示更多資訊
             &nbsp;
@@ -104,6 +105,14 @@
               <p class="color-gray-light mb-1">{{ desc.date }}</p>
               <p style="line-height: 24px;">{{ desc.others }}</p>
             </div>
+
+            <template v-if="factoryFollowups.length > 0">
+              <h3 class="mb-1">政府回應</h3>
+
+              <div v-for="(followup, index) in factoryFollowups" class="mt-2" :key="index" style="font-size: 14px">
+                <p style="line-height: 24px;">{{ followup.note }}</p>
+              </div>
+            </template>
           </div>
         </div>
       </div>
@@ -174,6 +183,14 @@ export default createComponent({
       }
     })
 
+    const factoryFollowups = computed(() => {
+      if (appState.factoryData) {
+        return appState.factoryData.follow_ups_for_user
+      } else {
+        return []
+      }
+    })
+
     const factoryStatusText = computed(() => {
       if (typeof factoryStatus.value !== 'undefined') {
         const factoryDisplayStatus = getDisplayStatusText(factoryStatus.value)
@@ -311,6 +328,7 @@ export default createComponent({
         })()
       }
     })
+
     const pastDescriptions = computed(() => {
       return reportRecords.value.map(record => {
         const date = new Date(record.created_at)
@@ -352,6 +370,7 @@ export default createComponent({
       factoryType,
       factoryName,
       factoryAddressAndLandcode,
+      factoryFollowups,
       source,
       pastDescriptions,
       lastUpdatedAt,

src/components/Map.vue

@@ -28,6 +28,7 @@
 
 <script lang="ts">
 import { createComponent, onMounted, onUnmounted, ref, inject } from '@vue/composition-api'
+import debounce from 'lodash.debounce'
 
 import AppButton from '@/components/AppButton.vue'
 import AppNavbar from '@/components/AppNavbar.vue'
@@ -138,8 +139,17 @@ export default createComponent({
         resizeMap()
       }
 
+      let mapController: MapFactoryController | null = null
+
+      const loadNewFactories = debounce(async function (range: number, longitude: number, latitude: number) {
+        const factories = await getFactories(range, longitude, latitude)
+        if (Array.isArray(factories)) {
+          mapController!.addFactories(factories)
+        }
+      }, 500)
+
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const mapController = initializeMap(root.value!, {
+      mapController = initializeMap(root.value!, {
         onMoved: async function ([longitude, latitude, range, zoom], canPlaceFactory) {
           permalink.lat(latitude)
           permalink.lng(longitude)
@@ -151,10 +161,7 @@ export default createComponent({
 
           event('moveMap')
           try {
-            const factories = await getFactories(range, longitude, latitude)
-            if (Array.isArray(factories)) {
-              mapController.addFactories(factories)
-            }
+            await loadNewFactories(range, longitude, latitude)
           } catch (e) {
             // TODO: handle here
           }
@@ -178,7 +185,7 @@ export default createComponent({
       moveToSharedFactory(mapController, window.location, (factoryId) => {
         const factory = mapControllerRef?.value?.getFactory(factoryId)
         if (factory) {
-          const feature = mapController.getFactoriesLayerForStatus(getFactoryStatus(factory)).getFeatureById(factoryId)
+          const feature = mapController!.getFactoriesLayerForStatus(getFactoryStatus(factory)).getFeatureById(factoryId)
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
           onClickFactoryFeature([0, 0], feature as Feature)
         }

src/lib/map.ts

@@ -126,17 +126,26 @@ export class MapFactoryController {
   }
 
   getFactoriesLayerForStatus (factoryStatus: FactoryDisplayStatusType) {
+    let CLUSTER_DISTANCE = 50;
     if (!this._factoriesLayerStatusMap[`${factoryStatus}`]) {
       this._factoriesLayerStatusMap[`${factoryStatus}`] = new VectorSource({ features: [] })
       const clusterSource = new Cluster({
-        distance: 50,
+        distance: CLUSTER_DISTANCE,
         source: this._factoriesLayerStatusMap[`${factoryStatus}`]
       })
       const styleCache = {}
       const vectorLayer = new VectorLayer({
         source: clusterSource,
         zIndex: 3,
-        style: function (feature) {
+        style: (feature,resolution) => {
+          let zoom = this.mapInstance.map.getView().getZoom()!;
+
+          if (zoom > 16) {
+            if (clusterSource.getDistance() !== 0) clusterSource.setDistance(0);
+          } else {
+            if (clusterSource.getDistance() !== CLUSTER_DISTANCE) clusterSource.setDistance(CLUSTER_DISTANCE);
+          }
+
           const features = feature.get('features')
           if (features.length > 1) {
             const size = features.length
@@ -316,7 +325,7 @@ const getBaseLayer = (type: BASE_MAP, wmtsTileGrid: WMTSTileGrid) => {
       source: new VectorTileSource({
         attributions: '<a href="https://protomaps.com" target="_blank">Protomaps</a> © <a href="https://www.openstreetmap.org" target="_blank"> OpenStreetMap</a>',
         format: new MVT(),
-        url: 'https://staging.disfactory.tw/tiles/{z}/{x}/{y}.pbf',
+        url: process.env.VUE_APP_PROTOMAP_SOURCE_URL || 'https://api.disfactory.tw/tiles/{z}/{x}/{y}.pbf',
         maxZoom: 14
       }),
       opacity: 1,
@@ -473,6 +482,11 @@ export class OLMap {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     map.on('moveend', move)
 
+    // https://stackoverflow.com/a/54441119
+    // After any layer is loaded, check onMoved event for the first time.
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    map.on('rendercomplete', move)
+
     map.on('zoomend', () => {
       const view = map.getView()
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/types.ts

@@ -104,7 +104,11 @@ export type FactoryData = {
   data_complete: boolean,
   before_release: boolean,
   document_display_status: DocumentDisplayStatus | null,
-  feature?: Feature
+  feature?: Feature,
+  follow_ups_for_user: {
+    note: string,
+    created_at: string
+  }[]
 }
 
 export type FactoriesResponse = Array<FactoryData>