Skip to content

Commit 7b13f36

Browse files
skwowetskwowet
committed
rewrite in vue composition api
1 parent 492a069 commit 7b13f36

File tree

1 file changed

+139
-97
lines changed

1 file changed

+139
-97
lines changed

‎frontend/src/modules/member/components/member-edit-attributes.vue‎

Lines changed: 139 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit attributes">
33
<template #content>
44
<div class="px-6 pb-6">
5-
<el-form ref="form" :model="formInline" class="attributes-form">
5+
<el-form :model="form" class="attributes-form">
66
<div class="rounded-md bg-yellow-50 border border-yellow-100 flex items-center gap-2 py-3 px-4 mt-2">
77
<i class="ri-alert-fill text-yellow-500 text-base " />
88
<span class="text-xs leading-5 text-gray-900">Some changes may overwrite current attributes from the
99
selected members.</span>
1010
</div>
1111
<!-- <h2 class="text-lg font-semibold mb-4">Attributes</h2> -->
1212

13-
<div class="mt-6 mb-8 flex flex-col gap-4">
13+
<!-- <div class="mt-6 mb-8 flex flex-col gap-4">
1414
<h6 class="text-xs text-gray-400">
1515
DEFAULT ATTRIBUTES
1616
</h6>
@@ -35,60 +35,76 @@
3535
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
3636
</div>
3737
38-
</div>
39-
<div class="mt-4 flex flex-col gap-8">
38+
</div> -->
39+
<div class="mt-6 mb-10 flex flex-col gap-8">
4040
<h6 class="text-xs text-gray-400">
4141
CUSTOM ATTRIBUTES
4242
</h6>
4343

44-
<div class="flex">
45-
<div class="flex flex-col flex-shrink-0 w-1/3">
46-
<span class="text-xs font-medium text-black">Organizations</span>
47-
<p class="text-2xs">
48-
{attribute type}
49-
</p>
50-
</div>
51-
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
52-
</div>
53-
54-
<div class="flex">
55-
<div class="flex flex-col flex-shrink-0 w-1/3">
56-
<span class="text-xs font-medium text-black">Website</span>
57-
<p class="text-2xs">
58-
URL
59-
</p>
60-
</div>
61-
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
62-
</div>
63-
64-
<div class="flex">
44+
<div v-for="(attribute, index) in customAttributes" :key="index" class="flex">
6545
<div class="flex flex-col flex-shrink-0 w-1/3">
66-
<span class="text-xs font-medium text-black">is Hireable</span>
67-
<p class="text-2xs">
68-
Boolean
69-
</p>
70-
</div>
71-
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
72-
</div>
73-
74-
<div class="flex">
75-
<div class="flex flex-col flex-shrink-0 w-1/3">
76-
<span class="text-xs font-medium text-black">{attribute}</span>
77-
<p class="text-2xs">
78-
{attribute type}
46+
<span class="text-xs font-medium text-gray-900">{{ attribute.label }}</span>
47+
<p class="text-2xs text-gray-500">
48+
{{ attributesTypes[attribute.type] }}
7949
</p>
8050
</div>
81-
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
82-
</div>
8351

84-
<div class="flex">
85-
<div class="flex flex-col flex-shrink-0 w-1/3">
86-
<span class="text-xs font-medium text-black">{attribute}</span>
87-
<p class="text-2xs">
88-
{attribute type}
89-
</p>
90-
</div>
91-
<el-input v-model="computedVisible" type="text" class="flex-grow ml-4" />
52+
<el-date-picker
53+
v-if="attribute.type === 'date'"
54+
v-model="model[attribute.name]"
55+
:prefix-icon="CalendarIcon"
56+
:clearable="false"
57+
class="custom-date-picker"
58+
popper-class="date-picker-popper"
59+
type="date"
60+
value-format="YYYY-MM-DD"
61+
format="YYYY-MM-DD"
62+
placeholder="YYYY-MM-DD"
63+
/>
64+
<!-- <app-autocomplete-many-input
65+
v-else-if="attribute.type === 'multiSelect'"
66+
v-model="model[attribute.name]"
67+
:fetch-fn="
68+
() => fetchCustomAttribute(attribute.id)
69+
"
70+
:create-fn="
71+
(value) =>
72+
updateCustomAttribute(attribute, value)
73+
"
74+
placeholder="Select an option or create one"
75+
input-class="w-full multi-select-field"
76+
:create-if-not-found="true"
77+
:collapse-tags="true"
78+
:parse-model="true"
79+
:are-options-in-memory="true"
80+
/> -->
81+
<el-select
82+
v-else-if="attribute.type === 'boolean'"
83+
v-model="model[attribute.name]"
84+
class="w-full"
85+
clearable
86+
placeholder="Select option"
87+
>
88+
<el-option
89+
key="true"
90+
label="True"
91+
:value="true"
92+
@mouseleave="onSelectMouseLeave"
93+
/>
94+
<el-option
95+
key="false"
96+
label="False"
97+
:value="false"
98+
@mouseleave="onSelectMouseLeave"
99+
/>
100+
</el-select>
101+
102+
<el-input
103+
v-else
104+
v-model="model[attribute.name]"
105+
:type="attribute.type"
106+
clearable
107+
/>
92108
</div>
93109
</div>
94110
</el-form>
@@ -106,73 +122,99 @@
106122
</app-dialog>
107123
</template>
108124

