@westartcom/bread-quasar-fields 0.0.2

package/fields/EmailField.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <q-input
+                :label="field.label + ((field.required) ? ' *' : '')"
+                :name="field.name"
+                :id="id + '-input'"
+                :placeholder="field.placeholder"
+                type="email"
+                class="field"
+                :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
+                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                v-model="internalValue"
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :hint="field.description"
+                outlined>
+            </q-input>
+        </div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+
+interface EmailFieldDefinition extends ModelFieldDefinition<FieldType.TEXT, InputType.EMAIL> {
+    default: string | null;
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<EmailFieldDefinition>,
+            required: true
+        },
+        modelValue: String,
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: '',
+            internalErrors: [] as string[]
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = this.modelValue;
+        } else if (this.field.default) {
+            this.internalValue = this.field.default;
+        }
+
+        this.validate(this.internalValue);
+    },
+
+    watch: {
+        modelValue: function(val) {
+            if (val !== this.internalValue) {
+                this.internalValue = val;
+            }
+        },
+
+        internalValue: function(val) {
+            this.validate(val);
+            this.$emit('update:modelValue', val);
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        validate: function(val) {
+            this.invalid = this.field.required && !val;
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/fields/FileUploadField.vue

@@ -0,0 +1,394 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <div class="field-label-wrap">
+                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
+            </div>
+
+            <div class="files-upload">
+                <div v-show="canAdd">
+                    <button type="button" class="btn hollow" @click="$refs.fileUpload.click()">
+                        <template v-if="allowMultiple">
+                            {{ $i18n.get('actions.add_files') }}
+                        </template>
+                        <template v-else>
+                            {{ $i18n.get('actions.add_file') }}
+                        </template>
+                    </button>
+                    <input
+                        ref="fileUpload"
+                        type="file"
+                        style="display: none;"
+                        :id="id + '-input'"
+                        :accept="allowedMimeTypes"
+                        :multiple="allowMultiple"
+                        @change="onFileSelect($event.target.files)">
+                </div>
+
+                <div class="added-files">
+                    <div class="file" v-for="(file, index) in addedFiles" :key="index">
+                        <div class="column download">
+                            <template v-if="file.url">
+                                <a :href="file.url" :download="file.name" class="view-file">
+                                    <download-icon class="icon-2x"></download-icon>
+                                </a>
+                            </template>
+                            <template v-else-if="file.error">
+                                <upload-error-icon class="icon-2x"></upload-error-icon>
+                            </template>
+                            <template v-else>
+                                <file-upload-icon class="icon-2x"></file-upload-icon>
+                            </template>
+                        </div>
+                        <div class="column progress" v-if="file.hasOwnProperty('progress') && file.progress < 100">{{ file.progress }}%</div>
+                        <div class="column name"><span>{{ file.name }}</span></div>
+                        <div class="column remove">
+                            <delete-icon class="icon-2x" @click="onRemoveFile(index, file)"></delete-icon>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+import { UploadFile } from '@westartcom/bread-quasar-fields/interfaces/UploadFile';
+//    import * as tus from 'tus-js-client';
+
+interface FileUploadFieldDefinition extends ModelFieldDefinition<FieldType.MEDIA, InputType.FILE_UPLOAD> {
+    default: string | null;
+    extra_data: {
+        media_type: 'files';
+        tus: boolean;
+        tus_endpoint: string;
+        mime_types: string[];
+        multiple: boolean;
+        collection: string;
+    }
+}
+
+export default defineComponent({
+    components: {
+        DeleteIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/DeleteIcon.vue')),
+        DownloadIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/DownloadIcon.vue')),
+        FileUploadIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/FileUploadIcon.vue')),
+        UploadErrorIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/FileAlertOutlineIcon.vue'))
+    },
+
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<FileUploadFieldDefinition>,
+            required: true
+        },
+        modelValue: Array,
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:uploading',
+        'update:invalid'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            files: [] as UploadFile[],
+            internalErrors: [],
+            tusUploads: {} as {
+                [key: string]: any;
+            }
+        };
+    },
+
+    computed : {
+        allowMultiple() {
+            return (this.field.extra_data && this.field.extra_data.multiple);
+        },
+
+        allowedMimeTypes() {
+            return ((this.field.extra_data?.mime_types) ? this.field.extra_data.mime_types : ['*']).join('|');
+        },
+
+        canAdd() {
+            return this.allowMultiple || !this.files.filter(file => !file.remove).length;
+        },
+
+        useTus() {
+            return (this.field.extra_data?.tus === true);
+        },
+
+        addedFiles() {
+            return this.files.filter(file => !file.remove);
+        }
+    },
+
+    mounted() {
+        this.tusUploads = {};
+
+        if (this.modelValue) {
+            this.files = (Array.isArray(this.modelValue)) ? this.modelValue : [this.modelValue];
+        } else if (this.field.default && Array.isArray(this.field.default)) {
+            this.files = this.field.default;
+        }
+
+        this.validate(this.files);
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (
+                    val &&
+                    Array.isArray(val)
+                ) {
+                    this.files = val;
+                } else {
+                    this.files = [];
+                    (this.$refs.fileUpload as any).value = '';
+                }
+            },
+            deep: true
+        },
+
+        files: {
+            handler: function(val) {
+                this.validate(val);
+                this.$emit('update:modelValue', val);
+
+                if (this.useTus) {
+                    if (val.some(file => file.progress < 100)) {
+                        this.$emit('update:uploading', true);
+                    } else {
+                        this.$emit('update:uploading', false);
+                    }
+                }
+            },
+            deep: true
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        async onFileSelect(files: FileList) {
+            if (files.length) {
+                for (let i = 0; i < files.length; i++) {
+                    const file = files.item(i);
+
+                    if (!file) {
+                        continue;
+                    }
+
+                    if (this.useTus) {
+                        await this.startTus(file);
+                    } else {
+                        this.addFile(await this.getBase64(file), file.name);
+                    }
+                }
+            }
+        },
+
+        async startTus(file: File) {
+            throw 'TUS not implemented';
+            //                const vueInstance = this;
+            //                const tempKey = Date.now().toString() + '/' + file.name;
+            //
+            //                this.addFile(tempKey, file.name, true);
+            //
+            //                const upload = new tus.Upload(file, {
+            //                    endpoint: window.axios.defaults.baseURL + 'v1/' + this.field.extra_data.tus_endpoint,
+            //                    chunkSize: (2 * (1024 * 1024)), // 2 MB
+            //                    metadata: {
+            //                        filename: file.name,
+            //                        filetype: file.type,
+            //                    },
+            //                    onBeforeRequest(req) {
+            //                        let xhr = req.getUnderlyingObject()
+            //                        xhr.withCredentials = true;
+            //                    },
+            //                    onProgress(bytesUploaded, bytesTotal) {
+            //                        let percentage = (bytesUploaded / bytesTotal * 100).toFixed(0)
+            //                        vueInstance.files = vueInstance.files.map((uploadFile) => {
+            //                            if (uploadFile.tempKey && uploadFile.tempKey === tempKey) {
+            //                                uploadFile.progress = percentage;
+            //                            }
+            //                            return uploadFile;
+            //                        });
+            //                    },
+            //                    onSuccess() {
+            //                        const urlParts = upload.url.split('/');
+            //                        const tusKey = urlParts[urlParts.length - 1];
+            //                        vueInstance.files = vueInstance.files.map((uploadFile) => {
+            //                            if (uploadFile.tempKey && uploadFile.tempKey === tempKey) {
+            //                                uploadFile.tusKey = tusKey;
+            //                            }
+            //                            return uploadFile;
+            //                        });
+            //                    },
+            //                    onError() {
+            //                        vueInstance.$modal.show('error', this.$i18n.get('generic.an_error_occurred'), this.$i18n.get('validation.file_upload_failed'));
+            //                        vueInstance.files = vueInstance.files.map((uploadFile) => {
+            //                            if (uploadFile.tempKey && uploadFile.tempKey === tempKey) {
+            //                                uploadFile.error = true;
+            //                            }
+            //                            return uploadFile;
+            //                        });
+            //                    }
+            //                });
+            //
+            //                upload.start();
+            //                this.tusUploads[tempKey] = upload;
+        },
+
+        getBase64(file: File): Promise<string> {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => resolve(reader.result as string);
+                reader.onerror = error => reject(error);
+            });
+        },
+
+        addFile(file: string, name: string, isTus = false) {
+            if (isTus) {
+                this.files.push({
+                    tempKey: file,
+                    tusKey: null,
+                    error: false,
+                    progress: 0,
+                    name: name,
+                    add: true
+                });
+            } else {
+                this.files.push({
+                    base64: file,
+                    name: name,
+                    add: true
+                });
+            }
+        },
+
+        onRemoveFile(index, file) {
+            this.$modal.confirm(
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                () => {
+                    this.removeFile(index, file);
+                }
+            );
+        },
+
+        removeFile(index: number, file: UploadFile) {
+            if (file.add === true) {
+                // Safe to just pop it from array since it's not been saved yet
+                this.files = this.files.filter((addedFile, idx) => idx !== index);
+
+                if (
+                    file.tempKey &&
+                    this.tusUploads[file.tempKey]
+                ) {
+                    this.tusUploads[file.tempKey].abort(true);
+                }
+
+                (this.$refs.fileUpload as any).value = ''; // Need to clear the input field so the file can be selected again
+            } else {
+                // We need to flag the file for removal in API
+                file.remove = true;
+                this.files = this.files.map((existing, existingIndex) => {
+                    return (existingIndex === index) ? file : existing;
+                });
+            }
+        },
+
+        validate(val) {
+            this.invalid = (this.field.required && (!val.length || !val.filter(file => !file.remove).length));
+        },
+
+        safeUrl(file) {
+            return (file.url) ? file.url : file.base64;
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .files-upload {
+        max-width: var(--max-input-width);
+        width: 100%;
+    }
+
+    .added-files {
+        .file {
+            display: flex;
+            align-items: center;
+
+            &:not(:last-of-type) {
+                border-bottom: 1px solid var(--color-medium-tint);
+            }
+        }
+
+        .name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            flex-grow: 2;
+            padding: var(--global-spacing);
+        }
+
+        .download,
+        .remove {
+            flex-shrink: 1;
+            padding: var(--global-spacing) 0;
+        }
+
+        .download {
+            color: var(--color-medium);
+
+            a {
+                color: var(--color-primary);
+            }
+        }
+
+        .remove {
+            color: var(--color-danger);
+
+            span {
+                cursor: pointer;
+            }
+        }
+    }
+</style>