Template

(function (internalName) {
    var internalID = internalName;
    return {
        name: internalID,
        // size: 'xs12 md12',
        component: Vue.component(internalID, {
            props: [],
            data:
                function () {
                    return {
                        moduleName: internalID,
                        contract_info: null,
                        contractLoading: true
                    }
                },
            mounted() {
                console.log("WIDGETTICKET_Contract loaded!")
                this.getContractInfo();

            },
            activated() {
                console.log("Module Y activated")
            },
            deactivated() {
                console.log("Module Y deactivated")
                // this.$destroy();
            },
            methods: {
                initialize() {

                },
                getContractInfo() {
                    axios.get(this.$store.getters["globalConfig/OTRS_URL"] + `customer.pl?Action=ContractWidget;Subaction=GetContractInfo;Tn=${this.$route.params.ticketNumber}`).then((response) => {
                        if (response.data.success === false) {
                            this.contract_info = null
                            this.contractLoading = false
                        } else {
                            this.contract_info = response.data.information
                            this.contractLoading = false
n                        }
                    })
                }
            },
            computed: {
                widgetTitle() {
                    return this.$t('Service information')
                },
                accountedTime() {
                    return this.contract_info["Remaining time"].accounted_time
                },
                subscriptionHoursAmount() {
                    return this.contract_info["Remaining time"].subscription_hours_amount
                },
                leftTime() {
                    return this.contract_info["Remaining time"].left_time
                },
                
                exceeded_text() {
                    let text = this.$t("left");
                    let color = "green"
                    if (this.contract_info["Remaining time"].exceeded) {
                        text = this.$t("exceeded")
                        color = "red"
                    }
                    return {text, color}
                },

                priorityKeys: function() {
                  var contract_information = this.contract_info

                   let keysSorted = Object.keys(contract_information).sort(function(a,b){
                    return contract_information[b]['priority']-contract_information[a]['priority']})
                   
                   return keysSorted
                }


            },
            // language=HTML
            template: `
            `
        }),
    }

}("CustomModuleName_DynamicID"));

 

<v-flex xs12 md12>
                    <material-card
                            color="primary"
                            :title="widgetTitle"
                            style="margin-top:0px">
                        <v-list two-line v-if="contract_info !== null">
                            <v-list-tile v-for="key in priorityKeys">
                                <v-list-tile-content>
                                    <v-list-tile-title>
                                        <span v-if="contract_info[key].accounted_time">

                                            {{accountedTime}}{{$t('h')}}/{{subscriptionHoursAmount}}{{$t('h')}}

                                            <span :style="{color:exceeded_text.color, fontWeight:'bold'}">({{exceeded_text.text}} {{leftTime}} {{$t('h')}})</span>
                                        </span>
                                        <span v-else>{{contract_info[key].value}}</span>
                                    </v-list-tile-title>
                                    <v-list-tile-sub-title>
                                        {{$t(key)}}
                                    </v-list-tile-sub-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </v-list>
                        <div v-else-if="contractLoading == true" style="align-items: center">
                            <span> {{$t('Contract loading...')}}</span>
                        </div>
                        <div v-else style="text-align:center">
                            <span :style="{fontWeight: 'bold'}"> {{$t('No service assigned')}} </span>
                        </div>
                    </material-card>
                </v-flex>