WIP notification settings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-06-01 18:08:03 +02:00
parent 6adbbc6a1d
commit 58bffc5c66
34 changed files with 1127 additions and 136 deletions
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -6,32 +6,26 @@
      :id="commentId"
    >
      <popover-actor-card
-        class="media-left"
        :actor="comment.actor"
        :inline="true"
        v-if="comment.actor"
      >
        <figure
-          class="image is-48x48"
+          class="image is-32x32 media-left"
          v-if="!comment.deletedAt && comment.actor.avatar"
        >
          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
        </figure>
-        <b-icon
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
+        <b-icon class="media-left" v-else icon="account-circle" />
      </popover-actor-card>
      <div v-else class="media-left">
        <figure
-          class="image is-48x48"
+          class="image is-32x32"
          v-if="!comment.deletedAt && comment.actor.avatar"
        >
          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
        </figure>
-        <b-icon v-else size="is-large" icon="account-circle" />
+        <b-icon v-else icon="account-circle" />
      </div>
      <div class="media-content">
        <div class="content">
@@ -39,19 +33,21 @@
            <strong :class="{ organizer: commentFromOrganizer }">{{
              comment.actor.name
            }}</strong>
-            <small>@{{ usernameWithDomain(comment.actor) }}</small>
-            <a class="comment-link has-text-grey" :href="commentURL">
-              <small>{{
-                formatDistanceToNow(new Date(comment.updatedAt), {
-                  locale: $dateFnsLocale,
-                  addSuffix: true,
-                })
-              }}</small>
-            </a>
+            <small class="has-text-grey">{{
+              usernameWithDomain(comment.actor)
+            }}</small>
          </span>
          <a v-else class="comment-link has-text-grey" :href="commentURL">
            <span>{{ $t("[deleted]") }}</span>
          </a>
+          <a class="comment-link has-text-grey" :href="commentURL">
+            <small>{{
+              formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+                addSuffix: true,
+              })
+            }}</small>
+          </a>
          <span class="icons" v-if="!comment.deletedAt">
            <button
              v-if="comment.actor.id === currentActor.id"
@@ -369,8 +365,17 @@ form.reply {
  }
 }

