billibox-vue/src/components/camera/CameraEditDetail.vue

<template>
  <transition

      enter-active-class="animate__animated animate__lightSpeedInRight"
      mode="out-in"
      appear

  >
    <div class="row" :key="activeCamera.id">
      <div class="col-12">
        <h1 class="mt-4">
          Bearbeiten

          <button class="btn btn-lg bg-vue float-end"

                  @click="leaveEditmode"
          >Verwerfen</button>
        </h1>

        <Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
          <div class="card mt-4">
          <div class="row no-gutters">
            <div class="col-md-4">
              <img
                  src="https://dummyimage.com/600x400/34495e/fff"
                  class="card-img"
              />
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <div class="row">
                    <label for="name">Name der Kamera</label>
                    <Field as="input" name="name" :value="activeCamera.name" type="text" class="form-control" id="name"></Field>
<!--                    <small class="text-danger" v-if="errors.name">{{errors.name}}</small>-->
                </div>
                <div class="row mt-4">
                  <div  class="col-3">
                  <label for="brand">Marke</label>
                  </div>

                    <div  class="col-9">
                  <Field name="brand" class="form-select" v-model="activeCamera.brand_key" id="brand" as="select">
                    <option v-for="brand in brands" :key="brand.schluessel" :value="brand.schluessel" >{{brand.name}}</option>
                    <small class="text-danger" v-if="errors.brand">{{errors.brand}}</small>
                  </Field>
                    </div>
                </div>

                <div class="row mt-4">
                  <div  class="col-3">
                  <label for="condition">Zustand</label>
                  </div>
                    <div  class="col-9">
                  <Field name="condition" class="form-select" v-model="activCamer.condition_key" id="condition" as="select">
                    <option v-for="condition in conditions" :key="condition.schluessel" :value="condition.schluessel" >{{condition.name}}</option>
                    <small class="text-danger" v-if="errors.condition">{{errors.condition}}</small>
                  </Field>
                    </div>
                </div>

                <div class="row mt-4">
                  <div  class="col-3">
                    <label for="buildtype">Bauform</label>
                  </div>
                  <div class="col-9">
                    <Field  name="buildtype" class=" form-select" v-model="activeCamer.buildtype_key" id="buildtype" as="select">
                      <option v-for="buildtype in buildtypes" :key="buildtype.schluessel" :value="buildtype.schluessel" >{{buildtype.name}}</option>
                      <small class="text-danger" v-if="errors.buildtype">{{errors.buildtype}}</small>
                    </Field>
                  </div>
                </div>

                <div class="row">
                  <div class="col-12">
                    {{activeCamera.description}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
          <button class="btn btn-lg bg-vue float-end mx-3"


          >Speichern</button>
        </Form>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters} from "vuex";
import { Form, Field } from "vee-validate";
import * as yup from "yup";

export default {
  name: "CameraReadDetail",
  components: {
    Form,
    Field
  },
  data() {
    const schema = yup.object().shape({
      name: yup.string()
        .required("Name wird benötigt")
        .trim(),
      brand: yup.string()
        .required("Marke wird benötigt")
        .trim(),
      condition: yup.string()
        .required("Zustand wird benötigt")
        .trim(),
      buildtype: yup.string()
         .required("Bauform wird benötigt")
         .trim(),

    });

    return {
      schema,
      error: "",
      isLoading: false
    }
  },
  computed: {
     ...mapGetters(["activeCamera", "brands", "conditions", "buildtypes"]),
    errorDisplayText() {
       if(this.error) {
         return "Es ist ein Fehler aufgetreten"
       }
      return "Es ist ein irgendein Fehler aufgetreten"
    }
  },
  methods: {
    submitData(values) {
      console.log("SubmitData", values);
      this.$store.dispatch("storeCamera", {
        active:false,
        brand_key:"pentax",
        buildtype:"slr",
        description:"Langer Text",
        edit:false,
        name: values.name,
        shape_key:"neuwertig",
        year_of_production:2000,
        year_of_purchase:2022,
      });

    },
    leaveEditmode() {
      this.$store.dispatch("setCameraEditState", {cameraId:this.activeCamera.id, edit:false})

    }
  }
}
</script>

<style scoped>

</style>