merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhanced Add Image Button

This commit is contained in:
Devansh 2022-01-08 13:18:26 +05:30
parent 1da4897fdc
commit 3472cbe3d7
4 changed files with 121 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Ui/publishable/assets/js/ui.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Ui/publishable/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/ui.js": "/js/ui.js?id=ba11b663a9e7a34b1ca7",
"/js/ui.js": "/js/ui.js?id=2f9fabd43a584c291335",
"/css/ui.css": "/css/ui.css?id=9dd6a42456cc75479c1d"
}

206
packages/Webkul/Ui/src/Resources/assets/js/components/image/image-wrapper.vue
View File

@ -2,8 +2,8 @@
<div>
<div class="image-wrapper">
<image-item
v-for='(image, index) in items'
:key='image.id'
v-for="image in items"
:key="image.id"
:image="image"
:input-name="inputName"
:required="required"
@ -12,112 +12,142 @@
></image-item>
</div>
<label class="btn btn-lg btn-primary" style="display: inline-block; width: auto" @click="createFileType">{{ buttonLabel }}</label>
<label
class="btn btn-lg btn-primary"
style="display: inline-block; width: auto"
@click="createFileType"
v-if="!hideButton"
>{{ buttonLabel }}</label
>
</div>
</template>
<script>
export default {
props: {
buttonLabel: {
type: String,
required: false,
default: 'Add Image'
},
removeButtonLabel: {
type: String,
required: false,
default: 'Remove Image'
},
inputName: {
type: String,
required: false,
default: 'attachments'
},
images: {
type: Array|String,
required: false,
default: () => ([])
},
multiple: {
type: Boolean,
required: false,
default: true
},
required: {
type: Boolean,
required: false,
default: false
}
export default {
props: {
buttonLabel: {
type: String,
required: false,
default: 'Add Image'
},
data: function() {
return {
imageCount: 0,
items: []
}
removeButtonLabel: {
type: String,
required: false,
default: 'Remove Image'
},
created () {
var this_this = this;
inputName: {
type: String,
required: false,
default: 'attachments'
},
if(this.multiple) {
if (this.images.length) {
this.images.forEach(function(image) {
this_this.items.push(image)
images: {
type: Array | String,
required: false,
default: () => []
},
this_this.imageCount++;
});
} else if (this.images.length == undefined && typeof this.images == 'object') {
var images = Object.keys(this.images).map(key => {
return this.images[key];
});
multiple: {
type: Boolean,
required: false,
default: true
},
images.forEach(function(image) {
this_this.items.push(image)
required: {
type: Boolean,
required: false,
default: false
}
},
this_this.imageCount++;
});
} else {
this.createFileType();
}
data: function() {
return {
hideButton: false,
imageCount: 0,
items: []
};
},
created: function() {
this.initImages();
},
methods: {
initImages: function() {
if (this.multiple) {
this.initMultiple();
} else {
if(this.images && this.images != '') {
this.items.push({'id': 'image_' + this.imageCount, 'url': this.images})
this.imageCount++;
} else {
this.createFileType();
}
this.initSingle();
}
},
methods: {
createFileType () {
var this_this = this;
initMultiple: function() {
let self = this;
if(!this.multiple) {
this.items.forEach(function(image) {
this_this.removeImage(image)
});
}
if (this.images.length) {
this.images.forEach(function(image) {
self.items.push(image);
self.imageCount++;
});
} else if (
this.images.length == undefined &&
typeof this.images == 'object'
) {
let images = Object.keys(this.images).map(key => {
return this.images[key];
});
images.forEach(function(image) {
self.items.push(image);
self.imageCount++;
});
} else {
this.createFileType();
}
},
initSingle: function() {
if (this.images && this.images != '') {
this.items.push({
id: 'image_' + this.imageCount,
url: this.images
});
this.imageCount++;
this.items.push({'id': 'image_' + this.imageCount});
},
removeImage (image) {
let index = this.items.indexOf(image)
Vue.delete(this.items, index);
} else {
this.createFileType();
}
}
this.hideButton = true;
},
createFileType() {
let self = this;
if (!this.multiple) {
this.items.forEach(function(image) {
self.removeImage(image);
});
this.hideButton = true;
}
this.imageCount++;
this.items.push({ id: 'image_' + this.imageCount });
},
removeImage(image) {
let index = this.items.indexOf(image);
if (!this.multiple) this.hideButton = false;
Vue.delete(this.items, index);
}
}
};
</script>

1
packages/Webkul/Velocity/src/Resources/views/shop/customers/account/profile/edit.blade.php
View File

@ -148,6 +148,7 @@
<label class="col-12">
{{ __('admin::app.catalog.categories.image') }}
</label>
<div class="col-12">
<image-wrapper :button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'" input-name="image" :multiple="false" :images='"{{ $customer->image_url }}"'></image-wrapper>