From d074aefb4ffe8fc7bdb0e5f0afec46f7042a90fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 00:48:10 +0300
Subject: List edit UI overhaul

---
 src/components/lists_edit/lists_edit.vue | 210 ++++++++++++++++++++++---------
 1 file changed, 154 insertions(+), 56 deletions(-)

(limited to 'src/components/lists_edit/lists_edit.vue')

diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 69007b02..dffbff2f 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="panel-default panel list-edit">
+  <div class="panel-default panel ListEdit">
     <div
       ref="header"
-      class="panel-heading"
+      class="panel-heading list-edit-heading"
     >
       <button
         class="button-unstyled go-back-button"
@@ -13,54 +13,129 @@
           icon="chevron-left"
         />
       </button>
-    </div>
-    <div class="input-wrap">
-      <input
-        ref="title"
-        v-model="title"
-        :placeholder="$t('lists.title')"
+      <div class="title">
+      <i18n-t
+        keypath="lists.editing_list"
       >
+        <template #listTitle>{{ title }}</template>
+      </i18n-t>
+      </div>
     </div>
-    <div class="member-list">
-      <div
-        v-for="user in selectedUsers"
-        :key="user.id"
-        class="member"
-      >
-        <BasicUserCard
-          :user="user"
-          :class="isSelected(user) ? 'selected' : ''"
-          @click.capture.prevent="selectUser(user)"
-        />
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="list-edit-title">{{ $t('lists.title') }}</label>
+        {{ ' ' }}
+        <input
+          id="list-edit-title"
+          ref="title"
+          v-model="titleDraft"
+        >
+        <button
+          class="btn button-default follow-button"
+          @click="updateListTitle"
+        >
+          {{ $t('lists.update_title') }}
+        </button>
       </div>
