prepare subcomponents for evaluation, share addResult styles

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="workEditor">
+  <div id="workEditor" class="my-4">
 
     <div id="title">
       <label class="action_title_label">{{ $t('action_title') }}</label>
@@ -83,22 +83,28 @@
         <div><h3>{{ $t('Evaluations') }}</h3></div>
       </div>
 
-      <!-- results which are not attached to an objective -->
+      <!-- list evaluations -->
       <div v-if="hasEvaluationsForAction">
-        <add-evaluation :availableEvaluations="evaluationsForAction" destination="action"></add-evaluation>
+        <add-evaluation
+          :availableEvaluations="evaluationsForAction">
+        </add-evaluation>
       </div>
 
-      <!-- box to add evaluation -->
+      <!-- box to add new evaluation -->
       <div class="add_evaluation">
         <div v-if="showAddEvaluation">
-           bim
+          <new-evaluation>
+          </new-evaluation>
         </div>
         <ul class="record_actions">
           <li>
-            <button @click="toggleAddEvaluation" class="btn btn-create" :title="$t('add_an_evaluation')"></button>
+            <button
+              class="btn btn-create"
+              @click="toggleAddEvaluation"
+              :title="$t('add_an_evaluation')">
+            </button>
           </li>
         </ul>
-        <div><!-- empty for results --></div>
       </div>
     </div>
 
@@ -206,167 +212,6 @@
   </ul>
 </template>
 
-<style lang="scss">
-@import '~ChillMainAssets/module/bootstrap/shared';
-@import '~ChillMainAssets/chill/scss/mixins';
-
-#workEditor {
-  display: grid;
-  grid-template-areas:
-    "title title"
-    "startDate endDate"
-    "comment comment"
-    "objectives objectives"
-    "evaluations evaluations"
-    "persons persons"
-    "handling handling"
-    "tparties tparties"
-    "errors errors"
-    ;
-
-  grid-template-columns: 50%;
-  column-gap: 0rem;
-
-  & > div {
-     @include border-collapse;
-     padding: 1em;
-  }
-
-  #title {
-    grid-area: title;
-
-    .action_title_label {
-      margin-bottom: 0;
-    }
-    .action_title {
-      margin-top: 0;
-      font-weight: bold;
-      font-size: 1.5rem;
-    }
-  }
-  #startDate {
-    grid-area: startDate;
-  }
-  #endDate {
-    grid-area: endDate;
-  }
-  #comment {
-    grid-area: comment;
-  }
-  #objectives {
-    grid-area: objectives;
-
-    & > div {
-      display: grid;
-      grid-template-areas: "obj res";
-      grid-template-columns: 50%;
-      column-gap: 0rem;
-
-      & > div {
-        @include border-collapse;
-        padding: 1em;
-
-        &:nth-child(1) {
-          grid-area: obj;
-        }
-
-        &:nth-child(2) {
-          grid-area: res;
-        }
-      }
-
-      & > div.results_without_objective {
-        background: repeating-linear-gradient(
-        45deg,
-        $gray-500,
-        $gray-500 10px,
-        $gray-100 10px,
-        $gray-100 20px
-      );
-
-        text-align: center;
-        font-weight: 700;
-        padding-top: 1.5rem;
-      }
-    }
-
-    ul.list-objectives {
-      list-style-type: none;
-      padding: 0;
-
-      li {
-        margin: 0.5rem;
-      }
-    }
-
-    div.objective-title {
-      font-weight: bold;
-      /*
-      margin-top: 1rem;
-      font-size: 1.5rem;
-      text-align: center;
-      */
-
-      i.fa {
-        padding: 0.25rem;
-      }
-
-      i.fa-times {
-        background-color: $red;
-        color: $white;
-      }
-    }
-
-    li.badge, div.badge {
-      padding-bottom: 0;
-      padding-top: 0;
-      padding-left: 0;
-
-      i.fa {
-        padding: 0.25rem;
-      }
-
-      i.fa-plus {
-        background-color: $green;
-      }
-
-    }
-  }
-  #objectives, #evaluations {
-    padding: 0;
-
-    & > div.title {
-      background-color: $gray-200;
-      color: $gray-700;
-
-      h3 {
-        text-align: center;
-      }
-    }
-  }
-  #evaluations {
-    grid-area: evaluations;
-    & > div {
-      @include border-collapse;
-      padding: 1em;
-    }
-  }
-  #persons {
-    grid-area: persons;
-  }
-  #handlingThirdParty {
-    grid-area: handling;
-  }
-  #thirdParties {
-    grid-area: tparties;
-  }
-  #errors {
-    grid-area: errors;
-  }
-}
-
-</style>
-
 <script>
 import { mapState, mapGetters, } from 'vuex';
 import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
