Skip to content
Snippets Groups Projects
Select Git revision
  • 1fd705d3506ebbc5239511b224ebc00b063277f3
  • master default protected
  • gitkeep
  • dev protected
  • Issue/1870-publicPrivateVisibility
  • Sprint/2022-01
  • Sprint/2021-22
  • Sprint/2021-21
  • Issue/0039-participatingOrganizationsSearch
  • Sprint/2021-19
  • Sprint/2021-16
  • Product/1666-removeRadioButtons
  • Topic/1686-removeRadioButtons
  • Sprint/2021-08
  • Hotfix/1475-projectCreateSpinner
  • Sprint/2021-05
  • Hotfix/1376-projectCreation
  • Sprint/2021-02
  • Product/1180-genericOrganizationMembershipFunction
  • Topic/1281-genericOrganizationMembershipFunction
  • Product/1273-CleanUpUserProfileProjectCreation
  • v1.16.0
  • v1.15.2
  • v1.15.1
  • v1.15.0
  • v1.14.0
  • v1.13.2
  • v1.13.1
  • v1.13.0
  • v1.12.0
  • v1.11.1
  • v1.11.0
  • v1.10.1
  • v1.10.0
  • v1.9.1
  • v1.9.0
  • v1.8.1
  • v1.8.0
  • v1.7.0
  • v1.6.1
  • v1.6.0
41 results

