Feat/describe feature type

packages/demo-app/package.json

@@ -6,12 +6,11 @@
     "@deltares/utilities": "^0.5.0",
     "@deltares/vue-components": "^0.5.0",
     "@deltares/vuetify-theme": "^0.5.0",
-    "@vue/composition-api": "1.0.0-beta.18",
     "core-js": "^3.6.5",
     "mapbox-gl": "^1.11.1",
     "sortablejs": "1.12.0",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
+    "vue": "^2.7.14",
+    "vue-router": "^3.6.5",
     "vue2mapbox-gl": "^0.13.0",
     "vuetify": "^2.2.11",
     "vuex": "^3.4.0"
@@ -28,7 +27,7 @@
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.7",
-    "vue-template-compiler": "^2.6.11",
+    "vue-template-compiler": "^2.7.14",
     "vuetify-loader": "^1.3.0"
   },
   "scripts": {

packages/demo-app/src/App.vue

@@ -1,46 +1,93 @@
 <template>
   <app-shell header-title="DeltaVue Components Library">
-    <router-link slot="header-right" to="/"><v-btn text>Home</v-btn></router-link>
-    <router-link slot="header-right" to="/about"><v-btn text>About</v-btn></router-link>
+    <app-sidebar>
+      <v-tabs
+        v-model="tabs.name"
+        fixed-tabs
+        icons-and-text
+        background-color="blue-grey lighten-5"
+      >
+        <template v-for="tab in tabs">
+          <v-tab
+            :key="tab.name"
+            :to="tab.page"
+            :ripple="false"
+            :exact-path="tab.page === '/'"
+            :disabled="tab.disabled"
+          >
+            {{ tab.name }}
+            <v-icon>{{ tab.icon }}</v-icon>
+          </v-tab>
+        </template>
+      </v-tabs>
+
+      <v-divider />
+
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    </app-sidebar>
 
     <legal-dialog
       title="Legal"
       buttonText="Accept"
       storage="none"
       :body="legalText"
-      :checkboxes="['I accept the above statement', 'I agree to the use of cookies']"
+      :checkboxes="[
+        'I accept the above statement',
+        'I agree to the use of cookies',
+      ]"
     />
 
-    <mapbox-map
-      slot="map"
-      :access-token="accessToken"
-    >
-      <mapbox-wms-layer v-for="layer in wmsLayers" :key="layer.id" :layer="layer" />
+    <mapbox-map slot="map" :access-token="accessToken">
+      <mapbox-wms-layer
+        v-for="layer in wmsLayers"
+        :key="layer.id"
+        :layer="layer"
+      />
+      <map-layer-info v-if="wmsLayers[0]" :layer="wmsLayers[0]" />
     </mapbox-map>
-
   </app-shell>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { AppShell, MapboxMap, MapboxWmsLayer, LegalDialog } from '@deltares/vue-components'
-
+import {
+  AppShell,
+  AppSidebar,
+  MapboxMap,
+  MapboxWmsLayer,
+  LegalDialog,
+  MapLayerInfo,
+} from '@deltares/vue-components'
 
 export default {
   components: {
     AppShell,
+    AppSidebar,
     MapboxMap,
     MapboxWmsLayer,
     LegalDialog,
+    MapLayerInfo,
   },
   data: () => ({
     accessToken: process.env.VUE_APP_MAPBOX_TOKEN,
-    legalText: 'lorem <b>ipsum</b> dolor sit amet, consectetur adipisicing elit. Quibusdam iure earum, quidem, dolorem, ex eveniet labore illo quis porro accusamus ad nisi ab nam. Tempora nisi corrupti a cumque alias.'
+    legalText:
+      'lorem <b>ipsum</b> dolor sit amet, consectetur adipisicing elit. Quibusdam iure earum, quidem, dolorem, ex eveniet labore illo quis porro accusamus ad nisi ab nam. Tempora nisi corrupti a cumque alias.',
+    tabs: [
+      { name: 'layers', page: '/', icon: 'mdi-layers', disabled: false },
+      {
+        name: 'download',
+        page: '/download',
+        icon: 'mdi-download',
+        disabled: false,
+      },
+    ],
   }),
   computed: {
     ...mapState({
-      wmsLayers: ({ map }) => map.wmsLayers
+      wmsLayers: ({ map }) => map.wmsLayers,
     }),
-  }
+  },
 }
 </script>

packages/demo-app/src/main.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import './plugins/composition-api'
 import router from './router';
 import store from './store';
 import vuetify from './plugins/vuetify';

packages/demo-app/src/router/index.js

@@ -1,28 +1,39 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import Vue from 'vue'
+import VueRouter from 'vue-router'
 
