Merge pull request 'special_place_holder' (#6) from special_place_holder into master
Reviewed-on: https://git.lilianamodels.com/champya/champya-front/pulls/6master
commit
a4f9727177
@ -0,0 +1,18 @@
|
||||
import axios from "axios";
|
||||
import url from '@/router/url';
|
||||
import { setData, getArray, getJson } from '../resources/appSectionResource';
|
||||
export default class AppSectionRepository {
|
||||
async index({ modelType, modelId }) {
|
||||
let response = await axios.get(url('indexAppSection', { model_type: modelType, model_id: modelId }));
|
||||
if (response.status === 200) {
|
||||
return getArray(response.data)
|
||||
}
|
||||
}
|
||||
async update(data) {
|
||||
let json = setData(data);
|
||||
let response = await axios.post(url("updateAppSection"), json);
|
||||
if (response.status === 201 || response.status === 200) {
|
||||
return getJson(response.data.data);
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
export const getJson = data => ({
|
||||
id: data.id,
|
||||
created_at: data.created_at,
|
||||
model_type: data.model_type,
|
||||
item_available: data.item_available,
|
||||
page: data.page,
|
||||
slug: data.slug,
|
||||
sort: data.sort,
|
||||
sub_title: data.sub_title,
|
||||
title: data.title,
|
||||
updated_at: data.updated_at,
|
||||
});
|
||||
|
||||
export const getArray = ({ data }) => {
|
||||
data = data.map(user => getJson(user));
|
||||
return { data };
|
||||
};
|
||||
export const setData = data => ({
|
||||
model_id: data.model_id,
|
||||
model_type: data.model_type,
|
||||
join_to: data.join_to,
|
||||
})
|
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<basic-modal
|
||||
@open="openModal"
|
||||
tag="vee-form"
|
||||
@submit="submit"
|
||||
width="900"
|
||||
transition="slide-x-transition"
|
||||
>
|
||||
<template #header>
|
||||
<div class="close__modal">
|
||||
<v-icon class="WMi-cancel-linear" @click="$_closeModal()"></v-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<loading v-if="loading" class="loading-data" />
|
||||
<div :class="{ 'loading-form': loading }">
|
||||
<div>
|
||||
<SectionTitle :title="title" :subTitle="subTitle" :is-modal="true" />
|
||||
</div>
|
||||
<div class="mt-8 mb-10">
|
||||
<v-switch
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
inset
|
||||
color="#ffd600"
|
||||
:label="item.title"
|
||||
v-model="values[item.id]"
|
||||
class="special__place__holder"
|
||||
@change="changeSwitch(item.id)"
|
||||
></v-switch>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="px-4">
|
||||
<RectangleButton
|
||||
height="29"
|
||||
class="btn__modal--confirm custom-btn wa__f__m__eb"
|
||||
text="save"
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</basic-modal>
|
||||
</template>
|
||||
<script>
|
||||
import AppSectionRepository from "@/abstraction/repository/appSectionRepository";
|
||||
const repository = new AppSectionRepository();
|
||||
export default {
|
||||
name: "modal_app_section",
|
||||
data: () => ({
|
||||
loading: false,
|
||||
form: {
|
||||
join_to: [],
|
||||
},
|
||||
items: [],
|
||||
values: [],
|
||||
}),
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: "Select a place holder",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal({ model_id, model_type }) {
|
||||
this.form["model_id"] = model_id;
|
||||
this.form["model_type"] = model_type;
|
||||
this.load({ model_id, model_type });
|
||||
},
|
||||
async load({ model_type, model_id }) {
|
||||
try {
|
||||
this.loading = true;
|
||||
const { data } = await repository.index({
|
||||
modelType: model_type,
|
||||
modelId: model_id,
|
||||
});
|
||||
// Fill in items to display to the user
|
||||
this.items = data;
|
||||
this.items.map((item) => {
|
||||
// Adjust the position of the switch (on or off)
|
||||
this.values[item.id] = item.item_available;
|
||||
// Get active items and fill join_to in form obj to send it
|
||||
if (item.item_available) {
|
||||
this.form.join_to.push(item.id);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
return error;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
changeSwitch(id) {
|
||||
const value = this.values[id];
|
||||
if (value) {
|
||||
this.form.join_to.push(id);
|
||||
} else {
|
||||
this.$delete(
|
||||
this.form.join_to,
|
||||
this.form.join_to.findIndex((x) => x === id)
|
||||
);
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
await repository.update(this.form);
|
||||
this.$_closeModal();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/* -------------------- switch ------------------------------*/
|
||||
.v-input--switch.special__place__holder label {
|
||||
margin-bottom: 0;
|
||||
color: var(--color-white) !important;
|
||||
font-family: "montserrat-light" !important;
|
||||
font-size: 26px !important;
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue