Init TrainModal component

src/components/Repository.vue

@@ -419,6 +419,12 @@
         </div>
       </div>
     </b-modal>
+    <train-modal
+      v-if="repository"
+      :open.sync="trainModalOpen"
+      :ready-for-train="repository.ready_for_train"
+      :requirements-to-train="repository.requirements_to_train"
+      :languages-ready-for-train="repository.languages_ready_for_train" />
     <analyze-text-drawer
       v-if="repository && authenticated"
       :owner-nickname="repository.owner__nickname"
@@ -449,6 +455,7 @@ import AuthorizationsList from '@/components/repository/AuthorizationsList';
 import RequestAuthorizationForm from '@/components/repository/RequestAuthorizationForm';
 import AuthorizationRequestsList from '@/components/repository/AuthorizationRequestsList';
 import IntentsAndLabelsList from '@/components/repository/IntentsAndLabelsList';
+import TrainModal from '@/components/repository/TrainModal';
 
 
 const components = {
@@ -471,6 +478,7 @@ const components = {
   RequestAuthorizationForm,
   AuthorizationRequestsList,
   IntentsAndLabelsList,
+  TrainModal,
 };
 
 export default {
@@ -492,6 +500,7 @@ export default {
       toLanguage: null,
       requestAuthorizationModal: false,
       managerAuthorizationModalOpen: false,
+      trainModalOpen: true,
     };
   },
   computed: {

src/components/repository/TrainModal.vue

@@ -0,0 +1,82 @@
+<template>
+  <bh-modal :open.sync="openValue">
+    <div class="train-modal">
+      <h1 class="title is-3">Train Status</h1>
+      <div
+        v-for="(requirements, lang) in requirementsToTrain"
+        :key="lang">
+        <table class="table is-fullwidth">
+          <thead>
+            <tr>
+              <th>{{ lang | languageVerbose }} is not ready to train</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(requirement, i) in requirements"
+              :key="i">
+              <td>{{ requirement }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="train-modal__buttons">
+        <bh-button
+          :disabled="!readyForTrain"
+          primary>
+          <bh-icon />
+          <span>Train</span>
+        </bh-button>
+      </div>
+    </div>
+  </bh-modal>
+</template>
+
+<script>
+export default {
+  name: 'TrainModal',
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    readyForTrain: {
+      type: Boolean,
+      required: true,
+    },
+    requirementsToTrain: {
+      type: Object,
+      required: true,
+    },
+    languagesReadyForTrain: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      openValue: this.open,
+    };
+  },
+  watch: {
+    openValue(value) {
+      this.$emit('update:open', value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.train-modal {
+  padding: .5rem;
+
+  &__buttons {
+    margin-top: 1rem;
+    text-align: right;
+
+    > * {
+      display: inline-block;
+    }
+  }
+}
+</style>