From 721d6e0a8bfc8a267bacdf6cf0b345b9f7bfadfe Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Fri, 9 Oct 2020 00:42:03 +0200
Subject: [PATCH] lazy evaluation, styles

---
 components/admin/Places.vue |  12 ++--
 components/admin/Users.vue  |   8 ++-
 layouts/default.vue         |  13 ++++
 pages/Login.vue             |   4 +-
 pages/about.vue             |   2 +-
 pages/add/_edit.vue         |  61 +++++++++----------
 pages/event/_id.vue         | 117 +++++++++++++++++++++---------------
 pages/event/embedEvent.vue  |   5 +-
 pages/settings.vue          |  17 ++----
 9 files changed, 138 insertions(+), 101 deletions(-)

diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index 7fe0aa55..5129dca8 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -4,16 +4,18 @@
     v-card-subtitle(v-html="$t('admin.place_description')")
 
     v-dialog(v-model='dialog' width='600')
-      v-card
+      v-card(color='secondary')
         v-card-title {{$t('admin.edit_place')}}
         v-card-text
-          v-form
+          v-form(v-model='valid' ref='form' lazy-validation)
             v-text-field(
+              :rules="[$validators.required('common.name')]"
               :label="$t('common.name')"
               v-model='place.name'
               :placeholder='$t("common.name")')
 
             v-text-field(
+              :rules="[$validators.required('common.address')]"
               :label="$t('common.address')"
               v-model='place.address'
               :placeholder='$t("common.address")')
@@ -21,11 +23,11 @@
         v-card-actions
             v-spacer
             v-btn(@click='dialog=false' color='warning') {{$t('common.cancel')}}
-            v-btn(@click='savePlace' color='primary' :loading='loading' :disable='loading') {{$t('common.save')}}
+            v-btn(@click='savePlace' color='primary' :loading='loading'
+              :disable='!valid || loading') {{$t('common.save')}}
 
     v-card-text
       v-data-table(
-        @click:row='selectPlace'
         :headers='headers'
         :items='places')
         template(v-slot:item.actions='{item}')
