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

Author: kaizumaki

pages/center/_centerId/patient/_patientId.vue

@@ -15,60 +15,100 @@
     <div class="patientContainer">
       <div class="patientHeader">
         <div>
-          <span class="patentId">
-            患者メモ：
-            <InputField
-              v-model="memoValue"
-              class="memo"
-              :disabled="isEditDisabled"
-            />
-            <EditIcon
-              v-if="isEditDisabled"
-              class="icon"
-              @click="isEditDisabled = false"
-            />
-            <span v-else>
-              <SaveIcon class="icon" @click="updateMemo" />
-              <CloseIcon class="icon" @click="cancelMemo" />
+          <div>
+            <span class="patentId">
+              患者メモ：
+              <InputField
+                v-model="memoValue"
+                class="memo"
+                :disabled="isEditDisabled"
+              />
+              <EditIcon
+                v-if="isEditDisabled"
+                class="icon"
+                @click="isEditDisabled = false"
+              />
+              <span v-else>
+                <SaveIcon class="icon" @click="updateMemo" />
+                <CloseIcon class="icon" @click="cancelMemo" />
+              </span>
             </span>
-          </span>
+          </div>
+          <div v-if="!patient.memo">患者ID：{{ patient.patientId }}</div>
+          <div>
+            <span class="monitoringTerm">
+              モニタリング開始：{{ getDate(patient.policy_accepted) }}
+            </span>
+            <span
+              v-if="patient.display"
+              class="isDataDisplay"
+              @click="handleDisplayPatient(false)"
+            >
+              患者データを非表示にする
+            </span>
+            <span
+              v-else
+              class="isDataDisplay"
+              @click="handleDisplayPatient(true)"
+            >
+              患者データを表示する
+            </span>
+          </div>
         </div>
-        <div v-if="!patient.memo">患者ID：{{ patient.patientId }}</div>
         <div>
-          <span class="monitoringTerm">
-            モニタリング開始：{{ getDate(patient.policy_accepted) }}
-          </span>
-          <span
-            v-if="patient.display"
-            class="isDataDisplay"
-            @click="handleDisplayPatient(false)"
-          >
-            患者データを非表示にする
-          </span>
-          <span
-            v-else
-            class="isDataDisplay"
-            @click="handleDisplayPatient(true)"
-          >
-            患者データを表示する
+          <span class="download" @click="showModal = true">
+            患者データをダウンロード
           </span>
         </div>
       </div>
       <div class="patientGraphLayout">
         <PatientGraph :patient="patient" />
       </div>
       <SymptomsHistory class="symptomsHistory" :statuses="patient.statuses" />
+      <ModalBase :show="showModal" @close="closeModal">
+        <h2>患者データをダウンロード</h2>
+        <div class="inputContainer">
+          <InputField
+            v-model="zipPassword"
+            type="password"
+            label="パスワードを設定してください"
+            :rule-length="8"
+            required
+            class="passwordField"
+          />
+          <InputField
+            v-model="zipPasswordReEnter"
+            type="password"
+            label="パスワードの再入力"
+            :rule-length="8"
+            required
+            class="passwordField"
+          />
+        </div>
+        <ActionButton
+          :theme="downloadBtnTheme"
+          size="L"
+          :is-submittable="isDownloadable"
+          @click="downloadZip"
+        >
+          ZIPをダウンロード
+        </ActionButton>
+      </ModalBase>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import dayjs from 'dayjs'
+import Papa from 'papaparse'
+import { saveAs } from 'file-saver'
+import * as zip from '@zip.js/zip.js/dist/zip'
 import { Patient } from '@/types/component-interfaces/patient'
 import ActionButton from '@/components/ActionButton.vue'
 import SymptomsHistory from '@/components/SymptomsHistory.vue'
 import InputField from '@/components/InputField.vue'
+import ModalBase from '@/components/ModalBase.vue'
 import EditIcon from '@/static/icon-edit.svg'
 import SaveIcon from '@/static/icon-save.svg'
 import CloseIcon from '@/static/icon-close.svg'
@@ -80,6 +120,7 @@ import { patientsStore } from '@/store'
     ActionButton,
     SymptomsHistory,
     InputField,
+    ModalBase,
     EditIcon,
     SaveIcon,
     CloseIcon,
@@ -88,6 +129,9 @@ import { patientsStore } from '@/store'
 export default class PatientId extends Vue {
   isEditDisabled = true
   currentMemoValue = ''
+  showModal = false
+  zipPassword = ''
+  zipPasswordReEnter = ''
   patient: Patient = {
     patientId: '',
     centerId: '',
@@ -117,6 +161,20 @@ export default class PatientId extends Vue {
     patientsStore.setPatient(value || '')
   }
 
+  get isDownloadable(): boolean {
+    return (
+      this.zipPassword !== '' &&
+      this.zipPasswordReEnter !== '' &&
+      this.zipPassword.length >= 8 &&
+      this.zipPassword.length >= 8 &&
+      this.zipPassword === this.zipPasswordReEnter
+    )
+  }
+
+  get downloadBtnTheme(): string {
+    return this.isDownloadable ? 'primary' : 'disable'
+  }
+
   getDate(date: string): string {
     return dayjs(date).format('M/D (ddd) HH:mm')
   }
@@ -143,6 +201,45 @@ export default class PatientId extends Vue {
         this.patient.display = patient.display
       })
   }
+
+  async downloadZip() {
+    if (this.isDownloadable) {
+      const data = this.patient.statuses.map((item) => {
+        return {
+          記録日時: dayjs(item.created).format('YYYY-MM-DDTHH:mm:ss+09:00'),
+          SpO2: item.SpO2,
+          体温: item.body_temperature,
+          脈拍: item.pulse,
+          せき: item.symptom?.cough ? 1 : 0,
+          たん: item.symptom?.phlegm ? 1 : 0,
+          息苦しさ: item.symptom?.suffocation ? 1 : 0,
+          頭痛: item.symptom?.headache ? 1 : 0,
+          のど痛み: item.symptom?.sore_throat ? 1 : 0,
+          症状備考: item.symptom?.remarks,
+        }
+      })
+      const csv = Papa.unparse(data, {
+        delimiter: ',',
+      })
+      const now = new Date()
+      const formattedNowDate = dayjs(now).format('YYYYMMDD_HHmm')
+      const inputBlob = new Blob([csv], { type: 'text/csv' })
+      const zipWriter = new zip.ZipWriter(new zip.BlobWriter('application/zip'))
+      await zipWriter.add(
+        `${this.patient.phone}_${this.patient.memo}.csv`,
+        new zip.BlobReader(inputBlob),
+        { password: this.zipPassword },
+      )
+      const blob = await zipWriter.close()
+      saveAs(blob, `patient_${formattedNowDate}.zip`)
+    }
+  }
+
+  closeModal(): void {
+    this.showModal = false
+    this.zipPassword = ''
+    this.zipPasswordReEnter = ''
+  }
 }
 </script>
 
@@ -163,6 +260,8 @@ export default class PatientId extends Vue {
   overflow: hidden;
 }
 .patientHeader {
+  display: flex;
+  justify-content: space-between;
   padding: 32px;
 }
 .patentId {
@@ -221,4 +320,13 @@ export default class PatientId extends Vue {
 .symptomsHistory {
   padding: 32px;
 }
+.download {
+  cursor: pointer;
+}
+.inputContainer {
+  margin: 30px 0;
+}
+.passwordField {
+  margin-bottom: 30px;
+}
 </style>