Initial commit

lib/assets/javascripts/new-dashboard/components/MapCard/shared/computed.js

@@ -0,0 +1,55 @@
+import * as Visualization from 'new-dashboard/core/models/visualization';
+import countCharsArray from 'new-dashboard/utils/count-chars-array';
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
+import zhCN from 'date-fns/locale/zh_cn';
+
+
+export default {
+  privacyIcon () {
+    return `icon--${this.$props.visualization.privacy}`.toLowerCase();
+  },
+  lastUpdated () {
+    return this.$t(`MapCard.lastUpdate`, {
+      date: distanceInWordsStrict(this.$props.visualization.updated_at, new Date(),{ locale: zhCN })
+    });
+  },
+  mapThumbnailUrl () {
+    return Visualization.getThumbnailUrl(this.$props.visualization, this.$cartoModels, {
+      width: this.thumbnailWidth,
+      height: this.thumbnailHeight
+    });
+  },
+  tagsLength () {
+    return this.$props.visualization.tags ? this.$props.visualization.tags.length : 0;
+  },
+  hasTags () {
+    return this.$props.visualization.tags && this.$props.visualization.tags.length;
+  },
+  vizUrl () {
+    return Visualization.getURL(this.$props.visualization, this.$cartoModels);
+  },
+  tagsChars () {
+    return countCharsArray(this.$props.visualization.tags, ', ');
+  },
+  isSharedWithMe () {
+    return Visualization.isSharedWithMe(this.$props.visualization, this.$cartoModels);
+  },
+  showViews () {
+    const privacy = this.$props.visualization.privacy;
+    return ['public', 'password', 'link'].includes(privacy.toLowerCase());
+  },
+  numberViews () {
+    const stats = this.$props.visualization.stats;
+    const totalViews = Object.keys(stats).reduce((total, date) => total + stats[date], 0);
+    return totalViews;
+  },
+  showInteractiveElements () {
+    return !this.$props.selectMode;
+  },
+  colleaguesSharedList () {
+    return this.$props.visualization.permission.acl;
+  },
+  isSharedWithColleagues () {
+    return this.$props.visualization.permission.acl.length > 0;
+  }
+};

lib/assets/javascripts/new-dashboard/components/MapCard/shared/data.js

@@ -0,0 +1,11 @@
+export default function data () {
+  return {
+    isThumbnailErrored: false,
+    activeHover: true,
+    titleOverflow: false,
+    multilineTitle: false,
+    areQuickActionsOpen: false,
+    isStarInNewLine: false,
+    maxTagsChars: 30
+  };
+}

lib/assets/javascripts/new-dashboard/components/MapCard/shared/methods.js

@@ -0,0 +1,43 @@
+export default {
+  toggleSelection ($event) {
+    this.$emit('toggleSelection', {
+      map: this.$props.visualization,
+      isSelected: !this.$props.isSelected,
+      event: $event
+    });
+  },
+  toggleFavorite () {
+    if (this.$props.visualization.liked) {
+      this.$store.dispatch(`${this.$props.storeActionType}/deleteLike`, this.$props.visualization);
+    } else {
+      this.$store.dispatch(`${this.$props.storeActionType}/like`, this.$props.visualization);
+    }
+  },
+  openQuickActions () {
+    this.areQuickActionsOpen = true;
+  },
+  closeQuickActions () {
+    this.areQuickActionsOpen = false;
+  },
+  mouseOverChildElement () {
+    this.activeHover = false;
+  },
+  mouseOutChildElement () {
+    this.activeHover = true;
+  },
+  onThumbnailError () {
+    this.isThumbnailErrored = true;
+  },
+  onDataChanged () {
+    this.$emit('dataChanged');
+  },
+  onClick (event) {
+    if (this.$props.selectMode) {
+      event.preventDefault();
+      this.toggleSelection(event);
+    }
+  },
+  isLastTag (index) {
+    return index === this.tagsLength - 1;
+  }
+};

lib/assets/javascripts/new-dashboard/components/MapCard/shared/props.js

@@ -0,0 +1,19 @@
+export default {
+  visualization: Object,
+  storeActionType: {
+    type: String,
+    default: 'maps'
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  canHover: {
+    type: Boolean,
+    default: true
+  },
+  selectMode: {
+    type: Boolean,
+    default: false
+  }
+};