Nova 4 updates and fixes (#325)

ebess · May 1, 2022 · 9ba38f2 · 9ba38f2
1 parent 02c3a2a
commit 9ba38f2
Show file tree

Hide file tree

Showing 19 changed files with 1,039 additions and 954 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/Cropper.vue b/resources/js/components/Cropper.vue
@@ -1,28 +1,73 @@
 <template>
-    <Modal :show="image" @modal-close="onCancel" class="modal-cropper">
-      <card class="text-center clipping-container max-w-view bg-white rounded-lg shadow-lg overflow-hidden">
-        <div class="p-4">
-          <Cropper
-            v-if="image"
-            ref="clipper"
-            :stencil-props="configs || {}"
-            :src="imageUrl"
-          />
-        </div>
-        <div class="bg-30 px-6 py-3 footer rounded-lg">
-          <OutlineButton v-if="!cropAnyway" type="button"  @click="onCancel">{{__('Cancel')}}</OutlineButton>
-
-          <button v-if="!cropAnyway" type="button" class="btn btn-link text-80 font-normal h-9 px-3" @click.prevent="rotate(-90)" :title="__('Rotate -90')">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M17.026 22.957c10.957-11.421-2.326-20.865-10.384-13.309l2.464 2.352h-9.106v-8.947l2.232 2.229c14.794-13.203 31.51 7.051 14.794 17.675z"/></svg>
-          </button>
-          <button v-if="!cropAnyway" type="button" class="btn btn-link text-80 font-normal h-9 px-3" @click.prevent="rotate(+90)" :title="__('Rotate +90')">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M6.974 22.957c-10.957-11.421 2.326-20.865 10.384-13.309l-2.464 2.352h9.106v-8.947l-2.232 2.229c-14.794-13.203-31.51 7.051-14.794 17.675z"/></svg>
-          </button>
-
-          <DefaultButton type="button" class="btn btn-default btn-primary" @click="onSave" ref="updateButton">{{__('Update')}}</DefaultButton>
-        </div>
-      </card>
-    </Modal>
+  <Modal
+    :show="image"
+    @modal-close="onCancel"
+    class="modal-cropper"
+  >
+    <Card class="text-center clipping-container max-w-view bg-white rounded-lg shadow-lg overflow-hidden">
+      <div class="p-4">
+        <Cropper
+          v-if="image"
+          ref="clipper"
+          :stencil-props="configs || {}"
+          :src="imageUrl"
+        />
+      </div>
+      <div class="bg-30 px-6 py-3 footer rounded-lg">
+        <OutlineButton
+          v-if="!cropAnyway"
+          type="button"
+          @click="onCancel"
+        >
+          {{ __('Cancel' )}}
+        </OutlineButton>
+
+        <button
+          v-if="!cropAnyway"
+          type="button"
+          class="btn btn-link text-80 font-normal h-9 px-3"
+          @click.prevent="rotate(-90)"
+          :title="__('Rotate -90')"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="fill-current"
+          >
+            <path d="M17.026 22.957c10.957-11.421-2.326-20.865-10.384-13.309l2.464 2.352h-9.106v-8.947l2.232 2.229c14.794-13.203 31.51 7.051 14.794 17.675z" />
+          </svg>
+        </button>
+        <button
+          v-if="!cropAnyway"
+          type="button"
+          class="btn btn-link text-80 font-normal h-9 px-3"
+          @click.prevent="rotate(+90)"
+          :title="__('Rotate +90')"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="fill-current"
+          >
+            <path d="M6.974 22.957c-10.957-11.421 2.326-20.865 10.384-13.309l-2.464 2.352h9.106v-8.947l-2.232 2.229c-14.794-13.203-31.51 7.051-14.794 17.675z" />
+          </svg>
+        </button>
+
+        <DefaultButton
+          type="button"
+          class="btn btn-default btn-primary"
+          @click="onSave"
+          ref="updateButton"
+        >
+          {{ __('Update') }}
+        </DefaultButton>
+      </div>
+    </Card>
+  </Modal>
 </template>
 
 <script>
@@ -34,6 +79,7 @@
     components: {
       Cropper
     },
+
     props: {
       image: Object,
       configs: {
@@ -43,20 +89,24 @@
       mustCrop: {
         type: Boolean,
         default: false
-      }
+      },
     },
+
     data: () => ({
       rotationHistory: 0,
     }),
+
     computed: {
       mime() {
         // if mime type is set on direct on the file it means it is an already existing image
         // in case  taking mime type from file it means the file has been just uploaded
-        return this.image.mime_type || this.image.file.type;
+        return this.image?.mime_type || this.image?.file?.type || '';
       },
+
       imageUrl() {
         return this.image ? this.image.__media_urls__.__original__ : null;
       },
+
       cropAnyway() {
         return (this.image.mustCrop === true) && this.mustCrop;
       },
@@ -68,20 +118,24 @@
             this.$refs.updateButton.focus();
           })
         }
