@asd20/ui 3.2.594 → 3.2.596

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -0,0 +1,547 @@
+<template>
+  <div class="asd20-template-clubs">
+    <!-- Skip Nav -->
+    <asd20-skip-to />
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
+    <!-- Banner Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.banner"
+        group-type="banner"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      />
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-if="pageHeaderContent"
+      v-bind="pageHeaderContent"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :languageCode="languageCode"
+      v-on="$listeners"
+      :breadcrumb-links="breadcrumbLinks"
+    >
+      <!-- Floating Notifications -->
+      <template slot="top">
+        <client-only>
+          <asd20-notification-group
+            class="asd20-notification-group--floating"
+            :notifications="activeNotificationsByType.floating"
+            :total-dismissed-notifications="totalDismissedNotifications"
+            group-type="floating"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
+    </asd20-page-header>
+
+    <!-- Inline-Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      :primary-messages="primaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-detail-links
+      omit-calls-to-action
+      grid
+    ></asd20-page-content>
+
+    <intersect @enter="$emit('stories-in-view')">
+      <div class="article-digest">
+        <h2 class="feed-title">
+          {{
+            storiesFeedProps && storiesFeedProps.title
+              ? storiesFeedProps.title
+              : 'Stories & Features'
+          }}
+        </h2>
+        <div class="search-header">
+          <asd20-search-field
+            :value="keywords"
+            @input="$emit('update:keywords', $event)"
+            medium
+          />
+          <asd20-multiselect-input
+            label="Categories"
+            :taggable="false"
+            :value="selectedCategories"
+            :items="categoryOptions"
+            @input="$emit('update:selected-categories', $event)"
+          />
+        </div>
+
+        <div v-if="cards.length < 1">
+          <br />
+          <p>There are currently no featues to view.</p>
+        </div>
+        <div class="feed" v-if="cards.length > 0">
+          <div
+            v-if="cards.length > numberToShow"
+            id="list-start"
+            class="article-pagination"
+          >
+            <p class="result-count">
+              Viewing article {{ counter }}
+              {{ counter === cards.length ? '' : '-' }}
+              {{
+                counter === cards.length
+                  ? ''
+                  : counter2 <= cards.length
+                  ? counter2
+                  : cards.length
+              }}
+              of {{ cards.length }}.
+            </p>
+            <div class="page-selector">
+              <div class="prev-next">
+                <asd20-button
+                  @click.native="prevSet()"
+                  class="load-more"
+                  icon="chevron"
+                  label="Prev"
+                  :iconAngle="-90"
+                  size="md"
+                  horizontal
+                  transparent
+                  centered
+                  opposite
+                />
+                <p>
+                  Page {{ Math.ceil(counter2 / numberToShow) }} of
+                  {{ Math.ceil(cards.length / numberToShow) }}
+                </p>
+                <asd20-button
+                  @click.native="nextSet()"
+                  class="load-more"
+                  icon="chevron"
+                  label="Next"
+                  :iconAngle="90"
+                  size="md"
+                  horizontal
+                  transparent
+                  centered
+                />
+              </div>
+            </div>
+          </div>
+          <div class="feed-items">
+            <asd20-card
+              v-for="(card, index) in cards.slice(counter - 1, counter2)"
+              :key="index"
+              v-bind="card"
+              zoom
+            ></asd20-card>
+          </div>
+          <div v-if="cards.length > numberToShow" class="article-pagination">
+            <p class="result-count">
+              Viewing article {{ counter }}
+              {{ counter === cards.length ? '' : '-' }}
+              {{
+                counter === cards.length
+                  ? ''
+                  : counter2 <= cards.length
+                  ? counter2
+                  : cards.length
+              }}
+              of {{ cards.length }}.
+            </p>
+            <div class="page-selector">
+              <div class="prev-next">
+                <a href="#list-start">
+                  <asd20-button
+                    @click.native="prevSet()"
+                    class="load-more"
+                    icon="chevron"
+                    label="Prev"
+                    :iconAngle="-90"
+                    size="md"
+                    horizontal
+                    transparent
+                    centered
+                    opposite
+                  />
+                </a>
+                <p>
+                  Page {{ Math.ceil(counter2 / numberToShow) }} of
+                  {{ Math.ceil(cards.length / numberToShow) }}
+                </p>
+                <a href="#list-start">
+                  <asd20-button
+                    @click.native="nextSet()"
+                    class="load-more"
+                    icon="chevron"
+                    label="Next"
+                    :iconAngle="90"
+                    size="md"
+                    horizontal
+                    transparent
+                    centered
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </intersect>
+
+    <asd20-media-section
+      v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :images="this.combinedMessageImages || []"
+      :videos="this.combinedMessageVideos || []"
+    >
+    </asd20-media-section>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="widgetsSectionProps.footer || $slots.widgets"
+      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      @people-in-view="$emit('people-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <!-- Feeds -->
+    <asd20-feeds-section
+      :announcements="announcements"
+      :announcements-feed-props="announcementsFeedProps"
+      @announcements-in-view="$emit('announcements-in-view')"
+    ></asd20-feeds-section>
+
+    <!-- Quick Links -->
+    <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
+      <slot name="quicklinks-menu" />
+    </asd20-quicklinks-menu>
+
+    <!-- Footer -->
+    <asd20-page-footer
+      :organization="organization"
+      :socialLinks="socialLinks"
+      :disclosureLinks="disclosureLinks"
+      :websiteLogoProps="websiteLogoProps"
+    >
+      <slot name="page-footer" />
+    </asd20-page-footer>
+  </div>
+</template>
+
+<script>
+// Components
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+
+import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
+import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
+
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
+
+import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
+import Asd20MultiselectInput from '../../../components/atoms/Asd20MultiselectInput'
+import Asd20Card from '../../../components/molecules/Asd20Card'
+import Asd20Button from '../../../components/atoms/Asd20Button'
+
+import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+// Helpers
+import mapMessageToCard from '../../../helpers/mapMessageToCard'
+
+export default {
+  name: 'ClubsTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    Asd20SearchField,
+    Asd20MultiselectInput,
+    Asd20Card,
+    Asd20Button,
+    Intersect,
+    Asd20MediaSection,
+  },
+
+  props: {
+    keywords: { type: String, default: '' },
+    selectedCategories: { type: Array, default: () => [] },
+    // categoryOptions: { type: Array, default: () => [] },
+  },
+  data: function() {
+    return {
+      numberToShow: 25,
+      counter: 1,
+      counter2: 25,
+    }
+  },
+  computed: {
+    cards() {
+      if (!Array.isArray(this.stories)) return []
+      return this.stories
+        .map(s =>
+          mapMessageToCard(s, {
+            // reversed: true,
+            date: '',
+            time: '',
+            // description: '',
+            // image: '',
+            pinned: false,
+          })
+        )
+        .sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0))
+      // .map(c => ({
+      //   ...c,
+      //   link: c.link.replace('/stories', '/announcements'),
+      // }))
+    },
+    categoryOptions() {
+      // get a unique array of categories with duplicates removed
+      return [
+        ...new Set(
+          this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
+        ),
+      ]
+    },
+    // computedCategoryOptions() {
+    //   // get a unique array of categories with duplicates removed
+    //   if (this.categoryOptions.length === 0) {
+    //     return [
+    //       ...new Set(
+    //         this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
+    //       ),
+    //     ]
+    //   }
+    //   return this.categoryOptions
+    // },
+  },
+  watch: {
+    selectedCategories: function(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.reset()
+      }
+    },
+  },
+  methods: {
+    nextSet() {
+      if (
+        Math.ceil(this.counter2 / this.numberToShow) <
+        Math.ceil(this.cards.length / this.numberToShow)
+      ) {
+        this.counter = this.counter + this.numberToShow
+        this.counter2 = this.counter2 + this.numberToShow
+        this.$emit('announcements-in-view')
+      }
+    },
+    prevSet() {
+      if (Math.ceil(this.counter2 / this.numberToShow) > 1) {
+        this.counter = this.counter - this.numberToShow
+        this.counter2 = this.counter2 - this.numberToShow
+        this.$emit('announcements-in-view')
+      }
+    },
+    reset() {
+      this.counter = 1
+      this.counter2 = 25
+      this.$emit('announcements-in-view')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+@import '../../../design/_typography.scss';
+@import '../../../design/_template.scss';
+@import '../../../design/_print.scss';
+@import '../../../design/tokens.css';
+
+.asd20-template-clubs {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2.0375);
+    // .bell {
+    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+    //   svg {
+    //     fill: var(--color__accent) !important;
+    //   }
+    //   span {
+    //     background: var(--color__accent) !important;
+    //     top: inherit !important;
+    //     right: inherit !important;
+    //     width: 1.2rem !important;
+    //     height: 1.2rem !important;
+    //     font-size: 0.75rem !important;
+    //   }
+    // }
+  }
+  .feed-title {
+    margin: space(1) 0 0 space(1);
+  }
+  .asd20-card {
+    margin-bottom: space(0.5);
+    // &__date-time {
+    //   display: none;
+    // }
+    // &__description {
+    //   display: none;
+    // }
+  }
+  .article-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: space(1) space(0.25) space(0) space(0.25);
+    flex-direction: column;
+    p {
+      margin: 0;
+    }
+    .page-selector {
+      display: flex;
+      align-items: center;
+      .prev-next {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        a {
+          text-decoration: none !important;
+        }
+        .asd20-button {
+          padding: 0;
+          > .asd20-button__label {
+            margin: 0;
+          }
+        }
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+  .notification-group--inline {
+    margin: space(2) space(1) space(1) space(1);
+  }
+  .search-header,
+  .result-count {
+    margin: space(0) space(1) space(1) space(1);
+  }
+
+  .asd20-search-field .asd20-icon {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-clubs {
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    .feed-title {
+      margin-left: 0;
+    }
+
+    .asd20-page-content {
+      margin-top: space(1);
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      flex-wrap: wrap;
+    }
+    .notification-group--inline {
+      margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+    }
+    .prev-next {
+      margin: space(1) 0;
+    }
+    .primary-messaging-section {
+      max-width: 100vw;
+    }
+    .feed-items {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: space(1);
+      margin-bottom: space(1);
+      .asd20-card {
+        margin-bottom: 0;
+      }
+    }
+    .search-header,
+    .result-count {
+      margin: space(0) space(0) space(1) space(0);
+    }
+    .search-header {
+      display: flex;
+      flex-basis: 100%;
+      justify-content: space-between;
+    }
+    .article-pagination {
+      flex-direction: row;
+    }
+    .article-digest {
+      // flex-basis: 100%;
+      margin: space(1) space(3) space(1) space(3);
+    }
+  }
+}
+</style>