Adapt for Buefy 0.9 <b-table> scope changes
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
27c73c4646
commit
4a87d520b6
|
|
@ -16,39 +16,44 @@
|
||||||
checkable
|
checkable
|
||||||
checkbox-position="left"
|
checkbox-position="left"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="actor.id" label="ID" width="40" numeric v-slot="props">{{
|
||||||
<b-table-column field="actor.id" label="ID" width="40" numeric>{{
|
props.row.actor.id
|
||||||
props.row.actor.id
|
}}</b-table-column>
|
||||||
}}</b-table-column>
|
|
||||||
|
|
||||||
<b-table-column field="actor.type" :label="$t('Type')" width="80">
|
<b-table-column field="actor.type" :label="$t('Type')" width="80" v-slot="props">
|
||||||
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
|
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
|
||||||
<b-icon icon="account-circle" v-else />
|
<b-icon icon="account-circle" v-else />
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
|
<b-table-column
|
||||||
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
|
field="approved"
|
||||||
props.row.approved ? $t("Accepted") : $t("Pending")
|
:label="$t('Status')"
|
||||||
}}</span>
|
width="100"
|
||||||
</b-table-column>
|
sortable
|
||||||
|
centered
|
||||||
|
v-slot="props"
|
||||||
|
>
|
||||||
|
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
|
||||||
|
props.row.approved ? $t("Accepted") : $t("Pending")
|
||||||
|
}}</span>
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="actor.domain" :label="$t('Domain')" sortable>
|
<b-table-column field="actor.domain" :label="$t('Domain')" sortable>
|
||||||
<template>
|
<template v-slot:default="props">
|
||||||
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
|
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
|
||||||
props.row.actor.domain
|
props.row.actor.domain
|
||||||
}}</a>
|
}}</a>
|
||||||
<a @click="toggle(props.row)" v-else>{{
|
<a @click="toggle(props.row)" v-else>{{
|
||||||
`${props.row.actor.preferredUsername}@${props.row.actor.domain}`
|
`${props.row.actor.preferredUsername}@${props.row.actor.domain}`
|
||||||
}}</a>
|
}}</a>
|
||||||
</template>
|
</template>
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
|
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
|
||||||
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||||
timeago(props.row.updatedAt)
|
timeago(props.row.updatedAt)
|
||||||
}}</span></b-table-column
|
}}</span></b-table-column
|
||||||
>
|
>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<article>
|
<article>
|
||||||
|
|
|
||||||
|
|
@ -29,39 +29,44 @@
|
||||||
checkable
|
checkable
|
||||||
checkbox-position="left"
|
checkbox-position="left"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="targetActor.id" label="ID" width="40" numeric v-slot="props">{{
|
||||||
<b-table-column field="targetActor.id" label="ID" width="40" numeric>{{
|
props.row.targetActor.id
|
||||||
props.row.targetActor.id
|
}}</b-table-column>
|
||||||
}}</b-table-column>
|
|
||||||
|
|
||||||
<b-table-column field="targetActor.type" :label="$t('Type')" width="80">
|
<b-table-column field="targetActor.type" :label="$t('Type')" width="80" v-slot="props">
|
||||||
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
|
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
|
||||||
<b-icon icon="account-circle" v-else />
|
<b-icon icon="account-circle" v-else />
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
|
<b-table-column
|
||||||
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
|
field="approved"
|
||||||
props.row.approved ? $t("Accepted") : $t("Pending")
|
:label="$t('Status')"
|
||||||
}}</span>
|
width="100"
|
||||||
</b-table-column>
|
sortable
|
||||||
|
centered
|
||||||
|
v-slot="props"
|
||||||
|
>
|
||||||
|
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
|
||||||
|
props.row.approved ? $t("Accepted") : $t("Pending")
|
||||||
|
}}</span>
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
|
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
|
||||||
<template>
|
<template v-slot:default="props">
|
||||||
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
|
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
|
||||||
props.row.targetActor.domain
|
props.row.targetActor.domain
|
||||||
}}</a>
|
}}</a>
|
||||||
<a @click="toggle(props.row)" v-else>{{
|
<a @click="toggle(props.row)" v-else>{{
|
||||||
`${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
|
`${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
|
||||||
}}</a>
|
}}</a>
|
||||||
</template>
|
</template>
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
|
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
|
||||||
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||||
timeago(props.row.updatedAt)
|
timeago(props.row.updatedAt)
|
||||||
}}</span></b-table-column
|
}}</span></b-table-column
|
||||||
>
|
>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<article>
|
<article>
|
||||||
|
|
|
||||||
|
|
@ -760,5 +760,7 @@
|
||||||
"You have been removed from this group's members.": "You have been removed from this group's members.",
|
"You have been removed from this group's members.": "You have been removed from this group's members.",
|
||||||
"Since you are a new member, private content can take a few minutes to appear.": "Since you are a new member, private content can take a few minutes to appear.",
|
"Since you are a new member, private content can take a few minutes to appear.": "Since you are a new member, private content can take a few minutes to appear.",
|
||||||
"Leave group": "Leave group",
|
"Leave group": "Leave group",
|
||||||
"Remove": "Remove"
|
"Remove": "Remove",
|
||||||
|
"Update": "Update",
|
||||||
|
"Search…": "Search…"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -761,5 +761,7 @@
|
||||||
"You have been removed from this group's members.": "Vous avez été exclu des membres de ce groupe.",
|
"You have been removed from this group's members.": "Vous avez été exclu des membres de ce groupe.",
|
||||||
"Since you are a new member, private content can take a few minutes to appear.": "Étant donné que vous êtes un·e nouveau·elle membre, le contenu privé peut mettre quelques minutes à arriver.",
|
"Since you are a new member, private content can take a few minutes to appear.": "Étant donné que vous êtes un·e nouveau·elle membre, le contenu privé peut mettre quelques minutes à arriver.",
|
||||||
"Leave group": "Quitter le groupe",
|
"Leave group": "Quitter le groupe",
|
||||||
"Remove": "Exclure"
|
"Remove": "Exclure",
|
||||||
|
"Update": "Éditer",
|
||||||
|
"Search…": "Rechercher…"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -71,16 +71,14 @@
|
||||||
:per-page="EVENTS_PER_PAGE"
|
:per-page="EVENTS_PER_PAGE"
|
||||||
@page-change="onOrganizedEventsPageChange"
|
@page-change="onOrganizedEventsPageChange"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
|
||||||
<b-table-column field="beginsOn" :label="$t('Begins on')">
|
{{ props.row.beginsOn | formatDateTimeString }}
|
||||||
{{ props.row.beginsOn | formatDateTimeString }}
|
</b-table-column>
|
||||||
</b-table-column>
|
<b-table-column field="title" :label="$t('Title')" v-slot="props">
|
||||||
<b-table-column field="title" :label="$t('Title')">
|
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
||||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
{{ props.row.title }}
|
||||||
{{ props.row.title }}
|
</router-link>
|
||||||
</router-link>
|
</b-table-column>
|
||||||
</b-table-column>
|
|
||||||
</template>
|
|
||||||
<template slot="empty">
|
<template slot="empty">
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="content has-text-grey has-text-centered">
|
<div class="content has-text-grey has-text-centered">
|
||||||
|
|
@ -107,16 +105,14 @@
|
||||||
:per-page="EVENTS_PER_PAGE"
|
:per-page="EVENTS_PER_PAGE"
|
||||||
@page-change="onParticipationsPageChange"
|
@page-change="onParticipationsPageChange"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
|
||||||
<b-table-column field="beginsOn" :label="$t('Begins on')">
|
{{ props.row.beginsOn | formatDateTimeString }}
|
||||||
{{ props.row.beginsOn | formatDateTimeString }}
|
</b-table-column>
|
||||||
</b-table-column>
|
<b-table-column field="title" :label="$t('Title')" v-slot="props">
|
||||||
<b-table-column field="title" :label="$t('Title')">
|
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
||||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
|
{{ props.row.title }}
|
||||||
{{ props.row.title }}
|
</router-link>
|
||||||
</router-link>
|
</b-table-column>
|
||||||
</b-table-column>
|
|
||||||
</template>
|
|
||||||
<template slot="empty">
|
<template slot="empty">
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="content has-text-grey has-text-centered">
|
<div class="content has-text-grey has-text-centered">
|
||||||
|
|
|
||||||
|
|
@ -24,16 +24,16 @@
|
||||||
@page-change="onPageChange"
|
@page-change="onPageChange"
|
||||||
@filters-change="onFiltersChange"
|
@filters-change="onFiltersChange"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="preferredUsername" :label="$t('Username')" searchable>
|
||||||
<b-table-column field="preferredUsername" :label="$t('Username')" searchable>
|
<template slot="searchable" slot-scope="props">
|
||||||
<template slot="searchable" slot-scope="props">
|
<b-input
|
||||||
<b-input
|
v-model="props.filters.preferredUsername"
|
||||||
v-model="props.filters.preferredUsername"
|
placeholder="Search..."
|
||||||
placeholder="Search..."
|
icon="magnify"
|
||||||
icon="magnify"
|
size="is-small"
|
||||||
size="is-small"
|
/>
|
||||||
/>
|
</template>
|
||||||
</template>
|
<template v-slot:default="props">
|
||||||
<router-link
|
<router-link
|
||||||
class="profile"
|
class="profile"
|
||||||
:to="{ name: RouteName.ADMIN_PROFILE, params: { id: props.row.id } }"
|
:to="{ name: RouteName.ADMIN_PROFILE, params: { id: props.row.id } }"
|
||||||
|
|
@ -53,20 +53,22 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</router-link>
|
</router-link>
|
||||||
</b-table-column>
|
</template>
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="domain" :label="$t('Domain')" searchable>
|
<b-table-column field="domain" :label="$t('Domain')" searchable>
|
||||||
<template slot="searchable" slot-scope="props">
|
<template slot="searchable" slot-scope="props">
|
||||||
<b-input
|
<b-input
|
||||||
v-model="props.filters.domain"
|
v-model="props.filters.domain"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
icon="magnify"
|
icon="magnify"
|
||||||
size="is-small"
|
size="is-small"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-slot:default="props">
|
||||||
{{ props.row.domain }}
|
{{ props.row.domain }}
|
||||||
</b-table-column>
|
</template>
|
||||||
</template>
|
</b-table-column>
|
||||||
<template slot="empty">
|
<template slot="empty">
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="content has-text-grey has-text-centered">
|
<div class="content has-text-grey has-text-centered">
|
||||||
|
|
|
||||||
|
|
@ -25,19 +25,19 @@
|
||||||
@page-change="onPageChange"
|
@page-change="onPageChange"
|
||||||
@filters-change="onFiltersChange"
|
@filters-change="onFiltersChange"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="id" width="40" numeric v-slot="props">
|
||||||
<b-table-column field="id" width="40" numeric>
|
{{ props.row.id }}
|
||||||
{{ props.row.id }}
|
</b-table-column>
|
||||||
</b-table-column>
|
<b-table-column field="email" :label="$t('Email')" searchable>
|
||||||
<b-table-column field="email" :label="$t('Email')" searchable>
|
<template slot="searchable" slot-scope="props">
|
||||||
<template slot="searchable" slot-scope="props">
|
<b-input
|
||||||
<b-input
|
v-model="props.filters.email"
|
||||||
v-model="props.filters.email"
|
:placeholder="$t('Search…')"
|
||||||
placeholder="Search..."
|
icon="magnify"
|
||||||
icon="magnify"
|
size="is-small"
|
||||||
size="is-small"
|
/>
|
||||||
/>
|
</template>
|
||||||
</template>
|
<template v-slot:default="props">
|
||||||
<router-link
|
<router-link
|
||||||
class="user-profile"
|
class="user-profile"
|
||||||
:to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: props.row.id } }"
|
:to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: props.row.id } }"
|
||||||
|
|
@ -45,19 +45,24 @@
|
||||||
>
|
>
|
||||||
{{ props.row.email }}
|
{{ props.row.email }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</b-table-column>
|
</template>
|
||||||
<b-table-column field="confirmedAt" :label="$t('Confirmed at')" :centered="true">
|
</b-table-column>
|
||||||
<template v-if="props.row.confirmedAt">
|
<b-table-column
|
||||||
{{ props.row.confirmedAt | formatDateTimeString }}
|
field="confirmedAt"
|
||||||
</template>
|
:label="$t('Confirmed at')"
|
||||||
<template v-else>
|
:centered="true"
|
||||||
{{ $t("Not confirmed") }}
|
v-slot="props"
|
||||||
</template>
|
>
|
||||||
</b-table-column>
|
<template v-if="props.row.confirmedAt">
|
||||||
<b-table-column field="locale" :label="$t('Language')" :centered="true">
|
{{ props.row.confirmedAt | formatDateTimeString }}
|
||||||
{{ props.row.locale }}
|
</template>
|
||||||
</b-table-column>
|
<template v-else>
|
||||||
</template>
|
{{ $t("Not confirmed") }}
|
||||||
|
</template>
|
||||||
|
</b-table-column>
|
||||||
|
<b-table-column field="locale" :label="$t('Language')" :centered="true" v-slot="props">
|
||||||
|
{{ props.row.locale }}
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<router-link
|
<router-link
|
||||||
|
|
@ -68,9 +73,10 @@
|
||||||
>
|
>
|
||||||
<article class="media">
|
<article class="media">
|
||||||
<figure class="media-left">
|
<figure class="media-left">
|
||||||
<p class="image is-64x64">
|
<p class="image is-32x32" v-if="actor.avatar">
|
||||||
<img :src="actor.avatar.url" />
|
<img :src="actor.avatar.url" />
|
||||||
</p>
|
</p>
|
||||||
|
<b-icon v-else size="is-medium" icon="account-circle" />
|
||||||
</figure>
|
</figure>
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
|
||||||
|
|
@ -72,71 +72,69 @@
|
||||||
@page-change="(newPage) => (page = newPage)"
|
@page-change="(newPage) => (page = newPage)"
|
||||||
@sort="(field, order) => $emit('sort', field, order)"
|
@sort="(field, order) => $emit('sort', field, order)"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="actor.preferredUsername" :label="$t('Participant')" v-slot="props">
|
||||||
<b-table-column field="actor.preferredUsername" :label="$t('Participant')">
|
<article class="media">
|
||||||
<article class="media">
|
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
|
||||||
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
|
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
|
||||||
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
|
</figure>
|
||||||
</figure>
|
<b-icon
|
||||||
<b-icon
|
class="media-left"
|
||||||
class="media-left"
|
v-else-if="props.row.actor.preferredUsername === 'anonymous'"
|
||||||
v-else-if="props.row.actor.preferredUsername === 'anonymous'"
|
size="is-large"
|
||||||
size="is-large"
|
icon="incognito"
|
||||||
icon="incognito"
|
/>
|
||||||
/>
|
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
||||||
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
<div class="media-content">
|
||||||
<div class="media-content">
|
<div class="content">
|
||||||
<div class="content">
|
<span v-if="props.row.actor.preferredUsername !== 'anonymous'">
|
||||||
<span v-if="props.row.actor.preferredUsername !== 'anonymous'">
|
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
|
||||||
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
|
><br />
|
||||||
><br />
|
<span class="is-size-7 has-text-grey"
|
||||||
<span class="is-size-7 has-text-grey"
|
>@{{ usernameWithDomain(props.row.actor) }}</span
|
||||||
>@{{ usernameWithDomain(props.row.actor) }}</span
|
>
|
||||||
>
|
</span>
|
||||||
</span>
|
<span v-else>
|
||||||
<span v-else>
|
{{ $t("Anonymous participant") }}
|
||||||
{{ $t("Anonymous participant") }}
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</div>
|
||||||
</b-table-column>
|
</article>
|
||||||
<b-table-column field="role" :label="$t('Role')">
|
</b-table-column>
|
||||||
<b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
|
<b-table-column field="role" :label="$t('Role')" v-slot="props">
|
||||||
{{ $t("Organizer") }}
|
<b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
|
||||||
</b-tag>
|
{{ $t("Organizer") }}
|
||||||
<b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
|
</b-tag>
|
||||||
{{ $t("Participant") }}
|
<b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
|
||||||
</b-tag>
|
{{ $t("Participant") }}
|
||||||
<b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
|
</b-tag>
|
||||||
{{ $t("Not approved") }}
|
<b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
|
||||||
</b-tag>
|
{{ $t("Not approved") }}
|
||||||
<b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
|
</b-tag>
|
||||||
{{ $t("Rejected") }}
|
<b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
|
||||||
</b-tag>
|
{{ $t("Rejected") }}
|
||||||
</b-table-column>
|
</b-tag>
|
||||||
<b-table-column field="metadata.message" :label="$t('Message')">
|
</b-table-column>
|
||||||
<span
|
<b-table-column field="metadata.message" :label="$t('Message')" v-slot="props">
|
||||||
@click="toggleQueueDetails(props.row)"
|
<span
|
||||||
:class="{
|
@click="toggleQueueDetails(props.row)"
|
||||||
'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
|
:class="{
|
||||||
}"
|
'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
|
||||||
v-if="props.row.metadata && props.row.metadata.message"
|
}"
|
||||||
>
|
v-if="props.row.metadata && props.row.metadata.message"
|
||||||
{{ props.row.metadata.message | ellipsize }}
|
>
|
||||||
</span>
|
{{ props.row.metadata.message | ellipsize }}
|
||||||
<span v-else class="has-text-grey">
|
</span>
|
||||||
{{ $t("No message") }}
|
<span v-else class="has-text-grey">
|
||||||
</span>
|
{{ $t("No message") }}
|
||||||
</b-table-column>
|
</span>
|
||||||
<b-table-column field="insertedAt" :label="$t('Date')">
|
</b-table-column>
|
||||||
<span class="has-text-centered">
|
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
|
||||||
{{ props.row.insertedAt | formatDateString }}<br />{{
|
<span class="has-text-centered">
|
||||||
props.row.insertedAt | formatTimeString
|
{{ props.row.insertedAt | formatDateString }}<br />{{
|
||||||
}}
|
props.row.insertedAt | formatTimeString
|
||||||
</span>
|
}}
|
||||||
</b-table-column>
|
</span>
|
||||||
</template>
|
</b-table-column>
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<article v-html="nl2br(props.row.metadata.message)" />
|
<article v-html="nl2br(props.row.metadata.message)" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -89,60 +89,58 @@
|
||||||
@page-change="(newPage) => (page = newPage)"
|
@page-change="(newPage) => (page = newPage)"
|
||||||
@sort="(field, order) => $emit('sort', field, order)"
|
@sort="(field, order) => $emit('sort', field, order)"
|
||||||
>
|
>
|
||||||
<template slot-scope="props">
|
<b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
|
||||||
<b-table-column field="actor.preferredUsername" :label="$t('Member')">
|
<article class="media">
|
||||||
<article class="media">
|
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
|
||||||
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
|
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
|
||||||
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
|
</figure>
|
||||||
</figure>
|
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
||||||
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
<div class="media-content">
|
||||||
<div class="media-content">
|
<div class="content">
|
||||||
<div class="content">
|
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
|
||||||
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
|
><br />
|
||||||
><br />
|
<span class="is-size-7 has-text-grey"
|
||||||
<span class="is-size-7 has-text-grey"
|
>@{{ usernameWithDomain(props.row.actor) }}</span
|
||||||
>@{{ usernameWithDomain(props.row.actor) }}</span
|
>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</div>
|
||||||
</b-table-column>
|
</article>
|
||||||
<b-table-column field="role" :label="$t('Role')">
|
</b-table-column>
|
||||||
<b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
|
<b-table-column field="role" :label="$t('Role')" v-slot="props">
|
||||||
{{ $t("Administrator") }}
|
<b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
|
||||||
</b-tag>
|
{{ $t("Administrator") }}
|
||||||
<b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
|
</b-tag>
|
||||||
{{ $t("Moderator") }}
|
<b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
|
||||||
</b-tag>
|
{{ $t("Moderator") }}
|
||||||
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
|
</b-tag>
|
||||||
{{ $t("Member") }}
|
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
|
||||||
</b-tag>
|
{{ $t("Member") }}
|
||||||
<b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
|
</b-tag>
|
||||||
{{ $t("Not approved") }}
|
<b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
|
||||||
</b-tag>
|
{{ $t("Not approved") }}
|
||||||
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
|
</b-tag>
|
||||||
{{ $t("Rejected") }}
|
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
|
||||||
</b-tag>
|
{{ $t("Rejected") }}
|
||||||
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.INVITED">
|
</b-tag>
|
||||||
{{ $t("Invited") }}
|
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.INVITED">
|
||||||
</b-tag>
|
{{ $t("Invited") }}
|
||||||
</b-table-column>
|
</b-tag>
|
||||||
<b-table-column field="insertedAt" :label="$t('Date')">
|
</b-table-column>
|
||||||
<span class="has-text-centered">
|
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
|
||||||
{{ props.row.insertedAt | formatDateString }}<br />{{
|
<span class="has-text-centered">
|
||||||
props.row.insertedAt | formatTimeString
|
{{ props.row.insertedAt | formatDateString }}<br />{{
|
||||||
}}
|
props.row.insertedAt | formatTimeString
|
||||||
</span>
|
}}
|
||||||
</b-table-column>
|
</span>
|
||||||
<b-table-column field="actions" :label="$t('Actions')">
|
</b-table-column>
|
||||||
<b-button
|
<b-table-column field="actions" :label="$t('Actions')" v-slot="props">
|
||||||
v-if="props.row.role === MemberRole.MEMBER"
|
<b-button
|
||||||
@click="removeMember(props.row.id)"
|
v-if="props.row.role === MemberRole.MEMBER"
|
||||||
type="is-danger"
|
@click="removeMember(props.row.id)"
|
||||||
>{{ $t("Remove") }}</b-button
|
type="is-danger"
|
||||||
>
|
>{{ $t("Remove") }}</b-button
|
||||||
</b-table-column>
|
>
|
||||||
</template>
|
</b-table-column>
|
||||||
<template slot="empty">
|
<template slot="empty">
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="content has-text-grey has-text-centered">
|
<div class="content has-text-grey has-text-centered">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue