Add initial JSONs for the entity creation flows

create_event.json

@@ -0,0 +1,35 @@
+{
+  "name": "string (required)",
+  "tagline": "string",
+  "description": "string (required)",
+  "organizations": [
+    "uuid (required)"
+  ],
+  "groups": [
+    "uuid"
+  ],
+  "location_type": "in person | online (required)",
+  "event_type": "learn | action (required)",
+  "topics": [
+    "uuid (required)"
+  ],
+  "online_location_link": "string",
+  "location": {
+    "address_or_name": "string",
+    "city": "string",
+    "country_code": "string",
+    "lat": "string",
+    "lon": "string",
+    "bbox": [
+      "string"
+    ]
+  },
+  "times": [
+    {
+      "date": "date",
+      "all_day": "bool (required)",
+      "start_time": "datetime",
+      "end_time": "datetime"
+    }
+  ]
+}

create_group.json

@@ -0,0 +1,10 @@
+{
+  "name": "string (required)",
+  "tagline": "string",
+  "description": "string (required)",
+  "organization": "uuid (required)",
+  "topics": [
+    "uuid (required)"
+  ],
+  "city": "string (required)"
+}

create_org.json

@@ -0,0 +1,10 @@
+{
+  "name": "string (required)",
+  "tagline": "string",
+  "description": "string (required)",
+  "topics": [
+    "uuid (required)"
+  ],
+  "country_code": "string (required)",
+  "city": "string (required)"
+}

frontend/app/components/form/FormSearchLocation.vue

@@ -0,0 +1,73 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <div class="px-4 sm:px-6 md:px-8 xl:px-24 2xl:px-36">
+    <Form
+      id="search-location"
+      @submit="handleSubmit"
+      class="space-y-4"
+      :schema="locationSchema"
+      :submit-label="$t('i18n.components.form.search_location.search_location')"
+    >
+      <FormItem
+        v-slot="{ id, handleChange, errorMessage, value }"
+        :label="$t('i18n.components.machine.steps._global.country')"
+        name="country"
+      >
+        <!-- prettier-ignore-attribute :modelValue -->
+        <FormSelectorComboboxCountry
+          :id="id"
+          @update:selected-country="handleChange"
+          :hasError="!!errorMessage.value"
+          :label="$t('i18n.components.machine.steps._global.country')"
+          :selected-country="(value.value as string) || ''"
+        />
+      </FormItem>
+      <FormItem
+        v-slot="{ id, handleChange, handleBlur, errorMessage, value }"
+        :label="$t('i18n.components.machine.steps._global.city')"
+        name="city"
+      >
+        <!-- prettier-ignore-attribute :modelValue -->
+        <FormTextInput
+          :id="id"
+          @blur="handleBlur"
+          @input="handleChange"
+          :hasError="!!errorMessage.value"
+          :label="$t('i18n.components.machine.steps._global.city')"
+          :modelValue="(value.value as string)"
+        />
+      </FormItem>
+      <FormItem
+        v-slot="{ id, handleChange, handleBlur, errorMessage, value }"
+        :label="
+          $t('i18n.components.machine_steps_create_event_location.street_house_number')
+        "
+        name="street"
+      >
+        <!-- prettier-ignore-attribute :modelValue -->
+        <FormTextInput
+          :id="id"
+          @blur="handleBlur"
+          @input="handleChange"
+          :hasError="!!errorMessage.value"
+          :label="
+            $t('i18n.components.machine_steps_create_event_location.street_house_number')
+          "
+          :modelValue="(value.value as string)"
+        />
+      </FormItem>
+    </Form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { z } from "zod";
+defineProps<{
+  handleSubmit: (values: unknown) => Promise<void> | void;
+}>();
+const locationSchema = z.object({
+  country: z.string().min(1, "Country is required"),
+  street: z.string().min(1, "Street and House Number is required"),
+  city: z.string().min(1, "City is required"),
+});
+</script>

frontend/app/components/form/radio/FormRadio.vue

@@ -7,12 +7,6 @@
     class="field"
     type="radio"
   />
