kill Vue.component(BaseDropdown.name, BaseDropdown)

frontend/src/components/BaseDropdown.vue

@@ -1,97 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :class="[{ show: isOpen }, `drop${direction}`]"
-    @click="toggleDropDown"
-    v-click-outside="closeDropDown"
-  >
-    <slot name="title-container" :is-open="isOpen">
-      <component
-        :is="titleTag"
-        class="btn-rotate"
-        :class="[{ 'dropdown-toggle': hasToggle }, titleClasses]"
-        :aria-expanded="isOpen"
-        data-toggle="dropdown"
-      >
-        <slot name="title" :is-open="isOpen">
-          <i :class="icon"></i>
-          {{ title }}
-        </slot>
-      </component>
-    </slot>
-    <ul
-      class="dropdown-menu"
-      :class="[{ show: isOpen }, { 'dropdown-menu-right': menuOnRight }, menuClasses]"
-    >
-      <slot></slot>
-    </ul>
-  </component>
-</template>
-<script>
-export default {
-  name: 'base-dropdown',
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-      description: 'Dropdown html tag (e.g div, ul etc)',
-    },
-    titleTag: {
-      type: String,
-      default: 'button',
-      description: 'Dropdown title (toggle) html tag',
-    },
-    title: {
-      type: String,
-      description: 'Dropdown title',
-    },
-    direction: {
-      type: String,
-      default: 'down', // up | down
-      description: 'Dropdown menu direction (up|down)',
-    },
-    icon: {
-      type: String,
-      description: 'Dropdown icon',
-    },
-    titleClasses: {
-      type: [String, Object, Array],
-      description: 'Title css classes',
-    },
-    menuClasses: {
-      type: [String, Object],
-      description: 'Menu css classes',
-    },
-    menuOnRight: {
-      type: Boolean,
-      description: 'Whether menu should appear on the right',
-    },
-    hasToggle: {
-      type: Boolean,
-      description: 'Whether dropdown has arrow icon shown',
-      default: true,
-    },
-  },
-  data() {
-    return {
-      isOpen: false,
-    }
-  },
-  methods: {
-    toggleDropDown() {
-      this.isOpen = !this.isOpen
-      this.$emit('change', this.isOpen)
-    },
-    closeDropDown() {
-      this.isOpen = false
-      this.$emit('change', false)
-    },
-  },
-}
-</script>
-<style lang="scss" scoped>
-.dropdown {
-  cursor: pointer;
-  user-select: none;
-}
-</style>

frontend/src/components/Modal-OLD.vue

@@ -1,127 +0,0 @@
-<template>
-  <slide-y-up-transition :duration="animationDuration">
-    <b-modal
-      class="modal fade"
-      ref="app-modal"
-      :size="size"
-      :hide-header="!$slots.header"
-      :modal-class="[{ 'modal-mini': type === 'mini' }, ...modalClasses]"
-      @mousedown.self="closeModal"
-      tabindex="-1"
-      role="dialog"
-      centered
-      @close="closeModal"
-      @hide="closeModal"
-      :header-class="headerClasses"
-      :footer-class="footerClasses"
-      :content-class="[gradient ? `bg-gradient-${gradient}` : '', ...modalContentClasses]"
-      :body-class="bodyClasses"
-      :aria-hidden="!show"
-    >
-      <template v-slot:modal-header>
-        <slot name="header"></slot>
-        <slot name="close-button">
-          <button
-            type="button"
-            class="close"
-            v-if="showClose"
-            @click="closeModal"
-            data-dismiss="modal"
-            aria-label="Close"
-          >
-            <span :aria-hidden="!show">×</span>
-          </button>
-        </slot>
-      </template>
-
-      <slot />
-
-      <template v-slot:modal-footer>
-        <slot name="footer"></slot>
-      </template>
-    </b-modal>
-  </slide-y-up-transition>
-</template>
-<script>
-import { SlideYUpTransition } from 'vue2-transitions'
-
-export default {
-  name: 'modal',
-  components: {
-    SlideYUpTransition,
-  },
-  props: {
-    show: Boolean,
-    showClose: {
-      type: Boolean,
-      default: true,
-    },
-    type: {
-      type: String,
-      default: '',
-      validator(value) {
-        const acceptedValues = ['', 'notice', 'mini']
-        return acceptedValues.indexOf(value) !== -1
-      },
-      description: 'Modal type (notice|mini|"") ',
-    },
-    modalClasses: {
-      type: [Object, String],
-      description: 'Modal dialog css classes',
-    },
-    size: {
-      type: String,
-      description: 'Modal size',
-      validator(value) {
-        const acceptedValues = ['', 'sm', 'lg']
-        return acceptedValues.indexOf(value) !== -1
-      },
-    },
-    modalContentClasses: {
-      type: [Object, String],
-      description: 'Modal dialog content css classes',
-    },
-    gradient: {
-      type: String,
-      description: 'Modal gradient type (danger, primary etc)',
-    },
-    headerClasses: {
-      type: [Object, String],
-      description: 'Modal Header css classes',
-    },
-    bodyClasses: {
-      type: [Object, String],
-      description: 'Modal Body css classes',
-    },
-    footerClasses: {
-      type: [Object, String],
-      description: 'Modal Footer css classes',
-    },
-    animationDuration: {
-      type: Number,
-      default: 500,
-      description: 'Modal transition duration',
-    },
-  },
-  methods: {
-    closeModal() {
-      this.$emit('update:show', false)
-      this.$emit('close')
-    },
-  },
-  watch: {
-    show(val) {
-      if (val) {
-        this.$refs['app-modal'].show()
-      } else {
-        this.$refs['app-modal'].hide()
-      }
-    },
-  },
-}
-</script>
-<style>
-.modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.6) !important;
-}
-</style>

