ajout de l'option du choix d'impression pour toutes les bibliothèques + refonte des bibliothèques. fix #18

docs/.vuepress/theme/components/MyMagicItems.vue

@@ -2,19 +2,61 @@
   <main class="page content">
     <div class="theme-default-content">
       <div v-if="magicItems.length > 0">
-        <masonry class="d-print-none" :cols="{'default': 2, 960: 1}" :gutter="24">
-          <MagicItemCard v-for="(magicItem, idx) in magicItems" :magicItem="magicItem" :showActions="true" :key="idx">
-          </MagicItemCard>
-        </masonry>
-        <div class="d-none d-print-block" v-for="magicItem in magicItems">
-          <div>
-            <h2 class="d-flex align-center">
-              <div class="mr-4">{{ magicItem.title }}</div>
-              <v-btn class="d-print-none mr-2" small depressed link :to="{ path: '/creation-de-sort/', query: { key: magicItem.key } }"><v-icon left>mdi-pencil</v-icon> Modifier</v-btn>
-              <v-btn color="error" class="d-print-none" small depressed @click="$store.commit('myMagicItems/removeMagicItem', magicItem)"><v-icon left>mdi-delete</v-icon> Supprimer</v-btn>
-            </h2>
+
+        <div class="d-print-none mb-12">
+
+          <v-data-table
+            class="data-table"
+            :headers="headers"
+            :items="magicItems"
+            item-key="key"
+            :sort-by="sortBy"
+            :sort-desc="sortDesc"
+            must-sort
+            :items-per-page="-1"
+            hide-default-footer
+            show-expand
+          >
+
+            <template v-slot:expanded-item="{ headers, item }">
+              <td :colspan="headers.length" class="pa-4">
+                <MagicItem :magicItem="item" />
+              </td>
+            </template>
+
+            <template v-slot:item.title="{ item }">
+              <span class="subtitle-2">{{ item.title }}</span>
+            </template>
+
+            <template v-slot:item.frontmatter.attunement="{ item }">
+              <span v-if="item.frontmatter.attunement">{{ item.frontmatter.attunement }}</span>
+            </template>
+
+            <template v-slot:item.actions="{ item }">
+              <div class="text-no-wrap">
+                <v-btn class="d-print-none mr-2" small depressed icon @click.stop="toggleHidePrint(item)">
+                  <v-icon v-if="isHiddenPrint(item)">mdi-printer-off</v-icon>
+                  <v-icon v-else>mdi-printer</v-icon>
+                </v-btn>
+                <v-btn class="d-print-none mr-2" small depressed link icon :to="{ path: '/creation-d-objet-magique/', query: { key: item.key } }"><v-icon>mdi-pencil</v-icon></v-btn>
+                <v-btn color="error" class="d-print-none" small depressed icon @click="$store.commit('myMagicItems/removeMagicItem', item)"><v-icon>mdi-delete</v-icon></v-btn>
+              </div>
+            </template>
+
+          </v-data-table>
+        </div>
+
+        <div class="d-none d-print-block column-count-2">
+          <div v-for="magicItem in magicItems">
+            <div v-if="!isHiddenPrint(magicItem)">
+              <h2 class="d-flex align-center">
+                <div class="mr-4">{{ magicItem.title }}</div>
+                <v-btn class="d-print-none mr-2" small depressed link :to="{ path: '/creation-de-sort/', query: { key: magicItem.key } }"><v-icon left>mdi-pencil</v-icon> Modifier</v-btn>
+                <v-btn color="error" class="d-print-none" small depressed @click="$store.commit('myMagicItems/removeMagicItem', magicItem)"><v-icon left>mdi-delete</v-icon> Supprimer</v-btn>
+              </h2>
+              <MagicItem :magicItem="magicItem" :isList="true" :hideTitle="true" />
+            </div>
           </div>
-          <MagicItem :magicItem="magicItem" :isList="true" :hideTitle="true" />
         </div>
       </div>
       <template v-else>
@@ -27,19 +69,25 @@
 
 <script>
 import MagicItem from '@theme/components/MagicItem'
