Checklist.vue

<template>
  <content-card
    :title="$tc('views.camp.checklist.title')"
    toolbar
    :no-border="$vuetify.breakpoint.mdAndUp"
  >
    <v-expansion-panels v-model="expandedChecklists" accordion flat multiple>
      <v-expansion-panel v-for="checklist in checklists" :key="checklist._meta.self">
        <v-expansion-panel-header>
          <h3>{{ checklist.name }}</h3>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <ChecklistItemTree
            v-for="rootChecklistItem in getRootChecklistItems(checklist)"
            :key="rootChecklistItem._meta.self"
            :checklist-item="rootChecklistItem"
          />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </content-card>
</template>

<script>
import { sortBy } from 'lodash'
import ContentCard from '@/components/layout/ContentCard.vue'
import ChecklistItemTree from '@/components/checklist/ChecklistItemTree.vue'

export default {
  name: 'Checklist',
  components: {
    ContentCard,
    ChecklistItemTree,
  },
  props: {
    camp: { type: Object, required: true },
  },
  data() {
    return {
      checklistContentType: null,
      expandedChecklists: [0],
    }
  },
  computed: {
    checklists() {
      return this.camp.checklists().items
    },
  },
  async mounted() {
    const api = this.api.get()
    if (null == this.checklistContentType) {
      this.checklistContentType = api.contentTypes({ name: 'Checklist' })
    }
    console.log(this.api)
    console.log(api)
    console.log(api._meta.self)
    console.log(api._meta.selfUrl)

    const contentNodes = this.checklistContentType._meta.load.then((items) => {
      return api.contentNodes({
        contentType: items.items[0]._meta.self,
        camp: this.camp._meta.self,
      })
    })

    await Promise.all([
      this.camp.categories()._meta.load,
      this.camp.activities().$reload(),
      this.camp.checklists().$reload(),
      contentNodes,
    ])
  },
  methods: {
    getRootChecklistItems(checklist) {
      return sortBy(
        checklist.checklistItems().items.filter((c) => c.parent == null),
        (c) => c.position
      )
    },
  },
}
</script>