FEATURE [workflow][doc] scroll immediately to document in workflow and let background flash

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:docId="this.docId">
          </add-evaluation>
 
          <!-- box to add new evaluation -->
@@ -389,6 +390,7 @@ export default {
    i18n,
    data() {
       return {
+         docId: null,
          isExpanded: false,
          editor: ClassicEditor,
          showAddObjective: false,
@@ -428,6 +430,13 @@ export default {
          },
       };
    },
+   beforeMount() {
+       const urlParams = new URLSearchParams(window.location.search);
+       this.docId = urlParams.get('doc_id');
+   },
+   mounted() {
+     this.scrollToElement(this.docId);
+   },
   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(docId) {
+         const documentEl = document.getElementById(`document_${docId}`);
+         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" :docId="docId"></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', 'docId'],
    i18n,
    data() {
       return {
@@ -95,6 +95,9 @@ export default {
          }
       };
    },
+/*   mounted() {
+      console.log('docId is here', this.docId)
+   },*/
    computed: {
       pickedEvaluations() {
          return this.$store.state.evaluationsPicked;

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

@@ -80,7 +80,7 @@
 
        <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" :class="[parseInt(this.docId) === d.id ? 'bg-blink' : 'nothing']">
             <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">
@@ -221,7 +221,7 @@ const i18n = {
 
 export default {
    name: "FormEvaluation",
-   props: ['evaluation'],
+   props: ['evaluation', 'docId'],
    components: {
       ckeditor: CKEditor.component,
       PickTemplate,
@@ -402,4 +402,18 @@ 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: 3;
+   }
+   @keyframes blinkingBackground{
+     0%		{ background-color: #fa8888;}
+     50%		{ background-color: #ffffff;}
+     100%	  { background-color: #fa8888;}
+   }
 </style>

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>