github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/inscrits/PanelContraintesDemande.vue (about)

     1  <template>
     2    <div>
     3      <v-dialog v-model="showEditContrainte" max-width="800px">
     4        <v-card>
     5          <v-card-title>Document à remplir</v-card-title>
     6          <v-card-text>
     7            <v-form v-if="editedContrainte != null">
     8              <v-row>
     9                <v-col>
    10                  <v-text-field
    11                    label="Nom"
    12                    v-model="editedContrainte.nom"
    13                    required
    14                  ></v-text-field>
    15                </v-col>
    16              </v-row>
    17              <v-row>
    18                <v-col>
    19                  <v-textarea
    20                    label="Description"
    21                    v-model="editedContrainte.description"
    22                    hint="Cette description sera présentée sur l'espace de suivi des parents."
    23                    placeholder="Optionnelle"
    24                  ></v-textarea>
    25                </v-col>
    26              </v-row>
    27              <v-row>
    28                <v-col>
    29                  <v-text-field
    30                    type="number"
    31                    label="Document temporaire"
    32                    hint="Nombre de jours de validité du document (0 pour un document permanent)."
    33                    v-model.number="editedContrainte.jours_valide"
    34                    :min="0"
    35                    :max="1000"
    36                  ></v-text-field>
    37                </v-col>
    38                <v-col>
    39                  <v-text-field
    40                    type="number"
    41                    label="Nombre maximum de document à rendre"
    42                    hint="Limite le nombre de fichier pouvant être déposé."
    43                    v-model.number="editedContrainte.max_docs"
    44                    :min="1"
    45                    :max="5"
    46                  ></v-text-field>
    47                </v-col>
    48              </v-row>
    49            </v-form>
    50          </v-card-text>
    51          <v-card-actions>
    52            <v-spacer></v-spacer>
    53            <v-btn color="success" @click="save">Enregistrer</v-btn>
    54          </v-card-actions>
    55        </v-card>
    56      </v-dialog>
    57  
    58      <v-dialog v-model="showUpload" max-width="500px">
    59        <v-card>
    60          <v-card-title class="headline">
    61            Modifier le document à remplir
    62          </v-card-title>
    63          <v-card-text>
    64            <v-file-input
    65              label="Fichier"
    66              v-model="uploadedFile"
    67              :prepend-icon="$icons['mdi-paperclip']"
    68              :rules="[v => !!v || 'Document requis.']"
    69              accept=".jpg,.jpeg,.png,.pdf"
    70              show-size
    71            ></v-file-input>
    72  
    73            <v-card-actions>
    74              <v-spacer></v-spacer>
    75              <v-btn @click="uploadDocumentDone" :disabled="uploadedFile == null">
    76                Remplacer
    77              </v-btn>
    78            </v-card-actions>
    79          </v-card-text>
    80        </v-card>
    81      </v-dialog>
    82  
    83      <v-dialog v-model="showConfirmeSupprime" max-width="600px">
    84        <v-card>
    85          <v-card-title>Suppression d'une demande</v-card-title>
    86          <v-card-text>
    87            Confirmez-vous la suppression de la demande de document ? <br />
    88            Attention, tous les <b>documents déjà déposés</b> (via les espaces de
    89            suivis) seront supprimés !
    90          </v-card-text>
    91          <v-card-actions>
    92            <v-btn @click="showConfirmeSupprime = false">Retour</v-btn>
    93            <v-spacer></v-spacer>
    94            <v-btn color="error" @click="doDeleteContrainte">Confirmer</v-btn>
    95          </v-card-actions>
    96        </v-card>
    97      </v-dialog>
    98  
    99      <v-row>
   100        <v-col cols="5">
   101          <v-toolbar dense>
   102            <v-toolbar-title>Documents à remplir</v-toolbar-title>
   103            <v-spacer></v-spacer>
   104            <v-toolbar-items>
   105              <tooltip-btn
   106                tooltip="Ajouter un document à remplir..."
   107                color="green"
   108                icon
   109                @click="createContrainteInit"
   110              >
   111                <v-icon>{{ $icons["mdi-plus"] }}</v-icon>
   112              </tooltip-btn>
   113            </v-toolbar-items>
   114          </v-toolbar>
   115          <v-list dense>
   116            <v-list-item-group>
   117              <v-list-item
   118                v-for="contrainte in contraintes"
   119                :key="contrainte.id"
   120                @click="editContrainteInit(contrainte)"
   121              >
   122                <v-list-item-icon class="align-self-center">
   123                  <tooltip-btn
   124                    v-if="contrainte.id_personne.Valid"
   125                    tooltip="Retirer cette demande"
   126                    icon
   127                    small
   128                    color="red"
   129                    @click.stop="deleteContrainte(contrainte)"
   130                  >
   131                    <v-icon>{{ $icons["mdi-delete"] }}</v-icon>
   132                  </tooltip-btn>
   133                </v-list-item-icon>
   134                <v-list-item-content>
   135                  <span>
   136                    {{ contrainte.nom }}
   137                    <v-chip
   138                      v-if="!contrainte.id_personne.Valid"
   139                      color="grey"
   140                      small
   141                      class="ml-2"
   142                    >
   143                      Par défaut
   144                    </v-chip>
   145                  </span>
   146                </v-list-item-content>
   147                <v-list-item-action>
   148                  <v-row no-gutters>
   149                    <v-col>
   150                      <tooltip-btn
   151                        v-if="contrainte.id_document.Valid"
   152                        tooltip="Télécharger le document à remplir"
   153                        :href="contrainte.document.url_download"
   154                        icon
   155                        target="_blank"
   156                        @click.stop
   157                      >
   158                        <v-icon>{{ $icons["mdi-download"] }}</v-icon>
   159                      </tooltip-btn>
   160                    </v-col>
   161                    <v-col>
   162                      <tooltip-btn
   163                        v-if="contrainte.id_personne.Valid"
   164                        :tooltip="
   165                          contrainte.id_document.Valid
   166                            ? 'Remplacer le document à remplir'
   167                            : 'Ajouter un document à remplir'
   168                        "
   169                        @click.stop="uploadDocument(contrainte)"
   170                        icon
   171                        :color="
   172                          contrainte.id_document.Valid ? 'secondary' : 'green'
   173                        "
   174                      >
   175                        <v-icon>{{ $icons["mdi-upload"] }}</v-icon>
   176                      </tooltip-btn>
   177                    </v-col>
   178                    <v-col>
   179                      <tooltip-btn
   180                        v-if="isLinkedDocumentDeletable(contrainte)"
   181                        tooltip="Supprimer le document à remplir"
   182                        @click.stop="deleteDocument(contrainte)"
   183                        icon
   184                        color="warning"
   185                      >
   186                        <v-icon>{{ $icons["mdi-file-cancel"] }}</v-icon>
   187                      </tooltip-btn>
   188                    </v-col>
   189                  </v-row>
   190                </v-list-item-action>
   191              </v-list-item>
   192            </v-list-item-group>
   193          </v-list>
   194        </v-col>
   195        <v-col>
   196          <v-toolbar dense>
   197            <v-toolbar-title>
   198              Demande aux participants
   199            </v-toolbar-title>
   200            <v-spacer></v-spacer>
   201            <v-toolbar-items>
   202              <tooltip-btn
   203                tooltip="Enregistrer les demandes sur le serveur"
   204                icon
   205                color="secondary"
   206                @click="saveGroupeContraintes"
   207              >
   208                <v-icon>{{ $icons["mdi-content-save"] }}</v-icon>
   209              </tooltip-btn>
   210            </v-toolbar-items>
   211          </v-toolbar>
   212          <v-list dense>
   213            <!-- pour tout le séjour -->
   214            <v-list-item>
   215              <v-row no-gutters>
   216                <v-col class="align-self-center" cols="4">
   217                  {{ "Pour tous" }}
   218                </v-col>
   219                <v-col
   220                  ><v-select
   221                    label="Demandes"
   222                    multiple
   223                    chips
   224                    v-model="tmpCampContraintes"
   225                    :items="contraintesItems"
   226                  >
   227                  </v-select>
   228                </v-col>
   229              </v-row>
   230            </v-list-item>
   231            <!-- par groupes -->
   232            <v-list-item v-for="groupe in groupes" :key="groupe.id">
   233              <v-row no-gutters>
   234                <v-col class="align-self-center" cols="4">
   235                  Pour le groupe <b>{{ groupe.nom }}</b>
   236                </v-col>
   237                <v-col
   238                  ><v-select
   239                    label="Demandes"
   240                    multiple
   241                    chips
   242                    v-model="tmpGroupeContraintes[groupe.id]"
   243                    :items="contraintesItemsNonPourTous"
   244                    no-data-text="Aucun document à demander"
   245                  >
   246                  </v-select
   247                ></v-col>
   248              </v-row>
   249            </v-list-item>
   250          </v-list>
   251        </v-col>
   252      </v-row>
   253    </div>
   254  </template>
   255  
   256  <script lang="ts">
   257  import Component from "vue-class-component";
   258  import TooltipBtn from "@/components/TooltipBtn.vue";
   259  import { Base } from "./PanelContraintesDemande";
   260  
   261  @Component({
   262    components: { TooltipBtn }
   263  })
   264  export default class PanelContraintesDemande extends Base {}
   265  </script>
   266  
   267  <style scoped></style>