release 20210804 (#377)

* add auto-scroll button to river table on mobile

* move map table scroll indicator to bottom of map table

* create rapid image picker interface and modal workflow

* implement paging for image selector modal

* pass rapid image as already selected image to image selector modal

* add business logic for updating photo on rapids

* fixes two client-side issues. one formatting and the other with gauge priority when there is an old reading summary.

Co-authored-by: Nick Gottlieb <ngottlieb@gmail.com>
Co-authored-by: Matt Anger <matthew.anger@gmail.com>

src/app/global/components/image-selector-modal/image-selector-modal.vue

@@ -0,0 +1,170 @@
+<template>
+  <cv-modal
+    ref="modalWrapper"
+    size="medium"
+    @primary-click="_confirm()"
+    @modal-hidden="_cancel()"
+    @modal-shown="setModalOffset"
+  >
+    <template slot="title"> Select an Image </template>
+    <template slot="content">
+      <template v-if="loading">
+        <utility-block state="loading" class="mb-sm" />
+      </template>
+      <div v-else-if="media" class="flex-row bx--row">
+        <div
+          v-for="(image, index) in media"
+          :key="index"
+          :class="'flex-cell' + isSelectedClass(image)"
+          @click="selectImage(image)"
+        >
+          <div class="imagebox">
+            <img
+              :src="imageURI(image, 'thumb')"
+              :alt="image.subject || image.caption || image.poi_name"
+              class="image-thumbnail"
+            >
+          </div>
+          <div class="caption">
+            {{ image.subject || image.caption || image.poi_name }}
+          </div>
+        </div>
+      </div>
+      <div class="bx--row">
+        <div class="bx--col">
+          <table-pagination
+            v-if="pagination"
+            :number-of-items="pagination.total"
+            :page="pagination.currentPage"
+            :pagination="pagination"
+            @change="loadMedia"
+          />
+        </div>
+      </div>
+    </template>
+    <template slot="secondary-button"> Cancel </template>
+    <template slot="primary-button"> OK </template>
+  </cv-modal>
+</template>
+<script>
+import { shadowDomFixedHeightOffset, assetUrl } from "@/app/global/mixins";
+import { mapGetters, mapState } from "vuex";
+import UtilityBlock from "@/app/global/components/utility-block/utility-block";
+import TablePagination from "@/app/global/components/table-pagination/table-pagination";
+
+// modal open/close modelled on https://stackabuse.com/how-to-create-a-confirmation-dialogue-in-vue-js/
+export default {
+  name: "image-selector-modal",
+  components: {
+    TablePagination,
+    UtilityBlock,
+  },
+  mixins: [shadowDomFixedHeightOffset, assetUrl],
+  data: () => ({
+    resolvePromise: undefined,
+    rejectPromise: undefined,
+    selectedImage: null,
+  }),
+  computed: {
+    ...mapGetters({
+      media: "RiverGallery/media",
+    }),
+    ...mapState({
+      loading: (state) => state.RiverGallery.loading,
+      pagination: (state) => state.RiverGallery.pagination,
+    }),
+    reachId() {
+      return this.$route.params.id;
+    },
+  },
+  methods: {
+    show(opts) {
+      this.loadMedia();
+
+      this.$refs.modalWrapper.show();
+
+      if (opts.selectedImage) {
+        this.selectedImage = opts.selectedImage;
+      }
+
+      return new Promise((resolve, reject) => {
+        this.resolvePromise = resolve;
+        this.rejectPromise = reject;
+      });
+    },
+    loadMedia(opts) {
+      const data = {
+        reach_id: this.reachId,
+        per_page: opts ? opts.length : 10,
+        page: opts ? opts.page : 1,
+      };
+      this.$store.dispatch("RiverGallery/getProperty", data);
+    },
+    selectImage(image) {
+      this.selectedImage = image;
+    },
+    isSelectedClass(image) {
+      if (this.selectedImage && this.selectedImage.id === image.id) {
+        return " selected";
+      } else {
+        return "";
+      }
+    },
+    _confirm() {
+      // return selected image
+      this.resolvePromise(this.selectedImage);
+      this.$refs.modalWrapper.hide();
+    },
+    _cancel() {
+      this.resolvePromise(false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.line {
+  width: 100%;
+  margin: 20px;
+}
+.flex-cell {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  flex: 0 1 150px;
+  height: 100px;
+  text-align: center;
+  transition: 0.5s;
+}
+.image-thumbnail {
+  max-height: 60px;
+  max-width: 90%;
+}
+.flex-cell:hover,
+.flex-cell.selected {
+  background-color: gray;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: 0.2s;
+  .caption {
+    color: white;
+  }
+}
+.flex-row {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+.caption {
+  padding: 2px;
+  color: #757575;
+  font-size: 11px;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.imagebox {
+  word-wrap: break-word;
+}
+</style>

src/app/global/components/index.js

@@ -7,6 +7,7 @@ export { default as AwLogo } from './logo-library/aw-logo.vue'
 export { default as ConfirmDeleteModal } from './confirm-delete-modal/confirm-delete-modal.vue'
 export { default as EditModeToggle } from './edit-mode-toggle/edit-mode-toggle.vue'
 export { default as FeatureCard } from './feature-card/feature-card.vue'
+export { default as ImageSelectorModal } from './image-selector-modal/image-selector-modal.vue'
 export { default as PageBanner } from './page-banner/page-banner.vue'
 export { default as PageDescription } from './page-description/page-description.vue'
 export { default as PostUpdateModal } from './post-update-modal/post-update-modal'

src/app/global/components/user-avatar/user-avatar.vue

@@ -1,8 +1,8 @@
 <template>
   <div :class="[theme, 'user-avatar']">
-    <template v-if="imageURI">
+    <template v-if="avatarURI">
       <img
-        :src="imageURI"
+        :src="avatarURI"
         alt=""
       >
     </template>
@@ -15,7 +15,7 @@
 export default {
   name: 'user-avatar',
   props: {
-    imageURI: {
+    avatarURI: {
       type: String,
       required: false
     },

src/app/global/mixins/asset-url.js

@@ -17,6 +17,19 @@ export const assetUrl = {
 
     go(path) {
       this.goToLink(this.formatLinkUrl(path))
+    },
+
+    imageURI(image, size) {
+      const imageSizes = image.image.uri;
+      let desiredImage;
+      if (size === "thumb") {
+        desiredImage = imageSizes.thumb || imageSizes.medium || imageSizes.big;
+      } else if (size === "big") {
+        desiredImage = imageSizes.big || imageSizes.medium || imageSizes.thumb;
+      } else {
+        desiredImage = imageSizes.medium || imageSizes.big || imageSizes.thumb;
+      }
+      return this.assetUrl(desiredImage);
     }
 
   }

src/app/services/updateRapid.js

@@ -3,7 +3,7 @@ import http from "@/app/http"
 export async function updateRapid(data) {
   let rloc;
 
-  if (data.geom.coordinates.length) {
+  if (data.geom && data.geom.coordinates.length) {
     rloc = `${data.geom.coordinates[0]} ${data.geom.coordinates[1]}`;
   }
 
@@ -17,7 +17,24 @@ export async function updateRapid(data) {
                   description,
                   difficulty,
                   distance,
-                  character
+                  character,
+                  photo_id,
+                  photo {
+                    poi_name
+                    subject
+                    description
+                    author
+                    caption
+                    photo_date
+                    image {
+                      uri {
+                        thumb
+                        medium
+                        big
+                      }
+                    }
+                    id
+                  }
                 }
               }
             `,
@@ -29,7 +46,8 @@ export async function updateRapid(data) {
         description: data.description,
         difficulty: data.difficulty,
         distance: data.distance,
-        character: data.character
+        character: data.character,
+        photo_id: data.photo_id
       }
     }
   }).then(res => res.data)

src/app/views/river-detail/components/flow-tab/flow-tab.vue

@@ -21,7 +21,7 @@
 
             <div v-for="(delay,index) in delays" :key="`d${delay}`">
               <h4 v-if="index===0">Primary Reporting</h4>
-              <h4 v-else>Backup #{{index}}} if Primary doesn't update for {{ parseInt(delay / (60 * 60)).toFixed(1) }} hours </h4>
+              <h4 v-else>Backup #{{index}} if Primary doesn't update for {{ parseInt(delay / (60 * 60)).toFixed(1) }} hours </h4>
               <div v-for="gage in gagesWithGage.filter(x=>parseInt(x.delay_update)===parseInt(delay))"
                    :key="`${gage.gauge.id}-${gage.gauge_metric}`">
                 <gage-summary
@@ -201,8 +201,8 @@
 
       </template>
     </layout>
-    
-   
+
+
     <layout v-if="releaseView === 1" name="layout-full-width">
       <template #main>
         <releases-table @calendarView="calendarView"/>

src/app/views/river-detail/components/gallery-tab.vue

@@ -77,7 +77,6 @@ export default {
     ...mapState({
       loading: (state) => state.RiverGallery.loading,
       error: (state) => state.RiverGallery.error,
-      photos: (state) => state.RiverGallery.data?.data,
       pagination: (state) => state.RiverGallery.pagination,
       rapids: (state) => state.RiverRapids.data,
       user: (state) => state.User.data,

src/app/views/river-detail/components/image-gallery/image-gallery.vue

@@ -6,7 +6,10 @@
           <div
             v-for="(image, index) in images"
             :key="index"
-            class="bx--col-sm-12 bx--col-md-4 bx--col-lg-4 bx--col-max-4 mb-spacing-lg"
+            class="
+              bx--col-sm-12 bx--col-md-4 bx--col-lg-4 bx--col-max-4
+              mb-spacing-lg
+            "
           >
             <router-link :to="`gallery/${image.id}`">
               <img
@@ -170,6 +173,7 @@ import { mapState } from "vuex";
 import {
   shadowDomFixedHeightOffset,
   objectPermissionsHelpersMixin,
+  assetUrl,
 } from "@/app/global/mixins";
 import UtilityBlock from "@/app/global/components/utility-block/utility-block.vue";
 import { deletePhoto } from "@/app/services";
@@ -182,7 +186,7 @@ export default {
     UtilityBlock,
     MediaUploadModal: () => import("../media-upload-modal"),
   },
-  mixins: [shadowDomFixedHeightOffset, objectPermissionsHelpersMixin],
+  mixins: [shadowDomFixedHeightOffset, objectPermissionsHelpersMixin, assetUrl],
   props: {
     emptyStateText: {
       type: String,
@@ -296,18 +300,6 @@ export default {
       this.mediaUploadModalVisible = false;
       this.$emit("photoModified");
     },
-    imageURI(image, size) {
-      const imageSizes = image.image.uri;
-      let desiredImage;
-      if (size === "thumb") {
-        desiredImage = imageSizes.thumb || imageSizes.medium || imageSizes.big;
-      } else if (size === "big") {
-        desiredImage = imageSizes.big || imageSizes.medium || imageSizes.thumb;
-      } else {
-        desiredImage = imageSizes.medium || imageSizes.big || imageSizes.thumb;
-      }
-      return this.assetUrl(desiredImage);
-    },
     formatFileSize(image) {
       if (image.image.file_size) {
         return this.formatBytes(image.image.file_size);

src/app/views/river-detail/components/main-tab/components/beta-box/beta-box.vue

@@ -206,12 +206,26 @@ export default {
     reachId () {
       return this.$route.params.id
     },
+    gagesWithGage () {
+      return (this.gages?.filter(x => x.gauge) ?? []).sort((a, b) => {
+        //sort by primary over secondary
+            if (a.delay_update - b.delay_update) {
+              return a.delay_update - b.delay_update
+              // sort by updated last
+            } else {
+              return a.epoch - b.epoch;
+            }
+          }
+        )
+
+    },
+
     reachGage () {
 
       if (this.river && this.river.readingsummary && this.gages) {
         return this.gages.find(g => g.gauge.id.toString() === this.river.readingsummary.gauge_id.toString())
       }
-      return this.gages[0]
+      return this.gagesWithGage[0]
     }
   },
   methods: {

src/app/views/river-detail/components/main-tab/components/comments-section/components/comment.vue

@@ -3,7 +3,7 @@
     <div class="bx--row">
       <div class="bx--col-sm-12 bx--col-md-1">
         <user-avatar
-          :image-u-r-i="formatURI(comment.user.image.uri.big)"
+          :avatar-u-r-i="formatURI(comment.user.image.uri.big)"
           :username="comment.user.uname"
         />
       </div>

src/app/views/river-detail/components/main-tab/components/rapids-section/__tests__/rapids-section.spec.js

@@ -38,7 +38,7 @@ const options = {
     $sanitize: jest.fn(),
     $replaceText: jest.fn()
   },
-  stubs: ['rapid-item', 'rapid-map-editor']
+  stubs: ['rapid-item', 'rapid-map-editor', 'image-selector-modal']
 }
 describe('RapidsSection', () => {
   beforeEach(() => {