Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div id="app">

<h2>Filter Options<options</h2>
<div class="filter row" style="border: 1px solid black; border-radius: 5px;">
  <div class="col checkbox-inline">
    <h3 class="filter-options">Type</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldType"
          value="CCTLD"
          checked
        />
        ccTLD
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldType"
          value="GTLD"
          checked
        />
        gTLD
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldType"
          value="NEW_GTLD"
          checked
        />
        New gTLD
      </label>
    </div>
  </div>
  <div class="col checkbox-inline">
    <h3 class="filter-options">Category</h3>
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="pagination.tldCategory" value="ADULT" />
        Adult
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="AUTOMOTIVE"
        />
        Automotive
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="BUSINESS_AND_PROFESSIONS"
        />
        Business and Professions
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="CULTURE_AND_ART"
        />
        Culture and Art
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="EDUCATION"
        />
        Education
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="ENTERTAINMENT"
        />
        Entertainment
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="FITNESS_AND_SPORTS"
        />
        Fitness and Sports
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="FINANCIAL"
        />
        Financial
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="FOOD_AND_DRINKS"
        />
        Food and Drinks
      </label>
    </div>
  </div>
  <div class="col checkbox-inline">
    <h2 style="height: 30px;"></h2>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="GENERIC"
        />
        Generic
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="HEALTH"
        />
        Health
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="LIFESTYLE"
        />
        Lifestyle
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="LOCATION"
        />
        Location
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="NATURE_AND_ENVIRONMENT"
        />
        Nature and Environment
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="REAL_ESTATE"
        />
        Real Estate
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="SHOPPING"
        />
        Shopping
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="TECHNOLOGY"
        />
        Technology
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldCategory"
          value="TRAVEL"
        />
        Travel
      </label>
    </div>
  </div>
  <div class="col checkbox-inline">
    <h3 class="filter-options">Continent</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="ANTARCTICA"
        />
        Antarctica
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="AFRICA"
        />
        Africa
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="pagination.tldContinent" value="ASIA" />
        Asia
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="EUROPE"
        />
        Europe
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="NORTH_AMERICA"
        />
        North America
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="OCEANIA"
        />
        Oceania
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldContinent"
          value="SOUTH_AMERICA"
        />
        South America
      </label>
    </div>
	<i>Other</i>
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="pagination.tldGeoPol" value="CARIBIC" />
        Caribbean
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="pagination.tldGeoPol" value="EU" />
        European Union
      </label>
    </div>
 <div class="checkbox">
      <label>
        <input type="checkbox" v-model="pagination.tldGeoPol" value="DACH" />
        D-A-CH
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.thirdlevel" /> Third Level
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">A third-level domain is the section of a domain name that is to the
left of the dot of a second-level domain (SLD) that is considered a domain extension.</span>
      </label>
    </div>
  </div>
  <div class="col checkbox-inline">
    <h3 class="filter-options">Functions</h3>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.authinfo" /> AuthInfo
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">These domains support and/or require a special "password" for certain domain transactions
such as domain transfers or domain updates.</span>
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.contactExtensions" /> Contact
        Extensions
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
 		<span class="tooltiptext">In order to register these domains, additional information in the
contact handle such as: ID card number, Company number or TLD-specific information
is required.</span>
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.dnssec" /> DNSSec
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">The registry support DNSSec functionality for these domains.</span>
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.premium" /> Premium
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
 		<span class="tooltiptext">Denotes if a registry offers premium domains which costs more than a normal registration.</span>
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.privacy" /> Privacy
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">Denotes if the domain supports the privacy service.</span>
      </label>
    </div>
    <div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.trustee" /> Trustee
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">Denotes if an optional trustee is available to fulfill the registration requirements.</span>
      </label>
    </div>
 	<div class="checkbox tooltip">
      <label>
        <input type="checkbox" v-model="pagination.autoDelete" /> AutoDelete
		<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
		<span class="tooltiptext">Denotes whether AutoDelete is optionally available for the TLD.</span>
      </label>
    </div> 
  </div>
  <div class="col checkbox-inline">
    <h3 class="filter-options">Official Language</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="AR"
        />
        Arabic
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="CN"
        />
        Chinese
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="EN"
        />
        English
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="FR"
        />
        French
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="DE"
        />
        German
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="PT"
        />
        Portuguese
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="RU"
        />
        Russian
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.tldLanguageOfOffice"
          value="ES"
        />
        Spanish
      </label>
    </div>
  </div>
