FIX [review] process review and make minor visual changes

Fixed: Do not send a confirmation message when the accompanying period is back to CONFIRM state

Closes #108

See merge request Chill-Projet/chill-bundles!549

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue

@@ -1,52 +1,90 @@
 <template>
-  <a :class="props.classes" @click="download_and_open($event)">
+    <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open($event)">
         <i class="fa fa-download"></i>
         Télécharger
     </a>
+    <a v-else :class="props.classes" target="_blank" :type="props.storedObject.type" :download="buildDocumentName()" :href="state.href_url" ref="open_button">
+        <i class="fa fa-external-link"></i>
+        Ouvrir
+    </a>
 </template>
 
 <script lang="ts" setup>
-import {reactive} from "vue";
+import {reactive, ref, nextTick, onMounted} from "vue";
 import {build_download_info_link, download_and_decrypt_doc} from "./helpers";
 import mime from "mime";
 import {StoredObject} from "../../types";
 
 interface DownloadButtonConfig {
     storedObject: StoredObject,
-  classes: {[k: string]: boolean},
+    classes: { [k: string]: boolean },
     filename?: string,
 }
 
 interface DownloadButtonState {
-  is_ready: boolean
+    is_ready: boolean,
+    is_running: boolean,
+    href_url: string,
 }
 
 const props = defineProps<DownloadButtonConfig>();
