Filtering an Observable list while updating LinearNavigation with SwipeNavigate

Bug Reports
1

Platform: Windows 10

Fuse: 0.11.0 (build 6078)

Issue: When updating an Observable list the LinearNavigation does not appear to update correctly when the number of items in the updated list is less than previous. I have tried a few alternative approaches such as using the reactive operator where but get similar results.

Replicate:

  1. In preview mode press the button “Show only cardA Cards”
  2. Swipe one card over ( e.g. “Text 2\n CardA” )
  3. Press the button “Show only cardC Cards”

This will then show the desired card displayed off to the left side (see below screen shot). If swipped more than once (see step 2 of ‘Replicate’) then the card will not be visible.

file
e0pwjvUA4QEp-legacy-files-ftgIECjDzjJ6k6uZ-gjZtxYVXyHC3AFSHDd8HAM2Q.png394×719

Expected:
When pressing the button “Show only cardC Cards” the card should be displayed as the first element (see below screen shot)

file
n7sv83kZ0tiF-legacy-files-anwKzyBWSXmfJSxC-tv9sbHTeCOjcM_Nhzbb_8bbE.png377×722

MainView.ux

<App Theme="Basic" Background="#eeeeeeff">

    <JavaScript File="MainView.js" />

    <Panel ux:Class="Card" ux:Name="self" Opacity="0.8" Color="#fff0" Text="Lorem Ipsum" Type="">
        <string ux:Property="Text"/>
        <string ux:Property="Type"/>
        <Scaling ux:Name="pageScaling" Factor="0.95" />
        <ActivatingAnimation>
            <Change self.Opacity="1" Duration="0.5" />
            <Change pageScaling.Factor="1" Duration="0.5" />
            <BringToFront />
        </ActivatingAnimation>
        <EnteringAnimation Scale="0.5">
            <Move X="-1.7" RelativeTo="ParentSize" Duration="0.5" />
        </EnteringAnimation>
        <ExitingAnimation Scale="0.5">
            <Move X="1.7" RelativeTo="ParentSize" Duration="0.5" />
        </ExitingAnimation>
        <Panel Width="80%" Height="75%" Padding="14,35,14,0">
            <SolidColor Color="#FFF"/>
            <StackPanel>
                <Text TextAlignment="Center" Value="{Property self.Text}" />
                <Text TextAlignment="Center" Value="{Property self.Type}" />
            </StackPanel>
        </Panel>
    </Panel>

    <!-- Events -->
    <UserEvent Name="CardEvent" />

    <DockPanel>
        <!-- Filters -->
        <StackPanel Dock="Top">
            <Each Items="{filters}">
                <Button Text="{text}">
                    <Clicked>
                        <RaiseUserEvent Name="CardEvent">
                            <UserEventArg Name="filter" StringValue="{filter}" />
                        </RaiseUserEvent>
                    </Clicked>
                </Button>
            </Each>
            <OnUserEvent Name="CardEvent" Handler="{filterCards}" />
        </StackPanel>

        <!-- Cards -->
        <Panel>
            <LinearNavigation Easing="QuadraticOut" Duration="0.3" Active="{initCard}" />
            <SwipeNavigate SwipeDirection="Left" SwipeEnds="Short" />

            <Each Items="{cards}">
                <Card Name="{handle}" Text="{text}" Type="{type}" />
            </Each>
        </Panel>
    </DockPanel>

</App>

MainView.js

var Observable = require("FuseJS/Observable");

var initCard = Observable("card0");
var cardList = [];
var cards = Observable([]);
var filters = [
    { "filter": "All", "text": "Show All Cards"  },
    { "filter": "cardA", "text": "Show only cardA Cards"  },
    { "filter": "cardB", "text": "Show only cardB Cards"  },
    { "filter": "cardC", "text": "Show only cardC Cards"  },
];
//Populate cards
for(var i=0; i < 23; i++) {
    cardList.push(
        { "text": "text " + i, "handle": "card" + i, "type": filters[ i%2 + 1 ].filter }
    );

    //Create one
    if( i == 4 ) {
        i++;
        cardList.push(
            { "text": "text " + i, "handle": "card" + i, "type": "cardC" }
        );
    }

};


function filterCards(args) {
    var needle = args.filter || "All";
    var tempList = [];
    for(i in cardList) {
        if(cardList[i].type === needle || needle === "All") {
            tempList.push(cardList[i]);
        }
    }

    cards.replaceAll(tempList);
    //initCard.value = cards.getAt(0).handle;
}

filterCards({});

module.exports = {
    filters: filters,
    cards: cards,
    initCard: initCard,
    filterCards: filterCards
};
2

Hi there, and sorry for the late reply.

I’ve created a ticket for this. There are a couple workarounds you could try though.

  1. NavigateBack to start before filtering the list.
  2. Perform the filter using Observable.map as explained in this sample: https://github.com/fusetools/fuse-samples/tree/master/Samples/FilterOnObservableCondition

I hope that helps :slight_smile: