Skip to content

Updating select branch style and classes #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jetzable merged 1 commit into from
Jan 7, 2019
+238 −162
Merged

Updating select branch style and classes #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 10 additions & 24 deletions src/components/BranchPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="select-branch" style="border: 2px solid purple;">
<div class="select-branch">
<div class="outer-20-b">
<a @click="handleCloseColumns">
<i class="far fa-times-circle"></i> Cerrar
<a href="#">
Cerrar
<i class="far fa-times-circle"></i>
</a>
</div>
<div>
<CompanyList class="is-one-third"/>
<StoreList :class="{'is-hidden': showStoreColumn}" class="is-one-third"/>
<!-- <LocationList :class="{'is-hidden': showLocationColumn}" class="is-one-third"/> -->
<div class="columns">
<CompanyList class="column companies is-half"/>
<StoreList :class="{'is-hidden': showStoreColumn}" class="column branches is-half"/>
</div>
</div>
</template>
Expand All @@ -17,29 +17,15 @@ import { mapGetters } from "vuex";
import CompanyList from "./CompanyList.vue";
import StoreList from "./StoreList.vue";
import LocationList from "./LocationList.vue";
import { log } from "util";

export default {
name: "BranchPicker",
computed: {
...mapGetters(["showStoreColumn", "showLocationColumn"])
},
data() {
return {
closeColumns: false
};
},
methods: {
handleCloseColumns() {
this.closeColumns = !this.closeColumns;
}
...mapGetters(["showStoreColumn"])
},
components: {
CompanyList,
StoreList,
LocationList
StoreList
}
};
</script>

<div class="columns" :class="{'is-hidden': closeColumns}">
</script>
43 changes: 22 additions & 21 deletions src/components/CompanyList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<template>
<div class="column" style="border: 2px solid red;">
<div class="select-title">
<div class="icon companies"></div>
<h4>Empresas</h4>
</div>
<ListItem v-for="company in companiesFromServer" :company="company" :key="company.key"/>
</div>
<div>
<div class="select-title">
<div class="icon companies"></div>
<h4>Empresas</h4>
</div>
<ListItem v-for="company in companiesFromServer" :company="company" :key="company.key"/>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import ListItem from "@/components/ListItem.vue";
import { mapGetters } from "vuex";
import ListItem from "@/components/ListItem.vue";

export default {
name: "CompanyList",
created() {
this.$store.dispatch("getCompaniesFromServer");
},
computed: {
...mapGetters(["companiesFromServer"])
},
components: {
ListItem
}
};
export default {
name: "CompanyList",
created() {
this.$store.dispatch("getCompaniesFromServer");
},
computed: {
...mapGetters(["companiesFromServer"])
},
components: {
ListItem
}
};
</script>
128 changes: 64 additions & 64 deletions src/components/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,69 @@
<template>
<div class="item">
<button
class="select-item"
:class="{ active: company.active }"
@click="handleCompanySelect(company.company_id)"
v-if="company.status"
>
<div class="info">
<p>
{{ company.emitter.business_name }}
<span class="on"></span>
<span>RFC: {{ company.emitter.tax_id }}</span>
</p>
</div>
</button>
<button class="select-item" disabled v-if="!company.status">
<div class="info">
<span>
{{company.emitter.business_name}}
<div class="popover_wrapper">
<i class="fas fa-lock-alt"></i>
<div class="push popover_content up">
<p class="popover_message">
No tienes
<strong>permiso</strong> para modificar la información
</p>
</div>
</div>
<div class="d-block">RFC: {{ company.emitter.tax_id }}</div>
</span>
</div>
<a class="fas fa-question-circle" @click="handleRequest(company.emitter.tax_id)"></a>
</button>
<!-- <Request
:class="{'show': showRequest}"
v-if="company.emitter.tax_id === requestId"
:company="company"
/> -->
</div>
<div class="item company">
<button
class="select-item"
:class="{ active: company.active }"
@click="handleCompanySelect(company.company_id)"
v-if="company.status"
>
<div class="info">
<p>
{{ company.emitter.business_name }}
<span class="on"></span>
<span>RFC: {{ company.emitter.tax_id }}</span>
</p>
</div>
</button>
<button class="select-item" disabled v-if="!company.status">
<div class="info">
<span>
{{company.emitter.business_name}}
<div class="popover_wrapper">
<i class="fas fa-lock-alt"></i>
<div class="push popover_content up">
<p class="popover_message">
No tienes
<strong>permiso</strong> para modificar la información
</p>
</div>
</div>
<div class="d-block">RFC: {{ company.emitter.tax_id }}</div>
</span>
</div>
<a class="fas fa-question-circle" @click="handleRequest(company.emitter.tax_id)"></a>
</button>
<!-- <Request
:class="{'show': showRequest}"
v-if="company.emitter.tax_id === requestId"
:company="company"
/>-->
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Request from "@/components/Request.vue";
import { mapGetters } from "vuex";
import Request from "@/components/Request.vue";

