ldc-loue/resources/ts/components/bo/ModelLinkComponent.vue

<template>
  <div class="ModelLink form-control">
    <VueSelect
      :placeholder="_placeholder"
      :_loading="_loading"
      v-model="_value"
      :clearable="true"
      label="label"
      :options="_data"
      v-on:search="search"
      :disabled="_readonly || _disabled"
      :filterable="true"
      :searchable="true"
    >
      <template v-slot:option="{ option }: { option: VSelectProps }">
        {{
          option.label.length >= _maxLength
            ? option.label.substring(0, _maxLength) + ".."
            : option.label
        }}
      </template>
      <template
        v-slot:no-options="{ search, searching }: { search: string, searching: boolean }"
      >
        <template v-if="searching">
          {{ __("Aucun résultat pour") }}
          <em>{{ search }}</em> .
        </template>
        <em v-else style="opacity: 0.5">{{ __("Chercher un lien du site") }}</em>
      </template>
      <template v-slot:list-footer>
        <li class="pagination" v-if="_data.length">
          <button
            v-on:click.prevent="_page -= 1"
            :disabled="!_hasPrevPage"
            class="btn btn-sm btn-primary mt-2 mb-2 ms-2 me-2"
          >
            {{ __("précédent") }}
          </button>
          <button
            v-on:click.prevent="_page += 1"
            :disabled="!_hasNextPage"
            class="btn btn-sm btn-primary mt-2 mb-2"
          >
            {{ __("suivant") }}
          </button>
        </li>
      </template>
    </VueSelect>
    <input v-if="_isJson" type="hidden" :name="String(_name)" :value="_value?.value" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VueSelect from "vue-select";
import trans from "../../modules/trans";
import route from "../../modules/route";
import axios from "axios";

type SelectModel = {
  class: string;
  label: string;
  value: string;
};

export default defineComponent({
  mixins: [trans, route],
  components: {
    VueSelect,
  },
  beforeMount() {
    if (!this.$attrs.json) {
      throw new Error("this component requires json");
    }
  },
  mounted() {
    const json = String(this.$attrs.json ?? "{}"),
      data = JSON.parse(json);
    if (Object.keys(data).length) {
      this._isJson = true;
      this._name = data.name;
    }
    this._disabled = this.disabled ? this.disabled : data.disabled ? true : false;
    this._readonly = this.readonly ? this.readonly : data.readonly ? true : false;
    this._placeholder = this.placeholder ? this.placeholder : data.placeholder;
    this._maxLength = this.maxLength ? this.maxLength : data.maxLength;
    this.parseValue(this.value ? this.value : data.value);
    this.search();
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    maxLength: {
      type: Number,
      default: 35,
    },
  },
  data(): {
    _isJson: boolean;
    _name: string | null;
    _disabled: boolean;
    _readonly: boolean;
    _placeholder: string;
    _maxLength: number;
    _value: SelectModel | null;
    _loading: boolean;
    _searchText: string;
    _data: SelectModel[];
    _page: number;
    _perPage: number;
    _hasNextPage: boolean;
    _hasPrevPage: boolean;
  } {
    return {
      _isJson: false,
      _name: null,
      _disabled: false,
      _readonly: false,
      _placeholder: "",
      _value: null,
      _loading: false,
      _searchText: "",
      _data: [],
      _page: 1,
      _perPage: 15,
      _hasNextPage: true,
      _hasPrevPage: false,
      _maxLength: 65,
    };
  },
  watch: {
    _page() {
      if (this._page < 1) {
        this._page = 1;
      }
      if (this._page > 1) {
        this._hasPrevPage = true;
      } else {
        this._hasPrevPage = false;
      }
      this.search();
    },
    _data() {
      if (this._data.length == this._perPage) {
        this._hasNextPage = true;
      } else {
        this._hasNextPage = false;
      }
    },
    value() {
      this.parseValue(this.value);
    },
    _value() {
      this.$emit("input", this._value ? this._value.value : "");
    },
  },
  methods: {
    search(search = null) {
      if (search !== false && search !== null) {
        this._searchText = search;
      }
      if (!this._searchText) {
        return;
      }
      let routeUrl = route.methods.route("bo.ranges.search-uri");
      if (!routeUrl) {
        throw new Error(`undefined route bo.ranges.search-uri`);
      }
      const url = new URL(routeUrl);
      routeUrl = `${url.origin}${url.pathname}?`;
      routeUrl += "page=" + encodeURIComponent(this._page);
      routeUrl += "&search=" + encodeURIComponent(this._searchText);
      this._loading = true;
      axios
        .get(routeUrl)
        .then((response) => {
          this.parseResponse(response.data.data);
        })
        .catch((error) => {
          console.error(error);
        })
        .then(() => {
          this._loading = false;
        });
    },
    parseValue(value: string | null) {
      if (!value) {
        this._value = null;
        return;
      }
      let routeUrl = route.methods.route("bo.ranges.model-title");
      if (!routeUrl) {
        throw new Error(`undefined route bo.ranges.model-title`);
      }
      const url = new URL(routeUrl),
        model = value.replace(/^#/, "").replace(/#$/, "").split("#");

      routeUrl = `${url.origin}${url.pathname}?`;

      routeUrl += "model=" + encodeURIComponent(model[0]);
      routeUrl += "&id=" + encodeURIComponent(model[1]);
      axios.get(routeUrl).then((response) => {
        let label = String(response.data as string);
        label =
          label.length >= this._maxLength
            ? label.substring(0, this._maxLength) + ".."
            : label;
        if (label) {
          this._value = this.parseResource({
            class: model[0],
            label: label,
            value: model[1],
          });
        } else {
          console.error("empty data response");
        }
      });
    },
    parseResource(model: SelectModel): SelectModel {
      let label = model.label;
      switch (model.class) {
        case "App\\Models\\Recipe":
          label = `${this.__("models.classes.recipes")} - ${model.label}`;
          break;
        case "App\\Models\\Breeder":
          label = `${this.__("models.classes.breeders")} - ${model.label}`;
          break;
      }
      return {
        label: label,
        class: model.class,
        value: `#${model.class}#${model.value}#`,
      };
    },
    parseResponse(data: SelectModel[]) {
      const out: SelectModel[] = [];
      for (const model of data) {
        out.push(this.parseResource(model));
      }
      // pass _searchText if is valid url and nothing else is found
      if (out.length) {
        this._data = out;
      }
    },
  },
});
</script>

<style lang="scss">
@import "../../../../node_modules/vue-select/dist/vue-select.css";

.ModelLink {
  padding: 0 !important;
  .vs__dropdown-toggle {
    border: 0 !important;
  }
}
</style>