<script setup lang="ts">
import { computed } from "vue";

import { Model, useRepo } from "pinia-orm";

// Base entity.
class Person extends Model {
  static entity = "person";
  static fields() {
    return {
      id: this.attr(null),
      name: this.attr(""),
    };
  }
}

// Derived entity. You should extend the base entity.
class Adult extends Person {
  static entity = "adult";
  // static baseEntity = Person.entity;
  // Call `super.fields()`` to merge fields.
  static fields() {
    return {
      ...super.fields(),
      job: this.attr(""),
    };
  }
}

const adult = useRepo(Adult);
const person = useRepo(Person);

function clear() {
  adult.flush();
  person.flush();
}

function insert_person_and_adult() {
  person.insert({ id: 1, name: "John Doe" });
  adult.insert({ id: 2, name: "Jane Doe", job: "Software Engineer" });
}

function save_person_and_adult() {
  person.save({ id: 1, name: "John Doe" });
  adult.save({ id: 2, name: "Jane Doe", job: "Software Engineer" });
}

function save_person() {
  person.save({ id: 1, name: "John Doe" });
}

function save_adult() {
  adult.save({ id: 2, name: "Jane Doe", job: "Software Engineer" });
}

function insert_person() {
  person.insert({ id: 1, name: "John Doe" });
}

function insert_adult() {
  adult.insert({ id: 2, name: "Jane Doe", job: "Software Engineer" });
}

const all_persons = computed(() => person.all());
const all_adults = computed(() => adult.all());
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 0.25rem">
    <button @click="save_adult()">Save Adult</button>
    <button @click="save_person()">Save Person</button>
    <button @click="save_person_and_adult()">Save Adult and Person</button>
    <br />
    <button @click="insert_adult()">Insert Adult</button>
    <button @click="insert_person()">Insert Person</button>
    <button @click="insert_person_and_adult()">Insert Adult and Person</button>
    <br />
    <button @click="clear()">Clear</button>
  </div>

  <h2>Adults</h2>
  <span v-for="a in all_adults">- {{ a }} </span>

  <h2>Persons</h2>
  <span v-for="p in all_persons">- {{ p }} </span>
  <br>
  <br>
  <span style="color:blue">Why doesn't the adult show up in the person list :(</span>
</template>