github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/vote/admin/EditCandidats.vue (about)

     1  <template>
     2    <b-form-tags
     3      @input="vote.candidats = choixToCandidats($event)"
     4      :value="candidatsToChoix(vote.candidats)"
     5      duplicate-tag-text="Ce choix est déjà présent"
     6      no-outer-focus
     7      class="mb-2"
     8    >
     9      <template
    10        v-slot="{
    11          tags,
    12          inputAttrs,
    13          inputHandlers,
    14          tagVariant,
    15          addTag,
    16          removeTag
    17        }"
    18      >
    19        <b-input-group class="mb-2">
    20          <b-form-input
    21            v-bind="inputAttrs"
    22            v-on="inputHandlers"
    23            placeholder="Ajouter un choix..."
    24            class="form-control"
    25            :list="datalistId"
    26          ></b-form-input>
    27          <b-form-datalist
    28            :id="datalistId"
    29            :options="completion"
    30          ></b-form-datalist>
    31  
    32          <b-input-group-append>
    33            <b-button @click="addTag()" variant="primary"
    34              >Ajouter un choix</b-button
    35            >
    36          </b-input-group-append>
    37        </b-input-group>
    38        <div class="d-inline-block" style="font-size: 1.5rem;">
    39          <b-form-tag
    40            v-for="tag in tags"
    41            @remove="removeTag(tag)"
    42            :key="tag"
    43            :title="tag"
    44            :variant="tagVariant"
    45            class="mr-1"
    46            >{{ tag }}
    47          </b-form-tag>
    48        </div>
    49      </template>
    50    </b-form-tags>
    51  
    52    <!-- <b-form-tags
    53      add-button-text="Ajouter un choix"
    54      tag-remove-label="Supprimer"
    55      duplicate-tag-text="Ce choix est déjà présent"
    56      placeholder="Ajouter un choix..."
    57  
    58    ></b-form-tags> -->
    59  </template>
    60  
    61  <script lang="ts">
    62  import Vue from "vue";
    63  import Component from "vue-class-component";
    64  import { Candidat, VoteAdmin } from "@/shared/logic/types";
    65  
    66  const EditCandidatsProps = Vue.extend({
    67    props: {
    68      vote: Object as () => VoteAdmin,
    69      completion: Array as () => string[]
    70    }
    71  });
    72  
    73  @Component({})
    74  export default class EditCandidats extends EditCandidatsProps {
    75    get datalistId() {
    76      return "data-list-vote-" + this.vote.id;
    77    }
    78  
    79    choixToCandidats(v: string[] | null) {
    80      return (v || []).map(c => {
    81        const out: Candidat = { id: -1, id_vote: -1, label: c };
    82        return out;
    83      });
    84    }
    85  
    86    candidatsToChoix(v: Candidat[] | null) {
    87      return (v || []).map(c => c.label);
    88    }
    89  }
    90  </script>
    91  
    92  <style scoped></style>