Creation of empty albums done

server/routes/self.js

@@ -158,6 +158,33 @@ router.post('/upload', upload.single('screenshot'), async (req, res, next) => {
   }
 })
 
+router.post('/albums', async (req, res, next) => {
+  try {
+    if (req.user) {
+      if (req.user.access !== bannedAccess) {
+        let createdDate = new Date()
+        let albumDocument = new albumModel({
+          title: req.body.title,
+          title_lower: req.body.title.toLowerCase(),
+          description: req.body.description,
+          description_lower: req.body.description.toLowerCase(),
+          created_at: createdDate,
+          last_modified_at: createdDate,
+          user_id: req.user._id
+        })
+        let album = await albumDocument.save()
+        res.status(201).send(album)
+      } else {
+        res.status(403).send({})
+      }
+    } else {
+      res.status(401).send({})
+    }
+  } catch (err) {
+    next(err)
+  }
+})
+
 router.get('/albums', async (req, res, next) => {
   try {
     if (req.user) {
@@ -836,14 +863,22 @@ router.put('/images/:imageId/edit', async (req, res, next) => {
   try {
     if (req.user) {
       if (req.user.access !== bannedAccess) {
+        let albumId
+
+        if (req.params.albumId === '0') {
+          albumId = null
+        } else {
+          albumId = ObjectId(req.params.albumId)
+        }
         await imageModel.findOneAndUpdate({
           _id: req.params.imageId,
           user_id: req.user._id
         }, {
           title: req.body.title,
           title_lower: req.body.title.toLowerCase(),
           description: req.body.description,
-          description_lower: req.body.description.toLowerCase()
+          description_lower: req.body.description.toLowerCase(),
+          album_id: albumId
         })
         res.status(200).send({})
       } else {

src/components/AlbumGallery.vue

@@ -42,9 +42,39 @@
               <v-btn v-if="deletable && albumItem.title!==defaultAlbum" icon @click="clickDelete(i)">
                 <v-icon>delete</v-icon>
               </v-btn>
-              <v-btn v-if="albumItem.title!==defaultAlbum" icon :to="{ name: 'public-album', params:{albumId: albumItem._id}}" target="_blank">
+              <v-btn v-if="albumItem.title!==defaultAlbum" icon
+                     :to="{ name: 'public-album', params:{albumId: albumItem._id}}" target="_blank">
                 <v-icon>share</v-icon>
               </v-btn>
+              <v-dialog v-if="albumItem.title===defaultAlbum" v-model="newAlbumDialog" persistent max-width="600px">
+                <template v-slot:activator="{ on }">
+                  <v-btn color="primary" v-on="on">New Album</v-btn>
+                </template>
+                <v-card>
+                  <v-card-title>
+                    <span class="headline">New Album</span>
+                  </v-card-title>
+                  <v-card-text>
+                    <v-container>
+                      <v-row dense>
+                        <v-col>
+                          <v-text-field label="Title" v-model="newAlbumTitle"/>
+                        </v-col>
+                      </v-row>
+                      <v-row dense>
+                        <v-col>
+                          <v-textarea label="Description (optional)" v-model="newAlbumDescription"/>
+                        </v-col>
+                      </v-row>
+                    </v-container>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer/>
+                    <v-btn color="error" text @click="clickNewAlbumCancel">Cancel</v-btn>
+                    <v-btn color="success" text @click="clickNewAlbumConfirm">Confirm</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
             </v-card-actions>
           </v-card>
         </slot>
@@ -80,7 +110,10 @@ export default {
   },
   data () {
     return {
-      selectedAlbumIndex: null
+      selectedAlbumIndex: null,
+      newAlbumDialog: false,
+      newAlbumTitle: '',
+      newAlbumDescription: ''
     }
   },
   computed: {
@@ -98,6 +131,20 @@ export default {
     },
     clickDelete (index) {
       this.$emit('albumDeleted', this.albumItems[index])
+    },
+    clickNewAlbumConfirm () {
+      this.newAlbumDialog = false
+      this.$emit('albumCreated', {
+        title: this.newAlbumTitle,
+        description: this.newAlbumDescription
+      })
+      this.newAlbumTitle = ''
+      this.newAlbumDescription = ''
+    },
+    clickNewAlbumCancel () {
+      this.newAlbumDialog = false
+      this.newAlbumTitle = ''
+      this.newAlbumDescription = ''
     }
   }
 }

src/components/ImageItem.vue

@@ -26,7 +26,9 @@
     <image-edit :editId="editId"
                 :edit-title="editTitle"
                 :edit-description="editDescription"
+                :edit-album="editAlbum"
                 :editDialog="editDialog"
+                :all-albums="albums"
                 @cancel="onEditCancel"
                 @confirm="onEditConfirm"/>
     <v-content>
@@ -159,11 +161,13 @@ export default {
       editDialog: false,
       editId: '',
       editTitle: '',
-      editDescription: ''
+      editDescription: '',
+      editAlbum: ''
     }
   },
   computed: {
     ...mapState({
+      albums: state => state.self.albums,
       authenticated: state => state.auth.authenticated,
       authUser: state => state.auth.user
     }),
@@ -225,6 +229,7 @@ export default {
   },
   async created () {
     this.$store.dispatch('checkAuthenticated')
+    this.$store.dispatch('fetchAlbums')
     await this.fetchUseImageDetail()
     this.$store.dispatch('triggerImageViewed', this.imageItem)
   },
@@ -290,6 +295,7 @@ export default {
       this.editId = this.imageItem._id
       this.editTitle = this.imageItem.title
       this.editDescription = this.imageItem.description
+      this.editAlbum = this.imageItem.album_id ? this.imageItem.album_id : '0'
       this.editDialog = true
     },
     deleteImage () {
@@ -304,12 +310,13 @@ export default {
     onEditCancel () {
       this.editDialog = false
     },
-    onEditConfirm ({ title, description }) {
+    onEditConfirm ({ title, description, album }) {
       this.editDialog = false
       this.$store.dispatch('triggerSelfImageEdited', {
         imageId: this.editId,
         title,
-        description
+        description,
+        album
       })
     },
     onCancelled () {

src/components/profile/AlbumImages.vue

@@ -20,7 +20,9 @@
     <image-edit :editId="editId"
                 :edit-title="editTitle"
                 :edit-description="editDescription"
+                :edit-album="editAlbum"
                 :editDialog="editDialog"
+                :all-albums="albums"
                 @cancel="onEditCancel"
                 @confirm="onEditConfirm"/>
     <image-gallery :imageItems="albumImages"
@@ -67,16 +69,19 @@ export default {
       editDialog: false,
       editId: '',
       editTitle: '',
-      editDescription: ''
+      editDescription: '',
+      editAlbum: ''
     }
   },
   computed: {
     ...mapState({
+      albums: state => state.self.albums,
       authenticated: state => state.auth.authenticated
     })
   },
   created () {
     this.$store.dispatch('checkAuthenticated')
+    this.$store.dispatch('fetchAlbums')
   },
   methods: {
     onClickThumbnail (image) {
@@ -86,6 +91,7 @@ export default {
       this.editId = image._id
       this.editTitle = image.title
       this.editDescription = image.description
+      this.editAlbum = image.album_id ? image.album_id : '0'
       this.editDialog = true
     },
     onClickDelete (image) {
@@ -100,12 +106,13 @@ export default {
     onEditCancel () {
       this.editDialog = false
     },
-    onEditConfirm ({ title, description }) {
+    onEditConfirm ({ title, description, album }) {
       this.editDialog = false
       this.$store.dispatch('triggerSelfImageEdited', {
         imageId: this.editId,
         title,
-        description
+        description,
+        album
       })
     },
     async onFetchImages () {

src/components/profile/Albums.vue

@@ -27,6 +27,7 @@
                    @albumOpened="onClickOpen"
                    @albumDeleted="onClickDelete"
                    @albumEdited="onClickEdit"
+                   @albumCreated="onClickCreate"
                    :authenticated="authenticated"
                    deletable
                    editable/>
@@ -59,11 +60,8 @@ export default {
     })
   },
   created () {
-    if (this.$router.currentRoute.name === 'images-page') {
-      this.currentPage = parseInt(this.$router.currentRoute.params.pageNumber)
-    }
     this.$store.dispatch('checkAuthenticated')
-    this.$store.dispatch('fetchAlbums', this.currentPage)
+    this.$store.dispatch('fetchAlbums')
   },
   methods: {
     onClickOpen (albumItem) {
@@ -81,6 +79,9 @@ export default {
       this.editDescription = albumItem.description
       this.editDialog = true
     },
+    onClickCreate ({ title, description }) {
+      this.$store.dispatch('createAlbum', { title, description })
+    },
     onClickDelete (albumItem) {
       this.$store.dispatch('deleteAlbum', albumItem._id)
     },

src/components/profile/ImageEdit.vue

@@ -32,6 +32,16 @@
               <v-textarea label="Description (optional)" v-model="editDescriptionNew"/>
             </v-col>
           </v-row>
+          <v-row dense>
+            <v-col>
+              <v-select
+                label="Album (optional)"
+                v-model="editAlbumNew"
+                :items="allAlbums"
+                item-text="title"
+                item-value="_id"/>
+            </v-col>
+          </v-row>
         </v-container>
       </v-card-text>
       <v-card-actions>
@@ -61,50 +71,75 @@ export default {
       type: String,
       default: ''
     },
+    editAlbum: {
+      type: String,
+      default: ''
+    },
     editDialog: {
       type: Boolean,
       default: false
+    },
+    allAlbums: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
   data () {
     return {
       dialogState: false,
       editTitleNew: '',
-      editDescriptionNew: ''
+      editDescriptionNew: '',
+      editAlbumNew: ''
     }
   },
   computed: {
     ...mapState({
       authenticated: state => state.auth.authenticated
-    })
+    }),
+    allAlbumsDefaulted () {
+      return this.allAlbums.map(album => {
+        if (album._id) {
+          return album
+        } else {
+          album._id = '0'
+        }
+      })
+    }
   },
   watch: {
     editDialog () {
       this.dialogState = this.editDialog
       this.editTitleNew = this.editTitle
       this.editDescriptionNew = this.editDescription
+      this.editAlbumNew = this.editAlbum
     }
   },
   created () {
     this.$store.dispatch('checkAuthenticated')
     this.dialogState = this.editDialog
     this.editTitleNew = this.editTitle
     this.editDescriptionNew = this.editDescription
+    this.editAlbumNew = this.editAlbum
   },
   methods: {
     clickEditCancel () {
       this.editTitleNew = ''
       this.editDescriptionNew = ''
+      this.editAlbumNew = ''
       this.$emit('cancel')
       this.dialogState = false
     },
     clickEditConfirm () {
       this.$emit('confirm', {
         title: this.editTitleNew,
-        description: this.editDescriptionNew
+        description: this.editDescriptionNew,
+        album: this.editAlbumNew
       })
       this.editTitleNew = ''
       this.editDescriptionNew = ''
+      this.editAlbumNew = ''
       this.dialogState = false
     }
   }