pymedusa · p0psicles · Jun 22, 2019
diff --git a/themes-default/slim/package.json b/themes-default/slim/package.json
@@ -38,6 +38,7 @@
  "jquery": "3.4.1",
  "lodash": "4.17.11",
  "tablesorter": "2.31.1",
+ "v-super-select": "0.2.0",
  "vue": "2.6.10",
  "vue-async-computed": "3.7.0",
  "vue-cookie": "1.1.4",

diff --git a/themes-default/slim/src/components/helpers/show-selector.vue b/themes-default/slim/src/components/helpers/show-selector.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="show-selector form-inline hidden-print">
- <div class="select-show-group pull-left top-5 bottom-5">
+ <!-- <div class="select-show-group pull-left top-5 bottom-5">
  <select v-if="shows.length === 0" :class="selectClass" disabled>
  <option>Loading...</option>
  </select>
@@ -15,14 +15,46 @@
  <option v-for="show in showLists[whichList].shows" :key="show.id.slug" :value="show.id.slug">{{show.title}}</option>
  </template>
  </select>
- </div> <!-- end of select-show-group -->
+ </div> end of select-show-group -->
+ <v-super-select v-if="showLists && showLists.length > 0"
+ :items="showLists"
+ text-field="title"
+ value-field="title"
+ group-name-field="type"
+ children-field="shows"
+ inputHeight="35px"
+ :itemHeight="displayPosters ? 60 : 40"
+ v-model="selectedShow"
+ >
+ <template v-slot:group="{group}">
+ <div class="group-type">{{group.type}}</div>
+ </template>
+
+ <template v-slot:item="{item}">
+ <div :class="[displayPosters ? 'item-container-poster' : 'item-container']">
+ <div v-if="displayPosters">
+ <asset style="height: 60px" default="images/poster.png" :show-slug="item.id.slug" :lazy="true" type="posterThumb" cls="show-image" :link="false"></asset>
+ </div>
+ <div class="item-right">
+ <div>{{item.title}} <span v-if="item.imdbInfo && item.imdbInfo.year" style="color: blue">({{item.imdbInfo.year}})</span></div>
+ <div v-if="displayPosters" class="item-title-additional">airs: {{item.airs}}</div>
+ <div v-if="displayPosters" class="item-title-additional">status: {{item.status}}</div>
+ </div>
+ </div>
+ </template>
+ </v-super-select>
+
  </div> <!-- end of container -->
 </template>
 <script>
 import { mapState } from 'vuex';
+import VSuperSelect from "v-super-select";
 
 export default {
  name: 'show-selector',
+ components: {
+ VSuperSelect
+ },
  props: {
  showSlug: String,
  followSelection: {
@@ -39,7 +71,9 @@ export default {
  const selectedShowSlug = this.showSlug || this.placeholder;
  return {
  selectedShowSlug,
- lock: false
+ lock: false,
+ displayPostersLimit: 250,
+ selectedShow: null
  };
  },
  computed: {
@@ -77,6 +111,7 @@ export default {
  return 0;
  });
  });
+
  return lists;
  },
  whichList() {
@@ -90,6 +125,19 @@ export default {
  return 1;
  }
  return 0;
+ },
+ displayPosters() {
+ const { showLists, displayPostersLimit } = this;
+ return (showLists.flatMap(item => item.shows) || []).length <= displayPostersLimit;
+ }
+ },
+ methods: {
+ createTitle(show) {
+ let { title } = show;
+ if (show.imdbInfo && show.imdbInfo.year) {
+ title = `${title} (${show.imdbInfo.year})`;
+ }
+ return title;
  }
  },
  watch: {
@@ -121,7 +169,7 @@ export default {
  }
 };
 </script>
-<style>
+<style scoped>
 select.select-show {
  display: inline-block;
  height: 25px;
@@ -159,4 +207,51 @@ select.select-show {
  width: 100%;
  }
 }
+
+.group-type {
+ height: var(--itemHeight,40px);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 600;
+ border-bottom: 1px solid #aeb0ab;
+ font-size: 14px;
+ margin-left: 17px;
+ margin-right: 5px;
+}
+
+.item-container-poster {
+ display: grid;
+ grid-template-columns: 50px 100%;
+ grid-template-rows: 100%;
+}
+
+.item-container {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: 100%;
+}
+
+.item-right {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(3, auto);
+}
+
+.item-title-additional {
+ font-style: italic;
+ font-size: 80%;
+}
+
+.show-selector >>> .super-select-input {
+ padding: 4px 6px;
+}
+
+/* .show-selector >>> label.super-select-input > span.label {
+ display: none;
+} */
+
 </style>
diff --git a/themes-default/slim/yarn.lock b/themes-default/slim/yarn.lock
@@ -3206,6 +3206,11 @@ core-js@^2.4.0:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
  integrity sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==
 
+core-js@^2.6.5:
+ version "2.6.9"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+ integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
+
 [email protected], core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -12334,6 +12339,21 @@ uuid@^3.0.1, uuid@^3.3.2:
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+v-debounce@^0.1.2:
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/v-debounce/-/v-debounce-0.1.2.tgz#cab75df7def2783215bf449ef85c69c2decf0a55"
+ integrity sha1-yrdd997yeDIVv0Se+Fxpwt7PClU=
+
+[email protected]:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/v-super-select/-/v-super-select-0.2.0.tgz#ce180f81def75efe19014462b1075d457f9b9089"
+ integrity sha512-UDqiY7Fw+L5YKpsW0hnB6kqA30MMJx846srRpK42dx0PZrpvSDokXbQm0fOgMl1Gxw8Dkesk3Pzw6dbim2QbWg==
+ dependencies:
+ core-js "^2.6.5"
+ v-debounce "^0.1.2"
+ vue "^2.6.10"
+ vue-virtual-scroll-list "^1.3.9"
+
 v8-compile-cache@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.2.tgz#a428b28bb26790734c4fc8bc9fa106fccebf6a6c"
@@ -12655,7 +12675,12 @@ [email protected]:
  dependencies:
  html-truncate "^1.2.2"
 
-[email protected]:
+vue-virtual-scroll-list@^1.3.9:
+ version "1.3.9"
+ resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.3.9.tgz#ba3ce6425374fb323ea83ab33daa2727117808ed"
+ integrity sha512-K979Bk0Fmfxrjb9KIMhJmkIDrKLR/Y+N4B5ivJzzYoTRPGyz/JEe7jLn3vwzYt3YbU6a0KV7c0rf2DP7GGZh3g==
+
+[email protected], vue@^2.6.10:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==