Mercurial > gemma
diff client/src/components/systemconfiguration/PDFTemplates.vue @ 2462:9ae2a2f758bb
client: make use of new table header/body components
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 04 Mar 2019 14:50:23 +0100 |
| parents | 408e0f4d4008 |
| children | 24bab584f0a1 |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/PDFTemplates.vue Mon Mar 04 13:53:09 2019 +0100 +++ b/client/src/components/systemconfiguration/PDFTemplates.vue Mon Mar 04 14:50:23 2019 +0100 @@ -11,34 +11,27 @@ /> </div> <div class="mt-1 border-bottom pb-4"> - <transition name="fade"> - <table class="table table-sm table-hover" v-if="templates.length"> - <thead> - <tr> - <th><translate>Name</translate></th> - <th><translate>Date</translate></th> - <th><translate>Country</translate></th> - <th></th> - </tr> - </thead> - <transition-group name="fade" tag="tbody"> - <tr v-for="template in templates" :key="template.name"> - <td>{{ template.name }}</td> - <td>{{ template.time }}</td> - <td v-if="template.country">{{ template.country }}</td> - <td v-else><i>global</i></td> - <td class="text-right"> - <button - class="btn btn-sm btn-dark" - @click="deleteTemplate(template)" - > - <font-awesome-icon icon="trash" /> - </button> - </td> - </tr> - </transition-group> - </table> - </transition> + <UITableHeader + :columns="[ + { id: 'name', title: 'Name', class: 'col-4' }, + { id: 'date', title: 'Date', class: 'col-4' }, + { id: 'country', title: 'Country', class: 'col-2' } + ]" + :sortable="false" + /> + <UITableBody :data="templates" v-slot="{ item: template }"> + <div class="py-2 col-4">{{ template.name }}</div> + <div class="py-2 col-4">{{ template.time }}</div> + <div class="py-2 col-2" v-if="template.country"> + {{ template.country }} + </div> + <div class="py-2 col-2" v-else><i>global</i></div> + <div class="col py-2 text-right"> + <button class="btn btn-sm btn-dark" @click="deleteTemplate(template)"> + <font-awesome-icon icon="trash" /> + </button> + </div> + </UITableBody> <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()"> <font-awesome-icon icon="spinner"