frontend/src/components/Modal.vue

@@ -1,80 +0,0 @@
-<template>
-  <!--Notice modal-->
-  <modal
-    :show.sync="$store.state.modals"
-    modal-classes="modal-danger"
-    modal-content-classes="bg-gradient-danger"
-  >
-    <h6 slot="header" class="modal-title">Your attention is required</h6>
-
-    <div class="py-3 text-center">
-      <form ref="form" @submit.stop.prevent="handleSubmit">
-        <b-form-group
-          label="Name"
-          label-for="name-input"
-          invalid-feedback="Name is required"
-          :state="nameState"
-        >
-          <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
-        </b-form-group>
-      </form>
-    </div>
-
-    <template slot="footer">
-      <base-button type="white">Ok</base-button>
-      <base-button type="link" class="ml-auto" @click="$store.state.modals = false">
-        abbrechen
-      </base-button>
-    </template>
-  </modal>
-</template>
-
-<script>
-export default {
-  name: 'modal',
-  data() {
-    return {
-      name: '',
-      nameState: null,
-      submittedNames: [],
-    }
-  },
-  /* Modal */
-  checkFormValidity() {
-    const valid = this.$refs.form.checkValidity()
-    this.nameState = valid
-    return valid
-  },
-  resetModal() {
-    this.name = ''
-    this.nameState = null
-  },
-  handleOk(bvModalEvt) {
-    // Prevent modal from closing
-    bvModalEvt.preventDefault()
-    // Trigger submit handler
-    this.handleSubmit()
-  },
-  handleSubmit() {
-    // Exit when the form isn't valid
-    if (!this.checkFormValidity()) {
-      return
-    }
-    // Push the name to submitted names
-    this.submittedNames.push(this.name)
-    this.$store.state.modals = false
-    this.$store.commit('loginAsAdmin')
-    this.$router.push('/AdminOverview')
-
-    // Hide the modal manually
-    this.$nextTick(() => {
-      this.$bvModal.hide('modal-prevent-closing')
-    })
-  },
-}
-</script>
-<style>
-.modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.6) !important;
-}
-</style>

frontend/src/components/index.js

@@ -2,7 +2,6 @@ import BaseInput from './Inputs/BaseInput.vue'
 import Badge from './Badge'
 import BaseButton from './BaseButton.vue'
 
-import BaseDropdown from './BaseDropdown.vue'
 import BaseTable from './BaseTable.vue'
 
 import Card from './Cards/Card.vue'
@@ -14,7 +13,6 @@ import TabPane from './Tabs/Tab.vue'
 import Tabs from './Tabs/Tabs.vue'
 import Collapse from './Collapse/Collapse.vue'
 import CollapseItem from './Collapse/CollapseItem.vue'
-import Modal from './Modal.vue'
 import BaseSlider from './BaseSlider.vue'
 
 
@@ -26,13 +24,11 @@ export {
   Card,
   StatsCard,
   BaseTable,
-  BaseDropdown,
   SidebarPlugin,
   BaseNav,
   NavbarToggleButton,
   TabPane,
   Tabs,
-  Modal,
   BaseSlider,
   BaseButton,
   Collapse,

frontend/src/plugins/globalComponents.js

@@ -1,7 +1,5 @@
 import BaseInput from '@/components/Inputs/BaseInput.vue'
-import BaseDropdown from '@/components/BaseDropdown.vue'
 import Card from '@/components/Cards/Card.vue'
-import Modal from '@/components/Modal.vue'
 import StatsCard from '@/components/Cards/StatsCard.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import Badge from '@/components/Badge.vue'
@@ -14,10 +12,8 @@ const GlobalComponents = {
     Vue.component(Badge.name, Badge)
     Vue.component(BaseButton.name, BaseButton)
     Vue.component(BaseInput.name, BaseInput)
-    Vue.component(BaseDropdown.name, BaseDropdown)
     Vue.component(BaseNav.name, BaseNav)
     Vue.component(Card.name, Card)
-    Vue.component(Modal.name, Modal)
     Vue.component(StatsCard.name, StatsCard)
     Vue.component('validation-provider', ValidationProvider)
     Vue.component('validation-observer', ValidationObserver)

frontend/src/store/store.js

@@ -58,7 +58,6 @@ export const store = new Vuex.Store({
     sessionId: null,
     email: '',
     language: null,
-    modals: false,
     firstName: '',
     lastName: '',
     username: '',