From 58ba2b2c9d680e7effff034c4b97c1272dc897ee Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 21 Feb 2022 10:46:23 +0900
Subject: [PATCH] Add FormImport component

---
 frontend/components/label/FormImport.vue | 82 ++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 frontend/components/label/FormImport.vue

diff --git a/frontend/components/label/FormImport.vue b/frontend/components/label/FormImport.vue
new file mode 100644
index 00000000..aa1d2e5a
--- /dev/null
+++ b/frontend/components/label/FormImport.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-card>
+    <v-card-title v-text="$t('labels.importLabels')" />
+    <v-card-text>
+      <v-form
+        ref="form"
+        v-model="valid"
+      >
+        <h3>{{ $t('labels.importMessage1') }}</h3>
+        <v-sheet
+          v-if="exampleFormat"
+          :dark="!$vuetify.theme.dark"
+          :light="$vuetify.theme.dark"
+          class="mb-5 pa-5"
+        >
+          <pre>{{ exampleFormat }}</pre>
+        </v-sheet>
+        <v-file-input
+          v-model="file"
+          accept=".json"
+          :error-messages="errorMessage"
+          :label="$t('labels.filePlaceholder')"
+          :rules="uploadSingleFileRules($t('rules.uploadFileRules'))"
+          outlined
+          prepend-icon=""
+          @change="$emit('clear')"
+          @click:clear="$emit('clear')"
+        />
+        <v-btn
+          :disabled="!valid"
+          color="primary"
+          class="text-capitalize"
+          @click="$emit('upload', file)"
+        >
+          Import
+        </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { uploadSingleFileRules } from '@/rules/index'
+
+export default Vue.extend({
+  props: {
+    errorMessage: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      file: null,
+      valid: false,
+      uploadSingleFileRules,
+    }
+  },
+
+  computed: {
+    exampleFormat() {
+      const data = [
+        {
+          text: 'Dog',
+          suffix_key: 'a',
+          background_color: '#FF0000',
+          text_color: '#ffffff'
+        },
+        {
+          text: 'Cat',
+          suffix_key: 'c',
+          background_color: '#FF0000',
+          text_color: '#ffffff'
+        }
+      ]
+      return JSON.stringify(data, null, 4)
+    }
+  }
+})
+</script>