LbScroll, FullImage, ImageEditor
This commit is contained in:
parent
b06dacc4ce
commit
29acd913ee
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "Container",
|
||||
"base": "PersistedModel",
|
||||
"idInjection": true
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "ImageCollectionSize",
|
||||
"base": "PersistedModel",
|
||||
"options": {
|
||||
"mysql": {
|
||||
"table": "hedera.imageCollectionSize"
|
||||
}
|
||||
},
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "Number",
|
||||
"id": true,
|
||||
"description": "Identifier"
|
||||
},
|
||||
"width": {
|
||||
"type": "Number",
|
||||
"required": true
|
||||
},
|
||||
"height": {
|
||||
"type": "Number",
|
||||
"required": true
|
||||
},
|
||||
"crop": {
|
||||
"type": "Boolean",
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"relations": {
|
||||
"collection": {
|
||||
"type": "belongsTo",
|
||||
"model": "ImageCollection",
|
||||
"foreignKey": "collectionFk"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,11 +9,11 @@
|
|||
"properties": {
|
||||
"id": {
|
||||
"type": "Number",
|
||||
"id": true,
|
||||
"description": "Identifier"
|
||||
},
|
||||
"name": {
|
||||
"type": "String",
|
||||
"id": true,
|
||||
"required": true
|
||||
},
|
||||
"desc": {
|
||||
|
|
@ -28,17 +28,21 @@
|
|||
"type": "Number",
|
||||
"required": true
|
||||
},
|
||||
"schema": {
|
||||
"model": {
|
||||
"type": "String",
|
||||
"required": true
|
||||
},
|
||||
"table": {
|
||||
"type": "String",
|
||||
"required": true
|
||||
},
|
||||
"column": {
|
||||
"property": {
|
||||
"type": "String",
|
||||
"required": true
|
||||
}
|
||||
},
|
||||
"relations": {
|
||||
"sizes": {
|
||||
"type": "hasMany",
|
||||
"model": "ImageCollectionSize",
|
||||
"foreignKey": "collectionFk",
|
||||
"property": "id"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
const md5 = require('md5');
|
||||
const fs = require('fs-extra');
|
||||
const sharp = require('sharp');
|
||||
|
||||
module.exports = Self => {
|
||||
Self.remoteMethod('upload', {
|
||||
|
|
@ -5,26 +8,14 @@ module.exports = Self => {
|
|||
accessType: 'WRITE',
|
||||
accepts: [
|
||||
{
|
||||
arg: 'file',
|
||||
type: 'String',
|
||||
description: 'The image file'
|
||||
}, {
|
||||
arg: 'name',
|
||||
type: 'String',
|
||||
description: 'The image name'
|
||||
}, {
|
||||
arg: 'collectionFk',
|
||||
type: 'String',
|
||||
description: 'The collection'
|
||||
}, {
|
||||
arg: 'ctx',
|
||||
type: 'Object',
|
||||
http: {source: 'context'}
|
||||
}
|
||||
],
|
||||
returns: {
|
||||
type: 'Boolean',
|
||||
description: 'Success or failed',
|
||||
type: Self.modelName,
|
||||
description: 'The resulting file instance',
|
||||
root: true,
|
||||
},
|
||||
http: {
|
||||
|
|
@ -33,7 +24,134 @@ module.exports = Self => {
|
|||
}
|
||||
});
|
||||
|
||||
Self.upload = async (file, name, collectionFk) => {
|
||||
let $ = Self.app.models;
|
||||
Self.upload = async ctx => {
|
||||
let app = Self.app;
|
||||
let $ = app.models;
|
||||
let storageConnector = app.dataSources.storage.connector;
|
||||
|
||||
let tx = await Self.beginTransaction({});
|
||||
let myOptions = {transaction: tx};
|
||||
|
||||
async function getContainer(name) {
|
||||
let container;
|
||||
try {
|
||||
container = await $.Container.getContainer(name);
|
||||
} catch (err) {
|
||||
if (err.code === 'ENOENT') {
|
||||
container = await $.Container.createContainer({
|
||||
name: name
|
||||
});
|
||||
} else throw err;
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
try {
|
||||
// Upload file to temporary path
|
||||
|
||||
let tempContainer = await getContainer('temp');
|
||||
let uploaded = await $.Container.upload(tempContainer.name, ctx.req, ctx.result, {});
|
||||
let files = Object.values(uploaded.files).map(file => file[0]);
|
||||
let args = {};
|
||||
|
||||
for (let key in uploaded.fields)
|
||||
args[key] = uploaded.fields[key][0];
|
||||
|
||||
if (!/^[a-z0-9_]+$/.test(args.name))
|
||||
throw new Error('Bad file name');
|
||||
|
||||
let collection = await $.ImageCollection.findOne({
|
||||
fields: [
|
||||
'id',
|
||||
'name',
|
||||
'maxWidth',
|
||||
'maxHeight',
|
||||
'model',
|
||||
'property'
|
||||
],
|
||||
where: {name: args.collectionFk},
|
||||
include: {
|
||||
relation: 'sizes',
|
||||
scope: {
|
||||
fields: ['width', 'height', 'crop']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let md5Hash = md5(args.name).substring(0, 4);
|
||||
let md5Path = md5Hash.match(/(..?)/g).join('/');
|
||||
let rootPath = storageConnector.client.root;
|
||||
|
||||
let file = files[0];
|
||||
let data = {
|
||||
name: args.name,
|
||||
collectionFk: args.collectionFk
|
||||
};
|
||||
let newImage = await Self.upsertWithWhere(data, {
|
||||
name: args.name,
|
||||
collectionFk: args.collectionFk,
|
||||
updated: (new Date).getTime()
|
||||
}, myOptions);
|
||||
|
||||
// Resizes and saves the image
|
||||
|
||||
let extension = file.name.split('.').pop().toLowerCase();
|
||||
let srcPath = `${rootPath}/${tempContainer.name}/${file.name}`;
|
||||
let collectionDir = `${rootPath}/${args.collectionFk}`;
|
||||
let dstDir = `${collectionDir}/${md5Path}/${args.name}`;
|
||||
let dstFile = `full.${extension}`;
|
||||
|
||||
let resizeOpts = {
|
||||
withoutEnlargement: true,
|
||||
fit: 'inside'
|
||||
};
|
||||
|
||||
await fs.mkdir(dstDir, {recursive: true});
|
||||
await sharp(srcPath)
|
||||
.resize(collection.maxWidth, collection.maxHeight, resizeOpts)
|
||||
.toFile(`${dstDir}/${dstFile}`);
|
||||
|
||||
let sizes = collection.sizes();
|
||||
for (let size of sizes) {
|
||||
let dstFile = `${size.width}x${size.height}.${extension}`;
|
||||
let resizeOpts = {
|
||||
withoutEnlargement: true,
|
||||
fit: size.crop ? 'cover' : 'inside'
|
||||
};
|
||||
|
||||
await sharp(srcPath)
|
||||
.resize(size.width, size.height, resizeOpts)
|
||||
.toFile(`${dstDir}/${dstFile}`);
|
||||
}
|
||||
|
||||
// Updates items with matching id, when option is checked
|
||||
|
||||
if (args.updateMatching === 'true') {
|
||||
if (!collection.model || !collection.property)
|
||||
throw new Error('Matching model settings not defined');
|
||||
|
||||
let model = app.models[collection.model];
|
||||
|
||||
if (!model)
|
||||
throw new Error('Matching model not found');
|
||||
|
||||
let item = await model.findById(args.name, null, myOptions);
|
||||
|
||||
if (item)
|
||||
await item.updateAttribute(
|
||||
collection.property,
|
||||
args.name,
|
||||
myOptions
|
||||
);
|
||||
}
|
||||
|
||||
await fs.unlink(srcPath);
|
||||
await tx.commit();
|
||||
return newImage;
|
||||
} catch (e) {
|
||||
await tx.rollback();
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "Image",
|
||||
"base": "PersistedModel",
|
||||
"base": "PersistedModel",
|
||||
"options": {
|
||||
"mysql": {
|
||||
"table": "hedera.image"
|
||||
"table": "hedera.image"
|
||||
}
|
||||
},
|
||||
"properties": {
|
||||
|
|
@ -16,19 +16,17 @@
|
|||
"type": "String",
|
||||
"required": true
|
||||
},
|
||||
"collectionFk": {
|
||||
"type": "String",
|
||||
"required": true
|
||||
},
|
||||
"updated": {
|
||||
"type": "Number"
|
||||
},
|
||||
"nRefs": {
|
||||
"type": "Number",
|
||||
"required": true
|
||||
"required": true,
|
||||
"default": 0
|
||||
}
|
||||
},
|
||||
"relations": {
|
||||
"collection": {
|
||||
"type": "belongsTo",
|
||||
"model": "ImageCollection",
|
||||
"foreignKey": "collectionFk"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,8 +21,7 @@
|
|||
"required": true
|
||||
},
|
||||
"image": {
|
||||
"type": "String",
|
||||
"required": true
|
||||
"type": "String"
|
||||
},
|
||||
"created": {
|
||||
"type": "Date",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,12 +13,16 @@
|
|||
"dependencies": {
|
||||
"compression": "^1.0.3",
|
||||
"cors": "^2.5.2",
|
||||
"helmet": "^3.10.0",
|
||||
"loopback": "^3.22.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"helmet": "^3.19.0",
|
||||
"loopback": "^3.26.0",
|
||||
"loopback-boot": "^2.6.5",
|
||||
"loopback-component-explorer": "^6.2.0",
|
||||
"loopback-component-storage": "^3.6.2",
|
||||
"loopback-connector-mysql": "^5.4.1",
|
||||
"md5": "^2.2.1",
|
||||
"serve-favicon": "^2.0.1",
|
||||
"sharp": "^0.22.1",
|
||||
"strong-error-handler": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -2,5 +2,17 @@
|
|||
"db": {
|
||||
"name": "db",
|
||||
"connector": "memory"
|
||||
},
|
||||
"storage": {
|
||||
"name": "storage",
|
||||
"connector": "loopback-component-storage",
|
||||
"provider": "filesystem",
|
||||
"root": "./dist/image",
|
||||
"maxFileSize": "10485760",
|
||||
"allowedContentTypes": [
|
||||
"image/png",
|
||||
"image/jpeg",
|
||||
"image/jpg"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,6 +71,9 @@
|
|||
"Client": {
|
||||
"dataSource": "vn"
|
||||
},
|
||||
"Container": {
|
||||
"dataSource": "storage"
|
||||
},
|
||||
"Country": {
|
||||
"dataSource": "vn"
|
||||
},
|
||||
|
|
@ -86,6 +89,9 @@
|
|||
"ImageCollection": {
|
||||
"dataSource": "vn"
|
||||
},
|
||||
"ImageCollectionSize": {
|
||||
"dataSource": "vn"
|
||||
},
|
||||
"ItemCategory": {
|
||||
"dataSource": "vn"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
|
||||
import { date as qdate } from 'quasar'
|
||||
import { date as qdate, format } from 'quasar'
|
||||
const { pad } = format
|
||||
|
||||
export default async ({ app, Vue }) => {
|
||||
let i18n = app.i18n
|
||||
|
|
@ -58,8 +59,26 @@ export default async ({ app, Vue }) => {
|
|||
return relDate(val) + ' ' + qdate.formatDate(val, 'H:mm:ss')
|
||||
}
|
||||
|
||||
function elapsedTime (val) {
|
||||
if (val == null) return val
|
||||
if (!(val instanceof Date)) {
|
||||
val = new Date(val)
|
||||
}
|
||||
let now = (new Date()).getTime()
|
||||
val = Math.floor((now - val.getTime()) / 1000)
|
||||
|
||||
let hours = Math.floor(val / 3600)
|
||||
val -= hours * 3600
|
||||
let minutes = Math.floor(val / 60)
|
||||
val -= minutes * 60
|
||||
let seconds = val
|
||||
|
||||
return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}`
|
||||
}
|
||||
|
||||
Vue.filter('currency', currency)
|
||||
Vue.filter('date', date)
|
||||
Vue.filter('relDate', relDate)
|
||||
Vue.filter('relTime', relTime)
|
||||
Vue.filter('elapsedTime', elapsedTime)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-dialog v-model="showDialog">
|
||||
<q-card style="width: 80em;">
|
||||
<q-img
|
||||
:src="`${$imageBase}/${collection}/${size}/${value}`"
|
||||
@click="showDialog = false">
|
||||
</q-img>
|
||||
<q-btn
|
||||
v-if="editable"
|
||||
@click="showImgEditor = true"
|
||||
:title="$t('edit')"
|
||||
icon="edit"
|
||||
round
|
||||
color="accent"
|
||||
class="absolute-bottom-right"
|
||||
style="bottom: .6em; right: .6em;"/>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<image-editor
|
||||
v-if="editable"
|
||||
v-model="image"
|
||||
:collection="collection"
|
||||
:show="showImgEditor"
|
||||
@response="showImgEditor = false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImageEditor from 'components/ImageEditor'
|
||||
|
||||
export default {
|
||||
name: 'FullImage',
|
||||
components: {
|
||||
ImageEditor
|
||||
},
|
||||
props: {
|
||||
value: {},
|
||||
collection: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'full'
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
image: null,
|
||||
showImgEditor: false,
|
||||
showDialog: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
image (val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
value (val) {
|
||||
this.image = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.showDialog = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<q-dialog v-model="show" persistent>
|
||||
<q-card style="width: 25em;">
|
||||
<q-card-section>
|
||||
<q-select
|
||||
v-model="image"
|
||||
:label="$t('image')"
|
||||
:options="images"
|
||||
@filter="onFilter"
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
@new-value="onAdd"
|
||||
input-debounce="250"
|
||||
emit-value
|
||||
clearable
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input>
|
||||
<template v-slot:option="scope">
|
||||
<q-item
|
||||
v-bind="scope.itemProps"
|
||||
v-on="scope.itemEvents">
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<img :src="`${$imageBase}/${collection}/200x200/${scope.opt.name}`">
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{scope.opt.name}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-avatar>
|
||||
<img :src="`${$imageBase}/${collection}/200x200/${image}`">
|
||||
</q-avatar>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
icon="add_a_photo"
|
||||
@click="showUploader = !showUploader"
|
||||
:title="$t('edit')"
|
||||
:disable="!image"
|
||||
:color="showUploader ? 'primary' : null"
|
||||
flat
|
||||
round
|
||||
dense/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-slide-transition>
|
||||
<q-uploader
|
||||
ref="uploader"
|
||||
v-show="showUploader"
|
||||
:url="`${$apiBase}/Images/upload`"
|
||||
:form-fields="formFields"
|
||||
auto-upload
|
||||
class="q-mt-md"
|
||||
flat
|
||||
bordered/>
|
||||
</q-slide-transition>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
:label="$t('cancel')"
|
||||
@click="onCancel"
|
||||
color="primary"
|
||||
flat/>
|
||||
<q-btn
|
||||
:label="$t('accept')"
|
||||
@click="onAccept"
|
||||
color="primary"
|
||||
flat/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ImageEditor',
|
||||
props: {
|
||||
value: {},
|
||||
collection: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
image: null,
|
||||
showUploader: false,
|
||||
images: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
image () {
|
||||
if (this.$refs.uploader) {
|
||||
this.$refs.uploader.reset()
|
||||
}
|
||||
if (!this.image) {
|
||||
this.showUploader = false
|
||||
}
|
||||
},
|
||||
value () {
|
||||
this.image = this.value
|
||||
},
|
||||
showUploader () {
|
||||
this.$refs.uploader.reset()
|
||||
},
|
||||
show () {
|
||||
if (!this.show) {
|
||||
this.showUploader = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFilter (val, update, abort) {
|
||||
let filter = {
|
||||
where: {
|
||||
name: { like: `${val}%` },
|
||||
collectionFk: this.collection
|
||||
},
|
||||
limit: !val || val.length < 2 ? 50 : undefined
|
||||
}
|
||||
this.$axios.get(`Images`, { params: { filter } })
|
||||
.then(res => {
|
||||
update(() => (this.images = res.data))
|
||||
})
|
||||
.catch(() => abort())
|
||||
},
|
||||
onAdd (inputValue, done) {
|
||||
done({ name: inputValue }, 'toggle')
|
||||
this.showUploader = true
|
||||
// this.$refs.uploader.pickFiles()
|
||||
},
|
||||
onAccept () {
|
||||
this.$emit('input', this.image)
|
||||
this.$emit('response', 'accept')
|
||||
},
|
||||
onCancel () {
|
||||
this.image = this.value
|
||||
this.$emit('response', 'cancel')
|
||||
},
|
||||
formFields () {
|
||||
return [
|
||||
{
|
||||
name: 'collectionFk',
|
||||
value: this.collection
|
||||
}, {
|
||||
name: 'name',
|
||||
value: this.image
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="status == 'clear' || status == 'empty'"
|
||||
class="text-subtitle1 text-center text-grey-7 q-pa-md">
|
||||
<span v-if="status == 'clear'">
|
||||
{{$t('setSearchFilter')}}
|
||||
</span>
|
||||
<span v-if="status == 'empty'">
|
||||
{{$t('noDataFound')}}
|
||||
</span>
|
||||
</div>
|
||||
<q-infinite-scroll
|
||||
ref="scroll"
|
||||
@load="onLoad"
|
||||
scroll-taget="html">
|
||||
<slot></slot>
|
||||
<template slot="loading">
|
||||
<div class="row justify-center q-my-md">
|
||||
<q-spinner color="primary" size="40px"/>
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CancelToken } from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'LbScroll',
|
||||
props: {
|
||||
request: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
autoRefresh: {
|
||||
type: Number,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: null,
|
||||
source: null,
|
||||
isLoading: false,
|
||||
index: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
status () {
|
||||
if (this.isLoading && !this.data) {
|
||||
return 'loading'
|
||||
} else if (!this.data) {
|
||||
return 'clear'
|
||||
} else if (this.data.length === 0) {
|
||||
return 'empty'
|
||||
} else {
|
||||
return 'ready'
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearTimeout()
|
||||
},
|
||||
watch: {
|
||||
data (val) {
|
||||
this.$emit('data', val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
get (path, params) {
|
||||
this.cancelRequest()
|
||||
this.isLoading = true
|
||||
this.source = CancelToken.source()
|
||||
let config = {
|
||||
params,
|
||||
cancelToken: this.source.token
|
||||
}
|
||||
return this.$axios.get(path, config)
|
||||
.then(res => {
|
||||
this.source = null
|
||||
this.isLoading = false
|
||||
return res
|
||||
})
|
||||
.catch(err => {
|
||||
if (!err.__CANCEL__) {
|
||||
this.source = null
|
||||
this.isLoading = false
|
||||
}
|
||||
throw err
|
||||
})
|
||||
},
|
||||
cancelRequest () {
|
||||
if (this.source) {
|
||||
this.source.cancel()
|
||||
this.source = null
|
||||
}
|
||||
},
|
||||
doRequest () {
|
||||
this.cancelRequest()
|
||||
this.clearTimeout()
|
||||
|
||||
let config = this.request(this.index)
|
||||
if (!config) {
|
||||
this.data = null
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
|
||||
let params = config.params || {}
|
||||
let filter = config.filter
|
||||
let limit
|
||||
|
||||
if (filter) {
|
||||
params.filter = filter
|
||||
limit = filter.limit
|
||||
|
||||
if (!limit) {
|
||||
limit = this.index * 30
|
||||
filter.limit = limit
|
||||
}
|
||||
}
|
||||
|
||||
return this.get(config.url, params)
|
||||
.then(res => {
|
||||
res.limit = limit
|
||||
this.data = res.data
|
||||
return res
|
||||
})
|
||||
.finally(() => {
|
||||
this.setTimeout()
|
||||
})
|
||||
},
|
||||
setTimeout () {
|
||||
this.clearTimeout()
|
||||
if (this.autoRefresh) {
|
||||
this.timeout = setTimeout(
|
||||
() => this.refresh(), this.autoRefresh * 1000)
|
||||
}
|
||||
},
|
||||
clearTimeout () {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
}
|
||||
},
|
||||
onLoad (index, done) {
|
||||
this.index = index
|
||||
this.doRequest()
|
||||
.then(res => {
|
||||
if (!res) return done(true)
|
||||
done(!res.limit || res.data.length < res.limit)
|
||||
return res
|
||||
})
|
||||
.catch(err => {
|
||||
done(true)
|
||||
throw err
|
||||
})
|
||||
},
|
||||
reload () {
|
||||
this.data = null
|
||||
let scroll = this.$refs.scroll
|
||||
scroll.stop()
|
||||
scroll.reset()
|
||||
scroll.resume()
|
||||
scroll.trigger()
|
||||
},
|
||||
refresh () {
|
||||
this.doRequest()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,8 +1,17 @@
|
|||
import Toolbar from './Toolbar'
|
||||
import LbScroll from './LbScroll'
|
||||
import FullImage from './FullImage'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Toolbar
|
||||
Toolbar,
|
||||
LbScroll,
|
||||
FullImage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: null
|
||||
}
|
||||
},
|
||||
beforeRouteEnter (to, from, next) {
|
||||
next(vm => {})
|
||||
|
|
|
|||
|
|
@ -178,6 +178,13 @@ export default {
|
|||
priority: 'Priority',
|
||||
text: 'Text',
|
||||
|
||||
// Images
|
||||
collection: 'Collection',
|
||||
updateMatchingId: 'Update items with matching id',
|
||||
uploadAutomatically: 'Upload automatically',
|
||||
imagesUploadSuccess: 'Images uploaded successfully',
|
||||
imagesUploadFailed: 'Some images could not be uploaded',
|
||||
|
||||
// User
|
||||
accessLog: 'Access log',
|
||||
|
||||
|
|
|
|||
|
|
@ -178,6 +178,13 @@ export default {
|
|||
priority: 'Prioridad',
|
||||
text: 'Texto',
|
||||
|
||||
// Images
|
||||
collection: 'Colección',
|
||||
updateMatchingId: 'Actualizar ítems con id coincidente',
|
||||
uploadAutomatically: 'Subir automáticamente',
|
||||
imagesUploadSuccess: 'Imágenes subidas correctamente',
|
||||
imagesUploadFailed: 'Algunas imágenes no se ha podido subir',
|
||||
|
||||
// User
|
||||
accessLog: 'Registro de accesos',
|
||||
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ export default {
|
|||
this.$q.notify({
|
||||
message: this.$t(message),
|
||||
icon: 'check',
|
||||
color: 'green-6'
|
||||
color: 'green'
|
||||
})
|
||||
this.$router.go(-1)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
:label="$t('refreshRate')"
|
||||
v-model="rate"
|
||||
:options="rates"
|
||||
@input="setTimeout"
|
||||
@input="$refs.scroll.reload()"
|
||||
emit-value>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="timer"/>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
:label="$t('orderBy')"
|
||||
v-model="order"
|
||||
:options="orderOptions"
|
||||
@input="refresh"
|
||||
@input="$refs.scroll.reload()"
|
||||
emit-value>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="sort"/>
|
||||
|
|
@ -38,20 +38,15 @@
|
|||
</div>
|
||||
</q-drawer>
|
||||
<div>
|
||||
<div
|
||||
v-if="connections && !connections.length"
|
||||
class="text-subtitle1 text-center text-grey-7 q-pa-md">
|
||||
{{$t('noDataFound')}}
|
||||
</div>
|
||||
<q-infinite-scroll
|
||||
<lb-scroll
|
||||
ref="scroll"
|
||||
@load="onLoad"
|
||||
scroll-taget="html"
|
||||
:offset="500">
|
||||
:request="request"
|
||||
@data="onData"
|
||||
:auto-refresh="rate">
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="conn in connections"
|
||||
v-for="conn in data"
|
||||
:key="conn.id"
|
||||
:to="`/access-log/${conn.userVisit.user.id}`"
|
||||
:title="$t('accessLog')"
|
||||
|
|
@ -61,7 +56,7 @@
|
|||
{{conn.userVisit.user.nickname}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{conn.lastUpdate | relTime}}
|
||||
{{conn.lastUpdate | elapsedTime}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{conn.userVisit.access.agent.platform}} -
|
||||
|
|
@ -72,21 +67,15 @@
|
|||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<template slot="loading">
|
||||
<div class="row justify-center q-my-md">
|
||||
<q-spinner color="primary" name="dots" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</lb-scroll>
|
||||
</div>
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-btn
|
||||
fab
|
||||
icon="refresh"
|
||||
color="accent"
|
||||
@click="refresh"
|
||||
:title="$t('refresh')"
|
||||
/>
|
||||
@click="$refs.scroll.refresh()"
|
||||
:title="$t('refresh')"/>
|
||||
</q-page-sticky>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -99,9 +88,7 @@ export default {
|
|||
mixins: [Page],
|
||||
data () {
|
||||
return {
|
||||
connections: null,
|
||||
pageSize: 30,
|
||||
limit: 0,
|
||||
data: [],
|
||||
rate: 5,
|
||||
count: null,
|
||||
rates: [
|
||||
|
|
@ -110,6 +97,7 @@ export default {
|
|||
value: null
|
||||
}
|
||||
],
|
||||
where: { userVisitFk: { neq: null } },
|
||||
order: 'lastUpdate DESC',
|
||||
orderOptions: [
|
||||
{
|
||||
|
|
@ -134,77 +122,51 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearTimeout()
|
||||
},
|
||||
methods: {
|
||||
onLoad (index, done) {
|
||||
this.limit = this.pageSize * index
|
||||
this.refresh()
|
||||
.then(() => {
|
||||
done(this.connections.length < this.limit)
|
||||
})
|
||||
.catch((err) => {
|
||||
done(true)
|
||||
throw err
|
||||
})
|
||||
},
|
||||
refresh () {
|
||||
this.clearTimeout()
|
||||
let where = { userVisitFk: { neq: null } }
|
||||
let filter = {
|
||||
fields: ['created', 'lastUpdate', 'userVisitFk'],
|
||||
order: this.order,
|
||||
limit: this.limit,
|
||||
where,
|
||||
include: {
|
||||
relation: 'userVisit',
|
||||
scope: {
|
||||
fields: ['accessFk', 'userFk'],
|
||||
include: [
|
||||
{
|
||||
relation: 'access',
|
||||
scope: {
|
||||
fields: ['agentFk'],
|
||||
include: {
|
||||
relation: 'agent',
|
||||
scope: {
|
||||
fields: [
|
||||
'platform',
|
||||
'browser',
|
||||
'version'
|
||||
]
|
||||
request () {
|
||||
return {
|
||||
url: 'UserSessions',
|
||||
filter: {
|
||||
fields: ['created', 'lastUpdate', 'userVisitFk'],
|
||||
order: this.order,
|
||||
where: this.where,
|
||||
include: {
|
||||
relation: 'userVisit',
|
||||
scope: {
|
||||
fields: ['accessFk', 'userFk'],
|
||||
include: [
|
||||
{
|
||||
relation: 'access',
|
||||
scope: {
|
||||
fields: ['agentFk'],
|
||||
include: {
|
||||
relation: 'agent',
|
||||
scope: {
|
||||
fields: [
|
||||
'platform',
|
||||
'browser',
|
||||
'version'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['id', 'nickname']
|
||||
}
|
||||
}
|
||||
}, {
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['id', 'nickname']
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return this.$axios.get(`UserSessions`, { params: { filter } })
|
||||
.then(res => (this.connections = res.data))
|
||||
.then(() => this.$axios.get(`UserSessions/count`, { params: { where } }))
|
||||
},
|
||||
onData (data) {
|
||||
this.data = data
|
||||
let params = { where: this.where }
|
||||
this.$axios.get(`UserSessions/count`, { params })
|
||||
.then(res => (this.count = res.data.count))
|
||||
.finally(() => this.setTimeout())
|
||||
},
|
||||
setTimeout () {
|
||||
this.clearTimeout()
|
||||
if (this.rate) {
|
||||
this.timeout = setTimeout(
|
||||
() => this.refresh(), this.rate * 1000)
|
||||
}
|
||||
},
|
||||
clearTimeout () {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,139 @@
|
|||
<template>
|
||||
<div class="text-subtitle1 text-center text-grey-7 q-pa-lg">
|
||||
Sorry this section is under construction
|
||||
<div class="vn-pp row justify-center">
|
||||
<q-card class="vn-w-md">
|
||||
<q-card-section>
|
||||
<q-select
|
||||
v-model="collection"
|
||||
:label="$t('collection')"
|
||||
:options="collections"
|
||||
option-value="name"
|
||||
option-label="desc"
|
||||
emit-value/>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-uploader
|
||||
ref="uploader"
|
||||
:url="`${$apiBase}/Images/upload`"
|
||||
:form-fields="formFields"
|
||||
@added="onAdded"
|
||||
@finish="onFinish"
|
||||
:auto-upload="uploadAutomatically"
|
||||
multiple
|
||||
flat
|
||||
bordered
|
||||
style="width: 100%;">
|
||||
<template v-slot:list="scope">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in scope.files" :key="file.name">
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="file.uploadName"
|
||||
:readonly="file.__status == 'uploading' || file.__status == 'uploaded'"
|
||||
:loading="file.__status == 'uploading'"
|
||||
:error="file.__status == 'failed'"
|
||||
dense>
|
||||
<template v-slot:prepend
|
||||
v-if="file.__img">
|
||||
<q-avatar>
|
||||
<img :src="file.__img.src">
|
||||
</q-avatar>
|
||||
</template>
|
||||
<template v-slot:append
|
||||
v-if="file.__status == 'uploaded'">
|
||||
<q-icon
|
||||
name="check"
|
||||
color="green"/>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
@click="scope.removeFile(file)"
|
||||
flat
|
||||
dense
|
||||
round/>
|
||||
</template>
|
||||
<template v-slot:hint>
|
||||
{{ file.__sizeLabel }} / {{ file.__progressLabel }}
|
||||
</template>
|
||||
<template v-slot:error>
|
||||
{{ file.xhr.statusText }}
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
</q-uploader>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-checkbox
|
||||
v-model="updateMatching"
|
||||
:label="$t('updateMatchingId')"/>
|
||||
<q-checkbox
|
||||
v-model="uploadAutomatically"
|
||||
:label="$t('uploadAutomatically')"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Images'
|
||||
name: 'Images',
|
||||
data () {
|
||||
return {
|
||||
collection: 'catalog',
|
||||
collections: null,
|
||||
updateMatching: true,
|
||||
uploadAutomatically: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let filter = {
|
||||
fields: ['id', 'name', 'desc'],
|
||||
order: 'desc'
|
||||
}
|
||||
this.$axios.get(`ImageCollections`, { params: { filter } })
|
||||
.then(res => (this.collections = res.data))
|
||||
},
|
||||
methods: {
|
||||
onAdded (files) {
|
||||
for (let file of files) {
|
||||
file.uploadName = file.name.split('.')[0]
|
||||
}
|
||||
},
|
||||
onFinish () {
|
||||
let error = this.$refs.uploader.files.findIndex(
|
||||
file => file.__status === 'failed')
|
||||
|
||||
if (error === -1) {
|
||||
this.$q.notify({
|
||||
message: this.$t('imagesUploadSuccess'),
|
||||
icon: 'check',
|
||||
color: 'green'
|
||||
})
|
||||
} else {
|
||||
this.$q.notify({
|
||||
message: this.$t('imagesUploadFailed'),
|
||||
icon: 'warning',
|
||||
color: 'orange'
|
||||
})
|
||||
}
|
||||
},
|
||||
formFields (files) {
|
||||
return [
|
||||
{
|
||||
name: 'collectionFk',
|
||||
value: this.collection
|
||||
}, {
|
||||
name: 'updateMatching',
|
||||
value: this.updateMatching
|
||||
}, {
|
||||
name: 'name',
|
||||
value: files[0].uploadName
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,97 @@
|
|||
<template>
|
||||
<div class="text-subtitle1 text-center text-grey-7 q-pa-lg">
|
||||
Sorry this section is under construction
|
||||
<div class="vn-pp row justify-center">
|
||||
<toolbar>
|
||||
<q-input
|
||||
v-model="search"
|
||||
debounce="500"
|
||||
dark
|
||||
dense
|
||||
standout>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="search === ''"
|
||||
name="search"/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</toolbar>
|
||||
<div>
|
||||
<lb-scroll
|
||||
ref="scroll"
|
||||
:request="request"
|
||||
@data="data = arguments[0]">
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="item in data"
|
||||
:key="item.id"
|
||||
clickable>
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<img :src="`${$imageBase}/catalog/200x200/${item.image}`">
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{item.longName}}</q-item-label>
|
||||
<q-item-label caption>#{{item.id}}</q-item-label>
|
||||
<q-item-label caption>{{item.image}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</lb-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Page from 'components/Page'
|
||||
|
||||
export default {
|
||||
name: 'Items'
|
||||
name: 'Items',
|
||||
mixins: [Page],
|
||||
data () {
|
||||
return {
|
||||
search: ''
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
next()
|
||||
this.$refs.scroll.reload()
|
||||
},
|
||||
watch: {
|
||||
search (value) {
|
||||
let query
|
||||
if (value) query = { search: value }
|
||||
this.$router.push({ query })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
request () {
|
||||
this.search = this.$route.query.search || ''
|
||||
if (!this.search) return null
|
||||
|
||||
let where = {}
|
||||
|
||||
if (/^[0-9]+$/.test(this.search)) {
|
||||
where.id = this.search
|
||||
} else {
|
||||
where.longName = { like: `%${this.search}%` }
|
||||
}
|
||||
|
||||
return {
|
||||
url: 'Items',
|
||||
filter: {
|
||||
fields: ['id', 'longName', 'image'],
|
||||
order: 'name',
|
||||
where
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<template>
|
||||
<div class="vn-pp row justify-center">
|
||||
<q-card class="vn-w-lg">
|
||||
<q-img
|
||||
:src="`${$imageBase}/news/full/${myNew.image}`"
|
||||
:ratio="16/4">
|
||||
<div style="position: relative;">
|
||||
<q-img
|
||||
:src="`${$imageBase}/news/full/${myNew.image}`"
|
||||
:ratio="3/1">
|
||||
</q-img>
|
||||
<q-btn
|
||||
@click="editImage = true"
|
||||
@click="showImgEditor = true"
|
||||
:title="$t('edit')"
|
||||
icon="edit"
|
||||
round
|
||||
color="accent"
|
||||
class="absolute-bottom-right"
|
||||
style="bottom: .6em; right: .6em;"/>
|
||||
</q-img>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="myNew.title"
|
||||
|
|
@ -42,79 +44,11 @@
|
|||
:toolbar="tools"/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-dialog v-model="editImage" persistent>
|
||||
<q-card style="width: 25em;">
|
||||
<q-card-section>
|
||||
<q-select
|
||||
v-model="image"
|
||||
:label="$t('image')"
|
||||
:options="images"
|
||||
@filter="filterImages"
|
||||
option-value="name"
|
||||
option-label="name"
|
||||
new-value-mode="add"
|
||||
@new-value="addImage"
|
||||
emit-value
|
||||
use-input
|
||||
hide-selected
|
||||
fill-input
|
||||
input-debounce="0">
|
||||
<template v-slot:option="scope">
|
||||
<q-item
|
||||
v-bind="scope.itemProps"
|
||||
v-on="scope.itemEvents">
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<img :src="`${$imageBase}/${imageCollection}/200x200/${scope.opt.name}`">
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{scope.opt.name}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-avatar>
|
||||
<img :src="`${$imageBase}/${imageCollection}/200x200/${image}`">
|
||||
</q-avatar>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
icon="add_a_photo"
|
||||
@click="showUploader = !showUploader"
|
||||
:title="$t('edit')"
|
||||
:disable="!image"
|
||||
:color="showUploader ? 'primary' : null"
|
||||
flat
|
||||
round
|
||||
dense/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-slide-transition>
|
||||
<q-uploader
|
||||
ref="uploader"
|
||||
v-show="showUploader"
|
||||
:url="`${$apiBase}/Images/upload`"
|
||||
auto-upload
|
||||
class="q-mt-md"
|
||||
flat
|
||||
bordered/>
|
||||
</q-slide-transition>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
:label="$t('cancel')"
|
||||
v-close-popup
|
||||
color="primary"
|
||||
flat/>
|
||||
<q-btn
|
||||
:label="$t('accept')"
|
||||
@click="onEditImage"
|
||||
color="primary"
|
||||
flat/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<image-editor
|
||||
v-model="myNew.image"
|
||||
collection="news"
|
||||
:show="showImgEditor"
|
||||
@response="showImgEditor = false"/>
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-btn
|
||||
:title="$t(id ? 'save' : 'create')"
|
||||
|
|
@ -128,10 +62,14 @@
|
|||
|
||||
<script>
|
||||
import Page from 'components/Page'
|
||||
import ImageEditor from 'components/ImageEditor'
|
||||
|
||||
export default {
|
||||
name: 'New',
|
||||
mixins: [Page],
|
||||
components: {
|
||||
ImageEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
myNew: { text: '' },
|
||||
|
|
@ -139,10 +77,7 @@ export default {
|
|||
tags: null,
|
||||
priorities: [1, 2, 3],
|
||||
image: null,
|
||||
editImage: false,
|
||||
showUploader: false,
|
||||
imageCollection: 'news',
|
||||
images: [],
|
||||
showImgEditor: false,
|
||||
tools: [
|
||||
['left', 'center', 'right', 'justify'],
|
||||
['bold', 'italic', 'underline', 'removeFormat'],
|
||||
|
|
@ -194,19 +129,6 @@ export default {
|
|||
watch: {
|
||||
'this.$route.params.id': function () {
|
||||
this.loadNew()
|
||||
},
|
||||
image () {
|
||||
this.showUploader = false
|
||||
},
|
||||
showUploader () {
|
||||
this.$refs.uploader.reset()
|
||||
},
|
||||
editImage () {
|
||||
if (this.editImage) {
|
||||
this.image = this.myNew.image
|
||||
} else {
|
||||
this.showUploader = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -229,7 +151,7 @@ export default {
|
|||
this.$axios.get(`News/${this.id}`, { params: { filter } })
|
||||
.then(res => (this.myNew = res.data))
|
||||
} else {
|
||||
this.new = {
|
||||
this.myNew = {
|
||||
userFk: this.$state.userId,
|
||||
tag: 'new',
|
||||
priority: 1,
|
||||
|
|
@ -253,31 +175,10 @@ export default {
|
|||
this.$q.notify({
|
||||
message: this.$t(message),
|
||||
icon: 'check',
|
||||
color: 'green-6'
|
||||
color: 'green'
|
||||
})
|
||||
this.$router.go(-1)
|
||||
})
|
||||
},
|
||||
filterImages (val, update, abort) {
|
||||
let filter = {
|
||||
where: {
|
||||
name: { like: `${val}%` },
|
||||
collectionFk: this.imageCollection
|
||||
},
|
||||
limit: !val ? 50 : undefined
|
||||
}
|
||||
this.$axios.get(`Images`, { params: { filter } })
|
||||
.then(res => {
|
||||
update(() => (this.images = res.data))
|
||||
})
|
||||
.catch(() => abort())
|
||||
},
|
||||
onEditImage () {
|
||||
this.myNew.image = this.image
|
||||
this.editImage = false
|
||||
},
|
||||
addImage (inputValue, doneFn) {
|
||||
console.log(inputValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
clickable
|
||||
v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-avatar rounded>
|
||||
<q-avatar @click.native="onImgClick($event, myNew.image)" rounded>
|
||||
<img :src="`${$imageBase}/news/200x200/${myNew.image}`">
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
|
@ -42,6 +42,10 @@
|
|||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<full-image
|
||||
ref="fullImage"
|
||||
v-model="image"
|
||||
collection="news"/>
|
||||
<q-dialog v-model="confirm" persistent>
|
||||
<q-card>
|
||||
<q-card-section class="row items-center">
|
||||
|
|
@ -74,12 +78,17 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Page from 'components/Page'
|
||||
|
||||
export default {
|
||||
name: 'News',
|
||||
mixins: [Page],
|
||||
data () {
|
||||
return {
|
||||
news: null,
|
||||
confirm: false
|
||||
confirm: false,
|
||||
showImage: false,
|
||||
image: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -117,6 +126,11 @@ export default {
|
|||
this.news.splice(index, 1)
|
||||
this.$q.notify(this.$t('removedSuccess'))
|
||||
})
|
||||
},
|
||||
onImgClick (event, image) {
|
||||
this.image = image
|
||||
this.$refs.fullImage.show()
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<template>
|
||||
<div class="vn-pp row justify-center">
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered>
|
||||
<div class="q-pa-sm">
|
||||
<div
|
||||
class="row justify-center"
|
||||
style="max-width: 60em; margin: 0 auto;">
|
||||
<a
|
||||
v-for="link in links"
|
||||
:key="link.id"
|
||||
:href="link.link">
|
||||
<q-item clickable>
|
||||
<q-item-section avatar>
|
||||
<q-avatar square>
|
||||
<img :src="`${$imageBase}/link/full/${link.image}`">
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{link.name}}</q-item-label>
|
||||
<q-item-label caption>{{link.description}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator/>
|
||||
:href="link.link"
|
||||
class="link q-ma-sm">
|
||||
<q-card
|
||||
class="clickable"
|
||||
style="width: 11em;">
|
||||
<q-card-section class="row justify-center">
|
||||
<img
|
||||
:src="`${$imageBase}/link/full/${link.image}`"
|
||||
style="width: 5em;">
|
||||
</q-card-section>
|
||||
<q-card-section style="height: 7em; overflow: hidden;">
|
||||
<div class="text-subtitle1 ellipsis">{{link.name}}</div>
|
||||
<div class="text-caption">{{link.description}}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</a>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,6 +31,11 @@
|
|||
display block
|
||||
text-decoration inherit
|
||||
color: inherit
|
||||
.q-card.clickable
|
||||
transition background 300ms ease-out
|
||||
&:hover
|
||||
background rgba(255, 255, 255, .2)
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,19 +8,23 @@
|
|||
flat/>
|
||||
</toolbar>
|
||||
<q-card class="vn-w-md">
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="user.name"
|
||||
:label="$t('userName')"
|
||||
readonly/>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-input v-model="user.email" :label="$t('email')" />
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="user.email"
|
||||
:label="$t('email')" />
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-input v-model="user.nickname" :label="$t('nickname')" />
|
||||
<q-card-section>
|
||||
<q-input
|
||||
v-model="user.nickname"
|
||||
:label="$t('nickname')" />
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-card-section>
|
||||
<q-select
|
||||
v-model="user.lang"
|
||||
:label="$t('language')"
|
||||
|
|
@ -29,11 +33,6 @@
|
|||
option-label="name"
|
||||
emit-value/>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-md">
|
||||
<q-checkbox
|
||||
v-model="receiveInvoices"
|
||||
:label="$t('receiveInvoiceByEmail')" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-dialog v-model="changePassword" persistent>
|
||||
<q-card style="width: 25em;">
|
||||
|
|
@ -170,7 +169,7 @@ export default {
|
|||
this.$q.notify({
|
||||
message: this.$t('passwordChanged'),
|
||||
icon: 'check',
|
||||
color: 'green-6'
|
||||
color: 'green'
|
||||
})
|
||||
},
|
||||
onSave () {
|
||||
|
|
@ -178,7 +177,7 @@ export default {
|
|||
.then(res => (this.$q.notify({
|
||||
message: this.$t('dataSaved'),
|
||||
icon: 'check',
|
||||
color: 'green-6'
|
||||
color: 'green'
|
||||
})))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,58 +4,47 @@
|
|||
<q-input
|
||||
v-model="search"
|
||||
debounce="500"
|
||||
class="q-mr-sm"
|
||||
dark
|
||||
dense
|
||||
standout>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="search === ''"
|
||||
name="search"
|
||||
/>
|
||||
name="search"/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
@click="search = ''"/>
|
||||
</template>
|
||||
</q-input>
|
||||
</toolbar>
|
||||
<div>
|
||||
<div
|
||||
v-if="!users || !users.length"
|
||||
class="text-subtitle1 text-center text-grey-7 q-pa-md">
|
||||
<span v-if="!users">
|
||||
{{$t('setSearchFilter')}}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{$t('noDataFound')}}
|
||||
</span>
|
||||
</div>
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:to="`/access-log/${user.id}`"
|
||||
:title="$t('accessLog')"
|
||||
clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>{{user.nickname}}</q-item-label>
|
||||
<q-item-label caption>#{{user.id}}</q-item-label>
|
||||
<q-item-label caption>{{user.name}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<lb-scroll
|
||||
ref="scroll"
|
||||
:request="request"
|
||||
@data="data = arguments[0]">
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="user in data"
|
||||
:key="user.id"
|
||||
:to="`/access-log/${user.id}`"
|
||||
:title="$t('accessLog')"
|
||||
clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>{{user.nickname}}</q-item-label>
|
||||
<q-item-label caption>#{{user.id}}</q-item-label>
|
||||
<q-item-label caption>{{user.name}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</lb-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Page from 'components/Page'
|
||||
|
||||
|
|
@ -64,51 +53,47 @@ export default {
|
|||
mixins: [Page],
|
||||
data () {
|
||||
return {
|
||||
users: null,
|
||||
search: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.onRouteChange(this.$route)
|
||||
},
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
this.onRouteChange(to)
|
||||
next()
|
||||
this.$refs.scroll.reload()
|
||||
},
|
||||
watch: {
|
||||
search (value) {
|
||||
let location = {}
|
||||
if (value) location.query = { search: value }
|
||||
this.$router.push(location)
|
||||
let query
|
||||
if (value) query = { search: value }
|
||||
this.$router.push({ query })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRouteChange (route) {
|
||||
this.users = null
|
||||
this.search = route.query.search || ''
|
||||
if (!this.search) return
|
||||
request () {
|
||||
this.search = this.$route.query.search || ''
|
||||
if (!this.search) return null
|
||||
|
||||
let where = {}
|
||||
|
||||
if (/^[0-9]+$/.test(this.search)) {
|
||||
where.id = this.search
|
||||
} else {
|
||||
let like = { like: `%${this.search}%` }
|
||||
where = {
|
||||
or: [
|
||||
{ name: { like: `%${this.search}%` } },
|
||||
{ nickname: { like: `%${this.search}%` } }
|
||||
{ name: like },
|
||||
{ nickname: like }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
let filter = {
|
||||
fields: ['id', 'nickname', 'name', 'active'],
|
||||
order: 'name',
|
||||
limit: 25,
|
||||
where
|
||||
return {
|
||||
url: 'Accounts',
|
||||
filter: {
|
||||
fields: ['id', 'nickname', 'name', 'active'],
|
||||
order: 'name',
|
||||
where
|
||||
}
|
||||
}
|
||||
this.$axios.get('Accounts', { params: { filter } })
|
||||
.then(res => (this.users = res.data))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,39 +48,38 @@
|
|||
</div>
|
||||
</q-drawer>
|
||||
<div>
|
||||
<div
|
||||
v-if="visits && !visits.length"
|
||||
class="text-subtitle1 text-center text-grey-7 q-pa-md">
|
||||
{{$t('noDataFound')}}
|
||||
</div>
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="visit in visits"
|
||||
:key="visit.browser">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{visit.browser}} {{visit.minVersion}} - {{visit.maxVersion}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{$t('visitsCount', [visit.visits, visit.newVisits])}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{visit.lastVisit | relTime}}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<lb-scroll
|
||||
ref="scroll"
|
||||
:request="request"
|
||||
@data="data = arguments[0]">
|
||||
<q-card class="vn-w-md">
|
||||
<q-list bordered separator>
|
||||
<q-item
|
||||
v-for="visit in data"
|
||||
:key="visit.browser">
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{visit.browser}} {{visit.minVersion}} - {{visit.maxVersion}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{$t('visitsCount', [visit.visits, visit.newVisits])}}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{visit.lastVisit | relTime}}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</lb-scroll>
|
||||
</div>
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-btn
|
||||
fab
|
||||
icon="refresh"
|
||||
color="accent"
|
||||
@click="refresh"
|
||||
:title="$t('refresh')"
|
||||
/>
|
||||
@click="$refs.scroll.reload()"
|
||||
:title="$t('refresh')"/>
|
||||
</q-page-sticky>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -95,7 +94,6 @@ export default {
|
|||
data () {
|
||||
let today = date.formatDate(new Date(), 'YYYY/MM/DD')
|
||||
return {
|
||||
visits: null,
|
||||
from: today,
|
||||
to: today,
|
||||
count: null,
|
||||
|
|
@ -106,18 +104,15 @@ export default {
|
|||
created () {
|
||||
this.$state.useRightDrawer = true
|
||||
},
|
||||
mounted () {
|
||||
this.refresh()
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
let params = {
|
||||
from: new Date(this.from),
|
||||
to: new Date(this.to)
|
||||
request () {
|
||||
return {
|
||||
url: 'Visits/listByBrowser',
|
||||
params: {
|
||||
from: new Date(this.from),
|
||||
to: new Date(this.to)
|
||||
}
|
||||
}
|
||||
this.visits = null
|
||||
return this.$axios.get(`Visits/listByBrowser`, { params })
|
||||
.then(res => (this.visits = res.data))
|
||||
},
|
||||
optionsFn (date) {
|
||||
return date <= this.today
|
||||
|
|
@ -125,15 +120,15 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
from () {
|
||||
this.refresh()
|
||||
this.$refs.scroll.reload()
|
||||
},
|
||||
to () {
|
||||
this.refresh()
|
||||
this.$refs.scroll.reload()
|
||||
},
|
||||
visits () {
|
||||
if (this.visits) {
|
||||
this.count = this.visits.reduce((a, i) => a + i.visits, 0)
|
||||
this.newCount = this.visits.reduce((a, i) => a + i.newVisits, 0)
|
||||
data () {
|
||||
if (this.data) {
|
||||
this.count = this.data.reduce((a, i) => a + i.visits, 0)
|
||||
this.newCount = this.data.reduce((a, i) => a + i.newVisits, 0)
|
||||
} else {
|
||||
this.count = null
|
||||
this.newCount = null
|
||||
|
|
|
|||
Loading…
Reference in New Issue