Time Off Widget

Il widget CardContent è progettato per mostrare contenuti in una card personalizzabile. Accetta come parametro un oggetto CardViewModel che consente di configurare diversi aspetti del layout, del contenuto e del comportamento della card.

Costruttore

Il costruttore di CardContent è definito come segue:

CardContent({
    required CardViewModel cardViewModel,
});

Parametri:

• cardViewModel: un’istanza di CardViewModel che specifica le configurazioni della card, tra cui il contenuto principale, l’intestazione, la sezione inferiore e l’overlay.

Questa tipologia è simile alla Card Extended, la differenza è nell’utilizzo in maniera diversa delle varie configurazioni disponibili.

Varianti di utilizzo

Variante 1

Questa variante serve per mostrare una card relativa ad una richiesta ferie.

CardContent(
        cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
              customWidget: Column(
            children: [
              buildHeaderWithAvatarAndText(
                colorScheme: colorScheme,
                title: IconTextViewModel(text: "Rosario Brischetto"),
                description: IconTextViewModel(text: "Mobile Developer"),
              ),
              Container(
                margin: const EdgeInsets.only(top: 10, right: 20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    buildLabel(colorScheme: colorScheme),
                    buildPairIconTextRowList(colorScheme: colorScheme, pairIconTextList: [
                      PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Tipo"), iconTextDescription: IconTextViewModel(text: "Ferie")),
                      PairIconTextViewModel(iconTextTitle: IconTextViewModel(text: "Durata"), iconTextDescription: IconTextViewModel(text: "2 giorni")),
                      PairIconTextViewModel(
                          iconTextTitle: IconTextViewModel(text: "Inizio"), iconTextDescription: IconTextViewModel(text: "12/09/2023\n09:00")),
                      PairIconTextViewModel(
                          iconTextTitle: IconTextViewModel(text: "Fine"), iconTextDescription: IconTextViewModel(text: "22/09/2023\n18:00"))
                    ]),
                  ],
                ),
              ),
            ],
          )),
          bottomConfig: CardBottomConfig(
              buttons: CardBottomButtons(buttons: [
            ButtonViewModel(label: 'Rifiuta', type: ButtonType.outlined, action: () {}),
            ButtonViewModel(label: 'Approva', type: ButtonType.standard, action: () {}),
            ButtonViewModel(label: 'Messaggio', type: ButtonType.outlined, action: () {})
          ])),
        ),
      )

Variante 2

Questa variante serve per mostrare una card che mostra una ferie.

CardContent(
      cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Padding(
              padding: const EdgeInsets.only(left: 10, right: 15, bottom: 3),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  buildOverlayItem(
                      colorScheme,
                      OverlayItemConfig(
                        isChecked: true,
                        orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                        overlayItemSize: OverlayItemSize.normal,
                        startDate: DateTime(2024, 2, 3),
                        endDate: DateTime(2024, 2, 5),
                      ))!,
                  buildPairIconTextRowList(
                    colorScheme: colorScheme,
                    pairIconTextList: [
                      PairIconTextViewModel(
                          iconTextTitle: IconTextViewModel(text: "Tipo", textTextStyle: demoColorScheme?.timeOffListCardDataTitleStyle),
                          iconTextDescription: IconTextViewModel(text: "Ferie", textTextStyle: demoColorScheme?.timeOffListCardDataContentStyle)),
                      PairIconTextViewModel(
                          iconTextTitle: IconTextViewModel(text: "Inizio", textTextStyle: demoColorScheme?.timeOffListCardDataTitleStyle),
                          iconTextDescription: IconTextViewModel(text: "12/09/2023\n09:00", textTextStyle: demoColorScheme?.timeOffListCardDataContentStyle)),
                      PairIconTextViewModel(
                          iconTextTitle: IconTextViewModel(text: "Fine", textTextStyle: demoColorScheme?.timeOffListCardDataTitleStyle),
                          iconTextDescription: IconTextViewModel(text: "22/09/2023\n18:00", textTextStyle: demoColorScheme?.timeOffListCardDataContentStyle))
                    ],
                  ),
                ],
              ),
            ),
          )),
    )

Variante 3

Questa variante serve per mostrare solo il widget con singola data.

CardContent(
      cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, bottom: 3),
              child: buildOverlayItem(
                  colorScheme,
                  OverlayItemConfig(
                    isChecked: true,
                    orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                    overlayItemSize: OverlayItemSize.normal,
                    startDate: DateTime(2024, 2, 5),
                    endDate: DateTime(2024, 2, 5),
                  ))!,
            ),
          )),
    )

Variante 4

Questa variante serve per mostrare solo il widget con due date.

CardContent(
      cardViewModel: CardViewModel(
          config: CardConfig(layoutBuilder: EvaCardExtendedLayoutBuilder(leftContentPadding: 0, rightContentPadding: 0), onTap: (CardViewModel item) {}),
          contentConfig: CardContentConfig(
            customWidget: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, bottom: 3),
              child: buildOverlayItem(
                  colorScheme,
                  OverlayItemConfig(
                    isChecked: true,
                    orientation: EvaCardOverlayItemContentDoubleOrientation.horizontal,
                    overlayItemSize: OverlayItemSize.normal,
                    startDate: DateTime(2024, 2, 3),
                    endDate: DateTime(2024, 2, 5),
                  ))!,
            ),
          )),
    )