CreateProject.vue

  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    CreateProject.vue 26.47 KiB
    <template>
      <div id="CreateProject" class="container">
        <b-row>
          <div class="col-sm-2"></div>
          <div class="col-sm-8">
            <b-form id="edit_form" @submit.stop.prevent="onSubmit">
              <b-row v-show="isNewProject && isRWTHMember">
                <div class="col-sm-3"></div>
                <div class="col-sm-9">{{ $t('affliliationNotification') }}</div>
              </b-row>
              <b-form-group
                class="mandatory"
                label-for="ProjectName"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectNameLabel')"
              >
                <b-form-input
                  id="ProjectName"
                  v-model="$v.form.ProjectName.$model"
                  @input="translateProjectNameToDisplayName"
                  aria-describedby="projectNameHelp"
                  :state="$v.form.ProjectName.$dirty ? !$v.form.ProjectName.$error : null"
                  :placeholder="$t('projectName')"
                  maxlength="200"
                  required="required"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
                <div class="invalid-tooltip">{{ $t('projectNameHelp') }}</div>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="DisplayName"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('displayNameLabel')"
              >
                <b-form-input
                  id="DisplayName"
                  v-model="$v.form.DisplayName.$model"
                  @input="lockDisplayName"
                  aria-describedby="displayNameHelp"
                  :state="$v.form.DisplayName.$dirty ? !$v.form.DisplayName.$error : null"
                  :placeholder="$t('displayName')"
                  maxlength="25"
                  required="required"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
                <div class="invalid-tooltip">{{ $t('displayNameHelp') }}</div>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="Description"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectDescriptionLabel')"
              >
                <b-form-textarea
                  id="Description"
                  v-model="$v.form.Description.$model"
                  aria-describedby="DescriptionHelp"
                  :state="$v.form.Description.$dirty ? !$v.form.Description.$error : null"
                  :placeholder="$t('projectDescription')"
                  maxlength="5000"
                  required="required"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
                <div class="invalid-tooltip">{{ $t('projectDescriptionHelp') }}</div>
              </b-form-group>
              <!-- copy metadata from parent -->
              <div class="h-divider"></div>
              <div>
                <h5>{{ $t('activatedImportFromParent') }}</h5>
              </div>
              <div v-show="copyMetadataLabel !== ''">
                <b-form-group label-for="CopyData" label-cols-sm="3" label-align-sm="right" :label="copyMetadataLabel">
                  <b-button
                    variant="secondary"
                    id="project_copy_button"
                    @click.prevent="clickCopyMetadata"
                    v-bind:disabled="!(this.isOwner || isNewProject)"
                    >{{ $t('copyMetadataButton') }}</b-button
                  >
                </b-form-group>
              </div>
              <b-form-group
                class="mandatory"
                label-for="PrincipleInvestigators"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectPrincipleInvestigatorsLabel')"
              >
                <b-form-input
                  id="PrincipleInvestigators"
                  v-model="$v.form.PrincipleInvestigators.$model"
                  aria-describedby="principleInvestigatorsHelp"
                  :state="$v.form.PrincipleInvestigators.$dirty ? !$v.form.PrincipleInvestigators.$error : null"
                  :placeholder="$t('projectPrincipleInvestigators')"
                  maxlength="500"
                  required="required"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
                <div class="invalid-tooltip">{{ $t('projectPrincipleInvestigatorsHelp') }}</div>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="StartDate"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectStartLabel')"
              >
                <datepicker
                  id="StartDate"
                  :language="datepickerLanguage[$i18n.locale]"
                  v-model="form.StartDate"
                  :calendar-button="true"
                  calendar-button-icon="material-icons"
                  calendar-button-icon-content="date_range"
                  :placeholder="$t('projectStart')"
                  :bootstrap-styling="true"
                  required="required"
                  :full-month-name="true"
                  format="dd MMMM yyyy"
                  @input="startDateSelected"
                  @selected="startDateSelected"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                >
                </datepicker>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="EndDate"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectEndLabel')"
              >
                <datepicker
                  id="EndDate"
                  :language="datepickerLanguage[$i18n.locale]"
                  v-model="form.EndDate"
                  :disabled-dates="disabledEndDates"
                  :calendar-button="true"
                  calendar-button-icon="material-icons"
                  calendar-button-icon-content="date_range"
                  :placeholder="$t('projectEnd')"
                  :bootstrap-styling="true"
                  required="required"
                  :full-month-name="true"
                  format="dd MMMM yyyy"
                  @input="dateSelected"
                  @selected="dateSelected"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="Discipline"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectDisciplineLabel')"
              >
                <multiselect
                  id="Discipline"
                  v-model="form.Discipline"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                  :options="disciplines"
                  :multiple="true"
                  :hide-selected="true"
                  :label="disciplineLabel"
                  :track-by="disciplineLabel"
                  :placeholder="$t('projectDiscipline')"
                >
                  <template slot="singleLabel" slot-scope="props" v-bind:disabled="!(this.isOwner || isNewProject)">
                    {{ props.option[disciplineLabel] }}
                  </template>
                  <template slot="option" slot-scope="props" v-bind:disabled="!(this.isOwner || isNewProject)">
                    {{ props.option[disciplineLabel] }}
                  </template>
                </multiselect>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="Organization"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectOrganizationLabel')"
              >
                <multiselect
                  id="Organization"
                  v-model="form.Organization"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                  :options="organizations"
                  :multiple="true"
                  :loading="loadingOrganizations"
                  :hide-selected="true"
                  label="displayName"
                  track-by="url"
                  :placeholder="$t('projectOrganization')"
                  @search-change="triggerFetchOptions"
                >
                  <template slot="singleLabel" slot-scope="props" v-bind:disabled="!(this.isOwner || isNewProject)">
                    {{ props.option.displayName }}
                  </template>
                  <template slot="option" slot-scope="props" v-bind:disabled="!(this.isOwner || isNewProject)">
                    {{ props.option.displayName }}
                  </template>
                  <template slot="noOptions">
                    {{ $t('projectOrganizationNoOptions') }}
                  </template>
                </multiselect>
              </b-form-group>
              <b-form-group
                label-for="Keywords"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectKeywordsLabel')"
              >
                <multiselect
                  id="Keywords"
                  v-model="form.Keywords"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                  :options="keywordoptions"
                  :placeholder="$t('projectKeywords')"
                  :multiple="true"
                  :taggable="true"
                  :tag-placeholder="$t('tagPlaceholder')"
                  @tag="addTag"
                >
                </multiselect>
              </b-form-group>
              <b-form-group
                class="mandatory"
                label-for="Visibility"
                label-cols-sm="3"
                label-align-sm="right"
                :label="$t('projectVisibilityLabel')"
                v-bind:disabled="!(this.isOwner || isNewProject)"
              >
                <b-form-radio-group
                  v-model="form.Visibility.id"
                  :options="visibilities"
                  name="radios-stacked"
                  stacked
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                ></b-form-radio-group>
              </b-form-group>
              <b-form-group label-for="GrantId" label-cols-sm="3" label-align-sm="right" :label="$t('projectGrantIdLabel')">
                <b-form-input
                  id="GrantId"
                  v-model="$v.form.GrantId.$model"
                  aria-describedby="grantIdHelp"
                  :state="$v.form.GrantId.$dirty ? !$v.form.GrantId.$error : null"
                  :placeholder="$t('projectGrantId')"
                  maxlength="500"
                  required="required"
                  v-bind:disabled="!(this.isOwner || isNewProject)"
                />
                <div class="invalid-tooltip">{{ $t('projectGrantIdHelp') }}</div>
              </b-form-group>
              <div class="h-divider"></div>
              <div>
                <h5>{{ $t('activatedFeaturesHeadline') }}</h5>
              </div>
              <div>
                <b-form-group
                  v-for="feature in $v.features.$each.$iter"
                  :key="feature.id.$model"
                  :label-for="feature.id.$model"
                  label-cols-sm="3"
                  label-align-sm="right"
                  :label="feature.$model[language]"
                >
                  <b-form-checkbox :id="feature.id.$model" v-model="feature.activated.$model" switch></b-form-checkbox>
                </b-form-group>
              </div>
              <b-form-group>
                <b-button
                  type="button"
                  variant="light"
                  name="archive"
                  id="project_archive_button"
                  disabled
                  @click.prevent="clickArchive"
                  v-show="isOwner || isNewProject"
                  >{{ $t('archive') }}</b-button
                >
                <b-button
                  type="button"
                  variant="light"
                  id="project_clear_button"
                  @click.prevent="clickClearForm"
                  @click="$v.form.$reset"
                  v-show="isOwner || isNewProject"
                  >{{ $t('clearFormButton') }}</b-button
                >
                <DeleteModal
                  :projectId="projectId"
                  :displayName="form.DisplayName"
                  :projectParentId="form.ParentId"
                  :languageLocale="languageLocale"
                  style="display: inline;"
                  v-show="isOwner"
                ></DeleteModal>
                <b-button
                  type="submit"
                  variant="primary"
                  class="btn-float-right"
                  :disabled="$v.$invalid || isWaitingForResponse || !$v.$anyDirty"
                  name="save"
                  @click.prevent="clickSave"
                  v-show="isOwner || isNewProject"
                  style="display: inline;"
                  >{{ $t('save') }}</b-button
                >
              </b-form-group>
            </b-form>
            <loading
              :active.sync="isWaitingForResponse"
              :can-cancel="false"
              :height="128"
              :width="128"
              :z-index="1500"
              :color="color"
              :is-full-page="true"
            ></loading>
          </div>
          <div class="col-sm-2"></div>
        </b-row>
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    import Datepicker from 'vuejs-datepicker';
    import { de, en } from 'vuejs-datepicker/dist/locale';
    import { validationMixin } from 'vuelidate';
    import { required, minLength, maxLength } from 'vuelidate/lib/validators';
    import tag_inputs_helper from './utils/tag_inputs_helper';
    import {
      ProjectApi,
      ProjectRoleApi,
      DisciplineApi,
      OrganizationApi,
      VisibilityApi,
      ActivatedFeaturesApi,
    } from '@coscine/api-connection';
    import { GuidUtil, LinkUtil } from '@coscine/app-util';
    
    import VueI18n from 'vue-i18n';
    
    import BootstrapVue from 'bootstrap-vue';
    import '@voerro/vue-tagsinput/dist/style.css';
    
    import Multiselect from 'vue-multiselect';
    import 'vue-multiselect/dist/vue-multiselect.min.css';
    
    import Loading from 'vue-loading-overlay';
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    import DeleteModal from './components/DeleteModal.vue';
    
    Vue.use(BootstrapVue);
    Vue.use(VueI18n);
    
    const i18n = new VueI18n({
      locale: 'en',
      messages: coscine.i18n['project-creation'],
      silentFallbackWarn: true,
    });
    
    function checkKeywords(value: any) {
      return tag_inputs_helper.checkKeywords(value, 1000);
    }
    
    export default Vue.extend({
      i18n,
      mixins: [validationMixin],
      name: 'CreateProject',
      components: {
        Datepicker,
        Multiselect,
        DeleteModal,
        Loading,
      },
      validations: {
        form: {
          ProjectName: {
            required,
            maxLength: maxLength(200),
          },
          DisplayName: {
            required,
            maxLength: maxLength(25),
          },
          Description: {
            required,
            maxLength: maxLength(5000),
          },
          StartDate: {
            required,
          },
          EndDate: {
            required,
          },
          PrincipleInvestigators: {
            required,
            maxLength: maxLength(500),
          },
          Discipline: {
            required,
          },
          Organization: {
            required,
          },
          Keywords: {
            checkKeywords,
          },
          Visibility: {
            required,
          },
          GrantId: {
            maxLength: maxLength(500),
          },
        },
        features: {
          $each: {
            activated: {
              required,
            },
            id: {
              required,
            },
          },
        },
      },
      data() {
        return {
          datepickerLanguage: {
            de,
            en,
          },
          language: this.$props.languageLocale,
          isNewProject: false,
          isOwner: false,
          isRWTHMember: false,
          isWaitingForResponse: false,
          color: '#00549f',
          displayNameIsLocked: false,
          disciplineLabel: 'displayNameEn',
          form: {
            ProjectName: '',
            DisplayName: '',
            Description: '',
            PrincipleInvestigators: '',
            StartDate: new Date(),
            EndDate: new Date(),
            Discipline: [] as object[],
            Organization: [] as Organization[],
            Keywords: [] as object[],
            Visibility: {},
            GrantId: '',
            ParentId: String,
          },
          initialState: {
            ProjectName: '',
            DisplayName: '',
            Description: '',
            PrincipleInvestigators: '',
            StartDate: new Date(),
            EndDate: new Date(),
            Discipline: [] as object[],
            Organization: [] as Organization[],
            Keywords: [] as object[],
            Visibility: {},
            GrantId: '',
            ParentId: String,
          },
          disciplines: [] as object[],
          organizations: [] as Organization[],
          visibilities: [] as object[],
          keywordoptions: [] as object[],
          disabledEndDates: { to: new Date(1000, 1, 1) },
          features: [] as object[],
          queryTimer: 0,
          // --- data for copyMetadata ----
          copyMetadataLabel: '',
          parentData: {},
          loadingOrganizations: false,
        };
      },
      props: {
        projectId: String,
        parentId: String,
        languageLocale: {
          default: 'en',
          type: String,
        },
      },
      watch: {
        'form.Discipline'(newVal, oldVal) {
          if (oldVal.length > 0) {
            this.$v.form!.Discipline!.$touch();
          }
        },
        'form.Organization'(newVal, oldVal) {
          if (oldVal.length > 0) {
            this.$v.form!.Organization!.$touch();
          }
        },
        'form.Keywords'(newVal, oldVal) {
          if (oldVal.length > 0) {
            this.$v.form!.Keywords!.$touch();
          }
        },
      },
      methods: {
        addTag(newTag: any) {
          this.form.Keywords.push(newTag);
          this.keywordoptions.push(newTag);
        },
        clickClearForm() {
          this.tranferFormValues(this.initialState, this.form);
          if (this.isNewProject) {
            this.displayNameIsLocked = false;
          }
        },
        checkOwnership(projectRoles: any) {
          const thisComponent = this;
          for (const projectRole in projectRoles) {
            if (projectRoles[projectRole].role.displayName === 'Owner') {
              thisComponent.isOwner = true;
            }
          }
        },
        clickSave() {
          this.$v.$touch();
          if (this.$v.$anyError || !this.$v.$anyDirty) {
            return;
          }
          tag_inputs_helper.parseKeywords(this.form, ';');
    
          if (this.$props.parentId !== null && this.$props.parentId !== '') {
            this.form.ParentId = this.$props.parentId;
          }
          if (!this.isWaitingForResponse) {
            this.isWaitingForResponse = true;
            if (this.isNewProject) {
              ProjectApi.storeProject(this.form, (response: any) => {
                // activate initial features
                for (const feature of this.features) {
                  if ((feature as any).activated) {
                    ActivatedFeaturesApi.activateFeature(response.data.id, (feature as any).id);
                  }
                }
    
                LinkUtil.redirectToExternalProject(response.data.slug);
                this.handleAfterSave();
              });
            } else {
              ProjectApi.updateProject(this.projectId, this.form, (response: any) => {
                // update features
                for (const feature of this.features) {
                  if ((feature as any).activated) {
                    ActivatedFeaturesApi.activateFeature(this.projectId, (feature as any).id);
                  } else {
                    ActivatedFeaturesApi.deactivateFeature(this.projectId, (feature as any).id);
                  }
                }
    
                response.data === 1 ? LinkUtil.redirectToProject('EditProject') : LinkUtil.redirectToRoot();
                this.handleAfterSave();
              });
            }
          }
        },
        handleAfterSave() {
          this.isWaitingForResponse = false;
          this.$v.$reset();
        },
        translateProjectNameToDisplayName() {
          if (this.displayNameIsLocked) {
            return;
          }
          this.form.DisplayName = this.form.ProjectName.substring(0, 25);
        },
        lockDisplayName() {
          this.displayNameIsLocked = true;
        },
        startDateSelected(selectedStartDate: Date) {
          if (selectedStartDate !== null) {
            this.form.StartDate = new Date(this.form.StartDate);
            this.disabledEndDates.to = selectedStartDate;
            if (new Date(this.form.EndDate) < this.disabledEndDates.to) {
              this.form.EndDate = this.disabledEndDates.to;
            }
          }
        },
        dateSelected() {
          if (new Date(this.form.EndDate) < this.disabledEndDates.to) {
            this.form.EndDate = this.disabledEndDates.to;
          } else {
            this.form.EndDate = new Date(this.form.EndDate);
          }
        },
        fillForm(data: any) {
          this.form.ProjectName = data.projectName;
          this.form.DisplayName = data.displayName;
          this.form.Description = data.description;
          this.fillProjectMetadata(data);
        },
        // ----- fillForm by parent information --------------
        fillProjectMetadata(data: any) {
          this.form.PrincipleInvestigators = data.principleInvestigators;
          this.form.StartDate = new Date(data.startDate);
          this.startDateSelected(new Date(this.form.StartDate));
          this.form.EndDate = new Date(data.endDate);
          this.form.Discipline = data.disciplines;
          this.form.Organization = data.organizations;
          const keywords = data.keywords ? data.keywords.split(';') : [];
          this.form.Keywords = keywords;
          this.form.Visibility = data.visibility;
          this.form.GrantId = data.grantId;
          this.form.ParentId = data.parentId;
        },
        tranferFormValues(from: any, to: any) {
          to.ProjectName = from.ProjectName;
          to.DisplayName = from.DisplayName;
          to.Description = from.Description;
          to.PrincipleInvestigators = from.PrincipleInvestigators;
          to.StartDate = from.StartDate;
          to.EndDate = from.EndDate;
          to.Keywords = [] as object[];
          for (const keyword in from.Keywords) {
            to.Keywords.push(from.Keywords[keyword]);
          }
          to.Organization = [] as Organization[];
          for (const organization in from.Organization) {
            to.Organization.push(from.Organization[organization]);
          }
          to.Discipline = [] as object[];
          for (const discipline in from.Discipline) {
            to.Discipline.push(from.Discipline[discipline]);
          }
          to.Visibility = from.Visibility;
          to.GrantId = from.GrantId;
          to.ParentId = from.ParentId;
        },
        triggerFetchOptions(search: string) {
          clearTimeout(this.queryTimer);
          if (search.length < 3) {
            return;
          }
          this.queryTimer = setTimeout(() => this.fetchOrganizationOptions(search), 1000);
        },
        fetchOrganizationOptions(search: string) {
          this.loadingOrganizations = true;
          let newOrganizations: any = [];
          for (const organization of this.form.Organization) {
            newOrganizations.push(organization);
          }
          OrganizationApi.getOrganizationsWithFilter(search, (response: any) => {
            for (const org of response.data.data) {
              newOrganizations.push(org as any);
            }
            this.organizations = newOrganizations;
            this.loadingOrganizations = false;
          },(error:any) => { this.loadingOrganizations = false; });
        },
        clickCopyMetadata() {
          if (this.parentData) {
            this.fillProjectMetadata(this.parentData);
            this.getLabels();
          }
        },
        setCopyMetadata(parentId: string) {
          ProjectApi.getProjectInformation(parentId, (response: any) => {
            this.parentData = response.data;
            // ---- set label for copyMetadata -----
            const parentProjectName = response.data.projectName;
            this.copyMetadataLabel = this.$t('copyMetadataLabel') + ' "' + parentProjectName + '":';
          });
        },
        getLabels() {
          for (let org of this.form.Organization) {
            OrganizationApi.getOrganization(org.url, (innerResponse: any) => {
              for (let innerOrg of innerResponse.data.data) {
                this.organizations.push(innerOrg as any);
                org.displayName = innerOrg.displayName;
              }
            });
          }
        },
      },
      async created() {
        i18n.locale = this.$props.languageLocale;
        if (this.$props.languageLocale === 'en') {
          this.disciplineLabel = 'displayNameEn';
        } else {
          this.disciplineLabel = 'displayNameDe';
        }
    
        this.startDateSelected(new Date());
    
        OrganizationApi.isRWTHMember((response: any) => {
          this.isRWTHMember = response.data.isRWTHMember;
        });
    
        VisibilityApi.getVisibilities((response: any) => {
          for (const visibility of response.data) {
            if (visibility.displayName === 'Project Members') {
              this.initialState.Visibility = visibility;
              this.form.Visibility = visibility;
            }
            this.visibilities.push({ text: visibility.displayName, value: visibility.id });
          }
        });
    
        if (GuidUtil.isValidGuid(this.projectId)) {
          this.displayNameIsLocked = true;
          this.isNewProject = false;
          // Load features
          ActivatedFeaturesApi.listAllFeaturesOfProject(this.projectId, (response: any) => {
            response.data.forEach((feature: any) => {
              this.features.push(feature);
            });
          });
          ProjectApi.getProjectInformation(this.projectId, (response: any) => {
            const parentId = response.data.parentId;
            if (GuidUtil.isValidGuid(parentId)) {
              this.setCopyMetadata(parentId);
            }
            this.fillForm(response.data);
            this.tranferFormValues(this.form, this.initialState);
            this.getLabels();
          });
          ProjectRoleApi.getUserRoles(this.projectId, (response: any) => {
            this.checkOwnership(response.data);
          });
        } else {
          // --- get parent information ---
          if (GuidUtil.isValidGuid(this.parentId)) {
            this.setCopyMetadata(this.parentId);
          }
          ActivatedFeaturesApi.listAllFeatures((response: any) => {
            response.data.forEach((feature: any) => {
              this.features.push(feature);
            });
          });
          this.isNewProject = true;
          this.tranferFormValues(this.form, this.initialState);
        }
        const disciplines = await DisciplineApi.getDisciplines((response: any) => response.data);
        for (const discipline of disciplines) {
          this.disciplines.push(discipline);
        }
      },
    });
    </script>
    
    <style>
    #CreateProject .vdp-datepicker .form-control {
      background-color: #ffffff;
    }
    #CreateProject .multiselect {
      min-height: calc(1.4em + 0.75rem + 2px);
    }
    #CreateProject .multiselect__input {
      border: 0px;
      min-height: calc(1.4em + 0.75rem + 2px);
    }
    #CreateProject .multiselect__tags {
      border-radius: 0px;
    }
    #CreateProject .btn-float-right {
      float: right;
    }
    #CreateProject .vdp-datepicker__calendar-button {
      height: calc(1.4em + 0.75rem + 2px);
    }
    #CreateProject .form-group.mandatory .col-form-label:after {
      content: ' *';
      color: #a70619;
    }
    #CreateProject .col-form-label {
      font-weight: bold;
    }
    .multiselect__tag {
      background-color: #00549f !important;
    }
    .multiselect__option--highlight {
      background-color: #00549f !important;
      background: #00549f !important;
    }
    .multiselect__option--selected.multiselect__option--highlight {
      background-color: #a70619 !important;
    }
    .multiselect__tag-icon:focus,
    .multiselect__tag-icon:hover {
      background-color: #a70619 !important;
    }
    .invalid-tooltip {
      position: absolute;
      top: 100%;
      z-index: 5;
      display: none;
      max-width: 100%;
      padding: 0.25rem 0.5rem;
      margin-top: 0.1rem;
      font-size: 0.76563rem;
      line-height: 1.4;
      color: #fff;
      background-color: rgba(204, 7, 30, 0.9);
      border-radius: 0;
    }
    #project_archive_button,
    #project_clear_button {
      display: none;
    }
    .h-divider {
      margin-top: 5px;
      margin-bottom: 10px;
      height: 1px;
      width: 100%;
      border-top: 1px solid #bebbbb;
    }
    .form-group .custom-control-label {
      vertical-align: super;
    }
    </style>