feature(uiComponents) ergonode#104 Inputs improvement - bug fixes

derpdead · Jul 31, 2019 · e9c21ea · e9c21ea
1 parent 3d1208b
commit e9c21ea
Show file tree

Hide file tree

Showing 27 changed files with 849 additions and 596 deletions.
diff --git a/assets/scss/input.scss b/assets/scss/input.scss
@@ -54,6 +54,7 @@
             top: calc(50% - 8px);
             transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
             color: $lightGraphite;
+            margin-left: 6px;
             padding-left: 2px;
 
             &--required {
@@ -71,8 +72,12 @@
     &.solid {
         #{$input}__content {
             border: 1px solid $darkGrey;
-            padding: 6px 10px;
+            padding: 4px;
             box-sizing: border-box;
+
+            input, textarea {
+                margin-left: 8px;
+            }
         }
 
         #{$input}__label {
@@ -165,7 +170,7 @@
             &.solid {
                 #{$input}__content {
                     border: 2px solid $success;
-                    padding: 5px 9px;
+                    padding: 3px;
                 }
             }
         }
@@ -174,7 +179,7 @@
             &.solid {
                 #{$input}__content {
                     border: 2px solid $error;
-                    padding: 5px 9px;
+                    padding: 3px;
                 }
             }
 

diff --git a/components/Card/AttributeBaseCard.vue b/components/Card/AttributeBaseCard.vue
@@ -19,7 +19,6 @@
             solid
             :options="attrGroupValues"
             label="Group"
-            :dismissible="false"
             regular
             multiselect
             clearable
@@ -53,7 +52,6 @@
             solid
             required
             regular
-            :dismissible="!hasParamsWithMultiChoice"
             :multiselect="hasParamsWithMultiChoice"
             :label="paramsLabel"
             :options="attrParamValues"

diff --git a/components/Card/ProductBaseCard.vue b/components/Card/ProductBaseCard.vue
@@ -29,7 +29,6 @@
             solid
             regular
             multiselect
-            :dismissible="false"
             label="Category"
             clearable
             @input="clearContent">

diff --git a/components/Card/ProductGridTab.vue b/components/Card/ProductGridTab.vue
@@ -18,8 +18,10 @@
                 <TrashCan v-show="isColumnDragging" />
             </div>
         </div>
-        <GridFooter :is-pagination-visible="Boolean(numberOfPages)">
-            <template slot="pagination">
+        <GridFooter
+            store-namespace="productsGrid"
+            :is-pagination-visible="Boolean(numberOfPages)">
+            <template v-slot:pagination>
                 <GridPageSelector
                     v-model="visibleRowsInPageCount"
                     :rows-number="numberOfDataElements" />

diff --git a/components/Card/RolesGridTab.vue b/components/Card/RolesGridTab.vue
@@ -10,8 +10,10 @@
                 :rows-height="rowsHeight"
                 :action-paths="actionPaths" />
         </div>
-        <GridFooter :is-pagination-visible="Boolean(numberOfPages)">
-            <template slot="pagination">
+        <GridFooter
+            store-namespace="rolesGrid"
+            :is-pagination-visible="Boolean(numberOfPages)">
+            <template v-slot:pagination>
                 <GridPageSelector
                     v-model="visibleRowsInPageCount"
                     :rows-number="numberOfDataElements" />

diff --git a/components/Card/UsersGridTab.vue b/components/Card/UsersGridTab.vue
@@ -10,8 +10,10 @@
                 :rows-height="rowsHeight"
                 :action-paths="actionPaths" />
         </div>
-        <GridFooter :is-pagination-visible="Boolean(numberOfPages)">
-            <template slot="pagination">
+        <GridFooter
+            store-namespace="usersGrid"
+            :is-pagination-visible="Boolean(numberOfPages)">
+            <template v-slot:pagination>
                 <GridPageSelector
                     v-model="visibleRowsInPageCount"
                     :rows-number="numberOfDataElements" />

