willaengine/resources/js/Home/views/AddModule.vue

<template>
	<v-container fluid>
		<div class="Tile Shadowed Padd-0 WM-Margin-B-10">
			<wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
		</div>
		<div class="Tile Shadowed">
			<page-title
				titleFaClass="black--text"
				color="black"
				titleFa=" افزودن بخش جدید "
				titleEn=" Add a New Module "
                imageAddress="MacRed.jpg"
			></page-title>

            <module-items :modules="modules" />
<!--				<div :class="'ModuleItem '+module.color_class+'Border'">-->
<!--					<div :class="'itrator En '+module.color_class+'&#45;&#45;text'">{{index+1}}</div>-->
<!--					<v-layout row wrap class="WM-Margin-0">-->
<!--						<v-flex lg4 class="Title">-->
<!--							<div class="Fa">{{ module.title_fa }}</div>-->
<!--							<div class="En">{{ module.title_en }}</div>-->
<!--						</v-flex>-->
<!--						<v-flex lg4 class="Price">-->
<!--							<div class="Old En" v-if="module.old_price">{{ Intl.NumberFormat().format(module.old_price) }}</div>-->
<!--							<div class="Main En">-->
<!--								{{ Intl.NumberFormat().format(module.price) }}-->
<!--								<span class="Unit">IRT</span>-->
<!--							</div>-->
<!--						</v-flex>-->
<!--						<v-flex lg4 class="WM-Align-L" >-->
<!--							<v-tooltip top transition="slide-x-transition" color="black" v-if="module.has_module == 'no'" >-->
<!--								<template v-slot:activator="{ on }">-->
<!--									<v-btn-->
<!--										v-on="on"-->
<!--										small-->
<!--										@click.native="$_openModalStack({ name: 'rolePermission_trialConfirm', model: module})"-->
<!--										slot="activator"-->
<!--										fab-->
<!--										:color="module.color_class"-->
<!--									>-->
<!--										<v-icon dark>WMi-history</v-icon>-->
<!--									</v-btn>-->
<!--								</template>-->
<!--								<span>فعالسازی نسخه ی 15 روزه، آزمایشی</span>-->
<!--							</v-tooltip>-->
<!--							&lt;!&ndash; <v-tooltip top transition="slide-x-transition" color="black" v-if="module.has_module == 'no' || module.is_trial == 'yes'">-->
<!--								<template v-slot:activator="{ on }">-->
<!--									<v-btn-->
<!--										@click.native="$_openModalStack({ name: 'rolePermission_paymentConfirm', model: module})"-->
<!--										slot="activator"-->
<!--										fab-->
<!--										:color="module.color_class"-->
<!--										dark-->
<!--										v-on="on"-->
<!--									>-->
<!--										<v-icon dark> WMi-plus </v-icon>-->
<!--									</v-btn>-->
<!--								</template>-->
<!--                                <span> خرید </span>-->
<!--							</v-tooltip> &ndash;&gt;-->
<!--						</v-flex>-->
<!--						<v-flex lg12 class="description RTL" v-if="module.description_title">-->
<!--							<v-expansion-panel popout style="margin-bottom:0px;">-->
<!--								<v-expansion-panel-content>-->
<!--									<template v-slot:header>-->
<!--										<v-flex lg12 class="text-lg-right Title">-->
<!--											<v-icon>WMi-align-right</v-icon>-->
<!--											{{ module.description_title }}-->
<!--										</v-flex>-->
<!--									</template>-->
<!--									<v-card>-->
<!--										<v-card-text style="padding:0px 40px 10px 40px">-->
<!--											<div class="WM-Tile">-->
<!--												<v-layout row wrap class="WM-Margin-0">-->
<!--													<v-flex lg12 class="text-lg-right zIndex99 Text" v-html="module.description"></v-flex>-->
<!--												</v-layout>-->
<!--											</div>-->
<!--										</v-card-text>-->
<!--									</v-card>-->
<!--								</v-expansion-panel-content>-->
<!--							</v-expansion-panel>-->
<!--						</v-flex>-->
<!--					</v-layout>-->
<!--				</div>-->
		</div>

		<!-- --------------------------------------------------------------------
                                    Modals :: BEGIN
		---------------------------------------------------------------------->
		<template>
			<div class="text-xs-center">
			</div>
		</template>

		<!-- --------------------------------------------------------------------
                                    Modals :: END
		---------------------------------------------------------------------->
	</v-container>
</template>



<script>
import ModuleItems from "@Admin/components/Client/Module/Items.vue";
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
	components: {
        ModuleItems,
	},
	data() {
		return {
			breadcrumbItems: [
				{
					text: "",
					disabled: false,
					routeName: "Home",
					icon: "Real-Estate"
				},
				{
					text: " افزودن بخش جدید ",
					disabled: true
				}
			],
            modules: [
                { title_fa:'مدیریت ارتباط با مشتری', title_en:'Customer Relationship Management - CRM', color:'cyan', icon:'users', price:3500000, monthly_price:120000, remain_days:'251'},
                { title_fa:'مدیریت محصولات و خدمات', title_en:'Products & Services Management System', color:'orange', icon:'align-right', price:1500000, monthly_price:60000 },
                { title_fa:'سیستم مدیریت فروشگاه', title_en:'Store Management System', color:'red', icon:'communications', price:5000000, monthly_price:160000},
                { title_fa:'سیستم مدیریت انبار', title_en:'Warehouse Management System', color:'purple', icon:'truck', price:2500000, monthly_price:120000, remain_days:'14'},
                { title_fa:'سیستم مدیریت مالی', title_en:'Finance Management System', color:'blue', icon:'chart-pie', price:4500000, monthly_price:160000},
            ],
			allModules: [],
		};
	},
	computed: {
        ...mapGetters("rolePermission", ["getAllModules", "getModules"])
    },
    methods: {
        ...mapActions("rolePermission", ["loadAllModules", "loadModules"]),
		async loadPage() {
			await this.loadAllModules({ home_page: true });
			await this.loadModules({ home_page: true });
			for (const allModule of this.getAllModules) {
				let module = this.getModules.find(x => x.id == allModule.id);
				if (module) {
					allModule['has_module'] = 'yes';
					allModule['is_trial'] = module.is_trial;
				} else {
					allModule['has_module'] = 'no';
				}
			}
			this.allModules = this.getAllModules;
		}
    },
    beforeMount() {
		this.loadPage();
    }
};
</script>

<style scoped lang="scss">
.module-item {
	position: relative;
	padding: 2px 10px;
	margin-bottom: 10px;
}
</style>