-  <label v-if="label" :for="uuid">
-    {{ label }}
-  </label>
-  <BaseErrorMessage :id="`${uuid}-error`" v-if="error">
-    {{ error }}
-  </BaseErrorMessage>
 </template>
 
 <script setup lang="ts">

frontend/app/components/form/radio/FormRadioBtn.vue

@@ -1,19 +1,21 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div
-    class="relative flex h-9 w-full items-center border border-interactive font-bold first:rounded-l-md last:rounded-r-md"
+    class="relative flex h-9 w-full items-center border border-interactive font-bold first:rounded-l-md last:rounded-r-md py-7 px-2"
     :class="{
-      'bg-menu-selection text-layer-1': modelValue === value && !customColor,
-      [customColorClass]: modelValue === value && customColor,
-      'bg-layer-2 text-distinct-text': modelValue !== value,
+      'style-menu-option-cta': optionIsChecked(value) && !customColor,
+      [customColorClass]: optionIsChecked(value) && customColor,
+      'style-menu-option bg-layer-2': !optionIsChecked(value),
     }"
   >
     <input
       :id="uuid"
-      v-bind="{ ...$attrs, onChange: updateValue }"
-      :checked="modelValue === value"
+      v-bind="$attrs"
+      @change="emit('update:modelValue', value)"
+      :checked="optionIsChecked(value)"
       class="hidden"
       type="radio"
+      :value="value"
     />
     <label
       v-if="label"
@@ -30,20 +32,31 @@ import { v4 as uuidv4 } from "uuid";
 
 export interface Props {
   label?: string;
-  value?: string;
-  modelValue?: string;
+  value?: unknown;
+  modelValue?: unknown;
   error?: string;
   customColor?: string;
+  compareBy?: string;
 }
 
+const optionIsChecked = (optionValue: unknown): boolean => {
+  if (props.compareBy && props.modelValue && optionValue) {
+    return (
+      (props.modelValue as Record<string, unknown>)[props.compareBy] ===
+      (optionValue as Record<string, unknown>)[props.compareBy]
+    );
+  }
+  return props.modelValue === optionValue;
+};
+
 const props = withDefaults(defineProps<Props>(), {
   label: "",
   error: "",
   customColor: "",
+  compareBy: "id",
 });
-
 const emit = defineEmits(["update:modelValue"]);
-const { updateValue } = useFormSetup(props, emit);
+
 const uuid = uuidv4();
 const customColorClass =
   props.customColor !== ""

frontend/app/components/form/radio/FormRadioBtns.vue

@@ -0,0 +1,40 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+    <div class="flex" :class="{ 'flex-col gap-2': vertical }">
+      <FormRadioBtn
+        v-for="option in options"
+        :key="option.value"
+        @update:model-value="updateValue"
+        :custom-color="option.customColor || customColor"
+        :label="option.label"
+        :model-value="modelValue"
+        :value="option.value"
+      />
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface RadioOption {
+  value: string;
+  customColor?: string;
+  label: string;
+}
+
+export interface Props {
+  label?: string;
+  options: RadioOption[];
+  modelValue?: string;
+  error?:  string;
+  customColor?: string;
+  vertical?:  boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  vertical: false,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const updateValue = (value: unknown) => {
+  emit("update:modelValue", value);
+};
+</script>

frontend/app/components/form/selector/FormSelectorComboboxOrganizations.vue

@@ -39,9 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
   hasColOptions: true,
 });
 const filters = ref<{ name?: string }>({});
-const handleFilterValueUpdate = (val: string) => {
-  filters.value.name = val;
+
+const { debounce } = useDebounce();
+
+const updateFilters = (val: unknown) => {
+  filters.value.name = val as string;
 };
+
+const handleFilterValueUpdate = debounce(updateFilters, 300);
+
 const linked_user_id = computed(() => String(props.linkedUserId) || "");
 
 const {

frontend/app/components/machine/Machine.vue

@@ -29,9 +29,10 @@
 </template>
 
 <script setup lang="ts">
+
 const props = defineProps<{
   machineType: MachineType;
-  options?: Record<string, unknown>;
+  options?: UseFlowScreensOptions;
 }>();
 const emit = defineEmits(["close", "submit"]);