bk2018.2/partials/NotenE.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">{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 _ from 'lodash'

  export default {
		helpers: {
      _,
			gruppenbezeichnung: gruppe => gruppenIds[gruppe],
			lernbereicheUndFaecher: gruppenFaecher => Object.entries(_.groupBy(gruppenFaecher, f => f.fach.Bezeichnung))
		},
    data() {
      return {
      }
    },

    computed: {
			faechergruppen: ({ data }) => Object.entries(_.groupBy(_.sortBy(data, f => f.fach.SortierungS2), f => f.fach.Fachgruppe_ID))
		}
  }
let gruppenIds = {
10:'Berufsübergreifender Bereich',
11:'Aufgabenbereich I',
20:'Berufsbezogener Bereich',
21:'Aufgabenbereich II',
25:'Berufsbezogener Bereich (Schwerpunkt)',
30:'Differenzierungsbereich',
31:'Aufgabenbereich III.1',
32:'Aufgabenbereich III.2',
33:'Aufgabenbereich III.3',
40:'Berufspraktikum',
60:'besondere Lernleistung',
100:'Fremdsprachen',
110:'Deutsch',
200:'Naturwissenschaften',
300:'Gesellschaftslehre',
400:'Arbeitslehre',
500:'Kunst und Musik',
600:'Sport',
700:'Mathematik',
800:'Wahlpflichtbereich',
900:'Religion',
1000:'Zusätzliche Unterrichtsveranstaltungen',
1100:'Angleichungskurse',
1200:'Sprache',
1300:'Sachunterricht',
1400:'Förderunterricht',
1500:'Vertiefungskurs',
1600:'Projektkurs',
1700:'Abschlussarbeit',
1800:'Projektarbeit'
	}
</script>
<style>
.table-noten {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.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;
  vertical-align: middle;
  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: 2rem;
  padding-bottom: 0;
}

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