</div>
			
<br>
					
<div class="filter row">
   <div class="col-md-6">
      <div class="pull-left">
         <input class="text" placeholder="TLD Search" type="text" v-model=pagination.search>
         <div class="aui-button" @click="clearSearch()"><span class="aui-icon aui-icon-small aui-iconfont-remove-label"></span></div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="pull-right">
         <label for="selectRow">Show</label>
         <select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
            <option v-for="option in rows_per_page" v-bind:value="option">
               {{ option }}
            </option>
         </select>
         <span>von {{pagination.totalItems}}</span>
         <div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
         <span>Seite {{pagination.page}} / {{maxPage}}</span> 
         <div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
      </div>
   </div>
</div>


						

<br>

<table class="relative-table wrapped confluenceTable" width="100%">
    <tr>
        <th v-for="header in headers" class="confluenceTh">{{header}}</th>
    </tr>
    <template v-for="(item,index) in items">
        <tr>
            <td class="confluenceTd">
                <template v-if="!isEmpty(item.confluencePageDe)"><a :href="'/pages/viewpage.action?pageId=' + item.confluencePageDe">{{item.label}}</a></template>
                <template v-else>{{item.label}}</template>
            </td>
            <td class="confluenceTd"><template v-if="item.tldType == 'CCTLD'">ccTLD</template><template v-if="item.tldType == 'GTLD'">gTLD</template><template v-if="item.tldType == 'NEW_GTLD'">New gTLD</template></td>
            <td class="confluenceTd"><template v-if="item.tldContinent == 'ASIA'">Asia</template><template v-else-if="item.tldContinent == 'AFRICA'">Africa</template><template v-else-if="item.tldContinent == 'NORTH_AMERICA'">North America</template><template v-else-if="item.tldContinent == 'SOUTH_AMERICA'">South America</template><template v-else-if="item.tldContinent == 'EUROPE'">Europe</template><template v-else-if="item.tldContinent == 'OCEANIA'">Oceania</template><template v-else-if="item.tldContinent == 'ANTARCTICA'">Antarctica</template><template v-else-if="item.tldContinent == 'GLOBAL'">Global</template></td>
			<td class="confluenceTd" v-show="item.country">
<img v-bind:src="'/img/'+ ( item.country && item.country.isoCode.toLowerCase())+'.svg'" height="16" width="16"> {{( item.country && item.country.countrynameEn)}}
</td>
			<td class="confluenceTd" v-show="!item.country">
<img v-bind:src="'/img/global.svg'" height="16" width="16" > Global
</td>
			<td class="confluenceTd">
		<span v-if="item.transferAuthinfo || item.transferOwnerchange" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd">
		<span v-if="item.dnssecMax > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd">
		<span v-if="item.contactExtensions.length > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd">
		<span v-if="item.privacy" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd">
		<span v-if="item.trustee" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd">
		<span v-if="item.premiumDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            <td class="confluenceTd"><div class="aui-button" @click="item.contentVisible = !item.contentVisible"><span class="aui-icon aui-icon-small aui-iconfont-more"></span></div></td>
        </tr>
<tr v-show="item.contentVisible">
    <td :colspan="headers.length" style="padding:10px; background: #e9f3f9;">
        <div class="filter row">
