From 4c8ba7a8a590bcb783360782f13113c8ddc3190f Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji1998@icloud.com>
Date: Mon, 4 Apr 2022 22:39:20 -0500
Subject: [PATCH 1/6] chore: add template for venue object

---
 pages/venue/_id.vue | 80 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 pages/venue/_id.vue

diff --git a/pages/venue/_id.vue b/pages/venue/_id.vue
new file mode 100644
index 0000000..9bd63f8
--- /dev/null
+++ b/pages/venue/_id.vue
@@ -0,0 +1,80 @@
+<template>
+  <v-card>
+    <v-img
+      :src="card.src"
+      class="white--text align-end"
+      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+      height="200px"
+    >
+      <v-card-title>{{venue.title | titlecase}}</v-card-title>
+    </v-img>
+  </v-card>
+</template>
+
+<script>
+// type Venue = {
+//   type: 'conference' | 'journal' | 'magazine' | 'newspaper' | 'periodical' | 'event' | 'other',
+//   title: String,
+//   abbrev: String,
+//   url: String,
+//   description: String,
+//   location: String,
+//   year: Number,
+//   month: Number,
+//   start_day: Number,
+//   end_day: Number,
+//   publisher: String,
+//   publisher_location: String,
+//   publisher_url: String,
+//   isbn?: String,
+//   issn?: String,
+//   doi?: String,
+//   volume?: Number,
+//   issue?: Number,
+//   verified: Boolean,
+// }
+
+const venue = {
+  type: 'conference',
+  title: 'Example Conference',
+  abbrev: 'EC',
+  url: 'www.example.com',
+  description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quos incidunt numquam ab culpa optio alias, enim quidem fuga ex repellendus dolorum, dicta iure. Aspernatur doloremque laudantium nemo nihil officiis cum exercitationem temporibus iusto quis, dolore optio totam ipsum voluptatem?',
+  location: 'London, Britain',
+  year: 2022,
+  month: 1,
+  start_day: 1,
+  end_day: 3,
+  publisher: 'Example publisher',
+  publisher_location: 'Publisher location',
+  publisher_url: 'www.example.com/example-publisher',
+  isbn: 'NA',
+  issn: 'NA',
+  doi: 'NA',
+  volume: 3,
+  issue: 1,
+  verified: true
+}
+
+export default {
+  props: {
+    venueProp: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      venue
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.background {
+  height: 30vh;
+  color: grey;
+}
+</style>
\ No newline at end of file

From 5ad86c568e8171cf9ad949a0efbf05511f9ba947 Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji1998@icloud.com>
Date: Mon, 4 Apr 2022 23:28:29 -0500
Subject: [PATCH 2/6] feat: venue object page scaffolding

---
 pages/venue/_id.vue   |  80 ----------------------------
 pages/venue/index.vue | 120 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 80 deletions(-)
 delete mode 100644 pages/venue/_id.vue
 create mode 100644 pages/venue/index.vue

diff --git a/pages/venue/_id.vue b/pages/venue/_id.vue
deleted file mode 100644
index 9bd63f8..0000000
--- a/pages/venue/_id.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <v-card>
-    <v-img
-      :src="card.src"
-      class="white--text align-end"
-      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-      height="200px"
-    >
-      <v-card-title>{{venue.title | titlecase}}</v-card-title>
-    </v-img>
-  </v-card>
-</template>
-
-<script>
-// type Venue = {
-//   type: 'conference' | 'journal' | 'magazine' | 'newspaper' | 'periodical' | 'event' | 'other',
-//   title: String,
-//   abbrev: String,
-//   url: String,
-//   description: String,
-//   location: String,
-//   year: Number,
-//   month: Number,
-//   start_day: Number,
-//   end_day: Number,
-//   publisher: String,
-//   publisher_location: String,
-//   publisher_url: String,
-//   isbn?: String,
-//   issn?: String,
-//   doi?: String,
-//   volume?: Number,
-//   issue?: Number,
-//   verified: Boolean,
-// }
-
-const venue = {
-  type: 'conference',
-  title: 'Example Conference',
-  abbrev: 'EC',
-  url: 'www.example.com',
-  description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quos incidunt numquam ab culpa optio alias, enim quidem fuga ex repellendus dolorum, dicta iure. Aspernatur doloremque laudantium nemo nihil officiis cum exercitationem temporibus iusto quis, dolore optio totam ipsum voluptatem?',
-  location: 'London, Britain',
-  year: 2022,
-  month: 1,
-  start_day: 1,
-  end_day: 3,
-  publisher: 'Example publisher',
-  publisher_location: 'Publisher location',
-  publisher_url: 'www.example.com/example-publisher',
-  isbn: 'NA',
-  issn: 'NA',
-  doi: 'NA',
-  volume: 3,
-  issue: 1,
-  verified: true
-}
-
-export default {
-  props: {
-    venueProp: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      venue
-    }
-  }
-}
-</script>
-
-
-<style scoped>
-.background {
-  height: 30vh;
-  color: grey;
-}
-</style>
\ No newline at end of file
diff --git a/pages/venue/index.vue b/pages/venue/index.vue
new file mode 100644
index 0000000..bcf2b42
--- /dev/null
+++ b/pages/venue/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <v-card elevation="0" class="pb-8">
+      <v-img
+        class="white--text align-end"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        height="40vh"
+      >
+        <v-row>
+          <v-col cols="auto">
+            <v-img
+              class="white--text align-end mb-4 ml-4"
+              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              style="{ position: absolute; bottom: 0px; right: 0px }"
+              height="128px"
+              width="128px"
+            >
+            </v-img>
+          </v-col>
+          <v-col sm="9" md="5">
+            <v-card-title class="pl-0">
+              <v-badge content="Verified" color="secondary">
+                <a :href="venue.url" target="_blank" rel="noopener noreferrer">
+                  {{venue.title | titlecase}}({{venue.abbrev}})
+                </a>
+              </v-badge>
+            </v-card-title>
+            <v-card-subtitle class="pl-0 pb-2">
+              <span class="mr-4">
+                <v-icon color="white" small class="pb-1">mdi-map-marker-outline</v-icon>
+                <i>{{ venue.location }}</i>
+              </span>
+              <span class="mr-4">
+                <v-icon color="white" small class="pb-1">mdi-account-group</v-icon>
+                <a :href="venue.publisher_url" target="_blank">
+                  <i>{{ venue.publisher }}</i>
+                </a>
+              </span>
+            </v-card-subtitle>
+            <v-card-text class="pl-0">
+              {{ venue.description }}
+            </v-card-text>
+          </v-col>
+        </v-row>
+      </v-img>
+    </v-card>
+    <SearchCard/>
+  </div>
+</template>
+
+<script>
+// type Venue = {
+//   type: 'conference' | 'journal' | 'magazine' | 'newspaper' | 'periodical' | 'event' | 'other',
+//   title: String,
+//   abbrev: String,
+//   url: String,
+//   description: String,
+//   location: String,
+//   year: Number,
+//   month: Number,
+//   start_day: Number,
+//   end_day: Number,
+//   publisher: String,
+//   publisher_location: String,
+//   publisher_url: String,
+//   isbn?: String,
+//   issn?: String,
+//   doi?: String,
+//   volume?: Number,
+//   issue?: Number,
+//   verified: Boolean,
+// }
+
+const venue = {
+  type: 'conference',
+  title: 'Example conference',
+  abbrev: 'EC',
+  url: 'https://www.example.com',
+  description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quos incidunt numquam ab culpa optio alias.',
+  location: 'London',
+  year: 2022,
+  month: 1,
+  start_day: 1,
+  end_day: 3,
+  publisher: 'Example publisher',
+  publisher_location: 'Publisher location',
+  publisher_url: 'https://www.example.com/example-publisher',
+  isbn: 'NA',
+  issn: 'NA',
+  doi: 'NA',
+  volume: 3,
+  issue: 1,
+  verified: true
+}
+
+export default {
+  components: { 
+    SearchCard: () => import('~/components/SearchCard.vue')
+  },
+  // props: {
+  //   venueProp: {
+  //     type: Object,
+  //     required: true
+  //   }
+  // },
+  data() {
+    return {
+      venue
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+a {
+  text-decoration: none; 
+  color: white;
+}
+</style>
\ No newline at end of file

From ebab4a930ed28052282063f30d394c330e9591ee Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji@126.com>
Date: Tue, 21 Mar 2023 13:34:26 -0500
Subject: [PATCH 3/6] feat: add recurring venue pages & venue session page

---
 components/ArtifactChips.vue               |   6 +-
 components/RecurringVenueChip.vue          |  48 ++++++
 components/RecurringVenueList.vue          |  33 ++++
 components/RecurringVenueSearchCard.vue    | 180 +++++++++++++++++++++
 components/RecurringVenueShort.vue         |  93 +++++++++++
 layouts/default.vue                        |   7 +-
 pages/index.vue                            |   2 +-
 pages/recurringvenue/_id.vue               |  98 +++++++++++
 pages/{search.vue => search/artifacts.vue} |   2 +-
 pages/search/recurringvenues.vue           |  72 +++++++++
 plugins/repository.js                      |   6 +
 store/venues.js                            |  91 +++++++++++
 12 files changed, 632 insertions(+), 6 deletions(-)
 create mode 100644 components/RecurringVenueChip.vue
 create mode 100644 components/RecurringVenueList.vue
 create mode 100644 components/RecurringVenueSearchCard.vue
 create mode 100644 components/RecurringVenueShort.vue
 create mode 100644 pages/recurringvenue/_id.vue
 rename pages/{search.vue => search/artifacts.vue} (98%)
 create mode 100644 pages/search/recurringvenues.vue
 create mode 100644 store/venues.js

diff --git a/components/ArtifactChips.vue b/components/ArtifactChips.vue
index a98fe19..04de227 100644
--- a/components/ArtifactChips.vue
+++ b/components/ArtifactChips.vue
@@ -168,15 +168,15 @@ export default {
       if (this.link) {
         switch (this.type) {
           case 'keyword':
-            return '/search?keywords=' + item
+            return '/search/artifacts?keywords=' + item
           case 'role':
-            return '/search?author_keywords=' + item.affiliation.person.name
+            return '/search/artifacts?author_keywords=' + item.affiliation.person.name
           case 'relation':
             return '/artifact/' + item.related_artifact_group_id
           case 'reverse-relation':
             return '/artifact/' + item.artifact_group_id
           case 'venue':
-            return '/search?venue_ids=' + item.id
+            return '/search/artifacts?venue_ids=' + item.id
         }
       }
       return null
diff --git a/components/RecurringVenueChip.vue b/components/RecurringVenueChip.vue
new file mode 100644
index 0000000..9bb535d
--- /dev/null
+++ b/components/RecurringVenueChip.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-chip
+    cols="12"
+    class="ma-2"
+    label
+    color="green white--text"
+    :to="whereTo(item)"
+  >
+    <v-avatar left>
+      <v-icon>{{ venueIcon(item.type) }}</v-icon>
+    </v-avatar>
+    <div>{{ item.type }}</div>
+  </v-chip>
+</template>
+
+<script>
+import { venueIcon } from '@/helpers'
+
+export default {
+  components: {},
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  methods: {
+    venueIcon,
+    whereTo(item) {
+      // if (this.link) {
+      //   switch (this.type) {
+      //     case 'keyword':
+      //       return '/search?keywords=' + item
+      //     case 'role':
+      //       return '/search?author_keywords=' + item.affiliation.person.name
+      //     case 'relation':
+      //       return '/artifact/' + item.related_artifact_group_id
+      //     case 'reverse-relation':
+      //       return '/artifact/' + item.artifact_group_id
+      //     case 'venue':
+      //       return '/search?venue_ids=' + item.id
+      //   }
+      // }
+      return null
+    }
+  },
+}
+</script>
diff --git a/components/RecurringVenueList.vue b/components/RecurringVenueList.vue
new file mode 100644
index 0000000..bd5e505
--- /dev/null
+++ b/components/RecurringVenueList.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <v-container>
+      <v-row v-for="venue in recurringVenues" :key="venue.id">
+        <v-col>
+          <LazyHydrate when-visible>
+            <RecurringVenueShort
+              :recurringVenue="venue"
+            ></RecurringVenueShort>
+          </LazyHydrate>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    RecurringVenueShort: () => import('@/components/RecurringVenueShort'),
+    LazyHydrate: () => import('vue-lazy-hydration')
+  },
+  props: {
+    recurringVenues: {
+      type: Array,
+      required: true
+    },
+  },
+  data() {
+    return {}
+  }
+}
+</script>
diff --git a/components/RecurringVenueSearchCard.vue b/components/RecurringVenueSearchCard.vue
new file mode 100644
index 0000000..24faa0c
--- /dev/null
+++ b/components/RecurringVenueSearchCard.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <RecurringVenueList
+      :recurringVenues="recurringVenues"
+      :limit="limit"
+    ></RecurringVenueList>
+    <v-btn
+      v-if="showScrollToTop != 0"
+      class="secondary"
+      id="scrollbtn"
+      @click="scrollToTop()"
+      elevation="10"
+      ><v-icon large color="lightblue">mdi-chevron-up</v-icon></v-btn
+    >
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import goTo from 'vuetify/es5/services/goto'
+
+const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
+
+export default {
+  components: {
+    Logo: () => import("@/components/Logo"),
+    RecurringVenueList: () => import("@/components/RecurringVenueList"),
+  },
+  head() {
+    return {
+      title: 'SEARCCH Venue Search',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'SEARCCH Hub Venue Search Results'
+        }
+      ]
+    }
+  },
+  data() {
+    return {
+      // limit: 10,
+      // page: 1,
+      // search: '',
+      // searchMessage: '',
+      // searchInterval: null,
+      // submitted: false,
+      // adopen: 1,
+      // advanced: {
+      //   types: [ 'conference', 'journal', 'magazine', 'newspaper', 'periodical', 'event', 'other' ],
+      //   venue_ids: [],
+      // },
+      // types: [ 'conference', 'journal', 'magazine', 'newspaper', 'periodical', 'event', 'other' ],
+      showScrollToTop: 0
+    }
+  },
+  beforeMount() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  mounted() {
+    if (this.$route.query.keywords) {
+      this.search = this.$route.query.keywords
+      console.log('keywords: ', this.search)
+      this.onSubmit()
+    } else {
+      this.search = this.search_init
+      this.advanced = deepClone(this.search_advanced_init)
+      this.adopen = +(!this.search_advanced_isopen)
+    }
+    this.$store.dispatch('user/fetchBadges')
+    this.$store.dispatch('user/fetchVenues')
+  },
+  computed: {
+    ...mapState({
+      recurringVenues: state => state.venues.recurringVenues.recurring_venue,
+      // pages: state => state.venues.recurringVenues.pages,
+      // total: state => state.venues.recurringVenues.total,
+      search_init: state => state.venues.search,
+      search_advanced_init: state => state.venues.search_advanced,
+      search_advanced_isopen: state => state.venues.search_advanced_isopen,
+      searchLoading: state => state.venues.loading,
+    }),
+    allRecurringVenues() {
+      return this.advanced.types.length === this.types.length
+    },
+    someRecurringVenues() {
+      return this.advanced.types.length > 0 && !this.allArtifacts
+    },
+    recurringVenueTypeIcon() {
+      if (this.allRecurringVenues) return 'mdi-close-box'
+      if (this.someRecurringVenues) return 'mdi-minus-box'
+      return 'mdi-checkbox-blank-outline'
+    },
+  },
+  methods: {
+    async onSubmit() {
+      this.submitted = true
+      if (this.searchInterval != null) clearTimeout(this.searchInterval)
+      this.searchMessage = 'Searching...'
+      this.$store.commit('venues/RESET_RECURRING_VENUES') // clear artifacts so the Searching... message is shown
+      debugger
+      let payload = {
+        keywords: this.search,
+        // page: this.page,
+        // items_per_page: this.limit,
+        type: this.advanced.types
+      }
+      this.$store.dispatch('venues/fetchRecurringVenues', { payload, advanced: this.advanced })
+      this.searchInterval = setTimeout(() => {
+        if (!this.searchLoading) {
+          this.searchMessage = 'No results found'
+        }
+      }, 3000)
+      this.submitted = false
+    },
+    onChange() {
+      this.searchMessage = ''
+    },
+    toggle() {
+      this.$nextTick(() => {
+        if (this.allRecurringVenues) {
+          this.advanced.types = []
+        } else {
+          this.advanced.types = this.types.slice()
+        }
+      })
+    },
+    scrollToTop() {
+      goTo(0)
+    },
+    handleScroll() {
+      this.showScrollToTop = window.scrollY
+    },
+    showOptions(val){
+        if (val != "None"){
+          this.sortEnabled = true
+          this.advanced.sort_criteria = val
+        }
+        else{
+          this.sortEnabled = false
+        }
+    },
+  },
+  watch: {
+    page() {
+      this.onSubmit()
+    },
+    searchLoading(val) {
+      if (val) {
+        this.searchMessage = 'Searching...'
+      } else if (this.search !== '') {
+        if (this.searchInterval != null) clearTimeout(this.searchInterval)
+        this.searchMessage = 'No results found'
+      } else {
+        this.searchMessage = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.v-application--is-ltr .v-input__prepend-outer {
+  margin-right: 0px;
+}
+.v-text-field--outlined .v-input__prepend-outer,
+.v-text-field--outlined .v-input__append-outer {
+  margin-top: 4px;
+}
+#scrollbtn {
+  position: fixed;
+  bottom: 50px;
+  right: 0px;
+  scroll-margin-bottom: 5rem;
+}
+</style>
diff --git a/components/RecurringVenueShort.vue b/components/RecurringVenueShort.vue
new file mode 100644
index 0000000..3f37afb
--- /dev/null
+++ b/components/RecurringVenueShort.vue
@@ -0,0 +1,93 @@
+<template>
+  <!-- <div> -->
+    <!-- <v-container> -->
+      <v-card>
+        <!-- <v-row no-gutters class="recurring-venue-container"> -->
+          <!-- <v-col cols="10"> -->
+            <v-card-title class="align-start">
+              <span class="headline">{{ recurringVenue.title | titlecase }}</span>
+            </v-card-title>
+            <v-card-text v-html="sanitizedDescription"> </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" @click="onRelatedArtifactsClicked">
+                Related Artifacts
+              </v-btn>
+            </v-card-actions>
+          <!-- </v-col>
+          <v-col cols="2" class="recurrence-container">
+            <v-list density="compact" class="list">
+              <v-list-item v-for="item in recurringVenue.recurrences" :key="item.title" :value="item">
+                <v-list-item-title>{{ item.abbrev }}</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-col> -->
+        <!-- </v-row> -->
+      </v-card>
+    <!-- </v-container>
+  </div> -->
+</template>
+
+<script>
+import clip from 'text-clipper'
+
+export default {
+  props: {
+    recurringVenue: {
+      type: Object,
+      required: true
+    },
+  },
+  components: {
+    RecurringVenueChip: () => import("@/components/RecurringVenueChip"),
+  },
+  computed: {
+    sanitizedDescription: function () {
+      let description = ''
+      description = this.recurringVenue.description
+      return clip(this.$sanitize(description), 2000, {
+        html: true,
+        maxLines: 40
+      })
+    }
+  },
+  methods: {
+    onRelatedArtifactsClicked() {
+      this.$store.commit('venues/SET_RECURRENCE_ID', this.recurringVenue.recurrences[0].id)
+      this.$router.push('/recurringvenue/' + this.recurringVenue.id)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.card-chip {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+.v-card__title {
+  word-break: normal;
+}
+
+.headline {
+  align-self: center;
+}
+
+.recurring-venue-container {
+  overflow: auto;
+}
+
+.recurrence-container {
+  border-left: 1px solid #e0e0e0;
+  background-color: #fafafa;
+}
+
+.recurrence-container .list {
+  margin-left: 10px;
+  background-color: transparent;
+  max-height: 100%;
+  overflow: scroll;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index e51f380..11ccae0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -188,7 +188,12 @@ export default {
         {
           icon: 'mdi-cloud-search',
           title: 'Search Artifacts',
-          to: '/search'
+          to: '/search/artifacts'
+        },
+        {
+          icon: 'mdi-cloud-search',
+          title: 'Artifact Venues',
+          to: '/search/recurringvenues'
         }
       ]
       if (this.$auth.loggedIn) {
diff --git a/pages/index.vue b/pages/index.vue
index e412a87..aa0dbbe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -72,7 +72,7 @@
             </v-card-text>
             <v-card-actions>
               <v-spacer />
-              <v-btn color="primary" nuxt to="/search">
+              <v-btn color="primary" nuxt to="/search/artifacts">
                 Continue
               </v-btn>
             </v-card-actions> </v-card
diff --git a/pages/recurringvenue/_id.vue b/pages/recurringvenue/_id.vue
new file mode 100644
index 0000000..dea19f1
--- /dev/null
+++ b/pages/recurringvenue/_id.vue
@@ -0,0 +1,98 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" class="mx-2">
+        <a @click="$router.go(-1)">Back</a>
+        <br>
+        <h2>
+          {{ venue.title }}
+          <a :href="venue.url" style="text-decoration: none;">
+            <v-icon>mdi-link-variant</v-icon>
+          </a>
+        </h2>
+      </v-col>
+      <v-col cols="12">
+        <v-container>
+          <v-row>
+            <v-col cols="9">
+              <div v-if="artifactsLoading">Loading...</div>
+              <ArtifactList v-else-if="artifacts.length" 
+                :artifacts="artifacts"
+              />
+              <div v-else class="no-artifact-container">
+                <h1 class="text-grey">Oops...</h1>
+                No published artifacts for this venue session yet... : (
+              </div>
+            </v-col>
+            <v-col cols="3">
+              <div class="text-caption text-grey">
+                <br><b>Description</b>: {{ venue.description }}
+                <v-divider></v-divider>
+                <br><b>Publisher Url</b>: {{ venue.publisher_url || 'N/A' }}
+                <v-divider></v-divider>
+              </div>
+
+              <v-radio-group :value="currentRecurrenceId" density="compact">
+                <v-radio 
+                  v-for="recurrence in venue.recurrences" 
+                  :key="recurrence.id"
+                  :value="recurrence.id"
+                  :label="recurrence.abbrev"
+                  @change="onRecurrenceSelected(recurrence.id)">
+                </v-radio>
+              </v-radio-group>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  components: {
+    ArtifactList: () => import('@/components/ArtifactList')
+  },
+  async mounted() {
+    let response = await this.$recurringVenueEndpoint.show(this.$route.params.id)
+    this.$store.commit('venues/SET_CURRENT_VENUE', response)
+    console.log(this.$store.state.venues)
+    if (this.currentRecurrenceId !== undefined) {
+      this.$store.dispatch('venues/fetchArtifacts', {
+        venue_id: this.currentRecurrenceId
+      })
+    }
+  },
+  computed: {
+    ...mapState({
+      artifacts: state => state.venues.artifacts.artifacts,
+      venue: state => state.venues.currentVenue,
+      currentRecurrenceId: state => state.venues.recurrenceId,
+      loading: state => state.venues.loading,
+      artifactsLoading: state => state.venues.artifactsLoading
+    })
+  },
+  methods: {
+    onRecurrenceSelected(recurrenceId) {
+      this.$store.commit('venues/SET_RECURRENCE_ID', recurrenceId)
+      this.$store.dispatch('venues/fetchArtifacts', {
+        venue_id: recurrenceId
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.no-artifact-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/pages/search.vue b/pages/search/artifacts.vue
similarity index 98%
rename from pages/search.vue
rename to pages/search/artifacts.vue
index f92dffd..c38f3bf 100644
--- a/pages/search.vue
+++ b/pages/search/artifacts.vue
@@ -4,7 +4,7 @@
       <logo />
     </div>
     <h1>
-      Search
+      Search Artifacts
       <v-dialog transition="dialog-bottom-transition" max-width="600">
         <template v-slot:activator="{ on, attrs }">
           <v-btn class="primary ml-4" fab small v-bind="attrs" v-on="on"
diff --git a/pages/search/recurringvenues.vue b/pages/search/recurringvenues.vue
new file mode 100644
index 0000000..05bf06f
--- /dev/null
+++ b/pages/search/recurringvenues.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="loading">Loading...</div>
+  <div v-else>
+    <RecurringVenueList
+      :recurringVenues="recurringVenues"
+    ></RecurringVenueList>
+    <v-btn
+      v-if="showScrollToTop != 0"
+      class="secondary"
+      id="scrollbtn"
+      @click="scrollToTop()"
+      elevation="10"
+      ><v-icon large color="lightblue">mdi-chevron-up</v-icon></v-btn
+    >
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import goTo from 'vuetify/es5/services/goto'
+
+export default {
+  components: {
+    RecurringVenueList: () => import("@/components/RecurringVenueList"),
+},
+  head() {
+    return {
+      title: 'SEARCCH Recurring Venues Search',
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'SEARCCH Hub Recurring Venues Search Results'
+        }
+      ]
+    }
+  },
+  beforeMount() {
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  mounted() {
+    this.$store.dispatch('venues/fetchRecurringVenues')
+  },
+  computed: {
+    ...mapState({
+      recurringVenues: state => state.venues.recurringVenues.recurring_venues,
+      loading: state => state.venues.recurringVenues.loading,
+    }),
+    recurringVenueTypeIcon() {
+      if (this.allRecurringVenues) return 'mdi-close-box'
+      if (this.someRecurringVenues) return 'mdi-minus-box'
+      return 'mdi-checkbox-blank-outline'
+    },
+  },
+  data() {
+    return {
+      showScrollToTop: 0
+    }
+  },
+  methods: {
+    scrollToTop() {
+      goTo(0)
+    },
+    handleScroll() {
+      this.showScrollToTop = window.scrollY
+    },
+  },
+}
+</script>
diff --git a/plugins/repository.js b/plugins/repository.js
index df9c82f..a7e1cdb 100644
--- a/plugins/repository.js
+++ b/plugins/repository.js
@@ -63,6 +63,12 @@ export default (ctx, inject) => {
   // venues
   inject('venuesEndpoint', repositoryWithAxios('kg/' + 'venues'))
 
+  // Recurring Venues
+  inject('recurringVenuesEndpoint', repositoryWithAxios('kg/' + 'recurringvenues'))
+
+  // Recurring Venue
+  inject('recurringVenueEndpoint', repositoryWithAxios('kg/' + 'recurringvenue'))
+
   // licenses
   inject('licenseEndpoint', repositoryWithAxios('kg/' + 'licenses'))
 
diff --git a/store/venues.js b/store/venues.js
new file mode 100644
index 0000000..279dcd4
--- /dev/null
+++ b/store/venues.js
@@ -0,0 +1,91 @@
+export const state = () => ({
+  recurringVenues: {
+    recurring_venues: [],
+  },
+  currentVenue: {},
+  artifacts: {
+    artifacts: [],
+    pages: 0,
+    total: 0
+  },
+  recurrenceId: null,
+  loading: false,
+  artifactsLoading: false
+})
+
+export const getters = {
+  recurringVenues: state => {
+    return state.recurringVenues
+  },
+  currentVenue: state => {
+    return state.currentVenue
+  },
+  loading: state => {
+    return state.loading
+  },
+  artifactsLoading: state => {
+    return state.artifactsLoading
+  },
+  artifacts: state => {
+    return state.artifacts
+  },
+  recurrenceId: state => {
+    return state.recurrenceId
+  }
+}
+
+export const mutations = {
+  SET_RECURRING_VENUES(state, recurringVenues) {
+    state.recurringVenues = recurringVenues
+  },
+  RESET_RECURRING_VENUES(state) {
+    state.recurringVenues = {
+      recurring_venues: [],
+    }
+  },
+  SET_LOADING(state, loading) {
+    state.loading = loading
+  },
+  SET_ARTIFACTS_LOADING(state, loading) {
+    state.artifactsLoading = loading
+  },
+  SET_ARTIFACTS(state, artifacts) {
+    state.artifacts = artifacts
+  },
+  RESET_ARTIFACTS(state) {
+    state.artifacts = {
+      artifacts: [],
+      pages: 0,
+      total: 0
+    }
+  },
+  SET_RECURRENCE_ID(state, recurrenceId) {
+    state.recurrenceId = recurrenceId
+  },
+  SET_CURRENT_VENUE(state, currentVenue) {
+    state.currentVenue = currentVenue
+  }
+}
+
+export const actions = {
+  async fetchRecurringVenues({ commit, state }) {
+    commit('SET_LOADING', true)
+    let payload = {
+      all_recurring_venues: true,
+      verified: true,
+    }
+    let response = await this.$recurringVenuesEndpoint.index(payload)
+    if (typeof response !== 'undefined') {
+      commit('SET_RECURRING_VENUES', response)
+    }
+    commit('SET_LOADING', false)
+  },
+  async fetchArtifacts({ commit, state }, payload) {
+    commit('SET_ARTIFACTS_LOADING', true)
+    let response = await this.$artifactSearchEndpoint.index(payload)
+    if (typeof response !== 'undefined') {
+      commit('SET_ARTIFACTS', response)
+    }
+    commit('SET_ARTIFACTS_LOADING', false)
+  },
+}

From 06a0f65b8e9c965b41bac0c192354cfd8ee85bf8 Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji@126.com>
Date: Tue, 21 Mar 2023 13:37:18 -0500
Subject: [PATCH 4/6] fix: remove unnecessary file

---
 pages/venue/index.vue | 120 ------------------------------------------
 1 file changed, 120 deletions(-)
 delete mode 100644 pages/venue/index.vue

diff --git a/pages/venue/index.vue b/pages/venue/index.vue
deleted file mode 100644
index bcf2b42..0000000
--- a/pages/venue/index.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div>
-    <v-card elevation="0" class="pb-8">
-      <v-img
-        class="white--text align-end"
-        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-        height="40vh"
-      >
-        <v-row>
-          <v-col cols="auto">
-            <v-img
-              class="white--text align-end mb-4 ml-4"
-              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-              style="{ position: absolute; bottom: 0px; right: 0px }"
-              height="128px"
-              width="128px"
-            >
-            </v-img>
-          </v-col>
-          <v-col sm="9" md="5">
-            <v-card-title class="pl-0">
-              <v-badge content="Verified" color="secondary">
-                <a :href="venue.url" target="_blank" rel="noopener noreferrer">
-                  {{venue.title | titlecase}}({{venue.abbrev}})
-                </a>
-              </v-badge>
-            </v-card-title>
-            <v-card-subtitle class="pl-0 pb-2">
-              <span class="mr-4">
-                <v-icon color="white" small class="pb-1">mdi-map-marker-outline</v-icon>
-                <i>{{ venue.location }}</i>
-              </span>
-              <span class="mr-4">
-                <v-icon color="white" small class="pb-1">mdi-account-group</v-icon>
-                <a :href="venue.publisher_url" target="_blank">
-                  <i>{{ venue.publisher }}</i>
-                </a>
-              </span>
-            </v-card-subtitle>
-            <v-card-text class="pl-0">
-              {{ venue.description }}
-            </v-card-text>
-          </v-col>
-        </v-row>
-      </v-img>
-    </v-card>
-    <SearchCard/>
-  </div>
-</template>
-
-<script>
-// type Venue = {
-//   type: 'conference' | 'journal' | 'magazine' | 'newspaper' | 'periodical' | 'event' | 'other',
-//   title: String,
-//   abbrev: String,
-//   url: String,
-//   description: String,
-//   location: String,
-//   year: Number,
-//   month: Number,
-//   start_day: Number,
-//   end_day: Number,
-//   publisher: String,
-//   publisher_location: String,
-//   publisher_url: String,
-//   isbn?: String,
-//   issn?: String,
-//   doi?: String,
-//   volume?: Number,
-//   issue?: Number,
-//   verified: Boolean,
-// }
-
-const venue = {
-  type: 'conference',
-  title: 'Example conference',
-  abbrev: 'EC',
-  url: 'https://www.example.com',
-  description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit quos incidunt numquam ab culpa optio alias.',
-  location: 'London',
-  year: 2022,
-  month: 1,
-  start_day: 1,
-  end_day: 3,
-  publisher: 'Example publisher',
-  publisher_location: 'Publisher location',
-  publisher_url: 'https://www.example.com/example-publisher',
-  isbn: 'NA',
-  issn: 'NA',
-  doi: 'NA',
-  volume: 3,
-  issue: 1,
-  verified: true
-}
-
-export default {
-  components: { 
-    SearchCard: () => import('~/components/SearchCard.vue')
-  },
-  // props: {
-  //   venueProp: {
-  //     type: Object,
-  //     required: true
-  //   }
-  // },
-  data() {
-    return {
-      venue
-    }
-  }
-}
-</script>
-
-
-<style scoped>
-a {
-  text-decoration: none; 
-  color: white;
-}
-</style>
\ No newline at end of file

From 03155c5abdcc5df2172b124d86a3702a9a9c91e6 Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji@126.com>
Date: Thu, 23 Mar 2023 13:05:28 -0500
Subject: [PATCH 5/6] fix: revert url path change

---
 components/ArtifactChips.vue                     | 6 +++---
 components/RecurringVenueShort.vue               | 2 +-
 components/SearchCard.vue                        | 1 -
 layouts/default.vue                              | 4 ++--
 pages/index.vue                                  | 2 +-
 pages/{search/artifacts.vue => search.vue}       | 0
 pages/{recurringvenue => venue}/_id.vue          | 0
 pages/{search/recurringvenues.vue => venues.vue} | 0
 8 files changed, 7 insertions(+), 8 deletions(-)
 rename pages/{search/artifacts.vue => search.vue} (100%)
 rename pages/{recurringvenue => venue}/_id.vue (100%)
 rename pages/{search/recurringvenues.vue => venues.vue} (100%)

diff --git a/components/ArtifactChips.vue b/components/ArtifactChips.vue
index 04de227..a98fe19 100644
--- a/components/ArtifactChips.vue
+++ b/components/ArtifactChips.vue
@@ -168,15 +168,15 @@ export default {
       if (this.link) {
         switch (this.type) {
           case 'keyword':
-            return '/search/artifacts?keywords=' + item
+            return '/search?keywords=' + item
           case 'role':
-            return '/search/artifacts?author_keywords=' + item.affiliation.person.name
+            return '/search?author_keywords=' + item.affiliation.person.name
           case 'relation':
             return '/artifact/' + item.related_artifact_group_id
           case 'reverse-relation':
             return '/artifact/' + item.artifact_group_id
           case 'venue':
-            return '/search/artifacts?venue_ids=' + item.id
+            return '/search?venue_ids=' + item.id
         }
       }
       return null
diff --git a/components/RecurringVenueShort.vue b/components/RecurringVenueShort.vue
index 3f37afb..b29d858 100644
--- a/components/RecurringVenueShort.vue
+++ b/components/RecurringVenueShort.vue
@@ -54,7 +54,7 @@ export default {
   methods: {
     onRelatedArtifactsClicked() {
       this.$store.commit('venues/SET_RECURRENCE_ID', this.recurringVenue.recurrences[0].id)
-      this.$router.push('/recurringvenue/' + this.recurringVenue.id)
+      this.$router.push('/venue/' + this.recurringVenue.id)
     },
   }
 }
diff --git a/components/SearchCard.vue b/components/SearchCard.vue
index 676b912..3d593dc 100644
--- a/components/SearchCard.vue
+++ b/components/SearchCard.vue
@@ -233,7 +233,6 @@
 <script>
 import { mapState } from 'vuex'
 import goTo from 'vuetify/es5/services/goto'
-import { getCookie } from '~/helpers'
 
 const deepClone = (obj) => JSON.parse(JSON.stringify(obj))
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 11ccae0..b1623c6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -188,12 +188,12 @@ export default {
         {
           icon: 'mdi-cloud-search',
           title: 'Search Artifacts',
-          to: '/search/artifacts'
+          to: '/search'
         },
         {
           icon: 'mdi-cloud-search',
           title: 'Artifact Venues',
-          to: '/search/recurringvenues'
+          to: '/venues'
         }
       ]
       if (this.$auth.loggedIn) {
diff --git a/pages/index.vue b/pages/index.vue
index aa0dbbe..e412a87 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -72,7 +72,7 @@
             </v-card-text>
             <v-card-actions>
               <v-spacer />
-              <v-btn color="primary" nuxt to="/search/artifacts">
+              <v-btn color="primary" nuxt to="/search">
                 Continue
               </v-btn>
             </v-card-actions> </v-card
diff --git a/pages/search/artifacts.vue b/pages/search.vue
similarity index 100%
rename from pages/search/artifacts.vue
rename to pages/search.vue
diff --git a/pages/recurringvenue/_id.vue b/pages/venue/_id.vue
similarity index 100%
rename from pages/recurringvenue/_id.vue
rename to pages/venue/_id.vue
diff --git a/pages/search/recurringvenues.vue b/pages/venues.vue
similarity index 100%
rename from pages/search/recurringvenues.vue
rename to pages/venues.vue

From 674dcf59d1233d998e1864a55026fca605404e66 Mon Sep 17 00:00:00 2001
From: Bingji Guo <guobingji@126.com>
Date: Thu, 23 Mar 2023 17:04:07 -0500
Subject: [PATCH 6/6] feat: add pagination

---
 pages/venue/_id.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/pages/venue/_id.vue b/pages/venue/_id.vue
index dea19f1..b93a605 100644
--- a/pages/venue/_id.vue
+++ b/pages/venue/_id.vue
@@ -16,9 +16,14 @@
           <v-row>
             <v-col cols="9">
               <div v-if="artifactsLoading">Loading...</div>
-              <ArtifactList v-else-if="artifacts.length" 
-                :artifacts="artifacts"
-              />
+              <ArtifactList v-else-if="artifacts.length" :artifacts="artifacts"/>
+              <!-- pagination -->
+              <v-pagination
+                v-if="artifacts"
+                v-model="page"
+                :length="pages"
+                circle
+              ></v-pagination>
               <div v-else class="no-artifact-container">
                 <h1 class="text-grey">Oops...</h1>
                 No published artifacts for this venue session yet... : (
@@ -30,9 +35,11 @@
                 <v-divider></v-divider>
                 <br><b>Publisher Url</b>: {{ venue.publisher_url || 'N/A' }}
                 <v-divider></v-divider>
+                <br><b>Recurrence</b>
+                <v-divider></v-divider>
               </div>
 
-              <v-radio-group :value="currentRecurrenceId" density="compact">
+              <v-radio-group :value="currentRecurrenceId" class="mt-0">
                 <v-radio 
                   v-for="recurrence in venue.recurrences" 
                   :key="recurrence.id"
@@ -66,9 +73,16 @@ export default {
       })
     }
   },
+  data() {
+    return {
+      page: 1
+    }
+  },
   computed: {
     ...mapState({
       artifacts: state => state.venues.artifacts.artifacts,
+      pages: state => state.venues.artifacts.pages,
+      total: state => state.venues.artifacts.total,
       venue: state => state.venues.currentVenue,
       currentRecurrenceId: state => state.venues.recurrenceId,
       loading: state => state.venues.loading,
@@ -82,6 +96,14 @@ export default {
         venue_id: recurrenceId
       })
     }
+  },
+  watch: {
+    page() {
+      this.$store.dispatch('venues/fetchArtifacts', {
+        venue_id: this.currentRecurrenceId,
+        page: this.page
+      })
+    }
   }
 }
 </script>