DocStore bundle: create a vue component for uploading document

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue

@@ -0,0 +1,58 @@
+<template>
+   <a class="btn btn-create" :title="$t(buttonTitle)" @click="openModal">
+      <span>{{ $t(buttonTitle) }}</span>
+   </a>
+
+   <teleport to="body">
+      <div>
+         <modal v-if="modal.showModal"
+            :modalDialogClass="modal.modalDialogClass"
+            @close="modal.showModal = false">
+
+            <template v-slot:header>
+               modal-header
+            </template>
+
+            <template v-slot:body>
+               modal body
+            </template>
+
+            <template v-slot:footer>
+                modal-footer
+            </template>
+
+         </modal>
+      </div>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+
+export default {
+   name: "AddAsyncUpload",
+   components: {
+      Modal
+   },
+   props: [
+     'buttonTitle',
+   ],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         },
+      }
+   },
+   computed: {
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+      },
+   }
+}
+</script>
+
+

src/Bundle/ChillDocStoreBundle/chill.webpack.config.js

@@ -1,4 +1,7 @@
 module.exports = function(encore)
 {
+    encore.addAliases({
+        ChillDocStoreAssets: __dirname + '/Resources/public'
+    });
     encore.addEntry('mod_async_upload', __dirname + '/Resources/public/module/async_upload/index.js');
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -88,6 +88,7 @@
      </div>
 
      <div class="row mb-3">
+      <h6>{{ $t('document_add') }} :</h6>
        <pick-template
            entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
            :id="evaluation.id"
@@ -99,6 +100,18 @@
            <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
          </template>
        </pick-template>
+      <div>
+         <label class="col-sm-4 col-form-label">{{ $t('document_upload') }}</label>
+         <ul class="record_actions">
+            <li>
+               <add-async-upload
+                  :buttonTitle="$t('browse')"
+               >
+               </add-async-upload>
+            </li>
+         </ul>
+      </div>
+
      </div>
    </div>
 </div>
@@ -111,6 +124,7 @@ import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import {buildLink} from 'ChillDocGeneratorAssets/lib/document-generator';
+import AddAsyncUpload from 'ChillDocStoreAssets/vuejs/_components/AddAsyncUpload.vue';
 
 const i18n = {
    messages: {
@@ -129,6 +143,9 @@ const i18n = {
          evaluation_add_a_document: "Ajouter un document",
          evaluation_add: "Ajouter une évaluation",
          Documents: "Documents",
+         document_add: "Générer ou téléverser un document",
+         document_upload: "Téléverser un document",
+         browse: "Ajouter un document"
       }
    }
 };
@@ -139,6 +156,7 @@ export default {
    components: {
       ckeditor: CKEditor.component,
       PickTemplate,
+      AddAsyncUpload
    },
    i18n,
    data() {