text: (self.webpackChunk=self.webpackChunk||[]).push([[886],{4886:(t,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>r});const n={props:{item:{required:!0}}};var s=a(1900);const i={components:{ListCardContent:(0,s.Z)(n,(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("a",{staticClass:"block hover:bg-gray-50",attrs:{href:"#"}},[a("div",{staticClass:"px-4 py-4 sm:px-6"},[a("div",{staticClass:"flex items-center justify-between"},[a("p",{staticClass:"text-sm font-medium text-red-600 truncate"},[t._v("\n        "+t._s(t.item.name)+"\n      ")]),t._v(" "),a("div",{staticClass:"ml-2 flex-shrink-0 flex"},[a("p",{staticClass:"px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"},[t._v("\n          "+t._s(t.item.type)+"\n        ")])])]),t._v(" "),a("div",{staticClass:"mt-2 sm:flex sm:justify-between"},[a("div",{staticClass:"text-sm text-gray-500"},[t._v(t._s(t.item.email))]),t._v(" "),a("div",{staticClass:"mt-2 flex items-center text-sm text-gray-500 sm:mt-0"},[a("p",[t._v("\n          Leaving on\n          "),a("time",{attrs:{datetime:t.item.expiring}},[t._v(t._s(t.item.expiring))])])])])])])}),[],!1,null,null,null).exports},data:function(){return{filters:["type","job"],cardListExample:'<x-list-card :data="items">\n    <template slot="header">\n        <x-list-search\n            class="px-4 py-3 sm:px-6"\n            :value="query().search"\n            @submit="\n                $inertia.visit(\n                    $route($route().current(), {\n                        ...query(),\n                        search: $event,\n                        page: 1,\n                    }),\n              )\n            "\n        />\n    </template>\n    <template #default="{ item, index }">\n        // Card contents...\n    </template>\n    <template #footer>\n        <x-list-pagination\n            class="px-4 py-3 sm:px-6"\n            :data="items"\n            @change="$inertia.visit($event.url)"\n        />\n    </template>\n</x-list-card>',separateCardListExample:'<x-list-separate-card :data="items">\n    <template slot="header">\n        <x-list-search\n            :value="query().search"\n            @submit="\n                $inertia.visit(\n                    $route($route().current(), {\n                        ...query(),\n                        search: $event,\n                        page: 1,\n                    }),\n              )\n            "\n        />\n    </template>\n    <template #default="{ item, index }">\n        // Card contents...\n    </template>\n    <template #footer>\n        <x-list-pagination\n            :data="items"\n            @change="$inertia.visit($event.url)"\n        />\n    </template>\n</x-list-separate-card>',cardWithFilterExampleButton:'<x-button-form-md @click="$refs.filter.toggle()" no-ring>\n    <x-icon-filter\n        class="-ml-1.5 mr-1.5 text-gray-400"\n        size="w-5 h-5"\n    />\n    Filter\n</x-button-form-md>',cardWithFilterExample:'<x-list-filter\n    ref="filter"\n    :filters="filters"\n    @clear="\n        $inertia.visit(\n            $route($route().current(), {\n                ...$event,\n                page: 1,\n            }),\n        )\n    "\n    class="px-4 sm:px-6 border-t py-3">\n    <div class="grid md:grid-cols-3 gap-3 mb-3">\n        <div>\n            <x-input-label for="job">Job</x-input-label>\n            <div class="mt-1">\n                <x-input-select\n                  id="job"\n                  :value="query().job"\n                  :options="[\'Recruiter\', \'Child Care Worker\']"\n                  @input="\n                    $inertia.reload({\n                      data: {\n                        ...query(),\n                        job: $event,\n                      },\n                    })\n                  "\n                />\n            </div>\n        </div>\n    </div>\n</x-list-filter>'}}};const r=(0,s.Z)(i,(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"p-8"},[a("x-page-header",{attrs:{title:"Lists",breadcrumbs:[{title:"Home",href:"/"},{title:"Lists",href:"/lists"}]},on:{back:function(e){return t.$inertia.visit(e)},navigate:function(e){return t.$inertia.visit(e)}}}),t._v(" "),a("h2",{staticClass:"mt-8 font-semibold text-2xl"},[t._v("Card list")]),t._v(" "),a("x-list-card",{staticClass:"mt-4",attrs:{data:Object.values(t.$page.props.items.data)},scopedSlots:t._u([{key:"default",fn:function(t){var e=t.item;t.index;return[a("list-card-content",{attrs:{item:e}})]}},{key:"footer",fn:function(){return[a("x-list-pagination",{staticClass:"px-4 py-3 sm:px-6",attrs:{data:t.$page.props.items},on:{change:function(e){return t.$inertia.visit(e.url,{preserveScroll:!0})}}})]},proxy:!0}])},[a("template",{slot:"header"},[a("x-list-search",{staticClass:"px-4 py-3 sm:px-6",attrs:{value:t.query().search},on:{submit:function(e){return t.$inertia.reload({data:{search:e,page:1}})}}})],1)],2),t._v(" "),a("div",{staticClass:"mt-8 prose max-w-none"},[a("pre",[t._v(t._s(t.cardListExample))])]),t._v(" "),a("h2",{staticClass:"mt-8 font-semibold text-2xl"},[t._v("Separate card list")]),t._v(" "),a("x-list-separate-card",{staticClass:"mt-4",attrs:{data:Object.values(t.$page.props.items.data)},scopedSlots:t._u([{key:"default",fn:function(t){var e=t.item;t.index;return[a("list-card-content",{attrs:{item:e}})]}},{key:"footer",fn:function(){return[a("x-list-pagination",{attrs:{data:t.$page.props.items},on:{change:function(e){return t.$inertia.visit(e.url,{preserveScroll:!0})}}})]},proxy:!0}])},[a("template",{slot:"header"},[a("x-list-search",{attrs:{value:t.query().search},on:{submit:function(e){return t.$inertia.reload({data:{search:e,page:1}})}}})],1)],2),t._v(" "),a("div",{staticClass:"mt-8 prose max-w-none"},[a("pre",[t._v(t._s(t.separateCardListExample))])]),t._v(" "),a("h2",{staticClass:"mt-8 font-semibold text-2xl"},[t._v("Card list with filter")]),t._v(" "),a("x-list-card",{staticClass:"mt-4",attrs:{data:Object.values(t.$page.props.items.data)},scopedSlots:t._u([{key:"default",fn:function(t){var e=t.item;t.index;return[a("list-card-content",{attrs:{item:e}})]}},{key:"footer",fn:function(){return[a("x-list-pagination",{staticClass:"px-4 py-3 sm:px-6",attrs:{data:t.$page.props.items},on:{change:function(e){return t.$inertia.visit(e.url,{preserveScroll:!0})}}})]},proxy:!0}])},[a("template",{slot:"header"},[a("div",{staticClass:"flex items-center space-x-4 px-4 py-3 sm:px-6"},[a("x-list-search",{staticClass:"flex-1",attrs:{value:t.query().search},on:{submit:function(e){t.$inertia.visit(t.$route(t.$route().current(),Object.assign({},t.query(),{search:e,page:1})),{preserveScroll:!0})}}}),t._v(" "),a("x-button-form-md",{attrs:{"no-ring":""},on:{click:function(e){return t.$refs.filter.toggle()}}},[a("x-icon-filter",{staticClass:"-ml-1.5 mr-1.5 text-gray-400",attrs:{size:"w-5 h-5"}}),t._v("\n          Filter\n        ")],1)],1),t._v(" "),a("x-list-filter",{ref:"filter",staticClass:"px-4 sm:px-6 border-t py-3",attrs:{filters:t.filters},on:{clear:function(e){t.$inertia.visit(t.$route(t.$route().current(),Object.assign({},e,{page:1})),{preserveScroll:!0})}}},[a("div",{staticClass:"grid grid-cols-3 gap-3 mb-3"},[a("div",[a("x-input-label",{attrs:{for:"job"}},[t._v("Job")]),t._v(" "),a("div",{staticClass:"mt-1"},[a("x-input-select",{attrs:{id:"job",value:t.query().job,options:["Recruiter","Child Care Worker"]},on:{input:function(e){t.$inertia.reload({data:Object.assign({},t.query(),{job:e})})}}})],1)],1),t._v(" "),a("div",[a("x-input-label",{attrs:{for:"type"}},[t._v("Type")]),t._v(" "),a("div",{staticClass:"mt-1"},[a("x-input-select",{attrs:{id:"type",value:t.query().type,options:["Full-time","Part-time"]},on:{input:function(e){t.$inertia.reload({data:Object.assign({},t.query(),{type:e})})}}})],1)],1)])])],1)],2),t._v(" "),a("div",{staticClass:"mt-8 prose"},[a("p",[t._v("\n      You can add this button to the header of the card list to toggle the\n      filters.\n    ")]),t._v(" "),a("pre",[t._v(t._s(t.cardWithFilterExampleButton))]),t._v(" "),t._m(0),t._v(" "),a("pre",[t._v(t._s(t.cardWithFilterExample))])])],1)}),[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("p",[t._v("\n      Then also in the header section you include the\n      "),a("code",[t._v("x-list-filter")]),t._v("\n      component with inputs that will filter the selection.\n    ")])}],!1,null,null,null).exports}}]);