feat: locales availability + IE display mode

This commit is contained in:
Nick
2019-07-12 23:56:44 -04:00
parent ca06a15bf3
commit b6f1e1805e
31 changed files with 1015 additions and 71 deletions

View File

@@ -52,8 +52,6 @@
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.namespacing') }}
v-spacer
v-chip(label, color='white', small).primary--text coming soon
v-card-text
v-switch(
v-model='namespacing'
@@ -102,28 +100,35 @@
v-card.animated.fadeInUp.wait-p4s
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading {{ $t('admin:locale.download') }}
v-list(two-line, dense)
template(v-for='(lc, idx) in locales')
v-list-tile(:key='lc.code')
v-list-tile-avatar
v-avatar.teal.white--text(size='40') {{lc.code.toUpperCase()}}
v-list-tile-content
v-list-tile-title(v-html='lc.name')
v-list-tile-sub-title(v-html='lc.nativeName')
v-list-tile-action(v-if='lc.isRTL')
v-chip(label, small, :class='$vuetify.dark ? `text--lighten-5` : `text--darken-2`').caption.grey--text RTL
v-list-tile-action(v-if='lc.isInstalled && lc.installDate < lc.updatedAt')
v-btn(icon, @click='download(lc)')
v-icon.blue--text cached
v-list-tile-action(v-else-if='lc.isInstalled')
.subheading {{ $t('admin:locale.downloadTitle') }}
v-data-table(
:headers='headers',
:items='locales',
hide-actions,
item-key='code',
:rows-per-page-items='[-1]'
)
template(v-slot:items='lc')
td
v-chip.white--text(label, color='teal', small) {{lc.item.code}}
td
strong {{lc.item.name}}
td
span {{ lc.item.nativeName }}
td.text-xs-center
v-icon(v-if='lc.item.isRTL') check
td
.d-flex.align-center.pl-4
.caption.mr-2(:class='lc.item.availability <= 33 ? `red--text` : (lc.item.availability <= 66) ? `orange--text` : `green--text`') {{lc.item.availability}}%
v-progress-circular(:value='lc.item.availability', width='2', size='20', :color='lc.item.availability <= 33 ? `red` : (lc.item.availability <= 66) ? `orange` : `green`')
td.text-xs-center
v-progress-circular(v-if='lc.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
v-btn(v-else-if='lc.item.isInstalled && lc.item.installDate < lc.item.updatedAt', icon, @click='download(lc.item)')
v-icon.blue--text cached
v-btn(v-else-if='lc.item.isInstalled', icon, @click='download(lc.item)')
v-icon.green--text check
v-list-tile-action(v-else-if='lc.isDownloading')
v-progress-circular(indeterminate, color='blue', size='20', :width='3')
v-list-tile-action(v-else)
v-btn(icon, @click='download(lc)')
v-icon.grey--text cloud_download
v-divider.my-0(inset, v-if='idx < locales.length - 1')
v-btn(v-else, icon, @click='download(lc.item)')
v-icon.grey--text cloud_download
v-card.wiki-form.mt-3.animated.fadeInUp.wait-p5s
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
@@ -158,6 +163,46 @@ export default {
computed: {
installedLocales() {
return _.filter(this.locales, ['isInstalled', true])
},
headers() {
return [
{
text: this.$t('admin:locale.code'),
align: 'left',
value: 'code',
width: 10
},
{
text: this.$t('admin:locale.name'),
align: 'left',
value: 'name'
},
{
text: this.$t('admin:locale.nativeName'),
align: 'left',
value: 'nativeName'
},
{
text: this.$t('admin:locale.rtl'),
align: 'center',
value: 'isRTL',
sortable: false,
width: 10
},
{
text: this.$t('admin:locale.availability'),
align: 'center',
value: 'availability',
width: 100
},
{
text: this.$t('admin:locale.download'),
align: 'center',
value: 'code',
sortable: false,
width: 100
}
]
}
},
methods: {
@@ -173,6 +218,8 @@ export default {
if (resp.succeeded) {
lc.isDownloading = false
lc.isInstalled = true
lc.updatedAt = new Date().toISOString()
lc.installDate = lc.updatedAt
this.$store.commit('showNotification', {
message: `Locale ${lc.name} has been installed successfully.`,
style: 'success',