encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

element ui usage

Browse Source
This commit is contained in:
lesion
2019-03-04 02:15:22 +01:00
parent 5d37315c9d
commit 91579e56dd
16 changed files with 241 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/components/Admin.vue
View File

@@ -1,47 +1,48 @@
<template lang="pug">
b-modal(hide-footer hide-header
@hide='$router.replace("/")' size='lg' :visible='true')
h4.text-center Admin
b-tabs(pills)
b-tab.pt-1
template(slot='title')
el-dialog(@close='$router.replace("/")' :title='$t("Admin")' center width='900px' :visible='true')
el-tabs
el-tab-pane.pt-1
template(slot='label')
v-icon(name='users')
span {{$t('Users')}}
span.ml-1 {{$t('Users')}}
b-table(:items='users' :fields='userFields' striped small hover
:per-page='5' :current-page='userPage')
template(slot='action' slot-scope='data')
b-button.mr-1(:variant='data.item.is_active?"warning":"success"' @click='toggle(data.item)') {{data.item.is_active?$t('Deactivate'):$t('Activate')}}
b-button(:variant='data.item.is_admin?"danger":"warning"' @click='toggleAdmin(data.item)') {{data.item.is_admin?$t('Remove Admin'):$t('Admin')}}
el-button.mr-1(size='mini' :type='data.item.is_active?"warning":"success"' @click='toggle(data.item)') {{data.item.is_active?$t('Deactivate'):$t('Activate')}}
el-button(size='mini' :type='data.item.is_admin?"danger":"warning"' @click='toggleAdmin(data.item)') {{data.item.is_admin?$t('Remove Admin'):$t('Admin')}}
b-pagination(:per-page='5' v-model='userPage' :total-rows='users.length')
b-tab.pt-1
template(slot='title')
el-tab-pane.pt-1
template(slot='label')
v-icon(name='map-marker-alt')
span {{$t('Places')}}
span.ml-1 {{$t('Places')}}
p You can change place's name or address
b-form.mb-2(inline)
b-input.mr-1(:placeholder='$t("Name")' v-model='place.name')
b-input.mr-1(:placeholder='$t("Address")' v-model='place.address')
b-button(variant='primary' @click='savePlace') {{$t('Save')}}
el-form.mb-2(:inline='true' label-width='120px')
el-form-item(:label="$t('Name')")
el-input.mr-1(:placeholder='$t("Name")' v-model='place.name')
el-form-item(:label="$t('Address')")
el-input.mr-1(:placeholder='$t("Address")' v-model='place.address')
el-button(variant='primary' @click='savePlace') {{$t('Save')}}
b-table(selectable :items='places' :fields='placeFields' striped hover
small selectedVariant='success' primary-key='id'
select-mode="single" @row-selected='placeSelected'
:per-page='5' :current-page='placePage')
b-pagination(:per-page='5' v-model='placePage' :total-rows='places.length')
b-tab.pt-1
template(slot='title')
el-tab-pane.pt-1
template(slot='label')
v-icon(name='tag')
span {{$t('Tags')}}
p You can choose colors of your tags
b-table(:items='tags' :fields='tagFields'
striped small hover :per-page='10' :current-page='tagPage')
template(slot='tag' slot-scope='data')
b-badge(:style='{backgroundColor: data.item.color}') {{data.item.tag}}
template(slot='color' slot-scope='data')
el-color-picker(v-model='data.item.color' @change='updateColor(data.item)')
el-table(:data='tags' striped small hover :per-page='10' :current-page='tagPage')
el-table-column(label='Tag')
template(slot-scope='data')
el-tag(:color='data.row.color' size='mini') {{data.row.tag}}
el-table-column(label='Color')
template(slot-scope='data')
el-color-picker(v-model='data.row.color' @change='updateColor(data.row)')
b-pagination(:per-page='10' v-model='tagPage' :total-rows='tags.length')
b-tab.pt-1
template(slot='title')
el-tab-pane.pt-1
template(slot='label')
v-icon(name='tools')
span {{$t('Settings')}}

17
client/src/components/Event.vue
View File

