0
0
Fork 0

feat: change skeleteon different components

This commit is contained in:
Javier Segarra 2024-05-18 10:35:08 +02:00
parent aa007117a7
commit a2316fb222
7 changed files with 428 additions and 201 deletions

View File

@ -100,6 +100,7 @@ globals:
zonesList: Zones
deliveryList: Delivery days
upcomingList: Upcoming deliveries
role: Role
created: Created
worker: Worker
now: Now
@ -1250,7 +1251,7 @@ zone:
upcomingList: Upcoming deliveries
role:
pageTitles:
zones: Zones
role: Zones
zonesList: Zones
deliveryList: Delivery days
upcomingList: Upcoming deliveries

View File

@ -100,6 +100,7 @@ globals:
zonesList: Zonas
deliveryList: Días de entrega
upcomingList: Próximos repartos
role: Role
created: Fecha creación
worker: Trabajador
now: Ahora

View File

@ -1,113 +1,112 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import AccountFilter from './AccountFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import AccountSummary from './Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDate } from 'src/filters';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
};
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
router.push({ path: `/account/${id}` });
}
const newAccountForm = reactive({
supplierFk: null,
travelFk: null,
companyFk: null,
});
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<AccountFilter data-key="AccountList" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="AccountList"
url="Accounts/filter"
:order="['priority ASC', 'created DESC']"
auto-load
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.clientName"
@click="navigate($event, row.id)"
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('account.list.customer')">
<template #value>
<span class="link" @click.stop>
{{ row.clientName }}
</span>
</template>
</VnLv>
<VnLv :label="t('account.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv
:label="t('account.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv>
</template>
<template #actions>
<QBtn
:label="t('globals.description')"
@click.stop
outline
style="margin-top: 15px"
>
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, AccountSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPage>
<VnSubToolbar />
<pre>TODO <b>Cuentas</b></pre>
<FormModel
url-create="Entries"
model="account"
:form-initial-data="newAccountForm"
@on-data-saved="redirectToAccountBasicData"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Supplier')"
class="full-width"
v-model="data.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="nickname"
hide-selected
:required="true"
:rules="validate('account.supplierFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
<QItemLabel caption>
#{{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Travel')"
class="full-width"
v-model="data.travelFk"
:options="travelsOptions"
option-value="id"
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('account.travelFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
>{{ scope.opt?.agencyModeName }} -
{{ scope.opt?.warehouseInName }} ({{
toDate(scope.opt?.shipped)
}}) &#x2192;
{{ scope.opt?.warehouseOutName }} ({{
toDate(scope.opt?.landed)
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Company')"
class="full-width"
v-model="data.companyFk"
:options="companiesOptions"
option-value="id"
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('account.companyFk')"
/>
</div>
</VnRow>
</template>
</FormModel>
</QPage>
</template>

View File

@ -1,113 +1,75 @@
<script setup>
import { onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import AccountFilter from './AccountFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import AccountSummary from './Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnPaginate from 'components/ui/VnPaginate.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const filter = computed(() => ({
fields: ['id', 'created', 'userId'],
include: { relation: 'user', scope: { fields: ['username'] } },
order: 'created DESC',
limit: 20,
}));
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const STATE_COLOR = {
pending: 'warning',
managed: 'info',
resolved: 'positive',
};
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
router.push({ path: `/account/${id}` });
}
const urlPath = computed(() => `AccessTokens`);
const entityId = computed(() => $props.id || useRoute().params.id);
onMounted(async () => {});
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<AccountFilter data-key="AccountList" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<div class="full-width" style="max-width: 400px">
<VnPaginate
data-key="AccountList"
url="Accounts/filter"
:order="['priority ASC', 'created DESC']"
ref="paginateRef"
data-key="AccessTokens"
:filter="filter"
:url="urlPath"
auto-load
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.clientName"
@click="navigate($event, row.id)"
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('account.list.customer')">
<template #value>
<span class="link" @click.stop>
{{ row.clientName }}
</span>
</template>
</VnLv>
<VnLv :label="t('account.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv
:label="t('account.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('account.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
<QTable :rows="data" :columns="columns" hide-header>
<template #body="{ row, rowIndex }">
<QTr>
<QTd>
<span>{{ row.warehouse?.name }}</span>
</QTd>
<QTd style="width: 50px !important">
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="
openConfirmationModal(
t('warehouses.deleteTitle'),
t('warehouses.deleteSubtitle'),
() => deleteWarehouse(row, rows, rowIndex)
)
"
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv>
<QTooltip>
{{ t('warehouses.delete') }}
</QTooltip>
</QIcon>
</QTd>
</QTr>
</template>
<template #actions>
<QBtn
:label="t('globals.description')"
@click.stop
outline
style="margin-top: 15px"
>
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, AccountSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</QTable>
</template>
</VnPaginate>
</div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn fab icon="add" color="primary" @click="createMailAlias()">
<QTooltip>{{ t('warehouses.add') }}</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
</template>

View File

@ -1,11 +1,75 @@
<script setup>
import { onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
const { t } = useI18n();
const filter = computed(() => ({
fields: ['id', 'created', 'userId'],
include: { relation: 'user', scope: { fields: ['username'] } },
order: 'created DESC',
limit: 20,
}));
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const urlPath = computed(() => `AccessTokens`);
const entityId = computed(() => $props.id || useRoute().params.id);
onMounted(async () => {});
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list"></div>
<div class="full-width" style="max-width: 400px">
<VnPaginate
ref="paginateRef"
data-key="AccessTokens"
:filter="filter"
:url="urlPath"
auto-load
>
<template #body="{ rows }">
<QTable :rows="data" :columns="columns" hide-header>
<template #body="{ row, rowIndex }">
<QTr>
<QTd>
<span>{{ row.warehouse?.name }}</span>
</QTd>
<QTd style="width: 50px !important">
<QIcon
name="delete"
size="sm"
class="cursor-pointer"
color="primary"
@click="
openConfirmationModal(
t('warehouses.deleteTitle'),
t('warehouses.deleteSubtitle'),
() => deleteWarehouse(row, rows, rowIndex)
)
"
>
<QTooltip>
{{ t('warehouses.delete') }}
</QTooltip>
</QIcon>
</QTd>
</QTr>
</template>
</QTable>
</template>
</VnPaginate>
</div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn fab icon="refresh" color="primary" @click="refresh()">
<QTooltip>{{ t('warehouses.refresh') }}</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
</template>

View File

@ -1,11 +1,111 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';
const { t } = useI18n();
const newAccountForm = reactive({
supplierFk: null,
travelFk: null,
companyFk: null,
});
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list"></div>
<QPage>
<VnSubToolbar />
<pre>TODO <b>LDAP</b></pre>
<FormModel
url-create="Entries"
model="account"
:form-initial-data="newAccountForm"
@on-data-saved="redirectToAccountBasicData"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Supplier')"
class="full-width"
v-model="data.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="nickname"
hide-selected
:required="true"
:rules="validate('account.supplierFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
<QItemLabel caption>
#{{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Travel')"
class="full-width"
v-model="data.travelFk"
:options="travelsOptions"
option-value="id"
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('account.travelFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
>{{ scope.opt?.agencyModeName }} -
{{ scope.opt?.warehouseInName }} ({{
toDate(scope.opt?.shipped)
}}) &#x2192;
{{ scope.opt?.warehouseOutName }} ({{
toDate(scope.opt?.landed)
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Company')"
class="full-width"
v-model="data.companyFk"
:options="companiesOptions"
option-value="id"
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('account.companyFk')"
/>
</div>
</VnRow>
</template>
</FormModel>
</QPage>
</template>

View File

@ -1,11 +1,111 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters';
const { t } = useI18n();
const newAccountForm = reactive({
supplierFk: null,
travelFk: null,
companyFk: null,
});
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list"></div>
<QPage>
<VnSubToolbar />
<pre>TODO <b>SAMBA</b></pre>
<FormModel
url-create="Entries"
model="account"
:form-initial-data="newAccountForm"
@on-data-saved="redirectToAccountBasicData"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Supplier')"
class="full-width"
v-model="data.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="nickname"
hide-selected
:required="true"
:rules="validate('account.supplierFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
<QItemLabel caption>
#{{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Travel')"
class="full-width"
v-model="data.travelFk"
:options="travelsOptions"
option-value="id"
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('account.travelFk')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
>{{ scope.opt?.agencyModeName }} -
{{ scope.opt?.warehouseInName }} ({{
toDate(scope.opt?.shipped)
}}) &#x2192;
{{ scope.opt?.warehouseOutName }} ({{
toDate(scope.opt?.landed)
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelect>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('Company')"
class="full-width"
v-model="data.companyFk"
:options="companiesOptions"
option-value="id"
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('account.companyFk')"
/>
</div>
</VnRow>
</template>
</FormModel>
</QPage>
</template>