Card.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  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. import MemberWarning from 'vuejs/components/Content/MemberWarning'
  98. export default {
  99. name: "Card",
  100. props: ['item'],
  101. mixins: [cardMixins],
  102. components: {
  103. ModalCard,
  104. MemberWarning
  105. },
  106. data() {
  107. return {
  108. blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
  109. loadingFlag: false,
  110. new_folder_name: "",
  111. is_creating_folder: false
  112. // lightbox_index: null
  113. }
  114. },
  115. computed: {
  116. ...mapState({
  117. flagcolls: state => state.User.flagcolls,
  118. isloggedin: state => state.User.isloggedin
  119. }),
  120. collsLength() {
  121. return Object.keys(this.flagcolls).length
  122. },
  123. addFlagBtnClassObj() {
  124. return {
  125. 'mdi-plus-circle-outline': !this.is_creating_folder,
  126. 'mdi-loading': this.is_creating_folder,
  127. active: this.new_folder_name.length > 4 && !this.is_creating_folder,
  128. loading: this.is_creating_folder
  129. }
  130. }
  131. },
  132. methods: {
  133. ...mapActions({
  134. // refreshItem: 'Search/refreshItem',
  135. createFlagColl: 'User/createFlagColl',
  136. flagUnflag: 'User/flagUnflag'
  137. }),
  138. onCreateFlagColl () {
  139. console.log("Card onCreateFlagColl", this.new_folder_name)
  140. this.is_creating_folder = true;
  141. this.createFlagColl(this.new_folder_name)
  142. .then(data => {
  143. console.log("Card onCreateFlagColl then", data)
  144. this.new_folder_name = "";
  145. this.is_creating_folder = false;
  146. let collid = data.id
  147. this.loadingFlag = collid;
  148. this.flagUnflag({ action: 'flag', id: this.item.id, collid: collid})
  149. .then(data => {
  150. console.log("onFlagActionCard then", data)
  151. this.loadingFlag = false;
  152. })
  153. })
  154. },
  155. flagIsActive(collid) {
  156. // console.log("Card flagIsActive",
  157. // this.item.id,
  158. // this.flagcolls[collid].items,
  159. // this.flagcolls[collid].items.indexOf(this.item.id)
  160. // );
  161. // console.log(this.flagcolls[collid].items_uuids)
  162. // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
  163. return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
  164. },
  165. flagIsLoading(collid) {
  166. // console.log(this.item.uuid)
  167. // console.log(this.flagcolls[collid].items_uuids)
  168. return collid === this.loadingFlag;
  169. },
  170. onFlagActionCard (e) {
  171. console.log("Card onFlagActionCard", e, this.item)
  172. if (!this.loadingFlag) {
  173. let collid = e.target.getAttribute('collid');
  174. let isActive = this.flagIsActive(collid);
  175. let action = isActive ? 'unflag' : 'flag';
  176. // console.log('collid', collid)
  177. // console.log("this.item", this.item)
  178. this.loadingFlag = collid;
  179. this.flagUnflag({ action: action, id: this.item.id, collid: collid})
  180. .then(data => {
  181. console.log("onFlagActionCard then", data)
  182. this.loadingFlag = false;
  183. })
  184. }
  185. },
  186. // onClickImg (e, index) {
  187. // this.lightbox_index = index
  188. // },
  189. openModalCard (e) {
  190. console.log('openModalCard', this.isLoggedin)
  191. if (this.isloggedin) {
  192. this.$modal.show(
  193. ModalCard,
  194. {
  195. item: this.item,
  196. // not really an event
  197. // more a callback function passed as prop to the component
  198. addNoteId:(id) => {
  199. // no needs to refresh the entire item via searchresults
  200. // plus if we are in article, there is not searchresults
  201. // this.refreshItem({id: this.item.id})
  202. // instead create the note id directly
  203. this.item.note = {id: id}
  204. }
  205. },
  206. {
  207. name: `modal-${this.item.id}`,
  208. draggable: false,
  209. classes: "vm--modale-card",
  210. // this does not work
  211. // adaptative: true,
  212. // maxWidth: 850,
  213. // maxHeight: 610,
  214. width: '95%',
  215. height: '95%'
  216. }
  217. )
  218. } else {
  219. this.$modal.show(
  220. MemberWarning,
  221. {},
  222. {
  223. // name: `modal-${this.item.id}`,
  224. draggable: false,
  225. // classes: "vm--modale-card",
  226. // this does not work
  227. // adaptative: true,
  228. // maxWidth: 850,
  229. // maxHeight: 610,
  230. width: '400px',
  231. height: '250px'
  232. }
  233. )
  234. }
  235. }
  236. }
  237. }
  238. </script>
  239. <style lang="scss" scoped>
  240. </style>