ken120-mvc-vuejs-media-selection-editor-snippet.vue

ken120-mvc-vuejs-media-selection-editor-snippet.vue

<template>
  <div>
    <!-- HTML cut for brevity -->
  </div>
</template>

<script>
export default {
  props: {
    hostUrl: String,
    selectedMediaUrl: String
  },

  data: function() {
    return {
      params: {
        fileTitle: "",
        fileName: "",
        pageSize: "4",
        pageNumber: "1"
      },
      maxSideSize: 150,
      medias: [],
      modalMedia: undefined,
      isLibraryVisible: false
    };
  },
  methods: {
    onSelect(media) {
      this.modalMedia = undefined;

      this.$emit("dispatch", media);
    },
    onDisplay(media) {
      this.modalMedia = media;
    },
    onSearch() {
      fetch(
        `${
          this.hostUrl
        }/CMSPages/MediaLibraryApi.ashx?${this.getQueryStringParms(
          this.prepareParams(this.params)
        )}`,
        {
          credentials: "include"
        }
      )
        .then(resp => resp.json())
        .then(medias => (this.medias = medias))
        .catch(error => console.log(error));
    },
    prepareParams(params) {
      return {
        ...params,
        pageNumber: params.pageNumber - 1
      };
    },
    getQueryStringParms: function(params) {
      return Object.keys(params).reduce(
        (accumulator, currentKey) =>
          `${accumulator}${accumulator ? "&" : ""}${currentKey}=${
            params[currentKey]
          }`,
        ""
      );
    },
    getMediaUrl(media, maxSideSize) {
      return `${this.hostUrl}${media.permanentUrl}?maxsidesize=${maxSideSize ||
        this.maxSideSize}`;
    }
  },
  computed: {
    selectedMediaFullUrl: function() {
      return `${this.hostUrl}${this.selectedMediaUrl}?maxsidesize=${
        this.maxSideSize
      }`;
    }
  },
  created: function() {
    this.onSearch();
  }
};
</script>

<style lang="scss" scoped>
  /* styles cut for brevity */
</style>