@@ -6,8 +6,8 @@
div <v-icon name='clock'/> {{event.start_datetime|datetime}}
span <v-icon name='map-marker-alt'/> {{event.place.name}}
br
b-badge(:style='{backgroundColor: tag.color}' v-for='tag in event.tags' href='#'
@click.stop='addSearchTag(tag)') {{tag.tag}}
el-tag.mr-1(:color='tag.color' v-for='tag in event.tags'
size='mini' @click.stop='addSearchTag(tag)') {{tag.tag}}
</template>
<script>
import { mapState, mapActions } from 'vuex';
@@ -43,8 +43,16 @@ export default {
content: ''
} */
.el-card {
border: none;
}
.el-card img {
width: 100%;
}
.card-columns .card {
margin-top: 0.3em;
margin-top: 0.2em;
margin-bottom: 0em;
}
@@ -53,8 +61,5 @@ export default {
object-fit: cover;
}
.badge {
margin-left: 0.1rem;
}
</style>

68
client/src/components/EventDetail.vue
View File

@@ -1,25 +1,23 @@
<template lang="pug">
b-modal#eventDetail(hide-footer hide-header
@hide='$router.replace("/")' size='lg' :visible='true')
b-card(bg-variant='dark' href='#' text-variant='white'
no-body, :img-src='imgPath')
b-card-header
h3 {{event.title}}
v-icon(name='clock')
span {{event.start_datetime|datetime}}
br
v-icon(name='map-marker-alt')
span {{event.place.name}} - {{event.place.address}}
br
b-card-body(v-if='event.description || event.tags')
pre {{event.description}}
br
b-badge(:style='{backgroundColor: tag.color}' v-for='tag in event.tags') {{tag.tag}}
b-navbar(v-if='mine' type="dark" variant="dark" toggleable='lg')
b-navbar-nav.ml-auto
b-nav-item(@click.prevent='remove') <v-icon color='red' name='times'/> {{$t('Remove')}}
b-nav-item(:to='"/edit/"+event.id') <v-icon color='orange' name='edit'/> {{$t('Edit')}}
el-dialog#eventDetail(@close='$router.replace("/")' :visible='true' top='4vh')
img(:src='imgPath')
el-card(v-loading='loading')
h4 {{event.title}}
h6 <v-icon name='clock' /> {{event.start_datetime|datetime}}
h6 <v-icon name='map-marker-alt' /> {{event.place.name}} - {{event.place.address}}
el-card(v-if='event.description || event.tags && event.tags.length')
pre.mb-2 {{event.description}}
el-tag.mr-1(:color='tag.color' v-for='tag in event.tags'
size='mini') {{tag.tag}}
.ml-auto(v-if='mine')
hr
el-button(plain type='danger' @click.prevent='remove' icon='el-icon-remove') {{$t('Remove')}}
el-button(plain type='primary' @click='$router.replace("/edit/"+event.id)') <v-icon color='orange' name='edit'/> {{$t('Edit')}}
//- b-navbar(type="dark" variant="dark" toggleable='lg')
//- template(slot='footer')
//- b-navbar-nav
//- b-button(variant='success') {{$t('Share')}} <v-icon name='share'/>
//- b-nav-item( {{$t('')}})
//- b-card-footer.text-right
//- span.mr-3 {{event.comments.length}} <v-icon name='comments'/>
//- a(href='#', @click='remove')
@@ -48,6 +46,7 @@ export default {
return {
event: { comments: [], place: {}},
id: null,
loading: true,
}
},
mounted () {
@@ -60,6 +59,7 @@ export default {
async load () {
const event = await api.getEvent(this.id)
this.event = event
this.loading = false
},
async remove () {
await api.delEvent(this.event.id)
@@ -70,23 +70,21 @@ export default {
}
</script>
<style>
#eventDetail .modal-body {
padding: 0px;
#eventDetail .el-dialog {
min-width: 800px;
}
/* .card::before {
border-top: 4px solid black;
content: ''
} */
#eventDetail .card {
margin-left: -5px;
#eventDetail .el-dialog__header {
display: none;
}
/* #eventDetail .card-img {
max-height: 150px;
object-fit: cover;
} */
#eventDetail .badge {
margin-left: 0.1rem;
#eventDetail .el-dialog__body {
padding: 0px;
font-size: 17px;
}
#eventDetail img {
width: 100%;
}
</style>

53
client/src/components/Export.vue
View File

