PIDPageApp.vue

<template>
  <div id="wrap">
    <coscine-page-header
      :coscineImage="coscineImage"
      :coscineImageBlack="coscineImageBlack"
      :locale="this.$root.$i18n.locale"
      @changeLocale="changeLocale"
    />
    <div id="CreateProject" class="container-fluid app-content">
      <b-row>
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <div>
            <h5>{{ $t('pidInformationHeadline') }}</h5>
          </div>
          <b-form id="edit_form" @submit.stop.prevent="onSubmit">
            <coscine-form-group labelFor="" label=" ">
              <b-form-text>{{ $t('pidInformationDescription') }}</b-form-text>
            </coscine-form-group>
            <coscine-form-group labelFor="pid" :label="$t('pidLabel')">
              <b-button-group id="pidButtonGroup">
                <b-form-input
                  id="pid"
                  ref="pid"
                  v-model="form.pid"
                  aria-describedby="pidHelp"
                  :placeholder="$t('pid')"
                  :readonly="true"
                />
                <b-button id="copyButton" @click="copyPID()"><b-icon-clipboard /></b-button>
                  <b-tooltip ref="tooltip" target="copyButton" triggers="focus">{{ $t('pidToClipboard') }}</b-tooltip>
              </b-button-group>
            </coscine-form-group>
            <div class="h-divider"></div>
            <div>
              <h5>{{ $t('contactHeadline') }}</h5>
            </div>
            <coscine-form-group labelFor="" label=" ">
              <b-form-text>{{ $t('contactDescription') }}</b-form-text>
            </coscine-form-group>
            <coscine-form-group :mandatory="true" labelFor="name" :label="$t('nameLabel')">
              <b-form-input
                id="name"
                v-model="$v.form.name.$model"
                aria-describedby="nameHelp"
                :state="$v.form.name.$dirty ? !$v.form.name.$error : null"
                :placeholder="$t('name')"
                required="required"
              />
            </coscine-form-group>
            <coscine-form-group :mandatory="true" labelFor="email" :label="$t('emailLabel')">
              <b-form-input
                id="email"
                v-model="$v.form.email.$model"
                aria-describedby="emailHelp"
                :state="$v.form.email.$dirty ? !$v.form.email.$error : null"
                :placeholder="$t('email')"
                required="required"
              />
            </coscine-form-group>
            <coscine-form-group :mandatory="true" labelFor="message" :label="$t('messageLabel')">
              <coscine-form-textarea
                :limit="5000"
                :character="$t('character')"
                id="message"
                v-model="$v.form.message.$model"
                aria-describedby="messageHelp"
                :state="$v.form.message.$dirty ? !$v.form.message.$error : null"
                :placeholder="$t('message')"
                :required="true"
              />
            </coscine-form-group>
            <b-row>
              <b-col class="col-sm-3" role="group"></b-col>
              <b-col class="col-sm-9" role="group">
                <b-form-row>
                  <b-col
                    ><b-form-checkbox id="checkbox-1" v-model="form.sendCopy" name="checkbox-1">
                      {{ $t('receiveCopy') }}
                    </b-form-checkbox></b-col
                  >
                  <b-col
                    ><b-button
                      type="submit"
                      variant="primary"
                      id="sendButton"
                      :disabled="$v.$invalid || !$v.$anyDirty"
                      name="send"
                      @click.prevent="sendMail"
                      style="display: inline"
                      >{{ $t('send') }}</b-button
                    ></b-col
                  >
                </b-form-row>
              </b-col>
            </b-row>
          </b-form>
        </div>
        <div class="col-sm-2"></div>
      </b-row>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { GuidUtil } from '@coscine/app-util';
import { PIDApi } from '@coscine/api-connection';
import {
  CoscinePageHeader,
  CoscineFormGroup,
  CoscineFormTextarea,
} from '@coscine/component-library';
import '@coscine/component-library/dist/index.css';

