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

     1  <template>
     2    <div class="ma-5">
     3      <div v-if="initialLoad">
     4        <v-alert type="info" :value="true">
     5          Connexion au serveur JOOMEO...
     6          <v-progress-linear :indeterminate="true"> </v-progress-linear>
     7        </v-alert>
     8      </div>
     9      <div v-else-if="data != null">
    10        <div v-if="data.meta.album_id">
    11          <v-dialog
    12            v-if="supprimeItem != null"
    13            v-model="confirmeSupprime"
    14            max-width="300"
    15          >
    16            <v-card>
    17              <v-card-title class="headline">Retirer le contact</v-card-title>
    18              <v-card-text>
    19                Etes-vous sûr d'enlever
    20                <b>{{ supprimeItem.mail }}</b> des contacts de cet album ?
    21                <br />Attention, le contact ne sera pas averti !
    22              </v-card-text>
    23              <v-card-actions>
    24                <v-btn text @click="confirmeSupprime = false">Annuler</v-btn>
    25                <v-spacer></v-spacer>
    26                <v-btn text @click="retireContact" class="warning">Retirer</v-btn>
    27              </v-card-actions>
    28            </v-card>
    29          </v-dialog>
    30  
    31          <v-dialog
    32            v-if="setUploaderItem != null"
    33            v-model="confirmeSetUploader"
    34            max-width="300"
    35          >
    36            <v-card>
    37              <v-card-title class="headline">Droit d'écriture</v-card-title>
    38              <v-card-text>
    39                Etes-vous sûr d'autoriser
    40                <b>{{ setUploaderItem.mail }}</b> à ajouter et supprimer des
    41                photos de l'album ? (Le contact n'en sera pas averti.)
    42              </v-card-text>
    43              <v-card-actions>
    44                <v-btn text @click="confirmeSetUploader = false">Annuler</v-btn>
    45                <v-spacer></v-spacer>
    46                <v-btn text @click="setUploader" class="success">Confirmer</v-btn>
    47              </v-card-actions>
    48            </v-card>
    49          </v-dialog>
    50  
    51          <v-dialog v-model="showInviteContacts" max-width="800" height="95vh">
    52            <invite-contacts
    53              @invite="invite"
    54              :mailsEquipiers="data.mails_equipiers || []"
    55              :mailsResponsables="data.mails_responsables || []"
    56              :mailsInscrits="data.mails_inscrits || []"
    57            ></invite-contacts>
    58          </v-dialog>
    59  
    60          <v-dialog v-model="showErrorsAjout" max-width="700">
    61            <v-card>
    62              <v-card-title class="error headline"
    63                >Erreurs pendant l'invitation
    64              </v-card-title>
    65              <v-card-text>
    66                <p>
    67                  Certains contacts n'ont pas pu être ajoutés. Voici les erreurs
    68                  survenues :
    69                </p>
    70                <v-list>
    71                  <v-list-item v-for="error in errorsAjout" :key="error">{{
    72                    error
    73                  }}</v-list-item>
    74                </v-list>
    75              </v-card-text>
    76            </v-card>
    77          </v-dialog>
    78  
    79          <v-toolbar dense>
    80            <v-menu open-on-hover bottom offset-y>
    81              <template v-slot:activator="{ on }">
    82                <v-btn v-on="on" icon>
    83                  <v-icon>{{ $icons["mdi-information-outline"] }}</v-icon>
    84                </v-btn>
    85              </template>
    86              <v-card>
    87                <v-card-text>
    88                  Album JOOMEO :
    89                  <b>{{ data.meta.label }}</b>
    90                  <br />
    91                  <b>{{ data.meta.nb_files }}</b> photo(s) <br />Album créé le
    92                  <b>{{ date(data.meta.date) }}</b>
    93                </v-card-text>
    94              </v-card>
    95            </v-menu>
    96            <v-toolbar-title>Contacts de l'album</v-toolbar-title>
    97            <v-spacer></v-spacer>
    98  
    99            <v-toolbar-items>
   100              <tooltip-btn
   101                tooltip="Accéder à l'espace JOOMEO, pour ajouter des photos."
   102                v-if="data != null"
   103                text
   104                :href="data.space_url"
   105                target="_blank"
   106                >JOOMEO
   107              </tooltip-btn>
   108              <v-divider vertical></v-divider>
   109              <tooltip-btn
   110                tooltip="Ajouter les parents comme contacts de l'album, avec un envoi de
   111                mail."
   112                @click="showInviteContacts = true"
   113                text
   114              >
   115                <v-icon>{{ $icons["mdi-account-plus"] }}</v-icon
   116                >Inviter...
   117              </tooltip-btn>
   118            </v-toolbar-items>
   119          </v-toolbar>
   120          <v-data-table
   121            :items="data.contacts"
   122            :headers="headers"
   123            hide-default-footer
   124            :items-per-page="9999"
   125          >
   126            <template slot="no-data">
   127              <v-alert :value="true" type="info" class="my-2"
   128                >Aucun contact n'est encore invité à lire ou modifier cet
   129                album.</v-alert
   130              >
   131            </template>
   132            <template v-slot:[`item.droit`]="{ item }">
   133              <span :style="{ fontWeight: item.allowupload ? 'bold' : 'unset' }">
   134                {{ item.allowupload ? "Ecriture" : "Lecture" }}
   135              </span>
   136            </template>
   137            <template v-slot:[`item.actions`]="{ item }">
   138              <tooltip-btn
   139                :tooltip="
   140                  `Enlever l'accès à l'album pour <b>` + item.mail + '</b>.'
   141                "
   142                small
   143                icon
   144                class="mr-2"
   145                color="warning"
   146                @click="
   147                  () => {
   148                    supprimeItem = item;
   149                    confirmeSupprime = true;
   150                  }
   151                "
   152              >
   153                <v-icon> {{ $icons["mdi-close"] }} </v-icon>
   154              </tooltip-btn>
   155  
   156              <tooltip-btn
   157                :tooltip="
   158                  'Permettre à <b>' +
   159                    item.mail +
   160                    `</b> d'ajouter/supprimer des photos
   161                sur l'album.`
   162                "
   163                small
   164                icon
   165                color="info"
   166                @click="
   167                  () => {
   168                    setUploaderItem = item;
   169                    confirmeSetUploader = true;
   170                  }
   171                "
   172              >
   173                <v-icon> {{ $icons["mdi-account-circle"] }}</v-icon>
   174              </tooltip-btn>
   175            </template>
   176          </v-data-table>
   177        </div>
   178        <v-alert v-else type="warning" :value="true">
   179          Aucun album JOOMEO n'est associé au camp {{ nomCamp }}. <br />Si vous
   180          pensez que c'est anormal, vous pouvez
   181          <a :href="`mailto:contact@acve.asso.fr?subject=ALBUM JOOMEO ${nomCamp}`"
   182            >contacter l'administrateur</a
   183          >.
   184        </v-alert>
   185      </div>
   186    </div>
   187  </template>
   188  
   189  <script lang="ts">
   190  import Vue from "vue";
   191  import Component from "vue-class-component";
   192  import { C } from "../logic/controller";
   193  import { JoomeoData, ContactPermission } from "@/logic/types";
   194  import { Formatter } from "../logic/formatter";
   195  import InviteContacts from "../components/photos/InviteContacts.vue";
   196  import TooltipBtn from "@/components/TooltipBtn.vue";
   197  
   198  @Component({
   199    components: { InviteContacts, TooltipBtn }
   200  })
   201  export default class Photos extends Vue {
   202    initialLoad = false;
   203    confirmeSupprime = false;
   204    confirmeSetUploader = false;
   205    supprimeItem: ContactPermission | null = null;
   206    setUploaderItem: ContactPermission | null = null;
   207  
   208    showInviteContacts = false;
   209    showErrorsAjout = false;
   210    errorsAjout: string[] = [];
   211  
   212    data: JoomeoData | null = null;
   213  
   214    date = Formatter.date;
   215    headers = [
   216      { text: "Email", value: "mail" },
   217      { text: "Login Joomeo", value: "login" },
   218      { text: "Mot de passe ", value: "password" },
   219      { text: "Permission", value: "droit" },
   220      { text: "", value: "actions" }
   221    ];
   222  
   223    get nomCamp() {
   224      return C.camp.nom_camp;
   225    }
   226  
   227    async created() {
   228      this.initialLoad = true;
   229  
   230      const data = await C.getPhotos();
   231      if (data == undefined) return;
   232      C.notifications.success = "";
   233      this.data = data;
   234      this.initialLoad = false;
   235    }
   236  
   237    async invite(sendMail: boolean, mails: string[]) {
   238      const thisdata = this.data;
   239      if (thisdata == null) return;
   240      this.showInviteContacts = false;
   241  
   242      const data = await C.addContacts({ send_mail: sendMail, mails });
   243      if (data == undefined) return;
   244  
   245      thisdata.contacts = data.contacts;
   246      this.errorsAjout = data.errors || [];
   247      this.showErrorsAjout = this.errorsAjout.length > 0;
   248      if (!this.showErrorsAjout) {
   249        C.notifications.success = "Les contacts ont bien étés ajoutés.";
   250      }
   251    }
   252    async retireContact() {
   253      const thisdata = this.data;
   254      if (thisdata == null) return;
   255      this.confirmeSupprime = false;
   256      if (this.supprimeItem == null) return;
   257      const data = await C.deleteContact(this.supprimeItem.contact_id);
   258      if (data == undefined) return;
   259      thisdata.contacts = data.contacts;
   260      C.notifications.success = "Contact retiré avec succès.";
   261    }
   262  
   263    async setUploader() {
   264      const thisdata = this.data;
   265      if (thisdata == null) return;
   266      this.confirmeSetUploader = false;
   267      if (this.setUploaderItem == null) return;
   268      const data = await C.setUploader(this.setUploaderItem.contact_id);
   269      if (data == undefined) return;
   270      thisdata.contacts = data.contacts;
   271      const errSuperContact = data.err_super_contact;
   272      if (errSuperContact) {
   273        const msg = `Le contact a bien la permission en écriture. <br/>
   274              En revanche, il ne pourra pas supprimer ou commenter les photos. <br/>
   275              <i>Détails : ${errSuperContact}</i>`;
   276        C.notifications.error = {
   277          kind: "Permission incomplète",
   278          messageHtml: msg,
   279          code: 0
   280        };
   281        C.notifications.progress = false;
   282      } else {
   283        C.notifications.success = "Permission modifiée avec succès.";
   284      }
   285    }
   286  }
   287  </script>
   288  
   289  <style scoped></style>