Models.vue

<template>
  <div class="workspace models" :class="[layout, details]">
    <sidebar namespace="models"></sidebar>
    <div class="list">
      <div class="top-bar filters">
        <search-field :placeholder="i18n['Search']"
                      v-model="searchTerm"
                      @create="createModel"/>
      </div>
      <div class="pane">
        <table-layout-header>
          <div class="model-main">{{ i18n['Model'] }}</div>
          <div class="model-category">{{ i18n['Category'] }}</div>
          <div class="model-tag">{{ i18n['Tag'] }}</div>
          <div class="model-engine">{{ i18n['Engine/Chassis'] }}</div>
        </table-layout-header>
        <div class="pane-scroll" ref="scroll" @scroll="scroll" v-table-scroll>
          <ol>
            <router-link v-for="m in models"
                         :to="{name: 'models_details', params: {uid: m.uid}}"
                         active-class="active"
                         tag="li">
              <a>
                <h4>
                  <span v-html="m.manufacturer" class="model-manufacturer"></span>
                  <span v-html="m.modelname" class="model-model"></span>
                  <span v-if="m.is_active" class="model-active is-active">{{i18n['active']}}</span>
                  <span v-else class="model-active is-inactive">{{i18n['inactive']}}</span>
                </h4>
                <div class="model-category"><span class="hide-table">{{i18n['Category']}}:</span>  <span v-html="m.category"></span></div>
                <div class="model-tag"><span class="hide-table">{{i18n['Tag']}}:</span> <span v-html="m.tag"></span></div>
                <div class="model-engine"><span class="hide-table">{{i18n['Engine/Chassis']}}:</span> <span v-html="m.motor_chassis"></span></div>
              </a>
            </router-link>
          </ol>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <modal v-if="mtModalVisible"
           :ok-title="i18n['Ok']"
           :show-cancel="true"
           @cancel="modalCancel"
           @ok="modalOk">
      <h3 slot="header">{{i18n['Create New Model']}}</h3>
      <p>{{i18n['Please select the model type you want to create.']}}</p>
      <v-select v-model="selectedType"
                :options="typeOptions">
      </v-select>
    </modal>
  </div>
</template>