feat(ui): rebuild all tools pages on Carbon Design System web components
- @carbon/web-components v2.50.0 via the IBM CDN (version-pinned); @carbon/styles CSS + IBM Plex Sans for tokens/typography - landing: Carbon header + cds-tile tool cards - fingerprint wizard: Carbon-styled form controls, cds-progress-bar scan progress, cds-tag badges, cds-inline-notification replacing swal - cropper: cds-toast replacing toastr, cds-checkbox review reasons, cds-tag process badge; vue-croppa pad kept in the Carbon layout - Bootstrap 4, swal, toastr and jQuery removed from all pages - behavior frozen: same flows, endpoints, validation and copy
This commit is contained in:
@@ -1,32 +1,13 @@
|
||||
/* Image Cropper — review, crop, clean and save identity photos.
|
||||
Identity comes from the YOUreka session; the only operator credential is
|
||||
the save-time OTP (required by a2loft). */
|
||||
/* global Vue, axios, toastr, Croppa */
|
||||
Vue.use(Croppa);
|
||||
the save-time OTP (required by a2loft). Notifications are Carbon toasts. */
|
||||
/* global Vue, axios, Croppa, customElements */
|
||||
Vue.config.ignoredElements = [/^cds-/];
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var REVIEW_OPTIONS = [
|
||||
'IMAGE: Not in the midline of the photo frame (aligned to the left or right)',
|
||||
'IMAGE: Taken too close-up (Only head is visible, shoulders barely visible)',
|
||||
'IMAGE: Blurry ',
|
||||
'IMAGE: Improper lighting ',
|
||||
'IMAGE: Not coloured.',
|
||||
'IMAGE: Scanned photo',
|
||||
'IMAGE: Has no adequate space to allow for proper cropping ',
|
||||
'IMAGE: Not taken on a recommended background.',
|
||||
'IMAGE: Photo is a selfie',
|
||||
'DRESSING: Unacceptable dress. ',
|
||||
'HEAD: Skewed (leaning away from the midline - vertically or horizontally)',
|
||||
'EYES: Not looking into the camera (looking downward, upward, or sideward)',
|
||||
'EYES: Not properly opened',
|
||||
'EARS: Not visible ',
|
||||
'EARS: Both ears are not equally visible (face not aligned central)',
|
||||
'FACIAL EXPRESSION: NOT neutral (subject has a facial expression)',
|
||||
'GLASSES: Subject is wearing glasses ',
|
||||
'JUST WRING: Goes against almost all acceptable passport criteria.',
|
||||
'Others not specified.',
|
||||
];
|
||||
var toastSeq = 0;
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
@@ -43,12 +24,31 @@ Vue.use(Croppa);
|
||||
cleanedImage: null,
|
||||
requiresCleaning: '',
|
||||
otp: '',
|
||||
reviewOptions: REVIEW_OPTIONS.map(function (name, index) {
|
||||
return { index: index + 1, name: name };
|
||||
}),
|
||||
reviewOptions: [
|
||||
'IMAGE: Not in the midline of the photo frame (aligned to the left or right)',
|
||||
'IMAGE: Taken too close-up (Only head is visible, shoulders barely visible)',
|
||||
'IMAGE: Blurry ',
|
||||
'IMAGE: Improper lighting ',
|
||||
'IMAGE: Not coloured.',
|
||||
'IMAGE: Scanned photo',
|
||||
'IMAGE: Has no adequate space to allow for proper cropping ',
|
||||
'IMAGE: Not taken on a recommended background.',
|
||||
'IMAGE: Photo is a selfie',
|
||||
'DRESSING: Unacceptable dress. ',
|
||||
'HEAD: Skewed (leaning away from the midline - vertically or horizontally)',
|
||||
'EYES: Not looking into the camera (looking downward, upward, or sideward)',
|
||||
'EYES: Not properly opened',
|
||||
'EARS: Not visible ',
|
||||
'EARS: Both ears are not equally visible (face not aligned central)',
|
||||
'FACIAL EXPRESSION: NOT neutral (subject has a facial expression)',
|
||||
'GLASSES: Subject is wearing glasses ',
|
||||
'JUST WRING: Goes against almost all acceptable passport criteria.',
|
||||
'Others not specified.',
|
||||
].map(function (name, index) { return { index: index + 1, name: name }; }),
|
||||
selectedReviewOptions: [],
|
||||
otherReviewOption: '',
|
||||
busy: { load: false, clean: false, review: false, save: false },
|
||||
toasts: [],
|
||||
myCroppa: {},
|
||||
},
|
||||
|
||||
@@ -78,11 +78,31 @@ Vue.use(Croppa);
|
||||
return;
|
||||
}
|
||||
self.loading = false;
|
||||
toastr.error('Could not load your session. Please refresh the page.', 'Oops!');
|
||||
self.toast('error', 'Session error', 'Could not load your session. Please refresh the page.');
|
||||
});
|
||||
Promise.all(
|
||||
['cds-button', 'cds-toast', 'cds-toast-item', 'cds-tag'].map(function (n) {
|
||||
return customElements.whenDefined(n).catch(function () {});
|
||||
})
|
||||
).then(function () {
|
||||
self.$forceUpdate();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
toast: function (kind, title, caption) {
|
||||
var self = this;
|
||||
var id = ++toastSeq;
|
||||
this.toasts.push({ id: id, kind: kind, title: title, caption: caption || '' });
|
||||
setTimeout(function () {
|
||||
self.removeToast(id);
|
||||
}, 6000);
|
||||
},
|
||||
|
||||
removeToast: function (id) {
|
||||
this.toasts = this.toasts.filter(function (t) { return t.id !== id; });
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
this.message = { message: { caption: null, file_url: null, domain: '' } };
|
||||
this.agent = null;
|
||||
@@ -110,7 +130,7 @@ Vue.use(Croppa);
|
||||
);
|
||||
if (!data.ok) {
|
||||
this.reset(); // nothing (more) to review — back to the load state
|
||||
toastr.error(data.message, 'Oops!');
|
||||
this.toast('info', 'No picture', data.message || 'Nothing to load.');
|
||||
return;
|
||||
}
|
||||
this.message = data.data;
|
||||
@@ -119,7 +139,7 @@ Vue.use(Croppa);
|
||||
);
|
||||
if (!image.data.ok) {
|
||||
this.reset();
|
||||
toastr.error("Couldn't load the attached image. Please try again.", 'Oops!');
|
||||
this.toast('error', 'Load failed', "Couldn't load the attached image. Please try again.");
|
||||
return;
|
||||
}
|
||||
this.message.message.file_url = image.data.data;
|
||||
@@ -133,14 +153,8 @@ Vue.use(Croppa);
|
||||
this.agent = review.data.ok ? review.data.data : null;
|
||||
}
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', message);
|
||||
} finally {
|
||||
this.reviewed = false;
|
||||
this.accepted = false;
|
||||
this.selectedReviewOptions = [];
|
||||
this.otherReviewOption = '';
|
||||
this.requiresCleaning = '';
|
||||
this.otp = '';
|
||||
this.busy.load = false;
|
||||
}
|
||||
},
|
||||
@@ -168,7 +182,7 @@ Vue.use(Croppa);
|
||||
fr.onload = function () { self.cleanedImage = fr.result; };
|
||||
fr.readAsDataURL(blob);
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Image Cleanup Failed');
|
||||
this.toast('error', 'Image Cleanup Failed', message);
|
||||
} finally {
|
||||
this.busy.clean = false;
|
||||
}
|
||||
@@ -178,7 +192,7 @@ Vue.use(Croppa);
|
||||
var self = this;
|
||||
if (!this.canReview) return;
|
||||
if (!this.accepted && this.selectedReviewOptions.length === 0 && !this.otherReviewOption) {
|
||||
toastr.error('Please indicate why this image is not good enough.', 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', 'Please indicate why this image is not good enough.');
|
||||
return;
|
||||
}
|
||||
this.busy.review = true;
|
||||
@@ -206,15 +220,15 @@ Vue.use(Croppa);
|
||||
...data,
|
||||
});
|
||||
if (!result.ok) {
|
||||
toastr.error(result.message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', result.message || 'Review failed.');
|
||||
return;
|
||||
}
|
||||
if (reviewMessage) {
|
||||
toastr.success('Profile owner has been notified of the review.', 'Review Sent');
|
||||
this.toast('success', 'Review Sent', 'Profile owner has been notified of the review.');
|
||||
}
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Operation Failed');
|
||||
this.toast('error', 'Operation Failed', message);
|
||||
} finally {
|
||||
this.busy.review = false;
|
||||
}
|
||||
@@ -227,21 +241,19 @@ Vue.use(Croppa);
|
||||
try {
|
||||
var { data } = await axios.post('/cropper/dequeue', { message: this.message });
|
||||
if (!data.ok) {
|
||||
toastr.error(data.message, 'Not Removed');
|
||||
this.toast('error', 'Not Removed', data.message || 'Removal failed.');
|
||||
return;
|
||||
}
|
||||
toastr.success(data.message, 'Removed!');
|
||||
this.toast('success', 'Removed!', data.message || '');
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Not Removed');
|
||||
this.toast('error', 'Not Removed', message);
|
||||
} finally {
|
||||
this.busy.review = false;
|
||||
}
|
||||
},
|
||||
|
||||
saveChanges: async function () {
|
||||
var self = this;
|
||||
if (!this.canSave) return;
|
||||
this.busy.save = true;
|
||||
try {
|
||||
var { data } = await axios.post(
|
||||
@@ -254,13 +266,13 @@ Vue.use(Croppa);
|
||||
}
|
||||
);
|
||||
if (!data.ok) {
|
||||
toastr.error(data.message, 'Not Saved');
|
||||
this.toast('error', 'Not Saved', data.message || 'Save failed.');
|
||||
return;
|
||||
}
|
||||
toastr.success('Picture saved for ' + this.message.message.caption, 'Saved');
|
||||
this.toast('success', 'Saved', 'Picture saved for ' + this.message.message.caption);
|
||||
this.reset();
|
||||
} catch ({ message }) {
|
||||
toastr.error(message, 'Not Saved');
|
||||
this.toast('error', 'Not Saved', message);
|
||||
} finally {
|
||||
this.busy.save = false;
|
||||
}
|
||||
|
||||
@@ -4,13 +4,19 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Image Cropper · YOUreka Tools</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@carbon/styles@1.69.0/css/styles.min.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='4' fill='%230f62fe'/><path d='M12 5a6 6 0 0 0-6 6c0 2.6.8 4.1 1.5 5.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M15.5 19a7.5 7.5 0 0 0 3-9.7A6 6 0 0 0 7.1 7.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M9.5 18.5a5.5 5.5 0 0 1-.8-7.6 3.8 3.8 0 0 1 7.2 1.5 4.3 4.3 0 0 1-3.4 4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%233b4fd8'/><path d='M12 5a6 6 0 0 0-6 6c0 2.6.8 4.1 1.5 5.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M15.5 19a7.5 7.5 0 0 0 3-9.7A6 6 0 0 0 7.1 7.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M9.5 18.5a5.5 5.5 0 0 1-.8-7.6 3.8 3.8 0 0 1 7.2 1.5 4.3 4.3 0 0 1-3.4 4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>">
|
||||
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/button.min.js"></script>
|
||||
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/notification.min.js"></script>
|
||||
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tag.min.js"></script>
|
||||
<style>
|
||||
.croppa-pad { border: 1px dashed var(--faint); border-radius: 12px; width: 252px; height: 270px; overflow: hidden; background: #fafbfe; }
|
||||
.croppa-pad { border: 1px solid var(--cds-border-strong, #8d8d8d); width: 252px; height: 270px; overflow: hidden; background: var(--cds-field, #f4f4f4); }
|
||||
.croppa-pad img { width: 250px; display: block; }
|
||||
.review-options .form-check { margin-bottom: 0.35rem; }
|
||||
</style>
|
||||
@@ -43,20 +49,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- notifications -->
|
||||
<div class="toast-viewport" aria-live="polite">
|
||||
<cds-toast>
|
||||
<cds-toast-item v-for="t in toasts" v-bind:key="t.id" v-bind:kind="t.kind"
|
||||
v-bind:title="t.title" v-bind:caption="t.caption" timeout="6000"></cds-toast-item>
|
||||
</cds-toast>
|
||||
</div>
|
||||
|
||||
<!-- 1 · load -->
|
||||
<section class="card panel">
|
||||
<div class="panel-head">
|
||||
<span class="step-chip">1</span>
|
||||
<h2>Load a picture</h2>
|
||||
<span class="hint" v-if="message && message.message">Working on {{ message.message.caption }} · {{ message.message.domain }}</span>
|
||||
<span class="hint" v-if="message && message.message">Working on {{ message.message.caption || '(no caption)' }} · {{ message.message.domain }}</span>
|
||||
</div>
|
||||
<div class="row-gap">
|
||||
<button class="btn btn-primary" v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
|
||||
<cds-button v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
|
||||
<span v-if="!busy.load">Load next queued</span>
|
||||
<span v-else>Loading…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</button>
|
||||
<button class="btn btn-ghost" v-if="message && message.message" v-on:click="reset">Clear</button>
|
||||
</cds-button>
|
||||
<cds-button kind="secondary" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</cds-button>
|
||||
<cds-button kind="ghost" v-if="message && message.message" v-on:click="reset">Clear</cds-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -69,88 +83,88 @@
|
||||
</div>
|
||||
|
||||
<dl class="details">
|
||||
<div><dt>Phone</dt><dd>{{ message.message.caption }}</dd></div>
|
||||
<div><dt>Phone</dt><dd>{{ message.message.caption || '—' }}</dd></div>
|
||||
<div><dt>Domain</dt><dd>{{ message.message.domain }}</dd></div>
|
||||
<div v-if="agent"><dt>Agent</dt><dd>{{ agent.name }} <span class="faint">{{ agent.phone }}</span></dd></div>
|
||||
<div v-if="message.message.process">
|
||||
<dt>Process</dt>
|
||||
<dd>{{ message.message.process.variables.name }} <span class="badge-soft badge-brand">{{ message.message.process.variables.environment }}</span></dd>
|
||||
<dd>{{ message.message.process.variables.name }} <cds-tag type="blue">{{ message.message.process.variables.environment }}</cds-tag></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="editor-grid mt-2">
|
||||
<div class="editor-media">
|
||||
<label>Original — crop it</label>
|
||||
<label class="cds--label">Original — crop it</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<croppa v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
|
||||
<img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
|
||||
</croppa>
|
||||
</div>
|
||||
<template v-if="cleanedImage">
|
||||
<label style="display:block;" class="mt-2">Cleaned preview</label>
|
||||
<label class="cds--label mt-2" style="display:block;">Cleaned preview</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<img :src="cleanedImage" alt="cleaned preview">
|
||||
</div>
|
||||
<button class="btn btn-danger-ghost mt-1" v-on:click="cleanedImage = null">Remove cleaned image</button>
|
||||
<cds-button kind="ghost" class="mt-1" v-on:click="cleanedImage = null">Remove cleaned image</cds-button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="editor-controls">
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:200px;">
|
||||
<label for="requiresCleaning">Requires cleaning?</label>
|
||||
<select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
|
||||
<label class="cds--label" for="requiresCleaning">Requires cleaning?</label>
|
||||
<select id="requiresCleaning" class="cds--select-input" v-model="requiresCleaning">
|
||||
<option value="">--Choose--</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
|
||||
<cds-button v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
|
||||
<span v-if="!busy.clean">Clean background</span>
|
||||
<span v-else>Cleaning…</span>
|
||||
</button>
|
||||
</cds-button>
|
||||
</div>
|
||||
|
||||
<hr class="mt-2">
|
||||
|
||||
<div class="row-gap" v-if="!reviewed">
|
||||
<div class="btn btn-success" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = true">Accept picture</div>
|
||||
<div class="btn btn-danger" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = false">Reject picture</div>
|
||||
<cds-button v-on:click="reviewed = true; accepted = true">Accept picture</cds-button>
|
||||
<cds-button kind="danger" v-on:click="reviewed = true; accepted = false">Reject picture</cds-button>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && accepted" class="mt-2">
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:150px; max-width:200px;">
|
||||
<label for="otpSave">OTP</label>
|
||||
<input id="otpSave" class="form-control" v-model.trim="otp" autocomplete="one-time-code">
|
||||
<label class="cds--label" for="otpSave">OTP</label>
|
||||
<input id="otpSave" class="cds--text-input" v-model.trim="otpSave" autocomplete="one-time-code">
|
||||
</div>
|
||||
<button class="btn btn-primary" v-bind:disabled="!canSave" v-on:click="saveChanges">
|
||||
<cds-button v-bind:disabled="!canSave" v-on:click="saveChanges">
|
||||
<span v-if="!busy.save">Crop and upload picture</span>
|
||||
<span v-else>Saving…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</cds-button>
|
||||
<cds-button kind="ghost" v-on:click="reviewed = false">Change review</cds-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && !accepted" class="mt-2">
|
||||
<label>Please state why this picture is not good enough.</label>
|
||||
<label class="cds--label">Please state why this picture is not good enough.</label>
|
||||
<div class="review-options mt-1">
|
||||
<div class="form-check" v-for="item in reviewOptions" v-bind:key="item.index">
|
||||
<input class="form-check-input" type="checkbox" v-model="selectedReviewOptions" v-bind:id="'reason-' + item.index" v-bind:value="item.name">
|
||||
<label class="form-check-label" v-bind:for="'reason-' + item.index">{{ item.name }}</label>
|
||||
<div v-for="item in reviewOptions" v-bind:key="item.index" style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.35rem;">
|
||||
<input type="checkbox" class="cds--checkbox" v-bind:id="'reason-' + item.index" v-bind:value="item.name" v-model="selectedReviewOptions">
|
||||
<label v-bind:for="'reason-' + item.index" style="margin:0;" v-on:click.prevent>{{ item.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1" style="max-width:480px;">
|
||||
<label for="otherReviewOption">Others (please specify).</label>
|
||||
<textarea id="otherReviewOption" rows="3" class="form-control" v-model="otherReviewOption"></textarea>
|
||||
<label class="cds--label" for="otherReviewOption">Others (please specify).</label>
|
||||
<textarea id="otherReviewOption" rows="3" class="cds--text-area" v-model="otherReviewOption"></textarea>
|
||||
</div>
|
||||
<div class="row-gap mt-2">
|
||||
<button class="btn btn-primary" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
|
||||
<cds-button kind="danger" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
|
||||
<span v-if="!busy.review">Send review</span>
|
||||
<span v-else>Sending…</span>
|
||||
</button>
|
||||
<button class="btn btn-danger-ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</cds-button>
|
||||
<cds-button kind="ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</cds-button>
|
||||
<cds-button kind="ghost" v-on:click="reviewed = false">Change review</cds-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,11 +185,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
|
||||
<script src="/assets/cropper/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user