@@ -39,6 +41,7 @@ export default {
     return {
       loading: false,
       dialog: false,
+      valid: false,
       place: { name: '', address: '', id: null },
       headers: [
         { value: 'name', text: 'Name' },
@@ -57,6 +60,7 @@ export default {
       this.dialog = true
     },
     async savePlace () {
+      if (!this.$refs.form.validate()) return
       this.loading = true
       await this.$axios.$put('/place', this.place)
       this.updateMeta()
diff --git a/components/admin/Users.vue b/components/admin/Users.vue
index 556bc1f5..85bacc4e 100644
--- a/components/admin/Users.vue
+++ b/components/admin/Users.vue
@@ -6,15 +6,16 @@
         append-icon='mdi-magnify' outlined rounded
         label='Search'
         single-line hide-details)
-      v-btn(color='primary' text @click='newUserDialog = true') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
+
+    v-btn(color='primary' text @click='newUserDialog = true') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
 
     //- ADD NEW USER
     v-dialog(v-model='newUserDialog' :fullscreen="$vuetify.breakpoint.xsOnly")
 
-      v-card
+      v-card(color='secondary')
         v-card-title {{$t('common.new_user')}}
         v-card-text
-          v-form(v-model='valid')
+          v-form(v-model='valid' ref='user_form' lazy-validation)
             v-text-field(v-model='new_user.email'
               :label="$t('common.email')"
               :rules="$validators.email")
@@ -85,6 +86,7 @@ export default {
       }
     },
     async createUser () {
+      if (!this.$refs.user_form.validate()) return
       try {
         this.loading = true
         const user = await this.$axios.$post('/user', this.new_user)
diff --git a/layouts/default.vue b/layouts/default.vue
index a81b303b..d252d2a7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -31,7 +31,20 @@ export default {
 }
 </script>
 <style lang="less">
+// html, body {
+//   overflow: hidden;
+//   max-height: 100%;
+// }
 .v-dialog {
   max-width: 800px;
 }
+
+.theme--dark.v-list {
+  background-color: #333;
+}
+
+.v-autocomplete__content.v-menu__content {
+  scrollbar-width: thin;
+  scrollbar-color: #FF4511;
+}
 </style>
diff --git a/pages/Login.vue b/pages/Login.vue
index 29a61f1d..ed7d5252 100644
--- a/pages/Login.vue
+++ b/pages/Login.vue
@@ -7,7 +7,7 @@
         v-card-subtitle(v-text="$t('login.description')")
 
         v-card-text
-          v-form(v-model='valid' ref='form')
+          v-form(v-model='valid' ref='form' lazy-validation)
             v-text-field(v-model='email' type='email'
               :rules='$validators.email' autofocus
               :placeholder='$t("common.email")'
@@ -68,7 +68,7 @@ export default {
       this.$root.$message('login.check_email', { color: 'success' })
     },
     async submit (e) {
-      e.preventDefault()
+      if (!this.$refs.form.validate()) return
       try {
         this.loading = true
         const data = new URLSearchParams()
diff --git a/pages/about.vue b/pages/about.vue
index 532fac9c..7259de24 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -25,7 +25,7 @@ export default {
   methods: {
     ...mapActions(['setSetting']),
     save () {
-      this.$root.$message('commmon.done', { color: 'success' })
+      this.$root.$message('common.ok', { color: 'success' })
       this.setSetting({ key: 'about', value: this.about })
     }
   },
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 4d878a44..e8ae5b1f 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -5,55 +5,49 @@
       v-card-text
         v-form(v-model='valid')
 
-          //- NOT LOGGED EVENT
+          //- Not logged event
           div(v-if='!$auth.loggedIn')
             v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
             p(v-html="$t('event.anon_description')")
 
-          //- title
-          v-text-field.mb-3(v-model='event.title'
+          //- Title
+          v-text-field.mb-3(
+            @change='v => event.title = v'
+            :value = 'event.title'
             :rules="[$validators.required('common.title')]"
-            :label="$t('event.what_description')"
+            :label="$t('event.what_description')" 
             autofocus
             ref='title')
 
-          //- description
-          //- span {{$t('event.description_description')}}
+          //- Description
           Editor(
             v-model='event.description'
-            :label="$t('event.description_description')"
-            style='max-height: 400px;')
+            :placeholder="$t('event.description_description')"
+            max-height='400px')
 
-          //- tags
-          v-combobox.mt-3(v-model='event.tags'
-            chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-            :delimiters="[',', ' ']"
-            :items="tags.map(t => t.tag)"
-            :label="$t('common.tags')")
-
-          //- WHERE
+          //- Where
           v-combobox.mt-2(v-model='event.place.name'
-            :rules="[$validators.required()]"
+            :rules="[$validators.required('common.where')]"
             :label="$t('common.where')"
             :hint="$t('event.where_description')"
             persistent-hint
             :items="places"
             item-text='name'
-            @input='selectPlace')
-            template(v-slot:item="{ item }")
-              v-list
-                v-list-item-content
+            @change='selectPlace')
+            //- template(v-slot:item="{ item }")
+              v-list-item(color='primary')
+                v-list-item-content(color='pink')
                   v-list-item-title {{item.name}}
                   v-list-item-subtitle {{item.address}}
 
           v-text-field.mt-3(ref='address'
-            :rules="[$validators.required()]"
+            :rules="[$validators.required('common.address')]"
             :label="$t('common.address')"
-            v-model='event.place.address'
+            @change="v => event.place.address = v"
+            :value="event.place.address"
             :disabled='disableAddress')
 
-          //- WHEN
-          //- v-divider <v-icon name='clock'/> {{$t('common.when')}}
+          //- When
           .text-center
             v-btn-toggle(v-model="event.type" color='primary')
               v-btn(value='normal' label="normal") {{$t('event.normal')}}
@@ -97,7 +91,7 @@
                 template(v-slot:activator='{ on }')
                   v-text-field(
                     :label="$t('event.from')"
-                    :rules="[$validators.required()]"
+                    :rules="[$validators.required('event.from')]"
                     :value='time.start'
                     v-on='on'
                     clearable)
@@ -148,6 +142,13 @@
             persistent-hint
             accept='image/*')
 
+          //- tags
+          v-combobox.mt-3(v-model='event.tags'
+            chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
+            :delimiters="[',', ' ']"
+            :items="tags.map(t => t.tag)"
+            :label="$t('common.tags')")
+
       v-card-actions
         v-spacer
         v-btn(@click='done' :loading='loading' :disabled='!valid || loading || !date'
@@ -228,7 +229,7 @@ export default {
       loading: false,
       mediaUrl: '',
       queryTags: '',
-      disableAddress: true,
+      disableAddress: false,
       frequencies: [
         { value: '1w', text: this.$t('event.each_week') },
         { value: '2w', text: this.$t('event.each_2w') },
@@ -360,12 +361,10 @@ export default {
       return attributes
     }
   },
-  // mounted () {
-  //   this.$refs.title.focus()
-  // },
   methods: {
     ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
     selectPlace (p) {
+      console.error('sono dentro selectePlace')
       const place = p && this.places.find(place => place.id === p.id)
       if (place && place.address) {
         this.event.place.name = p.name
@@ -375,7 +374,7 @@ export default {
         this.disableAddress = false
         this.event.place.address = ''
       }
-      this.$nextTick(this.$refs.address.focus)
+      // this.$nextTick(() => this.$refs.address.focus() )
     },
     // recurrentDays () {
     //   if (this.event.type !== 'recurrent' || !this.date || !this.date.length) { return }
diff --git a/pages/event/_id.vue b/pages/event/_id.vue
index 427cee52..35f55942 100644
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -1,59 +1,72 @@
 <template lang="pug">
   v-card.h-event.eventDetail
     v-container
-      v-list-item(two-line)
-        v-list-item-content
-          v-list-item-title
-            time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
-            v-icon mdi-date
-            b {{event|when}}
-            small  ({{event.start_datetime|from}})
-          v-list-item-title
-            b.p-location {{event.place.name}}
-            span  - {{event.place.address}}
-          h2 {{event.title}}
 
-      .v-btn--absolute.v-btn--right.v-btn--top
-        v-btn.mr-1(nuxt icon outlined color='primary'
-          :to='`/event/${event.prev}`' :disabled='!event.prev')
-          v-icon mdi-arrow-left
-        v-btn(nuxt bottom right outlined icon color='primary'
-          :to='`/event/${event.next}`' :disabled='!event.next')
-          v-icon mdi-arrow-right
+      //- event admin controls
+      EventAdmin(v-if='is_mine' :event='event')
+
+      //- v-list-item(two-line)
+      //-   v-list-item-content
+      .text-h5.text-sm-h4
+        b {{event.title}}
+      v-row
+        v-col.col-12.col-lg-9
+          //- TOFIX: avoid reflow
+          //- event image
+          v-img.main_image.mb-3(
+            contain
+            :src='imgPath'
+            :lazy-src='thumbImgPath'
+            v-if='event.image_path')
+            //- template(v-slot:placeholder)
+              //- v-row(
+              //-   class="fill-height ma-0"
+              //-   align="center"
+              //-   justify="center")
+              //-   v-progress-circular(indeterminate
+              //-     color="grey lighten-5")
+
+        v-col.col-12.col-lg-3
+          v-card(color='secondary')
+            v-card-text.white--text
+              time.dt-start.text-h5(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
+                v-icon mdi-calendar
+                b.ml-2 {{event|when}}
+              p.subtitle-1 {{event.start_datetime|from}}
+              
+              .text-h5
+                v-icon mdi-map-marker
+                b.p-location.ml-2 {{event.place.name}}
+              p.subtitle-1 {{event.place.address}}
+
+              //- info & actions
+            v-list
+              v-list-item(link)
+                v-list-item-content.primary--text.text-uppercase(
+                    v-clipboard:success='copyLink'
+                    v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') {{$t('common.copy_link')}}
+
+              v-list-item(link)
+                v-list-item-content.primary--text.text-uppercase(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
+
+              v-list-item(link)
+                v-list-item-content.primary--text.text-uppercase(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
 
     v-container
         v-dialog(v-model='showEmbed')
-          EmbedEvent(:event='event')
-
-        //- TOFIX: avoid reflow
-        //- event image
-        v-img.main_image.mb-3(
-          contain
-          :src='imgPath'
-          :lazy-src='thumbImgPath'
-          v-if='event.image_path')
-          //- template(v-slot:placeholder)
-            //- v-row(
-            //-   class="fill-height ma-0"
-            //-   align="center"
-            //-   justify="center")
-            //-   v-progress-circular(indeterminate
-            //-     color="grey lighten-5")
+          EmbedEvent(:event='event' @close='showEmbed=false')
 
         div.p-description(v-html='event.description')
         v-chip.p-category.ml-1(small v-for='tag in event.tags' color='primary' outlined :key='tag') {{tag}}
 
-          //- info & actions
-        v-btn(text color='primary'
-          v-clipboard:success='copyLink'
-          v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') {{$t('common.copy_link')}}
+        //-   //- info & actions
+        //- v-btn(text color='primary'
+        //-   v-clipboard:success='copyLink'
+        //-   v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') {{$t('common.copy_link')}}
 
-        v-btn(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
+        //- v-btn(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
 
-        v-btn(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
-        EventAdmin(v-if='is_mine' :event='event')
-
-        //- hr
+        //- v-btn(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
 
         //- resources from fediverse
         #resources.mt-1(v-if='settings.enable_federation')
@@ -61,11 +74,11 @@
             small.mr-3 🔖 {{event.likes.length}}
             small ✊ {{event.boost.length}}<br/>
 
-          p.p-2
-            v-btn(type='text' @click='showFollowMe=true') {{$t('event.interact_with_me')}}
-            span(v-if='settings.enable_resources && event.resources.length')  -  {{$tc('common.n_resources', event.resources.length)}}
+          //- p.p-2
+            //- v-btn(type='text' @click='showFollowMe=true') {{$t('event.interact_with_me')}}
+            //- span(v-if='settings.enable_resources && event.resources.length')  -  {{$tc('common.n_resources', event.resources.length)}}
 
-          v-dialog(v-model='showFollowMe' destroy-on-close max-width='500px')
+          //- v-dialog(v-model='showFollowMe' destroy-on-close max-width='500px')
             h4(slot='title') {{$t('common.follow_me_title')}}
             FollowMe(@close='showFollowMe=false' is-dialog)
 
@@ -102,6 +115,15 @@
                 span.previewImage(@click='showResource(resource)')
                   img(v-for='img in resource.data.attachment' :src='img.url')
 
+          //- Next/prev arrow
+          .text-center
+            v-btn.mr-2(nuxt icon outlined color='primary'
+              :to='`/event/${event.prev}`' :disabled='!event.prev')
+              v-icon mdi-arrow-left
+            v-btn(nuxt bottom right outlined icon color='primary'
+              :to='`/event/${event.next}`' :disabled='!event.next')
+              v-icon mdi-arrow-right
+
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -286,4 +308,5 @@ export default {
     max-height: 83vh;
   }
 }
+
 </style>
diff --git a/pages/event/embedEvent.vue b/pages/event/embedEvent.vue
index f8f799d0..1d6e6048 100644
--- a/pages/event/embedEvent.vue
+++ b/pages/event/embedEvent.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-v-card
+v-card(color='secondary')
   v-card-title(v-text="$t('common.embed_title')")
   v-card-text
     v-row(:gutter='10')
@@ -9,7 +9,8 @@ v-card
       v-col.mt-2(:span='12' :xs='24' v-html='code')
   v-card-actions
     v-spacer
-    v-btn(slot='append' v-clipboard:copy='code' v-clipboard:success='copyLink' color="primary") {{$t("common.copy")}}
+    v-btn(color='warning' @click="$emit('close')") {{$t("common.cancel")}}
+    v-btn(v-clipboard:copy='code' v-clipboard:success='copyLink' color="primary") {{$t("common.copy")}}
 </template>
 <script>
 import { mapState } from 'vuex'
diff --git a/pages/settings.vue b/pages/settings.vue
index ab78b7ef..ab12e735 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,15 +1,10 @@
 <template lang="pug">
-  v-main
-
-    p {{$auth.user.email}}
-    //- el-form(action='/api/user' method='PUT' @submit.native.prevent='update_settings' inline label-width='200px')
-    //-   el-form-item(:label="$t('settings.change_password')")
-    //-     el-input(v-model='password' type='password')
-    //-   el-button(type='success' native-type='submit') {{$t('common.save')}}
-
-    p {{$t('settings.danger_section')}}
-    p {{$t('settings.remove_account')}}
-    v-btn(color='danger' @click='remove_account') {{$t('common.remove')}}
+  v-container
+    v-card
+      v-card-title.text-h5 {{$auth.user.email}}
+      v-card-text
+        p {{$t('settings.remove_account')}}
+        v-btn.black--text(color='warning' @click='remove_account') {{$t('common.remove')}}
 </template>
 <script>
 import { mapState } from 'vuex'