@afeefa/vue-app 0.0.53 → 0.0.56

package/src/plugins/route-config/RouteConfigPlugin.js

@@ -121,7 +121,8 @@ class RouteConfigPlugin {
     this._promise = this._promise.then(() => {
       callback = callback({
         ROUTESET: this.routeSet,
-        ROUTE: this.route
+        ROUTE: this.route,
+        GETROUTE: this.getRoute
       })
 
       if (!(callback instanceof Promise)) {
@@ -290,6 +291,29 @@ class RouteConfigPlugin {
     return new RouteSetDefinition(options).getDefinitions()
   }
 
+  getRoute = (name, component) => {
+    switch (name) {
+      case 'notfound':
+        return this.route({
+          path: '/:pathMatch(.*)*',
+          name: 'notfound',
+          ignoreBreadcrumb: true,
+          component: component || {
+            template: '<div>Not found</div>'
+          }
+        })
+      case 'auth':
+        return this.route({
+          path: '/auth2',
+          name: 'auth',
+          ignoreBreadcrumb: true,
+          component: {
+            template: '<div>Auth</div>'
+          }
+        })
+    }
+  }
+
   breadcrumb = options => {
     options.config = {
       ...this._config,

package/src/services/escape/CancelOnEscMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 import { cascadingWindowEventDispatcher } from './CascadingWindowEventDispatcher'
 

package/src/services/position/UsesPositionServiceMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 import { positionService } from '../PositionService'
 

package/src/styles/forms.scss

@@ -0,0 +1,8 @@
+.a-text-input {
+  border: 1px solid #CCCCCC;
+  padding: .5rem;
+
+  &-focused {
+    outline: 1px solid #9999FF;
+  }
+}

package/src/styles/vue-app.scss

@@ -0,0 +1 @@
+@import "forms";

package/src-admin/bootstrap.js

@@ -4,7 +4,6 @@ import './config/components'
 import { apiResourcesPlugin } from '@a-vue/plugins/api-resources/ApiResourcesPlugin'
 import { hasOptionsPlugin } from '@a-vue/plugins/has-options/HasOptionsPlugin'
 import { timeout } from '@a-vue/utils/timeout'
-import { apiResources } from '@afeefa/api-resources-client'
 import Vue from 'vue'
 
 import { appConfig } from './config/AppConfig'
@@ -17,9 +16,7 @@ Vue.use(hasOptionsPlugin)
 Vue.config.productionTip = false
 
 export async function bootstrap ({ apis, models, routing, authService, app, components }) {
-  apiResources
-    .registerModels(models)
-    .registerApis(apis)
+  apiResourcesPlugin.register(models, apis)
 
   appConfig.authService = authService
   appConfig.app = app
@@ -36,7 +33,7 @@ export async function bootstrap ({ apis, models, routing, authService, app, comp
 
   routing(routeConfigPlugin)
   const router = await routeConfigPlugin.getRouter()
-  await apiResources.schemasLoaded()
+  await apiResourcesPlugin.schemasLoaded()
 
   if (authService) {
     authService.initApp(router)

package/src-admin/components/App.vue

@@ -136,7 +136,7 @@
 </template>
 
 <script>
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Vue, Watch } from '@a-vue'
 import { LoadingEvent } from '@a-vue/events'
 import { appConfig } from '@a-admin/config/AppConfig'
 import { sleep } from '@a-vue/utils/timeout'

package/src-admin/components/NotFound.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="notFound">
+    <a-row
+      vertical
+      center
+      class="content"
+    >
+      <div class="logo">
+        <slot />
+      </div>
+
+      <a-row
+        vertical
+        center
+      >
+        <div class="mt-0">
+          {{ title || '404 - Not Found' }}
+        </div>
+
+        <div class="mt-4">
+          <router-link :to="backlink || { path: '/'}">
+            {{ backlinkTitle || 'Zurück' }}
+          </router-link>
+        </div>
+      </a-row>
+    </a-row>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  name: 'adminNotFound',
+  props: ['title', 'backlink', 'backlinkTitle']
+})
+export default class NotFound extends Vue {
+  created () {
+    this.$parent.$emit('appLoaded')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notFound {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-height: 50vh;
+  transform: translate(-50%, -50%);
+}
+
+.logo {
+  margin-bottom: 2rem;
+}
+</style>

package/src-admin/components/SidebarMenu.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import SidebarMenuItem from './menu/SidebarMenuItem'
 
 @Component({

package/src-admin/components/Splash.vue

@@ -1,41 +1,37 @@
 <template>
   <v-app class="splash">
-    <v-container
-      fill-height
-      fluid
-      pb-0
-      d-flex
-      align-center
-      justify-center
+    <a-row
+      vertical
+      center
+      class="content"
     >
-      <div>
-        <div class="logo">
-          <slot />
-        </div>
+      <div class="logo">
+        <slot />
+      </div>
 
-        <a-row
-          vertical
-          center
-        >
-          <v-progress-linear
-            :size="45"
-            :width="6"
-            indeterminate
-            :color="color || 'green'"
-          />
+      <a-row
+        vertical
+        center
+        fullWidth
+      >
+        <v-progress-linear
+          :size="45"
+          :width="6"
+          indeterminate
+          :color="color || 'green'"
+        />
 
-          <div class="mt-4">
-            {{ title || 'Lade App ...' }}
-          </div>
-        </a-row>
-      </div>
-    </v-container>
+        <div class="mt-4">
+          {{ title || 'Lade App ...' }}
+        </div>
+      </a-row>
+    </a-row>
   </v-app>
 </template>
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['title', 'color']
@@ -47,20 +43,24 @@ export default class Splash extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .splash {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
+  height: 100vh;
 }
 
-.logo {
-  margin-bottom: 2rem;
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-height: 50vh;
+  transform: translate(-50%, -50%);
 }
 
-.container {
-  transform: translateY(-10%);
+.logo {
+  margin-bottom: 2rem;
 }
 </style>

package/src-admin/components/Start.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['splash']
 })
-export default class Index extends Vue {
+export default class Start extends Vue {
   appLoaded () {
     this.splash.$destroy()
   }

package/src-admin/components/app/AppBarButton.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['prepend']

package/src-admin/components/app/AppBarButtons.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component
 export default class AppBarButtons extends Vue {

package/src-admin/components/app/AppBarTitle.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'title']

package/src-admin/components/app/AppBarTitleContainer.vue

@@ -4,7 +4,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component
 export default class AppBarTitleContainer extends Vue {

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <a-table
+      v-if="selectedItems.length"
+      :style="selectedWidthStyle"
+    >
+      <a-table-header
+        v-if="hasHeader"
+        small
+      >
+        <div
+          v-for="(column, index) in selectedColumns"
+          :key="index"
+        >
+          {{ column.header }}
+        </div>
+      </a-table-header>
+
+      <a-table-row
+        v-for="(item, index) in selectedItems"
+        :key="item.id"
+        :selected="isClicked(item)"
+      >
+        <template v-for="(column, index2) in selectedColumns">
+          <v-icon
+            v-if="column.icon"
+            :key="'icon' + index2"
+            :color="column.icon.color"
+            class="selectedIcon"
+            size="1.5rem"
+            v-text="column.icon.icon"
+          />
+
+          <div
+            v-else
+            :key="'text' + index2"
+            class="selectedContent"
+          >
+            {{ column.text(item) }}
+          </div>
+        </template>
+
+        <div>
+          <a-context-menu
+            :ref="'editItem' + index"
+            @open="clickedItem = item"
+            @close="clickedItem = null"
+          >
+            <a-context-menu-item @click="removeItem(item, index)">
+              <v-icon>$trashCanIcon</v-icon>
+              Löschen
+            </a-context-menu-item>
+          </a-context-menu>
+        </div>
+      </a-table-row>
+    </a-table>
+
+    <div v-else>
+      {{ isEmptyText }}
+    </div>
+
+    <a-search-select
+      :listViewConfig="selectableConfig.listViewConfig"
+      :loadOnlyIfKeyword="false"
+      :selectedItems="selectableSelectedItems"
+      :width="selectableWidth"
+      @select="addItem"
+    >
+      <template #activator>
+        <a-icon-button
+          icon="$plusIcon"
+          :text="selectableConfig.addButtonTitle || 'Hinzufügen'"
+          class="mt-4"
+        />
+      </template>
+
+      <template #filters>
+        <list-filter-row>
+          <list-filter-search
+            :focus="true"
+            maxWidth="100%"
+            label="Suche Berater:in"
+          />
+
+          <list-filter-page
+            :has="{page_size: false, page_number: true}"
+            :totalVisible="0"
+          />
+        </list-filter-row>
+      </template>
+
+      <template #row="{ model, on }">
+        <template
+          v-for="(column, index) in selectableColumns"
+          v-on="on"
+        >
+          <v-icon
+            v-if="column.icon"
+            :key="'icon' + index"
+            :color="column.icon.color"
+            class="selectableIcon"
+            size="1.5rem"
+            v-on="on"
+            v-text="column.icon.icon"
+          />
+
+          <div
+            v-else
+            :key="'text' + index"
+            class="selectableContent"
+            v-on="on"
+          >
+            {{ column.text(model) }}
+          </div>
+        </template>
+      </template>
+    </a-search-select>
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [
+    'value',
+    'selectedConfig',
+    'selectedWidth',
+    'selectableConfig',
+    'selectableWidth'
+  ]
+})
+export default class SearchSelectFormField extends Vue {
+  clickedItem = null
+
+  get hasHeader () {
+    return this.selectedColumns.some(c => !!c.header)
+  }
+
+  get selectedItems () {
+    return this.value
+  }
+
+  get selectableSelectedItems () {
+    return this.value.map(this.selectedConfig.selectedToSelectableItem)
+  }
+
+  get isEmptyText () {
+    return this.selectedConfig.isEmptyText
+  }
+
+  isClicked (selectedItem) {
+    return selectedItem === this.clickedItem
+  }
+
+  get selectedColumns () {
+    return this.selectedConfig.columns
+  }
+
+  get selectableColumns () {
+    return this.selectableConfig.columns
+  }
+
+  addItem (selectableItem) {
+    const selectedItem = this.selectedConfig.newSelectedItem(selectableItem)
+    const selectedItems = [...this.value, selectedItem]
+    if (this.$listeners.add) {
+      this.$emit('add', selectedItems)
+    } else {
+      this.$emit('input', selectedItems)
+    }
+  }
+
+  async removeItem (selectedItem, rowIndex) {
+    const removeDialog = this.selectedConfig.removeDialog(selectedItem)
+    const dialog = {
+      anchor: this.$refs['editItem' + rowIndex], // is array [component]
+      ...removeDialog,
+      yesButton: 'Löschen',
+      yesColor: 'red white--text'
+    }
+
+    const selectedItems = this.value.filter(i => i !== selectedItem)
+    if (this.$listeners.remove) {
+      this.$emit('remove', selectedItems, dialog)
+    } else {
+      this.$emit('input', selectedItems)
+    }
+  }
+
+  get selectedWidthStyle () {
+    if (!this.selectedWidth) {
+      return ''
+    }
+
+    let width = this.selectedWidth
+    if (!isNaN(width)) {
+      width = width + 'px'
+    }
+    return `width: ${width};`
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.selectedIcon::v-deep {
+  padding-right: .3rem !important;
+}
+
+.selectableIcon::v-deep {
+  padding-right: 2rem !important;
+}
+
+.selectedContent::v-deep {
+  width: 100%;
+}
+
+.selectableContent::v-deep {
+  width: 100%;
+}
+</style>

package/src-admin/components/detail/DetailProperty.vue

@@ -24,8 +24,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
-import { apiResources } from '@afeefa/api-resources-client'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['icon', 'iconModelType', 'label']
@@ -37,7 +36,7 @@ export default class DetailProperty extends Vue {
     }
 
     if (this.iconModelType) {
-      const ModelClass = apiResources.getModelClass(this.iconModelType)
+      const ModelClass = this.$apiResources.getModelClass(this.iconModelType)
       return ModelClass.icon
     }
   }
@@ -77,6 +76,5 @@ export default class DetailProperty extends Vue {
       padding-left: 55px;
     }
   }
-
 }
 </style>

package/src-admin/components/list/ListColumnHeader.vue

@@ -4,9 +4,10 @@
       :class="['content', {order}]"
       @click="toggleSort"
     >
-      <div :class="['text', {active}]">
-        {{ text }}
-      </div>
+      <div
+        :class="['text', {active}]"
+        v-html="text"
+      />
 
       <svg
         v-if="order"
@@ -21,7 +22,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['text', 'order']

package/src-admin/components/list/ListTitle.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['link']

package/src-admin/components/list/ListView.vue

@@ -9,7 +9,15 @@
     </div>
 
     <template v-if="models_.length">
-      <template v-if="_table">
+      <template v-if="$scopedSlots.models">
+        <slot
+          name="models"
+          :models="models_"
+          :setFilter="setFilter"
+        />
+      </template>
+
+      <template v-else-if="$scopedSlots['model-table']">
         <a-table>
           <a-table-header>
             <div v-if="$has.icon" />
@@ -37,7 +45,7 @@
         </a-table>
       </template>
 
-      <template v-else>
+      <template v-else-if="$scopedSlots.model">
         <div
           v-for="model in models_"
           :key="model.id"
@@ -61,13 +69,11 @@
 
 
 <script>
-import { Component, Watch, Mixins } from 'vue-property-decorator'
+import { Component, Watch, Mixins } from '@a-vue'
 import { ListViewMixin } from '@a-vue/components/list/ListViewMixin'
 import { LoadingEvent } from '@a-vue/events'
 
-@Component({
-  props: ['table']
-})
+@Component
 export default class ListView extends Mixins(ListViewMixin) {
   $hasOptions = ['icon']
 
@@ -83,10 +89,6 @@ export default class ListView extends Mixins(ListViewMixin) {
     this.$emit('update:isLoading', this.isLoading)
   }
 
-  get _table () {
-    return this.table !== false
-  }
-
   setFilter (name, value) {
     this.filters[name].value = value
   }

package/src-admin/components/menu/SidebarMenuItem.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 
 @Component({
   props: ['item']

package/src-admin/components/model/ModelCount.vue

@@ -10,7 +10,7 @@
 
 
 <script>
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from '@a-vue'
 import { modelCountService } from './ModelCountService'
 import { SaveEvent } from '@a-vue/events'