Merge pull request 'special_place_holder' (#6) from special_place_holder into master
Reviewed-on: https://git.lilianamodels.com/champya/champya-front/pulls/6master
sajjad_talkhabi
2 years ago
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