create new list UI

src/components/lists_edit/lists_edit.js

@@ -36,6 +36,7 @@ const ListsNew = {
     }
   },
   created () {
+    if (!this.id) return
     this.$store.dispatch('fetchList', { listId: this.id })
       .then(() => {
         this.title = this.findListTitle(this.id)
@@ -71,19 +72,19 @@ const ListsNew = {
     },
     toggleRemoveMember (user) {
       if (this.removedUserIds.has(user.id)) {
-        this.addUser(user)
+        this.id && this.addUser(user)
         this.removedUserIds.delete(user.id)
       } else {
-        this.removeUser(user.id)
+        this.id && this.removeUser(user.id)
         this.removedUserIds.add(user.id)
       }
     },
     toggleAddFromSearch (user) {
       if (this.addedUserIds.has(user.id)) {
-        this.removeUser(user.id)
+        this.id && this.removeUser(user.id)
         this.addedUserIds.delete(user.id)
       } else {
-        this.addUser(user)
+        this.id && this.addUser(user)
         this.addedUserIds.add(user.id)
       }
     },
@@ -115,6 +116,25 @@ const ListsNew = {
           this.title = this.findListTitle(this.id)
         })
     },
+    createList () {
+      this.$store.dispatch('createList', { title: this.titleDraft })
+        .then((list) => {
+          return this
+            .$store
+            .dispatch('setListAccounts', { listId: list.id, accountIds: [...this.addedUserIds] })
+            .then(() => list.id)
+        })
+        .then((listId) => {
+          this.$router.push({ name: 'lists-timeline', params: { id: listId } })
+        })
+        .catch((e) => {
+          this.$store.dispatch('pushGlobalNotice', {
+            messageKey: 'lists.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
     deleteList () {
       this.$store.dispatch('deleteList', { listId: this.id })
       this.$router.push({ name: 'lists' })

src/components/lists_edit/lists_edit.vue

@@ -15,12 +15,17 @@
       </button>
       <div class="title">
         <i18n-t
+          v-if="id"
           keypath="lists.editing_list"
         >
           <template #listTitle>
             {{ title }}
           </template>
         </i18n-t>
+        <i18n-t
+          v-else
+          keypath="lists.creating_list"
+        />
       </div>
     </div>
     <div class="panel-body">
@@ -33,6 +38,7 @@
           v-model="titleDraft"
         >
         <button
+          v-if="id"
           class="btn button-default follow-button"
           @click="updateListTitle"
         >
@@ -44,6 +50,7 @@
         :scrollable-tabs="true"
       >
         <div
+          v-if="id || addedUserIds.size > 0"
           :label="$t('lists.manage_members')"
           class="members-list"
         >
@@ -122,8 +129,15 @@
     <div class="panel-footer">
       <span class="spacer" />
       <button
-        v-if="!reallyDelete"
-        class="btn button-default delete-button"
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createList"
+      >
+        {{ $t('lists.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
         @click="reallyDelete = true"
       >
         {{ $t('lists.delete') }}
@@ -131,13 +145,13 @@
       <template v-else>
         {{ $t('lists.really_delete') }}
         <button
-          class="btn button-default delete-button"
+          class="btn button-default footer-button"
           @click="deleteList"
         >
           {{ $t('general.yes') }}
         </button>
         <button
-          class="btn button-default delete-button"
+          class="btn button-default footer-button"
           @click="reallyDelete = false"
         >
           {{ $t('general.no') }}
@@ -206,7 +220,7 @@
   .panel-footer {
     grid-template-columns: minmax(10%, 1fr);
 
-    .delete-button {
+    .footer-button {
       min-width: 9em;
     }
   }