From 3610d3d0db77ca937f0f65912d5d5997f0c3c30d Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Thu, 24 Nov 2022 13:36:11 +0900
Subject: [PATCH] Add project field components

---
 .../project/ProjectDescriptionField.vue       | 30 ++++++++
 .../components/project/ProjectNameField.vue   | 30 ++++++++
 .../components/project/ProjectTypeField.vue   | 75 +++++++++++++++++++
 3 files changed, 135 insertions(+)
 create mode 100644 frontend/components/project/ProjectDescriptionField.vue
 create mode 100644 frontend/components/project/ProjectNameField.vue
 create mode 100644 frontend/components/project/ProjectTypeField.vue

diff --git a/frontend/components/project/ProjectDescriptionField.vue b/frontend/components/project/ProjectDescriptionField.vue
new file mode 100644
index 00000000..253b37e3
--- /dev/null
+++ b/frontend/components/project/ProjectDescriptionField.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-text-field
+    v-bind="$attrs"
+    :value="value"
+    :rules="descriptionRules($t('rules.descriptionRules'))"
+    :label="$t('generic.description')"
+    required
+    @input="$emit('input', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { descriptionRules } from '@/rules/index'
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+  data() {
+    return {
+      descriptionRules
+    }
+  }
+})
+</script>
diff --git a/frontend/components/project/ProjectNameField.vue b/frontend/components/project/ProjectNameField.vue
new file mode 100644
index 00000000..a3d77702
--- /dev/null
+++ b/frontend/components/project/ProjectNameField.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-text-field
+    v-bind="$attrs"
+    :value="value"
+    :rules="projectNameRules($t('rules.projectNameRules'))"
+    :label="$t('overview.projectName')"
+    required
+    @input="$emit('input', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { projectNameRules } from '@/rules/index'
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+  data() {
+    return {
+      projectNameRules
+    }
+  }
+})
+</script>
diff --git a/frontend/components/project/ProjectTypeField.vue b/frontend/components/project/ProjectTypeField.vue
new file mode 100644
index 00000000..121a8461
--- /dev/null
+++ b/frontend/components/project/ProjectTypeField.vue
@@ -0,0 +1,75 @@
+<template>
+  <v-item-group v-model="selected" mandatory @change="$emit('input', allProjectTypes[selected])">
+    <v-row no-gutters>
+      <v-col v-for="(item, i) in allProjectTypes" :key="i">
+        <v-item v-slot="{ active, toggle }">
+          <v-card class="mb-6 me-6" max-width="350" outlined>
+            <v-img
+              :src="require(`~/assets/images/tasks/${images[i]}`)"
+              height="200"
+              contain
+              @click="toggle"
+            />
+            <v-card-title>
+              <v-icon v-if="active">
+                {{ mdiCheckBold }}
+              </v-icon>
+              {{ translateTypeName(item, $t('overview.projectTypes')) }}
+            </v-card-title>
+          </v-card>
+        </v-item>
+      </v-col>
+    </v-row>
+  </v-item-group>
+</template>
+
+<script lang="ts">
+import { mdiCheckBold } from '@mdi/js'
+import Vue from 'vue'
+import {
+  allProjectTypes,
+  DocumentClassification,
+  ProjectType
+} from '~/domain/models/project/project'
+
+export default Vue.extend({
+  props: {
+    value: {
+      type: String,
+      default: DocumentClassification,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      mdiCheckBold,
+      allProjectTypes,
+      selected: 0
+    }
+  },
+
+  computed: {
+    images() {
+      return [
+        'text_classification.png',
+        'sequence_labeling.png',
+        'seq2seq.png',
+        'intent_detection.png',
+        'image_classification.png',
+        'image_captioning.jpg',
+        'object_detection.jpg',
+        'segmentation.jpg',
+        'speech_to_text.png'
+      ]
+    }
+  },
+
+  methods: {
+    translateTypeName(type: ProjectType, types: any): string {
+      const index = allProjectTypes.indexOf(type)
+      return types[index]
+    }
+  }
+})
+</script>