chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor/feat: 02 image & download image

Browse source
This commit is contained in:
puriphatt 2024-08-22 13:48:59 +07:00
parent 251c460787
commit 78c0af9aae
4 changed files with 80 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/ImageUploadDialog.vue
View file

@ -1,5 +1,6 @@
<script lang="ts" setup>
import AppBox from './app/AppBox.vue';
import { CancelButton, SaveButton } from './button';
defineExpose({ browse });
defineProps<{
@ -58,6 +59,22 @@ function change(e: Event) {
}
}
}
async function downloadImage(url: string) {
const res = await fetch(url);
const blob = await res.blob();
let extension = '';
if (blob.type === 'image/jpeg') extension = '.jpg';
if (blob.type === 'image/png') extension = '.png';
let a = document.createElement('a');
a.download = `download${extension}`;
a.href = window.URL.createObjectURL(blob);
a.click();
a.remove();
}
</script>
<template>
<q-dialog v-model="dialogState">
@ -90,12 +107,22 @@ function change(e: Event) {
<div style="position: fixed; padding: var(--size-2)">
<q-btn
class="upload-image-btn"
icon="mdi-camera"
icon="mdi-camera-outline"
size="md"
unelevated
round
v-if="!changeDisabled"
@click="inputFile?.click()"
style="color: hsla(var(--stone-0-hsl) / 0.7)"
></q-btn>
<q-btn
class="upload-image-btn q-ml-md"
icon="mdi-download-outline"
size="md"
unelevated
round
@click="downloadImage(imageUrl)"
style="color: hsla(var(--stone-0-hsl) / 0.7)"
></q-btn>
</div>
</div>
@ -106,6 +133,7 @@ function change(e: Event) {
<q-btn
dense
unelevated
flat
:color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
:text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
:label="$t('clear')"
@ -123,29 +151,19 @@ function change(e: Event) {
"
v-if="clearButton"
/>
<q-btn
dense
unelevated
:color="$q.dark.isActive ? 'grey-9' : 'grey-4'"
:text-color="$q.dark.isActive ? 'grey-1' : 'grey-10'"
:label="$t('cancel')"
<CancelButton
outlined
class="q-px-md q-mr-sm"
@click="
inputFile && (inputFile.value = ''),
(imageUrl = defaultUrl || fallbackUrl || ''),
(file = null)
"
class="q-px-md q-mr-sm"
v-close-popup
/>
<q-btn
dense
unelevated
id="submit-btn"
type="submit"
color="primary"
class="q-px-md"
<SaveButton
outlined
@click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
:label="$t('save')"
/>
</div>
</AppBox>

16
src/components/ProfileBanner.vue
View file

@ -74,7 +74,6 @@ const showOverlay = ref(false);
class="relative-position"
style="z-index: 1"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
cursor: `${noImageAction ? 'default' : 'pointer'}`,
}"
@ -93,8 +92,8 @@ const showOverlay = ref(false);
<template #error>
<div
class="full-width full-height flex items-center justify-center"
style="background-color: transparent"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
@ -105,8 +104,8 @@ const showOverlay = ref(false);
<div
v-else
class="full-width full-height flex items-center justify-center"
style="background-color: transparent"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
@ -114,7 +113,16 @@ const showOverlay = ref(false);
</div>
</template>
</q-img>
<q-icon id="profile-view" v-else :name="icon || 'mdi-account'" />
<div
v-else
class="full-width full-height flex items-center justify-center"
:style="{
background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`,
}"
>
<q-icon :name="icon || 'mdi-account'" />
</div>
<q-badge
v-if="!hideActive"
class="absolute-bottom-right"