@afeefa/vue-app 0.0.64 → 0.0.67

package/src-admin/components/form/EditFormButtons.vue

@@ -1,17 +1,27 @@
 <template>
-  <a-row gap="2">
+  <a-row
+    gap="1"
+    v-bind="$attrs"
+  >
     <v-btn
-      :small="small"
+      fab
+      small
       :disabled="($has.reset && !changed) || !valid"
       color="green white--text"
+      title="Speichern"
       @click="$emit('save')"
     >
-      Speichern
+      <v-icon>
+        $checkIcon
+      </v-icon>
     </v-btn>
 
     <v-icon
       v-if="$has.reset && changed"
       :small="small"
+      :class="{disabled: !changed}"
+      :disabled="!changed"
+      color="#999999"
       text
       title="Formular zurücksetzen"
       @click="$emit('reset')"
@@ -29,7 +39,7 @@ import { mdiRotateLeft} from '@mdi/js'
   props: [
     'changed',
     'valid',
-    'small'
+    {small: false}
   ]
 })
 export default class EditFormButtons extends Vue {
@@ -38,3 +48,10 @@ export default class EditFormButtons extends Vue {
   undoIcon = mdiRotateLeft
 }
 </script>
+
+
+<style lang="scss" scoped>
+.v-icon--disabled {
+  opacity: .3;
+}
+</style>

package/src-admin/components/form/RemoveButton.vue

@@ -1,13 +1,22 @@
 <template>
   <div>
-    <a-icon-button
-      small
-      color="red white--text"
-      :class="'removeButton-' + dialogId"
-      icon="$trashCanIcon"
-      text="Löschen"
-      @click="remove"
-    />
+    <v-hover v-slot="{ hover }">
+      <v-btn
+        :class="'removeButton-' + dialogId"
+        fab
+        small
+        :color="(hover ? 'red' : 'grey lighten-3')"
+        title="Löschen"
+        @click="remove"
+      >
+        <v-icon
+          :color="hover ? 'white' : '#999999'"
+          size="1.4rem"
+        >
+          $trashCanIcon
+        </v-icon>
+      </v-btn>
+    </v-hover>
 
     <a-dialog
       :id="dialogId"

package/src-admin/components/index.js

@@ -19,7 +19,9 @@ import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
+import SidebarItem from './SidebarItem.vue'
 import Start from './Start.vue'
+import StickyFooter from './StickyFooter.vue'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -46,3 +48,5 @@ Vue.component('AppBarTitle', AppBarTitle)
 
 Vue.component('Start', Start)
 Vue.component('FlyingContext', FlyingContext)
+Vue.component('StickyFooter', StickyFooter)
+Vue.component('SidebarItem', SidebarItem)

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

@@ -8,12 +8,16 @@
       />
     </div>
 
+    <slot
+      v-if="$scopedSlots.models"
+      name="before-models"
+    />
+
     <template v-if="models_.length">
       <template v-if="$scopedSlots.models">
         <slot
           name="models"
           :models="models_"
-          :setFilter="setFilter"
         />
       </template>
 
@@ -44,7 +48,6 @@
             <slot
               name="model-table"
               :model="model"
-              :setFilter="setFilter"
             />
           </a-table-row>
         </a-table>
@@ -110,10 +113,6 @@ export default class ListView extends Mixins(ListViewMixin) {
   get hasFlyingContext () {
     return !!this.$listeners.flyingContext
   }
-
-  setFilter (name, value) {
-    this.filters[name].value = value
-  }
 }
 </script>
 

package/src-admin/components/pages/EditPage.vue

@@ -12,13 +12,15 @@
         :valid="valid"
       />
 
-      <edit-form-buttons
-        :changed="changed"
-        :valid="valid"
-        :has="{reset: !!modelToEdit.id}"
-        @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
-        @reset="$refs.form.reset()"
-      />
+      <app-bar-button>
+        <edit-form-buttons
+          :changed="changed"
+          :valid="valid"
+          :has="{reset: !!modelToEdit.id}"
+          @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+          @reset="$refs.form.reset()"
+        />
+      </app-bar-button>
     </template>
   </edit-form>
 </template>
@@ -59,6 +61,8 @@ export default class EditPage extends Vue {
    * hook to allow to leave a just created (saved) model
    */
   ignoreChangesOnRouteChange () {
+    // this.$refs.form.forceUnchanged()
+    console.info('TODO switch form to forceUnchanged')
     this.ignoreChangesOnRouteChange_ = true
   }
 }

package/src-admin/components/routes/DataRouteMixin.js

@@ -1,4 +1,4 @@
-import { Component, Vue, Watch } from '@a-vue'
+import { Component, Vue } from '@a-vue'
 
 Component.registerHooks([
   'beforeRouteEnter',

package/src-admin/config/vuetify.js

@@ -1,17 +1,27 @@
 import {
   mdiAlarmLightOutline,
+  mdiArrowLeft,
   mdiCalendar,
+  mdiCheck,
+  mdiCheckBold,
   mdiChevronRight,
   mdiClose,
+  mdiCloseThick,
   mdiDelete,
   mdiDotsHorizontal,
   mdiDotsVertical,
   mdiLock,
   mdiLogoutVariant,
   mdiMagnify,
+  mdiMenuDown,
+  mdiMenuUp,
   mdiPencil,
   mdiPlus,
-  mdiThumbUpOutline
+  mdiThumbUpOutline,
+  mdiAccountGroup,
+  mdiShopping,
+  mdiMessage,
+  mdiPencilBoxMultiple
 } from '@mdi/js'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
@@ -26,6 +36,7 @@ export default new Vuetify({
       thumbsUpIcon: mdiThumbUpOutline,
       alarmIcon: mdiAlarmLightOutline,
       closeIcon: mdiClose,
+      closeBoldIcon: mdiCloseThick,
       dotsVerticalIcon: mdiDotsVertical,
       dotsHorizontalIcon: mdiDotsHorizontal,
       logoutIcon: mdiLogoutVariant,
@@ -34,7 +45,16 @@ export default new Vuetify({
       trashCanIcon: mdiDelete,
       calendarIcon: mdiCalendar,
       searchIcon: mdiMagnify,
-      lockIcon: mdiLock
+      lockIcon: mdiLock,
+      checkIcon: mdiCheck,
+      checkBoldIcon: mdiCheckBold,
+      arrowLeftIcon: mdiArrowLeft,
+      caretDownIcon: mdiMenuDown,
+      caretUpIcon: mdiMenuUp,
+      householdMembers: mdiAccountGroup,
+      shop: mdiShopping,
+      annotation: mdiMessage,
+      duplicates: mdiPencilBoxMultiple
     }
   },
   breakpoint: {

package/src-admin/styles.scss

@@ -15,6 +15,7 @@
 .contextButton {
   color: #AAAAAA !important;
   cursor: pointer;
+
   &:hover {
     color: #333333 !important;
   }
@@ -27,14 +28,30 @@
   }
 }
 
-.v-main {
-  margin-bottom: 2rem;
-}
-
 .theme--light.v-btn.v-btn--has-bg {
   background-color: #E9E9E9;
 }
 
+.theme--light.v-btn.v-btn--disabled,
+.theme--light.v-btn.v-btn--disabled .v-icon,
+.theme--light.v-btn.v-btn--disabled .v-btn__loading {
+  color: white !important;
+}
+
+.theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
+  background-color: #EEEEEE !important;
+}
+
+.v-btn {
+  box-shadow: none !important;
+}
+
+// @for $i from 1 through 10 {
+//   .gap-{$i} {
+//     gap: 0.25rem * $i;
+//   }
+// }
+
 .gap-0 {
   gap: 0;
 }