109-
<script>
125+
<script setup>
110126
import { mapActions } from 'vuex';
111127
import { storeToRefs } from 'pinia';
112-
import { reactive } from 'vue';
128+
import {
129+
reactive, ref, computed, h,
130+
} from 'vue';
113131
import { MemberModel } from '@/modules/member/member-model';
114132
import AppDialog from '@/shared/dialog/dialog.vue';
115-
import AppTagAutocompleteInput from '@/modules/tag/components/tag-autocomplete-input.vue';
116133
import { FormSchema } from '@/shared/form/form-schema';
117134
import { useMemberStore } from '@/modules/member/store/pinia';
118-
import AppFormItem from '@/shared/form/form-item.vue';
135+
136+
const CalendarIcon = h(
137+
'i', // type
138+
{
139+
class:
140+
'ri-calendar-line text-base leading-none text-gray-400',
141+
}, // props
142+
[],
143+
);
119144
120145
const memberStore = useMemberStore();
121146
const { selectedMembers } = storeToRefs(memberStore);
122147
123148
const { fields } = MemberModel;
149+
const formSchema = new FormSchema([fields.attributes]);
124150
125-
const formInline = reactive({
126-
user: '',
127-
region: '',
128-
date: '',
151+
const props = defineProps({
152+
modelValue: {
153+
type: Boolean,
154+
default: false,
155+
},
129156
});
130157
131-
export default {
132-
name: 'AppEditAttributesPopover',
133-
components: { AppDialog, AppFormItem },
158+
const emits = defineEmits(['reload', 'update:modelValue']);
134159
135-
props: {
136-
modelValue: {
137-
type: Boolean,
138-
default: () => false,
139-
},
140-
},
141-
emits: ['reload', 'update:modelValue'],
160+
const attributesTypes = {
161+
string: 'Text',
162+
number: 'Number',
163+
email: 'E-mail',
164+
url: 'URL',
165+
date: 'Date',
166+
boolean: 'Boolean',
167+
multiSelect: 'Multi-select',
168+
};
142169
143-
data() {
144-
return {
145-
loading: false,
146-
};
147-
},
170+
const loading = ref(false);
148171
149-
computed: {
150-
fields() {
151-
return fields;
152-
},
153-
computedVisible: {
154-
get() {
155-
return this.modelValue;
156-
},
157-
set() {
158-
this.$emit('update:modelValue', false);
159-
},
160-
},
161-
},
172+
const model = ref({
173+
yearsOfExperience: '',
174+
country: '',
175+
isHireable: '',
176+
expertise: '',
177+
seniorityLevel: '',
178+
})
162179
163-
methods: {
164-
async handleSubmit() {
165-
this.loading = true;
166-
// do something
167-
},
168-
169-
handleCancel() {
170-
this.editTagsModel = [];
171-
this.editTagsInCommon = [];
172-
this.computedVisible = false;
173-
},
180+
const customAttributes = [
181+
{
182+
label: 'Years of Experience', name: 'yearsOfExperience', type: 'number',
183+
},
184+
{
185+
label: 'Country', name: 'country', type: 'string',
186+
},
187+
{
188+
label: 'is Hireable', name: 'isHireable', type: 'boolean',
189+
},
190+
{
191+
label: 'Expertise', name: 'expertise', type: 'multiSelect',
174192
},
193+
{
194+
label: 'Skills', name: 'skills', type: 'multiSelect',
195+
},
196+
{
197+
label: 'Seniority Level', name: 'seniorityLevel', type: 'string',
198+
},
199+
];
200+
201+
const handleSubmit = async () => {
202+
this.loading = true;
203+
// do something
204+
console.log("helo", this.model);
175205
};
176-
</script>
177206
178-
<style scoped></style>
207+
const handleCancel = () => {
208+
computeVisible.value = false;
209+
};
210+
211+
const computedVisible = computed({
212+
get() {
213+
return props.modelValue;
214+
},
215+
set() {
216+
emits['update:modelValue'](false);
217+
},
218+
});
219+
220+
</script>

0 commit comments

Comments
 (0)