tethys.backend/resources/js/Components/FormCheckRadioGroup.vue
Arno Kaimbacher d8bdce1369 - added npm package dotenv-webpack for using env variables on clientside
- added API File Controller for downloading files e.g. /api/download/1022
- also create has codes by submitting new dataset
- added edit dataset functionalities for role submitter
- added the following route for role submitter: /dataset/:id/update', 'DatasetController.update'
- created extra UpdateDatasetValidator.ts for validating updated dataset
- npm updates
2023-11-22 17:06:55 +01:00

78 lines
2.2 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
const props = defineProps({
options: {
type: Object,
default: () => {},
},
name: {
type: String,
required: true,
},
type: {
type: String,
default: 'checkbox',
validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
},
componentClass: {
type: String,
default: null,
},
isColumn: Boolean,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: null,
},
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
// get: () => props.modelValue,
get: () => {
// const ids = props.modelValue.map((obj) => obj.id);
// return ids;
if (Array.isArray(props.modelValue)) {
if (props.modelValue.every((item) => typeof item === 'number')) {
return props.modelValue;
} else if (props.modelValue.every((item) => hasIdAttribute(item))) {
const ids = props.modelValue.map((obj) => obj.id.toString());
return ids;
}
return props.modelValue;
}
// return props.modelValue;
},
set: (value) => {
emit('update:modelValue', value);
},
});
// Define a type guard to check if an object has an 'id' attribute
// function hasIdAttribute(obj: any): obj is { id: any } {
// return typeof obj === 'object' && 'id' in obj;
// }
const hasIdAttribute = (obj: any): obj is { id: any } => {
return typeof obj === 'object' && 'id' in obj;
};
</script>
<template>
<div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
<!-- :input-value="key" -->
<!-- :label="value" -->
<!-- :input-value="value.id"
:label="value.name" -->
<FormCheckRadio
v-for="(value, key) in options"
:key="key"
v-model="computedValue"
:type="type"
:name="name"
:input-value="key"
:label="value"
:class="componentClass"
/>
</div>
</template>