@@ -1,38 +1,32 @@
<template lang="pug">
b-modal(hide-footer hide-header
@hide='$router.replace("/")' size='lg' :visible='true' v-if='type')
h3.text-center Export
el-dialog(@close='$router.replace("/")' :title='$t("Export")' :visible='true' center width='600px')
p {{$t('export_intro')}}
li(v-if='filters.tags.length') {{$t('Tags')}}:
b-badge.ml-1(:style='{backgroundColor: tag.color}' v-for='tag in filters.tags') {{tag}}
el-tag.ml-1(color='#409EFF' size='mini' v-for='tag in filters.tags') {{tag}}
li(v-if='filters.places.length') {{$t('Places')}}:
b-badge.ml-1(v-for='place in filters.places') {{place}}
b-tabs(pills vertical)
b-tab.pt-1(title='feed rss' :active="type === 'feed'" @click='type="feed"')
p(v-html='$t(`export_feed_explanation`)')
b-input-group.mb-2(v-if='showLink')
b-form-input( v-model='link' autocomplete='off')
b-input-group-append
b-button(variant="success" v-clipboard:copy="link") <v-icon name='clipboard'/> Copy
el-tag.ml-1(color='#409EFF' size='mini' v-for='place in filters.places') {{place}}
el-tabs.mt-2(tabPosition='left' v-model='type')
el-tab-pane.pt-1(label='feed rss' name='feed')
span(v-html='$t(`export_feed_explanation`)')
el-input(v-model='link')
el-button(slot='append' plain type="primary" icon='el-icon-document' v-clipboard:copy="link") {{$t("Copy")}}
b-tab.pt-1(title='ics/ical' :active="type === 'ics'" @click='type="ics"')
el-tab-pane.pt-1(label='ics/ical' name='ics')
p(v-html='$t(`export_ical_explanation`)')
b-input-group.mb-2(v-if='showLink')
b-form-input( v-model='link' autocomplete='off')
b-input-group-append
b-button(variant="success" v-clipboard:copy="link") <v-icon name='clipboard'/> Copy
b-tab.pt-1(title='email' :active="type === 'email'" @click='type="email"')
el-input(v-model='link')
el-button(slot='append' plain type="primary" icon='el-icon-document' v-clipboard:copy="link") {{$t("Copy")}}
el-tab-pane.pt-1(label='email' name='email')
p(v-html='$t(`export_email_explanation`)')
b-form
el-switch(v-model='mail.sendOnInsert' :active-text="$t('notify_on_insert')")
br
el-switch(v-model='mail.reminder' :active-text="$t('send_reminder')")
b-form-input.mt-1(v-model='mail.mail' :placeholder="$t('Insert your address')")
b-button.mt-1.float-right(variant='success' @click='activate_email') {{$t('Send')}}
el-switch.mt-2(v-model='mail.reminder' :active-text="$t('send_reminder')")
el-input.mt-2(v-model='mail.mail' :placeholder="$t('Insert your address')")
el-button.mt-2.float-right(type='success' @click='activate_email') {{$t('Send')}}
b-tab.pt-1(title='list' :active="type === 'list'" @click='type="list"')
el-tab-pane.pt-1(label='list' name='list')
p(v-html='$t(`export_list_explanation`)')
b-card.mb-1(no-body header='Eventi')
b-list-group#list(flush)
@@ -44,13 +38,16 @@
strong.mb-1 {{event.title}}
br
small.float-right {{event.place.name}}
b-badge.float-left.ml-1(:style='{backgroundColor: tag.color}' v-for='tag in event.tags') {{tag.tag}}
b-form-textarea(v-model='script')
el-tag.mr-1(:color='tag.color' size='mini' v-for='tag in event.tags') {{tag.tag}}
el-input.mb-1(type='textarea' v-model='script')
el-button.float-right(plain type="primary" icon='el-icon-document' v-clipboard:copy="script") Copy
b-tab.pt-1(title='calendar' :active="type === 'calendar'" @click='type="calendar"')
el-tab-pane.pt-1(label='calendar' name='calendar')
p(v-html='$t(`export_calendar_explanation`)')
Calendar
b-form-textarea(v-model='script')
Calendar.mb-1
el-input.mb-1(type='textarea' v-model='script')
el-button.float-right(plain type="primary" icon='el-icon-document' v-clipboard:copy="script") Copy
</template>
<script>

5
client/src/components/Home.vue
View File

