Standardize the "copy and paste from another layer" flow (layer relations)

components/CopyFeaturesFromOtherLayers.vue

@@ -1,209 +1,45 @@
 <template>
-  <div class = "editing-layers-features" >
 
-    <!-- EDIT MULTI FEATURE ATTRIBUTES  -->
-    <div
-      v-if        = "showEditAttributes"
-      v-disabled  = "disabled"
-      class       = "edit-multi-features"
-    >
-      <input
-        id          = "g3w_edit_attributes_of_select_feature_from_layer"
-        type        = "checkbox"
-        class       = "magic-checkbox"
-        v-model     = "$options.editAttributes.state"
-      />
-      <label
-        for        = "g3w_edit_attributes_of_select_feature_from_layer"
-        v-t-plugin = "'editing.modal.tools.copyfeaturefromotherlayer.edit_attributes'">
-      </label>
-    </div>
-
-    <section
-      class  = "g3w-editing-other-layers-features"
-      :style = "{height: `${$data._height}px`}"
-    >
-      <div v-for =" (layerId) in Object.keys($options.layers)">
-
-        <div class = "layer-title skin-color">{{ getLayerTitle(layerId) }}</div>
-
-        <divider />
-
-          <div class = "copy-features-for-layer-content">
-            <div
-              v-for = "(feature, index) in $options.layers[layerId].features"
-              class = "GIVE_ME_A_NAME_1"
-            >
-
-              <div class = "GIVE_ME_A_NAME_2">
+  <section>
 
-                <!-- ZOOM TO FEATURE -->
-                <div
-                  @click.stop = "zoomToFeature(feature)"
-                  :class      = "['ztf', 'skin-color', g3wtemplate.font['marker']]"
-                ></div>
+    <div id = "g3w-select-editable-layers-content">
+      <select
+        id        = "g3w-select-editable-layers-to-copy"
+        v-select2 = "'id'"
+      >
+        <option
+          v-for  = "layer in $options.layers"
+          :key   = "layer.id"
+          :value = "layer.id"
+        >{{ layer.name }}</option>
+      </select>
 
-                <!-- SELECT FEATURE -->
-                <div v-t-tooltip:right.create = "'plugins.editing.steps.help.select_elements'">
-                  <input
-                    @click.stop = "selectFeature(feature)"
-                    :id         = "`${layerId}_${index}_select_feature_from_layer`"
-                    type        = "checkbox"
-                    class       = "magic-checkbox"
-                  />
-                  <label :for = "`${layerId}_${index}_select_feature_from_layer`"> {{ feature.getId() || 0 }}</label>
-                </div>
-
-              </div>
-
-              <div
-                v-for = "({ attribute, value }) in getAttributesFeature(feature, layerId)"
-                class = "feature-attributes"
-              >
-                <span class = "f-attr">{{ attribute }}</span>
-                <span class = "f-value">{{ value }}</span>
-              </div>
-
-            </div>
-          </div>
+    </div>
 
-        </div>
-    </section>
+  </section>
 
-  </div>
 </template>
 
 <script>
-  const { G3W_FID }                              = g3wsdk.constant;
+
   const { GUI }                                  = g3wsdk.gui;
