Merge branch 'more-fixes' into api-refactor

src/components/announcements_page/announcements_page.js

@@ -35,7 +35,7 @@ const AnnouncementsPage = {
     canPostAnnouncement() {
       return (
         this.currentUser &&
-        this.currentUser.privileges.includes(
+        this.currentUser.privileges.has(
           'announcements_manage_announcements',
         )
       )

src/components/bookmark_folder_card/bookmark_folder_card.js

@@ -1,15 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
-
-library.add(faEllipsisH)
-
-const BookmarkFolderCard = {
-  props: ['folder', 'allBookmarks'],
-  computed: {
-    firstLetter() {
-      return this.folder ? this.folder.name[0] : null
-    },
-  },
-}
-
-export default BookmarkFolderCard

src/components/bookmark_folder_card/bookmark_folder_card.vue

@@ -1,111 +0,0 @@
-<template>
-  <div
-    v-if="allBookmarks"
-    class="bookmark-folder-card"
-  >
-    <router-link
-      :to="{ name: 'bookmarks' }"
-      class="bookmark-folder-name"
-    >
-      <span class="icon">
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 menu-icon"
-          icon="bookmark"
-        />
-      </span>{{ $t('nav.all_bookmarks') }}
-    </router-link>
-  </div>
-  <div
-    v-else
-    class="bookmark-folder-card"
-  >
-    <router-link
-      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
-      class="bookmark-folder-name"
-    >
-      <img
-        v-if="folder.emoji_url"
-        class="iconEmoji iconEmoji-image"
-        :src="folder.emoji_url"
-        :alt="folder.emoji"
-        :title="folder.emoji"
-      >
-      <span
-        v-else-if="folder.emoji"
-        class="iconEmoji"
-      >
-        <span>
-          {{ folder.emoji }}
-        </span>
-      </span>
-      <span
-        v-else-if="firstLetter"
-        class="icon iconLetter fa-scale-110"
-      >{{ firstLetter }}</span>{{ folder.name }}
-    </router-link>
-    <router-link
-      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
-      class="button-folder-edit"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="ellipsis-h"
-      />
-    </router-link>
-  </div>
-</template>
-
-<script src="./bookmark_folder_card.js"></script>
-
-<style lang="scss">
-.bookmark-folder-card {
-  display: flex;
-  align-items: center;
-}
-
-a.bookmark-folder-name {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-
-  .icon,
-  .iconLetter,
-  .iconEmoji {
-    display: inline-block;
-    height: 2.5rem;
-    width: 2.5rem;
-    margin-right: 0.5rem;
-  }
-
-  .icon,
-  .iconLetter {
-    font-size: 1.5rem;
-    line-height: 2.5rem;
-    text-align: center;
-  }
-
-  .iconEmoji {
-    text-align: center;
-    object-fit: contain;
-    vertical-align: middle;
-
-    > span {
-      font-size: 1.5rem;
-      line-height: 2.5rem;
-    }
-  }
-
-  img.iconEmoji {
-    padding: 0.25em;
-    box-sizing: border-box;
-  }
-}
-
-.bookmark-folder-name,
-.button-folder-edit {
-  margin: 0;
-  padding: 1em;
-  color: var(--link);
-}
-</style>

src/components/bookmark_folders/bookmark_folders.js

@@ -1,4 +1,4 @@
-import BookmarkFolderCard from 'src/components/bookmark_folder_card/bookmark_folder_card.vue'
+import FolderCard from 'src/components/folder_card/folder_card.vue'
 
 import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
 
@@ -9,7 +9,7 @@ const BookmarkFolders = {
     }
   },
   components: {
-    BookmarkFolderCard,
+    FolderCard,
   },
   computed: {
     bookmarkFolders() {

src/components/bookmark_folders/bookmark_folders.vue

@@ -12,14 +12,28 @@
       </router-link>
     </div>
     <div class="panel-body">
-      <BookmarkFolderCard
+      <div class="list-item FolderCard">
-        :all-bookmarks="true"
+        <router-link
-        class="list-item"
+          :to="{ name: 'bookmarks' }"
-      />
+          class="folder-name"
-      <BookmarkFolderCard
+        >
+          <span class="icon">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 menu-icon"
+              icon="bookmark"
+            />
+          </span>{{ $t('nav.all_bookmarks') }}
+        </router-link>
+      </div>
+      <FolderCard
         v-for="folder in bookmarkFolders.slice().reverse()"
         :key="folder"
-        :folder="folder"
+        :name="folder.name"
+        :emoji="folder.emoji"
+        :emoji-url="folder.emoji_url"
+        :link="{ name: 'bookmark-folder', params: { id: folder.id } }"
+        :link-edit="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
         class="list-item"
       />
     </div>

src/components/folder_card/folder_card.js

@@ -0,0 +1,38 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faEllipsisH)
+
+const FolderCard = {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    emoji: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    emojiUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    link: {
+      type: Object,
+      required: true,
+    },
+    linkEdit: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    firstLetter() {
+      return this.name[0]
+    },
+  },
+}
+
+export default FolderCard

src/components/folder_card/folder_card.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="FolderCard">
+    <router-link
+      :to="link"
+      class="folder-name"
+    >
+      <img
+        v-if="emojiUrl"
+        class="iconEmoji iconEmoji-image"
+        :src="emojiUrl"
+        :alt="emoji"
+        :title="emoji"
+      >
+      <span
+        v-else-if="emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ name }}
+    </router-link>
+    <router-link
+      :to="linkEdit"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./folder_card.js"></script>
+
+<style lang="scss">
+.FolderCard {
+  display: flex;
+  align-items: center;
+
+  .folder-name {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+
+    .icon,
+    .iconLetter,
+    .iconEmoji {
+      display: inline-block;
+      height: 2.5rem;
+      width: 2.5rem;
+      margin-right: 0.5rem;
+    }
+
+    .icon,
+    .iconLetter {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+      text-align: center;
+    }
+
+    .iconEmoji {
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/components/lists/lists.js

@@ -1,4 +1,4 @@
-import ListsCard from 'src/components/lists_card/lists_card.vue'
+import FolderCard from 'src/components/folder_card/folder_card.vue'
 
 import { useListsStore } from 'src/stores/lists.js'
 
@@ -9,7 +9,7 @@ const Lists = {
     }
   },
   components: {
-    ListsCard,
+    FolderCard,
   },
   computed: {
     lists() {

src/components/lists/lists.vue

@@ -14,10 +14,12 @@
       </router-link>
     </div>
     <div class="panel-body">
-      <ListsCard
+      <FolderCard
         v-for="list in lists.slice().reverse()"
         :key="list"
-        :list="list"
+        :name="list.title"
+        :link="{ name: 'lists-timeline', params: { id: list.id } }"
+        :link-edit="{ name: 'lists-edit', params: { id: list.id } }"
         class="list-item"
       />
     </div>

src/components/lists_card/lists_card.js

@@ -1,10 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
-
-library.add(faEllipsisH)
-
-const ListsCard = {
-  props: ['list'],
-}
-
-export default ListsCard

src/components/lists_card/lists_card.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="list-card">
-    <router-link
-      :to="{ name: 'lists-timeline', params: { id: list.id } }"
-      class="list-name"
-    >
-      {{ list.title }}
-    </router-link>
-    <router-link
-      :to="{ name: 'lists-edit', params: { id: list.id } }"
-      class="button-list-edit"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="ellipsis-h"
-      />
-    </router-link>
-  </div>
-</template>
-
-<script src="./lists_card.js"></script>
-
-<style lang="scss">
-.list-card {
-  display: flex;
-}
-
-.list-name {
-  flex-grow: 1;
-}
-
-.list-name,
-.button-list-edit {
-  margin: 0;
-  padding: 1em;
-  color: var(--link);
-}
-</style>

src/components/user_card/user_card.js

@@ -309,9 +309,9 @@ export default {
       const privileges = this.loggedIn.privileges
       return (
         this.loggedIn.role === 'admin' ||
-        privileges.includes('users_manage_activation_state') ||
+        privileges.has('users_manage_activation_state') ||
-        privileges.includes('users_delete') ||
+        privileges.has('users_delete') ||
-        privileges.includes('users_manage_tags')
+        privileges.has('users_manage_tags')
       )
     },
     hasNote() {