Merge branch 'fixes' into 'master'

Various fixes

Closes #750, #452, #747 et #749

See merge request framasoft/mobilizon!972

js/src/apollo/utils.ts

@@ -164,7 +164,7 @@ function doMerge<T = any>(
   incoming: Array<T>,
   args: Record<string, any> | null
 ): Array<T> {
-  const merged = existing ? existing.slice(0) : [];
+  const merged = existing && Array.isArray(existing) ? existing.slice(0) : [];
   let res;
   if (args) {
     // Assume an page of 1 if args.page omitted.

js/src/components/Discussion/DiscussionListItem.vue

@@ -32,7 +32,10 @@
           }}</span
         >
       </div>
-      <div class="has-text-grey-dark" v-if="!discussion.lastComment.deletedAt">
+      <div
+        class="ellipsis has-text-grey-dark"
+        v-if="!discussion.lastComment.deletedAt"
+      >
         {{ htmlTextEllipsis }}
       </div>
       <div v-else class="has-text-grey-dark">
@@ -105,7 +108,7 @@ export default class DiscussionListItem extends Vue {
       }
     }
 
-    div.has-text-grey {
+    div.ellipsis {
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;

js/src/views/Admin/AdminGroupProfile.vue

@@ -438,6 +438,10 @@ export default class AdminGroupProfile extends Vue {
             query: GET_GROUP,
             variables: {
               id: profileId,
+              organizedEventsPage: this.organizedEventsPage,
+              organizedEventsLimit: EVENTS_PER_PAGE,
+              postsPage: this.postsPage,
+              postsLimit: POSTS_PER_PAGE,
             },
           });
 

js/src/views/Admin/AdminProfile.vue

@@ -275,6 +275,7 @@ import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
 import VueRouter from "vue-router";
 import { MemberRole } from "@/types/enums";
+import cloneDeep from "lodash/cloneDeep";
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
 const EVENTS_PER_PAGE = 10;
@@ -402,6 +403,10 @@ export default class AdminProfile extends Vue {
             actorId: profileId,
             organizedEventsPage: 1,
             organizedEventsLimit: EVENTS_PER_PAGE,
+            participationsPage: 1,
+            participationLimit: PARTICIPATIONS_PER_PAGE,
+            membershipsPage: 1,
+            membershipsLimit: MEMBERSHIPS_PER_PAGE,
           },
         });
 
@@ -414,7 +419,8 @@ export default class AdminProfile extends Vue {
           },
           data: {
             person: {
-              ...person,
+              ...cloneDeep(person),
+              participations: { total: 0, elements: [] },
               suspended: true,
               avatar: null,
               name: "",

js/src/views/Event/Participants.vue

@@ -109,7 +109,7 @@
                     props.row.actor.name
                   }}</span
                   ><br />
-                  <span class="is-size-7 has-text-grey"
+                  <span class="is-size-7 has-text-grey-dark"
                     >@{{ usernameWithDomain(props.row.actor) }}</span
                   >
                 </span>
@@ -148,10 +148,11 @@
         </b-table-column>
         <b-table-column
           field="metadata.message"
+          class="column-message"
           :label="$t('Message')"
           v-slot="props"
         >
-          <span
+          <div
             @click="toggleQueueDetails(props.row)"
             :class="{
               'ellipsed-message':
@@ -159,11 +160,25 @@
             }"
             v-if="props.row.metadata && props.row.metadata.message"
           >
-            {{ props.row.metadata.message | ellipsize }}
+            <p>
-          </span>
+              {{ props.row.metadata.message | ellipsize }}
-          <span v-else class="has-text-grey">
+            </p>
+            <button
+              type="button"
+              class="button is-text"
+              v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
+              @click.stop="toggleQueueDetails(props.row)"
+            >
+              {{
+                openDetailedRows[props.row.id]
+                  ? $t("View less")
+                  : $t("View more")
+              }}
+            </button>
+          </div>
+          <p v-else class="has-text-grey-dark">
             {{ $t("No message") }}
-          </span>
+          </p>
         </b-table-column>
         <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
@@ -177,7 +192,7 @@
         </template>
         <template slot="empty">
           <section class="section">
-            <div class="content has-text-grey has-text-centered">
+            <div class="content has-text-grey-dark has-text-centered">
               <p>{{ $t("No participant matches the filters") }}</p>
             </div>
           </section>
