rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): add data-testid attribute to some components

Browse Source
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-03-16 21:18:07 -04:00
parent bf44122abe
commit 6fd6d7cbb1
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
8 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/baseEditor.vue
View File

@ -11,12 +11,26 @@
wrapCol?: any; wrapCol?: any;
}>(); }>();
let dark = inject<boolean>("dark"); let dark = inject<boolean>("dark");
const stop = (e, ed) => {
console.log(e.type.toUpperCase(), e, ed);
e.preventDefault();
e.cancel();
e.stopImmediatePropagation();
e.stopPropagation();
};
</script> </script>
<template> <template>
<ClientOnly> <ClientOnly>
<vee-field :name="props.name" v-slot="{ errorMessage, field, value }" :model-value="props.val"> <vee-field :name="props.name" v-slot="{ errorMessage, field, value, setValue }" :model-value="props.val">
<a-form-item :validate-status="!!errorMessage ? 'error' : ''" :name="props.name" :label="props.label as any" :help="errorMessage"> <a-form-item
:data-testid="$attrs['data-testid']"
:validate-status="!!errorMessage ? 'error' : ''"
:name="props.name"
:label="props.label as any"
:help="errorMessage"
>
<tinymce-editor <tinymce-editor
model-events="drag dragdrop dragend draggesture dragover dragstart drop change"
v-bind="field" v-bind="field"
width="100%" width="100%"
@change=" @change="
@ -27,6 +41,16 @@
" "
:initial-value="value" :initial-value="value"
v-model:model-value="field.value" v-model:model-value="field.value"
@drag="stop"
@deactivate="(e) => console.log(e)"
@dragOver="stop"
@dragEnter="stop"
@dragEnd="stop"
@dragDrop="stop"
@draggesture="stop"
@dragGesture="stop"
@dragstart="stop"
@drop="stop"
tinymce-script-src="/tinymce/tinymce.min.js" tinymce-script-src="/tinymce/tinymce.min.js"
:init="{ :init="{
...props.init, ...props.init,

1
components/findUser.vue
View File

@ -67,6 +67,7 @@
:options="state.data" :options="state.data"
v-model:value="value" v-model:value="value"
:allow-clear="true" :allow-clear="true"
v-bind="$attrs"
> >
<template v-if="state.fetching" #notFoundContent> <template v-if="state.fetching" #notFoundContent>
<a-spin size="small" /> <a-spin size="small" />

1
components/story/atoms/bands.vue
View File

@ -24,6 +24,7 @@
<template> <template>
<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands"> <a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage as any" label="Bands">
<a-select <a-select
v-bind="$attrs"
:allow-clear="true" :allow-clear="true"
mode="multiple" mode="multiple"
option-filter-prop="label" option-filter-prop="label"

2
components/story/atoms/characters.vue
View File

@ -18,7 +18,7 @@
</script> </script>
<template> <template>
<a-form-item :help="errorMessage" label="Characters" :name="bandName as string" :validate-status="!!errorMessage ? 'error' : undefined"> <a-form-item :help="errorMessage" label="Characters" :name="bandName as string" :validate-status="!!errorMessage ? 'error' : undefined">
<a-select mode="multiple" :options="opts" v-model:value="value"> <a-select v-bind="$attrs" mode="multiple" :options="opts" v-model:value="value">
<template #removeIcon> <template #removeIcon>
<i class="far fa-circle-x" /> <i class="far fa-circle-x" />
</template> </template>

2
components/story/atoms/genre.vue
View File

@ -10,7 +10,7 @@
</script> </script>
<template> <template>
<a-form-item :help="errorMessage" label="Genre(s)" :validate-status="!!errorMessage ? 'error' : undefined"> <a-form-item :help="errorMessage" label="Genre(s)" :validate-status="!!errorMessage ? 'error' : undefined">
<a-select :allow-clear="true" :options="opts" v-model:value="value" mode="multiple"> <a-select v-bind="$attrs" :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
<template #removeIcon> <template #removeIcon>
<i class="far fa-circle-x" /> <i class="far fa-circle-x" />
</template> </template>

6
components/story/atoms/pairings.vue
View File

@ -19,19 +19,19 @@
<a-form-item label="Pairings"> <a-form-item label="Pairings">
<a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key"> <a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key">
<Field :name="fname + 'relationships' + `[${idx}]`"> <Field :name="fname + 'relationships' + `[${idx}]`">
<a-select mode="multiple" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])"> <a-select mode="multiple" v-bind="$attrs" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
<template #removeIcon> <template #removeIcon>
<i class="far fa-circle-x" /> <i class="far fa-circle-x" />
</template> </template>
</a-select> </a-select>
</Field> </Field>
<a-col :span="4"> <a-col :span="4">
<a-button @click="(e) => remove(idx)"> - </a-button> <a-button :data-testid="`${$attrs['data-testid']}.${idx}.remove`" @click="(e) => remove(idx)"> - </a-button>
</a-col> </a-col>
</a-row> </a-row>
<a-row justify="end"> <a-row justify="end">
<a-col :span="2"> <a-col :span="2">
<a-button @click="(e) => push([])"> + </a-button> <a-button :data-testid="`${$attrs['data-testid']}.add`" @click="(e) => push([])"> + </a-button>
</a-col> </a-col>
</a-row> </a-row>
</a-form-item> </a-form-item>

30
components/story/create/singleChapter.vue
View File

