jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use vuetify form controls

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-07 19:38:51 -04:00
parent 6ac05e1a10
commit 4aaa1a7f90
21 changed files with 724 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/src/features/workspaces/components/ApprovalWorkflowEditor.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import { computed } from 'vue';
import {
mdiArrowDown,
mdiArrowUp,
@@ -40,6 +41,22 @@
];
const membershipOptions = ['Team', 'Client'];
const targetTypes = ['Role', 'Membership', 'Member'];
const roleItems = computed(() => roleOptions.map(role => ({
title: props.labels.roles[role],
value: role,
})));
const membershipItems = computed(() => membershipOptions.map(membership => ({
title: props.labels.memberships[membership],
value: membership,
})));
const targetTypeItems = computed(() => targetTypes.map(targetType => ({
title: props.labels.targetTypes[targetType],
value: targetType,
})));
const memberItems = computed(() => props.members.map(member => ({
title: `${member.displayName} - ${member.email}`,
value: member.id,
})));
function emitSteps(steps) {
emit('update:modelValue', steps.map((step, index) => ({
@@ -101,13 +118,8 @@
.filter(Boolean);
}
function updateMemberTargets(index, selectedOptions) {
const targetValue = Array.from(selectedOptions)
.map(option => option.value)
.filter(Boolean)
.join(',');
updateStep(index, { targetValue });
function updateMemberTargets(index, selectedMemberIds) {
updateStep(index, { targetValue: selectedMemberIds.filter(Boolean).join(',') });
}
function moveStep(index, offset) {
@@ -198,13 +210,14 @@
</div>
<div class="approval-step-fields">
<label class="field">
<span>{{ labels.fields.name }}</span>
<input
:value="step.name"
type="text"
<div class="field">
<v-text-field
:model-value="step.name"
:label="labels.fields.name"
:disabled="disabled"
@input="updateStep(index, { name: $event.target.value })"
variant="outlined"
hide-details
@update:model-value="updateStep(index, { name: $event })"
/>
<small
v-if="errors[index]?.name"
@@ -212,73 +225,54 @@
>
{{ errors[index].name }}
</small>
</label>
</div>
<label class="field">
<span>{{ labels.fields.targetType }}</span>
<select
:value="step.targetType"
:disabled="disabled"
@change="updateStep(index, { targetType: $event.target.value })"
>
<option
v-for="targetType in targetTypes"
:key="targetType"
:value="targetType"
>
{{ labels.targetTypes[targetType] }}
</option>
</select>
</label>
<v-select
:model-value="step.targetType"
:items="targetTypeItems"
:label="labels.fields.targetType"
:disabled="disabled"
variant="outlined"
hide-details
@update:model-value="updateStep(index, { targetType: $event })"
/>
<label class="field">
<span>{{ labels.fields.targetValue }}</span>
<select
<div class="field">
<v-select
v-if="step.targetType === 'Role'"
:value="step.targetValue"
:model-value="step.targetValue"
:items="roleItems"
:label="labels.fields.targetValue"
:disabled="disabled"
@change="updateStep(index, { targetValue: $event.target.value })"
>
<option
v-for="role in roleOptions"
:key="role"
:value="role"
>
{{ labels.roles[role] }}
</option>
</select>
variant="outlined"
hide-details
@update:model-value="updateStep(index, { targetValue: $event })"
/>
<select
<v-select
v-else-if="step.targetType === 'Membership'"
:value="step.targetValue"
:model-value="step.targetValue"
:items="membershipItems"
:label="labels.fields.targetValue"
:disabled="disabled"
@change="updateStep(index, { targetValue: $event.target.value })"
>
<option
v-for="membership in membershipOptions"
:key="membership"
:value="membership"
>
{{ labels.memberships[membership] }}
</option>
</select>
variant="outlined"
hide-details
@update:model-value="updateStep(index, { targetValue: $event })"
/>
<select
<v-select
v-else
:value="getSelectedMemberIds(step)"
:model-value="getSelectedMemberIds(step)"
:items="memberItems"
:label="labels.fields.targetValue"
:disabled="disabled"
multiple
size="5"
@change="updateMemberTargets(index, $event.target.selectedOptions)"
>
<option
v-for="member in members"
:key="member.id"
:value="member.id"
>
{{ member.displayName }} - {{ member.email }}
</option>
</select>
chips
closable-chips
variant="outlined"
hide-details
@update:model-value="updateMemberTargets(index, $event)"
/>
<small
v-if="step.targetType === 'Member'"
class="field-help"
@@ -292,17 +286,19 @@
>
{{ errors[index].targetValue }}
</small>
</label>
</div>
<label class="field">
<span>{{ labels.fields.requiredApproverCount }}</span>
<input
:value="step.requiredApproverCount"
<div class="field">
<v-text-field
:model-value="step.requiredApproverCount"
:label="labels.fields.requiredApproverCount"
type="number"
min="1"
step="1"
:disabled="disabled"
@input="updateStep(index, { requiredApproverCount: Number($event.target.value) })"
variant="outlined"
hide-details
@update:model-value="updateStep(index, { requiredApproverCount: Number($event) })"
/>
<small
v-if="errors[index]?.requiredApproverCount"
@@ -310,7 +306,7 @@
>
{{ errors[index].requiredApproverCount }}
</small>
</label>
</div>
</div>
</section>
</div>