Merge pull request #369 from EOEPCA/dev

Update main

.eslintignore

@@ -0,0 +1,2 @@
+**/*.min.*
+static/stac-browser

.eslintrc.js

@@ -3,4 +3,7 @@ module.exports = {
   env: {
     jest: true,
   },
+  rules: {
+    "vue/multi-word-component-names": "off",
+  },
 };

.github/workflows/bump_and_deploy.yml

@@ -1,14 +1,17 @@
-name: Bump version and static deploy
+name: Bump version and Build and push Docker image to Docker Hub
 
 on:
   push:
     branches:
       - "dev"
 
 jobs:
-  bump-and-deploy:
+  bump-version:
     runs-on: ${{ matrix.os }}
 
+    outputs:
+      current-version: ${{ steps.version-bump.outputs.newTag }}
+
     strategy:
       matrix:
         os: [ubuntu-latest]
@@ -56,11 +59,21 @@ jobs:
           NEW_TAG: ${{ steps.version-bump.outputs.newTag }}
         run: echo "new tag $NEW_TAG"
 
-      - name: Generate ⚙️
-        run: ROUTER_BASE=/${{ github.event.repository.name }}/ BUILD_MODE=STATIC NODE_ENV=development npm run generate
+  push_to_registry:
+    name: Build and push Docker image to Docker Hub
+
+    runs-on: ubuntu-latest
+
+    needs: bump-version
 
-      - name: Deploy 🚀
-        uses: peaceiris/actions-gh-pages@v3
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Push to Docker Hub
+        uses: docker/build-push-action@v1
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          path: ./
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          repository: eoepca/open-science-catalog-frontend
+          tags: "${{ needs.bump-version.outputs.current-version }}-${{ github.head_ref || github.ref_name }}"

.prettierignore

@@ -1 +1,5 @@
-**/*.min.*
+**/*.min.*
+static/stac-browser
+.nuxt
+coverage
+.github

assets/variables.scss

@@ -28,6 +28,7 @@ $heading-font-family: "NotesESABold";
 .v-toolbar__title,
 .v-card__title,
 .v-tab,
-.v-chip {
+.v-chip,
+eox-itemfilter::part(details-filter) {
   font-family: $heading-font-family, sans-serif;
 }

components/Coverage.vue

@@ -25,9 +25,7 @@
         </v-icon>
         <span
           >{{
-            products.length === 1
-              ? products[0].properties.title
-              : variable && variable.name
+            products.length === 1 ? products[0].name : variable && variable.name
           }}
           Coverage</span
         >
@@ -47,31 +45,33 @@
                 <v-subheader class="px-0"> Products </v-subheader>
                 <v-divider />
                 <v-list-item
-                  v-for="product in products"
+                  v-for="product in [...products].sort((a, b) => {
+                    return a.name.localeCompare(b.name, 'en', {
+                      sensitivity: 'base',
+                    });
+                  })"
                   :key="product.id"
                   class="px-0"
                   style="cursor: pointer"
                   @mouseover="currentHighlight = product"
                   @mouseleave="currentHighlight = null"
                 >
                   <v-list-item-content>
-                    <v-list-item-title>{{
-                      product.properties.title
-                    }}</v-list-item-title>
+                    <v-list-item-title>{{ product.name }}</v-list-item-title>
                   </v-list-item-content>
                   <v-list-item-action class="flex-row">
                     <v-btn
                       v-if="variable"
                       icon
                       color="primary"
-                      :disabled="!product.geometry"
+                      :disabled="!product.coverage"
                     >
                       <v-icon>mdi-map-marker</v-icon>
                     </v-btn>
                     <v-btn
                       icon
                       color="primary"
-                      :to="`/products/${$extractSlug(product)}`"
+                      :to="`/products/${product.id}/collection`"
                       target="_blank"
                     >
                       <v-icon>mdi-open-in-new</v-icon>
@@ -82,19 +82,19 @@
               <template v-else-if="products[0]">
                 <div><strong>Name</strong></div>
                 <div class="mb-2">
-                  {{ products[0].properties.title }}
+                  {{ products[0].name }}
                 </div>
                 <div><strong>Region</strong></div>
                 <div class="mb-2">
-                  {{ products[0].properties["osc:region"] }}
+                  {{ products[0].region }}
                 </div>
                 <div><strong>Satellite missions</strong></div>
                 <div class="mb-2">
-                  {{ products[0].properties["osc:missions"].join(", ") }}
+                  {{ products[0].missions.join(", ") }}
                 </div>
                 <div><strong>BBOX</strong></div>
                 <div class="mb-2">
-                  {{ products[0].bbox }}
+                  {{ products[0].coverage }}
                 </div>
               </template>
             </v-col>
@@ -103,8 +103,10 @@
                 <CoverageMap
                   v-if="products"
                   ref="map"
-                  :features="products"
-                  :highlight="currentHighlight"
+                  :features="products.map((product) => createGeometry(product))"
+                  :highlight="
+                    currentHighlight ? createGeometry(currentHighlight) : null
+                  "
                 />
               </client-only>
             </v-col>
@@ -160,5 +162,26 @@ export default {
       }
     },
   },
+  methods: {
+    createGeometry(product) {
+      return {
+        ...product,
+        geometry: {
+          bbox: product.coverage[0],
+          coordinates: [
+            [
+              [product.coverage[0][0], product.coverage[0][1]],
+              [product.coverage[0][2], product.coverage[0][1]],
+              [product.coverage[0][2], product.coverage[0][3]],
+              [product.coverage[0][0], product.coverage[0][3]],
+              [product.coverage[0][0], product.coverage[0][1]],
+            ],
+          ],
+          type: "Polygon",
+        },
+        type: "Feature",
+      };
+    },
+  },
 };
 </script>

components/CoverageMap.vue

@@ -90,7 +90,6 @@ export default {
       if (this.map && feature && feature.geometry) {
         const highlightFeature = this.vectorSource.getFeatureById(feature.id);
         highlightFeature.setStyle(this.highlightStyle);
-        console.log(highlightFeature.getGeometry().getExtent());
         this.map.getView().fit(highlightFeature.getGeometry().getExtent(), {
           padding: this.defaultPadding,
           duration: 500,

components/EditButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="editButton">
     <v-speed-dial
       v-model="fab"
       fixed
@@ -14,7 +14,7 @@
           Suggest changes
         </v-btn>
       </template>
-      <v-btn
+      <!-- <v-btn
         v-if="true"
         dark
         rounded
@@ -44,14 +44,12 @@
       >
         <v-icon left> mdi-delete </v-icon>
         Request deletion
-      </v-btn>
+      </v-btn> -->
       <v-btn
         dark
         rounded
         color="black"
-        :href="`${$config.githubDataRoot}/${Object.keys($route.params)[0]}s/${
-          itemId || Object.values($route.params)[0]
-        }.json`"
+        :href="`${$config.githubDataRoot}${currentPath}.json`"
         target="_blank"
       >
         <v-icon left> mdi-github </v-icon>
@@ -91,7 +89,15 @@ export default {
     fab: false,
     deleteDialog: false,
     loading: false,
+    currentPath: null,
   }),
+  watch: {
+    fab(on) {
+      if (on) {
+        this.currentPath = window.location.pathname;
+      }
+    },
+  },
   methods: {
     async deleteItem() {
       this.loading = true;
@@ -112,4 +118,11 @@ export default {
 ::v-deep .v-speed-dial__list {
   align-items: flex-end;
 }
+.editButton {
+  position: relative;
+  float: right;
+  right: 10px;
+  bottom: 35px;
+  transition: 0.5s;
+}
 </style>

components/ItemGrid.vue

@@ -8,12 +8,13 @@
       md="4"
       lg="3"
     >
-      <v-card
+      <!-- <v-card
         :to="`/${getType(item)}s/${
           getType(item) === 'variable' ? slugify(item.name) : $extractSlug(item)
         }`"
         outlined
-      >
+      > -->
+      <v-card :to="`/${getType(item)}s/${item.id}/collection`" outlined>
         <v-card-title>
           <v-chip
             small
@@ -28,31 +29,28 @@
           <template v-if="getType(item) === 'project'">
             <div class="projectDate">
               <v-icon small> mdi-calendar-today </v-icon>
-              <small>{{ item.properties.start_datetime.split(" ")[0] }}</small>
+              <small>{{ item.start_datetime.split(" ")[0] }}</small>
               -
             </div>
             <div class="projectDate">
               <v-icon small> mdi-calendar </v-icon>
-              <small>{{ item.properties.end_datetime.split(" ")[0] }}</small>
+              <small>{{ item.end_datetime.split(" ")[0] }}</small>
             </div>
           </template>
         </v-card-title>
         <v-card-title class="text-subtitle-2 text-uppercase">
-          {{ getType(item) === "variable" ? item.name : item.properties.title }}
+          {{ getType(item) === "variable" ? item.name : item.title }}
         </v-card-title>
         <v-card-subtitle v-if="getType(item) === 'project'">
-          <span
-            v-for="consort in item.properties['osc:consortium']"
-            :key="consort"
-          >
+          <span v-for="consort in item['osc:consortium']" :key="consort">
             {{ consort }}
           </span>
         </v-card-subtitle>
         <v-card-text>
           <p v-if="getType(item) === 'project' || getType(item) === 'product'">
             {{
-              item.properties.description
-                ? `${item.properties.description.substring(0, 100)}...`
+              item.description
+                ? `${item.description.substring(0, 100)}...`
                 : "No description"
             }}
           </p>
@@ -75,12 +73,12 @@
           <div
             v-if="
               getType(item) === 'product' &&
-              item.properties.keywords.find((el) => el.includes('theme:'))
+              item.keywords.find((el) => el.includes('theme:'))
             "
             class="mt-2"
           >
             <v-chip
-              v-for="theme in item.properties.keywords.filter((el) =>
+              v-for="theme in item.keywords.filter((el) =>
                 el.includes('theme:')
               )"
               :key="theme"
@@ -129,15 +127,16 @@ export default {
   },
   methods: {
     getType(item) {
-      let type;
-      if (item.properties?.["osc:type"]) {
-        type = item.properties["osc:type"].toLowerCase();
-      } else if (item.properties?.type) {
-        type = item.properties.type === "dataset" ? "product" : "project";
-      } else {
-        type = "variable";
-      }
-      return type;
+      // let type;
+      // if (item.properties?.["osc:type"]) {
+      //   type = item.properties["osc:type"].toLowerCase();
+      // } else if (item.properties?.type) {
+      //   type = item.properties.type === "dataset" ? "product" : "project";
+      // } else {
+      //   type = "variable";
+      // }
+      // return type;
+      return item["osc:type"].toLowerCase();
     },
   },
 };