@@ -374,6 +219,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
+import NewEvaluation from './components/NewEvaluation.vue';
 import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@@ -415,6 +261,7 @@ export default {
     ckeditor: CKEditor.component,
     AddResult,
     AddEvaluation,
+    NewEvaluation,
     AddPersons,
     Person,
     ShowAddress,
@@ -555,3 +402,196 @@ export default {
 };
 
 </script>
+
+<style lang="scss">
+@import '~ChillMainAssets/module/bootstrap/shared';
+@import '~ChillMainAssets/chill/scss/mixins';
+
+#workEditor {
+   display: grid;
+   grid-template-areas:
+    "title title"
+    "startDate endDate"
+    "comment comment"
+    "objectives objectives"
+    "evaluations evaluations"
+    "persons persons"
+    "handling handling"
+    "tparties tparties"
+    "errors errors";
+
+   grid-template-columns: 50%;
+   column-gap: 0rem;
+
+   & > div {
+      @include border-collapse;
+      padding: 1em;
+   }
+
+   #title {
+      grid-area: title;
+
+      .action_title_label {
+         margin-bottom: 0;
+      }
+      .action_title {
+         margin-top: 0;
+         font-weight: bold;
+         font-size: 1.5rem;
+      }
+   }
+   #startDate {
+      grid-area: startDate;
+   }
+   #endDate {
+      grid-area: endDate;
+   }
+   #comment {
+      grid-area: comment;
+   }
+   #objectives {
+      grid-area: objectives;
+
+      & > div {
+         display: grid;
+         grid-template-areas: "obj res";
+         grid-template-columns: 50%;
+         column-gap: 0rem;
+
+         & > div {
+            @include border-collapse;
+            padding: 1em;
+
+            &:nth-child(1) {
+               grid-area: obj;
+            }
+
+            &:nth-child(2) {
+               grid-area: res;
+            }
+         }
+
+         & > div.results_without_objective {
+            background: repeating-linear-gradient(
+                  45deg,
+                  $gray-500,
+                  $gray-500 10px,
+                  $gray-100 10px,
+                  $gray-100 20px
+            );
+
+            text-align: center;
+            font-weight: 700;
+            padding-top: 1.5rem;
+         }
+      }
+
+      ul.list-objectives {
+         list-style-type: none;
+         padding: 0;
+
+         li {
+            margin: 0.5rem;
+         }
+      }
+
+      div.objective-title {
+         font-weight: bold;
+         /*
+         margin-top: 1rem;
+         font-size: 1.5rem;
+         text-align: center;
+         */
+
+         i.fa {
+            padding: 0.25rem;
+         }
+
+         i.fa-times {
+            background-color: $red;
+            color: $white;
+         }
+      }
+
+      li.badge, div.badge {
+         padding-bottom: 0;
+         padding-top: 0;
+         padding-left: 0;
+
+         i.fa {
+            padding: 0.25rem;
+         }
+
+         i.fa-plus {
+            background-color: $green;
+         }
+
+      }
+   }
+   #objectives, #evaluations {
+      padding: 0;
+
+      & > div.title {
+         background-color: $gray-200;
+         color: $gray-700;
+
+         h3 {
+            text-align: center;
+         }
+      }
+   }
+   #evaluations {
+      grid-area: evaluations;
+      & > div {
+         @include border-collapse;
+         padding: 1em;
+      }
+   }
+   #persons {
+      grid-area: persons;
+   }
+   #handlingThirdParty {
+      grid-area: handling;
+   }
+   #thirdParties {
+      grid-area: tparties;
+   }
+   #errors {
+      grid-area: errors;
+   }
+}
+
+button.hide {
+   background-color: $primary;
+}
+
+ul.list-results,
+ul.list-evaluations {
+   list-style-type: none;
+   padding: 0;
+
+   li {
+      margin: 0.5rem;
+   }
+
+   li.badge {
+      padding-bottom: 0;
+      padding-top: 0;
+      padding-left: 0;
+
+      i.fa {
+         /*border-radius: 0.25rem; */
+         padding: 0.25rem;
+      }
+
+      i.fa-plus {
+         background-color: $green;
+      }
+
+      i.fa-times {
+         background-color: $red;
+         color: $white;
+      }
+   }
+}
+</style>