FE_CPONE/test/vuex/lama/fajri-ui/components/barComponent.js

var barComponent = {
    template: `<v-layout>
    <v-flex
        md6="md6"
        class="mr-2"
    >
        <v-card
            ref="form"
            flat="flat"
            light="light"
            color="amber lighten-2"
        >
            <v-card-text>
                <v-layout row="row">
                    <v-flex
                        d-flex="d-flex"
                        md12="md12"
                    >
                        <v-flex
                            md6="md6"
                            ma-2="ma-2"
                        >
                            <v-text-field
                                label="Nama Pasien"
                                outline="outline"
                            ></v-text-field>
                        </v-flex>

                        <v-flex
                            md3="md3"
                            ma-2="ma-2"
                        >
                            <v-text-field
                                label="DOB"
                                outline="outline"
                            ></v-text-field>
                        </v-flex>

                        <v-flex
                            md3="md3"
                            ma-2="ma-2"
                        >
                            <v-text-field
                                label="HP"
                                outline="outline"
                            ></v-text-field>
                        </v-flex>
                    </v-flex>
                </v-layout>

                <v-layout
                    fluid="fluid"
                    wrap="wrap"
                    row="row"
                >
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                            
                        </v-avatar>
                        Trevor Hansen (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Fajri hardhita M (M)
                    </v-chip>
                    <v-chip>
                    <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Jhonny Andrean (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Dave Emanuel (M)
                    </v-chip>
                    <v-chip>
                    <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Fian Taruna (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Andik Hermawan (M)
                    </v-chip>
                    <v-chip>
                    <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Sugeng (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Kerta Sanjaya (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Denis Anggara (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Mustafa (M)
                    </v-chip>
                    <v-chip>
                    <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Ribut Sentosa Tanuraga (M)
                    </v-chip>
                    <v-chip>
                        <v-avatar>
                            <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
                        </v-avatar>
                        Lilipan Anggara (M)
                    </v-chip>

                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>

    <v-flex
        md6="md6"
        class="mr-2"
    >
        <v-card
            ref="form"
            flat="flat"
            light="light"
            color="amber lighten-2"
        >
        <v-layout>
        <v-flex md5 align-self-center d-flex >
            
            <img
            style="text-align:center"
            class="white--text"
            height="192px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          ></img>
            
        </v-flex>
        <v-flex md7>
                <v-data-table
    :items="patient"
    class="elevation-1"
    hide-actions
    hide-headers
  >
    <template slot="items" slot-scope="props">
        <td>{{ props.item.label }}</td>
        <td align="right">{{ props.item.value }}</td>
    </template>
  </v-data-table>
    </v-flex>
    </v-layout>  
                <v-divider light="light"></v-divider>

                <v-layout
                    fluid="fluid"
                    wrap="wrap"
                    row="row"
                >
                    <v-flex md6 pa-2
                      
                    >
                        <v-text-field
                            label="DOKTER"
                            outline="outline"
                        ></v-text-field>
                        
                    </v-flex>
                    <v-flex pa-2 md6>
                        <v-select
                        v-model="select"
                        :items="items"
                        item-text="state"
                        item-value="abbr"

    
                        return-object
                        label="Alamat Dokter"
                        outline
                        ></v-select>
                  </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>
</v-layout>`,
    data: function() {
        return {
            patient: [
                { label: 'No Reg', value: 'ABT565651551' },
                { label: 'Nama', value: ' Lilipan Anggara' },
                { label: 'DOB', value: '22-01-1995' },
                { label: 'Alamat', value: 'Desa Kauman Tegal' },
            ],
            select: { state: 'Georgia', abbr: 'GA' },
            items: [
                { state: 'Florida', abbr: 'FL' },
                { state: 'Georgia', abbr: 'GA' },
                { state: 'Nebraska', abbr: 'NE' },
                { state: 'California', abbr: 'CA' },
                { state: 'New York', abbr: 'NY' }
            ]
        };
    },
    methods: {}
};

export {
    barComponent

};