154 lines
3.6 KiB
Vue
154 lines
3.6 KiB
Vue
<template>
|
|
|
|
<div class="card mt-2 ">
|
|
<div class="card-header" :class="activeClass">
|
|
<div class="row">
|
|
<div class="col-11"> {{this.store.name}}</div>
|
|
<div class="col-1 bg-secondary" @click="toggleNew">+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body" v-if="add && isActive && this.store.type === 'filestore'">
|
|
<FileUpload></FileUpload>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body" v-if="add && isActive">
|
|
<p> Neuen Eintrag hinzufügen</p>
|
|
|
|
<Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="key"><strong>Schlüssel</strong></label>
|
|
<Field
|
|
as="input"
|
|
name="key"
|
|
type="text"
|
|
class="form-control"
|
|
id="key"
|
|
/>
|
|
<small class="text-danger" v-if="errors.key">{{
|
|
errors.key
|
|
}}</small>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="name"><strong>Name</strong></label>
|
|
<Field
|
|
as="input"
|
|
name="name"
|
|
type="text"
|
|
class="form-control"
|
|
id="name"
|
|
/>
|
|
<small class="text-danger" v-if="errors.name">{{
|
|
errors.name
|
|
}}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<label for="description"><strong>Beschreibung</strong></label>
|
|
<Field
|
|
as="input"
|
|
name="description"
|
|
type="textarea"
|
|
class="form-control"
|
|
id="description"
|
|
/>
|
|
<small class="text-danger" v-if="errors.description">{{
|
|
errors.description
|
|
}}</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-row mt-3">
|
|
<div class="form-group col-md-8 offset-2">
|
|
<div class="d-grid">
|
|
<button class="btn bg-vue">
|
|
<span v-if="!isLoading">Speichern</span>
|
|
<span v-else class="spinner-border spinner-border-sm"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { Form, Field } from "vee-validate";
|
|
import * as yup from "yup";
|
|
import FileUpload from "@/components/camera/parts/FileUpload";
|
|
|
|
export default {
|
|
name: "StoreSelector",
|
|
components: {
|
|
FileUpload,
|
|
Form,
|
|
Field,
|
|
},
|
|
|
|
props: {
|
|
store: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
activeStore: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
const schema = yup.object().shape({
|
|
key: yup
|
|
.string()
|
|
.required("Der Schlüssel wird benötigt")
|
|
.trim()
|
|
.matches(/^[-a-zA-Z0-9]+$/, "Erlaubte Zeichen sind a-z A-Z 0-9 und -"),
|
|
name: yup
|
|
.string()
|
|
.required("Der Name ist erforderlich"),
|
|
description: yup.string()
|
|
});
|
|
|
|
return {
|
|
schema,
|
|
add: false,
|
|
isLoading: false,
|
|
error:""
|
|
}
|
|
},
|
|
computed: {
|
|
activeClass() {
|
|
if(this.activeStore === this.store.id) return ["billi-primary"];
|
|
else return ["billi-secondary"]
|
|
},
|
|
isActive() {
|
|
return this.activeStore === this.store.id;
|
|
}
|
|
},
|
|
methods: {
|
|
toggleNew() {
|
|
this.add = !this.add;
|
|
},
|
|
submitData(values) {
|
|
console.log(values);
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |