@asd20/ui 3.2.851 → 3.2.853

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.851",
+  "version": "3.2.853",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20FeedsSection/index.vue

@@ -12,6 +12,7 @@
         :loading="!Array.isArray(announcements)"
         :cards="announcementCards"
         :slidesPerView="announcementCards.length < 6 ? 3 : 4"
+        :hasProtectedContent="hasProtectedContent"
         cardType="Announcement"
       ></Asd20SwiperFeed>
     </intersect>
@@ -85,6 +86,8 @@ export default {
     peopleFeedProps: { type: Object, default: () => {} },
 
     cardType: { type: String, default: '' },
+    organizationId: { type: String, default: '' },
+    hasProtectedContent: { type: Boolean, default: false },
   },
 
   data: () => ({
@@ -94,16 +97,34 @@ export default {
   computed: {
     announcementCards() {
       if (!Array.isArray(this.announcements)) return []
-      return this.announcements.map(a =>
-        mapMessageToCard(a, {
-          reversed: true,
+
+      // If the organization id is not the employee org:
+      if (this.organizationId !== '7ab6f0b0-3304-11ef-92d6-ed16a99dd422') {
+        return this.announcements.map(a =>
+          mapMessageToCard(a, {
+            reversed: true,
+            time: '',
+            zoom: true,
+            noCoverImage: true,
+          })
+        )
+      }
+
+      // If the organization id is the employee org:
+      return this.announcements.map(a => {
+        const isLeadership = a.categories.includes('Leadership')
+        const reversed = isLeadership ? false : true
+
+        return mapMessageToCard(a, {
+          reversed: reversed,
           time: '',
           zoom: true,
           noCoverImage: true,
         })
-      )
+      })
     },
 
+
     storyCards() {
       if (!Array.isArray(this.stories)) return []
       return this.stories.map(s =>

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -3,7 +3,9 @@
     <div class="photostrip"></div>
 
     <section class="asd20-primary-header" aria-label="Primary message">
-      <p v-if="userGivenName && userGivenName !== ''" class="greeting">Hi, {{ userGivenName }}.</p>
+      <client-only>
+        <p v-if="userGivenName && userGivenName !== ''" class="greeting">Hi, {{ userGivenName }}.</p>
+      </client-only>
       <asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
       <div class="image-container">
         <img

package/src/components/organisms/Asd20SwiperFeed/index.vue

@@ -36,16 +36,29 @@
         </div>
       </template>
     </asd20-swiper>
-    <asd20-button
-      v-if="link && linkLabel && (cards.length >= 10 || cardType === 'Event')"
-      :label="linkLabel"
-      :link="link"
-      size="md"
-      horizontal
-      bordered
-      transparent
-      centered
-    />
+    <div class="feed-buttons">
+      <asd20-button
+        v-if="link && linkLabel && (cards.length >= 10 || cardType === 'Event')"
+        :label="linkLabel"
+        :link="link"
+        size="md"
+        horizontal
+        bordered
+        transparent
+        centered
+      />
+      <asd20-button
+        class="secondary-button"
+        v-if="hasProtectedContent"
+        label="Leadership Announcements"
+        link="/staff-announcements?category=Leadership"
+        size="md"
+        horizontal
+        bordered
+        transparent
+        centered
+      />
+    </div>
   </component>
 </template>
 
@@ -73,6 +86,7 @@ export default {
     linkLabel: { type: String, default: '' },
     tag: { type: String, default: 'div' },
     cardType: { type: String, default: '' },
+    hasProtectedContent: { type: Boolean, default: false },
   },
 
   computed: {
@@ -168,12 +182,31 @@ export default {
     width: 100%;
     z-index: 2;
   }
+  .feed-buttons {
+    display: flex;
+    flex-direction: column;
+  }
 
   .asd20-button {
     margin: 0 0 0 space(1);
     font-size: 0.875rem !important;
     z-index: 1;
   }
+  .secondary-button {
+    font-size: 0.875rem !important;
+    margin-top: space(0.5);
+  }
+}
+@media (min-width: 768px) {
+  .asd20-swiper-feed {
+    .feed-buttons {
+      flex-direction: row;
+      margin-left: space(1);
+    }
+    .secondary-button {
+      margin: 0 0 0 space(0.5);
+    }
+  }
 }
 
 @media (min-width: 1024px) {
@@ -190,10 +223,12 @@ export default {
       // margin-left: space(1);
       width: calc(100% - #{space(2)});
     }
-    &::v-deep .asd20-button {
-      margin-left: space(3);
+    .asd20-button {
       font-size: 1rem !important;
     }
+    .feed-buttons {
+      margin-left: space(3);
+    }
   }
 }
 </style>

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

@@ -102,37 +102,10 @@
               :taggable="false"
               :value="selectedCategories"
               :items="categoryOptions"
-              @input="$emit('update:selected-categories', $event)"
+              @input="onCategorySelect"
               :hideLabel="true"
               placeholder="Filter by Category"
             />
-            <!-- <asd20-multiselect-input
-              role="listbox"
-              aria-label="Choose a Category to Sort By"
-              aria-controls="joketypes"
-              aria-autocomplete="list"
-              aria-expanded="true"
-              aria-activedescendant=""
-              title="Choose a Category"
-              label="Categories"
-              :taggable="false"
-              :value="selectedCategories"
-              :items="categoryOptions"
-              @input="$emit('update:selected-categories', $event)"
-            />
-            <form>
-              <label for="multi-select">Choose a Category</label>
-              <select
-                v-model="selectedValue"
-                name="categories"
-                multiple
-                id="multi-select"
-                @input="$emit('update:selected-categories', $event)"
-              >
-                <option disabled>Choose options</option>
-                <option v-for="(catetory, index) in categoryOptions" :value="selectedCategories">{{selectedCategories}}</option>
-              </select>
-            </form> -->
           </div>
           <div v-if="cards.length < 1">
             <br />
@@ -361,6 +334,7 @@ export default {
       numberToShow: 25,
       counter: 1,
       counter2: 25,
+      currentCategory: null,
     }
   },
   computed: {
@@ -371,16 +345,11 @@ export default {
           reversed: false,
           time: '',
           image: '',
-          // pinned: false,
         })
       )
-      // .map(c => ({
-      //   ...c,
-      //   link: c.link.replace('/stories', '/announcements'),
-      // }))
     },
     categoryOptions() {
-      // get a unique array of categories with duplicates removed
+      // Return array of categories
       return [
         ...new Set(
           this.cards.reduce((a, c) => a.concat(c.categories || []), []).sort()
@@ -389,13 +358,62 @@ export default {
     },
   },
   watch: {
-    selectedCategories: function(newVal, oldVal) {
+    // Watch for selectedCategories changes
+    selectedCategories(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.reset()
+        this.reset() // Reset page data when categories change
+      }
+    },
+    categoryOptions(newOptions) {
+      // Ensure $route and $route.query are defined before accessing query.category
+      if (this.$route && this.$route.query) {
+        const categoryFromQuery = this.$route.query.category
+        if (categoryFromQuery && newOptions.length) {
+          this.setCategoryFromUrl(categoryFromQuery) // Set category from URL when options are ready
+        }
       }
     },
   },
   methods: {
+    setCategoryFromUrl(category) {
+      // Avoid re-processing if the category is already set
+      if (this.currentCategory !== category) {
+        const matchingCategory = this.categoryOptions.find(
+          opt => opt === category
+        )
+        if (matchingCategory) {
+          this.currentCategory = category // Update the current category
+          this.$emit('update:selected-categories', [
+            { name: matchingCategory, id: matchingCategory },
+          ])
+        }
+      }
+    },
+    onCategorySelect(selected) {
+      // Ensure $router and $route are defined before using them
+      if (this.$router && this.$route) {
+        if (selected.length > 0) {
+          const selectedCategory = selected[0].id
+
+          // Only update if the selection has changed
+          if (this.currentCategory !== selectedCategory) {
+            this.currentCategory = selectedCategory // Track the selected category
+            this.$emit('update:selected-categories', selected) // Update selected categories
+            this.$router.replace({
+              query: { ...this.$route.query, category: selectedCategory },
+            })
+          }
+        } else {
+          // Handle clearing the selection
+          this.currentCategory = null // Reset current category
+          this.$emit('update:selected-categories', []) // Clear selected categories
+
+          // Remove the 'category' parameter entirely from the URL
+          const { category, ...remainingQuery } = this.$route.query || {} // Ensure $route.query is defined
+          this.$router.replace({ query: remainingQuery }) // Update the URL without the category
+        }
+      }
+    },
     nextSet() {
       if (
         Math.ceil(this.counter2 / this.numberToShow) <

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

@@ -106,6 +106,7 @@
         :events="events"
         :events-feed-props="eventsFeedProps"
         @events-in-view="$emit('events-in-view')"
+        :organizationId="organization.id"
       ></asd20-feeds-section>
 
       <!-- <asd20-factoids-section