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