beenull/listmonk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Upgrade Vue and Buefy UI lib.

Browse source 
- Vue 2.6 introduces "v-slot" which Buefy 0.9.7 uses.
- Refactor all `<b-table>` and `<b-column>` instances to work with the
  new `v-slot` snytax.
- Refactor `<b-column>` <td> and class attributes to work wit hthe new
  syntax.
- Fix Buefy scss setup to work with the update.
- Fix sidebar responsive view to work with the update.
This commit is contained in:
Kailash Nadh 2021-05-23 14:32:56 +05:30
parent c593be51c1
commit dea4d185ae
9 changed files with 386 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/package.json vendored
View file

@ -10,7 +10,7 @@
},
"dependencies": {
"axios": "^0.21.1",
"buefy": "^0.8.20",
"buefy": "^0.9.7",
"c3": "^0.7.18",
"codeflask": "^1.4.1",
"core-js": "^3.6.5",

44
frontend/src/assets/buefy.scss
View file

@ -1,44 +0,0 @@
@import "~bulma/sass/base/_all";
@import "~bulma/sass/elements/_all";
@import "~bulma/sass/components/card";
@import "~bulma/sass/components/dropdown";
@import "~bulma/sass/components/level";
@import "~bulma/sass/components/menu";
@import "~bulma/sass/components/message";
@import "~bulma/sass/components/modal";
@import "~bulma/sass/components/navbar";
@import "~bulma/sass/components/pagination";
@import "~bulma/sass/components/tabs";
@import "~bulma/sass/form/_all";
@import "~bulma/sass/grid/columns";
@import "~bulma/sass/grid/tiles";
@import "~bulma/sass/layout/section";
@import "~bulma/sass/layout/footer";
@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_autocomplete";
@import "~buefy/src/scss/components/_carousel";
@import "~buefy/src/scss/components/_checkbox";
@import "~buefy/src/scss/components/_datepicker";
@import "~buefy/src/scss/components/_dialog";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_form";
@import "~buefy/src/scss/components/_icon";
@import "~buefy/src/scss/components/_loading";
@import "~buefy/src/scss/components/_menu";
@import "~buefy/src/scss/components/_message";
@import "~buefy/src/scss/components/_modal";
@import "~buefy/src/scss/components/_pagination";
@import "~buefy/src/scss/components/_notices";
@import "~buefy/src/scss/components/_progress";
@import "~buefy/src/scss/components/_radio";
@import "~buefy/src/scss/components/_select";
@import "~buefy/src/scss/components/_sidebar";
@import "~buefy/src/scss/components/_switch";
@import "~buefy/src/scss/components/_table";
@import "~buefy/src/scss/components/_tabs";
@import "~buefy/src/scss/components/_tag";
@import "~buefy/src/scss/components/_taginput";
@import "~buefy/src/scss/components/_timepicker";
@import "~buefy/src/scss/components/_tooltip";
@import "~buefy/src/scss/components/_upload";

9
frontend/src/assets/style.scss
View file

@ -30,10 +30,11 @@ $modal-background-background-color: rgba(0, 0, 0, .30);
$speed-slow: 25ms !default;
$speed-slower: 50ms !default;
/* Import full Bulma and Buefy to override styles. */
// @import "~bulma";
@import "./buefy";
/* Import full Bulma and Buefy */
@import "~bulma";
@import "~buefy/src/scss/buefy";
/* Custom style overrides */
html, body {
height: 100%;
}
@ -752,6 +753,7 @@ section.campaign {
/* Hide sidebar menu captions on mobile */
.b-sidebar .sidebar-content.is-mini-mobile {
max-width: 90px;
.menu-list {
li {
margin-bottom: 30px;
@ -773,7 +775,6 @@ section.campaign {
td .tags {
display: block;
text-align: right;
.tag:not(:last-child) {
margin-right: 0;

4
frontend/src/utils.js
View file

@ -118,4 +118,8 @@ export default class Utils {
duration: duration || 2000,
});
};
// Takes a props.row from a Buefy b-column <td> template and
// returns a `data-id` attribute which Buefy then applies to the td.
tdID = (row) => ({ 'data-id': row.id.toString() });
}

24
frontend/src/views/Campaigns.vue
View file

@ -29,10 +29,9 @@
paginated backend-pagination pagination-position="both" @page-change="onPageChange"
:current-page="queryParams.page" :per-page="campaigns.perPage" :total="campaigns.total"
hoverable backend-sorting @sort="onSort">
<template slot-scope="props">
<b-table-column class="status" field="status" :label="$t('globals.fields.status')"
width="10%" :id="props.row.id" sortable
header-class="cy-status" :data-id="props.row.id">
<b-table-column v-slot="props" class="status" field="status"
:label="$t('globals.fields.status')" width="10%" sortable
:td-attrs="$utils.tdID" header-class="cy-status">
<div>
<p>
<router-link :to="{ name: 'campaign', params: { 'id': props.row.id }}">
@ -55,8 +54,8 @@
</p>
</div>
</b-table-column>
<b-table-column field="name" :label="$t('globals.fields.name')" sortable width="25%"
header-class="cy-name">
<b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')" width="25%"
sortable header-class="cy-name">
<div>
<p>
<b-tag v-if="props.row.type !== 'regular'" class="is-small">
@ -71,7 +70,7 @@
</b-taglist>
</div>
</b-table-column>
<b-table-column class="lists" field="lists"
<b-table-column v-slot="props" class="lists" field="lists"
:label="$t('globals.terms.lists')" width="15%">
<ul class="no">
<li v-for="l in props.row.lists" :key="l.id">
@ -81,7 +80,7 @@
</li>
</ul>
</b-table-column>
<b-table-column field="created_at" :label="$t('campaigns.timestamps')"
<b-table-column v-slot="props" field="created_at" :label="$t('campaigns.timestamps')"
width="19%" sortable header-class="cy-timestamp">
<div class="fields timestamps" :set="stats = getCampaignStats(props.row)">
<p>
@ -104,8 +103,7 @@
</div>
</b-table-column>
<b-table-column field="stats" :class="props.row.status"
:label="$t('campaigns.stats')" width="18%">
<b-table-column v-slot="props" field="stats" :label="$t('campaigns.stats')" width="18%">
<div class="fields stats" :set="stats = getCampaignStats(props.row)">
<p>
<label>{{ $t('campaigns.views') }}</label>
@ -136,7 +134,7 @@
</div>
</b-table-column>
<b-table-column class="actions" width="13%" align="right">
<b-table-column v-slot="props" cell-class="actions" width="13%" align="right">
<div>
<a href="" v-if="canStart(props.row)"
@click.prevent="$utils.confirm(null,
@ -194,8 +192,8 @@
</a>
</div>
</b-table-column>
</template>
<template slot="empty" v-if="!loading.campaigns">
<template #empty v-if="!loading.campaigns">
<empty-placeholder />
</template>
</b-table>

27
frontend/src/views/Lists.vue
View file

@ -22,10 +22,11 @@
:current-page="queryParams.page" :per-page="lists.perPage" :total="lists.total"
backend-sorting @sort="onSort"
>
<template slot-scope="props">
<b-table-column field="name" :label="$t('globals.fields.name')" header-class="cy-name"
sortable width="25%" paginated backend-pagination pagination-position="both"
@page-change="onPageChange" :data-id="props.row.id">
<b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')"
header-class="cy-name" sortable width="25%"
paginated backend-pagination pagination-position="both"
:td-attrs="$utils.tdID"
@page-change="onPageChange">
<div>
<router-link :to="{name: 'subscribers_list', params: { listID: props.row.id }}">
{{ props.row.name }}
@ -36,8 +37,8 @@
</div>
</b-table-column>
<b-table-column field="type" :label="$t('globals.fields.type')" header-class="cy-type"
sortable>
<b-table-column v-slot="props" field="type" :label="$t('globals.fields.type')"
header-class="cy-type" sortable>
<div>
<b-tag :class="props.row.type" :data-cy="`type-${props.row.type}`">
{{ $t('lists.types.' + props.row.type) }}
@ -60,23 +61,24 @@
</div>
</b-table-column>
<b-table-column field="subscriber_count" :label="$t('globals.terms.subscribers')"
header-class="cy-subscribers" numeric sortable centered>
<b-table-column v-slot="props" field="subscriber_count"
:label="$t('globals.terms.subscribers')" header-class="cy-subscribers"
numeric sortable centered>
<router-link :to="`/subscribers/lists/${props.row.id}`">
{{ props.row.subscriberCount }}
</router-link>
</b-table-column>
<b-table-column field="created_at" :label="$t('globals.fields.createdAt')"
<b-table-column v-slot="props" field="created_at" :label="$t('globals.fields.createdAt')"
header-class="cy-created_at" sortable>
{{ $utils.niceDate(props.row.createdAt) }}
</b-table-column>
<b-table-column field="updated_at" :label="$t('globals.fields.updatedAt')"
<b-table-column v-slot="props" field="updated_at" :label="$t('globals.fields.updatedAt')"
header-class="cy-updated_at" sortable>
{{ $utils.niceDate(props.row.updatedAt) }}
</b-table-column>
<b-table-column class="actions" align="right">
<b-table-column v-slot="props" cell-class="actions" align="right">
<div>
<router-link :to="`/campaigns/new?list_id=${props.row.id}`" data-cy="btn-campaign">
<b-tooltip :label="$t('lists.sendCampaign')" type="is-dark">
@ -95,9 +97,8 @@
</a>
</div>
</b-table-column>
</template>
<template slot="empty" v-if="!loading.lists">
<template #empty v-if="!loading.lists">
<empty-placeholder />
</template>
</b-table>

25
frontend/src/views/Subscribers.vue
View file

@ -108,14 +108,13 @@
paginated backend-pagination pagination-position="both" @page-change="onPageChange"
:current-page="queryParams.page" :per-page="subscribers.perPage" :total="subscribers.total"
hoverable checkable backend-sorting @sort="onSort">
<template slot="top-left">
<template #top-left>
<a href='' @click.prevent="exportSubscribers">
<b-icon icon="cloud-download-outline" size="is-small" /> {{ $t('subscribers.export') }}
</a>
</template>
<template slot-scope="props">
<b-table-column field="status" :label="$t('globals.fields.status')"
header-class="cy-status" :data-id="props.row.id" sortable>
<b-table-column v-slot="props" field="status" :label="$t('globals.fields.status')"
header-class="cy-status" :td-attrs="$utils.tdID" sortable>
<a :href="`/subscribers/${props.row.id}`"
@click.prevent="showEditForm(props.row)">
<b-tag :class="props.row.status">
@ -124,7 +123,7 @@
</a>
</b-table-column>
<b-table-column field="email" :label="$t('subscribers.email')"
<b-table-column v-slot="props" field="email" :label="$t('subscribers.email')"
header-class="cy-email" sortable>
<a :href="`/subscribers/${props.row.id}`"
@click.prevent="showEditForm(props.row)">
@ -143,7 +142,7 @@
</b-taglist>
</b-table-column>
<b-table-column field="name" :label="$t('globals.fields.name')"
<b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')"
header-class="cy-name" sortable>
<a :href="`/subscribers/${props.row.id}`"
@click.prevent="showEditForm(props.row)">
@ -151,22 +150,22 @@
</a>
</b-table-column>
<b-table-column field="lists" :label="$t('globals.terms.lists')"
header-class="cy-lists" numeric centered>
<b-table-column v-slot="props" field="lists" :label="$t('globals.terms.lists')"
header-class="cy-lists" centered>
{{ listCount(props.row.lists) }}
</b-table-column>
<b-table-column field="created_at" :label="$t('globals.fields.createdAt')"
<b-table-column v-slot="props" field="created_at" :label="$t('globals.fields.createdAt')"
header-class="cy-created_at" sortable>
{{ $utils.niceDate(props.row.createdAt) }}
</b-table-column>
<b-table-column field="updated_at" :label="$t('globals.fields.updatedAt')"
<b-table-column v-slot="props" field="updated_at" :label="$t('globals.fields.updatedAt')"
header-class="cy-updated_at" sortable>
{{ $utils.niceDate(props.row.updatedAt) }}
</b-table-column>
<b-table-column class="actions" align="right">
<b-table-column v-slot="props" label="Actions" cell-class="actions" align="right">
<div>
<a :href="`/api/subscribers/${props.row.id}/export`" data-cy="btn-download">
<b-tooltip :label="$t('subscribers.downloadData')" type="is-dark">
@ -186,8 +185,8 @@
</a>
</div>
</b-table-column>
</template>
<template slot="empty" v-if="!loading.subscribers">
<template #empty v-if="!loading.subscribers">
<empty-placeholder />
</template>
</b-table>

15
frontend/src/views/Templates.vue
View file

@ -14,23 +14,25 @@
<b-table :data="templates" :hoverable="true" :loading="loading.templates"
default-sort="createdAt">
<template slot-scope="props">
<b-table-column field="name" :label="$t('globals.fields.name')" sortable>
<b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')"
:td-attrs="$utils.tdID" sortable>
<a :href="props.row.id" @click.prevent="showEditForm(props.row)">
{{ props.row.name }}
</a>
<b-tag v-if="props.row.isDefault">{{ $t('templates.default') }}</b-tag>
</b-table-column>
<b-table-column field="createdAt" :label="$t('globals.fields.createdAt')" sortable>
<b-table-column v-slot="props" field="createdAt"
:label="$t('globals.fields.createdAt')" sortable>
{{ $utils.niceDate(props.row.createdAt) }}
</b-table-column>
<b-table-column field="updatedAt" :label="$t('globals.fields.updatedAt')" sortable>
<b-table-column v-slot="props" field="updatedAt"
:label="$t('globals.fields.updatedAt')" sortable>
{{ $utils.niceDate(props.row.updatedAt) }}
</b-table-column>
<b-table-column class="actions" align="right">
<b-table-column v-slot="props" cell-class="actions" align="right">
<div>
<a href="#" @click.prevent="previewTemplate(props.row)" data-cy="btn-preview">
<b-tooltip :label="$t('templates.preview')" type="is-dark">
@ -73,9 +75,8 @@
</span>
</div>
</b-table-column>
</template>
<template slot="empty" v-if="!loading.templates">
<template #empty v-if="!loading.templates">
<empty-placeholder />
</template>
</b-table>

18
frontend/yarn.lock vendored
View file

@ -2606,12 +2606,12 @@ browserslist@^4.14.5, browserslist@^4.16.6:
escalade "^3.1.1"
node-releases "^1.1.71"
buefy@^0.8.20:
version "0.8.20"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.20.tgz#75708800548220654575903d031a81fc8575b7f3"
integrity sha512-pg8Cn0m9cjqp2/vaKT4VIfU8KIumuX/gAT1GtearXRs56+kKqAPx3j9O8cm9W6P4jPUCHajKX6H8AqD0ram2Bg==
buefy@^0.9.7:
version "0.9.7"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.7.tgz#694e73fe0b32632a53d94c5ba9cfa4468363badd"
integrity sha512-Fli0ZjNDgtFtHm0LItWmfhNJ1oLjDwPzUWccvwXXoo2mADXaH8JQxyhY+drUuUV5/GMu5PtwqQSqPgZy942VZg==
dependencies:
bulma "0.7.5"
bulma "0.9.2"
buffer-crc32@~0.2.3:
version "0.2.13"
@ -2652,10 +2652,10 @@ builtin-status-codes@^3.0.0:
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
bulma@0.7.5:
version "0.7.5"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
integrity sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==
bulma@0.9.2:
version "0.9.2"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.2.tgz#340011e119c605f19b8ca886bfea595f1deaf23c"
integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==
bytes@3.0.0:
version "3.0.0"