Commit 1e3d3357 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FIX: table display issues due to bootrstrap-vue update

for details see the migration guide for v2.0.0:
https://github.com/bootstrap-vue/bootstrap-vue/releases/tag/v2.0.0
parent 7682749c
...@@ -247,10 +247,7 @@ ...@@ -247,10 +247,7 @@
the file is just being uploaded/imported, a spinner visualising an the file is just being uploaded/imported, a spinner visualising an
ongoing import. ongoing import.
--> -->
<template <template v-slot:cell(metadata.album)="data">
slot="metadata.album"
slot-scope="data"
>
<span v-if="data.item.source.import.state === 'aborted'"><b-badge variant="danger">Error:</b-badge></span> <span v-if="data.item.source.import.state === 'aborted'"><b-badge variant="danger">Error:</b-badge></span>
<span v-else-if="data.item.source.import.state !== 'done'"><img <span v-else-if="data.item.source.import.state !== 'done'"><img
src="../assets/radio.gif" src="../assets/radio.gif"
...@@ -265,10 +262,7 @@ ...@@ -265,10 +262,7 @@
the file is just being uploaded/imported, the current phase the file is just being uploaded/imported, the current phase
of the ongoing import (fetching or normalizing). of the ongoing import (fetching or normalizing).
--> -->
<template <template v-slot:cell(metadata.title)="data">
slot="metadata.title"
slot-scope="data"
>
<span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span> <span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
<span v-else-if="data.item.source.import.state === 'aborted'">import was aborted</span> <span v-else-if="data.item.source.import.state === 'aborted'">import was aborted</span>
<span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span> <span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span>
...@@ -278,10 +272,7 @@ ...@@ -278,10 +272,7 @@
This column displays either the duration of the audio file, or, if This column displays either the duration of the audio file, or, if
the file is just being uploaded/imported, the current progress. the file is just being uploaded/imported, the current progress.
--> -->
<template <template v-slot:cell(duration)="data">
slot="duration"
slot-scope="data"
>
<!-- In case the import is already done just print a pretty duration --> <!-- In case the import is already done just print a pretty duration -->
<div v-if="data.item.source.import.state === 'done'"> <div v-if="data.item.source.import.state === 'done'">
{{ prettyNanoseconds(data.value) }} {{ prettyNanoseconds(data.value) }}
...@@ -309,10 +300,7 @@ ...@@ -309,10 +300,7 @@
This column displays the size of the audio file, if the file is This column displays the size of the audio file, if the file is
already fully imported. Otherwise we'll just leave it empty. already fully imported. Otherwise we'll just leave it empty.
--> -->
<template <template v-slot:cell(size)="data">
slot="size"
slot-scope="data"
>
<span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span> <span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span>
</template> </template>
...@@ -320,10 +308,7 @@ ...@@ -320,10 +308,7 @@
This column displays the available button for actions the user can This column displays the available button for actions the user can
take on this file (e.g. editing and deleting). take on this file (e.g. editing and deleting).
--> -->
<template <template v-slot:cell(actions)="data">
slot="actions"
slot-scope="data"
>
<b-button-group size="sm"> <b-button-group size="sm">
<b-button @click="editFile(data.item.id)"> <b-button @click="editFile(data.item.id)">
Edit Edit
...@@ -411,10 +396,7 @@ ...@@ -411,10 +396,7 @@
Here we just use the array index, because the playlist entries Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field are ordered as an array, without the need for an extra id field
--> -->
<template <template v-slot:cell(id)="data">
slot="id"
slot-scope="data"
>
{{ data.index + 1 }}. {{ data.index + 1 }}.
</template> </template>
...@@ -422,10 +404,7 @@ ...@@ -422,10 +404,7 @@
Based on the entry content (either file or uri), we display Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is a small badge indicating which type of source this is
--> -->
<template <template v-slot:cell(type)="data">
slot="type"
slot-scope="data"
>
<b-badge <b-badge
v-if="data.item.file" v-if="data.item.file"
variant="success" variant="success"
...@@ -455,10 +434,7 @@ ...@@ -455,10 +434,7 @@
<!-- Column: Source <!-- Column: Source
Here we display where this playlist entry is coming from Here we display where this playlist entry is coming from
--> -->
<template <template v-slot:cell(source)="data">
slot="source"
slot-scope="data"
>
<span v-if="data.item.file"> <span v-if="data.item.file">
{{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }} {{ getFileTitleForPlaylist(data.item.file.show, data.item.file.id) }}
<small><i>( file://{{ data.item.file.show }}/{{ data.item.file.id }} )</i></small> <small><i>( file://{{ data.item.file.show }}/{{ data.item.file.id }} )</i></small>
...@@ -471,10 +447,7 @@ ...@@ -471,10 +447,7 @@
<!-- Column: Actions <!-- Column: Actions
Finally some buttons to reorder or delete playlist entries Finally some buttons to reorder or delete playlist entries
--> -->
<template <template v-slot:cell(actions)="data">
slot="actions"
slot-scope="data"
>
<b-button-group size="sm"> <b-button-group size="sm">
<b-button <b-button
:disabled="data.index === 0" :disabled="data.index === 0"
...@@ -607,10 +580,7 @@ ...@@ -607,10 +580,7 @@
<!-- Column: Entries <!-- Column: Entries
This column displays the number of entries of the playlist. This column displays the number of entries of the playlist.
--> -->
<template <template v-slot:cell(entries)="data">
slot="entries"
slot-scope="data"
>
{{ data.value.length }} items {{ data.value.length }} items
<b-button <b-button
v-b-tooltip.html="playlistToolTip(data.value)" v-b-tooltip.html="playlistToolTip(data.value)"
...@@ -624,10 +594,7 @@ ...@@ -624,10 +594,7 @@
<!-- Column: Last edit <!-- Column: Last edit
This column lists the last date this playlist was changed. This column lists the last date this playlist was changed.
--> -->
<template <template v-slot:cell(updated)="data">
slot="updated"
slot-scope="data"
>
{{ prettyDateTime(data.value) }} {{ prettyDateTime(data.value) }}
</template> </template>
...@@ -635,10 +602,7 @@ ...@@ -635,10 +602,7 @@
This column displays the available buttons for actions the user can This column displays the available buttons for actions the user can
take on this playlist (e.g. editing and deleting). take on this playlist (e.g. editing and deleting).
--> -->
<template <template v-slot:cell(actions)="data">
slot="actions"
slot-scope="data"
>
<b-button-group size="sm"> <b-button-group size="sm">
<b-button @click="editPlaylist(data.item.id)"> <b-button @click="editPlaylist(data.item.id)">
Edit Edit
......
...@@ -214,33 +214,21 @@ ...@@ -214,33 +214,21 @@
:items="notesTableArray" :items="notesTableArray"
> >
<!-- Title of the timeslot (if already set) --> <!-- Title of the timeslot (if already set) -->
<template <template v-slot:cell(title)="data">
slot="title"
slot-scope="data"
>
<span v-if="data.value">{{ data.value }}</span> <span v-if="data.value">{{ data.value }}</span>
<span v-else><small><i>(none set)</i></small></span> <span v-else><small><i>(none set)</i></small></span>
</template> </template>
<!-- Date and time when this timeslot starts --> <!-- Date and time when this timeslot starts -->
<template <template v-slot:cell(starts)="data">
slot="starts"
slot-scope="data"
>
{{ data.value }} {{ data.value }}
</template> </template>
<!-- The duration of this timeslot --> <!-- The duration of this timeslot -->
<template <template v-slot:cell(duration)="data">
slot="duration"
slot-scope="data"
>
{{ data.value }} {{ data.value }}
</template> </template>
<!-- And here all the buttons for editing and doing other things <!-- And here all the buttons for editing and doing other things
with the displayed timeslot --> with the displayed timeslot -->
<template <template v-slot:cell(options)="data">
slot="options"
slot-scope="data"
>
<span <span
class="timeslotEditLink" class="timeslotEditLink"
@click="editTimeslotNote(data.item.options.id, data.item.options.schedule)" @click="editTimeslotNote(data.item.options.id, data.item.options.schedule)"
......
...@@ -29,10 +29,7 @@ ...@@ -29,10 +29,7 @@
<!-- Column: Entries <!-- Column: Entries
This column displays the number of entries of the playlist. This column displays the number of entries of the playlist.
--> -->
<template <template v-slot:cell(entries)="data">
slot="entries"
slot-scope="data"
>
{{ data.value.length }} items {{ data.value.length }} items
<b-button <b-button
v-b-tooltip.html="playlistToolTip(data.value)" v-b-tooltip.html="playlistToolTip(data.value)"
...@@ -47,10 +44,7 @@ ...@@ -47,10 +44,7 @@
This column displays the available buttons for actions the user can This column displays the available buttons for actions the user can
take on this playlist (e.g. editing and deleting). take on this playlist (e.g. editing and deleting).
--> -->
<template <template v-slot:cell(actions)="data">
slot="actions"
slot-scope="data"
>
<b-button-group size="sm"> <b-button-group size="sm">
<b-button <b-button
v-if="data.item.id !== timeslotObject.playlist_id" v-if="data.item.id !== timeslotObject.playlist_id"
......
...@@ -125,28 +125,16 @@ ...@@ -125,28 +125,16 @@
:items="owners" :items="owners"
:fields="ownersTableFields" :fields="ownersTableFields"
> >
<template <template v-slot:cell(name)="data">
slot="name"
slot-scope="data"
>
{{ data.item.first_name }} {{ data.item.last_name }} {{ data.item.first_name }} {{ data.item.last_name }}
</template> </template>
<template <template v-slot:cell(username)="data">
slot="username"
slot-scope="data"
>
<small>{{ data.value }}</small> <small>{{ data.value }}</small>
</template> </template>
<template <template v-slot:cell(email)="data">
slot="email"
slot-scope="data"
>
<small>{{ data.value }}</small> <small>{{ data.value }}</small>
</template> </template>
<template <template v-slot:cell(options)="data">
slot="options"
slot-scope="data"
>
<b-button <b-button
variant="danger" variant="danger"
size="sm" size="sm"
...@@ -177,28 +165,16 @@ ...@@ -177,28 +165,16 @@
:items="users" :items="users"
:fields="ownersTableFields" :fields="ownersTableFields"
> >
<template <template v-slot:cell(name)="data">
slot="name"
slot-scope="data"
>
{{ data.item.first_name }} {{ data.item.last_name }} {{ data.item.first_name }} {{ data.item.last_name }}
</template> </template>
<template <template v-slot:cell(username)="data">
slot="username"
slot-scope="data"
>
<small>{{ data.value }}</small> <small>{{ data.value }}</small>
</template> </template>
<template <template v-slot:cell(email)="data">
slot="email"
slot-scope="data"
>
<small>{{ data.value }}</small> <small>{{ data.value }}</small>
</template> </template>
<template <template v-slot:cell(options)="data">
slot="options"
slot-scope="data"
>
<b-button <b-button
variant="success" variant="success"
size="sm" size="sm"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment