261 lines
8.5 KiB
Vue
261 lines
8.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, toRaw, watch } from 'vue'
|
|
|
|
import Button from 'primevue/button';
|
|
import Card from 'primevue/card';
|
|
import Chip from 'primevue/chip';
|
|
import ColorPicker from 'primevue/colorpicker';
|
|
import { Form } from '@primevue/forms';
|
|
import Image from 'primevue/image';
|
|
import InputGroup from 'primevue/inputgroup';
|
|
import InputGroupAddon from 'primevue/inputgroupaddon';
|
|
import InputText from 'primevue/inputtext';
|
|
import RadioButton from 'primevue/radiobutton';
|
|
|
|
import IconLayout1Vue from '@/components/layouts/IconLayout1.vue';
|
|
import IconLayout2Vue from '@/components/layouts/IconLayout2.vue';
|
|
import IconLayout3Vue from '@/components/layouts/IconLayout3.vue';
|
|
import IconLayout4Vue from '@/components/layouts/IconLayout4.vue';
|
|
import Sticker from '@/components/Sticker.vue';
|
|
import { type Organization, useOrganization } from '@/queries/organization';
|
|
import { useSticker } from '@/composables/sticker';
|
|
import { activist, type Sticker as StickerType } from '@/stores/stickersStore';
|
|
|
|
|
|
const { state: orgs } = useOrganization();
|
|
// const sticker.orgs = ref<Organization[]>([]);
|
|
const original = useSticker();
|
|
let sticker = ref<StickerType>(activist);
|
|
const orgFilter = ref("");
|
|
|
|
// When the original sticker appears, copy it into a local coy.
|
|
watch(original, (newValue) => {
|
|
sticker.value = structuredClone(toRaw(newValue));
|
|
});
|
|
|
|
const initialValues = {};
|
|
const resolver = () => {
|
|
return {};
|
|
};
|
|
|
|
function onFormSubmit() {
|
|
original.value = sticker.value;
|
|
}
|
|
|
|
function addOrg(id: string) {
|
|
sticker.value.orgs.push(orgs.value.data.find((org: Organization) => org.id === id));
|
|
}
|
|
function removeOrg(orgId: string) {
|
|
const myIds = sticker.value.orgs.map(org => org.id);
|
|
let start = myIds.indexOf(orgId);
|
|
sticker.value.orgs.splice(start, 1);
|
|
}
|
|
const orgOptions = computed(() => {
|
|
const myIds = sticker.value.orgs.map(org => org.id);
|
|
return orgs.value.data.filter(({ id, name }: { id: string, name: string }) => {
|
|
return !myIds.includes(id)
|
|
&& name.toLowerCase().includes(orgFilter.value.toLowerCase());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div id="StickerPage">
|
|
<!-- <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
|
|
<div id="StickerWrapper" class="sticky top-0 z-10">
|
|
<Sticker v-bind="sticker" id="Sticker1" />
|
|
<!-- <p>8-inch sticker</p>-->
|
|
<!-- <Sticker id="Sticker2" v-bind="sticker2" />-->
|
|
</div>
|
|
<Card>
|
|
<template #content>
|
|
<Form v-bind:initialValues
|
|
v-bind:resolver="resolver"
|
|
@submit="onFormSubmit">
|
|
<div class="bg-surface-50 dark:bg-surface-950 px-3 py-5 md:px-12">
|
|
<div class="grid grid-cols-12 gap-4">
|
|
<div class="col-span-12 flex flex-col gap-4">
|
|
<label for="nickname2">Organizations I Support</label>
|
|
<div class="my-orgs">
|
|
<div v-for="org in sticker.orgs" :key="org.id">
|
|
<Chip
|
|
:image="org.logo"
|
|
:label="org.abbrev"
|
|
removable
|
|
v-on:remove="removeOrg(org.id)"
|
|
>
|
|
</Chip>
|
|
</div>
|
|
</div>
|
|
<InputText
|
|
id="nickname2"
|
|
type="text"
|
|
class="w-full"
|
|
placeholder="search"
|
|
v-model="orgFilter"
|
|
/>
|
|
<div v-if="orgs.status === 'pending'">
|
|
loading
|
|
</div>
|
|
<div v-if="orgs.error">
|
|
There was an error loading organization data.
|
|
</div>
|
|
<div class="logos" v-else-if="orgs.data">
|
|
<div v-for="org in orgOptions" :key="org.id">
|
|
<a @click="addOrg(org.id)">
|
|
<Image class="logo" :src="org.logo" alt="Image" />
|
|
{{ org.name }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12">
|
|
<label for="nickname2">Layout {{sticker.layout}}</label>
|
|
<div class="flex flex-wrap gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="sticker.layout" inputId="layout1" name="layout" value="layout1" />
|
|
<label for="layout1"><IconLayout1Vue /></label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="sticker.layout" inputId="layout2" name="layout" value="layout2" />
|
|
<label for="layout2"><IconLayout2Vue /></label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="sticker.layout" inputId="layout3" name="layout" value="layout3" />
|
|
<label for="layout3"><IconLayout3Vue /></label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="sticker.layout" inputId="layout4" name="layout" value="layout4" />
|
|
<label for="layout4"><IconLayout4Vue /></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12 md:col-span-6">
|
|
<label for="message1">Message 1</label>
|
|
<InputText class="w-full" id="message1" name="message1" type="text" v-model="sticker.message1" fluid />
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6">
|
|
<label for="message2">Message 2</label>
|
|
<InputText class="w-full" id="message2" name="message2" type="text" v-model="sticker.message2" fluid />
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-6">
|
|
<label for="message1">Message 3</label>
|
|
<InputText class="w-full" id="message3" name="message3" type="text" v-model="sticker.message3" fluid />
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6">
|
|
<label for="message4">Message 4</label>
|
|
<InputText class="w-full" id="message4" name="message4" type="text" v-model="sticker.message4" fluid />
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12 md:col-span-6">
|
|
<label>Background Color {{sticker.color}}</label>
|
|
<ColorPicker v-model="sticker.color" />
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6">
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12">
|
|
<label for="nickname2">My note about this sticker</label>
|
|
<InputText id="nickname2" type="text" class="w-full" placeholder="First one I made" />
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12">
|
|
<label for="website2">Website</label>
|
|
<InputGroup>
|
|
<InputGroupAddon>URL</InputGroupAddon>
|
|
<InputText id="website2" placeholder="https://" />
|
|
</InputGroup>
|
|
</div>
|
|
|
|
<div class="divider" />
|
|
|
|
<div class="col-span-12">
|
|
<Button label="Save Changes" class="w-auto mt-4" type="submit" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
label {
|
|
@apply font-medium text-surface-900 dark:text-surface-0 mb-1 block;
|
|
}
|
|
.divider {
|
|
@apply border-surface border-t opacity-50 mb-4 col-span-12;
|
|
}
|
|
#StickerPage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
> * {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
#StickerWrapper {
|
|
background-color: #CCC;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 1em;
|
|
padding: 20px;
|
|
#Sticker1 {
|
|
width: 300px;
|
|
@media (screen(sm)) {
|
|
zoom: 250%;
|
|
}
|
|
}
|
|
#Sticker2 {
|
|
width: 400px;
|
|
}
|
|
}
|
|
.logos {
|
|
display: flex;
|
|
gap: 1em;
|
|
height: 200px;
|
|
overflow: auto;
|
|
flex-wrap: wrap;
|
|
> div {
|
|
background-color: #F8F8F8;
|
|
border: 1px solid #bbb;
|
|
border-radius: 4px;
|
|
height: 60px;
|
|
padding: 6px;
|
|
width: 310px;
|
|
> a {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 1em;
|
|
.logo {
|
|
filter: grayscale(1);
|
|
width: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.my-orgs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
.logo {
|
|
display: block;
|
|
filter: grayscale(1);
|
|
width: 50px;
|
|
}
|
|
}
|
|
</style>
|