diff --git a/components/Grid/EditCells/GridEditActivatorCell.vue b/components/Grid/EditCells/GridEditActivatorCell.vue
@@ -103,6 +103,7 @@ export default {
             }
 
             return {
+                dismissible: false,
                 autofocus: true,
                 errorMessages: this.errorMessages,
                 leftAlignment: true,

diff --git a/components/Grid/EditCells/GridEditDateCell.vue b/components/Grid/EditCells/GridEditDateCell.vue
@@ -3,34 +3,27 @@
  * See LICENSE for license details.
  */
 <template>
-    <Select
-        :value="value"
+    <DatePicker
+        :value="parsedDate"
         solid
         :placeholder="parameters.format"
+        :format="parameters.format"
         :error-messages="errorMessages"
         :dismissible="false"
         autofocus
-        @focus="onFocus">
-        <DatePickerContent
-            slot="select"
-            slot-scope="{ dismissSelect }"
-            :style="selectBoundingBox"
-            :selected-date="parsedDate"
-            @apply="e => onApply(e, dismissSelect)"
-            @clear="onClear" />
-    </Select>
+        multiselect
+        @focus="onFocusChange"
+        @input="onValueChange" />
 </template>
 
 <script>
 import moment from 'moment';
-import Select from '~/components/Inputs/Select/Select';
-import DatePickerContent from '~/components/Inputs/Select/Contents/DatePickerContent';
+import DatePicker from '~/components/Inputs/Date/DatePicker';
 
 export default {
     name: 'GridEditDateCell',
     components: {
-        Select,
-        DatePickerContent,
+        DatePicker,
     },
     props: {
         value: {
@@ -49,71 +42,35 @@ export default {
     },
     data() {
         return {
-            selectBoundingBox: {},
-            isFocused: false,
+            localValue: null,
         };
     },
+    created() {
+        if (this.value) {
+            this.localValue = moment(this.value, this.parameters.format).toDate();
+        }
+    },
     computed: {
-        appendStateIcon() {
-            return this.isFocused
-                ? 'arrow-triangle trans-half'
-                : 'arrow-triangle';
-        },
         parsedDate() {
+            if (!this.value) return null;
+
             return moment(this.value, this.parameters.format).toDate();
         },
     },
     methods: {
-        onFocus(isFocused) {
-            if (isFocused) {
-                this.selectBoundingBox = this.getSelectBoundingBox();
-            }
-
+        onFocusChange(isFocused) {
             this.$emit('focus', isFocused);
         },
-        onApply(date, dismissSelect) {
-            dismissSelect();
-
-            this.$emit('input', this.formatDate(date));
-            this.$emit('focus', false);
-        },
-        onClear() {
-            this.$emit('input', '');
+        onValueChange(date) {
+            if (date) this.$emit('input', this.formatDate(date));
+            else this.$emit('input', '');
         },
         formatDate(date) {
             if (!date) return null;
             const { format } = this.parameters;
 
             return moment(date).format(format);
         },
-        getSelectBoundingBox() {
-            const { $el } = this;
-            const boundingRect = $el.getBoundingClientRect();
-            const {
-                top,
-                left,
-                height,
-            } = boundingRect;
-            const { innerHeight } = window;
-            const maxHeight = 300;
-
-            if (innerHeight - top < maxHeight) {
-                const offsetBottom = innerHeight - top;
-                const marginBottom = 1;
-
-                return {
-                    left: `${left}px`,
-                    bottom: `${offsetBottom + marginBottom}px`,
-                };
-            }
-
-            const marginTop = 2;
-
-            return {
-                left: `${left}px`,
-                top: `${top + height + marginTop}px`,
-            };
-        },
     },
 };
 </script>
diff --git a/components/Grid/EditCells/GridEditSelectCell.vue b/components/Grid/EditCells/GridEditSelectCell.vue
@@ -8,24 +8,24 @@
         solid
         clearable
         :multiselect="multiselect"
-        :dismissible="!multiselect"
+        :dismissible="false"
         :error-messages="errorMessages"
         autofocus
         @focus="onFocus"
         @input="onValueChange"
         @apply="onApply">
-        <TranslationMultiselectListContent
-            v-if="multiselect"
-            slot="selectContent"
-            :options="options"
-            :selected-options="value || []"
-            @values="onValueChange" />
-        <TranslationSelectListContent
-            v-else
-            slot="selectContent"
-            :options="options"
-            :selected-option="value"
-            @value="onValueChange" />
+        <template v-slot:selectContent>
+            <TranslationMultiselectListContent
+                v-if="multiselect"
+                :options="options"
+                :selected-options="value || []"
+                @values="onValueChange" />
+            <TranslationSelectListContent
+                v-else
+                :options="options"
+                :selected-option="value"
+                @value="onValueChange" />
+        </template>
     </Select>
 </template>
 

diff --git a/components/Grid/GridFooter.vue b/components/Grid/GridFooter.vue
@@ -23,6 +23,10 @@ export default {
         Button: () => import('~/components/Buttons/Button'),
     },
     props: {
+        storeNamespace: {
+            type: String,
+            required: true,
+        },
         isPaginationVisible: {
             type: Boolean,
             required: true,
@@ -32,9 +36,6 @@ export default {
         ...mapState('gridDraft', {
             drafts: state => state.drafts,
         }),
-        ...mapState('grid', {
-            rows: state => state.rows,
-        }),
         footerClasses() {
             return [
                 'footer-wrapper',
@@ -52,9 +53,6 @@ export default {
         ...mapActions('productsDraft', [
             'applyDraft',
         ]),
-        ...mapActions('grid', [
-            'addDraftToProduct',
-        ]),
         saveDrafts() {
             const promises = [];
 
@@ -65,7 +63,7 @@ export default {
                     promises.push(this.applyDraft({
                         id: productId,
                         onSuccess: () => {
-                            this.addDraftToProduct({ columnId, productId, value });
+                            this.$store.dispatch(`${this.storeNamespace}/addDraftToProduct`, { columnId, productId, value });
                             this.removeDraft(productId);
                         },
                         onError: () => {},

diff --git a/components/Grid/GridSelectInfoCell.vue b/components/Grid/GridSelectInfoCell.vue
@@ -34,6 +34,6 @@ export default {
         flex: 1;
         justify-content: space-between;
         align-items: center;
-        padding-right: 13px;
+        padding-right: 5px;
     }
 </style>