Adopt fields in wayPoint form to vuetify 2 #248

web/assets/js/components/Common/SwitchField.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {ErrorData, getViolationsFeedback} from "../../utils";
+
+// const props = defineProps(['modelValue', 'value']); // vue3
+// const emit = defineEmits(['update:modelValue']); // vue3
+const emit = defineEmits(['input']);
+
+export interface Props {
+    caption: string,
+    value: boolean,
+    label?: string,
+    hint?: string,
+    placeholder?: string,
+    dataTest?: string,
+    error?: ErrorData,
+    violationFields?: string[],
+    isLoading?: boolean
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: '',
+    hint: '',
+    placeholder: '',
+    violationFields: () => [] as string[],
+    dataTest: '',
+    error: () => {return {} as ErrorData} ,
+    isLoading: false,
+    disabled: false,
+});
+
+const value = computed({
+    get() {
+        // return props.modelValue // vue3
+        return props.value
+    },
+    set(value) {
+        // emit('update:modelValue', value); // vue3
+        emit('input', value)
+    }
+});
+
+const errorMessages = computed(() => {
+    if (!props.error) {
+        return ''
+    }
+
+    return getViolationsFeedback(props.violationFields, props.error);
+})
+
+</script>
+
+<template>
+    <div class="mb-2">
+        {{ caption }}<br>
+        <v-switch
+            v-model="value"
+            :disabled="isLoading || disabled"
+            :label="label"
+            dense
+            class="mt-0"
+            :error-messages="errorMessages"
+            :error="!!errorMessages?.length"
+            :hint="hint"
+            :persistent-hint="!!hint"
+            :hide-details="!hint && !errorMessages?.length"
+            :data-test="dataTest"
+            :loading="isLoading"
+        ></v-switch>
+    </div>
+</template>
+
+<style scoped>
+</style>

web/assets/js/components/Common/TextareaField.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {ErrorData, getViolationsFeedback} from "../../utils";
+
+// const props = defineProps(['modelValue', 'value']); // vue3
+// const emit = defineEmits(['update:modelValue']); // vue3
+const emit = defineEmits(['input']);
+
+export interface Props {
+    value: string,
+    label?: string,
+    hint?: string,
+    placeholder?: string,
+    dataTest?: string,
+    error?: ErrorData,
+    violationFields?: string[],
+    isLoading?: boolean
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: '',
+    hint: '',
+    placeholder: '',
+    violationFields: () => [] as string[],
+    dataTest: '',
+    error: () => {return {} as ErrorData} ,
+    isLoading: false,
+    disabled: false,
+});
+
+const value = computed({
+    get() {
+        // return props.modelValue // vue3
+        return props.value
+    },
+    set(value) {
+        // emit('update:modelValue', value); // vue3
+        emit('input', value)
+    }
+});
+
+const errorMessages = computed(() => {
+    if (!props.error) {
+        return ''
+    }
+
+    return getViolationsFeedback(props.violationFields, props.error);
+})
+
+</script>
+
+<template>
+    <v-textarea
+        v-model="value"
+        :disabled="isLoading || disabled"
+        minlength="1"
+        maxlength="3500"
+        :label="label"
+        :placeholder="placeholder"
+        :data-test="dataTest"
+        rows="3"
+        trim
+        max-rows="15"
+        outlined
+        dense
+        class="mb-2"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :hide-details="!hint && !errorMessages?.length"
+        :error-messages="errorMessages"
+        :error="!!errorMessages?.length"
+    />
+</template>
+
+<style scoped>
+</style>

web/assets/js/components/Common/WayPoint/WayPointContactsCountField.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {getViolationsFeedback} from "../../../utils";
+
+// const props = defineProps(['modelValue', 'value']); // vue3
+// const emit = defineEmits(['update:modelValue']); // vue3
+const emit = defineEmits(['input']);
+
+export interface Props {
+    value: number,
+    label?: string,
+    hint?: string,
+    error?: Object | boolean,
+    isLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: 'Wetter',
+    hint: '',
+    error: false,
+    isLoading: false,
+});
+
+const contactsCountOptions = ref<number[]>(Array.from(Array(41), (x, i) => i));
+
+const value = computed({
+    get() {
+        // return props.modelValue // vue3
+        return props.value
+    },
+    set(value) {
+        // emit('update:modelValue', value); // vue3
+        emit('input', value)
+    }
+});
+
+const errorMessages = computed(() => {
+    return getViolationsFeedback(['contactsCount'], props.error);
+})
+
+</script>
+
+<template>
+    <v-select
+        v-model="value"
+        :items="contactsCountOptions"
+        :label="label"
+        data-test="contactsCount"
+        outlined
+        :hint="hint"
+        :persistent-hint="!!hint"
+        dense
+        :disabled="isLoading"
+        :error-messages="errorMessages"
+        :error="!!errorMessages?.length"
+    />
+</template>
+
+<style scoped>
+</style>

web/assets/js/components/Common/WayPoint/index.ts

@@ -1,2 +1,3 @@
+export {default as WayPointContactsCountField} from './WayPointContactsCountField.vue';
 export {default as WayPointLocationNameField} from './WayPointLocationNameField.vue';
 export {default as WayPointVisitedAtField} from './WayPointVisitedAtField.vue';

web/assets/js/components/Common/index.ts

@@ -0,0 +1,2 @@
+export {default as SwitchField} from './SwitchField.vue';
+export {default as TextareaField} from './TextareaField.vue';

web/assets/js/components/Tags/ColorBadge.vue

@@ -2,6 +2,7 @@
     <v-chip
         class="font-weight-bold d-flex align-items-center"
         :style="`background-color: ${ color }`"
+        small
         pill
     >
         <span

web/assets/js/components/Tags/TagCreate.vue

@@ -12,6 +12,7 @@
             :state="nameState"
             label="Name"
             outlined
+            dense
             data-test="name"
         />
         Gewählte Tag-Farbe:
@@ -26,6 +27,7 @@
             data-test="farbe"
             required
             outlined
+            dense
             item-value="name"
             item-text="name"
         >
@@ -47,6 +49,7 @@
             label="Für welchen Klienten?"
             placeholder="Für welchen Klienten?"
             :items="availableClients"
+            dense
             item-value="@id"
             item-text="name"
             outlined
@@ -75,6 +78,16 @@
                 Bitte erst Name und Farbe wählen bevor ein neuer Tag erstellt werden kann.
             </span>
         </v-tooltip>
+        <v-btn
+            v-else
+            type="submit"
+            color="secondary"
+            data-test="button-tag-create"
+            :disabled="isFormInvalid || isLoading"
+            block
+        >
+            Neuen Tag erstellen
+        </v-btn>
         <form-error
             :error="error"
         />