-const state: DownloadButtonState = reactive({is_ready: false});
+const state: DownloadButtonState = reactive({is_ready: false, is_running: false, href_url: "#"});
+
+const open_button = ref<HTMLAnchorElement | null>(null);
+
+function buildDocumentName(): string {
+    const document_name = props.filename || 'document';
+    const ext = mime.getExtension(props.storedObject.type);
+
+    if (null !== ext) {
+        return document_name + '.' + ext;
+    }
+
+    return document_name;
+}
 
 async function download_and_open(event: Event): Promise<void> {
     const button = event.target as HTMLAnchorElement;
 
-  if (!state.is_ready) {
+    if (state.is_running) {
-    event.preventDefault();
+        console.log('state is running, aborting');
+        return;
+    }
+
+    state.is_running = true;
+
+    if (state.is_ready) {
+        console.log('state is ready. This should not happens');
+        return;
+    }
+
     const urlInfo = build_download_info_link(props.storedObject.filename);
+    let raw;
 
-    const raw = await download_and_decrypt_doc(urlInfo, props.storedObject.keyInfos, new Uint8Array(props.storedObject.iv));
+    try {
-
+        raw = await download_and_decrypt_doc(urlInfo, props.storedObject.keyInfos, new Uint8Array(props.storedObject.iv));
-    button.href = window.URL.createObjectURL(raw);
+    } catch (e) {
-    button.target = '_blank';
+        console.error("error while downloading and decrypting document");
-    button.type = props.storedObject.type;
+        console.error(e);
-
+        throw e;
-    button.download = props.filename || 'document';
-
-    const ext = mime.getExtension(props.storedObject.type);
-    if (null !== ext) {
-      button.download = button.download + '.' + ext;
     }
 
+    console.log('document downloading (and decrypting) successfully');
+
+    console.log('creating the url')
+    state.href_url = window.URL.createObjectURL(raw);
+    console.log('url created', state.href_url);
+    state.is_running = false;
     state.is_ready = true;
+    console.log('new button marked as ready');
+    console.log('will click on button');
 
-    button.click();
+    console.log('openbutton is now', open_button.value);
-  }
+
+    await nextTick();
+    console.log('next tick actions');
+    console.log('openbutton after next tick', open_button.value);
+    open_button.value?.click();
+    console.log('open button should have been clicked');
 }
 </script>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts

@@ -149,16 +149,21 @@ async function download_and_decrypt_doc(urlGenerator: string, keyData: JsonWebKe
    }
 
    if (iv.length === 0) {
+     console.log('returning document immediatly');
      return rawResponse.blob();
    }
 
+   console.log('start decrypting doc');
+
    const rawBuffer = await rawResponse.arrayBuffer();
 
    try {
      const key = await window.crypto.subtle
        .importKey('jwk', keyData, { name: algo }, false, ['decrypt']);
+     console.log('key created');
      const decrypted = await window.crypto.subtle
        .decrypt({ name: algo, iv: iv }, key, rawBuffer);
+     console.log('doc decrypted');
 
      return Promise.resolve(new Blob([decrypted]));
    } catch (e) {

src/Bundle/ChillPersonBundle/AccompanyingPeriod/Events/UserRefEventSubscriber.php

@@ -51,7 +51,10 @@ class UserRefEventSubscriber implements EventSubscriberInterface
 
     public function onStateEntered(EnteredEvent $enteredEvent): void
     {
-        if ($enteredEvent->getMarking()->has(AccompanyingPeriod::STEP_CONFIRMED)) {
+        if (
+            $enteredEvent->getMarking()->has(AccompanyingPeriod::STEP_CONFIRMED)
+            and $enteredEvent->getTransition()->getName() === 'confirm'
+        ) {
             $this->onPeriodConfirmed($enteredEvent->getSubject());
         }
     }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -122,7 +122,8 @@
          <add-evaluation
             v-for="e in pickedEvaluations"
             v-bind:key="e.key"
-            v-bind:evaluation="e">
+            v-bind:evaluation="e"
+            v-bind:docAnchorId="this.docAnchorId">
          </add-evaluation>
 
          <!-- box to add new evaluation -->
@@ -389,6 +390,7 @@ export default {
    i18n,
    data() {
       return {
+         docAnchorId: null,
          isExpanded: false,
          editor: ClassicEditor,
          showAddObjective: false,
@@ -428,6 +430,13 @@ export default {
          },
       };
    },
+   beforeMount() {
+       const urlParams = new URLSearchParams(window.location.search);
+       this.docAnchorId = urlParams.get('doc_id');
+   },
+   mounted() {
+     this.scrollToElement(this.docAnchorId);
+   },
   computed: {
       ...mapState([
          'work',
@@ -559,7 +568,7 @@ export default {
          });
       },
       saveFormOnTheFly(payload) {
-         console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
+         // console.log('saveFormOnTheFly: type', payload.type, ', data', payload.data);
 
          let body = { type: payload.type };
          body.name = payload.data.text;
@@ -581,6 +590,12 @@ export default {
                      this.$toast.open({message: 'An error occurred'});
                }
             })
+      },
+      scrollToElement(docAnchorId) {
+         const documentEl = document.getElementById(`document_${docAnchorId}`);
+         if (documentEl) {
+           documentEl.scrollIntoView({behavior: 'smooth'});
+         }
       }
    }
 };

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

@@ -11,7 +11,7 @@
       </div>
 
       <div>
-         <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation"></form-evaluation>
+         <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation" :docAnchorId="docAnchorId"></form-evaluation>
 
         <ul class="record_actions">
            <li v-if="evaluation.workflows_availables.length > 0">
@@ -85,7 +85,7 @@ export default {
       Modal,
       ListWorkflowModal,
    },
-   props: ['evaluation'],
+   props: ['evaluation', 'docAnchorId'],
    i18n,
    data() {
       return {

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

@@ -80,12 +80,13 @@
 
        <div class="flex-table">
          <div class="item-bloc" v-for="(d, i) in evaluation.documents" :key="d.id">
-           <div class="item-row">
+           <div :id="`document_${d.id}`" class="item-row">
             <div class="input-group input-group-lg mb-3 row">
                   <label class="col-sm-3 col-form-label">Titre du document:</label>
                   <div class="col-sm-9">
                     <input
                         class="form-control document-title"
+                        :class="[parseInt(this.docAnchorId) === d.id ? 'bg-blink' : 'nothing']"
                         type="text"
                         :value="d.title"
                         :id="d.id"
@@ -221,7 +222,7 @@ const i18n = {
 
 export default {
    name: "FormEvaluation",
-   props: ['evaluation'],
+   props: ['evaluation', 'docAnchorId'],
    components: {
       ckeditor: CKEditor.component,
       PickTemplate,
@@ -402,4 +403,19 @@ export default {
    ul.document-upload {
       justify-content: flex-start;
    }
+
+   .bg-blink{
+     color: #050000;
+     padding: 10px;
+     display: inline-block;
+     border-radius: 5px;
+     animation: blinkingBackground 2.2s infinite;
+     animation-iteration-count: 2;
+   }
+
+   @keyframes blinkingBackground{
+     0%		{ background-color: #ed776d;}
+     50%		{ background-color: #ffffff;}
+     100%	  { background-color: #ed776d;}
+   }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -207,7 +207,7 @@
 </template>
 
 <script>
-import {dateToISO, ISOToDate} from 'ChillMainAssets/chill/js/date';
+import {dateToISO} from 'ChillMainAssets/chill/js/date';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
@@ -262,7 +262,7 @@ export default {
     },
     birthdate: function () {
       if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
-        return ISOToDate(this.person.birthdate.datetime);
+        return new Date(this.person.birthdate.datetime);
       } else {
         return "";
       }

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig

@@ -16,11 +16,13 @@
                 </div>
                 <div class="wh-col">
                     {% if period.step == 'DRAFT' %}
-                        <span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
+                        <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans|e('html_attr') }}">{{ 'course.draft'|trans }}</span>
-                    {% elseif period.step == 'CONFIRMED' %}
+                    {% elseif period.step == 'CLOSED' %}
-                        <span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
+                        <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans|e('html_attr') }}">{{ 'course.closed'|trans }}</span>
-                    {% else %}
+                    {% elseif period.step == 'CONFIRMED_INACTIVE_SHORT' %}
-                        <span class="badge bg-danger">{{- 'Closed'|trans|upper -}}</span>
+                        <span class="badge bg-chill-yellow text-primary" style="font-size: 85%;" title="{{ 'course.inactive_short'|trans|e('html_attr') }}">{{ 'course.inactive_short'|trans }}</span>
+                    {% elseif period.step == 'CONFIRMED_INACTIVE_LONG' %}
+                        <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.inactive_long'|trans|e('html_attr') }}">{{ 'course.inactive_long'|trans }}</span>
                     {% endif %}
                 </div>
             </div>

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig

@@ -123,7 +123,7 @@
         <ul class="record_actions">
             <li>{{ doc.storedObject|chill_document_button_group(doc.title, is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', evaluation.accompanyingPeriodWork)) }}</li>
             <li>
-                <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id}) }}">
+                <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id, 'doc_id': doc.id}) }}">
                     {{ 'Show'|trans }}
                 </a>
             </li>