ProjectMappingContextLayer.vue

<template>
  <div :id="layer.dataKey" 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="availableLayerOptions"
          :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"
            oninput="validity.valid||(value='');"
            step="0.01"
            min="0"
            max="1"
          />
          <!-- {{ 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", ["availableLayers"]),

    selectedLayer: {
      get() {
        return this.retrieveLayer(this.layer.title) || [];
      },

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

    layerOpacity: {
      get() {
        return this.layer.opacity;
      },
      set(newValue) {
        if (newValue) {
          //* check if value was filled
          this.updateLayer({ ...this.layer, opacity: newValue });
        }
      },
    },

    availableLayerOptions: function () {
      return this.availableLayers.map((el) => {
        return {
          id: el.id,
          name: `${el.title} - ${el.service}`,
          value: el.title,
          title: el.title,
        };
      });
    },

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

  methods: {
    retrieveLayer(title) {
      return this.availableLayerOptions.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);
    if (matchingLayer !== undefined) {
      this.updateLayer({
        ...this.layer,
        service: matchingLayer.service,
        title: matchingLayer.title,
        id: matchingLayer.id,
      });
    }
  },
};
</script>