Merge pull request #401 from kaizumaki/feature/issue-398-crypto-zip-csv-download

患者詳細画面に患者データcsvをパスワード付きzipでダウンロードする機能を追加

Author: soutaito

components/InputField.vue

@@ -5,7 +5,7 @@
       <input
         :class="['inputField', { 'inputField-error': showError }]"
         :style="{ fontSize: fontSizeMap.get(fontSize) }"
-        :type="type"
+        :type="definedType"
         :pattern="type === 'number' ? '\\d*' : null"
         :name="name"
         :placeholder="placeholder"
@@ -15,13 +15,22 @@
         :disabled="disabled"
         @input="$emit('input', $event.target.value)"
       />
+      <div v-if="type === 'password'" class="showIcon">
+        <EyeIcon
+          v-if="definedType === 'password'"
+          @click="handleShowPassword(true)"
+        />
+        <EyeOffIcon v-else @click="handleShowPassword(false)" />
+      </div>
     </label>
     <span class="message">{{ errorMessage }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import EyeIcon from '@/static/icon-eye.svg'
+import EyeOffIcon from '@/static/icon-eye-off.svg'
 
 type Rules = {
   [key: string]: {
@@ -33,6 +42,10 @@ type SizeType = 'M' | 'S'
 type FontSizeType = string
 
 export default Vue.extend({
+  components: {
+    EyeIcon,
+    EyeOffIcon,
+  },
   props: {
     label: {
       type: String,
@@ -78,13 +91,19 @@ export default Vue.extend({
       type: String,
       default: '',
     },
+    ruleLength: {
+      type: Number,
+      default: 0,
+    },
   },
   data(): {
     showError: boolean
+    showPassword: boolean
     fontSizeMap: Map<SizeType, FontSizeType>
   } {
     return {
       showError: false,
+      showPassword: false,
       fontSizeMap: new Map([
         ['M', '20px'],
         ['S', '16px'],
@@ -98,6 +117,10 @@ export default Vue.extend({
           isValid: this.ruleRequired,
           message: '必須項目です', // TODO: メッセージを確定させる
         },
+        length: {
+          isValid: this.value.length >= this.ruleLength,
+          message: `${this.ruleLength}文字以上必要です`, // TODO: メッセージを確定させる
+        },
       }
     },
     ruleRequired(): boolean {
@@ -117,6 +140,17 @@ export default Vue.extend({
         (key: string) => !this.rules[key].isValid,
       )
     },
+    definedType(): string {
+      if (this.type === 'password') {
+        if (this.showPassword) {
+          return 'text'
+        } else {
+          return 'password'
+        }
+      } else {
+        return this.type
+      }
+    },
   },
   watch: {
     rules() {
@@ -126,11 +160,17 @@ export default Vue.extend({
       this.$emit('validate', !this.hasErrors)
     },
   },
+  methods: {
+    handleShowPassword(bool: boolean): void {
+      this.showPassword = bool
+    },
+  },
 })
 </script>
 
 <style lang="scss" scoped>
 .inputFieldContainer {
+  position: relative;
   padding: 12px 0;
 }
 .inputField {
@@ -162,4 +202,12 @@ export default Vue.extend({
   font-size: 14px;
   height: 14px;
 }
+.showIcon {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  svg {
+    fill: $gray-3;
+  }
+}
 </style>

nuxt.config.js

@@ -46,7 +46,7 @@ export default {
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [
     {
-      src: '@/plugins/vue-apexchart.ts',
+      src: '@/plugins/vue-apexchart',
       ssr: false,
     },
     {
@@ -102,6 +102,15 @@ export default {
         },
       },
     },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    extend(config, { isDev, isClient }) {
+      if (isClient) {
+        config.module.rules.push({
+          test: /worker\.js$/,
+          use: [{ loader: 'url-loader' }],
+        })
+      }
+    },
   },
 
   publicRuntimeConfig: {

package.json

@@ -18,13 +18,16 @@
     "*.{css,vue}": "yarn stylelint"
   },
   "dependencies": {
+    "@zip.js/zip.js": "^2.3.8",
     "apexcharts": "3.28.1",
     "classlist-polyfill": "1.2.0",
     "core-js": "3.16.4",
     "dayjs": "1.10.6",
+    "file-saver": "^2.0.5",
     "nuxt": "2.15.8",
     "nuxt-property-decorator": "2.9.1",
     "nuxt-svg-loader": "1.2.0",
+    "papaparse": "^5.3.1",
     "promise-polyfill": "8.2.0",
     "vue": "2.6.14",
     "vue-apexcharts": "1.6.2",
@@ -42,6 +45,8 @@
     "@nuxtjs/eslint-module": "3.0.2",
     "@nuxtjs/style-resources": "1.2.1",
     "@nuxtjs/stylelint-module": "4.0.0",
+    "@types/file-saver": "^2.0.3",
+    "@types/papaparse": "^5.2.6",
     "babel-eslint": "10.1.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
@@ -58,6 +63,6 @@
     "stylelint-config-standard": "22.0.0",
     "ts-loader": "8.3.0",
     "typescript": "4.3.5",
-    "webpack": "5.51.1"
+    "url-loader": "^4.1.1"
   }
 }