bk2018/partials/Noten.html

<table class="table-noten">
  {#each faechergruppen as [gruppen_id, gruppenFaecher]}
    <tr>
      <td class="fachgruppe-margin">
        <b>{gruppenbezeichnung(gruppen_id)}</b>
      </td>
    </tr>
    {#each lernbereicheUndFaecher(gruppenFaecher) as [lernbereich, faecher]}
      {#if lernbereich != faecher[0].fach.Zeugnisbez}
        <tr><td colspan="2" class="fach-bezeichnung">{lernbereich}</td></tr>
      {/if}
      {#each faecher as f (f.ID)}
        <tr>
          <td class="fach-bezeichnung {lernbereich != faecher[0].fach.Zeugnisbez ? 'lernfeld-lernbereich' : ''}">
            {#if f.fach.Zeugnisbez.includes("Projekt")}
              {f.Lernentw}
            {:else}
              {f.fach.Zeugnisbez}
            {/if}
          </td>
          <td class="td-fach-note"><span>{f.NotenKrz || '–––––'}</span></td>
        </tr>
      {/each}
    {/each}
    <tr>
    </tr>
  {/each}
</table>

<script>
  import { gruppenIds } from './gruppenIDs'
  const _ = R.lodash

  export default {
    helpers: {
      _,
      gruppenbezeichnung: gruppe => gruppenIds[gruppe],
      lernbereicheUndFaecher: gruppenFaecher => Object.entries(_.groupBy(gruppenFaecher, f => f.fach.Bezeichnung))
    },
    computed: {
      faechergruppen: ({ noten }) => Object.entries(_.groupBy(_.sortBy(noten, f => f.fach.SortierungS2), f => f.fach.Fachgruppe_ID)),
      // Berufsbezogen kommt neuerdings zuerst, dann berufsübergreifend
      // wenn aber nur eine Note vermerkt ist, dann normal zurück
      faechergruppenUmsortiert: ({ faechergruppen }) => faechergruppen.length > 1
        ? [faechergruppen[0], faechergruppen[1]] = [faechergruppen[1], faechergruppen[0]]
        : faechergruppen
    }
  }
</script>
<style>
.table-noten {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.fach-bezeichnung {
  padding-left: 10mm;
}
.td-fach-note {
  padding-bottom: .2rem;
  padding-top: .2rem;
  width: 12rem;
}
.td-fach-note span {
  background-color: #dcdcdc !important;
  text-align: center;
  width: 10rem;
  display: block;
  margin: 0 auto;
}
/*.td-fach-note span.e-note {
  background-color: white !important;
  width: 17rem;
  margin: 0;
}*/

.fachgruppe-margin {
  padding-top: 0.3rem;
}

.lernfeld-lernbereich {
  padding-left: 20mm;
  padding-bottom: 0;
}

.lernbereich {
  padding-left: 20mm;
}
</style>