{"version":3,"file":"tag-articles-B0a_FZEq.js","sources":["../../../app/javascript/components/tag-articles.vue?vue&type=template&lang.js","../../../app/javascript/components/tag-articles.vue"],"sourcesContent":["\n<div class=\"tag-container\">\n\n  <div class=\"tag-results-title\">\n    <h2 class=\"tag-results-count\">{{ tag.articles_count }} Results <span>for</span></h2>\n    <h1 class=\"tag-results-query\">{{ tag.name }}</h1>\n  </div>\n\n    <div class=\"tag-results\">\n      <a v-for=\"(article, index) in articles\" :key=\"index\" :href=\"`${article.url}`\">\n        <div class=\"tag-result\">\n          <h4 class=\"tag-result-title\">{{ article.title }}</h4>\n          <div class=\"tag-result-body\">\n            {{ article.summary }}\n          </div>\n        </div>\n      </a> \n    </div>\n\n    <div class=\"tag-results-show-more\">\n      <div class=\"tag-results-stats\" v-if=\"tag.articles_count > 0\">\n        Showing {{ articles.length }} of {{ tag.articles_count }} Results\n      </div>\n      <button v-if=\"hasMore\" @click=\"fetchMore\" class=\"tag-results-show-more-button\" >\n        Show More\n      </button>\n    </div>\n  </div>\n</div>\n","<template>\n  <div class=\"tag-container\">\n\n    <div class=\"tag-results-title\">\n      <h2 class=\"tag-results-count\">{{ tag.articles_count }} Results <span>for</span></h2>\n      <h1 class=\"tag-results-query\">{{ tag.name }}</h1>\n    </div>\n\n      <div class=\"tag-results\">\n        <a v-for=\"(article, index) in articles\" :key=\"index\" :href=\"`${article.url}`\">\n          <div class=\"tag-result\">\n            <h4 class=\"tag-result-title\">{{ article.title }}</h4>\n            <div class=\"tag-result-body\">\n              {{ article.summary }}\n            </div>\n          </div>\n        </a> \n      </div>\n\n      <div class=\"tag-results-show-more\">\n        <div class=\"tag-results-stats\" v-if=\"tag.articles_count > 0\">\n          Showing {{ articles.length }} of {{ tag.articles_count }} Results\n        </div>\n        <button v-if=\"hasMore\" @click=\"fetchMore\" class=\"tag-results-show-more-button\" >\n          Show More\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Api from \"../utils/api\"\n\nexport default {\n  props: {\n    tag: Object,\n  },\n\n  data() {\n    return {\n      articles: [],\n      offset: 0,\n      limit: 8,\n    };\n  },\n\n  mounted() {\n    this.fetch();\n  },\n\n  methods: {\n    fetch() {\n      this.loading = true\n      this.hasMore = false\n      Api.get('/articles', { params: { \n        tag_id: this.tag.id,\n        offset: 0,\n        limit: this.limit\n      }})\n        .then((response) => {\n          this.articles = response.data.articles\n          this.hasMore = response.data.has_more\n          this.loading = false\n        }).catch((e) => {\n          this.loading = false;\n          console.log(e.response)\n          alert(\"Sorry, something went wrong\")\n        });\n    },\n\n    fetchMore() {\n      this.offset += this.limit;\n      Api.get('/articles', { params: { \n        tag_id: this.tag.id,\n        offset: this.offset,\n        limit: this.limit\n      }})\n        .then((response) => {\n          this.articles = [...this.articles, ...response.data.articles]\n          this.hasMore = response.data.has_more\n          this.loading = false\n        }).catch((e) => {\n          this.loading = false;\n          console.log(e.response)\n          alert(\"Sorry, something went wrong\")\n        });      \n    },     \n  }\n};\n</script>\n\n<style scoped lang=\"scss\">\n.tag-container {\n  padding: 0px;\n}\n.tag-results-title {\n  .tag-results-count {\n    font-family: 'Inter', Arial, Helvetica, sans-serif;\n    font-style:  normal;\n    font-weight: 700;\n    \n    font-size: 16px;\n    line-height: 33px;\n    color: #3256FF;\n\n    span {\n      color: #c2c2dc;\n    }\n  }\n  .tag-results-query {\n    font-family: 'Inter', Arial, Helvetica, sans-serif;\n    font-style:  normal;\n    font-weight: 700;\n    \n    font-size: 31px;\n    line-height: 33px;\n    color: #16152E; \n    margin-bottom: 120px;\n    margin-top: 26px;\n  }\n}\n.tag-results {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-column-gap: 90px;\n  grid-row-gap: 60px;\n\n  @media screen and (max-width: 700px) {\n    grid-template-columns: 1fr;\n  }\n}\n.tag-result {\n  padding-top: 25px;\n  border-top: 1px solid #DBDBDB;\n  cursor: pointer;\n\n  .tag-result-title {\n    font-family: 'Inter', Arial, Helvetica, sans-serif;\n    font-style:  normal;\n    font-weight: 700;\n    \n    font-size: 16px;\n    line-height: 29px;\n    color: #16152E;\n  }\n\n  .tag-result-type {\n    background-color: #F4E9FB;\n    color: #CB93ED;\n    display: inline-block;\n    padding: 10px 13px;\n    margin-top: 12px;\n    margin-bottom: 15px;\n    border-radius: 4px;\n    font-family: 'Inter-SemiBold', Arial, Helvetica, sans-serif;\n    font-size: 12px;\n  }\n  .tag-result-body {\n    font-family: 'Inter', Arial, Helvetica, sans-serif;\n    font-style:  normal;\n    font-weight: 400;\n    \n    font-size: 14px;\n    line-height: 25px;\n    color: #6d6d7e;\n  }\n}\n.tag-results-show-more {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding-bottom: 120px;\n}\n.tag-results-stats {\n  color: #c2c2dc;\n  font-family: 'Inter', Arial, Helvetica, sans-serif;\n  font-style:  normal;\n  font-weight: 700;\n  \n  font-size: 14px;\n  line-height: 25px;\n  margin-top: 75px;\n  margin-bottom: 20px;\n}\n\n.tag-results-show-more-button {\n  display: block;\n  padding: 20px 27px;\n  border: 1px solid #DFA9FF;\n  border-radius: 30px;\n  cursor: pointer;\n  font-family: 'Inter', Arial, Helvetica, sans-serif;\n  font-style:  normal;\n  font-weight: 500;\n  \n  font-size: 13px;\n  color: black;\n}\n</style>\n<style lang=\"scss\">\n.ais-Snippet-highlighted {\n  // font-weight: bold;\n  background-color: #f7f2a3;\n}\n</style>"],"names":["render","_vm","_h","_c","article","index","staticRenderFns","__vue2_script","Api","response","e"],"mappings":"2HAAA,IAAIA,EAAS,UAAY,CACvB,IAAIC,EAAI,KACJC,EAAGD,EAAI,eACPE,EAAGF,EAAI,MAAM,IAAIC,EAErB,OAAOC,EAAG,MAAO,CACf,YAAa,eACjB,EAAK,CAACA,EAAG,MAAO,CACZ,YAAa,mBACjB,EAAK,CAACA,EAAG,KAAM,CACX,YAAa,mBACjB,EAAK,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,IAAI,cAAc,EAAI,WAAW,EAAGE,EAAG,OAAQ,CAACF,EAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAGE,EAAG,KAAM,CAChG,YAAa,mBACd,EAAE,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAGE,EAAG,MAAO,CAC9C,YAAa,aACjB,EAAKF,EAAI,GAAGA,EAAI,SAAU,SAAUG,EAASC,EAAO,CAChD,OAAOF,EAAG,IAAK,CACb,IAAKE,EACL,MAAO,CACL,KAAQ,GAAGD,EAAQ,GAAG,EAC9B,CACA,EAAO,CAACD,EAAG,MAAO,CACZ,YAAa,YACnB,EAAO,CAACA,EAAG,KAAM,CACX,YAAa,kBACd,EAAE,CAACF,EAAI,GAAGA,EAAI,GAAGG,EAAQ,KAAK,CAAC,CAAC,CAAC,EAAGD,EAAG,MAAO,CAC7C,YAAa,iBACd,EAAE,CAACF,EAAI,GAAG,IAAMA,EAAI,GAAGG,EAAQ,OAAO,EAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACrD,CAAA,EAAG,CAAC,EAAGD,EAAG,MAAO,CAChB,YAAa,uBACjB,EAAK,CAACF,EAAI,IAAI,eAAiB,EAAIE,EAAG,MAAO,CACzC,YAAa,mBACd,EAAE,CAACF,EAAI,GAAG,YAAcA,EAAI,GAAGA,EAAI,SAAS,MAAM,EAAI,OAASA,EAAI,GAAGA,EAAI,IAAI,cAAc,EAAI,WAAW,CAAC,CAAC,EAAIA,EAAI,GAAI,EAAEA,EAAI,QAAUE,EAAG,SAAU,CACrJ,YAAa,+BACb,GAAI,CACF,MAASF,EAAI,SACnB,CACA,EAAK,CAACA,EAAI,GAAG,aAAa,CAAC,CAAC,EAAIA,EAAI,IAAI,CAAC,CAAC,CAAC,CAC3C,EACIK,EAAkB,CAAE,ECLxB,MAAAC,EAAA,CACA,MAAA,CACA,IAAA,MACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,CAAA,EACA,OAAA,EACA,MAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,MAAA,CACA,EAEA,QAAA,CACA,OAAA,CACA,KAAA,QAAA,GACA,KAAA,QAAA,GACAC,EAAA,IAAA,YAAA,CAAA,OAAA,CACA,OAAA,KAAA,IAAA,GACA,OAAA,EACA,MAAA,KAAA,KACA,CAAA,CAAA,EACA,KAAAC,GAAA,CACA,KAAA,SAAAA,EAAA,KAAA,SACA,KAAA,QAAAA,EAAA,KAAA,SACA,KAAA,QAAA,EACA,CAAA,EAAA,MAAAC,GAAA,CACA,KAAA,QAAA,GACA,QAAA,IAAAA,EAAA,QAAA,EACA,MAAA,6BAAA,CACA,CAAA,CACA,EAEA,WAAA,CACA,KAAA,QAAA,KAAA,MACAF,EAAA,IAAA,YAAA,CAAA,OAAA,CACA,OAAA,KAAA,IAAA,GACA,OAAA,KAAA,OACA,MAAA,KAAA,KACA,CAAA,CAAA,EACA,KAAAC,GAAA,CACA,KAAA,SAAA,CAAA,GAAA,KAAA,SAAA,GAAAA,EAAA,KAAA,QAAA,EACA,KAAA,QAAAA,EAAA,KAAA,SACA,KAAA,QAAA,EACA,CAAA,EAAA,MAAAC,GAAA,CACA,KAAA,QAAA,GACA,QAAA,IAAAA,EAAA,QAAA,EACA,MAAA,6BAAA,CACA,CAAA,CACA,CACA,CACA"}