@afeefa/vue-app 0.0.85 → 0.0.87

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.85
+0.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/api-resources/ApiActions.js

@@ -1,310 +1,14 @@
-import { AlertEvent, DialogEvent, LoadingEvent, SaveEvent } from '@a-vue/events'
-import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
-import { sleep } from '@a-vue/utils/timeout'
-
-export class GetAction {
-  action = null
-  id = null
-  fields = null
-  events = true
-
-  setAction (action) {
-    this.action = action
-    return this
-  }
-
-  setId (id) {
-    this.id = id
-    return this
-  }
-
-  setFields (fields) {
-    this.fields = fields
-    return this
-  }
-
-  noEvents (noEvents) {
-    this.events = noEvents === undefined ? false : !noEvents
-    return this
-  }
-
-  async load () {
-    if (this.events) {
-      eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
-    }
-
-    const result = await this.action.createRequest()
-      .params({
-        id: this.id
-      })
-      .fields(this.fields)
-      .send()
-
-    if (this.events) {
-      eventBus.dispatch(new LoadingEvent(LoadingEvent.STOP_LOADING))
-    }
-
-    if (result.error) {
-      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-        headline: 'Die Daten konntent nicht geladen werden.',
-        message: result.message,
-        detail: result.detail
-      }))
-    }
-
-    return result.data || false
-  }
-}
-
-export class SaveAction {
-  action = null
-  id = null
-  fields = null
-  data = null
-  afterSaveHook = null
-  returnAfterSaveHookResult = false
-  dialog = null
-
-  setAction (action) {
-    this.action = action
-    return this
-  }
-
-  setId (id) {
-    this.id = id
-    return this
-  }
-
-  setFields (fields) {
-    this.fields = fields
-    return this
-  }
-
-  setData (data) {
-    this.data = data
-    return this
-  }
-
-  setAfterSaveHook (afterSaveHook, returnAfterSaveHookResult = false) {
-    this.afterSaveHook = afterSaveHook
-    this.returnAfterSaveHookResult = returnAfterSaveHookResult
-    return this
-  }
-
-  setDialog (dialog) {
-    this.dialog = dialog
-    return this
-  }
-
-  async save () {
-    if (this.dialog) {
-      const result = await eventBus.dispatch(new DialogEvent(DialogEvent.SHOW, this.dialog))
-
-      if (result !== DialogEvent.RESULT_YES) {
-        return null
-      }
-    }
-
-    eventBus.dispatch(new SaveEvent(SaveEvent.START_SAVING))
-
-    const startTime = Date.now()
-
-    const result = await this.action.createRequest()
-      .params({
-        id: this.id || undefined
-      })
-      .fields(this.fields)
-      .data(this.data)
-      .send()
-
-    const model = result.data
-
-    let afterSaveHookResult = null
-
-    if (!result.error) {
-      if (this.afterSaveHook) {
-        afterSaveHookResult = await this.afterSaveHook(model)
-      }
-    }
-
-    const diffTime = Date.now() - startTime
-    const restTime = Math.max(0, 400 - diffTime)
-    if (restTime) {
-      await sleep(restTime / 1000)
-    }
-
-    eventBus.dispatch(new SaveEvent(SaveEvent.STOP_SAVING))
-
-    if (result.error) {
-      eventBus.dispatch(new SaveEvent(SaveEvent.STOP_SAVING))
-
-      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-        headline: 'Die Daten wurden nicht gespeichert',
-        message: result.message,
-        detail: result.detail
-      }))
-      return null
-    }
-
-    eventBus.dispatch(new AlertEvent(AlertEvent.MESSAGE, {
-      message: 'Die Daten wurden gespeichert.'
-    }))
-
-    if (this.returnAfterSaveHookResult) {
-      return afterSaveHookResult
-    }
-
-    return model
-  }
-}
-
-export class RemoveAction {
-  action = null
-  id = null
-  fields = null
-  afterRemoveHook = null
-  dialog = null
-
-  setAction (action) {
-    this.action = action
-    return this
-  }
-
-  setId (id) {
-    this.id = id
-    return this
-  }
-
-  setAfterRemoveHook (afterRemoveHook) {
-    this.afterRemoveHook = afterRemoveHook
-    return this
-  }
-
-  setDialog (dialog) {
-    this.dialog = dialog
-    return this
-  }
-
-  async delete () {
-    const result = await eventBus.dispatch(new DialogEvent(DialogEvent.SHOW, this.dialog))
-
-    if (result === DialogEvent.RESULT_YES) {
-      eventBus.dispatch(new SaveEvent(SaveEvent.START_SAVING))
-
-      const startTime = Date.now()
-
-      const result = await this.action.createRequest()
-        .params({
-          id: this.id
-        })
-        .data(null)
-        .send()
-
-      if (this.afterRemoveHook) {
-        await this.afterRemoveHook()
-      }
-
-      const diffTime = Date.now() - startTime
-      const restTime = Math.max(0, 400 - diffTime)
-      if (restTime) {
-        await sleep(restTime / 1000)
-      }
-
-      eventBus.dispatch(new SaveEvent(SaveEvent.STOP_SAVING))
-
-      if (result) {
-        eventBus.dispatch(new AlertEvent(AlertEvent.MESSAGE, {
-          message: 'Die Daten wurden gelöscht.'
-        }))
-        return true
-      } else {
-        eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-          message: 'Die Daten wurden nicht gelöscht.'
-        }))
-      }
-    }
-    return false
-  }
-}
-
-export class ListAction {
-  action = null
-  request = null
-  params = {}
-  fields = {}
-  filters = {}
-  events = true
-
-  setAction (action) {
-    this.action = action
-    return this
-  }
-
-  setRequest (request) {
-    this.request = request
-    return this
-  }
-
-  setParams (params) {
-    this.params = params
-    return this
-  }
-
-  setFields (fields) {
-    this.fields = fields
-    return this
-  }
-
-  setFilters (filters) {
-    this.filters = filters
-    return this
-  }
-
-  noEvents (noEvents) {
-    this.events = noEvents === undefined ? false : !noEvents
-    return this
-  }
-
-  async load () {
-    if (this.events) {
-      eventBus.dispatch(new LoadingEvent(LoadingEvent.START_LOADING))
-    }
-
-    if (!this.request) {
-      this.request = this.action.createRequest()
-        .params(this.params)
-        .fields(this.fields)
-        .filters(this.filters)
-    }
-
-    const result = await this.request.send()
-
-    if (result.error) {
-      if (this.events) {
-        eventBus.dispatch(new LoadingEvent(LoadingEvent.STOP_LOADING))
-      }
-
-      eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
-        headline: 'Die Daten konntent nicht geladen werden.',
-        message: result.message,
-        detail: result.detail
-      }))
-
-      return false
-    }
-
-    const models = result.data
-    const meta = result.meta
-
-    // await sleep(2)
-
-    if (this.events) {
-      eventBus.dispatch(new LoadingEvent(LoadingEvent.STOP_LOADING))
-    }
-
-    return {
-      models,
-      meta
-    }
-  }
+import { BulkAction, SequentialBulkAction } from './ApiAction'
+import { DeleteAction } from './DeleteAction'
+import { GetAction } from './GetAction'
+import { ListAction } from './ListAction'
+import { SaveAction } from './SaveAction'
+
+export {
+  BulkAction,
+  SequentialBulkAction,
+  ListAction,
+  GetAction,
+  SaveAction,
+  DeleteAction
 }

