<commit_before><template>
  <div id="editSongsOverlay" v-if="shown" class="overlay">
    <sound-bar v-if="loading"></sound-bar>
    <form v-else @submit.prevent="submit">
      <header>
        <img :src="coverUrl" width="96" height="96">
        <hgroup class="meta">
          <h1 :class="{ mixed: !editSingle }">{{ displayedTitle }}</h1>
          <h2 :class="{ mixed: !bySameArtist &&  !formData.artistName }">
            {{ bySameArtist || formData.artistName ? formData.artistName : 'Mixed Artists' }}
          </h2>
          <h2 :class="{ mixed: !inSameAlbum && !formData.albumName }">
            {{ inSameAlbum || formData.albumName ? formData.albumName : 'Mixed Albums' }}
          </h2>
        </hgroup>
      </header>

      <div>
        <div class="tabs tabs-white">
          <div class="header clear">
            <a @click.prevent="currentView = 'details'"
              :class="{ active: currentView === 'details' }">Details</a>
            <a @click.prevent="currentView = 'lyrics'" v-show="editSingle"
              :class="{ active: currentView === 'lyrics' }">Lyrics</a>
          </div>

          <div class="panes">
            <div v-show="currentView === 'details'">
              <div class="form-row" v-if="editSingle">
                <label>Title</label>
                <input name="title" type="text" v-model="formData.title">
              </div>
              <div class="form-row">
                <label>Artist</label>
                <typeahead
                  :items="artistState.artists"
                  :options="artistTypeaheadOptions"
                  v-model="formData.artistName"/>
              </div>
              <div class="form-row">
                <label>Album</label>
                <typeahead
                  :items="albumState.albums"
                  :options="albumTypeaheadOptions"
                  v-model="formData.albumName"/>
              </div>
              <div class="form-row">
                <label class="small">
                  <input type="checkbox" @change="changeCompilationState" ref="compilationStateChk" />
                  Album is a compilation of songs by various artists
                </label>
              </div>
              <div class="form-row" v-show="editSingle">
                <label>Track</label>
                <input name="track" type="text" pattern="\d*" v-model="formData.track"
                title="Empty or a number">
              </div>
            </div>
            <div v-show="currentView === 'lyrics' && editSingle">
              <div class="form-row">
                <textarea v-model="formData.lyrics"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer>
        <input type="submit" value="Update">
        <a @click.prevent="close" class="btn btn-white">Cancel</a>
      </footer>
    </form>
  </div>
</template>

<script>
import { every, filter, union } from 'lodash'

import { br2nl } from '../../utils'
import { songInfo } from '../../services/info'
import { artistStore, albumStore, songStore } from '../../stores'
import config from '../../config'

import soundBar from '../shared/sound-bar.vue'
import typeahead from '../shared/typeahead.vue'

const COMPILATION_STATES = {
  NONE: 0, // No songs belong to a compilation album
  ALL: 1, // All songs belong to compilation album(s)
  SOME: 2 // Some of the songs belong to compilation album(s)
}

export default {
  components: { soundBar, typeahead },

  data () {
    return {
      shown: false,
      songs: [],
      currentView: '',
      loading: false,

      artistState: artistStore.state,
      artistTypeaheadOptions: {
        displayKey: 'name',
        filterKey: 'name'
      },

      albumState: albumStore.state,
      albumTypeaheadOptions: {
        displayKey: 'name',
        filterKey: 'name'
      },

      /**
       * In order not to mess up the original songs, we manually assign and manipulate<commit_msg>Fix the edit form display logic issue<commit_after><template>
  <div id="editSongsOverlay" v-show="shown" class="overlay">
    <sound-bar v-if="loading"></sound-bar>
    <form v-else @submit.prevent="submit">
      <header>
        <img :src="coverUrl" width="96" height="96">
        <hgroup class="meta">
          <h1 :class="{ mixed: !editSingle }">{{ displayedTitle }}</h1>
          <h2 :class="{ mixed: !bySameArtist &&  !formData.artistName }">
            {{ bySameArtist || formData.artistName ? formData.artistName : 'Mixed Artists' }}
          </h2>
          <h2 :class="{ mixed: !inSameAlbum && !formData.albumName }">
            {{ inSameAlbum || formData.albumName ? formData.albumName : 'Mixed Albums' }}
          </h2>
        </hgroup>
      </header>

      <div>
        <div class="tabs tabs-white">
          <div class="header clear">
            <a @click.prevent="currentView = 'details'"
              :class="{ active: currentView === 'details' }">Details</a>
            <a @click.prevent="currentView = 'lyrics'" v-show="editSingle"
              :class="{ active: currentView === 'lyrics' }">Lyrics</a>
          </div>

          <div class="panes">
            <div v-show="currentView === 'details'">
              <div class="form-row" v-if="editSingle">
                <label>Title</label>
                <input name="title" type="text" v-model="formData.title">
              </div>
              <div class="form-row">
                <label>Artist</label>
                <typeahead
                  :items="artistState.artists"
                  :options="artistTypeaheadOptions"
                  v-model="formData.artistName"/>
              </div>
              <div class="form-row">
                <label>Album</label>
                <typeahead
                  :items="albumState.albums"
                  :options="albumTypeaheadOptions"
                  v-model="formData.albumName"/>
              </div>
              <div class="form-row">
                <label class="small">
                  <input type="checkbox" @change="changeCompilationState" ref="compilationStateChk" />
                  Album is a compilation of songs by various artists
                </label>
              </div>
              <div class="form-row" v-show="editSingle">
                <label>Track</label>
                <input name="track" type="text" pattern="\d*" v-model="formData.track"
                title="Empty or a number">
              </div>
            </div>
            <div v-show="currentView === 'lyrics' && editSingle">
              <div class="form-row">
                <textarea v-model="formData.lyrics"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer>
        <input type="submit" value="Update">
        <a @click.prevent="close" class="btn btn-white">Cancel</a>
      </footer>
    </form>
  </div>
</template>

<script>
import { every, filter, union } from 'lodash'

import { br2nl } from '../../utils'
import { songInfo } from '../../services/info'
import { artistStore, albumStore, songStore } from '../../stores'
import config from '../../config'

import soundBar from '../shared/sound-bar.vue'
import typeahead from '../shared/typeahead.vue'

const COMPILATION_STATES = {
  NONE: 0, // No songs belong to a compilation album
  ALL: 1, // All songs belong to compilation album(s)
  SOME: 2 // Some of the songs belong to compilation album(s)
}

export default {
  components: { soundBar, typeahead },

  data () {
    return {
      shown: false,
      songs: [],
      currentView: '',
      loading: true,

      artistState: artistStore.state,
      artistTypeaheadOptions: {
        displayKey: 'name',
        filterKey: 'name'
      },

      albumState: albumStore.state,
      albumTypeaheadOptions: {
        displayKey: 'name',
        filterKey: 'name'
      },

      /**
       * In order not to mess up the original songs, we manually assign and manipulate
{'fraction_non_alphanumeric': 0.1508582884350332, 'fraction_numerical': 0.003508332289186819, 'mean_word_length': 1.8599068434252957, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, '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': '134418', 'n_tokens_mistral': 2345, 'n_tokens_neox': 2244, 'n_words': 533}