-.comment-link small:hover {
-  color: hsl(0, 0%, 21%);
+a.comment-link {
+  text-decoration: none;
+  margin-left: 5px;
+  &:hover {
+    text-decoration: underline;
+  }
+  small {
+    &:hover {
+      color: hsl(0, 0%, 21%);
+    }
+  }
 }

 .root-comment .replies {
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -17,26 +17,34 @@
        </figure>
        <div class="media-content">
          <div class="field">
-            <p class="control">
-              <editor
-                ref="commenteditor"
-                mode="comment"
-                v-model="newComment.text"
-              />
-            </p>
-            <p class="help is-danger" v-if="emptyCommentError">
-              {{ $t("Comment text can't be empty") }}
-            </p>
-          </div>
-          <div class="send-comment">
-            <b-button
-              native-type="submit"
-              type="is-primary"
-              class="comment-button-submit"
-              >{{ $t("Post a comment") }}</b-button
-            >
+            <div class="field">
+              <p class="control">
+                <editor
+                  ref="commenteditor"
+                  mode="comment"
+                  v-model="newComment.text"
+                />
+              </p>
+              <p class="help is-danger" v-if="emptyCommentError">
+                {{ $t("Comment text can't be empty") }}
+              </p>
+            </div>
+            <div class="field notify-participants" v-if="isEventOrganiser">
+              <b-switch v-model="newComment.isAnnouncement">{{
+                $t("Notify participants")
+              }}</b-switch>
+            </div>
          </div>
        </div>
+        <div class="send-comment">
+          <b-button
+            native-type="submit"
+            type="is-primary"
+            class="comment-button-submit"
+            icon-left="send"
+            :aria-label="$t('Post a comment')"
+          />
+        </div>
      </article>
    </form>
    <b-notification v-else-if="isConnected" :closable="false">{{
@@ -157,6 +165,7 @@ export default class CommentTree extends Vue {
          inReplyToCommentId: comment.inReplyToComment
            ? comment.inReplyToComment.id
            : null,
+          isAnnouncement: comment.isAnnouncement,
        },
        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
@@ -359,6 +368,10 @@ form.new-comment {
      flex: 1;
      padding-right: 10px;
      margin-bottom: 0;
+
+      &.notify-participants {
+        margin-top: 0.5rem;
+      }
    }
  }
 }
--- a/js/src/graphql/comment.ts
+++ b/js/src/graphql/comment.ts
@@ -24,6 +24,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
    insertedAt
    updatedAt
    deletedAt
+    isAnnouncement
  }
 `;

@@ -92,11 +93,13 @@ export const CREATE_COMMENT_FROM_EVENT = gql`
    $eventId: ID!
    $text: String!
    $inReplyToCommentId: ID
+    $isAnnouncement: Boolean
  ) {
    createComment(
      eventId: $eventId
      text: $text
      inReplyToCommentId: $inReplyToCommentId
+      isAnnouncement: $isAnnouncement
    ) {
      ...CommentRecursive
    }
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -171,6 +171,38 @@ export const SET_USER_SETTINGS = gql`
  ${USER_SETTINGS_FRAGMENT}
 `;

+export const USER_NOTIFICATIONS = gql`
+  query UserNotifications {
+    loggedUser {
+      id
+      locale
+      settings {
+        ...UserSettingFragment
+      }
+      activitySettings {
+        key
+        method
+        enabled
+      }
+    }
+  }
+  ${USER_SETTINGS_FRAGMENT}
+`;
+
+export const UPDATE_ACTIVITY_SETTING = gql`
+  mutation UpdateActivitySetting(
+    $key: String!
+    $method: String!
+    $enabled: Boolean!
+  ) {
+    updateActivitySetting(key: $key, method: $method, enabled: $enabled) {
+      key
+      method
+      enabled
+    }
+  }
+`;
+
 export const LIST_USERS = gql`
  query ListUsers($email: String, $page: Int, $limit: Int) {
    users(email: $email, page: $page, limit: $limit) {
--- a/js/src/registerServiceWorker.ts
+++ b/js/src/registerServiceWorker.ts
@@ -34,6 +34,6 @@ if ("serviceWorker" in navigator && isProduction()) {
 }

 function isProduction(): boolean {
-  // return true;
-  return process.env.NODE_ENV === "production";
+  return true;
+  // return process.env.NODE_ENV === "production";
 }
--- a/js/src/types/comment.model.ts
+++ b/js/src/types/comment.model.ts
@@ -19,6 +19,7 @@ export interface IComment {
  totalReplies: number;
  insertedAt?: Date | string;
  publishedAt?: Date | string;
+  isAnnouncement: boolean;
 }

 export class CommentModel implements IComment {
@@ -50,6 +51,8 @@ export class CommentModel implements IComment {

  totalReplies = 0;

+  isAnnouncement = false;
+
  constructor(hash?: IComment) {
    if (!hash) return;

@@ -66,5 +69,6 @@ export class CommentModel implements IComment {
    this.deletedAt = hash.deletedAt;
    this.insertedAt = new Date(hash.insertedAt as string);
    this.totalReplies = hash.totalReplies;
+    this.isAnnouncement = hash.isAnnouncement;
  }
 }
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -28,6 +28,12 @@ export interface IUserSettings {
  location?: IUserPreferredLocation;
 }

+export interface IActivitySetting {
+  key: string;
+  method: string;
+  enabled: boolean;
+}
+
 export interface IUser extends ICurrentUser {
  confirmedAt: Date;
  confirmationSendAt: Date;
@@ -37,6 +43,7 @@ export interface IUser extends ICurrentUser {
  mediaSize: number;
  drafts: IEvent[];
  settings: IUserSettings;
+  activitySettings: IActivitySetting[];
  locale: string;
  provider?: string;
  lastSignInAt: string;
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -16,18 +16,63 @@
    </nav>
    <section>
      <div class="setting-title">
-        <h2>{{ $t("Participation notifications") }}</h2>
+        <h2>{{ $t("Browser notifications") }}</h2>
      </div>
      <b-button v-if="subscribed" @click="unsubscribeToWebPush()">{{
-        $t("Unsubscribe to WebPush")
+        $t("Unsubscribe to browser notifications")
      }}</b-button>
      <b-button
        icon-left="rss"
        @click="subscribeToWebPush"
        v-else-if="canShowWebPush()"
-        >{{ $t("WebPush") }}</b-button
+        >{{ $t("Activate browser notification") }}</b-button
      >
-      <span v-else>{{ $t("You can't use webpush in this browser.") }}</span>
+      <span v-else>{{
+        $t("You can't use notifications in this browser.")
+      }}</span>
+    </section>
+    <section>
+      <div class="setting-title">
+        <h2>{{ $t("Notification settings") }}</h2>
+      </div>
+      <p>
+        {{
+          $t(
+            "Select the activities for which you wish to receive an email or a push notification."
+          )
+        }}
+      </p>
+      <table class="table">
+        <tbody>
+          <template v-for="notificationType in notificationTypes">
+            <tr :key="`${notificationType.label}-title`">
+              <th colspan="3">
+                {{ notificationType.label }}
+              </th>
+            </tr>
+            <tr :key="`${notificationType.label}-subtitle`">
+              <th v-for="(method, key) in notificationMethods" :key="key">
+                {{ method }}
+              </th>
+              <th></th>
+            </tr>
+            <tr v-for="subType in notificationType.subtypes" :key="subType.id">
+              <td v-for="(method, key) in notificationMethods" :key="key">
+                <b-checkbox
+                  :value="notificationValues[subType.id][key]"
+                  @input="(e) => updateNotificationValue(subType.id, key, e)"
+                  :disabled="notificationValues[subType.id].disabled"
+                />
+              </td>
+              <td>
+                {{ subType.label }}
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </section>
+    <section>
      <div class="setting-title">
        <h2>{{ $t("Participation notifications") }}</h2>
      </div>
@@ -207,9 +252,10 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { INotificationPendingEnum } from "@/types/enums";
 import {
-  USER_SETTINGS,
  SET_USER_SETTINGS,
  FEED_TOKENS_LOGGED_USER,
+  USER_NOTIFICATIONS,
+  UPDATE_ACTIVITY_SETTING,
 } from "../../graphql/user";
 import { IUser } from "../../types/current-user.model";
 import RouteName from "../../router/name";
@@ -223,10 +269,14 @@ import {
  REGISTER_PUSH_MUTATION,
  UNREGISTER_PUSH_MUTATION,
 } from "@/graphql/webPush";
+import { merge } from "lodash";
+
+type NotificationSubType = { label: string; id: string };
+type NotificationType = { label: string; subtypes: NotificationSubType[] };

@Component({
  apollo: {
-    loggedUser: USER_SETTINGS,
+    loggedUser: USER_NOTIFICATIONS,
    feedTokens: {
      query: FEED_TOKENS_LOGGED_USER,
      update: (data) =>
@@ -263,6 +313,201 @@ export default class Notifications extends Vue {

  subscribed = false;

+  notificationMethods = {
+    email: this.$t("Email") as string,
+    push: this.$t("Push") as string,
+  };
+
+  defaultNotificationValues = {
+    participation_event_updated: {
+      email: true,
+      push: true,
+      disabled: true,
+    },
+    participation_event_comment: {
+      email: true,
+      push: true,
+    },
+    event_new_pending_participation: {
+      email: true,
+      push: true,
+    },
+    event_new_participation: {
+      email: false,
+      push: false,
+    },
+    event_created: {
+      email: false,
+      push: false,
+    },
+    event_updated: {
+      email: false,
+      push: false,
+    },
+    discussion_updated: {
+      email: false,
+      push: false,
+    },
+    post_published: {
+      email: false,
+      push: false,
+    },
+    post_updated: {
+      email: false,
+      push: false,
+    },
+    resource_updated: {
+      email: false,
+      push: false,
+    },
+    member_request: {
+      email: true,
+      push: true,
+    },
+    member_updated: {
+      email: false,
+      push: false,
+    },
+    user_email_password_updated: {
+      email: true,
+      push: false,
+      disabled: true,
+    },
+    event_comment_mention: {
+      email: true,
+      push: true,
+    },
+    discussion_mention: {
+      email: true,
+      push: false,
+    },
+    event_new_comment: {
+      email: true,
+      push: false,
+    },
+  };
+
+  notificationTypes: NotificationType[] = [
+    {
+      label: this.$t("Mentions") as string,
+      subtypes: [
+        {
+          id: "event_comment_mention",
+          label: this.$t(
+            "I've been mentionned in a comment under an event"
+          ) as string,
+        },
+        {
+          id: "discussion_mention",
+          label: this.$t(
+            "I've been mentionned in a group discussion"
+          ) as string,
+        },
+      ],
+    },
+    {
+      label: this.$t("Participations") as string,
+      subtypes: [
+        {
+          id: "participation_event_updated",
+          label: this.$t("An event I'm going to has been updated") as string,
+        },
+        {
+          id: "participation_event_comment",
+          label: this.$t(
+            "An event I'm going to has posted an announcement"
+          ) as string,
+        },
+      ],
+    },
+    {
+      label: this.$t("Organizers") as string,
+      subtypes: [
+        {
+          id: "event_new_pending_participation",
+          label: this.$t(
+            "An event I'm organizing has a new pending participation"
+          ) as string,
+        },
+        {
+          id: "event_new_participation",
+          label: this.$t(
+            "An event I'm organizing has a new participation"
+          ) as string,
+        },
+        {
+          id: "event_new_comment",
+          label: this.$t("An event I'm organizing has a new comment") as string,
+        },
+      ],
+    },
+    {
+      label: this.$t("Group activity") as string,
+      subtypes: [
+        {
+          id: "event_created",
+          label: this.$t(
+            "An event from one of my groups has been published"
+          ) as string,
+        },
+        {
+          id: "event_updated",
+          label: this.$t(
+            "An event from one of my groups has been updated or deleted"
+          ) as string,
+        },
+        {
+          id: "discussion_updated",
+          label: this.$t("A discussion has been created or updated") as string,
+        },
+        {
+          id: "post_published",
+          label: this.$t("A post has been published") as string,
+        },
+        {
+          id: "post_updated",
+          label: this.$t("A post has been updated") as string,
+        },
+        {
+          id: "resource_updated",
+          label: this.$t("A resource has been created or updated") as string,
+        },
+        {
+          id: "member_request",
+          label: this.$t(
+            "A member requested to join one of my groups"
+          ) as string,
+        },
+        {
+          id: "member_updated",
+          label: this.$t("A member has been updated") as string,
+        },
+      ],
+    },
+    {
+      label: this.$t("User settings") as string,
+      subtypes: [
+        {
+          id: "user_email_password_updated",
+          label: this.$t("You changed your email or password") as string,
+        },
+      ],
+    },
+  ];
+
+  get userNotificationValues(): Record<string, Record<string, boolean>> {
+    return this.loggedUser.activitySettings.reduce((acc, activitySetting) => {
+      acc[activitySetting.key] = acc[activitySetting.key] || {};
+      acc[activitySetting.key][activitySetting.method] =
+        activitySetting.enabled;
+      return acc;
+    }, {} as Record<string, Record<string, boolean>>);
+  }
+
+  get notificationValues(): Record<string, Record<string, boolean>> {
+    return merge(this.defaultNotificationValues, this.userNotificationValues);
+  }
+
  mounted(): void {
    this.notificationPendingParticipationValues = {
      [INotificationPendingEnum.NONE]: this.$t("Do not receive any mail"),
@@ -290,7 +535,7 @@ export default class Notifications extends Vue {
    await this.$apollo.mutate<{ setUserSettings: string }>({
      mutation: SET_USER_SETTINGS,
      variables,
-      refetchQueries: [{ query: USER_SETTINGS }],
+      refetchQueries: [{ query: USER_NOTIFICATIONS }],
    });
  }

@@ -387,6 +632,22 @@ export default class Notifications extends Vue {
    this.subscribed = await this.isSubscribed();
  }

+  async updateNotificationValue(
+    key: string,
+    method: string,
+    enabled: boolean
+  ): Promise<void> {
+    await this.$apollo.mutate({
+      mutation: UPDATE_ACTIVITY_SETTING,
+      variables: {
+        key,
+        method,
+        enabled,
+        userId: this.loggedUser.id,
+      },
+    });
+  }
+
  private async isSubscribed(): Promise<boolean> {
    if (!("serviceWorker" in navigator)) return Promise.resolve(false);
    const registration = await navigator.serviceWorker.getRegistration();