NEW

frontend/src/components/coral/animalDetailCoral.vue

@@ -0,0 +1,153 @@
+<template>
+  <v-card class="card">
+    <v-card-title class="cardTitle">
+        <p>{{ $store.state.animal.label }}</p>
+    </v-card-title>
+    <v-chip v-for="g in selectedGroups" class="chip" :color="g.color"
+      ><v-icon :icon="g.icon"></v-icon>{{ g.title }}</v-chip
+    >
+
+    <v-card-text>
+      <p class="info">
+      Raza: {{ getLabel("breed", $store.state.animal.breedId) }}<br>
+      Color: {{ getLabel("color", $store.state.animal.colorId) }}<br>
+    </p>
+      <v-text-field
+        class="infoBox"
+        v-model="$store.state.animal.warning"
+        density="compact"
+        hide-details
+        :key="$store.state.key"
+        :class="{ 'alert' : notEmpty( $store.state.animal.warning ) } "
+      ></v-text-field>
+      <v-text-field
+        v-model="$store.state.animal.remark"
+        class="infoBox"
+
+        density="compact"
+        hide-details
+        :key="$store.state.key"
+        :class="{ 'alert' : notEmpty( $store.state.animal.remark ) } "
+      ></v-text-field>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import {
+  formatSelect,
+  formatSelectAddress,
+  saveAnimal,
+  t,
+  getGroups,
+  getLabel,
+} from "../../services/service";
+import { useStore } from "vuex";
+const store = useStore();
+
+export default {
+  name: "animalDetailCoral",
+  computed: {
+    breed() {
+      return formatSelect(this.$store.state.breed);
+    },
+    gender() {
+      return formatSelect(this.$store.state.gender);
+    },
+    color() {
+      return formatSelect(this.$store.state.color);
+    },
+    hair() {
+      return formatSelect(this.$store.state.hair);
+    },
+    address() {
+      return formatSelectAddress(this.$store.state.address);
+    },
+    group() {
+      return formatSelect(this.$store.state.group);
+    },
+    selectedGroups: {
+      get() {
+        return getGroups(this.$store.state.animal.selectedGroups);
+      },
+      set(value) {
+        this.selectedGroupsLocal = value;
+        var a = [];
+        value.forEach((element) => {
+          a.push(element.value);
+        });
+        this.$store.state.animal.selectedGroups = a.toString();
+      },
+    },
+  },
+  methods: {
+    notEmpty(s) {
+      console.log(s)
+      var r = false;
+      if (s != "" ){r = true}
+      console.log(r)
+      return r;
+    }
+  },
+  data() {
+    return {
+      tag: [(v) => v.length >= 3 || "Min Length"],
+    };
+  },
+  setup() {
+    return {
+      store,
+      t,
+      getLabel,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.cardTitle {
+  text-align: center;
+  line-height: 100px;
+  height: 100px;
+  font-size: 80px;
+  font-weight: bold;
+  background-color: lightgray;
+  color: black;
+  padding-top: 30px;
+}
+.info{
+  font-size: 55px;
+  line-height: 1.1em;
+  padding-bottom: 15px;
+}
+
+.v-text-field >>> input {
+    font-size: 55px;
+    font-weight: 100;
+
+}
+
+
+
+
+
+.infoBox{
+  font-size: 55px;
+  line-height: 1em;
+  height: 2em;
+  padding-bottom: 15px;
+}
+
+.chip{
+  font-size: 55px;
+  height: 1.5em;
+}
+.card {
+  height:50vh ;
+}
+
+.alert{
+  background-color: red;
+}
+
+</style>