package/src/api-resources/DeleteAction.js

@@ -4,9 +4,13 @@ export class DeleteAction extends ApiAction {
   _minDuration = 400
 
   delete () {
+    return this.execute()
+  }
+
+  execute () {
     this.data(null)
 
-    return this.execute()
+    return super.execute()
   }
 
   async afterRequest () {

package/src/components/AAlert.vue

@@ -105,7 +105,7 @@ export default class AAlert extends Vue {
     font-size: 2rem;
   }
 
-  ::v-deep {
+  :deep() {
     .v-snack__wrapper {
       width: 500px;
       // margin-top: 1rem;

package/src/components/ABadge.vue

@@ -36,7 +36,7 @@ export default class ABadge extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-badge__badge {
+:deep(.v-badge__badge) {
   color: #666666;
 }
 </style>

package/src/components/AContextMenuItem.vue

@@ -55,7 +55,7 @@ export default class AContextMenuItem extends Vue {
     background-color: #EEEEEE;
   }
 
-  ::v-deep .v-icon {
+  :deep(.v-icon) {
     display: block;
     text-align: center;
     margin-right: 0.5rem;

package/src/components/ADatePicker.vue

@@ -146,7 +146,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
 
 <style lang="scss" scoped>
-::v-deep .v-select__slot {
+:deep(.v-select__slot) {
   cursor: pointer;
   input {
     cursor: pointer;

package/src/components/ADialog.vue

@@ -233,7 +233,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
   padding: .8rem 1rem !important;
 }
 
-::v-deep .v-dialog {
+:deep(.v-dialog) {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/AModal.vue

@@ -23,6 +23,19 @@
 
     <v-card v-if="modal">
       <v-card-title v-if="title">
+        <v-avatar
+          v-if="icon"
+          color="#F4F4F4"
+          size="2rem"
+          class="mr-2"
+        >
+          <v-icon
+            :color="icon.color"
+            size="1.2rem"
+            v-text="icon.icon"
+          />
+        </v-avatar>
+
         {{ title }}
       </v-card-title>
 
@@ -43,7 +56,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: ['show', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
+  props: ['show', 'icon', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin, CancelOnEscMixin) {
   modalId = randomCssClass(10)
@@ -189,7 +202,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
   color: inherit !important;
 }
 
-::v-deep .v-dialog {
+:deep(.v-dialog) {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/APagination.vue

@@ -33,7 +33,7 @@ export default class APagination extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-pagination {
+:deep(.v-pagination) {
   gap: .3rem;
   .v-pagination__item,
   .v-pagination__more,

package/src/components/ARadioGroup.vue

@@ -68,7 +68,7 @@ export default class ARadioGroup extends Vue {
   margin: 0;
 
   &:not(.hasLabel) {
-    ::v-deep legend {
+    :deep(legend) {
       display: none;
     }
   }

package/src/components/ARichTextArea.vue

@@ -200,10 +200,8 @@ export default class ARichTextArea extends Vue {
 
 <style lang="scss" scoped>
 .a-rich-text-editor {
-  ::v-deep .ProseMirror {
-    &-focused {
+  :deep(.ProseMirror-focused) {
       outline: none;
-    }
   }
 }
 
@@ -226,14 +224,14 @@ export default class ARichTextArea extends Vue {
   box-shadow: none;
   border-radius: 0;
 
-  ::v-deep .v-icon {
+  :deep(.v-icon) {
     font-size: 20px;
     width: 20px;
     height: 20px;
   }
 
   &.strike {
-    ::v-deep .v-icon {
+    :deep(.v-icon) {
       width: 15px;
     }
   }
@@ -251,7 +249,7 @@ export default class ARichTextArea extends Vue {
   }
 }
 
-::v-deep .ProseMirror {
+:deep(.ProseMirror) {
   min-height: 200px;
 
   > :last-child {

package/src/components/ASearchSelect.vue

@@ -319,7 +319,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   display: block;
   padding: 0 .5rem;
 
-  ::v-deep .a-row {
+  :deep(.a-row) {
     overflow: unset;
   }
 }
@@ -334,7 +334,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   overflow-x: hidden;
   overscroll-behavior: contain;
 
-  ::v-deep .a-table-row {
+  :deep(.a-table-row) {
     &:not(.selected) {
       cursor: pointer;
     }

package/src/components/ATable.vue

@@ -48,7 +48,7 @@ export default class ATable extends Vue {
   > * {
     display: table-row;
 
-    > ::v-deep * {
+    > :deep(*) {
       display: table-cell;
 
       white-space: nowrap;

package/src/components/ATextArea.vue

@@ -38,7 +38,7 @@ export default class ATextArea extends Vue {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
+.v-input:not(.v-input--is-focused) :deep(.v-counter) {
   display: none;
 }
 </style>

package/src/components/ATextField.vue

@@ -100,7 +100,7 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
+.v-input:not(.v-input--is-focused) :deep(.v-counter) {
   display: none;
 }
 </style>

package/src/components/form/EditModal.vue

@@ -1,6 +1,5 @@
 <template>
   <a-modal
-    :title="title"
     :beforeClose="beforeClose"
     :show.sync="show_"
     v-bind="$attrs"
@@ -61,7 +60,7 @@ import { Component, Vue, Watch } from '@a-vue'
 import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: ['model', 'createModelToEdit', 'title', 'show']
+  props: ['model', 'createModelToEdit', 'show']
 })
 export default class EditModal extends Vue {
   show_ = false

package/src/components/form/FormFieldMixin.js

@@ -58,9 +58,8 @@ export class FormFieldMixin extends Vue {
         .addParams(this.optionRequestParams || {})
         .addFilters(filters)
 
-      const {models} = await new ListAction()
-        .setRequest(request)
-        .noEvents()
+      const {models} = await ListAction
+        .fromRequest(request)
         .load()
 
       return models.map(model => ({

package/src/components/list/ListFilterRow.vue

@@ -20,7 +20,7 @@ export default class ListFilterRow extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-text-field__details {
+:deep(.v-text-field__details) {
   display: none;
 }
 </style>

package/src/components/list/ListViewMixin.js

@@ -143,9 +143,9 @@ export class ListViewMixin extends Vue {
 
     const request = this.listViewModel.getApiRequest()
 
-    const {models, meta} = await new ListAction()
-      .setRequest(request)
-      .noEvents(!this.events)
+    const {models, meta} = await ListAction
+      .fromRequest(request)
+      .dispatchGlobalLoadingEvents(this.events)
       .load()
 
     if (!models) { // error happened

package/src/components/list/filters/ListFilterSelect.vue

@@ -55,9 +55,8 @@ export default class ListFilterSelect extends Mixins(ListFilterMixin) {
   }
 
   async loadRequestOptions () {
-    const {models} = await new ListAction()
-      .setRequest(this.filter.createOptionsRequest())
-      .noEvents()
+    const {models} = await ListAction
+      .fromRequest(this.filter.createOptionsRequest())
       .load()
 
     return [

package/src-admin/components/SidebarMenu.vue

@@ -47,7 +47,7 @@ export default class SidebarMenu extends Vue {
 
 
 <style lang="scss" scoped>
-::v-deep .v-list-group {
+:deep(.v-list-group) {
   > .v-list-item {
     padding: 0;
     > .v-list-item {

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

@@ -206,19 +206,19 @@ export default class SearchSelectFormField extends Vue {
 
 
 <style scoped lang="scss">
-.selectedIcon::v-deep {
+.selectedIcon:deep() {
   padding-right: .3rem !important;
 }
 
-.selectableIcon::v-deep {
+.selectableIcon:deep() {
   padding-right: 2rem !important;
 }
 
-.selectedContent::v-deep {
+.selectedContent:deep() {
   width: 100%;
 }
 
-.selectableContent::v-deep {
+.selectableContent:deep() {
   width: 100%;
 }
 </style>

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

@@ -109,7 +109,7 @@ export default class ListColumnHeader extends Vue {
   }
 }
 
-::v-deep .v-icon {
+:deep(.v-icon) {
   color: #AAAAAA !important;
 
   &.active {

package/src/api-resources/ApiActions2.js

@@ -1,14 +0,0 @@
-import { BulkAction, SequentialBulkAction } from './ApiAction'
-import { DeleteAction } from './DeleteAction'
-import { GetAction } from './GetAction'
-import { ListAction } from './ListAction'
-import { SaveAction } from './SaveAction'
-
-export {
-  BulkAction,
-  SequentialBulkAction,
-  ListAction,
-  GetAction,
-  SaveAction,
-  DeleteAction
-}