-import Home from '../views/Home.vue';
-import About from '../views/About.vue';
+const Layers = () => import('../views/Layers.vue')
+const Download = () => import('../views/Download.vue')
+const DownloadGeoserver = () => import('../views/DownloadGeoserver.vue')
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'layers',
+    component: Layers,
   },
   {
-    path: '/about',
-    name: 'About',
-    component: About
+    path: '/download',
+    component: Download,
+    children: [
+      {
+        path: '/',
+        redirect: 'geoserver',
+      },
+      {
+        path: 'geoserver',
+        name: 'download.geoserver',
+        component: DownloadGeoserver,
+      },
+    ],
   },
-];
+]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
-});
+})
 
-export default router;
+export default router

packages/demo-app/src/views/Download.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-container class="download-container-scrollable pa-0">
+    <v-row v-if="!downloadIsAvailable && !wmsLayers.length">
+      <v-col class="pa-8">
+        <v-alert
+          dense
+          outlined
+          type="info"
+        >
+          No layers selected
+        </v-alert>
+      </v-col>
+    </v-row>
+    <template v-else>
+      <v-tabs
+        v-if="showApiTab"
+        fixed-tabs
+        @change="handleTabChange"
+      >
+        <v-tab
+          :to="{
+            name: 'download.geoserver'
+          }"
+        >
+          Geoserver
+        </v-tab>
+        <v-tab
+          :to="{
+            name: 'download.api'
+          }"
+        >
+          API
+        </v-tab>
+      </v-tabs>
+      <router-view />
+    </template>
+  </v-container>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    computed: {
+      ...mapState('map', [ 'wmsLayers' ]),
+
+      downloadIsAvailable() {
+        return this.wmsLayers.some(layer => Boolean(layer?.url))
+      },
+
+      showApiTab() {
+        return this.wmsLayers.some(layer => layer?.externalApi?.length)
+      },
+    },
+  }
+</script>
+<style>
+.download-container-scrollable {
+  overflow-y:auto;
+  height: calc(100vh - 130px);
+}
+</style>

packages/demo-app/src/views/DownloadGeoserver.vue

@@ -0,0 +1,110 @@
+<template>
+  <v-container class="download pt-4">
+    <v-row v-if="!downloadIsAvailable && activeLayersList.length">
+      <v-col>
+        <v-alert dense outlined type="error">Download is unavailable</v-alert>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <h3>Download</h3>
+        <p class="body-2 mb-0">
+          Choose one layer to download. Please take care of your browser
+          settings. Enable asking where to download in order to be able to find
+          your download.
+        </p>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="downloadLayer"
+          label="Select from visible layers"
+          :items="activeLayersList"
+          dense
+          outlined
+          hide-details
+          @change="getAttributesToFilter"
+        />
+        <transition name="fade" mode="out-in">
+          <v-alert
+            v-if="!validUrl && downloadLayer"
+            class="mt-2 mb-0"
+            dense
+            outlined
+            type="error"
+          >
+            One or more layers cannot be downloaded
+          </v-alert>
+        </transition>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { describeFeatureType, wfsFilterHelpers } from '@deltares/utilities'
+
+export default {
+  data: () => ({
+    downloadLayer: null,
+    availableFiltersForSelectedLayer: [],
+  }),
+
+  computed: {
+    ...mapState('map', ['wmsLayers']),
+
+    validUrl() {
+      if (!this.selectedLayerData) {
+        return
+      }
+      return (
+        Boolean(this.selectedLayerData.downloadUrl) ||
+        Boolean(this.selectedLayerData.url)
+      )
+    },
+
+    downloadIsAvailable() {
+      return this.wmsLayers.some(
+        (layer) => Boolean(layer.downloadUrl) || Boolean(layer.url)
+      )
+    },
+
+    activeLayersList() {
+      return this.wmsLayers.map(({ id, name }) => ({
+        text: name,
+        value: id,
+      }))
+    },
+
+    selectedLayerData() {
+      return this.wmsLayers.find((layer) => layer.id === this.downloadLayer)
+    },
+  },
+
+  watch: {
+    wmsLayers(val, oldVal) {
+      if (val !== oldVal) {
+        this.downloadLayer = null
+      }
+    },
+  },
+
+  methods: {
+    async getAttributesToFilter() {
+      const { serviceType, url, layer, downloadLayer } = this.selectedLayerData
+      const layerName = downloadLayer ? downloadLayer : layer
+
+      if (serviceType === 'wfs') {
+        const response = await describeFeatureType({
+          url,
+          layer: layerName,
+        })
+        this.availableFiltersForSelectedLayer =
+          wfsFilterHelpers.readFeatureProperties(response)
+      }
+    },
+  },
+}
+</script>