Fetching AWS Services Information on Demand

aws-service-info.vue

<template>
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm12 d-flex>
          <v-autocomplete
           :items="services"
           label="AWS Services"
           v-model="selectedService"
           item-text="name"
           v-on:change="serviceSelected"
         
          ></v-autocomplete>
      </v-flex>
      </v-layout>
      <v-card v-if="selectedService">
        <v-card-title>
            <div class="serviceHeader">
              <h3>
                {{selectedService.name}}
              </h3> 
            </div>
            <div class="serviceSubtitle" v-if="selectedService.shortDescription">
                <p>{{selectedService.shortDescription}}</p>
            </div>
            <div class="categoryBadge">
                <v-chip color="orange" text-color="white">{{selectedService.category}}</v-chip>
                
            </div>
            <div class="tldrText" v-if="selectedService.tLDR">
                <h3>Summary</h3>
                <p>
                   {{selectedService.tLDR}} 
                </p>
            </div>
                
                
        </v-card-title>
        <v-card-text>{{selectedService.description}}</v-card-text>
        <v-card-actions class="actions">
              <v-btn class="" :href="selectedService.link" target="_blank">More Info</v-btn>
              <p><span>Released:</span> {{selectedService.date}}</p>
              <p><span>Status:</span> {{selectedService.status}}</p>
        </v-card-actions>
      </v-card>
    </v-container>
    
</template>
<script>
    module.exports = {
        name: 'AWSService',
        props: {
            service: {
                type: Object,
                default:null
            }
        },
        data: function () {
          return {
              services: [],
              selectedService: null
          }
        },
        mounted: function () {
            if (this.service) {
                this.selectedService = this.service;
                this.fetchServices();
            } else {
                this.fetchServices();
            }
            
        },
        methods: {
            fetchServices() {
                this.$http.get('https://api.sheety.co/f26cd530-a12e-44fe-aee1-00aa6880719f')
                .then(function(result){
                    this.services = result.body;
                }, function(error){
                    console.log(error.description);
                });
            },
            serviceSelected() {
                // this.selectedService = this.service;
                console.log(this.selectedService);
                let result = this.services.filter(obj => {
                  return obj.name === this.selectedService;
                })
                console.log(result);
                this.selectedService = result[0];
                this.$emit('update', {service: this.selectedService});
            }
            
        },
        computed: {}
    }
</script>


<style scoped>
    .serviceHeader {
        width: 80%;
    }
    
    .tldrText {
        background: rgb(230, 252, 255);
        padding: 8px;
        
    }
    
    .categoryBadge {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .serviceSubtitle {
        width: 100%;
    }
    .actionLinks a {
        text-align: center !important;
    }
    
    .actions p {
        margin: 0 10px 0 10px;
    }
    .actions p span {
        font-weight: 900;
    }
</style>