getter/setter for form input date

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

@@ -7,37 +7,26 @@
       <div v-if="!editEvaluation">
          <dl class="item-details definition-inline">
 
-            <dt v-if="e.startDate">
-               {{ $t('startDate') }} :</dt>
-            <dd v-if="e.startDate">
-               {{ e.startDate.datetime }}</dd>
+            <dt v-if="e.startDate">{{ $t('startDate') }} :</dt>
+            <dd v-if="e.startDate">{{ $d(e.startDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.endDate">
-               {{ $t('endDate') }} :</dt>
-            <dd v-if="e.endDate">
-               {{ e.endDate.datetime }}</dd>
+            <dt v-if="e.endDate">{{ $t('endDate') }} :</dt>
+            <dd v-if="e.endDate">{{ $d(e.endDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.maxDate">
-               {{ $t('maxDate') }} :</dt>
-            <dd v-if="e.maxDate">
-               {{ e.maxDate.datetime }}</dd>
+            <dt v-if="e.maxDate">{{ $t('maxDate') }} :</dt>
+            <dd v-if="e.maxDate">{{ $d(e.maxDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.warningInterval">
-               {{ $t('warningInterval') }} :</dt>
-            <dd v-if="e.warningInterval">
-               {{ e.warningInterval }}</dd>
+            <dt v-if="e.warningInterval">{{ $t('warningInterval') }} :</dt>
+            <dd v-if="e.warningInterval">{{ e.warningInterval }}</dd>
 
-            <dt v-if="e.documents && e.documents.length > 0">
-               {{ $t('documents') }} :</dt>
-            <dd v-if="e.documents && e.documents.length > 0">
-               {{ e.documents.length }}</dd>
+            <dt v-if="e.documents && e.documents.length > 0">{{ $t('documents') }} :</dt>
+            <dd v-if="e.documents && e.documents.length > 0">{{ e.documents.length }}</dd>
 
          </dl>
          <dl class="item-details">
-            <dt v-if="e.comment">
-               {{ $t('comment') }} :</dt>
-            <dd v-if="e.comment">
-               {{ e.comment }}</dd>
+
+            <dt v-if="e.comment">{{ $t('comment') }} :</dt>
+            <dd v-if="e.comment">{{ e.comment }}</dd>
 
          </dl>
          <ul class="record_actions">
@@ -47,8 +36,7 @@
          </ul>
       </div>
       <div v-if="editEvaluation">
-         <form-evaluation ref="FormEvaluation" :key="e.id">
-         </form-evaluation>
+         <form-evaluation ref="FormEvaluation" :key="e.id" :evaluation="e"></form-evaluation>
          <ul class="record_actions">
             <li>
                <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
@@ -99,7 +87,7 @@ export default {
          this.$store.commit('removeEvaluation', e);
          return;
       },
-      toggleEditEvaluation() {
+      toggleEditEvaluation(e) {
          this.editEvaluation = !this.editEvaluation;
       },
       submitForm() {

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

@@ -85,6 +85,7 @@
 </template>
 
 <script>
+import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 
@@ -110,7 +111,7 @@ const i18n = {
 
 export default {
    name: "FormEvaluation",
-   props: [],
+   props: ['evaluation'],
    components: {
       ckeditor: CKEditor.component,
    },
@@ -118,34 +119,57 @@ export default {
    data() {
       return {
          editor: ClassicEditor,
-         evaluation: {
-            status: null,
-            startDate: null,
-            endDate: null,
-            maxDate: null,
-            warningInterval: null,
-            comment: null,
-            template: null,
-            //documents: null
-         }
+         //evaluation: {
+         //   status: null,
+         //   startDate: null,
+         //   endDate: null,
+         //   maxDate: null,
+         //   warningInterval: null,
+         //   comment: null,
+         //   template: null,
+         //   //documents: null
+         //}
       }
    },
    computed: {
+      /*
       status: {
          get() { return this.evaluation.status; },
          set(v) { this.evaluation.status = v; }
       },
+      */
       startDate: {
-         get() { return this.evaluation.startDate; },
-         set(v) { this.evaluation.startDate = v; }
+         get() {
+            if (this.evaluation.startDate) {
+               return this.evaluation.startDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.startDate.datetime = `${v}T00:00:00+0100`;
+         }
       },
       endDate: {
-         get() { return this.evaluation.endDate; },
-         set(v) { this.evaluation.endDate = v; }
+         get() {
+            if (this.evaluation.endDate) {
+               return this.evaluation.endDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.endDate.datetime = `${v}T00:00:00+0100`;
+         }
       },
       maxDate: {
-         get() { return this.evaluation.maxDate; },
-         set(v) { this.evaluation.maxDate = v; }
+         get() {
+            if (this.evaluation.maxDate) {
+               return this.evaluation.maxDate.datetime.split('T')[0];
+            }
+            return null;
+         },
+         set(v) {
+            this.evaluation.maxDate.datetime = `${v}T00:00:00+0100`;
+         }
       },
       warningInterval: {
          get() { return this.evaluation.warningInterval; },
@@ -181,6 +205,7 @@ export default {
       },
       saveEvaluation() {
          console.log('save evaluation');
+
          console.log('dispatch action: post/patch/put evaluation');
          console.log('commit mutation: update state.mutation');
       }