|
|
@@ -7,16 +7,6 @@ A data table for the parameters page
|
|
|
<h4 v-if="title" class="align-self-center">
|
|
|
{{ title }}
|
|
|
</h4>
|
|
|
- <div class="flex-grow-1" />
|
|
|
-
|
|
|
- <v-btn
|
|
|
- v-if="smAndUp && actions.includes(TABLE_ACTION.ADD)"
|
|
|
- prepend-icon="fa fa-plus"
|
|
|
- class="theme-neutral"
|
|
|
- @click="emit('addClicked')"
|
|
|
- >
|
|
|
- {{ i18n.t('add') }}
|
|
|
- </v-btn>
|
|
|
</div>
|
|
|
|
|
|
<v-table>
|
|
|
@@ -25,7 +15,7 @@ A data table for the parameters page
|
|
|
<td v-for="col in columns">
|
|
|
{{ col.label }}
|
|
|
</td>
|
|
|
- <td>{{ i18n.t('actions') }}</td>
|
|
|
+ <td></td>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody v-if="items">
|
|
|
@@ -40,22 +30,44 @@ A data table for the parameters page
|
|
|
{{ item[col.property] }}
|
|
|
</td>
|
|
|
|
|
|
- <td class="d-flex flex-row actions-cell">
|
|
|
- <slot name="actions" :item="item">
|
|
|
- <v-btn
|
|
|
- v-if="actions.includes(TABLE_ACTION.EDIT)"
|
|
|
- :flat="true"
|
|
|
- icon="fa fa-pen"
|
|
|
- class="mr-3"
|
|
|
- @click="emit('editClicked', item)"
|
|
|
- />
|
|
|
- <v-btn
|
|
|
- v-if="actions.includes(TABLE_ACTION.DELETE)"
|
|
|
- :flat="true"
|
|
|
- icon="fas fa-trash"
|
|
|
- @click="emit('deleteClicked', item)"
|
|
|
- />
|
|
|
- </slot>
|
|
|
+ <td class="d-flex flex-row justify-center actions-cell">
|
|
|
+ <v-menu
|
|
|
+ min-width="120"
|
|
|
+ location="end"
|
|
|
+ class="action-menu"
|
|
|
+ >
|
|
|
+ <template v-slot:activator="{ props }">
|
|
|
+ <v-btn
|
|
|
+ v-if="actions.includes(TABLE_ACTION.EDIT) || actions.includes(TABLE_ACTION.DELETE)"
|
|
|
+ v-bind="props"
|
|
|
+ :flat="true"
|
|
|
+ icon="fas fa-ellipsis-vertical"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <v-list>
|
|
|
+ <v-list-item
|
|
|
+ v-if="actions.includes(TABLE_ACTION.EDIT)"
|
|
|
+ @click="emit('editClicked', item)"
|
|
|
+ >
|
|
|
+ <v-list-item-title>
|
|
|
+ <v-icon>fas fa-pen</v-icon>
|
|
|
+ {{ $t("edit") }}
|
|
|
+ </v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+
|
|
|
+ <v-list-item
|
|
|
+ v-if="actions.includes(TABLE_ACTION.DELETE)"
|
|
|
+ @click="emit('deleteClicked', item)"
|
|
|
+ class="theme-danger"
|
|
|
+ >
|
|
|
+ <v-list-item-title icon="fas fa-trash">
|
|
|
+ <v-icon>fas fa-trash</v-icon>
|
|
|
+ {{ $t("delete") }}
|
|
|
+ </v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+ </v-list>
|
|
|
+ </v-menu>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
@@ -68,8 +80,7 @@ A data table for the parameters page
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</v-table>
|
|
|
-
|
|
|
- <div class="d-flex justify-end my-3" v-if="xs && actions.includes(TABLE_ACTION.ADD)">
|
|
|
+ <div v-if="actions.includes(TABLE_ACTION.ADD)" class="d-flex justify-center my-3">
|
|
|
<v-btn
|
|
|
prepend-icon="fa fa-plus"
|
|
|
class="theme-neutral"
|
|
|
@@ -171,13 +182,11 @@ const columns: ComputedRef<Array<ColumnDefinition>> = computed(() => {
|
|
|
.container {
|
|
|
//max-width: 1000px;
|
|
|
//margin: 0 auto;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 65%;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
.v-table {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
thead {
|
|
|
color: rgb(var(--v-theme-neutral-strong));
|
|
|
font-weight: 600;
|
|
|
@@ -191,6 +200,13 @@ const columns: ComputedRef<Array<ColumnDefinition>> = computed(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ :deep(tr:hover) {
|
|
|
+ .fa-ellipsis-vertical {
|
|
|
+ color: rgb(var(--v-theme-on-neutral-soft));
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
th, td {
|
|
|
padding: 10px;
|
|
|
text-align: left;
|
|
|
@@ -201,8 +217,23 @@ const columns: ComputedRef<Array<ColumnDefinition>> = computed(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.action-menu {
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .v-list {
|
|
|
+ top: 24px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-icon {
|
|
|
+ opacity: 0.7;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
:deep(.actions-cell .v-icon) {
|
|
|
- color: rgb(var(--v-theme-neutral-strong));
|
|
|
+ color: rgb(var(--v-theme-on-neutral));
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
</style>
|