minor style fixes

components/Layout/Parameters/Table.vue

@@ -2,7 +2,7 @@
 A data table for the parameters page
 -->
 <template>
-  <div>
+  <div class="container">
     <UiLoadingPanel v-if="pending" />
     <v-table v-else>
       <thead>
@@ -25,12 +25,12 @@ A data table for the parameters page
             {{ item[col.property] }}
           </td>
 
-          <td class="d-flex flex-row">
+          <td class="d-flex flex-row actions-cell">
             <v-btn
               v-if="actions.includes(TABLE_ACTION.EDIT)"
               :flat="true"
               icon="fa fa-pen"
-              class="cycle-edit-icon mr-3"
+              class="mr-3"
               @click="goToEditPage(item.id as number)"
             />
             <UiButtonDelete
@@ -50,15 +50,16 @@ A data table for the parameters page
         </tr>
       </tbody>
     </v-table>
-    <v-btn
-      v-if="actions.includes(TABLE_ACTION.ADD)"
-      :flat="true"
-      prepend-icon="fa fa-plus"
-      class="theme-primary mt-4"
-      @click="goToCreatePage"
-    >
-      {{ $t('add') }}
-    </v-btn>
+    <div class="d-flex justify-end" v-if="actions.includes(TABLE_ACTION.ADD)">
+      <v-btn
+        :flat="true"
+        prepend-icon="fa fa-plus"
+        class="theme-primary mt-4"
+        @click="goToCreatePage"
+      >
+        {{ $t('add') }}
+      </v-btn>
+    </div>
   </div>
 </template>
 
@@ -74,13 +75,12 @@ interface ColumnDefinition {
    * The entity's property to display in this column
    */
   property: string,
-
   /**
    * Label of the column.
    * If not provided, a translation of the property's name will be looked for.
    * If none is found, the property's name will be displayed as it is.
    */
-  label: string | null
+  label?: string
 }
 
 const props = defineProps({
@@ -101,7 +101,7 @@ const props = defineProps({
   baseRoute: {
     type: String,
     required: false,
-    default: ''
+    default: '/parameters'
   },
   /**
    * If provided, define the columns to show.
@@ -188,7 +188,7 @@ const items: ComputedRef<Array<ApiResource> | null> = computed(() => {
   if (props.columnsDefinitions !== null) {
     // Filter the columns to show
     items = items.map(item => {
-      const newItem: ApiResource = {}
+      const newItem: ApiResource = { id: item.id }
       for (const col of props.columnsDefinitions) {
         newItem[col.property] = item[col.property]
       }
@@ -210,6 +210,7 @@ const items: ComputedRef<Array<ApiResource> | null> = computed(() => {
  * @param id
  */
 const goToEditPage = (id: number) => {
+  console.log(props.baseRoute, props.model.entity, id, UrlUtils.join(props.baseRoute, props.model.entity, id))
   navigateTo(UrlUtils.join(props.baseRoute, props.model.entity, id))
 }
 
@@ -223,5 +224,38 @@ const goToCreatePage = () => {
 </script>
 
 <style scoped lang="scss">
+.container {
+  max-width: 1000px;
+}
+
+.v-table {
+  width: 100%;
+
+  thead {
+    color: rgb(var(--v-theme-neutral-strong));
+    font-weight: 600;
+
+    td {
+      border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+
+    td:last-of-type {
+      padding-left: 30px;
+    }
+  }
 
+  th, td {
+    padding: 10px;
+    text-align: left;
+  }
+
+  td:last-of-type {
+    width: 125px;
+  }
+}
+
+:deep(.actions-cell .v-icon) {
+  color: rgb(var(--v-theme-neutral-strong));
+  font-size: 18px;
+}
 </style>