@@ -407,8 +422,13 @@ export default class Participants extends Vue {
     )
       return;
     this.queueTable.toggleDetails(row);
+    if (row.id) {
+      this.openDetailedRows[row.id] = !this.openDetailedRows[row.id];
+    }
   }
 
+  openDetailedRows: Record<string, boolean> = {};
+
   async pushRouter(
     routeName: string,
     args: Record<string, string>
@@ -434,8 +454,24 @@ section {
 }
 
 .table {
+  .column-message {
+    vertical-align: middle;
+  }
   .ellipsed-message {
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    p {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    button {
+      display: inline;
+    }
   }
 
   span.tag {

js/src/views/Group/Group.vue

@@ -106,91 +106,6 @@
                 >
               </p>
             </div>
-            <!-- <div class="block-column address">
-              <address v-if="physicalAddress">
-                <p
-                  class="addressDescription"
-                  :title="physicalAddress.poiInfos.name"
-                >
-                  {{ physicalAddress.poiInfos.name }}
-                </p>
-                <p>{{ physicalAddress.poiInfos.alternativeName }}</p>
-              </address>
-              <span
-                class="map-show-button"
-                @click="showMap = !showMap"
-                v-if="physicalAddress && physicalAddress.geom"
-                >{{ $t("Show map") }}</span
-              >
-              <p class="buttons">
-                <b-tooltip
-                  v-if="group.openness !== Openness.OPEN"
-                  :label="$t('This group is invite-only')"
-                  position="is-bottom"
-                >
-                  <b-button disabled type="is-primary">{{
-                    $t("Join group")
-                  }}</b-button></b-tooltip
-                >
-                <b-button
-                  v-else-if="currentActor.id"
-                  @click="joinGroup"
-                  type="is-primary"
-                  >{{ $t("Join group") }}</b-button
-                >
-                <b-button
-                  tag="router-link"
-                  :to="{
-                    name: RouteName.GROUP_JOIN,
-                    params: { preferredUsername: usernameWithDomain(group) },
-                  }"
-                  v-else
-                  type="is-primary"
-                  >{{ $t("Join group") }}</b-button
-                >
-                <b-dropdown
-                  class="menu-dropdown"
-                  aria-role="list"
-                  position="is-bottom-left"
-                >
-                  <b-button
-                    slot="trigger"
-                    role="button"
-                    icon-right="dots-horizontal"
-                  >
-                  </b-button>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="ableToReport"
-                    @click="isReportModalActive = true"
-                  >
-                    <span>
-                      <b-icon icon="flag" />
-                      {{ $t("Report") }}
-                    </span>
-                  </b-dropdown-item>
-                  <hr class="dropdown-divider" />
-                  <b-dropdown-item has-link aria-role="listitem">
-                    <a
-                      :href="`@${preferredUsername}/feed/atom`"
-                      :title="$t('Atom feed for events and posts')"
-                    >
-                      <b-icon icon="rss" />
-                      {{ $t("RSS/Atom Feed") }}
-                    </a>
-                  </b-dropdown-item>
-                  <b-dropdown-item has-link aria-role="listitem">
-                    <a
-                      :href="`@${preferredUsername}/feed/ics`"
-                      :title="$t('ICS feed for events')"
-                    >
-                      <b-icon icon="calendar-sync" />
-                      {{ $t("ICS/WebCal Feed") }}
-                    </a>
-                  </b-dropdown-item>
-                </b-dropdown>
-              </p>
-            </div> -->
             <div class="buttons">
               <b-button
                 outlined

js/src/views/Posts/Edit.vue

@@ -395,12 +395,23 @@ export default class EditPost extends mixins(GroupMixin) {
 }
 form {
   nav.navbar {
-    position: sticky;
+    min-height: 2rem !important;
-    bottom: 0;
+    background: lighten($secondary, 10%);
-    min-height: 2rem;
 
     .container {
       min-height: 2rem;
+
+      .navbar-menu,
+      .navbar-end {
+        display: flex !important;
+        background: lighten($secondary, 10%);
+        flex-wrap: wrap;
+      }
+
+      .navbar-end {
+        justify-content: flex-end;
+        margin-left: auto;
+      }
     }
   }
 }