-  const { getAlphanumericPropertiesFromFeature } = g3wsdk.core.geoutils;
-  const { MapLayersStoreRegistry }               = g3wsdk.core.map;
-  const { resizeMixin }                          = g3wsdk.gui.vue.Mixins;
 
   export default {
 
     name: 'Copyfeaturesfromotherlayers',
 
-    mixins: [resizeMixin],
-
     data() {
       return {
-        selectedFeatures: this.$options.selectedFeatures,
-        disabled:         true, //@since v3.7 check if we want to edit multi selected feature attributes
-        _height:          0,
+        id: this.$options.layers.find(l => l.selected).id,
       };
     },
 
-    computed: {
-      /**
-       * Show edit attributes only if there are at least 2 feature to select
-       * @since v3.7
-       */
-      showEditAttributes() {
-        return Object.values(this.$options.layers).reduce((sum, { features }) => {
-          sum = sum + features.length;
-          return sum;
-        }, 0) > 1;
+    watch: {
+      'id'(id) {
+        this.$options.layers.forEach(l => l.selected = id === l.id);
       }
     },
 
-    methods: {
-      async resize() {
-        await this.$nextTick();
-        this.$data._height = window.innerHeight - 200;
-      },
-      getAttributesFeature(feature, layerId) {
-        const { external, fields } = this.$options.layers[layerId];
-        const props                = getAlphanumericPropertiesFromFeature(feature.getProperties());
-        return props
-          .filter(prop => G3W_FID !== prop)
-          .map(attr => ({
-            attribute: (external ? attr : fields.find(f => f.name === attr).label),
-            value:     feature.get(attr),
-          }));
-      },
-
-      selectFeature(feature) {
-        if (this.selectedFeatures.find(f => feature === f)) {
-          this.selectedFeatures = this.selectedFeatures.filter(f => feature !== f);
-        } else {
-          this.selectedFeatures.push(feature);
-        }
-        this.disabled = this.selectedFeatures.length < 2;
-        this.$options.editAttributes.state = !this.disabled && this.$options.editAttributes.state;
-      },
-
-      getLayerTitle(layerId) {
-        const layer = MapLayersStoreRegistry.getLayerById(layerId);
-        return layer ? layer.getTitle() : GUI.getService('map').getLayerById(layerId).get('name');
-      },
-
-      zoomToFeature(feature) {
-        GUI.getService('map').zoomToFeatures([feature] , { highlight: true, duration: 1000 });
-      },
-
-    },
-
-    beforeCreate() {
-      this.delayType = 'debounce';
-    },
-
-    mounted() {
-      GUI.closeContent();
-    },
-
   };
 </script>
 
-<style scoped>
-  .g3w-editing-other-layers-features {
-    overflow: auto;
-  }
-  .edit-multi-features {
-    display: flex;
-    justify-content: flex-end
-  }
-  .edit-multi-features > label {
-    color: #000;
-  }
-  .layer-title {
-    font-weight: bold;
-    font-size: 1.2em;
-  }
-  .copy-features-for-layer-content {
-    overflow-x: auto;
-  }
-  .ztf {
-    padding: 0 5px 15px 5px;
-    font-size: 1.1em;
-    cursor: pointer;
-    margin-right: 5px;
-  }
-  .GIVE_ME_A_NAME_1 {
-    padding: 5px;
-    position: relative;
-    display: flex;
-    align-items: baseline;
-    border-bottom: 1px solid #eee;
-  }
-  .GIVE_ME_A_NAME_2 {
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid #eee;
-  }
-  .GIVE_ME_A_NAME_2 .magic-checkbox + label {
-    color: #FFF;
-  }
-  .feature-attributes {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-  }
-  .f-attr {
-    font-weight: bold;
-    margin-bottom: 10px;
-  }
-  .f-value {
-    align-self: start;
-  }
-</style>

components/Editing.vue

@@ -353,34 +353,39 @@
         unlock = false,
       } = {}) {
         return new Promise((resolve, reject) => {
-          const changes = ApplicationService.getOfflineItem('EDITING_CHANGES');
+          // get offline item
+          const changes = JSON.parse(window.localStorage.getItem('EDITING_CHANGES') || null);
+
           // if you find changes offline previously
           if (!changes) { return }
 
           const promises = [];
           const layerIds = [];
           //FORCE TO WAIT OTHERWISE STILL OFF LINE
-          setTimeout(() => {
+          setTimeout(async () => {
             for (const layerId in changes) {
               layerIds.push(layerId);
               const toolbox     = this.service.getToolBoxById(layerId);
               const commitItems = changes[layerId];
               promises.push(this.service.commit({ toolbox, commitItems, modal }))
             }
 
-            $.when
-              .apply(this.service, promises)
-              .then(resolve)
-              .fail(e => { console.warn(e); reject(e) })
-              .always(() => {
-                if (unlock) {
-                  layerIds.forEach(layerId => this.service.getLayerById(layerId).unlock());
-                }
-                // always reset items to null
-                ApplicationService.setOfflineItem('EDITING_CHANGES');
-              })
+            try {
+              await promisify($.when.apply(this.service, promises));
+              resolve();
+            } catch(e) {
+              console.warn(e);
+              reject(e);
+            } finally {
+              if (unlock) {
+                layerIds.forEach(layerId => this.service.getLayerById(layerId).unlock());
+              }
+              // always reset items to null
+              try      { window.localStorage.setItem('EDITING_CHANGES', "{}"); }
+              catch(e) { console.warn(e); }
+            }
           }, 1000)
-        });
+        })
       },
 
     },
