Move vue views from Card to Sections

dashboard/src/components/VolumesView.vue

@@ -79,9 +79,11 @@
       </form>
     </Dialog>
 
-    <h1 class="section-header">{{ $t('volumes.title') }} <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button></h1>
+    <Section :title="$t('volumes.title')">
+      <template #header-buttons>
+        <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
+      </template>
 
-    <Card>
       <div v-html="$t('volumes.description')"></div>
       <br/>
       <TableView :columns="columns" :model="volumes" :busy="busy">
@@ -104,7 +106,7 @@
           </div>
         </template>
       </TableView>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -112,7 +114,7 @@
 
 import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
 
-import Card from  './Card.vue';
+import Section from  './Section.vue';
 
 import { createVolumesModel } from '../models/VolumesModel.js';
 
@@ -126,7 +128,7 @@ export default {
   components: {
     Button,
     ButtonGroup,
-    Card,
+    Section,
     Checkbox,
     Dialog,
     Dropdown,