-import MagicItemCard from '@theme/components/MagicItemCard'
 
 export default {
   name: 'MyMagicItems',
 
   components: {
-    MagicItem,
-    MagicItemCard
+    MagicItem
   },
 
   data () {
     return {
-
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        { text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' },
+        { text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' },
+        { text: "", align: 'center', sortable: false, value: 'actions' },
+      ],
     }
   },
 
@@ -50,6 +98,22 @@ export default {
   },
 
   methods: {
+    toggleHidePrint (magicItem) {
+      if (this.isHiddenPrint(magicItem)) {
+        this.$store.commit('myMagicItems/removeNotPrintedMagicItem', magicItem)
+      } else {
+        this.$store.commit('myMagicItems/addNotPrintedMagicItem', magicItem)
+      }
+    },
+    isHiddenPrint (magicItem) {
+      if (this.$store.state.myMagicItems.notPrintedMagicItems) {
+        let idx = this.$store.state.myMagicItems.notPrintedMagicItems.findIndex(item => item.key == magicItem.key)
+        if (idx >= 0) {
+          return true
+        }
+      }
+      return false
+    }
   }
 }
 </script>

docs/.vuepress/theme/components/MyMonsters.vue

@@ -2,17 +2,69 @@
   <main class="page content">
     <div class="theme-default-content">
       <template v-if="monsters.length > 0">
-        <MonsterCard class="d-print-none" v-for="(monster, idx) in monsters" :monster="monster" :showActions="true" :key="idx">
-        </MonsterCard>
-        <div class="d-none d-print-block" v-for="monster in monsters">
-          <div>
-            <h1 class="d-flex align-center">
-              <div class="mr-4">{{ monster.title }}</div>
-              <v-btn class="d-print-none mr-2" small depressed link :to="{ path: '/creation-de-monstre-pnj/', query: { key: monster.key } }"><v-icon left>mdi-pencil</v-icon> Modifier</v-btn>
-              <v-btn color="error" class="d-print-none" small depressed @click="$store.commit('myMonsters/removeMonster', monster)"><v-icon left>mdi-delete</v-icon> Supprimer</v-btn>
-            </h1>
+
+        <div class="d-print-none mb-12">
+
+          <v-data-table
+            class="data-table"
+            :headers="headers"
+            :items="monsters"
+            item-key="key"
+            :sort-by="sortBy"
+            :sort-desc="sortDesc"
+            must-sort
+            :items-per-page="-1"
+            hide-default-footer
+            show-expand
+          >
+
+            <template v-slot:expanded-item="{ headers, item }">
+              <td :colspan="headers.length" class="pa-4">
+                <Monster class="column-count-2" :monster="item" />
+              </td>
+            </template>
+
+            <template v-slot:item.title="{ item }">
+              <span class="subtitle-2">{{ item.title }}</span>
+            </template>
+
+            <template v-slot:item.frontmatter.challenge="{ item }">
+              <span>{{ displayChallenge(item.frontmatter.challenge) }}</span>
+            </template>
+
+            <template v-slot:item.frontmatter.environments="{ item }">
+              <span v-if="item.frontmatter.environments">{{ displayList(item.frontmatter.environments) }}</span>
+            </template>
+
+            <template v-slot:item.frontmatter.dungeonTypes="{ item }">
+              <span v-if="item.frontmatter.dungeonTypes">{{ displayList(item.frontmatter.dungeonTypes) }}</span>
+            </template>
+
+            <template v-slot:item.actions="{ item }">
+              <div class="text-no-wrap">
+                <v-btn class="d-print-none mr-2" small depressed icon @click.stop="toggleHidePrint(item)">
+                  <v-icon v-if="isHiddenPrint(item)">mdi-printer-off</v-icon>
+                  <v-icon v-else>mdi-printer</v-icon>
+                </v-btn>
+                <v-btn class="d-print-none mr-2" small depressed link icon :to="{ path: '/creation-de-monstre-pnj/', query: { key: item.key } }"><v-icon>mdi-pencil</v-icon></v-btn>
+                <v-btn color="error" class="d-print-none" small depressed icon @click="$store.commit('myMonsters/removeMonster', item)"><v-icon>mdi-delete</v-icon></v-btn>
+              </div>
+            </template>
+
+          </v-data-table>
+        </div>
+
+        <div class="d-none d-print-block column-count-2">
+          <div v-for="monster in monsters">
+            <div v-if="!isHiddenPrint(monster)">
+              <h1 class="d-flex align-center">
+                <div class="mr-4">{{ monster.title }}</div>
+                <v-btn class="d-print-none mr-2" small depressed link :to="{ path: '/creation-de-monstre-pnj/', query: { key: monster.key } }"><v-icon left>mdi-pencil</v-icon> Modifier</v-btn>
+                <v-btn color="error" class="d-print-none" small depressed @click="$store.commit('myMonsters/removeMonster', monster)"><v-icon left>mdi-delete</v-icon> Supprimer</v-btn>
+              </h1>
+              <Monster :monster="monster" :isList="true" :hideTitle="true" />
+            </div>
           </div>
-          <Monster :monster="monster" :isList="true" :hideTitle="true" />
         </div>
       </template>
       <template v-else>
@@ -25,19 +77,29 @@
 
 <script>
 import Monster from '@theme/components/Monster'
-import MonsterCard from '@theme/components/MonsterCard'
+import { displayChallenge } from '@theme/util/monsterHelpers'
 
 export default {
   name: 'MyMonsters',
 
   components: {
-    Monster,
-    MonsterCard
+    Monster
   },
 
   data () {
     return {
-
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "ID", align: 'center', sortable: true, value: 'frontmatter.challenge' },
+        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        { text: "Taille", align: 'center', sortable: false, value: 'frontmatter.size' },
+        { text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' },
+        { text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' },
+        { text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' },
+        { text: "", align: 'center', sortable: false, value: 'actions' },
+      ]
     }
   },
 
@@ -48,6 +110,24 @@ export default {
   },
 
   methods: {
+    displayList (list) { return list.join(', ') },
+    displayChallenge (challenge) { return displayChallenge(challenge) },
+    toggleHidePrint (monster) {
+      if (this.isHiddenPrint(monster)) {
+        this.$store.commit('myMonsters/removeNotPrintedMonster', monster)
+      } else {
+        this.$store.commit('myMonsters/addNotPrintedMonster', monster)
+      }
+    },
+    isHiddenPrint (monster) {
+      if (this.$store.state.myMonsters.notPrintedMonsters) {
+        let idx = this.$store.state.myMonsters.notPrintedMonsters.findIndex(item => item.key == monster.key)
+        if (idx >= 0) {
+          return true
+        }
+      }
+      return false
+    }
   }
 }
 </script>

docs/.vuepress/theme/components/MySpells.vue

@@ -4,20 +4,6 @@
       <div v-if="spells.length > 0">
         <div class="d-print-none mb-12">
 
-          <v-dialog v-model="spellCard" max-width="660">
-            <v-card v-if="selectedSpell">
-              <v-card-title class="headline">
-                {{selectedSpell.title}}
-                <v-spacer></v-spacer>
-                <v-btn icon @click="spellCard = false"><v-icon>mdi-close</v-icon></v-btn>
-              </v-card-title>
-
-              <v-card-text>
-                <Spell :spell="selectedSpell" :isList="true" :hideTitle="true" />
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-
           <v-data-table
             class="data-table"
             :headers="headers"
@@ -29,8 +15,15 @@
             must-sort
             :items-per-page="-1"
             hide-default-footer
+            show-expand
           >
 
+            <template v-slot:expanded-item="{ headers, item }">
+              <td :colspan="headers.length" class="pa-4">
+                <Spell :spell="item" />
+              </td>
+            </template>
+
             <template v-slot:group.header="{ group, headers, isOpen, toggle }">
               <td class="group-header" :colspan="headers.length">
                 <div class="d-block d-md-flex align-center">
@@ -55,7 +48,7 @@
             </template>
 
             <template v-slot:item.title="{ item }">
-              <span class="cursor-pointer subtitle-2" @click.stop="openSpellDetails(item)">{{ item.title }}</span>
+              <span class="subtitle-2">{{ item.title }}</span>
             </template>
 
             <template v-slot:item.frontmatter.level="{ item }">
@@ -85,7 +78,6 @@
                   <v-icon v-if="isHiddenPrint(item)">mdi-printer-off</v-icon>
                   <v-icon v-else>mdi-printer</v-icon>
                 </v-btn>
-                <v-btn class="d-print-none mr-2" small depressed icon @click.stop="openSpellDetails(item)"><v-icon>mdi-eye</v-icon></v-btn>
                 <v-btn class="d-print-none mr-2" small depressed link icon :to="{ path: '/creation-de-sort/', query: { key: item.key } }"><v-icon>mdi-pencil</v-icon></v-btn>
                 <v-btn color="error" class="d-print-none" small depressed icon @click="$store.commit('mySpells/removeSpell', item)"><v-icon>mdi-delete</v-icon></v-btn>
               </div>
@@ -122,14 +114,12 @@
 
 <script>
 import Spell from '@theme/components/Spell'
-import SpellCard from '@theme/components/SpellCard'
 
 export default {
   name: 'MySpells',
 
   components: {
-    Spell,
-    SpellCard
+    Spell
   },
 
   data () {
@@ -146,9 +136,7 @@ export default {
         { text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' },
         { text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' },
         { text: "", align: 'center', sortable: false, value: 'actions' },
-      ],
-      spellCard: false,
-      selectedSpell: null
+      ]
     }
   },
 
@@ -177,10 +165,6 @@ export default {
     onInputSpellSlots () {
       this.$store.commit('mySpells/setSpellSlots', this.spellSlots)
     },
-    openSpellDetails (spell) {
-      this.selectedSpell = spell
-      this.spellCard = true
-    },
     hasSpellOfLevel (level) {
       for (let spell of this.spells) {
         if (spell.frontmatter.level == level && !this.isHiddenPrint(spell)) {
@@ -211,13 +195,6 @@ export default {
 
 <style lang="scss">
 @import "../styles/colors";
-.group-header {
-  background-color: $color-dragon;
-  color: #fff;
-}
-.cursor-pointer {
-  cursor: pointer;
-}
 .spell-slot {
   margin: 0;
 }

docs/.vuepress/theme/layouts/MyMagicItemsLayout.vue

@@ -65,6 +65,9 @@ export default {
         }
         if (isValid) {
           self.$store.commit('myMagicItems/setMagicItems', result.magicItems)
+          if (result.notPrintedMagicItems) {
+            self.$store.commit('myMagicItems/setNotPrintedMagicItems', result.notPrintedMagicItems)
+          }
         }
       }
 

docs/.vuepress/theme/layouts/MyMonstersLayout.vue

@@ -65,6 +65,9 @@ export default {
         }
         if (isValid) {
           self.$store.commit('myMonsters/setMonsters', result.monsters)
+          if (result.notPrintedMonsters) {
+            self.$store.commit('myMonsters/setNotPrintedMonsters', result.notPrintedMonsters)
+          }
         }
       }
 

docs/.vuepress/theme/styles/_anchors.scss

@@ -1,3 +1,7 @@
+.cursor-pointer {
+  cursor: pointer;
+}
+
 a.header-anchor {
   text-decoration: none;
 }

docs/.vuepress/theme/styles/_print.scss

@@ -8,6 +8,15 @@
     height: auto !important;
   }
 
+  .break-inside-avoid {
+    break-inside: avoid;
+  }
+
+  a {
+    text-decoration: none;
+    color: rgba(0,0,0,.87) !important;
+  }
+
   .d-flex {
     display: block !important;
   }
@@ -69,7 +78,7 @@
     &.v-application {
       background-color: #fff;
       color: #000;
-      
+
       h1, h2, h3, h4, h5, h6, a {
         color: $color-dragon;
       }

docs/.vuepress/theme/styles/_tables.scss

@@ -93,3 +93,8 @@ table {
     }
   }
 }
+
+.group-header {
+  background-color: $color-dragon;
+  color: #fff;
+}