@ -9,6 +9,7 @@
import elCharacters from "../atoms/characters.vue"; import elCharacters from "../atoms/characters.vue";
import elPairings from "../atoms/pairings.vue"; import elPairings from "../atoms/pairings.vue";
import uploadOrPaste from "./uploadOrPaste.vue"; import uploadOrPaste from "./uploadOrPaste.vue";
import { IBand } from "@models/band";
// import test1 from // import test1 from
let { name, data } = defineProps<{ let { name, data } = defineProps<{
@ -16,7 +17,7 @@
data: FormChapter; data: FormChapter;
}>(); }>();
let acData = toRef(data); let acData = toRef(data);
let { data: _bands } = await useApiFetch("/band/all"); let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
let bands = ref(_bands); let bands = ref(_bands);
provide("curName", name + "."); provide("curName", name + ".");
provide("bandlist", bands); provide("bandlist", bands);
@ -30,58 +31,59 @@
updateBands, updateBands,
}); });
const wrapc = { span: 12 }; const wrapc = { span: 12 };
const tbase = `storyform.${name}.form`;
</script> </script>
<template> <template>
<div> <div :data-testid="tbase">
<a-row :gutter="[10, 0]"> <a-row :gutter="[10, 0]">
<a-col :span="12"> <a-col :span="12">
<Field :name="name + '.chapterTitle'" v-slot="{ value, field, errorMessage }"> <Field :name="name + '.chapterTitle'" v-slot="{ value, field, errorMessage }">
<a-form-item :name="[field.name as string]" label="Chapter title" :help="errorMessage" :status="!!errorMessage ? 'error' : undefined"> <a-form-item :name="[field.name as string]" label="Chapter title" :help="errorMessage" :status="!!errorMessage ? 'error' : undefined">
<a-input v-bind="field" /> <a-input :data-testid="`${tbase}.title`" v-bind="field" />
</a-form-item> </a-form-item>
</Field> </Field>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<el-bands /> <el-bands :data-testid="`${tbase}.bands`" />
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[10, 0]"> <a-row :gutter="[10, 0]">
<a-col :span="12"> <a-col :span="12">
<base-editor v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" /> <base-editor :data-testid="`${tbase}.summary`" v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<base-editor v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" /> <base-editor :data-testid="`${tbase}.notes`" v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="[10, 0]"> <a-row :gutter="[10, 0]">
<a-col :span="12"> <a-col :span="12">
<el-characters /> <el-characters :data-testid="`${tbase}.characters`" />
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<el-pairings /> <el-pairings :data-testid="`${tbase}.relationships`" />
</a-col> </a-col>
</a-row> </a-row>
<Field :name="name + '.nsfw'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }"> <Field :name="name + '.nsfw'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-checkbox v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox> <a-checkbox :data-testid="`${tbase}.nsfw`" v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
<error-message :name="field.name" /> <error-message :name="field.name" />
</Field> </Field>
<Field :name="name + '.loggedInOnly'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }"> <Field :name="name + '.loggedInOnly'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-checkbox v-bind="field"> Visible only to registered users </a-checkbox> <a-checkbox :data-testid="`${tbase}.loggedInOnly`" v-bind="field"> Visible only to registered users </a-checkbox>
<error-message :name="field.name" /> <error-message :name="field.name" />
</Field> </Field>
<Field :name="name + '.hidden'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }"> <Field :name="name + '.hidden'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
<a-tooltip> <a-tooltip>
<template #title> Hides your story from everyone except you and site admins. </template> <template #title> Hides your story from everyone except you and site admins. </template>
<a-checkbox v-bind="field"> Hidden </a-checkbox> <a-checkbox v-bind="field" :data-testid="`${tbase}.hidden`"> Hidden </a-checkbox>
</a-tooltip> </a-tooltip>
</Field> </Field>
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<genre /> <genre :data-testid="`${tbase}.genre`" />
</a-col> </a-col>
</a-row> </a-row>
<a-divider> Contents </a-divider> <a-divider> Contents </a-divider>
<upload-or-paste /> <upload-or-paste :data-testid="`${tbase}.uploadOrPaste`" />
<Field :name="name + '.id'" v-if="!!data.id" :model-value="data.id" /> <Field :hidden="true" :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
</div> </div>
</template> </template>

8
components/story/create/uploadOrPaste.vue
View File

@ -11,14 +11,15 @@
</script> </script>
<template> <template>
<a-radio-group v-model:value="pvalue"> <a-radio-group v-model:value="pvalue">
<a-radio value="pasteOrType">Paste or type content</a-radio> <a-radio value="pasteOrType" :data-testid="$attrs['data-testid'] + '.radio.pasteOrType'">Paste or type content</a-radio>
<a-radio value="upload">Upload a file</a-radio> <a-radio value="upload" :data-testid="$attrs['data-testid'] + '.radio.upload'">Upload a file</a-radio>
</a-radio-group> </a-radio-group>
<br /> <br />
<br /> <br />
<base-editor label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" /> <base-editor :data-testid="$attrs['data-testid'] + '.type'" label="" v-if="pvalue === 'pasteOrType'" :init="story" :name="fname + 'content'" />
<a-upload <a-upload
v-model:file-list="fileList" v-model:file-list="fileList"
:data-testid="$attrs['data-testid'] + '.upload'"
v-else-if="pvalue === 'upload'" v-else-if="pvalue === 'upload'"
:name="fname + 'file'" :name="fname + 'file'"
accept=".doc,.docx,.md,.markdown" accept=".doc,.docx,.md,.markdown"
@ -32,6 +33,7 @@
let resp; let resp;
try { try {
resp = bap.file.response; resp = bap.file.response;
console.log('RESPONSE', resp);
if (resp.success) { if (resp.success) {
fileField.setValue(resp.fileName); fileField.setValue(resp.fileName);
console.log(fileField.value); console.log(fileField.value);