+
         this.reset();
       },
     },
     methods: {
       reset() {
-        if(this.$refs.clipper && this.image) {
+        if (this.$refs.clipper && this.image) {
           this.$refs.clipper.rotate(-this.rotationHistory);
         }
+
         this.rotationHistory = 0;
       },
+
       rotate(angle) {
         this.$refs.clipper.rotate(angle);
         this.rotationHistory += angle;
       },
+
       onSave() {
         const { canvas } = this.$refs.clipper.getResult();
         const base64 = canvas.toDataURL(this.mime);
@@ -100,6 +154,7 @@
         this.$emit('crop-completed', fileData);
         this.$emit('close');
       },
+
       onCancel() {
         if (this.cropAnyway) {
           this.onSave();
@@ -108,7 +163,7 @@
         }
       },
     },
-  };
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -131,10 +186,13 @@
     }
   }
 
-  .fade-enter-active, .fade-leave-active {
+  .fade-enter-active,
+  .fade-leave-active {
     transition: opacity .3s;
   }
-  .fade-enter, .fade-leave-to {
+
+  .fade-enter,
+  .fade-leave-to {
     opacity: 0;
   }
 </style>
diff --git a/resources/js/components/CustomProperties.vue b/resources/js/components/CustomProperties.vue
@@ -9,63 +9,63 @@
 </template>
 
 <script>
-import CustomPropertiesModal from './CustomPropertiesModal'
-import tap from 'lodash/tap'
-import get from 'lodash/get'
-import set from 'lodash/set'
+  import CustomPropertiesModal from './CustomPropertiesModal'
+  import tap from 'lodash/tap'
+  import get from 'lodash/get'
+  import set from 'lodash/set'
 
-export default {
-  props: {
-    modelValue: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      modelValue: {
+        type: Object,
+        required: true,
+      },
+      fields: {
+        type: Array,
+        required: true,
+      },
     },
-    fields: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  components: {
-    CustomPropertiesModal,
-  },
-
-  data() {
-    return {
-      image: JSON.parse(JSON.stringify(this.modelValue)),
-    }
-  },
 
-  computed: {
-    filledFields() {
-      return JSON.parse(JSON.stringify(this.fields)).map(field => tap(field, field => {
-        field.value = this.getProperty(field.attribute)
-      }))
-    }
-  },
+    components: {
+      CustomPropertiesModal,
+    },
 
-  methods: {
-    handleClose() {
-      this.$emit('close')
+    data() {
+      return {
+        image: JSON.parse(JSON.stringify(this.modelValue)),
+      }
     },
 
-    handleUpdate(formData) {
-      for (let [property, value] of formData.entries()) {
-        this.setProperty(property, value)
+    computed: {
+      filledFields() {
+        return JSON.parse(JSON.stringify(this.fields)).map(field => tap(field, field => {
+          field.value = this.getProperty(field.attribute)
+        }))
       }
+    },
 
-      this.$emit('update:modelValue', this.image)
+    methods: {
+      handleClose() {
+        this.$emit('close')
+      },
 
-      this.handleClose()
-    },
+      handleUpdate(formData) {
+        for (let [property, value] of formData.entries()) {
+          this.setProperty(property, value)
+        }
 
-    getProperty(property) {
-      return get(this.image, `custom_properties.${property}`)
-    },
+        this.$emit('update:modelValue', this.image)
+
+        this.handleClose()
+      },
+
+      getProperty(property) {
+        return get(this.image, `custom_properties.${property}`)
+      },
 
-    setProperty(property, value) {
-      set(this.image, `custom_properties.${property}`, value)
+      setProperty(property, value) {
+        set(this.image, `custom_properties.${property}`, value)
+      },
     },
   }
-}
 </script>