several changes

general clean up
improve search closes #1, 7
  remove name label for basic search
  placeholder added for basic search
  advanced search added
    text color type rarity
improve css
  deck display
    areas height are better defined
  card display
    hide oracle border if no oracle text
    display now all faces of a card if several available

src/App.vue

@@ -13,6 +13,7 @@ import { mapState } from "vuex";
 import Background from "src/components/Background.vue";
 import Modals from "src/components/Modals.vue";
 import MainContainer from "src/MainContainer.vue";
+import CONST from "src/utils/CONST";
 
 export default {
   name: "App",
@@ -31,6 +32,15 @@ export default {
       modalOpen: state => state.modals.open,
     })
   },
+  async mounted() {
+    const typeList = CONST.search.typeList.map((el) => {
+      if (!el.uri) { return Promise.resolve([el]) }
+      return this.$store.dispatch('mtg/fetch', el.uri)
+              .then(res => res.map(t => ({ key: t, value: t })));
+    });
+    CONST.search.typeList = (await Promise.all(typeList))
+            .reduce((list, arr) => [...list, ...arr], []);
+  },
   watch: {
     modalOpen(newValue) {
       this.showModal = newValue;

src/assets/icons/Plus.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg height="448pt" viewBox="0 0 448 448" width="448pt" xmlns="http://www.w3.org/2000/svg">
+    <path d="m408 184h-136c-4.417969 0-8-3.582031-8-8v-136c0-22.089844-17.910156-40-40-40s-40 17.910156-40 40v136c0 4.417969-3.582031 8-8 8h-136c-22.089844 0-40 17.910156-40 40s17.910156 40 40 40h136c4.417969 0 8 3.582031 8 8v136c0 22.089844 17.910156 40 40 40s40-17.910156 40-40v-136c0-4.417969 3.582031-8 8-8h136c22.089844 0 40-17.910156 40-40s-17.910156-40-40-40zm0 0"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "Plus"
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/Modals.vue

@@ -27,6 +27,10 @@
                 v-if="currentModal === 'card'"
                 @closeModal="closeAnim"
         ></Card>
+        <AdvancedSearch
+                v-if="currentModal === 'search'"
+                @closeModal="closeAnim"
+        ></AdvancedSearch>
       </div>
       <div ref="loading" class="loading" v-show="isLoading && !isAnimating">
         <span>LOADING</span>
@@ -42,6 +46,7 @@ import CONST from "src/utils/CONST";
 import Import from "src/components/modals/Import.vue";
 import Export from "src/components/modals/Export.vue";
 import Card from "src/components/modals/Card.vue";
+import AdvancedSearch from "src/components/modals/AdvancedSearch.vue";
 
 const actualModalParams = {};
 
@@ -51,6 +56,7 @@ export default {
     Import,
     Export,
     Card,
+    AdvancedSearch,
   },
   data() {
     return {

src/components/apps/DeckEdition.vue

@@ -1,6 +1,6 @@
 <template>
-    <div >
-        <div id="deckEdition">
+    <div ref="container">
+        <div id="deckEdition" ref="deckEdition">
     <!--    TOP LEFT    -->
             <div id="deckLists">
                 <div id="deckHeader">
@@ -68,9 +68,16 @@
                 <div id="form">
                     <form v-on:submit="handleSearch">
                         <div class="searchHeader">
-                            <label for="searchText">Nom</label>
-                            <input id="searchText" type="text" v-model="searchText"/>
-                            <Button :icon="'search'" :handle-click="handleSearch" class="submit"></Button>
+                            <input
+                                    id="searchText"
+                                    type="text"
+                                    v-model="searchParams.name"
+                                    placeholder="Black Lotus"
+                            />
+                            <div class="buttons">
+                                <Button icon="search" :handle-click="handleSearch" class="submit"></Button>
+                                <Button icon="display" :handle-click="openSearch"></Button>
+                            </div>
                         </div>
                         <input type="submit" style="display: none"/>
                     </form>
@@ -101,9 +108,6 @@
                             <Mana class="manaCost" :mana-cost="result.mana_cost"></Mana>
                             <div class="type">{{ result.type_line }}</div>
                             <div class="setName">{{ result.set_name }}</div>
-                            <div class="image" v-if="cardToDisplay===result.id">
-                                <img :src="result.image_uri" alt="Rien à afficher :/"/>
-                            </div>
                         </div>
                     </draggable>
                 </div>
@@ -112,7 +116,7 @@
 
     <!--    BOTTOM    -->
 
-        <div id="deckStats">
+        <div id="deckStats" ref="stats">
             <PieChart id="byType" :chart-data="stats.byType"></PieChart>
             <PieChart id="byColor" :chart-data="stats.byColor"></PieChart>
             <BarChart id="byCmc" :chart-data="stats.byCmc" :options="yBeginAtZero"></BarChart>
@@ -133,14 +137,14 @@
     import Mana from '../uiElements/Mana.vue';
     import BarChart from '../chartjs/BarChart.vue';
     import PieChart from '../chartjs/PieChart.vue';
+    import { mapState } from "vuex";
 
     export default {
         name: "DeckEdition",
         props: ['deckToEdit'],
         components: { draggable, Button, Mana, BarChart, PieChart },
         data() {
             return {
-                searchText: 'Black Lotus',
                 isSearching: false,
                 cardToDisplay: null,
                 results: [],
@@ -154,6 +158,9 @@
             };
         },
         computed: {
+            ...mapState({
+                searchParams: state => state.search,
+            }),
             deck() {
                 return this._deck || this.deckToEdit || this.tmpDeck || {};
             }
@@ -167,6 +174,10 @@
             window.localStorage.setItem(CONST.storageKeys.tmpDeck, json);
         },
         async mounted() {
+            const height = this.$refs.container.parentElement.clientHeight
+                - this.$refs.stats.clientHeight;
+            this.$refs.deckEdition.style['grid-template-rows'] = `${height}px`;
+
             try {
                 this.tmpDeck = await this.$store.dispatch('decks/getTmpDeck');
                 this._deck = this.deckToEdit || this.tmpDeck;
@@ -176,6 +187,10 @@
             }
         },
         methods: {
+            openSearch() {
+                this.$store.dispatch('modals/openSearch', this.searchParams)
+                    .then(this.handleSearch);
+            },
             openCard(card) {
                 this.$store.dispatch('modals/openCard', card);
             },
@@ -198,6 +213,9 @@
             onChange() {
                 this.updateDone = true;
                 this.stats = getStats(this.deck);
+                const height = this.$refs.container.parentElement.clientHeight
+                    - this.$refs.stats.clientHeight;
+                this.$refs.deckEdition.style['grid-template-rows'] = `${height}px`;
             },
             onImport() {
                 this.$store.dispatch('modals/openImport').then((listOrDeck) => {
@@ -246,19 +264,16 @@
                 event && event.preventDefault();
                 // todo add a spinner
                 this.isSearching = true;
-                const args = { name: this.searchText };
-                console.info('launch search', args);
-                this.$store.dispatch('mtg/search', args)
+                this.$store.dispatch('mtg/search', this.searchParams)
                 .then((results) => {
                     // todo remove the spinner
                     this.isSearching = false;
-                    console.info('results for search', { args, results });
                     this.results = results;
                 })
                 .catch((error) => {
                     // todo remove the spinner
                     this.isSearching = false;
-                    console.error('error during search', { args, error });
+                    console.error('error during search', { args: this.searchParams, error });
                     this.results = [];
                 });
             },
@@ -324,11 +339,9 @@
     display: grid;
     grid-template-columns: 40% 60%;
     grid-template-areas: "deckLists search";
-
-
     #deckLists {
         grid-area: deckLists;
-        height: 457px;
+        height: auto;
         overflow-x: hidden;
         overflow-y: auto;
 
@@ -409,75 +422,62 @@
         }
 
     }
-
     #search {
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
         .searchHeader {
             display: grid;
-            grid-template-columns: auto 80% auto;
-            grid-template-areas: "label input submit";
-            label {
-                grid-area: label;
-            }
+            grid-template-columns: 80% auto;
+            grid-template-areas: "input buttons";
             input {
                 grid-area: input;
             }
-            .submit {
-                grid-area: submit;
+            .buttons {
+                grid-area: buttons;
             }
         }
-        #resultsBody {
-            height: 400px;
-            overflow-x: hidden;
-            overflow-y: auto;
-        }
-        #results .header, #results .resultRow {
-            grid-area: search;
-            display: grid;
-            grid-template-columns: 40% 10% 20% 20%;
-            grid-template-areas: "name manaCost type setName";
-            .name {
-                grid-area: name;
-            }
-            .manaCost {
-                grid-area: manaCost;
-            }
-            .type {
-                grid-area: type;
-            }
-            .setName {
-                grid-area: setName;
-            }
-            .image {
-                border: 2px black;
-                position: relative;
-                img {
-                    max-height: 300px;
+        #results {
+            .header, .resultRow {
+                grid-area: search;
+                display: grid;
+                grid-template-columns: 40% 10% 20% 20%;
+                grid-template-areas: "name manaCost type setName";
+                .name {
+                    grid-area: name;
+                }
+                .manaCost {
+                    grid-area: manaCost;
+                }
+                .type {
+                    grid-area: type;
+                }
+                .setName {
+                    grid-area: setName;
+                }
+                .image {
+                    border: 2px black;
+                    position: relative;
+                    img {
+                        max-height: 300px;
+                    }
                 }
             }
         }
     }
 }
-
 #deckStats {
     position: absolute;
     bottom: 0px;
-    height: 400px;
+    height: auto;
     width: 100%;
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     grid-template-areas: "cmc color type function";
 
-    #byColor {
-        grid-area: color;
-    }
-    #byCmc{
-        grid-area: cmc;
-    }
-    #byType{
-        grid-area: type;
-    }
-    #byFunctionality{
-        grid-area: function;
-    }
+    #byColor { grid-area: color }
+    #byCmc { grid-area: cmc }
+    #byType { grid-area: type }
+    #byFunctionality { grid-area: function }
 }
 </style>

src/components/apps/DecksList.vue

@@ -53,7 +53,6 @@
                 this.$router.push({ name: 'edition', params: { deckToEdit: deck } })
             },
             async deleteDeck(deck) {
-                console.info('deck to be deleted', deck);
                 this.$store.commit('decks/deleteDeck', deck);
                 this.decks = await this.$store.dispatch('decks/getDecks');
             }