<div class="col-md-3">
                <h4>Technical Information</h4>
            <table>
	<tr>
        <td>Character length: </td>
        <td>{{item.charMin}} - {{item.charMax}}</td>
    </tr>
    <tr>
        <td>Numeral domains: </td>
        <td><span v-if="item.numeralDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>IDN: </td>
        <td><span v-if="item.idn.length > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>DNSSEC: </td>
        <td><span v-if="item.dnssecMax > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>DNS Check: </td>
        <td><span v-if="item.dnsCheck" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>Authinfo: </td>
        <td><span v-if="item.transferAuthinfo || item.transferOwnerchange" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>Premium Domains: </td>
        <td><span v-if="item.premiumDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>Transfer Confirmation: </td>
        <td><span v-if="item.transferConfirmation" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>Statusupdate: </td>
        <td><span v-if="item.taskStatusUpdate" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
    <tr>
        <td>Restore: </td>
        <td><span v-if="item.taskRestore" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
	<tr>
        <td>AutoDelete: </td>
        <td><span v-if="item.autoDelete" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
            <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
 	<tr v-if="item.contactExtensions.length == 0" >
        <td>Contact Extensions: </td>
        <td><span class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
    </tr>
</table>
</div>
            <div class="col-md-6">
                <h4>Note</h4>
                <template v-if="item.restrictions.length > 0">
                    <ul>
                        <template v-for="restriction in item.restrictions">
                            <li v-if="restriction.language == 'en'">
                                {{ restriction.text }}
                            </li>
                        </template>
                    </ul>
                </template>
				<p v-if="!isEmpty(item.commentEn)">{{item.commentEn}}</p>
 				<template v-if="item.restrictions.length == 0 && isEmpty(item.commentEn)">
                    <p>There are no notes for this TLD.</p>
                </template>

  			</div>
<div class="col-md-3">
    <template v-for="controller in item.dataControllers">
        <h4 v-if="controller.type == 'org'">Data processor</h4>
        <h4 v-if="controller.type == 'escrow'">Escrow</h4>
        <h4 v-if="controller.type == 'privacy'">Privacy</h4>
        <p><template v-if="!isEmpty(controller.name)">{{controller.name}}<br></template><template v-if="!isEmpty(controller.organisation)"><span v-html="controller.organisation"></span><br></template><template v-for="line in controller.address">{{line}}<br></template></p>
    </template>
</div>
 		</div>

<div class="filter row" v-if="item.contactExtensions.length > 0">
	<div class="col-md-12" style="padding-left:17.5px;">
		<div class="pull-left">Contact Extensions:</div>
		<div class="pull-left" style="padding-left:25px;">
		<p v-for="contactExtension in item.contactExtensions" style="margin-top:0px;">{{ contactExtension }}</p>
		</div>		
	</div>
</div> 
   
	<div class="filter row">
		<div class="col-md-12">		
			<h4>Optional services for this TLD:</h4>
<p>
<img src="/img/backupmx.svg" height="16" width="16"> <a href="https://www.internetx.com/server/backupmx-20/" target="_blank">BackupMX</a>, 
<img src="/img/domainsafe.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/domain-safe/" target="_blank">DomainSafe</a>, 
<img src="/img/monitoring.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/" target="_blank">Domain Monitoring</a>, 
<img src="/img/mailproxy.svg" height="16" width="16"> <a href="https://www.internetx.com/server/mailproxy-20/" target="_blank">MailProxy</a>,
<img src="/img/nameserver.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/nameserver/" target="_blank">Nameserver</a>, 
<img src="/img/nodesecure.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/nameserver/#c3344" target="_blank">NodeSecure</a>, 
<img src="/img/proceed.svg" height="16" width="16"> <a href="https://www.internetx.com/server/proceed/" target="_blank">Proceed</a>, 
<img src="/img/redirect.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/#c4302" target="_blank">Redirector</a>, 
<img src="/img/ssl.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/#c4302" target="_blank">Gratis SSL</a>
</p>  			
		</div>
	 </div>
 </td>
</tr>

    </template>
</table>
<br>
 <div class="filter row">
   <div class="col-md-6">
      
   </div>
   <div class="col-md-6">
      <div class="pull-right">
         <label for="selectRow">Show</label>
         <select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
            <option v-for="option in rows_per_page" v-bind:value="option">
               {{ option }}
            </option>
         </select>
         <span>von {{pagination.totalItems}}</span>
         <div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
         <span>Seite {{pagination.page}} / {{maxPage}}</span> 
         <div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
      </div>
   </div>
</div>
 </div>


				

