Commit 3da040af authored by Stephane Bouvry's avatar Stephane Bouvry
Browse files

Mise à jour du composant de sélection des organisations dans l'écran... 

Mise à jour du composant de sélection des organisations dans l'écran d'affectation (Activités/Projets)
parent 00358aab

front/src/EntityWithRole.vue

+1 −1
Original line number Diff line number Diff line
@@ -230,7 +230,7 @@ 
node node_modules/.bin/vue-cli-service build --name EntityWithRole --dest ../public/js/oscar/dist --no-clean --formats umd,umd-min --target lib src/EntityWithRole.vue

**/



import OrganizationAutoCompleter from "./components/OrganizationAutoCompleter";

import OrganizationAutoCompleter from "./components/OrganizationAutoCompleter2";

import PersonAutoCompleter from "./components/PersonAutoCompleter";

import Datepicker from "./components/Datepicker";

front/src/TestOrganisationSelector.vue

+4 −8
Original line number Diff line number Diff line 
<template>

  <div>

    <pre>

      SELECTED : {{ selected }}

      SELECTED : {{ selectedId }}

    </pre>

    <organizationselector v-model="selected" />

    <organizationselector v-model="selectedId" @change="handlerChangeData" />

  </div>

</template>

<script>
@@ -25,17 +25,13 @@ export default { 


  data() {

    return {

      selected: null,

      selectedId: null,

    };

  },



  computed: {



  },



  methods: {



    handlerEnrolledSelected(data) {

    handlerChangeData(data) {

      console.log(data);

    }

  },

front/src/components/OrganizationAutoCompleter2.vue

+66 −32
Original line number Diff line number Diff line
@@ -22,29 +22,43 @@ 
                 class="form-control"/>

        </div>

        <div class="options" v-show="showSelector && options.length">

          <header>Résultat(s) : {{ options.length }}</header>

          <div class="option" v-for="o, i in options"

          <header>

            Résultat(s) : {{ options.length }} /

            <label for="hidder">

              Afficher les structures fermées

              <input type="checkbox" id="hidder" value="on" v-model="hideOff" />

            </label>

          </header>

          <div class="option" v-for="o, i in optionsFiltered"

               @mouseover="highlightedIndex = i"

               @click.prevent.stop="handlerSelectIndex(i)"

               @click.prevent.stop="handlerSelectIndex(o.id)"

               :id="'item_'+i"

               :class="{

                 'active': i == highlightedIndex,

                 'selected': o.id == selectedValue

                 'selected': o.id == selectedValue,

                 'closed': o.closed

               }">

            <div class="option-title">

              <code>

                [{{ i }}]{{ o.code }}

              </code>

              <em class="cartouche code">

                {{ o.code }}

              </em>

              <span class="fullname">

                <strong>

                  {{ o.shortname }}

                </strong>

                <em>

                  {{ o.longname }}

                </em>

              </span>

              <span v-if="o.type">

                ({{o.type}})

              </span>

            </div>

            <div class="option-infos">

            <div class="option-infos" v-if="o.city || o.country">

              <small>

                <i class="icon-location"></i>

                {{ o.city }} - {{ o.country }}

              </small>

            </div>

          </div>

        </div>
@@ -81,7 +95,8 @@ export default { 
      loading: false,

      inside: false,

      displayValue: false,

      error: ""

      error: "",

      hideOff: false

    }

  },
@@ -98,7 +113,21 @@ export default { 
        });

        return opts;

      }

    },



    optionsFiltered(){

      if( this.hideOff ){

        return this.options;

      }

      else {

        let output = [];

        this.options.forEach(i => {

          if( !i.closed ){

            output.push(i);

          }

        });

        return output;

      }

    }

  },
@@ -134,17 +163,14 @@ export default { 
    },



    handlerMouseLeave(){

      console.log("LEAVE");

      this.inside = false;

    },



    handlerMouseEnter(){

      console.log("ENTER");

      this.inside = true;

    },



    handlerClick(e){

      console.log("CLICK");

      this.displayValue = false;

    },
