<commit_before><template>
  <div>
    <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
    <div v-else>
      <h3>{{ $tc('components.camp.campPrint.selectPrintPreview') }}</h3>

      <v-container>
        <v-row>
          <v-col cols="12" md="8">
            <v-list>
              <draggable v-model="cnf.contents" handle=".handle">
                <v-list-item v-for="(content, idx) in cnf.contents" :key="idx">
                  <v-list-item-icon>
                    <v-icon class="handle">mdi-drag-horizontal-variant</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title>
                      <h3>{{ $tc('components.print.printConfigurator.config.' + content.type) }}</h3>
                    </v-list-item-title>
                    <component :is="content.type"
                               v-model="content.options"
                               :camp="camp()" />
                  </v-list-item-content>
                  <v-list-item-action>
                    <v-btn icon @click="cnf.contents.splice(idx, 1)">
                      <v-icon color="red">mdi-delete</v-icon>
                    </v-btn>
                  </v-list-item-action>
                </v-list-item>
              </draggable>
            </v-list>
            <br>
            <v-menu>
              <template #activator="{ on, attrs }">
                <button-add
                  v-bind="attrs"
                  v-on="on" />
              </template>
              <v-list>
                <v-list-item
                  v-for="(component, idx) in contentComponents"
                  :key="idx"
                  @click="cnf.contents.push({
                    type: component.name,
                    options: component.defaultOptions()
                  })">
                  <v-list-item-title>
                    {{ $tc('components.print.printConfigurator.config.' + component.name) }}
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
          <v-col cols="12" md="4">
            <v-expansion-panels>
              <v-expansion-panel>
                <v-expansion-panel-header>View Print-Config</v-expansion-panel-header>
                <v-expansion-panel-content>
                  <pre>{{ cnf }}</pre>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-tabs>
              <v-tab>Print with Nuxt</v-tab>
              <v-tab>Print with React</v-tab>
              <v-tab-item>
                <print-preview-nuxt :config="cnf"
                                    width="100%"
                                    height="600"
                                    class="my-4" />
              </v-tab-item>
              <v-tab-item>
                <print-preview-react :config="cnf"
                                     width="100%"
                                     height="600"
                                     class="my-4" />
              </v-tab-item>
            </v-tabs>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<script>
import PrintPreviewReact from './print-react/PrintPreviewReact.vue'
import PrintPreviewNuxt from './print-nuxt/PrintPreviewNuxt.vue'
import Draggable from 'vuedraggable'
import Cover from './config/CoverConfig.vue'
import Picasso from './config/PicassoConfig.vue'
import Story from './config/StoryConfig.vue'
import Program from './config/ProgramConfig.vue'
import Activity from './config/ActivityConfig.vue'
import Toc from './config/TocConfig.vue'