import { validationMixin } from 'vuelidate';
import { required, minLength, maxLength, email } from 'vuelidate/lib/validators';

import coscineImagePath from './assets/logo-rwth.svg';
import linkWhitePath from './assets/link_white.svg';
import mailGreyPath from './assets/mail_grey.svg';
import phoneGreyPath from './assets/phone_grey.svg';
import faxGreyPath from './assets/fax_grey.svg';

import { ToastPlugin, BIconClipboard } from 'bootstrap-vue';
Vue.use(ToastPlugin);

let scriptPath = '';
let imageEnabled = false;
if (document.currentScript !== undefined) {
  scriptPath = (document.currentScript as any).src as string;
  imageEnabled = true;
}
const scriptUrl = scriptPath === '' ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
const rootUrl = scriptPath.indexOf('/js') !== -1 ? scriptUrl.replace('/js', '') : scriptUrl;

export default Vue.extend({
  name: 'pidpage',
  mixins: [validationMixin],
  components: {
    CoscinePageHeader,
    CoscineFormGroup,
    CoscineFormTextarea,
    BIconClipboard,
  },
  validations: {
    form: {
      name: {
        required,
        maxLength: maxLength(200),
      },
      email: {
        email,
        required,
      },
      message: {
        maxLength: maxLength(5000),
        required,
      },
    },
  },
  computed: {
    cssProps() {
      return {
        '--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat',
        '--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat',
        '--phoneGrey': 'url(' + rootUrl + phoneGreyPath + ') 0px 6px no-repeat',
        '--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat',
      };
    },
  },
  data() {
    return {
      coscineImage: rootUrl + coscineImagePath,
      form: {
        pid: '',
        guid: '',
        sendCopy: true,
        name: '',
        email: '',
        message: '',
      },
    };
  },
  methods: {
    changeLocale() {
      if (this.$root.$i18n.locale === 'en') {
        this.$root.$i18n.locale = 'de';
      } else {
        this.$root.$i18n.locale = 'en';
      }
    },
    copyPID() {
      navigator.clipboard.writeText(this.form.pid);
    },
    sendMail() {
      PIDApi.sendMailToOwner(
        this.form,
        (response: any) => {
          this.makeToast(
            this.$t('toastMessageSuccessBody').toString(),
            this.$t('toastMessageSuccessHeader').toString(),
          );
          this.resetForm();
        },
        (error: any) => {
          this.makeToast(
            this.$t('toastMessageFailureBody').toString(),
            this.$t('toastMessageFailureHeader').toString(),
          );
        },
      );
    },
    makeToast(text: string = 'Message', givenTitle: string = 'Title') {
      this.$bvToast.toast(text, {
        title: givenTitle,
        toaster: 'b-toaster-bottom-right',
        noCloseButton: true,
      });
    },
    resetForm() {
      this.form.sendCopy = true;
      this.form.name = '';
      this.form.email = '';
      this.form.message = '';
      this.$v.$reset();
    },
  },
  created() {
    this.form.guid = GuidUtil.getPIDSuffix();
    this.form.pid = GuidUtil.getPID();
  },
});
</script>

<style scoped>
#wrap {
  width: 100%;
}
#pidButtonGroup {
  width: 100%;
}
#copyButton {
  margin: inherit;
}
#sendButton {
  float: right;
  margin: auto;
}
.list-group-item-action {
  background: var(--linkWhite) !important;
}
#mail.list-group-item-action {
  background: var(--mailGrey) !important;
}
#phone.list-group-item {
  background: var(--phoneGrey) !important;
}
#fax.list-group-item {
  background: var(--faxGrey) !important;
}
.h-divider {
  margin-top: 5px;
  margin-bottom: 10px;
  height: 1px;
  width: 100%;
  border-top: 1px solid #bebbbb;
}

</style>

<style>
body {
  background-color: white;
}
#edit_form .col-form-label {
  font-weight: 700;
}
</style>