github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/admin/passwords/App.vue

<template>
  <base-app title="Coffre-fort des mots de passe ACVE">
    <success v-if="output" :output="output"></success>
    <error v-if="output" :output="output"></error>

    <b-modal v-model="showEditPassword" hide-header hide-footer>
      <form-password
        :password="currentPassword"
        @done="onDoneEdit"
      ></form-password>
    </b-modal>

    <b-container class="my-2 mb-3 mx-auto">
      <b-card>
        <b-card-title>
          <b-row no-gutters class="w-100">
            <b-col>
              Mots de passe
            </b-col>
            <b-col class="text-right">
              <b-button
                variant="success"
                @click="startCreatePassword"
                v-b-tooltip.top
                title="Ajouter un mot de passe..."
              >
                <b-icon-plus></b-icon-plus>
                Ajouter
              </b-button>
            </b-col>
          </b-row>
        </b-card-title>
        <b-overlay :show="loading" class="overflow-auto" style="height: 60vh">
          <b-table-lite :items="passwords" :fields="fields" small striped>
            <template v-slot:cell(provenance)="{ item }">
              <a :href="asP(item).provenance" target="_blank">{{
                asP(item).provenance
              }}</a>
            </template>

            <template v-slot:cell(buttons)="{ item }">
              <b-button
                @click="startUpdatePassword(item)"
                size="sm"
                variant="secondary"
                v-b-tooltip.hover.top="'Modifier...'"
              >
                <b-icon-pencil></b-icon-pencil>
              </b-button>
              <b-button
                class="ml-1"
                @click="startDeletePassword(item)"
                size="sm"
                variant="danger"
                v-b-tooltip.right="'Supprimer...'"
              >
                <b-icon-trash></b-icon-trash>
              </b-button>
            </template>
          </b-table-lite>
        </b-overlay>
      </b-card>
    </b-container>
  </base-app>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import BaseApp from "@/BaseApp.vue";
import Success from "@/shared/notifications/Success.vue";
import Error from "@/shared/notifications/Error.vue";

import { C } from "./controller";
import { PublicPassword } from "./types";
import FormPassword from "./FormPassword.vue";

const styleAlignMiddle = { style: "vertical-align:middle;" };

@Component({
  components: { BaseApp, Success, Error, FormPassword }
})
export default class App extends Vue {
  output = C.notifications;
  loading = false;

  fields: {
    key: "buttons" | keyof PublicPassword;
    label: string;
    class?: string;
    tdAttr?: Object;
    thStyle?: Object;
  }[] = [
    { key: "buttons", label: "", thStyle: { width: "100px" } },
    {
      key: "provenance",
      label: "Site",
      class: "text-center",
      tdAttr: styleAlignMiddle
    },
    {
      key: "loggin",
      label: "Identifiant",
      class: "text-center",
      tdAttr: styleAlignMiddle
    },
    {
      key: "password",
      label: "Mot de passe",
      class: "text-center",
      tdAttr: styleAlignMiddle
    },
    { key: "description", label: "Description", tdAttr: styleAlignMiddle }
  ];

  showEditPassword = false;
  currentPassword: PublicPassword | null = null;

  asP = (item: PublicPassword) => item; // template checking
  C = C; // needed for reactivity
  created() {
    this.refresh();
  }

  async refresh() {
    this.loading = true;
    await C.getPasswords();
    this.loading = false;
  }

  get passwords() {
    return Object.values(C.passwords).sort((a, b) =>
      a.provenance.localeCompare(b.provenance)
    );
  }

  startCreatePassword() {
    this.currentPassword = null;
    this.showEditPassword = true;
  }

  startUpdatePassword(item: PublicPassword) {
    this.currentPassword = item;
    this.showEditPassword = true;
  }

  startDeletePassword(item: PublicPassword) {
    this.$bvModal
      .msgBoxConfirm(
        `Confirmer la suppression du mot de passe pour ${item.provenance}`,
        {
          title: "Suppression",
          okVariant: "danger",
          cancelTitle: "Retour"
        }
      )
      .then(value => {
        if (value) {
          this.deletePassword(item);
        }
      });
  }

  onDoneEdit(isCreateMode: boolean, item: PublicPassword) {
    this.showEditPassword = false;
    if (isCreateMode) {
      this.createPassword(item);
    } else {
      this.updatePassword(item);
    }
  }

  async createPassword(item: PublicPassword) {
    this.loading = true;
    await C.createPassword(item);
    this.loading = false;
  }

  async updatePassword(item: PublicPassword) {
    this.loading = true;
    await C.updatePassword(item);
    this.loading = false;
  }

  async deletePassword(item: PublicPassword) {
    this.loading = true;
    await C.deletePassword(item.id);
    this.loading = false;
  }
}
</script>

<style>
.centered {
  vertical-align: middle;
}
</style>