Load participants async

4 files changed, 256 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
new file mode 100644
index 00000000000..b8510a6ce3a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -0,0 +1,125 @@
+<script>
+import { __, n__, sprintf } from '../../../locale';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    participants: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 7,
+    },
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  components: {
+    loadingIcon,
+    userAvatarImage,
+  },
+  computed: {
+    lessParticipants() {
+      return this.participants.slice(0, this.numberOfLessParticipants);
+    },
+    visibleParticipants() {
+      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+    },
+    hasMoreParticipants() {
+      return this.participants.length > this.numberOfLessParticipants;
+    },
+    toggleLabel() {
+      let label = '';
+      if (this.isShowingMoreParticipants) {
+        label = __('- show less');
+      } else {
+        label = sprintf(__('+ %{moreCount} more'), {
+          moreCount: this.participants.length - this.numberOfLessParticipants,
+        });
+      }
+
+      return label;
+    },
+    participantLabel() {
+      return sprintf(
+        n__('%{count} participant', '%{count} participants', this.participants.length),
+        { count: this.loading ? '' : this.participantCount },
+      );
+    },
+    participantCount() {
+      return this.participants.length;
+    },
+  },
+  methods: {
+    toggleMoreParticipants() {
+      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa fa-users"
+        aria-hidden="true">
+      </i>
+      <loading-icon
+        v-if="loading"
+        class="js-participants-collapsed-loading-icon" />
+      <span
+        v-else
+        class="js-participants-collapsed-count">
+        {{ participantCount }}
+      </span>
+    </div>
+    <div class="title hide-collapsed">
+      <loading-icon
+        v-if="loading"
+        :inline="true"
+        class="js-participants-expanded-loading-icon" />
+      {{ participantLabel }}
+    </div>
+    <div class="participants-list hide-collapsed">
+      <div
+        v-for="participant in visibleParticipants"
+        :key="participant.id"
+        class="participants-author js-participants-author">
+        <a
+          class="author_link"
+          :href="participant.web_url">
+          <user-avatar-image
+            :lazy="true"
+            :img-src="participant.avatar_url"
+            css-classes="avatar-inline"
+            :size="24"
+            :tooltip-text="participant.name"
+            tooltip-placement="bottom" />
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="hasMoreParticipants"
+      class="participants-more hide-collapsed">
+      <button
+        type="button"
+        class="btn-transparent btn-blank js-toggle-participants-button"
+        @click="toggleMoreParticipants">
+        {{ toggleLabel }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
new file mode 100644
index 00000000000..c1296b28db7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
@@ -0,0 +1,26 @@
+<script>
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import participants from './participants.vue';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+  components: {
+    participants,
+  },
+};
+</script>
+
+<template>
+  <div class="block participants">
+    <participants
+      :loading="store.isFetching.participants"
+      :participants="store.participants"
+      :number-of-less-participants="7" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
new file mode 100644
index 00000000000..4ad3d469f25
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -0,0 +1,45 @@
+<script>
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import eventHub from '../../event_hub';
+import Flash from '../../../flash';
+import subscriptions from './subscriptions.vue';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+
+  components: {
+    subscriptions,
+  },
+
+  methods: {
+    onToggleSubscription() {
+      this.mediator.toggleSubscription()
+        .catch(() => {
+          Flash('Error occurred when toggling the notification subscription');
+        });
+    },
+  },
+
+  created() {
+    eventHub.$on('toggleSubscription', this.onToggleSubscription);
+  },
+
+  beforeDestroy() {
+    eventHub.$off('toggleSubscription', this.onToggleSubscription);
+  },
+};
+</script>
+
+<template>
+  <div class="block subscriptions">
+    <subscriptions
+      :loading="store.isFetching.subscriptions"
+      :subscribed="store.subscribed" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
new file mode 100644
index 00000000000..a3a8213d63a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -0,0 +1,60 @@
+<script>
+import { __ } from '../../../locale';
+import eventHub from '../../event_hub';
+import loadingButton from '../../../vue_shared/components/loading_button.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subscribed: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  components: {
+    loadingButton,
+  },
+  computed: {
+    buttonLabel() {
+      let label;
+      if (this.subscribed === false) {
+        label = __('Subscribe');
+      } else if (this.subscribed === true) {
+        label = __('Unsubscribe');
+      }
+
+      return label;
+    },
+  },
+  methods: {
+    toggleSubscription() {
+      eventHub.$emit('toggleSubscription');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa fa-rss"
+        aria-hidden="true">
+      </i>
+    </div>
+    <span class="issuable-header-text hide-collapsed pull-left">
+      {{ __('Notifications') }}
+    </span>
+    <loading-button
+      ref="loadingButton"
+      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
+      :loading="loading"
+      :label="buttonLabel"
+      @click="toggleSubscription"
+    />
+  </div>
+</template>