Add toggle for entity map view (#1429)

Author: matthew-white

src/components/entity/list.vue

@@ -19,6 +19,9 @@ except according to the terms contained in the LICENSE file.
           <entity-filters v-model:conflict="conflict" v-model:creatorId="creatorIds" v-model:creationDate="creationDateRange"
           :disabled="deleted" :disabled-message="deleted ? $t('filterDisabledMessage') : null" @reset-click="resetFilters"/>
         </form>
+        <radio-field v-if="dataset.dataExists && dataset.hasGeometry"
+          v-model="dataView" :options="viewOptions" :disabled="deleted"
+          :disabled-message="$t('mapDisabled')" button-appearance/>
         <teleport-if-exists v-if="odataEntities.dataExists" to=".dataset-entities-heading-row">
           <entity-download-button :odata-filter="deleted ? null : odataFilter"
           :search-term="deleted ? null : searchTerm"
@@ -27,30 +30,21 @@ except according to the terms contained in the LICENSE file.
         </teleport-if-exists>
       </div>
       <table-refresh-bar :odata="odataEntities"
-        :refreshing="refreshing" @refresh-click="fetchChunk(false, true)"/>
-      <entity-table v-show="odataEntities.dataExists" ref="table"
-        v-model:all-selected="allSelected"
-        :properties="dataset.properties" :deleted="deleted"
-        :awaiting-deleted-responses="awaitingResponses"
-        @selection-changed="handleSelectionChange"
-        @update="showUpdate"
-        @resolve="showResolve" @delete="showDelete" @restore="showRestore"/>
-
-      <p v-show="emptyTableMessage" class="empty-table-message">
-        {{ emptyTableMessage }}
+        :refreshing="refreshing" @refresh-click="refresh"/>
+      <p v-show="emptyMessage" class="empty-table-message">
+        {{ emptyMessage }}
       </p>
-      <odata-loading-message :state="odataEntities.initiallyLoading"
-        type="entity"
-        :top="pagination.size"
-        :filter="odataFilter != null || !!searchTerm"
-        :total-count="dataset.dataExists ? dataset.entities : 0"/>
-
-      <!-- @update:page is emitted on size change as well -->
-      <pagination v-if="pagination.count > 0"
-              v-model:page="pagination.page" v-model:size="pagination.size"
-              :count="pagination.count" :size-options="pageSizeOptions"
-              :spinner="odataEntities.awaitingResponse"
-              @update:page="handlePageChange()"/>
+
+      <entity-table-view v-if="dataView === 'table'" ref="view"
+        v-model:all-selected="allSelected" :deleted="deleted"
+        :filter="odataFilter" :search-term="searchTerm"
+        :awaiting-responses="awaitingResponses"
+        @selection-changed="handleSelectionChange"
+        @clear-selection="clearSelectedEntities"
+        @update="showUpdate" @resolve="showResolve" @delete="showDelete"
+        @restore="showRestore"/>
+      <entity-map-view v-else ref="view" :filter="geojsonFilter"
+        :search-term="searchTerm" :awaiting-responses="awaitingResponses"/>
     </disable-container>
 
     <entity-update v-bind="update" @hide="hideUpdate" @success="afterUpdate"/>
@@ -75,28 +69,30 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
-import { reactive, watch } from 'vue';
+import { watch } from 'vue';
 
+import ActionBar from '../action-bar.vue';
+import DisableContainer from '../disable-container.vue';
 import EntityDownloadButton from './download-button.vue';
 import EntityDelete from './delete.vue';
+import EntityMapView from './map-view.vue';
 import EntityRestore from './restore.vue';
 import EntityFilters from './filters.vue';
-import EntityTable from './table.vue';
+import EntityTableView from './table-view.vue';
 import EntityUpdate from './update.vue';
 import EntityResolve from './resolve.vue';
-import OdataLoadingMessage from '../odata-loading-message.vue';
-import Spinner from '../spinner.vue';
-import Pagination from '../pagination.vue';
+import RadioField from '../radio-field.vue';
+import TableRefreshBar from '../table-refresh-bar.vue';
 import TeleportIfExists from '../teleport-if-exists.vue';
 import SearchTextbox from '../search-textbox.vue';
-import ActionBar from '../action-bar.vue';
-import DisableContainer from '../disable-container.vue';
-import TableRefreshBar from '../table-refresh-bar.vue';
+import Spinner from '../spinner.vue';
 
+import useDataView from '../../composables/data-view';
 import useQueryRef from '../../composables/query-ref';
 import useDateRangeQueryRef from '../../composables/date-range-query-ref';
 import useRequest from '../../composables/request';
 import { apiPaths, requestAlertMessage } from '../../util/request';
+import { joinSentences } from '../../util/i18n';
 import { modalData } from '../../util/reactivity';
 import { noop } from '../../util/util';
 import { odataEntityToRest } from '../../util/odata';
@@ -110,13 +106,13 @@ export default {
     DisableContainer,
     EntityDelete,
     EntityDownloadButton,
-    EntityRestore,
     EntityFilters,
+    EntityMapView,
     EntityResolve,
-    EntityTable,
+    EntityRestore,
+    EntityTableView,
     EntityUpdate,
-    OdataLoadingMessage,
-    Pagination,
+    RadioField,
     SearchTextbox,
     Spinner,
     TableRefreshBar,
@@ -182,15 +178,15 @@ export default {
     });
 
     const creationDateRange = useDateRangeQueryRef();
+    const { dataView, options: viewOptions } = useDataView();
 
     const { request } = useRequest();
 
-    const pageSizeOptions = [250, 500, 1000];
-
     return {
-      dataset, odataEntities, conflict, request,
-      deletedEntityCount, pageSizeOptions, searchTerm, entityCreators, creatorIds,
-      creationDateRange
+      dataset, deletedEntityCount, odataEntities, entityCreators,
+      searchTerm, creatorIds, creationDateRange, conflict,
+      dataView, viewOptions,
+      request
     };
   },
   data() {
@@ -213,8 +209,6 @@ export default {
 
       awaitingResponses: new Set(),
 
-      pagination: { page: 0, size: this.pageSizeOptions[0], count: 0 },
-      now: new Date().toISOString(),
       snapshotFilter: '',
       // used for restoring them back when undo button is pressed
       bulkDeletedEntities: [],
@@ -251,35 +245,55 @@ export default {
       }
       return conditions.length !== 0 ? conditions.join(' and ') : null;
     },
-    emptyTableMessage() {
+    geojsonFilter() {
+      const query = {};
+      if (this.filtersOnCreatorId) query.creatorId = this.creatorIds;
+      if (this.creationDateRange.length !== 0) {
+        query.start__gte = this.creationDateRange[0].toISO();
+        query.end__lte = this.creationDateRange[1].endOf('day').toISO();
+      }
+      if (this.conflict.length === 1)
+        query.conflict = this.conflict[0] ? ['soft', 'hard'] : 'null';
+      return Object.keys(query).length !== 0 ? query : null;
+    },
+    emptyMessage() {
       if (!this.odataEntities.dataExists) return '';
       if (this.odataEntities.value.length > 0) return '';
 
+      // Cases related to entity deletion
       if (this.odataEntities.removedEntities.size === this.odataEntities.count && this.odataEntities.count > 0) {
         return this.deleted ? this.$t('deletedEntity.allRestored') : this.$t('allDeleted');
       }
       if (this.odataEntities.removedEntities.size > 0 && this.odataEntities.value.length === 0) {
         return this.deleted ? this.$t('deletedEntity.allRestoredOnPage') : this.$t('allDeletedOnPage');
       }
-      return this.deleted ? this.$t('deletedEntity.emptyTable')
-        : (this.odataFilter ? this.$t('noMatching') : this.$t('noEntities'));
+      if (this.deleted) {
+        return this.$t('deletedEntity.emptyTable');
+      }
+
+      if (this.odataFilter) return this.$t('noMatching');
+      return this.dataView === 'table'
+        ? this.$t('noEntities')
+        : joinSentences(this.$i18n, [
+          this.$t('common.emptyMap'),
+          this.$t('emptyMap')
+        ]);
     },
     actionBarState() {
       return this.selectedEntities.size > 0 && !this.alert.state && !this.container.openModal.state;
     }
   },
   watch: {
-    deleted() {
-      this.fetchChunk(true);
-    },
     'odataEntities.value': {
       handler() {
         this.clearSelectedEntities();
       }
     },
     'odataEntities.count': {
       handler() {
-        if (this.dataset.dataExists && this.odataEntities.dataExists && !this.odataFilter && !this.deleted && !this.searchTerm)
+        if (this.dataset.dataExists && this.odataEntities.dataExists &&
+          this.dataView === 'table' && !this.odataFilter && !this.deleted &&
+          !this.searchTerm)
           this.dataset.entities = this.odataEntities.count;
       }
     },
@@ -309,87 +323,24 @@ export default {
 
   },
   created() {
-    this.fetchChunk(true);
-    this.$watch(() => [this.odataFilter, this.searchTerm], () => this.fetchChunk(true));
     this.fetchCreators();
   },
   methods: {
-    // `clear` indicates whether this.odataEntities should be cleared before
-    // sending the request. `refresh` indicates whether the request is a
-    // background refresh (whether the refresh button was pressed).
-    fetchChunk(clear, refresh = false) {
-      this.refreshing = refresh;
-      // Are we fetching the first chunk of entities or the next chunk?
-      const first = clear || refresh;
-
-      if (first) {
-        this.now = new Date().toISOString();
-        this.setSnapshotFilter();
-        this.pagination.page = 0;
-      }
-
-      let $filter = this.snapshotFilter;
-      if (this.odataFilter) {
-        $filter += ` and ${this.odataFilter}`;
-      }
-
-      const $search = this.searchTerm ? this.searchTerm : undefined;
-
-      this.clearSelectedEntities();
-
-      this.odataEntities.request({
-        url: apiPaths.odataEntities(
-          this.projectId,
-          this.datasetName,
-          {
-            $top: this.pagination.size,
-            $skip: this.pagination.page * this.pagination.size,
-            $count: true,
-            $search,
-            $filter,
-            $orderby: '__system/createdAt desc'
-          }
-        ),
-        clear,
-        patch: !first
-          ? (response) => this.odataEntities.replaceData(response.data, response.config)
-          : null
-      })
-        .then(() => {
-          this.pagination.count = this.odataEntities.count;
-
-          if (this.deleted) {
-            this.deletedEntityCount.cancelRequest();
-            if (!this.deletedEntityCount.dataExists) {
-              this.deletedEntityCount.data = reactive({});
-            }
-            this.deletedEntityCount.value = this.odataEntities.count;
-          }
-        })
-        .finally(() => { this.refreshing = false; })
-        .catch(noop);
-
-      // emit event to parent component to re-fetch deleted Entity count
-      if (refresh && !this.deleted) {
-        this.$emit('fetch-deleted-count');
-      }
-    },
-    setSnapshotFilter() {
-      this.snapshotFilter = '';
-      if (this.deleted) {
-        this.snapshotFilter += `__system/deletedAt le ${this.now}`;
-      } else {
-        this.snapshotFilter += `__system/createdAt le ${this.now} and `;
-        this.snapshotFilter += `(__system/deletedAt eq null or __system/deletedAt gt ${this.now})`;
-      }
-    },
     resetFilters() {
       this.$router.replace({ path: this.$route.path, query: {} });
     },
+    refresh() {
+      this.refreshing = true;
+      this.$refs.view.fetchData(false)
+        .then(() => { this.refreshing = false; });
+
+      // emit event to parent component to re-fetch deleted Entity count
+      if (!this.deleted) this.$emit('fetch-deleted-count');
+    },
     // This method is called directly by DatasetEntities.
     reset() {
       if (this.odataFilter == null && !this.searchTerm) {
-        this.fetchChunk(true);
+        this.$refs.view.fetchData();
       } else {
         this.resetFilters();
       }
@@ -437,7 +388,7 @@ export default {
       this.odataEntities.value[index] = newOData;
 
       if (this.resolveIndex == null)
-        this.$refs.table.afterUpdate(index);
+        this.$refs.view.afterUpdate(index);
       else
         this.showResolve(this.resolveIndex);
     },
@@ -466,7 +417,7 @@ export default {
       };
       this.odataEntities.value[this.resolveIndex] = newOData;
 
-      this.$refs.table.afterUpdate(this.resolveIndex);
+      this.$refs.view.afterUpdate(this.resolveIndex);
     },
     showDelete(entity) {
       this.deleteModal.show({ entity });
@@ -503,7 +454,7 @@ export default {
             ? this.odataEntities.value.findIndex(entity => entity.__id === uuid)
             : -1;
           if (index !== -1) {
-            this.$refs.table.afterDelete(index);
+            this.$refs.view.afterDelete(index);
             this.selectedEntities.delete(this.odataEntities.value[index]);
             this.odataEntities.value.splice(index, 1);
           }
@@ -547,7 +498,7 @@ export default {
             ? this.odataEntities.value.findIndex(entity => entity.__id === uuid)
             : -1;
           if (index !== -1) {
-            this.$refs.table.afterDelete(index);
+            this.$refs.view.afterDelete(index);
             this.odataEntities.value.splice(index, 1);
           }
         })
@@ -556,20 +507,14 @@ export default {
           this.awaitingResponses.delete(uuid);
         });
     },
-    handlePageChange() {
-      // This function is called for size change as well. So when the total number of entities are
-      // less than the lowest size option, hence we don't need to make a request.
-      if (this.odataEntities.count < this.pageSizeOptions[0]) return;
-      this.fetchChunk(false);
-    },
     clearSelectedEntities() {
       this.selectedEntities.clear();
       this.odataEntities.value?.forEach(e => { e.__system.selected = false; });
       this.allSelected = false;
     },
     cancelBackgroundRefresh() {
       if (!this.refreshing) return;
-      this.odataEntities.cancelRequest();
+      this.$refs.view.cancelFetch();
       this.deletedEntityCount.cancelRequest();
     },
     requestBulkDelete() {
@@ -696,9 +641,7 @@ export default {
   flex-wrap: wrap-reverse;
 }
 
-#entity-list table:has(tbody:empty) {
-    display: none;
-  }
+#entity-list .radio-field { margin-left: auto; }
 
 #entity-table:has(tbody tr) + .empty-table-message {
   display: none;
@@ -717,6 +660,7 @@ export default {
     // This text is shown when there are no Entities to show in a table.
     "noEntities": "There are no Entities to show.",
     "noMatching": "There are no matching Entities.",
+    "emptyMap": "Entities only appear if they include data in the geometry property.",
     "allDeleted": "All Entities are deleted.",
     "allDeletedOnPage": "All Entities on the page have been deleted.",
     "alert": {
@@ -726,6 +670,7 @@ export default {
     },
     "filterDisabledMessage": "Filtering is unavailable for deleted Entities",
     "searchDisabledMessage": "Search is unavailable for deleted Entities",
+    "mapDisabled": "Map is unavailable for deleted Entities",
     "downloadDisabled": "Download is unavailable for deleted Entities",
     "deletedEntity": {
       "emptyTable": "There are no deleted Entities.",