<script type="text/javascript">
AJS.$("#searchForm").submit(function(e){
    return false;
});
Vue.config.devtools = true;
    var app = new Vue({
        el: '#app',
        data: {
            message: '',
            headers: ['TLD', 'Type', 'Continent', 'Country', 'AuthInfo', 'DNSSEC', 'Contact Extensions', 'Privacy', 'Trustee', 'Premium', 'More'],
            search: '',
            totalItems: 0,
            rows_per_page: [50, 100, 200, 500],
			maxPage: 0,
			pageChanged: false,
			items: [],
            pagination: {
                rowsPerPage: 50,
                descending: false,
                page: 1,
                sortBy: null,
                totalItems: 1,
                search: "",
				tldType: ['CCTLD','GTLD','NEW_GTLD'],
				tldContinent: [],
                tldCategory: [],
                tldGeoPol: [],
				tldLanguageOfOffice: [],
 				authinfo: false,
				dnssec:false,
				privacy:false,
                thirdlevel: false,
                trustee:false,
				autoDelete:false,
				premium: false,
				contactExtensions: false,
            },
        },
        mounted() {
			var privacy = location.search.split('privacy=')[1]
			if(privacy == "true"){
				this.pagination.privacy = true;
			}
 			this.getProducts();
        },
  		watch: {
            pagination: {
				handler() {
					if(!this.pageChanged){
						this.pagination.page = 1;
					}else{
						this.pageChanged = false;
  					}
					this.getProducts();
				},
				deep:true
			 }
        },      
        methods: {
            getProducts() {
console.log("Load products");
                axios.get(`https://api.autodns.com/productstore/v1/tld/_paginate?page=${this.pagination.page}&per_page=${this.pagination.rowsPerPage}`, {
                        params: {
                            keyword: this.pagination.search,
                			tldType: this.pagination.tldType,
							tldContinent: this.pagination.tldContinent,
							tldLanguageOfOffice: this.pagination.tldLanguageOfOffice,
                            tldCategory: this.pagination.tldCategory,
  							tldGeoPol: this.pagination.tldGeoPol,
							dnssec: this.pagination.dnssec,
							privacy: this.pagination.privacy,
							trustee: this.pagination.trustee,
						 	autoDelete: this.pagination.autoDelete,
                            thirdlevel: this.pagination.thirdlevel,
                            premium: this.pagination.premium,
 							authinfo: this.pagination.authinfo,
							contactExtensions: this.pagination.contactExtensions,
						 }
                    })
                    .then((response) => {
                        var data = response.data.data;
						data.forEach(function(element) {
  							element.contentVisible = false;
						});
						this.items = data;
 						this.pagination.totalItems = response.data.total;
						this.maxPage = Math.ceil(response.data.total / this.pagination.rowsPerPage)
                    })
                    .catch(() => {
                        console.log('handle server error from here');
                    });


            },
            printTimePeriod(val) {
                if (val == null) {
                    return "";
                }
                return val['period'] + val['unit'];
            },
            pageUp() {
				if(this.pagination.page + 1 <= this.maxPage){
                	this.pagination.page = this.pagination.page + 1;
				}
				this.pageChanged = true;
 			},
            pageDown() {
                this.pagination.page = this.pagination.page - 1;
                if (this.pagination.page < 1) {
                    this.pagination.page = 1;
                }
				this.pageChanged = true;
			},
            showRow(item) {
 				console.log("show data for " + item.label);
				console.log(item.contentVisible);
				item.contentVisible = !item.contentVisible;
				console.log(item.contentVisible);
            },
			isEmpty(str) {
				return (!str || 0 === str.length);
			},
			clearSearch() {
				this.pagination.search = "";
			},
 		}
    })
</script>
<style>
.checkbox-inline {
    padding: 15px;
    min-width: fit-content;
    max-width: 200px;
	min-height: 180px;
	display: inline;
	float: left;
}
.checkbox>label {
    display: inline;
	font-size: 12px;
}
.filter-options {
	height:30px;
	font-size: 14px !important;
    font-weight: bold;
}
.tooltip {
  position: relative;
  display: block;
  cursor:pointer;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  /* Position the tooltip */
  top: 135%;
  left: 50%;
  margin-left: -50px;

  position: absolute;
  z-index: 1;
  
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 20px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>