Introduce group posts

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Comment/Comment.vue

@@ -138,7 +138,7 @@ import { IEvent, CommentModeration } from "../../types/event.model";
 import ReportModal from "../Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
 import { CREATE_REPORT } from "../../graphql/report";
-import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
+import PopoverActorCard from "../Account/PopoverActorCard.vue";
 
 @Component({
   apollo: {

js/src/components/Discussion/DiscussionComment.vue

@@ -12,7 +12,9 @@
           <span>@{{ comment.actor.preferredUsername }}</span>
         </div>
         <div class="post-infos">
-          <span>{{ comment.updatedAt | formatDateTimeString }}</span>
+          <span :title="comment.insertedAt | formatDateTimeString">
+            {{ $timeAgo.format(comment.insertedAt, "twitter") || $t("Right now") }}</span
+          >
         </div>
       </div>
       <div class="description-content" v-html="comment.text"></div>
@@ -21,10 +23,10 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IComment } from "../../types/comment.model";
+import { IComment, CommentModel } from "../../types/comment.model";
 
 @Component
-export default class ConversationComment extends Vue {
+export default class DiscussionComment extends Vue {
   @Prop({ required: true, type: Object }) comment!: IComment;
 }
 </script>

js/src/components/Discussion/DiscussionListItem.vue

@@ -1,42 +1,45 @@
 <template>
   <router-link
-    class="conversation-minimalist-card-wrapper"
-    :to="{ name: RouteName.CONVERSATION, params: { slug: conversation.slug, id: conversation.id } }"
+    class="discussion-minimalist-card-wrapper"
+    :to="{ name: RouteName.DISCUSSION, params: { slug: discussion.slug, id: discussion.id } }"
   >
     <div class="media-left">
-      <figure class="image is-32x32" v-if="conversation.lastComment.actor.avatar">
-        <img class="is-rounded" :src="conversation.lastComment.actor.avatar.url" alt />
+      <figure class="image is-32x32" v-if="discussion.lastComment.actor.avatar">
+        <img class="is-rounded" :src="discussion.lastComment.actor.avatar.url" alt />
       </figure>
       <b-icon v-else size="is-medium" icon="account-circle" />
     </div>
     <div class="title-info-wrapper">
-      <p class="conversation-minimalist-title">{{ conversation.title }}</p>
+      <p class="discussion-minimalist-title">{{ discussion.title }}</p>
       <div class="has-text-grey">{{ htmlTextEllipsis }}</div>
     </div>
   </router-link>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IConversation } from "../../types/conversations";
+import { IDiscussion } from "../../types/discussions";
 import RouteName from "../../router/name";
 
 @Component
-export default class ConversationListItem extends Vue {
-  @Prop({ required: true, type: Object }) conversation!: IConversation;
+export default class DiscussionListItem extends Vue {
+  @Prop({ required: true, type: Object }) discussion!: IDiscussion;
 
   RouteName = RouteName;
 
   get htmlTextEllipsis() {
     const element = document.createElement("div");
-    element.innerHTML = this.conversation.lastComment.text
-      .replace(/<br\s*\/?>/gi, " ")
-      .replace(/<p>/gi, " ");
+    if (this.discussion.lastComment) {
+      element.innerHTML = this.discussion.lastComment.text
+        .replace(/<br\s*\/?>/gi, " ")
+        .replace(/<p>/gi, " ");
+    }
     return element.innerText;
   }
 }
 </script>
 <style lang="scss" scoped>
-.conversation-minimalist-card-wrapper {
+.discussion-minimalist-card-wrapper {
+  text-decoration: none;
   display: flex;
   width: 100%;
   color: initial;
@@ -50,7 +53,7 @@ export default class ConversationListItem extends Vue {
   .title-info-wrapper {
     flex: 2;
 
-    .conversation-minimalist-title {
+    .discussion-minimalist-title {
       color: #3c376e;
       font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
       font-size: 1.25rem;

js/src/components/Event/EventListCard.vue

@@ -247,6 +247,7 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
    * Delete the event
    */
   async openDeleteEventModalWrapper() {
+    // @ts-ignore
     await this.openDeleteEventModal(this.participation.event, this.currentActor);
   }
 

js/src/components/Event/ShareEventModal.vue

@@ -87,13 +87,16 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 })
 export default class ShareEventModal extends Vue {
   @Prop({ type: Object, required: true }) event!: IEvent;
+
   @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+
   @Ref("eventURLInput") readonly eventURLInput!: any;
 
   EventVisibility = EventVisibility;
+
   EventStatus = EventStatus;
 
-  showCopiedTooltip: boolean = false;
+  showCopiedTooltip = false;
 
   get twitterShareUrl(): string {
     return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${

js/src/components/Group/InvitationCard.vue

@@ -23,7 +23,7 @@
                 <router-link
                   :to="{
                     name: RouteName.GROUP,
-                    params: { preferredUsername: member.parent.preferredUsername },
+                    params: { preferredUsername: usernameWithDomain(member.parent) },
                   }"
                 >
                   <h3>{{ member.parent.name }}</h3>
@@ -57,7 +57,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, IMember } from "@/types/actor";
+import { IGroup, IMember, usernameWithDomain } from "@/types/actor";
 import RouteName from "../../router/name";
 
 @Component
@@ -65,6 +65,8 @@ export default class InvitationCard extends Vue {
   @Prop({ required: true }) member!: IMember;
 
   RouteName = RouteName;
+
+  usernameWithDomain = usernameWithDomain;
 }
 </script>
 

js/src/components/Logo.vue

@@ -7,6 +7,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
+
 @Component({
   components: {
     MobilizonLogo,

js/src/components/Post/PostListItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <router-link
+    class="post-minimalist-card-wrapper"
+    :to="{ name: RouteName.POST, params: { slug: post.slug } }"
+  >
+    <div class="title-info-wrapper">
+      <p class="post-minimalist-title">{{ post.title }}</p>
+      <small class="has-text-grey">{{ $timeAgo.format(new Date(post.insertedAt)) }}</small>
+    </div>
+  </router-link>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import RouteName from "../../router/name";
+import { IPost } from "../../types/post.model";
+
+@Component
+export default class PostListItem extends Vue {
+  @Prop({ required: true, type: Object }) post!: IPost;
+
+  RouteName = RouteName;
+}
+</script>
+<style lang="scss" scoped>
+.post-minimalist-card-wrapper {
+  text-decoration: none;
+  display: flex;
+  width: 100%;
+  color: initial;
+  border-bottom: 1px solid #e9e9e9;
+  align-items: center;
+
+  .title-info-wrapper {
+    flex: 2;
+
+    .post-minimalist-title {
+      color: #3c376e;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-size: 1rem;
+      font-weight: 700;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  }
+}
+</style>

js/src/components/Resource/FolderItem.vue

@@ -142,7 +142,7 @@ a {
   position: relative;
 
   .preview {
-    flex: 0 0 100px;
+    flex: 0 0 50px;
     position: relative;
     display: flex;
     align-items: center;
@@ -159,7 +159,7 @@ a {
       display: block;
       font-weight: 500;
       margin-bottom: 5px;
-      color: $background-color;
+      color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;

js/src/components/Resource/ResourceItem.vue

@@ -81,7 +81,7 @@ a {
   flex: 1;
 
   .preview {
-    flex: 0 0 100px;
+    flex: 0 0 50px;
     position: relative;
     display: flex;
     align-items: center;

js/src/components/Resource/ResourceSelector.vue

@@ -76,6 +76,7 @@ import { IResource } from "../../types/resource";
 })
 export default class ResourceSelector extends Vue {
   @Prop({ required: true }) initialResource!: IResource;
+
   @Prop({ required: true }) username!: string;
 
   resource: IResource | undefined = this.initialResource.parent;

js/src/components/Settings/SettingMenuItem.vue

@@ -13,6 +13,7 @@ import { Route } from "vue-router";
 @Component
 export default class SettingMenuItem extends Vue {
   @Prop({ required: false, type: String }) title!: string;
+
   @Prop({ required: true, type: Object }) to!: Route;
 
   get isActive() {

js/src/components/Settings/SettingMenuSection.vue

@@ -11,11 +11,13 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
 import { Route } from "vue-router";
+
 @Component({
   components: { SettingMenuItem },
 })
 export default class SettingMenuSection extends Vue {
   @Prop({ required: false, type: String }) title!: string;
+
   @Prop({ required: true, type: Object }) to!: Route;
 
   get sectionActive() {

js/src/components/Settings/SettingsMenu.vue

@@ -63,6 +63,7 @@ import { CURRENT_USER_CLIENT } from "../../graphql/user";
 import { ICurrentUser, ICurrentUserRole } from "../../types/current-user.model";
 
 import RouteName from "../../router/name";
+
 @Component({
   components: { SettingMenuSection, SettingMenuItem },
   apollo: {

js/src/components/Todo/FullTodo.vue

@@ -24,6 +24,7 @@ import RouteName from "../../router/name";
 import { UPDATE_TODO } from "../../graphql/todos";
 import ActorAutoComplete from "../Account/ActorAutoComplete.vue";
 import { IPerson } from "../../types/actor";
+
 @Component({
   components: { ActorAutoComplete },
 })