<commit_before><template>
  <div id="edit-box" class="hero-edit box">
    <h4>Edit</h4>
    <div class="alert" v-if="!synced">
      <h4>Warning:</h4>
      <p>
        Someone else has
        <b>changed</b> this document. If you click save, you will overwrite the changes.
      </p>
      <button v-on:click="resync()">resync</button>
    </div>
    <div class="alert deleted" v-if="hero.deleted">
      <h4>Error:</h4>
      <p>
        Someone else has
        <b>deleted</b> this document. You can not save anymore.
      </p>
    </div>
    <h5>
      <div class="color-box" v-bind:style="{ backgroundColor: hero.color }"></div>
      {{hero.name}}
    </h5>HP:
    <input
      id="hp-edit-input"
      type="number"
      v-model.number="formData"
      min="0"
      v-bind:max="hero.maxHP"
      name="hp"
    >
    <br>
    <button v-on:click="cancel()">cancel</button>
    <button id="edit-submit-button" v-on:click="submit()" v-if="!hero.deleted">submit</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import DatabaseService from '../services/Database.service';
import { RxHeroDocument, RxHeroesDatabase } from '../RxDB';
import { skip, map, first } from 'rxjs/operators';

@Component({})
export default class HeroEdit extends Vue {
  @Prop() private hero!: RxHeroDocument;

  private synced: boolean = true;
  private deleted: boolean = false;
  private formData: number = 0;

  public async mounted() {
    console.log('HeroEdit.mounted()');
    console.dir(this.hero);
    console.log(this.hero.hp);
    this.formData = this.hero.hp;
    this.hero.$.pipe(
      skip(1),
      first(),
      map(() => false)
    )
      .toPromise()
      .then((v) => (this.synced = v));

    this.hero.deleted$
      .pipe(first())
      .toPromise()
      .then(() => (this.deleted = true));
  }

  public async submit() {
    console.log('heroEdit.submit()');
    await this.hero.atomicSet('hp', this.formData);
    this.$emit('submit');
  }
  public resync() {
    console.log('heroEdit.resync()');
    this.formData = this.hero.hp;
    this.synced = true;
  }
  public cancel() {
    console.log('heroEdit.cancel()');
    this.$emit('cancel');
  }
}
</script>

<commit_msg>FIX vue example<commit_after><template>
  <div id="edit-box" class="hero-edit box">
    <h4>Edit</h4>
    <div class="alert" v-if="!synced">
      <h4>Warning:</h4>
      <p>
        Someone else has
        <b>changed</b> this document. If you click save, you will overwrite the
        changes.
      </p>
      <button v-on:click="resync()">resync</button>
    </div>
    <div class="alert deleted" v-if="hero.deleted">
      <h4>Error:</h4>
      <p>
        Someone else has
        <b>deleted</b> this document. You can not save anymore.
      </p>
    </div>
    <h5>
      <div
        class="color-box"
        v-bind:style="{ backgroundColor: hero.color }"
      ></div>
      {{ hero.name }}
    </h5>
    HP:
    <input
      id="hp-edit-input"
      type="number"
      v-model.number="formData"
      min="0"
      v-bind:max="hero.maxHP"
      name="hp"
    />
    <br />
    <button v-on:click="cancel()">cancel</button>
    <button id="edit-submit-button" v-on:click="submit()" v-if="!hero.deleted">
      submit
    </button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import DatabaseService from "../services/Database.service";
import { RxHeroDocument, RxHeroesDatabase } from "../RxDB";
import {
    firstValueFrom
} from 'rxjs';
import { skip, map, first } from "rxjs/operators";

@Component({})
export default class HeroEdit extends Vue {
  @Prop() private hero!: RxHeroDocument;

  private synced: boolean = true;
  private deleted: boolean = false;
  private formData: number = 0;

  public async mounted() {
    console.log("HeroEdit.mounted()");
    console.dir(this.hero);
    console.log(this.hero.hp);
    this.formData = this.hero.hp;
    firstValueFrom(
      this.hero.$.pipe(
        skip(1),
        map(() => false)
      )
    ).then((v: boolean) => (this.synced = v));

    firstValueFrom(this.hero.deleted$).then(() => (this.deleted = true));
  }

  public async submit() {
    console.log("heroEdit.submit()");
    await this.hero.atomicSet("hp", this.formData);
    this.$emit("submit");
  }
  public resync() {
    console.log("heroEdit.resync()");
    this.formData = this.hero.hp;
    this.synced = true;
  }
  public cancel() {
    console.log("heroEdit.cancel()");
    this.$emit("cancel");
  }
}
</script>


{'fraction_non_alphanumeric': 0.18074139065584557, 'fraction_numerical': 0.00482561965343277, 'mean_word_length': 2.7012987012987013, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1200850', 'n_tokens_mistral': 1583, 'n_tokens_neox': 1564, 'n_words': 332}