ProjectMappingContextLayer.vue

<template>
  <div class="ui segment layer-item">
    <div class="ui divided form">
      <div class="field" data-type="layer-field">
        <label for="form.layer.id_for_label" class="layer-handle-sort">
          <i class="th icon"></i>couche
        </label>
        <!-- {% if is_empty %} {# TODO arranger le dropdown pour les ajout à la volée
        #} {# le selecteur de couche ne s'affichant pas correctement on passe
        par un field django par defaut en attendant #} -->
        <!--   {{ form.layer }} -->
        <!-- {% else %} -->
        <Dropdown
          :options="availableLayers"
          :selected="selectedLayer.name"
          :selection.sync="selectedLayer"
          :search="true"
          :placeholder="placeholder"
        />
        <!-- {{ form.layer.errors }} -->
      </div>
      <div class="fields">
        <div
          class="field three wide {% if form.opacity.errors %} error{% endif %}"
        >
          <label for="opacity">Opacité</label>
          <input type="number" v-model.number="layerOpacity" step="0.01" />
          <!-- {{ form.opacity.errors }} -->
        </div>
        <div class="field three wide">
          <div
            @click="updateLayer({ ...layer, queryable: !layer.queryable })"
            class="ui checkbox"
          >
            <input type="checkbox" v-model="layer.queryable" name="queryable" />
            <label for="queryable"> Requêtable</label>
          </div>
          <!-- {{ form.queryable.errors }} -->
        </div>
      </div>

      <div @click="removeLayer" class="field">
        <div class="ui compact small icon floated button button-hover-red">
          <i class="ui grey trash alternate icon"></i>
          <span>Supprimer cette couche</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Dropdown from "@/components/Dropdown.vue";
import { mapState } from "vuex";

export default {
  name: "ProjectMappingContextLayer",

  props: ["layer", "basemapid"],

  components: {
    Dropdown,
  },

  computed: {
    ...mapState("map", ["layers", "availableLayers"]),

    selectedLayer: {
      get() {
        const matchingLayer = this.retrieveLayer(this.layer.title);
        return {
          name: matchingLayer ? matchingLayer.service : "",
          value: this.layer ? this.layer.title : "",
        };
      },

      set(newValue) {
        const matchingLayer = this.retrieveLayer(this.layer.title);
        this.updateLayer({
          ...this.layer,
          service: newValue.name,
          title: newValue.value,
          id: matchingLayer.id,
        });
      },
    },

    layerOpacity: {
      get() {
        return this.layer.opacity;
      },
      set(newValue) {
        this.updateLayer({ ...this.layer, opacity: newValue });
      },
    },

    availableLayers: function () {
      return this.layers.map((el) => {
        return { name: el.service, value: el.title };
      });
    },

    placeholder: function () {
      return this.selectedLayer && this.selectedLayer.name
        ? this.selectedLayer.name
        : "Choisissez une couche";
    },
  },

  methods: {
    retrieveLayer(title) {
     return this.layers.find((el) => el.title === title);
    },

    removeLayer() {
      this.$store.commit("map/DELETE_BASEMAP_LAYER", {
        basemapId: this.basemapid,
        layerId: this.layer.dataKey,
      });
    },

    updateLayer(layer) {
      this.$store.commit("map/UPDATE_BASEMAP_LAYER", {
        basemapId: this.basemapid,
        layerId: this.layer.dataKey,
        layer,
      });
    },
  },

  mounted() {
    const matchingLayer = this.retrieveLayer(this.layer.title);
    this.updateLayer({
      ...this.layer,
      service: matchingLayer.service,
      title: matchingLayer.title,
      id: matchingLayer.id,
    });
  },
};
</script>