diff --git a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue index 8e44007..3bf245b 100644 --- a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue +++ b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue @@ -15,51 +15,71 @@ .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}} .flex.w-full.h-full.justify-between.gap-4(v-for="field in data.fields") .label-field.font-sm.text-sm.whitespace-nowrap.mt-10px {{`${field.label} :`}} - .input-wrapper.items-center.flex.h-10.gap-10px - .flex.gap-1(v-if="field.key === 'networks'") - .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2( + .input-wrapper.items-center.h-fit.gap-10px + .w-full.flex.gap-x-1.gap-y-2(v-if="field.key === 'networks'" :style="{'flex-wrap': 'wrap !important'}") + .flex.rounded-full.cursor-pointer.h-fit.items-center.gap-10px.py-1.pl-1.pr-2( v-for="network in confidant.networks" @click="() => copyLinkNetwork(network.username)" style="background-color: var(--bg-light-grey)" ) q-icon.icon(:name="mapNetworks[network.kind].icon" :class="{old: network.id, new: !network.id}") - span.text-sm.font-medium {{ mapNetworks[network.kind].title || network.username }} - .flex.add-network.w-7.h-7.rounded-full.items-center.justify-center.cursor-pointer(v-if="isEdit") - q-icon.w-3.h-3(name="app:plus") - //- .flex.gap-10px(v-else :key="key+index") - //- base-select-networks( - //- :list-data="Object.values(mapNetworks)" - //- :option-data="data.kind" - //- :choose-option="(e) => chooseNetwork(e, index)" - //- :style-border="true" - //- :size-input="50" - //- ) - //- base-input.w-full( - //- v-model="data.username" - //- type="text" - //- no-error-icon - //- :name="key" - //- :rule="configData[key].rules" - //- :standout="!isEdit" - //- :outlined="isEdit" - //- text-color="black" - //- ) - - base-input.w-full( - v-else - :readonly="!isEdit" - v-model="confidant[field.key]" - @update:model-value="checkChangeInput" - :mask="field.mask" - :type="field.type" - :name="field.key" - :placeholder="field.placeholder" - :standout="!isEdit" - :outlined="isEdit" - no-error-icon - :rule="field.rules" - text-color="black" - ) + span.text-smm.font-medium {{ mapNetworks[network.kind].title || network.username }} + .flex.relative + q-btn( + v-if="isEdit" + icon="add", + size="17px", + class="add-network" + @click.stop + round, + dense, + no-caps, + padding="3px" + ) + q-menu(v-model="isOpenPopupAdding", anchor="bottom left", self="top right") + .menu-wrapper.flex.flex-col.gap-y-3.p-4 + base-adding-network( + :items="Object.values(mapNetworks)", + :network="newNetwork", + ) + .w-fit + q-btn( + color="primary", + label="Добавить", + no-caps, + @click="saveNetwork", + padding="8px 24px" + ) + .flex.w-full.relative(v-else) + q-menu.h-fit( + v-if="field.key === 'last_name'" + fit + v-model="isOpenListConfidant" + :style="{'max-height': '160px'}" + no-focus + anchor="bottom right" + self="top right" + ) + .flex.flex-col.w-full.h-full.overflow-y-auto + .confidant-item.flex.h-10.items-center.cursor-pointer.text-base.px-2( + v-for="person in listPersons" + :id="person.id" + @click="(e) => choiceConfidant(e)" + ) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }} + base-input.w-full( + :readonly="!isEdit" + v-model="confidant[field.key]" + @update:model-value="(val) => checkChangeInput(val, field.key)" + :mask="field.mask" + :type="field.type" + :name="field.key" + :placeholder="field.placeholder" + :standout="!isEdit" + :outlined="isEdit" + no-error-icon + :rule="field.rules" + text-color="black" + )