@@ -153,15 +179,23 @@ export default { 
      this.selectedLabel = "";

      this.showSelector = false;

      this.displayValue = false;

      this.$emit('change', null );

      this.$emit('update:value', null);

      this.$emit('input', null);

    },



    handlerSelectIndex(index){

      console.log("SELECT");

      this.selectedValue = this.options[index].id;

      this.selectedLabel = this.options[index].label;

    handlerSelectIndex(id){

      this.options.forEach(i => {

        if( i.id == id ){

          this.selectedValue = i.id;

          this.selectedLabel = i.label;

          this.showSelector = false;

          this.displayValue = true;

      this.$emit('change', this.selectedValue);

        }

      });





      this.$emit('change', { id: this.selectedValue, label: this.selectedLabel} );

      this.$emit('update:value', this.selectedValue);

      this.$emit('input', this.selectedValue);

    },
@@ -202,16 +236,20 @@ export default { 
      }

    },



    updateSelectedDate(){



    },



    handlerKeyUp(e){

      switch(e.code){

        case "ArrowUp":

          this.handlerSelectPrev(true);

          console.log("ArrowUp");

          break;



        case "ArrowDown":

          this.handlerSelectNext(true);

          console.log("ArrowDown");

          break;



        case "ArrowLeft":

        case "ArrowRight":

          break;
@@ -222,7 +260,6 @@ export default { 
          break;



        default:

          console.log(e.code);

          if( this.searchFor && this.searchFor.length > 1 ){

            this.handlerChange();

          }
@@ -230,13 +267,11 @@ export default { 
    },



    handlerChange(e){

      console.log("Changement ", this.searchFor);

      // Système de retardement Eco+

      if (this.latency != null) {

        clearTimeout(this.latency);

      }

      let delayFunction = function () {

        console.log("delayFunction");

        this.search();

        clearTimeout(this.latency);

      }.bind(this);
@@ -244,7 +279,6 @@ export default { 
    },



    search(){

      console.log("Recherche lancée")

      this.loading = true;

      this.showSelector = false;

      this.$http.get('/organization?l=m&q=' + encodeURI(this.searchFor)).then(

module/Oscar/src/Oscar/Entity/Organization.php

+1 −0
Original line number Diff line number Diff line
@@ -1117,6 +1117,7 @@ class Organization implements ResourceInterface, IConnectedObject 
            'country' => $this->getCountry(),

            'email' => $this->getEmail(),

            'phone' => $this->getPhone(),

            'type' => $this->getType(),

            'closed' => $this->isClose()

        ];

    }

public/css/oscar.css

+27 −5
Original line number Diff line number Diff line
@@ -12853,8 +12853,8 @@ article.wp h3 { 
  padding-left: 1em;

  top: 1px;

  bottom: 1px;

  right: 50%;

  left: 1px;

  right: 1px;

  left: 3em;

  background: white;

  line-height: 200%;

}
@@ -12862,25 +12862,47 @@ article.wp h3 { 
  cursor: pointer;

}

.oscar-selector .options {

  z-index: 9;

  background: white;

  position: absolute;

  max-height: 15em;

  overflow: hidden;

  overflow-y: scroll;

  min-width: 90%;

  margin-left: 47px;

  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.25);

}

.oscar-selector .options header {

  font-size: 0.9em;

  text-align: center;

  border-bottom: solid #999999 thin;

}

.oscar-selector .options .option {

  border-bottom: solid thin #777;

  cursor: pointer;

  border-bottom: solid thin #ccc;

  border-left: solid 8px white;

  transition: background-color linear 300ms;

  margin: 0 1em 0 0;

}

.oscar-selector .options .option.selected {

  border-left-color: #0b93d5;

  background: #0b93d5 !important;

  color: white;

  text-shadow: -2px 2px 1px rgba(0, 0, 0, 0.5);

  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25);

}

.oscar-selector .options .option.closed {

  background: rgba(193, 210, 210, 0.5);

}

.oscar-selector .options .option.closed .fullname, .oscar-selector .options .option.closed .code {

  text-decoration: line-through;

}

.oscar-selector .options .option.active {

  border-left-color: #0b93d5;

  background: rgba(11, 147, 213, 0.3);

  background-color: rgba(11, 147, 213, 0.3);

}

.oscar-selector .options .option .option-infos {

  border-top: dotted thin #cccccc;

  opacity: 0.7;

}



/*# sourceMappingURL=oscar.css.map */