2021-08-09 14:26:11 +02:00
|
|
|
<template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div
|
|
|
|
class="block p-4 bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
|
|
|
>
|
|
|
|
<div class="flex flex-wrap gap-1 w-full items-center">
|
|
|
|
<div class="">
|
2021-08-09 14:26:11 +02:00
|
|
|
<img
|
|
|
|
v-if="
|
2022-07-12 10:55:28 +02:00
|
|
|
modelValue.icon && modelValue.icon.substring(0, 7) === 'mz:icon'
|
2021-08-09 14:26:11 +02:00
|
|
|
"
|
2022-07-12 10:55:28 +02:00
|
|
|
:src="`/img/${modelValue.icon.substring(8)}_monochrome.svg`"
|
2021-08-09 14:26:11 +02:00
|
|
|
width="24"
|
|
|
|
height="24"
|
2021-09-07 17:52:34 +02:00
|
|
|
alt=""
|
2021-08-09 14:26:11 +02:00
|
|
|
/>
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-icon
|
|
|
|
v-else-if="modelValue.icon"
|
|
|
|
:icon="modelValue.icon"
|
|
|
|
customSize="24"
|
|
|
|
/>
|
|
|
|
<o-icon v-else icon="help-circle" customSize="24" />
|
2021-08-09 14:26:11 +02:00
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="flex-1">
|
|
|
|
<b>{{ modelValue.title || modelValue.label }}</b>
|
2021-08-09 14:26:11 +02:00
|
|
|
<br />
|
|
|
|
<small>
|
2022-07-12 10:55:28 +02:00
|
|
|
{{ modelValue.description }}
|
2021-08-09 14:26:11 +02:00
|
|
|
</small>
|
|
|
|
<div
|
|
|
|
v-if="
|
2022-07-12 10:55:28 +02:00
|
|
|
modelValue.type === EventMetadataType.STRING &&
|
|
|
|
modelValue.keyType === EventMetadataKeyType.CHOICE &&
|
|
|
|
modelValue.choices
|
2021-08-09 14:26:11 +02:00
|
|
|
"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-field v-for="(value, key) in modelValue.choices" :key="key">
|
|
|
|
<o-radio v-model="metadataItemValue" :native-value="key">{{
|
2021-08-09 14:26:11 +02:00
|
|
|
value
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-radio>
|
|
|
|
</o-field>
|
2021-08-09 14:26:11 +02:00
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-field
|
2021-08-09 14:26:11 +02:00
|
|
|
v-else-if="
|
2022-07-12 10:55:28 +02:00
|
|
|
modelValue.type === EventMetadataType.STRING &&
|
|
|
|
modelValue.keyType == EventMetadataKeyType.URL
|
2021-08-09 14:26:11 +02:00
|
|
|
"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-input
|
2021-08-09 14:26:11 +02:00
|
|
|
@blur="validatePattern"
|
|
|
|
ref="urlInput"
|
|
|
|
type="url"
|
|
|
|
:pattern="
|
2022-07-12 10:55:28 +02:00
|
|
|
modelValue.pattern ? modelValue.pattern.source : undefined
|
2021-08-09 14:26:11 +02:00
|
|
|
"
|
|
|
|
:validation-message="$t(`This URL doesn't seem to be valid`)"
|
|
|
|
required
|
|
|
|
v-model="metadataItemValue"
|
2022-07-12 10:55:28 +02:00
|
|
|
:placeholder="modelValue.placeholder"
|
2021-08-09 14:26:11 +02:00
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-field>
|
|
|
|
<o-field v-else-if="modelValue.type === EventMetadataType.STRING">
|
|
|
|
<o-input
|
2021-08-09 14:26:11 +02:00
|
|
|
v-model="metadataItemValue"
|
2022-07-12 10:55:28 +02:00
|
|
|
:placeholder="modelValue.placeholder"
|
2021-08-09 14:26:11 +02:00
|
|
|
/>
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-field>
|
|
|
|
<o-field v-else-if="modelValue.type === EventMetadataType.INTEGER">
|
|
|
|
<o-input type="number" v-model="metadataItemValue" />
|
|
|
|
</o-field>
|
|
|
|
<o-field v-else-if="modelValue.type === EventMetadataType.BOOLEAN">
|
|
|
|
<o-checkbox v-model="metadataItemValue">
|
2021-08-09 14:26:11 +02:00
|
|
|
{{
|
|
|
|
metadataItemValue === "true"
|
2022-07-12 10:55:28 +02:00
|
|
|
? modelValue?.choices?.true
|
|
|
|
: modelValue?.choices?.false
|
2021-08-09 14:26:11 +02:00
|
|
|
}}
|
2022-07-12 10:55:28 +02:00
|
|
|
</o-checkbox>
|
|
|
|
</o-field>
|
2021-08-09 14:26:11 +02:00
|
|
|
</div>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button
|
2021-08-09 14:26:11 +02:00
|
|
|
icon-left="close"
|
2022-07-12 10:55:28 +02:00
|
|
|
@click="$emit('removeItem', modelValue.key)"
|
2021-08-09 14:26:11 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2021-08-09 14:26:11 +02:00
|
|
|
import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
|
|
|
|
import { IEventMetadataDescription } from "@/types/event-metadata";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { computed, ref } from "vue";
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = defineProps<{
|
|
|
|
modelValue: IEventMetadataDescription;
|
|
|
|
}>();
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const emit = defineEmits(["update:modelValue", "removeItem"]);
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const urlInput = ref<any>(null);
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const metadataItemValue = computed({
|
|
|
|
get(): string {
|
|
|
|
return props.modelValue.value;
|
|
|
|
},
|
|
|
|
set(value: string) {
|
|
|
|
if (validate(value)) {
|
|
|
|
emit("update:modelValue", {
|
|
|
|
...props.modelValue,
|
|
|
|
value: value.toString(),
|
|
|
|
});
|
2021-08-09 14:26:11 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
},
|
|
|
|
});
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const validatePattern = (): void => {
|
|
|
|
urlInput.value?.checkHtml5Validity();
|
|
|
|
};
|
2021-08-09 14:26:11 +02:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const validate = (value: string): boolean => {
|
|
|
|
if (props.modelValue.keyType === EventMetadataKeyType.URL) {
|
|
|
|
try {
|
|
|
|
const url = new URL(value);
|
|
|
|
if (!["http:", "https:", "mailto:"].includes(url.protocol)) return false;
|
|
|
|
if (props.modelValue.pattern) {
|
|
|
|
return value.match(props.modelValue.pattern) !== null;
|
2021-08-09 14:26:11 +02:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
} catch {
|
|
|
|
return false;
|
2021-08-09 14:26:11 +02:00
|
|
|
}
|
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
return true;
|
|
|
|
};
|
2021-08-09 14:26:11 +02:00
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
2021-11-04 18:14:36 +01:00
|
|
|
@use "@/styles/_mixins" as *;
|
2021-08-09 14:26:11 +02:00
|
|
|
.card .media {
|
|
|
|
align-items: center;
|
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
// & > button {
|
|
|
|
// @include margin-left(1rem);
|
|
|
|
// }
|
2021-08-09 14:26:11 +02:00
|
|
|
}
|
|
|
|
</style>
|