finish predefined people, hide color pickers

frontend/src/components/inputs/colors/ColorPicker.vue

@@ -43,7 +43,9 @@ export default {
 </script>
 
 <template>
-    <li class="grid grid-cols-2 justify-between items-center gap-4">
+    <!-- Temporarily hidden :( -->
+
+    <li class="grid grid-cols-2 justify-between items-center gap-4 hidden">
         <span class="font-condensed">{{ label }}</span>
 
         <div>

frontend/src/components/inputs/colors/MultipleColorPicker.vue

@@ -58,12 +58,10 @@ export default {
             label="name"
         ></VueSelect>
 
-        <ul
-            class="flex flex-col gap-2"
+        <ul class="flex flex-col gap-2">
+            <ColorPicker
                 v-for="(templateColorIdentifier, index) in Object.keys(currentColors)"
                 :key="index"
-        >
-            <ColorPicker
                 :label="colorLabels[templateColorIdentifier]"
                 :colorKey="templateColorIdentifier"
                 v-model="currentColors"

frontend/src/components/inputs/text/ShortTextInput.vue

@@ -6,23 +6,32 @@ import { sanitizeValue } from './utils'
 <script>
 export default {
     components: { InputHeading },
-    props: ['name', 'important', 'zIndex', 'relatedModels', 'predefinedValues', 'modelValue'],
-    emits: ['update:modelValue'],
+    props: ['name', 'important', 'zIndex', 'relatedModel', 'predefinedValues', 'modelValue'],
+    emits: ['update:modelValue', 'update:relatedModel'],
+    mounted () {
+        console.log(this.predefinedValues)
+    },
     methods: {
         emitChanges (event) {
-            $emit('update:modelValue', sanitizeValue(event.target.value))
+            this.$emit('update:modelValue', sanitizeValue(event.currentTarget.value))
 
-            for (
-                let [valueName, value]
-                in Object.entries(event.currentTarget.data.predefinedValue)
-            ) {
-                if (valueName === "self") {
-                    continue
+            let predefinedValue = null;
+
+            if (!this.$props.predefinedValues) {
+                return
             }
 
-                this.relatedModels[valueName] = value
-                $emit('update:relatedModels', this.relatedModels)
+            for (let value of this.$props.predefinedValues) {
+                if (value.self === event.currentTarget.value) {
+                    predefinedValue = value
+                }
             }
+
+            if (predefinedValue === null) {
+                return
+            }
+
+            this.$emit('update:relatedModel', predefinedValue.related)
         }
     }
 }
@@ -47,11 +56,11 @@ export default {
         >
         <datalist
             id="predefinedValues"
-            v-for="predefinedValue in predefinedValues"
+            v-if="$props.predefinedValues"
         >
             <option
+                v-for="predefinedValue in predefinedValues"
                 :value="predefinedValue.self"
-                :data-predefined-value="predefinedValue"
             />
         </datalist>
     </section>

frontend/src/people.js

 const PEOPLE = [
     {
         "self": "Ivan Bartoš",
-        "personPosition": "ministr pro místní rozvoj"
+        "related": "ministr pro místní rozvoj"
     },
     {
         "self": "Olga Richterová",
-        "personPosition": "místopředsedkyně Poslanecké sněmovny"
+        "related": "místopředsedkyně Poslanecké sněmovny"
     },
     {
         "self": "Jan Lipavský",
-        "personPosition": "ministr zahraničních věcí"
+        "related": "ministr zahraničních věcí"
     },
     {
         "self": "Klára Kocmanová",
-        "personPosition": "pirátská poslankyně"
+        "related": "pirátská poslankyně"
     },
     {
         "self": "Jakub Michálek",
-        "personPosition": "pirátský poslanec"
+        "related": "pirátský poslanec"
     },
     {
         "self": "Michal Šalamoun",
-        "personPosition": "ministr pro legislativu"
+        "related": "ministr pro legislativu"
     }
 ]
 

frontend/src/views/basic_photo_banner/BasicPhotoBanner.vue

@@ -144,10 +144,8 @@ export default {
                 <ShortTextInput
                     name="Jméno osoby"
                     v-model="personName"
+                    v-model:relatedModel="personPosition"
                     :predefinedValues="PEOPLE"
-                    :relatedModels="{
-                        'personPosition': personPosition
-                    }"
                     :important="true"
                     zIndex="8"
                 />