export default {
  name: 'PrintConfigurator',
  components: {
    Draggable,
    PrintPreviewReact,
    PrintPreviewNuxt,
    Cover,
    Picasso,
    Story,
    Program,
    Activity,
    Toc
  },
  props: {
    camp: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      contentComponents: [
        Cover,
        Picasso,
        Story,
        Program,
        Activity,
        Toc
      ],
      cnf: {
        language: '',
        documentName: this.camp().title + '.pdf',
        camp: this.camp()._meta.self,
        contents: this.defaultContents()
      }
    }
  },
  computed: {
    lang () {
      return this.$store.state.lang.language
    },
    dataLoading () {
      return this.camp()._meta.loading ||
        this.camp().periods()._meta.loading ||
        this.camp().periods().items.some(period => {
          return period._meta.loading ||
            period.scheduleEntries()._meta.loading ||
            period.scheduleEntries().items.some(scheduleEntry => {
              return scheduleEntry._meta.loading ||
                scheduleEntry.activity()._meta.loading ||<commit_msg>only load selected print preview<commit_after><template>
  <div>
    <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
    <div v-else>
      <h3>{{ $tc('components.camp.campPrint.selectPrintPreview') }}</h3>

      <v-container>
        <v-row>
          <v-col cols="12" md="8">
            <v-list>
              <draggable v-model="cnf.contents" handle=".handle">
                <v-list-item v-for="(content, idx) in cnf.contents" :key="idx">
                  <v-list-item-icon>
                    <v-icon class="handle">mdi-drag-horizontal-variant</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title>
                      <h3>{{ $tc('components.print.printConfigurator.config.' + content.type) }}</h3>
                    </v-list-item-title>
                    <component :is="content.type"
                               v-model="content.options"
                               :camp="camp()" />
                  </v-list-item-content>
                  <v-list-item-action>
                    <v-btn icon @click="cnf.contents.splice(idx, 1)">
                      <v-icon color="red">mdi-delete</v-icon>
                    </v-btn>
                  </v-list-item-action>
                </v-list-item>
              </draggable>
            </v-list>
            <br>
            <v-menu>
              <template #activator="{ on, attrs }">
                <button-add
                  v-bind="attrs"
                  v-on="on" />
              </template>
              <v-list>
                <v-list-item
                  v-for="(component, idx) in contentComponents"
                  :key="idx"
                  @click="cnf.contents.push({
                    type: component.name,
                    options: component.defaultOptions()
                  })">
                  <v-list-item-title>
                    {{ $tc('components.print.printConfigurator.config.' + component.name) }}
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
          <v-col cols="12" md="4">
            <v-expansion-panels>
              <v-expansion-panel>
                <v-expansion-panel-header>View Print-Config</v-expansion-panel-header>
                <v-expansion-panel-content>
                  <pre>{{ cnf }}</pre>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-tabs v-model="previewTab">
              <v-tab>Print with Nuxt</v-tab>
              <v-tab>Print with React</v-tab>
              <v-tab-item>
                <print-preview-nuxt v-if="previewTab === 0"
                                    :config="cnf"
                                    width="100%"
                                    height="600"
                                    class="my-4" />
              </v-tab-item>
              <v-tab-item>
                <print-preview-react v-if="previewTab === 1"
                                     :config="cnf"
                                     width="100%"
                                     height="600"
                                     class="my-4" />
              </v-tab-item>
            </v-tabs>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<script>
import PrintPreviewReact from './print-react/PrintPreviewReact.vue'
import PrintPreviewNuxt from './print-nuxt/PrintPreviewNuxt.vue'
import Draggable from 'vuedraggable'
import Cover from './config/CoverConfig.vue'
import Picasso from './config/PicassoConfig.vue'
import Story from './config/StoryConfig.vue'
import Program from './config/ProgramConfig.vue'
import Activity from './config/ActivityConfig.vue'
import Toc from './config/TocConfig.vue'

export default {
  name: 'PrintConfigurator',
  components: {
    Draggable,
    PrintPreviewReact,
    PrintPreviewNuxt,
    Cover,
    Picasso,
    Story,
    Program,
    Activity,
    Toc
  },
  props: {
    camp: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      contentComponents: [
        Cover,
        Picasso,
        Story,
        Program,
        Activity,
        Toc
      ],
      cnf: {
        language: '',
        documentName: this.camp().title + '.pdf',
        camp: this.camp()._meta.self,
        contents: this.defaultContents()
      },
      previewTab: null
    }
  },
  computed: {
    lang () {
      return this.$store.state.lang.language
    },
    dataLoading () {
      return this.camp()._meta.loading ||
        this.camp().periods()._meta.loading ||
        this.camp().periods().items.some(period => {
          return period._meta.loading ||
            period.scheduleEntries()._meta.loading ||
            period.scheduleEntries().items.some(scheduleEntry => {
              return scheduleEntry._meta.loading ||
                scheduleEntry.activity()._meta.loading ||
{'fraction_non_alphanumeric': 0.14298552171742387, 'fraction_numerical': 0.005591612581128308, 'mean_word_length': 1.2528115159694106, 'pattern_counts': {'":': 0, '<': 161, '<?xml version=': 0, '>': 165, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 15, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6641362', 'n_tokens_mistral': 2977, 'n_tokens_neox': 2840, 'n_words': 453}