@@ -2,7 +2,6 @@
b-container
b-card-group(columns)
Calendar
//- transition-group(name="list" tag="div")
Event.item(v-for='event in filteredEvents'
:key='event.id'
:event='event')
@@ -30,7 +29,7 @@ export default {
.card-columns {
column-count: 1;
column-gap: 0.3em;
column-gap: 0.2em;
}
@media (min-width: 576px) {
.container {
@@ -38,7 +37,6 @@ export default {
}
.card-columns {
column-count: 2;
column-gap: 0.3em;
}
}
@@ -48,7 +46,6 @@ export default {
}
.card-columns {
column-count: 3;
column-gap: 0.3em;
}
}

27
client/src/components/Login.vue
View File

@@ -1,20 +1,15 @@
<template lang='pug'>
b-modal(hide-header hide-footer @shown="$refs.email.focus()"
@hide='$router.replace("/")' :visible='true')
h4.text-center.center {{$t('Login')}}
b-form
//- p.text-muted Sign In to your account
b-input-group.mb-1
b-input-group-prepend
b-input-group-text
v-icon(name="user")
b-form-input(ref='email' v-model="email" type="text" class="form-control" placeholder="E-mail" autocomplete="email")
b-input-group.mb-3
b-input-group-prepend
b-input-group-text
v-icon(name="lock")
b-form-input(v-model="password" type="password" class="form-control" placeholder="Password" autocomplete="current-password")
b-button.float-right(variant="success" @click='submit') Login
el-dialog(@show="$refs.email.focus()" :title='$t("Login")' center width='400px'
@close='$router.replace("/")' :visible='true')
el-form
span {{$t('login_explanation')}}
el-input.mb-2(v-model='email' type='email' :placeholder='$t("Email")' autocomplete='email' ref='email')
v-icon(name='user' slot='prepend')
el-input.mb-2(v-model='password' type='password' :placeholder='$t("Password")')
v-icon(name="lock" slot='prepend')
router-link(to='/register')
a {{$t('Not registered?')}}
el-button.float-right(plain type="success" icon='el-icon-arrow-right' @click='submit') {{$t('Login')}}
</template>
<script>

2
client/src/components/Settings.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
b-modal(hide-header hide-footer @hide='$router.push("/")' :visible='true')
b-modal(hide-header hide-footer @hide='$router.go(-1)' :visible='true')
h4.text-center {{$t('Settings')}}
b-form
b-input-group.mt-1(prepend='Email')

144
client/src/components/newEvent.vue
View File

@@ -1,68 +1,66 @@
<template lang="pug">
b-modal(hide-header hide-footer no-close-on-backdrop
@hide='$router.replace("/")' no-close-on-esc size='lg' :visible='true')
h4.text-center.center {{edit?$t('Edit event'):$t('New event')}}
b-tabs#tabss(pills v-model='activeTab')
b-form
b-tab
template(slot='title')
v-icon(name='map-marker-alt')
span {{$t('Where')}}
b-card-body
span.text-muted {{$t('where_explanation')}}
typeahead.mb-3(v-model='event.place.name' :data='places_name' @enter='placeChoosed')
span.text-muted {{$t('address_explanation')}}
b-form-input(ref='address' v-model='event.place.address' @keydown.native.enter='next')
b-tab
template(slot='title')
v-icon(name='clock')
span {{$t('When')}}
b-card-body
el-dialog(@close='$router.replace("/")' :title="edit?$t('Edit event'):$t('New event')" center :close-on-press-escape='false' :visible='true')
el-tabs.mb-2(v-model='activeTab' v-loading='sending')
el-tab-pane
span(slot='label') {{$t('Where')}} <v-icon name='map-marker-alt'/>
p {{$t('where_explanation')}}
el-form(label-width='120px')
el-form-item(:label='$t("Where")')
el-select(v-model='event.place.name' @change='placeChoosed' filterable allow-create default-first-option)
el-option(v-for='place in places_name' :label='place' :value='place')
el-form-item(:label='$t("Address")')
el-input(ref='address' v-model='event.place.address' @keydown.native.enter='next')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
el-tab-pane
span(slot='label') {{$t('When')}} <v-icon name='clock'/>
el-form(label-width='120px')
span {{event.multidate ? $t('dates_explanation') : $t('date_explanation')}}
el-switch.float-right(v-model='event.multidate' :active-text="$t('multidate_explanation')")
span.text-muted {{event.multidate ? $t('dates_explanation') : $t('date_explanation')}}
v-date-picker.mb-3(:mode='event.multidate ? "range" : "single"' v-model='date' is-inline
is-expanded :min-date='new Date()' @input='date ? $refs.time_start.focus() : false')
b-row
b-col
label.text-muted {{$t('time_start_explanation')}}
el-time-select(ref='time_start'
v-model="time.start"
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
b-col.text-right
label.text-muted {{$t('time_end_explanation')}}
el-time-select(
v-model='time.end'
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}"
)
b-tab
template(slot='title')
v-icon(name='file-alt')
span {{$t('What')}}
b-card-body
span.text-muted {{$t('what_explanation')}}
b-form-input.mb-3(v-model.trim='event.title' autocomplete='off')
span.text-muted {{$t('description_explanation')}}
b-form-textarea.mb-3(v-model='event.description' :rows='3')
span.text-muted {{$t('tag_explanation')}}
typeahead(v-model="event.tags" :data='tags' multiple)
b-tab
template(slot='title')
v-icon(name='image')
span {{$t('Media')}}
b-card-body
span.text-muted {{$t('media_explanation')}}
b-form-file(v-model='event.image', :placeholder='$t("Poster")' accept='image/*')
b-button(v-if='activeTab==0' variant='danger' @click='$router.go(-1)') {{$t('Cancel')}}
b-button.float-left(v-else variant='danger' @click='prev') {{$t('Prev')}}
b-button.float-right(v-if='activeTab<3' variant='success' @click='next' :disabled='!couldProceed') {{$t('Next')}}
b-button.float-right(v-else variant='success' @click='done') {{edit?$t('Edit'):$t('Send')}}
el-form-item(:label="$t('time_start_explanation')")
el-time-select(ref='time_start'
v-model="time.start"
:picker-options="{ start: '00:00', step: '00:30', end: '24:00'}")
el-form-item(:label="$t('time_end_explanation')")
el-time-select(v-model='time.end'
:picker-options="{start: '00:00', step: '00:30', end: '24:00'}")
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
el-tab-pane
span(slot='label') {{$t('What')}} <v-icon name='file-alt'/>
span {{$t('what_explanation')}}
el-input.mb-3(v-model='event.title')
span {{$t('description_explanation')}}
el-input.mb-3(v-model='event.description' type='textarea' :rows='3')
span {{$t('tag_explanation')}}
br
//- typeahead(v-model="event.tags" :data='tags' multiple)
el-select(v-model='event.tags' multiple filterable allow-create
default-first-option placeholder='Tag')
el-option(v-for='tag in tags' :key='tag'
:label='tag' :value='tag')
el-button.float-right(@click='next' :disabled='!couldProceed') {{$t('Next')}}
el-tab-pane
span(slot='label') {{$t('Media')}} <v-icon name='image'/>
span {{$t('media_explanation')}}
b-form-file.mb-2(v-model='event.image', :placeholder='$t("Poster")' accept='image/*')
el-button.float-right(@click='done') {{edit?$t('Edit'):$t('Send')}}
</template>
<script>
import api from '@/api'
import { mapActions, mapState } from 'vuex'
import moment from 'moment'
import Calendar from './Calendar'
export default {
components: { Calendar },
data() {
return {
event: {
@@ -70,11 +68,13 @@ export default {
title: '', description: '', tags: [],
multidate: false,
},
visible: true,
id: null,
activeTab: 0,
activeTab: "0",
date: null,
time: { start: '00:00', end: null },
edit: false
edit: false,
sending: false,
}
},
name: 'newEvent',
@@ -107,12 +107,12 @@ export default {
places: state => state.places
}),
couldProceed () {
switch(this.activeTab) {
switch(Number(this.activeTab)) {
case 0:
return this.event.place.name.length>0 &&
this.event.place.address.length>0
case 1:
return true
if (this.date && this.time.start) return true
break
case 2:
return this.event.title.length>0
@@ -126,12 +126,13 @@ export default {
methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta']),
next () {
this.activeTab++
this.activeTab = String(Number(this.activeTab)+1)
},
prev () {
this.activeTab--
this.activeTab = String(Number(this.activeTab-1))
},
placeChoosed () {
console.log('dentro placeChoosed')
const place = this.places.find( p => p.name === this.event.place.name )
if (place && place.address) {
this.event.place.address = place.address
@@ -173,7 +174,7 @@ export default {
}
if (this.event.tags)
this.event.tags.forEach(tag => formData.append('tags[]', tag))
this.sending = true
try {
if (this.edit) {
await this.updateEvent(formData)
@@ -181,26 +182,13 @@ export default {
await this.addEvent(formData)
}
this.updateMeta()
this.sending = false
this.$router.go(-1)
} catch (e) {
this.sending = false
console.error(e)
}
}
}
}
</script>
<style scope>
#tabss ul {
justify-content: space-evenly;
background: linear-gradient( #fff, #FFF 22px, #007bff, #fff 23px, #fff)
}
#tabss ul .nav-link {
background-color: white;
}
#tabss ul .nav-link.active {
background-color: #007bff;
}
</style>
</script>