Card.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <article class="card search-card">
  3. <header
  4. @click.prevent="openModalCard"
  5. >
  6. <h1 v-if="isloggedin">{{ item.title }}</h1>
  7. <h4>{{ item.short_description }}</h4>
  8. <span v-if="isloggedin" class="ref">{{ item.reference }}</span>
  9. </header>
  10. <nav class="tools" v-if="isloggedin">
  11. <section class="tool flags">
  12. <span class="btn mdi mdi-folder-outline"/>
  13. <div class="tool-content">
  14. <ul>
  15. <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
  16. <span
  17. class="flag mdi"
  18. :class="[
  19. flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
  20. ]"
  21. :collid="coll.id"
  22. @click.prevent="onFlagActionCard"
  23. >
  24. {{ coll.name }}
  25. </span>
  26. </li>
  27. <li v-if="collsLength<15" class="create-flag">
  28. <input
  29. placeholder="new folder"
  30. v-model="new_folder_name"
  31. @keyup.enter.prevent.stop="onCreateFlagColl"
  32. />
  33. <span
  34. class="add-btn mdi"
  35. :class="addFlagBtnClassObj"
  36. @click.prevent.stop="onCreateFlagColl"
  37. />
  38. </li>
  39. </ul>
  40. </div>
  41. </section>
  42. <section class="tool samples" v-if="item.samples && item.samples.length">
  43. <span class="btn mdi mdi-beaker-outline"/>
  44. <div class="tool-content">
  45. <span class="label">{{ $t("materio.Samples") }}</span>
  46. <ul>
  47. <li
  48. v-for="sample in item.samples"
  49. :key="sample.showroom.id"
  50. >
  51. <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
  52. </li>
  53. </ul>
  54. </div>
  55. </section>
  56. <section v-if="item.note" class="tool note">
  57. <span class="btn mdi mdi-note"/>
  58. </section>
  59. <section class="tool print">
  60. <a :href="item.path+'/printable/print'" target="_blank">
  61. <span class="btn mdi mdi-printer"/>
  62. </a>
  63. </section>
  64. </nav>
  65. <section class="images" v-switcher>
  66. <figure
  67. v-for="(img, index) in item.images"
  68. :key="img.url"
  69. >
  70. <img
  71. class="lazy"
  72. v-lazy="index"
  73. :data-src="img.style_cardmedium_url"
  74. :title="img.title"
  75. />
  76. <img
  77. class="blank"
  78. :src="blanksrc"
  79. @click.prevent="openModalCard"
  80. />
  81. </figure>
  82. </section>
  83. <!-- <CoolLightBox
  84. v-if="isloggedin"
  85. :items="item.images"
  86. :index="lightbox_index"
  87. srcName="style_hd_url"
  88. :loop="true"
  89. @close="lightbox_index = null">
  90. </CoolLightBox> -->
  91. </article>
  92. </template>
  93. <script>
  94. import { mapState, mapActions } from 'vuex'
  95. import cardMixins from 'vuejs/components/cardMixins'
  96. import ModalCard from 'vuejs/components/Content/ModalCard'
  97. export default {
  98. name: "Card",
  99. props: ['item'],
  100. mixins: [cardMixins],
  101. components: {
  102. ModalCard
  103. },
  104. data() {
  105. return {
  106. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  107. loadingFlag: false,
  108. new_folder_name: "",
  109. is_creating_folder: false
  110. // lightbox_index: null
  111. }
  112. },
  113. computed: {
  114. ...mapState({
  115. flagcolls: state => state.User.flagcolls,
  116. isloggedin: state => state.User.isloggedin
  117. }),
  118. collsLength() {
  119. return Object.keys(this.flagcolls).length
  120. },
  121. addFlagBtnClassObj() {
  122. return {
  123. 'mdi-plus-circle-outline': !this.is_creating_folder,
  124. 'mdi-loading': this.is_creating_folder,
  125. active: this.new_folder_name.length > 4 && !this.is_creating_folder,
  126. loading: this.is_creating_folder
  127. }
  128. }
  129. },
  130. methods: {
  131. ...mapActions({
  132. // refreshItem: 'Search/refreshItem',
  133. createFlagColl: 'User/createFlagColl',
  134. flagUnflag: 'User/flagUnflag'
  135. }),
  136. onCreateFlagColl () {
  137. console.log("Card onCreateFlagColl", this.new_folder_name)
  138. this.is_creating_folder = true;
  139. this.createFlagColl(this.new_folder_name)
  140. .then(data => {
  141. console.log("Card onCreateFlagColl then", data);
  142. this.new_folder_name = "";
  143. this.is_creating_folder = false;
  144. let collid = data.id
  145. this.loadingFlag = collid;
  146. this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
  147. .then(data => {
  148. console.log("onFlagActionCard then", data);
  149. this.loadingFlag = false;
  150. })
  151. })
  152. },
  153. flagIsActive(collid) {
  154. // console.log("Card flagIsActive",
  155. // this.item.id,
  156. // this.flagcolls[collid].items,
  157. // this.flagcolls[collid].items.indexOf(this.item.id)
  158. // );
  159. // console.log(this.flagcolls[collid].items_uuids);
  160. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  161. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  162. },
  163. flagIsLoading(collid) {
  164. // console.log(this.item.uuid);
  165. // console.log(this.flagcolls[collid].items_uuids);
  166. return collid === this.loadingFlag;
  167. },
  168. onFlagActionCard (e) {
  169. console.log("Card onFlagActionCard", e, this.item);
  170. if (!this.loadingFlag) {
  171. let collid = e.target.getAttribute('collid');
  172. let isActive = this.flagIsActive(collid);
  173. let action = isActive ? 'unflag' : 'flag';
  174. // console.log('collid', collid);
  175. // console.log("this.item", this.item);
  176. this.loadingFlag = collid;
  177. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  178. .then(data => {
  179. console.log("onFlagActionCard then", data);
  180. this.loadingFlag = false;
  181. })
  182. }
  183. },
  184. // onClickImg (e, index) {
  185. // this.lightbox_index = index
  186. // },
  187. openModalCard (e) {
  188. console.log('openModalCard', this.isLoggedin);
  189. if(this.isloggedin){
  190. this.$modal.show(
  191. ModalCard,
  192. {
  193. item: this.item,
  194. // not really an event
  195. // more a callback function passed as prop to the component
  196. addNoteId:(id) => {
  197. // no needs to refresh the entire item via searchresults
  198. // plus if we are in article, there is not searchresults
  199. // this.refreshItem({id: this.item.id})
  200. // instead create the note id directly
  201. this.item.note = {id: id}
  202. }
  203. },
  204. {
  205. name: `modal-${this.item.id}`,
  206. draggable: false,
  207. classes: "vm--modale-card",
  208. // this does not work
  209. // adaptative: true,
  210. // maxWidth: 850,
  211. // maxHeight: 610,
  212. width: '95%',
  213. height: '95%'
  214. }
  215. )
  216. }
  217. }
  218. }
  219. }
  220. </script>
  221. <style lang="scss" scoped>
  222. </style>