improve KarakterKepzettsegek a bit

TODO: tolvaj kepzettsegek, testing?

src/components/KarakterKepzettsegek.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import KepzettsegSelector from "./KepzettsegSelector";
 import {Osztaly} from "../domain-models/osztaly";
 import {UseFormRegisterReturn} from "react-hook-form";
-import {Kepzettsegek, KepzettsegId} from "../domain-models/kepzettsegek";
+import {Kepzettsegek, KepzettsegId, KepzettsegLista} from "../domain-models/kepzettsegek";
 import {Modifier} from "../domain-models/tulajdonsag";
 import {Faj} from "../domain-models/faj";
 
@@ -13,27 +13,48 @@ function KarakterKepzettsegek (props: {
     register: (fieldName: string) => UseFormRegisterReturn,
     watch: (fieldName: string, defaultValue: KepzettsegId) => string
 }) {
-
     const { faj, osztaly, t_int, register, watch } = props
 
-    const numberOfKepzettseg = 3 + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
-    console.log('Number of Kepzetsegek = ', numberOfKepzettseg)
+    const avaialableKepzettsegList = KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly))
 
-    let klist = []
-    for (let i = 0; i < numberOfKepzettseg; i++) {
-        klist.push(i)
+    let numberOfKepzettseg = (osztaly === Osztaly.Tolvaj ? 7 : 4) + Modifier(t_int) + (faj === Faj.Ember ? 1 : 0)
+    console.log('Raw Number of Kepzetsegek = ', numberOfKepzettseg)
+
+    if (numberOfKepzettseg < 1) {
+        numberOfKepzettseg = 1
+    }
+    if (numberOfKepzettseg > avaialableKepzettsegList.length){
+        numberOfKepzettseg = avaialableKepzettsegList.length
+    }
+    console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
+    const klist = Array.from(new Array(numberOfKepzettseg).keys())
+
+    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kep_'+n, avaialableKepzettsegList[n].Id) as KepzettsegId]
+
+    const getKepzettsegListaN = (n: number) => {
+        let response = avaialableKepzettsegList;
+        for (let i = 0; i < n; i++) {
+            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
+        }
+        return response
     }
-    console.log(klist)
 
     return <>
-        {klist.map((idx) =>
-            <KepzettsegSelector
-                key={idx}
-                osztaly={osztaly}
-                fieldRegistration={register('tul_'+idx)}
-                selected={Kepzettsegek[watch('tul_'+idx, 'k_ugras') as KepzettsegId]}
-            />)
-        }
+        <div className='row'>
+            <div className='col-lg-2 col-md-12'>
+                <label className='col-form-label text-body-emphasis'> Képzettségek </label>
+            </div>
+            <div className='col'>
+                {klist.map((idx) =>
+                    <KepzettsegSelector
+                        key={idx}
+                        kepzettsegek={getKepzettsegListaN(idx)}
+                        fieldRegistration={register('kep_'+idx)}
+                        selected={getKepzettsegN(idx)}
+                    />)
+                }
+            </div>
+        </div>
     </>
 }
 

src/components/KepzettsegSelector.tsx

@@ -1,33 +1,28 @@
 import React from "react";
-import {Kepzettseg, KepzettsegLista} from "../domain-models/kepzettsegek";
+import {Kepzettseg} from "../domain-models/kepzettsegek";
 import {TulajdonsagLabel} from "../domain-models/tulajdonsag";
-import {Osztaly} from "../domain-models/osztaly";
 import {UseFormRegisterReturn} from "react-hook-form";
 
 function kepzettsegOptionText(k: Kepzettseg) {
     return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')';
 }
 
-function KepzettsegSelector (props: {osztaly: Osztaly, fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
+function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], fieldRegistration: UseFormRegisterReturn, selected : Kepzettseg}) {
 
-    const { osztaly, fieldRegistration, selected } = props
+    const { kepzettsegek, fieldRegistration, selected } = props
 
     return <>
-        <div className='row m-2'>
-            <label className='col-md-2 col-sm-3 col-form-label' >Képzettségek</label>
-            <div className='col'>
+        <div className='row'>
             <select className='form-control'
                     defaultValue={selected.Id} {...fieldRegistration}>
-                {KepzettsegLista.filter(k => k.Osztalyok == null || k.Osztalyok.includes(osztaly)).map(k =>(
-                    <option key={k.Id} value={k.Id} className='text-body-emphasis'>
+                {kepzettsegek.map(k =>(
+                    <option key={k.Id} value={k.Id}>
                         {kepzettsegOptionText(k)}
                     </option>
                 ))}
             </select>
-            </div>
         </div>
-        <div className='row m-2 pt-2'>
-            <label className='col-md-2 col-sm-3 col-form-label' />
+        <div className='row pt-2'>
             <p className='col'>{selected.Description}</p>
         </div>
     </>