I have an AbsoluteLayout that is supposed to open and go over a mdCardview, but it seems that it is trying to squeeze everything inside the cardview. I tried messing with the CSS position tag, but it doesn't change one bit.
In the picture below you can see the save button which is also an absolutelayout, this one does go over every other component.
This is my TimeCard component which has a button and a absolute layout that would be used as a popup
<template>
<GridLayout class="dialog" rows="*, *" columns="*" :class="{ dialogOpen: dialogOpen }">
<MDButton :text="label" #tap="showDialog()" class="fill" />
<AbsoluteLayout class="dialog-wrapper">
<StackLayout top="100" left="20" class="dialog">
<TimePicker v-bind="$attrs" v-on="$listeners" />
<MDButton text="Confirm" class="cancel" />
<Button class="btn btn-outline" text="Cancel" #tap="closeDialog"></Button>
</StackLayout>
</AbsoluteLayout>
</GridLayout>
</template>
data: () => ({
dialogOpen: false
}),
methods: {
showDialog() {
this.dialogOpen = true
},
closeDialog() {
this.dialogOpen = false
}
}
This is my availabilityCard which contains a slot with the timecard component
<StackLayout >
<MDCardView elevation="5px" ripple="true" width="100%" margin="30px" class="cardview">
<GridLayout rows="*, *" columns="*, *, *" class="card" width="auto">
<StackLayout col="0" row="0">
<Label class="title" :text="getNameAndDayOfMonth(day)" />
</StackLayout>
<MDButton col="2" row="0" text="fill" class="fill" #tap="showActions()" v-if="!show && Object.keys(value).length === 0" />
<GridLayout row="1" colSpan="3" columns="auto, auto, *" rows="*, *" width="auto" v-else>
<GridLayout row="0" columns="auto, auto" rows="*" colSpan="2" width="auto">
<slot />
</GridLayout>
<MDButton text="clear" col="2" row="0" class="cancel" #tap="cancelTime()" />
<template v-if="Object.keys(value).length !== 0">
<Label :text="format(value.start)" col="0" row="1" />
<Label :text="format(value.end)" col="1" row="1" />
</template>
</GridLayout>
</GridLayout>
</MDCardView>
</StackLayout>
This is the parent component availability that defines the timecard component
<StackLayout>
<AvailabilityCard v-for="(day, i) in days" :key="i" v-model="day.element" :day="day.date">
<TimeCard col="0" label="begin" v-model="day.element.start"></TimeCard>
<TimeCard col="1" label="eind" v-model="day.element.end"></TimeCard>
</AvailabilityCard>
</StackLayout>
Availability component screen:
Related
I'm new to NativeScript and just can't figure out how to load a plugin right.
As mentioned here, I added the plugin and from here, followed the steps for Core JS, but nothing seems to work.
I've tried with the RadListView and PullToRefresh so far but I keep hitting the same/similar roadblock. For the PullToRefresh plugin, the error I receive is as you see below.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Error: Building UI from XML. #screens/home/home-page.xml:32:11
JS: > Building UI from XML. #screens/orders/orders-items-page.xml:9:5
JS: > Module '#nstudio/nativescript-pulltorefresh' not found for element '#nstudio/nativescript-pulltorefresh:PullToRefresh'.
JS: > _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
I'm running a NativeScript Core JS sample project with minor cosmetic modifications. I'm not entirely sure what code to post up here for reference, but here goes
home-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation>
<TabStrip>
<TabStripItem class="navigation__item">
<Label text="Orders"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Inventory"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Promotions"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<!-- <TabStripItem class="navigation__item"> <Label text="Analytics"/> <Image src="font://" class="fas t-36"/> </TabStripItem> -->
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip id="top-nav">
<TabStripItem>
<Label text="Current Orders"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Past Orders"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="screens/orders/orders-items-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/promotions/promotions-page"/>
</TabContentItem>
<!-- <TabContentItem> <Frame defaultPage="screens/analytics/analytics-page"/> </TabContentItem> -->
</BottomNavigation>
</Page>
orders-item-page.xml
<Page navigatingTo="onNavigatingTo" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:PullRefresh="#nstudio/nativescript-pulltorefresh">
<GridLayout rows="auto, *">
<FlexboxLayout flexDirection="row" justifyContent="space-around">
<Button class="" col="0" text="New Orders" tap="filter"></Button>
<Button class="" col="1" text="Preparing" tap="filter"></Button>
<Button class="" col="2" text="Ready for Pickup" tap="filter"></Button>
</FlexboxLayout>
<PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
<ListView items="{{ orders }}" row="1">
<ListView.itemTemplate>
<GridLayout class="p-10 order-list-item" rows="auto, auto, auto, auto" columns="*, auto" androidElevation="5" margin="5" backgroundColor="white" borderRadius="10">
<FlexboxLayout flexDirection="row" row="0" colSpan="2" justifyContent="space-between">
<Label class="{{ 'status ' + status }}" text="{{ statusText }}" textTransform="uppercase"/>
<Label class="font-weight-bold" text="{{ 'Order to be Ready in ' + totalTime }}" fontSize="12"/>
</FlexboxLayout>
<FlexboxLayout class="m-t-10" flexDirection="row" row="1" colSpan="2" justifyContent="space-between">
<Label class="font-weight-bold" text="{{ '#' + number }}" fontSize="15"/>
<Label class="font-weight-bold" text="{{ '₹' + value }}" fontSize="15"/>
</FlexboxLayout>
<Label class="" text="{{ dateTime + ' | ' + itemsBrief }}" row="2" col="0" color="gray" fontSize="12"/>
<FlexboxLayout flexDirection="row" row="3" colSpan="2">
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
</FlexboxLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</PullRefresh:PullToRefresh>
<!-- <ActivityIndicator busy="{{ isLoading }}" row="1" horizontalAlignment="center" verticalAlignment="center"/> -->
</GridLayout>
</Page>
I have a ListView which renders this:
<ListView v-for="(item, index) in items" height="500">
<v-template v-if="index < items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<!-- render if index reaches last element -->
<v-template v-if="index == items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>
The second v-template block should be the one rendered if the index reaches last element of the array.
This is the array I have:
items: [1, 2, 3, 1, 1, 1 ,1 ,1 ,1 ]
Whats being rendered on the page is rather the value of each element: 1, 2, 3, 1 ... in TextField without any buttons defined in my code.
How do I get the conditional to work?
<v-template> uses if, not v-if. Also, you can't access items in the in the if (as described here).
Also, you should use for instead of v-for.
So this is what you can do:
1- Change the template to:
<ListView for="(item, index) in listItems" height="500">
<v-template if="!item.isLast">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<!-- render if index reaches last element -->
<v-template if="!item.isLast">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>
This would use another list listItems, which you could build with a computed prop like so:
computed: {
listItems() {
return this.items.map((item, index) => {
item.isLast = index === items.length - 1;
return item;
});
}
}
You should have to use for instead of v-for. Also, For the index in ListView, there is a default $index variable so you can use it as below.
<ListView for="item in items" height="500">
<v-template v-if="$index < items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<v-template v-if="$index == items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>
This works as expected (without <Repeater.itemsLayout> and wrapped by <StackLayout>):
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<StackLayout row="0" col="1" backgroundColor="green">
<Repeater items="{{ items }}">
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</GridLayout>
And this as NOT expected (with <Repeater.itemsLayout> and without wrapping by <StackLayout>):
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout row="0" col="1" backgroundColor="green"/>
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</GridLayout>
Following code works because you are wrapping your Repeater in StackLayout and assiging it row and column and that is required as well if your putting that inside a GridLayout.
<GridLayout columns="auto, *" rows="auto">
<Label text="Some Text" row="0" col="0" backgroundColor="orange"/>
<StackLayout row="0" col="1" backgroundColor="green">
<Repeater items="{{ items }}">
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</GridLayout>
If you do not want to wrap inside a StackLayout, you should assign row="0" col="1" to Repeater.
Now comes to your question, that use of Repeater.itemsLayout, it gets or set the items layout of the Repeater. Default value is StackLayout with orientation="vertical".
So if you have a usecase where you want all the items in Repeater align horizontally, you should use following code.
<ScrollView row="0" col="0" orientation="horizontal">
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" />
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
We can set row and col properties for Repeater tag. Like so:
<GridLayout columns="auto, *" rows="auto, *">
<Label text="Some Text" row="0" col="0"/>
<Repeater row="1" items="{{ items }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}"/>
</Repeater.itemTemplate>
</Repeater>
</GridLayout>
Answer can be found here: https://github.com/NativeScript/NativeScript/issues/6554#issuecomment-438167999
I'm using the TKListViewHeaderDirective of teleriks RadListView in nativescript like so:
<GridLayout columns="*" rows="*" tkToggleNavButton>
<RadListView *ngIf="!loading" row="3" col="0" [items]="nodes" ...>
<ng-template tkListItemTemplate let-node="item">
<!-- list item -->
</ng-template>
<ng-template tkListViewHeader>
<GridLayout columns="*" rows="auto, auto, auto">
<GridLayout row="0" col="0" columns="40,*,40">
<Button class="fa action-item" row="0" col="0" [text]="'fa-sort-amount-asc' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;;"></Button>
<SearchBar row="0" col="1" #searchInput hint="Search" (submit)="search(searchInput.text)" (clear)="search('')" (textChange)="search(searchInput.text)"></SearchBar>
<Button class="fa action-item" row="0" col="2" [text]="'fa-th' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;"></Button>
</GridLayout>
<StackLayout row="1" col="0">
<Label text="Hello world"></Label>
<Label [text]="currentNode.name"></Label>
<Label [text]="nodes?.length ? nodes.length : 0"></Label>
</StackLayout>
<StackLayout row="2" col="0" *ngIf="!nodes?.length" class="list-group">
<!-- some contents -->
</StackLayout>
<StackLayout row="3" col="0" *ngIf="currentNode?.name !== '/'" class="list-group">
<!-- some contents -->
</StackLayout>
</GridLayout>
</ng-template>
</RadListView>
</GridLayout>
it seems like two things go wrong here:
this seems to be missing here (the *ngIf should show one of the StackLayouts in specific cases but does not
The GridLayout (does not have any effect if I change it to StackLayout) inside the list header shows only one child element
According to the docs: http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/header-footer
There is an issue on github concerning this: https://github.com/telerik/nativescript-ui-feedback/issues/207
I am trying to replicate a table using a ListView. Displaying the table's cell content works fine but when I add another GridLayout wrapped in a StackLayout above the Listview the Listview doesn't get displayed at all... Any idea why this might be happening? I tried as well to add the table headers to the ListView using nsTemplateKey but still get the same issue where the headers show but no table body content. When I remove the top GridLayout containing the headers the Listview's content displays perfectly as it should for some reason...
my code:
//headers
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
//listview containing the table body
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
Try encapsulating all of the code within a StackLayout:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
</StackLayout>
Maybe try without the extra stack layouts:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<ListView [items]="stockTakeDetailList" *ngIf="stockTakeDetailList.length > 0 && !product">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>