export default {
methods: {
handleCompanySelect(taxId) {
this.$store.dispatch("handleCompanySelect", taxId);
},
handleRequest(id) {
this.$store.dispatch("handleRequest", id);
}
},
computed: {
...mapGetters(["showRequest", "requestId"])
},
props: {
company: {
type: Object,
required: true
}
},
name: "ListItem",
components: {
Request
}
};
export default {
methods: {
handleCompanySelect(taxId) {
this.$store.dispatch("handleCompanySelect", taxId);
},
handleRequest(id) {
this.$store.dispatch("handleRequest", id);
}
},
computed: {
...mapGetters(["showRequest", "requestId"])
},
props: {
company: {
type: Object,
required: true
}
},
name: "ListItem",
components: {
Request
}
};
</script>
98 changes: 49 additions & 49 deletions src/components/StoreList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
<template>
<div class="column" style="border: 2px solid blue;">
<div class="select-title">
<div class="icon warehouses"></div>
<h4>Almacenes</h4>
</div>
<div v-for="warehouse in wareHouseList" :key="warehouse.branch_id">
<ListStore :company="warehouse"/>
</div>
<div class="select-title">
<div class="icon offices"></div>
<h4>Oficinas</h4>
</div>
<div v-for="office in officeList" :key="office.branch_id">
<ListStore :company="office"/>
</div>
<div class="column">
<div class="select-title" v-if="wareHouseList.length >0">
<div class="icon warehouses"></div>
<h4>Almacenes</h4>
</div>
<div v-for="warehouse in wareHouseList" :key="warehouse.branch_id">
<ListStore class="item warehouse" :company="warehouse"/>
</div>
<div class="select-title" v-if="officeList.length >0">
<div class="icon offices"></div>
<h4>Oficinas</h4>
</div>
<div v-for="office in officeList" :key="office.branch_id">
<ListStore class="item office" :company="office"/>
</div>

<div class="select-title">
<div class="icon stores"></div>
<h4>Tiendas</h4>
</div>
<div v-for="store in storesList" :key="store.key">
<ListStore :company="store"/>
</div>
</div>
<div class="select-title" v-if="storesList.length >0">
<div class="icon stores"></div>
<h4>Tiendas</h4>
</div>
<div v-for="store in storesList" :key="store.key">
<ListStore class="item store" :company="store"/>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import ListStore from "./ListStore";
import { mapGetters } from "vuex";
import ListStore from "./ListStore";

export default {
name: "StorePicker",
computed: {
...mapGetters(["branchList"]),
wareHouseList() {
return this.branchList.filter(store => {
return store.type === "Shop";
});
},
officeList() {
return this.branchList.filter(store => {
return store.type === "Office";
});
},
storesList() {
return this.branchList.filter(store => {
return store.type === "Store";
});
}
},
components: {
ListStore
}
};
export default {
name: "StorePicker",
computed: {
...mapGetters(["branchList"]),
wareHouseList() {
return this.branchList.filter(store => {
return store.type === "Shop";
});
},
officeList() {
return this.branchList.filter(store => {
return store.type === "Office";
});
},
storesList() {
return this.branchList.filter(store => {
return store.type === "Store";
});
}
},
components: {
ListStore
}
};
</script>
Loading