@@ -421,23 +426,19 @@
       },
 
       django_admin_url() {
-        const config = ApplicationService.getConfig();
-        const user   = config.user;
-        return user.is_superuser ? new URL('/django-admin/editing/g3weditingfeaturelock/', initConfig.baseurl) : false;
+        return window.initConfig.user.is_superuser ? new URL('/django-admin/editing/g3weditingfeaturelock/', window.initConfig.baseurl) : false;
       },
 
       filemanager_url() {
-        const config = ApplicationService.getConfig();
-        const user   = config.user;
-        return user.is_superuser ? new URL('/filemanager/', initConfig.baseurl) : false;
+        return window.initConfig.user.is_superuser ? new URL('/filemanager/', window.initConfig.baseurl) : false;
       },
 
     },
 
     watch:{
 
       canCommit(bool) {
-        ApplicationService.registerLeavePage({ bool });
+        window.onbeforeunload = () => bool || undefined; // register leave page
       },
 
       /**
@@ -494,13 +495,6 @@
         this.checkOfflineChanges({ unlock: true });
       }
 
-      // register "offline" event
-      this.unByKeys.push({
-        owner : ApplicationService,
-        setter: 'offline',
-        key:    ApplicationService.onafter('offline', () => {})
-      });
-
       // register "online" event
       this.unByKeys.push({
         owner :  ApplicationService,
@@ -576,9 +570,6 @@
 
       this.service.getToolBoxes().forEach(t => t.resetDefault());
 
-      // clear all unique values fields related to layer (after a closing editing panel).
-      this.state.uniqueFieldsValues = {};
-
       // re-enable query map control
       const control = GUI.getService('map').getMapControlByType({ type: 'query' });
       if (control && !control.isToggled()) {

components/FormRelation.vue

@@ -192,6 +192,7 @@
                   class   = "magic-checkbox"
                   type    = "checkbox">
                   <label :for="`select_relation__${index}`"></label>
+              </td>
               <td>
                 <div style = "display: flex">
                   <!-- RELATION TOOLS -->
@@ -267,7 +268,8 @@
   import { updateWorkflows }                              from '../utils/updateWorkflows';
   import { getRelationId }                                from '../utils/getRelationId';
   import { getFeatureTableFieldValue }                    from '../utils/getFeatureTableFieldValue';
-  import { chooseFeatureFromFeatures }                    from "../utils/chooseFeatureFromFeatures";
+  import { chooseFeatureFromFeatures }                    from '../utils/chooseFeatureFromFeatures';
+  import { isSameBaseGeometryType }                       from '../utils/isSameBaseGeometryType';
   import { PickFeaturesInteraction }                      from '../interactions/pickfeaturesinteraction';
   import { VM }                                           from '../eventbus';
   import {
@@ -281,8 +283,7 @@
   const { ProjectsRegistry }            = g3wsdk.core.project;
   const { CatalogLayersStoresRegistry } = g3wsdk.core.catalog;
   const { DataRouterService }           = g3wsdk.core.data;
-  const { Geometry }                    = g3wsdk.core.geometry;
-  const { isSameBaseGeometryType }      = g3wsdk.core.geoutils;
+  const { Geometry }                    = g3wsdk.core.geoutils;
   const { tPlugin:t }                   = g3wsdk.core.i18n;
   const { Layer }                       = g3wsdk.core.layer;
   const { Feature }                     = g3wsdk.core.layer.features;