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');
       }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -84,15 +84,29 @@ const store = createStore({
             },
             results: g.results.map(r => ({id: r.id, type: r.type})),
           };
-
           if (g.id !== undefined) {
             o.id = g.id;
           }
-
           return o;
         }),
         accompanyingPeriodWorkEvaluations: state.evaluationsPicked.map(e => {
-
+          let o = {
+            type: e.type,
+            evaluation: {
+              id: e.evaluation.id,
+              type: e.evaluation.type
+            },
+            startDate: e.startDate,
+            endDate: e.endDate,
+            maxDate: e.maxDate,
+            warningInterval: e.warningInterval,
+            comment: e.comment,
+            documents: e.documents
+          };
+          if (e.id !== undefined) {
+            o.id = e.id;
+          }
+          return o;
         })
       };
     }
@@ -221,9 +235,7 @@ const store = createStore({
         socialActionId = getters.socialAction.id,
         url = `/api/1.0/person/social-work/goal/by-social-action/${socialActionId}.json`
       ;
-
       //console.log(url);
-
       window
         .fetch(
           url
@@ -245,9 +257,7 @@ const store = createStore({
       let
         url = `/api/1.0/person/social-work/result/by-goal/${goal.id}.json`
       ;
-
       //console.log(url);
-
       window.fetch(url)
         .then(response => {
           if (response.ok) {
@@ -267,9 +277,7 @@ const store = createStore({
         socialActionId = getters.socialAction.id,
         url = `/api/1.0/person/social-work/result/by-social-action/${socialActionId}.json`
       ;
-
       //console.log(url);
-
       window.fetch(url)
         .then(response => {
           if (response.ok) {
@@ -306,10 +314,8 @@ const store = createStore({
         url = `/api/1.0/person/accompanying-course/work/${state.work.id}.json`,
         errors = []
       ;
-
       //console.log('action submitting', payload, url);
       commit('setIsPosting', true);
-
       window.fetch(url, {
         method: 'PUT',
         headers: {