+      <tab-switcher
+        class="list-member-management"
+        :scrollable-tabs="true"
+        >
+        <div
+          :label="$t('lists.manage_members')"
+          class="members-list"
+          >
+          <div class="users-list">
+            <div
+              v-for="user in membersUsers"
+              :key="user.id"
+              class="member"
+            >
+              <BasicUserCard
+                :user="user"
+              >
+                <button
+                  class="btn button-default follow-button"
+                  @click="toggleRemoveMember(user)"
+                >
+                  {{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
+                </button>
+              </BasicUserCard>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="search-list"
+          :label="$t('lists.add_members')"
+          >
+          <ListsUserSearch
+            @results="onSearchResults"
+            @loading="onSearchLoading"
+            @loadingDone="onSearchLoadingDone"
+          />
+          <div v-if="searchLoading" class="loading">
+            <PanelLoading />
+          </div>
+          <div v-else class="users-list">
+            <div
+              v-for="user in searchUsers"
+              :key="user.id"
+              class="member"
+            >
+              <BasicUserCard
+                :user="user"
+              >
+                <span
+                  v-if="membersUserIds.includes(user.id)"
+                >
+                  {{ $t('lists.is_in_list') }}
+                </span>
+                <button
+                  v-if="!membersUserIds.includes(user.id)"
+                  class="btn button-default follow-button"
+                  @click="toggleAddFromSearch(user)"
+                >
+                  {{ isAdded(user) ? $t('general.undo') : $t('lists.add_to_list') }}
+                </button>
+                <button
+                  v-else
+                  class="btn button-default follow-button"
+                  @click="toggleRemoveMember(user)"
+                >
+                  {{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
+                </button>
+              </BasicUserCard>
+            </div>
+          </div>
+        </div>
+      </tab-switcher>
     </div>
-    <ListsUserSearch @results="onResults" />
-    <div class="member-list">
-      <div
-        v-for="user in users"
-        :key="user.id"
-        class="member"
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        class="btn button-default delete-button"
+        @click="reallyDelete = true"
+        v-if="!reallyDelete"
       >
-        <BasicUserCard
-          :user="user"
-          :class="isSelected(user) ? 'selected' : ''"
-          @click.capture.prevent="selectUser(user)"
-        />
-      </div>
+        {{ $t('lists.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('lists.really_delete') }}
+        <button
+          class="btn button-default delete-button"
+          @click="deleteList"
+        >
+        {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default delete-button"
+          @click="reallyDelete = false"
+        >
+        {{ $t('general.no') }}
+        </button>
+      </template>
     </div>
-    <button
-      :disabled="title && title.length === 0"
-      class="btn button-default"
-      @click="updateList"
-    >
-      {{ $t('lists.save') }}
-    </button>
-    <button
-      class="btn button-default"
-      @click="deleteList"
-    >
-      {{ $t('lists.delete') }}
-    </button>
   </div>
 </template>
 
@@ -69,28 +144,43 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.list-edit {
-  .input-wrap {
+.ListEdit {
+  --panel-body-padding: 0.5em;
+
+  height: calc(100vh - var(--navbar-height));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .list-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
     display: flex;
-    margin: 0.7em 0.5em 0.7em 0.5em;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
 
-    input {
-      width: 100%;
-    }
+  .list-member-management {
+    flex: 1 0 auto;
   }
 
   .search-icon {
     margin-right: 0.3em;
   }
 
-  .member-list {
+  .users-list {
     padding-bottom: 0.7rem;
+    overflow-y: auto;
   }
 
-  .basic-user-card:hover,
-  .basic-user-card.selected {
-    cursor: pointer;
-    background-color: var(--selectedPost, $fallback--lightBg);
+  & .search-list,
+  & .members-list {
+    overflow: hidden;
+    flex-direction: column;
+    min-height: 0;
   }
 
   .go-back-button {
@@ -102,7 +192,15 @@
   }
 
   .btn {
-    margin: 0.5em;
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .delete-button {
+      min-width: 9em;
+    }
   }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 77dcbe641c5dbc96ab3fcdde98ddf668fec1ecae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 00:49:07 +0300
Subject: lint

---
 src/components/lists_edit/lists_edit.vue         | 34 +++++++++++++++---------
 src/components/user_list_menu/user_list_menu.vue | 24 ++++++++---------
 2 files changed, 33 insertions(+), 25 deletions(-)

(limited to 'src/components/lists_edit/lists_edit.vue')

diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index dffbff2f..e788c00a 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -14,11 +14,13 @@
         />
       </button>
       <div class="title">
-      <i18n-t
-        keypath="lists.editing_list"
-      >
-        <template #listTitle>{{ title }}</template>
-      </i18n-t>
+        <i18n-t
+          keypath="lists.editing_list"
+        >
+          <template #listTitle>
+            {{ title }}
+          </template>
+        </i18n-t>
       </div>
     </div>
     <div class="panel-body">
@@ -40,11 +42,11 @@
       <tab-switcher
         class="list-member-management"
         :scrollable-tabs="true"
-        >
+      >
         <div
           :label="$t('lists.manage_members')"
           class="members-list"
-          >
+        >
           <div class="users-list">
             <div
               v-for="user in membersUsers"
@@ -68,16 +70,22 @@
         <div
           class="search-list"
           :label="$t('lists.add_members')"
-          >
+        >
           <ListsUserSearch
             @results="onSearchResults"
             @loading="onSearchLoading"
             @loadingDone="onSearchLoadingDone"
           />
-          <div v-if="searchLoading" class="loading">
+          <div
+            v-if="searchLoading"
+            class="loading"
+          >
             <PanelLoading />
           </div>
-          <div v-else class="users-list">
+          <div
+            v-else
+            class="users-list"
+          >
             <div
               v-for="user in searchUsers"
               :key="user.id"
@@ -114,9 +122,9 @@
     <div class="panel-footer">
       <span class="spacer" />
       <button
+        v-if="!reallyDelete"
         class="btn button-default delete-button"
         @click="reallyDelete = true"
-        v-if="!reallyDelete"
       >
         {{ $t('lists.delete') }}
       </button>
@@ -126,13 +134,13 @@
           class="btn button-default delete-button"
           @click="deleteList"
         >
-        {{ $t('general.yes') }}
+          {{ $t('general.yes') }}
         </button>
         <button
           class="btn button-default delete-button"
           @click="reallyDelete = false"
         >
-        {{ $t('general.no') }}
+          {{ $t('general.no') }}
         </button>
       </template>
     </div>
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index f90c5f87..d8da16ea 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -7,18 +7,18 @@
     >
       <template #content>
         <div class="dropdown-menu">
-            <button
-              v-for="list in lists"
-              :key="list.id"
-              class="button-default dropdown-item"
-              @click="toggleList(list.id)"
-            >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': list.inList }"
-              />
-              {{ list.title }}
-            </button>
+          <button
+            v-for="list in lists"
+            :key="list.id"
+            class="button-default dropdown-item"
+            @click="toggleList(list.id)"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-checked': list.inList }"
+            />
+            {{ list.title }}
+          </button>
         </div>
       </template>
       <template #trigger>
-- 
cgit v1.2.3-70-g09d2


From faefd05c03d20a892a47c27550fe6e23978993c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 20:21:10 +0300
Subject: create new list UI

---
 src/boot/routes.js                       |  1 +
 src/components/lists/lists.js            |  4 +-
 src/components/lists/lists.vue           | 24 ++++----
 src/components/lists_edit/lists_edit.js  | 28 ++++++++--
 src/components/lists_edit/lists_edit.vue | 24 ++++++--
 src/components/lists_new/lists_new.js    | 79 --------------------------
 src/components/lists_new/lists_new.vue   | 95 --------------------------------
 src/i18n/en.json                         |  4 +-
 8 files changed, 61 insertions(+), 198 deletions(-)
 delete mode 100644 src/components/lists_new/lists_new.js
 delete mode 100644 src/components/lists_new/lists_new.vue

(limited to 'src/components/lists_edit/lists_edit.vue')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 39372ab9..bf009be6 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -80,6 +80,7 @@ export default (store) => {
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
+    { name: 'lists-edit', path: '/lists/new', component: ListsEdit },
     { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
   ]
 
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index 9aed37f7..56d68430 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -1,5 +1,4 @@
 import ListsCard from '../lists_card/lists_card.vue'
-import ListsNew from '../lists_new/lists_new.vue'
 
 const Lists = {
   data () {
@@ -8,8 +7,7 @@ const Lists = {
     }
   },
   components: {
-    ListsCard,
-    ListsNew
+    ListsCard
   },
   computed: {
     lists () {
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index fcc56447..cb98b017 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -1,21 +1,15 @@
 <template>
-  <div v-if="isNew">
-    <ListsNew @cancel="cancelNewList" />
-  </div>
-  <div
-    v-else
-    class="settings panel panel-default"
-  >
+  <div class="Lists panel panel-default">
     <div class="panel-heading">
       <div class="title">
         {{ $t('lists.lists') }}
       </div>
-      <button
-        class="button-default"
-        @click="newList"
+      <router-link
+        :to="{ name: 'lists-edit' }"
+        class="button-default btn new-list-button"
       >
         {{ $t("lists.new") }}
-      </button>
+      </router-link>
     </div>
     <div class="panel-body">
       <ListsCard
@@ -29,3 +23,11 @@
 </template>
 
 <script src="./lists.js"></script>
+
+<style lang="scss">
+.Lists {
+  .new-list-button {
+    padding: 0 0.5em;
+  }
+}
+</style>
diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
index 533bceb9..c22d1323 100644
--- a/src/components/lists_edit/lists_edit.js
+++ b/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' })
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index e788c00a..6521aba6 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/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;
     }
   }
diff --git a/src/components/lists_new/lists_new.js b/src/components/lists_new/lists_new.js
deleted file mode 100644
index a04b409e..00000000
--- a/src/components/lists_new/lists_new.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { mapState, mapGetters } from 'vuex'
-import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
-import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faSearch,
-  faChevronLeft
-)
-
-const ListsNew = {
-  components: {
-    BasicUserCard,
-    UserAvatar,
-    ListsUserSearch
-  },
-  data () {
-    return {
-      title: '',
-      userIds: [],
-      selectedUserIds: []
-    }
-  },
-  computed: {
-    users () {
-      return this.userIds.map(userId => this.findUser(userId))
-    },
-    selectedUsers () {
-      return this.selectedUserIds.map(userId => this.findUser(userId))
-    },
-    ...mapState({
-      currentUser: state => state.users.currentUser
-    }),
-    ...mapGetters(['findUser'])
-  },
-  methods: {
-    goBack () {
-      this.$emit('cancel')
-    },
-    onInput () {
-      this.search(this.query)
-    },
-    selectUser (user) {
-      if (this.selectedUserIds.includes(user.id)) {
-        this.removeUser(user.id)
-      } else {
-        this.addUser(user)
-      }
-    },
-    isSelected (user) {
-      return this.selectedUserIds.includes(user.id)
-    },
-    addUser (user) {
-      this.selectedUserIds.push(user.id)
-    },
-    removeUser (userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
-    },
-    onResults (results) {
-      this.userIds = results
-    },
-    createList () {
-      // the API has two different endpoints for "creating a list with a name"
-      // and "updating the accounts on the list".
-      this.$store.dispatch('createList', { title: this.title })
-        .then((list) => {
-          this.$store.dispatch('setListAccounts', { listId: list.id, accountIds: this.selectedUserIds })
-          this.$router.push({ name: 'lists-timeline', params: { listId: list.id } })
-        })
-    }
-  }
-}
-
-export default ListsNew
diff --git a/src/components/lists_new/lists_new.vue b/src/components/lists_new/lists_new.vue
deleted file mode 100644
index 4733bdde..00000000
--- a/src/components/lists_new/lists_new.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="panel-default panel list-new">
-    <div
-      ref="header"
-      class="panel-heading"
-    >
-      <button
-        class="button-unstyled go-back-button"
-        @click="goBack"
-      >
-        <FAIcon
-          size="lg"
-          icon="chevron-left"
-        />
-      </button>
-    </div>
-    <div class="input-wrap">
-      <input
-        ref="title"
-        v-model="title"
-        :placeholder="$t('lists.title')"
-      >
-    </div>
-
-    <div class="member-list">
-      <div
-        v-for="user in selectedUsers"
-        :key="user.id"
-        class="member"
-      >
-        <BasicUserCard
-          :user="user"
-          :class="isSelected(user) ? 'selected' : ''"
-          @click.capture.prevent="selectUser(user)"
-        />
-      </div>
-    </div>
-    <ListsUserSearch
-      @results="onResults"
-    />
-    <div
-      v-for="user in users"
-      :key="user.id"
-      class="member"
-    >
-      <BasicUserCard
-        :user="user"
-        :class="isSelected(user) ? 'selected' : ''"
-        @click.capture.prevent="selectUser(user)"
-      />
-    </div>
-
-    <button
-      :disabled="title && title.length === 0"
-      class="btn button-default"
-      @click="createList"
-    >
-      {{ $t('lists.create') }}
-    </button>
-  </div>
-</template>
-
-<script src="./lists_new.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.list-new {
-  .search-icon {
-    margin-right: 0.3em;
-  }
-
-  .member-list {
-    padding-bottom: 0.7rem;
-  }
-
-  .basic-user-card:hover,
-  .basic-user-card.selected {
-    cursor: pointer;
-    background-color: var(--selectedPost, $fallback--lightBg);
-  }
-
-  .go-back-button {
-    text-align: center;
-    line-height: 1;
-    height: 100%;
-    align-self: start;
-    width: var(--__panel-heading-height-inner);
-  }
-
-  .btn {
-    margin: 0.5em;
-  }
-}
-</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 733bd7ac..068337b9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -991,8 +991,10 @@
     "add_to_list": "Add to list",
     "is_in_list": "Already in list",
     "editing_list": "Editing list {listTitle}",
+    "creating_list": "Creating new list",
     "update_title": "Save Title",
-    "really_delete": "Really delete list?"
+    "really_delete": "Really delete list?",
+    "error": "Error manipulating lists: {0}"
   },
   "file_type": {
     "audio": "Audio",
-- 
cgit v1.2.3-70-g09d2