簡単なステップは、BlazorスケジューラでJIRAのカレンダータスクを同期させる

28399 ワード
webdev csharp blazor dotnet テキストリンク
動的タスクは、次のときに不可欠ですScrum 製品開発における枠組みチームの異なるメンバーに割り当てられた複数のタスクの異なる状態を適切に管理することは悪夢かもしれません.効果的にこれらのタスクを処理するには、効果的にそれらを管理するための多彩なツールが必要です.
核融合Blazor Scheduler component ユーザーが効率的に自分の時間とプロジェクトを管理するのに役立ちます完全に注目されるイベントカレンダーです.これは、簡単なリソースのスケジューリングとイベントやタスクの予定表のポップアップ、ドラッグアンドドロップ操作、およびリサイズのアクションを再スケジュールを容易にします.
このブログ記事では、同期の仕方を簡単に説明しますJira 効果的なタスク管理のためのSyncFusionのBlazorスケジューラコンポーネントでカレンダータスクとカスタマイズ.
始めましょう!

プロジェクト設定


まず最初に、単純なBlazorサーバー側のスケジューラアプリケーションを作成します.参照Getting Started with Blazor Scheduler Component 共通仕様を設定するためのマニュアル.

SyncFusion Blatherスケジューラコンポーネントを初期化します


次に、SyncFusion Blather or Schedulerコンポーネントをインデックスに追加します.Razorページを指定し、TValtentModelとしてTValueプロパティの値を設定します.次に、スケジューラコンポーネントのTaskモデルクラスを定義します.
次のコード例を参照してください.
<SfSchedule TValue="AppointmentModel">
</SfSchedule>
public class AppointmentModel
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
        public string CssClass { get; set; }
    }

JIRA APIトークンの生成


JIRA APIトークンを生成します.参照manage API tokens for your Atlassian account documentation アトラシアンアカウントからトークンを生成します.

JIRAからタスクを取得する


次に、次のコードで説明したように、HTTP要求を作成し、残りのAPIからJIRAタスクを読み取ります.
 HttpClient client = new HttpClient();
 var byteArray = new UTF8Encoding().GetBytes("mail:token");
 client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
 var request = new HttpRequestMessage(HttpMethod.Get, "Rest API Url");
 var response = await client.SendAsync(request);

ブレラスケジューラでJIRAのカレンダータスクの同期


次に、HTTPレスポンスを逆シリアル化し、予約データを作成します.そして、結果の値をBlazorスケジューラのDataSourceプロパティに割り当てます.
次のコード例を参照してください.
<SfSchedule TValue="AppointmentModel">
        <ScheduleEventSettings DataSource="@DataSource">
    </ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
</SfSchedule>   

 protected override async Task OnInitializedAsync()
    {
        HttpClient client = new HttpClient();
        var byteArray = new UTF8Encoding().GetBytes("mail:token");
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
        var request = new HttpRequestMessage(HttpMethod.Get, "Rest api url");
        var response = await client.SendAsync(request);
        if (response.IsSuccessStatusCode && DataSource == null)
        {
            var responseStream = await response.Content.ReadAsStringAsync();
            var data = JsonConvert.DeserializeObject<JIRA>(responseStream);
            List<AppointmentModel> events = new List<AppointmentModel>();
            foreach (var issue in data.Issues)
            {
                events.Add(new AppointmentModel()
                {
                    Id = issue.Id,
                    Subject = issue.Fields.Summary,
                    Description = issue.Fields.Description,
                    StartTime = issue.Fields.Created,
                    EndTime = issue.Fields.Created.AddHours(1),
                    IsAllDay = true,
                    CssClass = GetCssClass(issue.Fields.Priority.Name)
                });
            }
            DataSource = events;
        }
        else
        {
            getTasksError = true;
        }
    }

カスタマイズ予約ヘッダー


SchemeTemplateでCellHeaderTemplateオプションを使用してセルのヘッダーをカスタマイズできます.
各セルのヘッダーの特定の日付に作成された問題の総数を表示するには、次のコード例を参照してください.
<<SfSchedule TValue="AppointmentModel">>
        <<ScheduleEventSettings DataSource="@DataSource">>
    <</ScheduleEventSettings>>
    <<ScheduleViews>>
        <<ScheduleView Option="View.Month">><</ScheduleView>>
    <</ScheduleViews>>
    <<ScheduleTemplates>>
        <<CellHeaderTemplate>>
            @context.Date.Day
            @{
                var count = GetIssueCount(@context.Date);
                if (count >> 0)
                {
                    <<span>> Issues: @GetIssueCount(@context.Date)<</span>>
                }
            }
        <</CellHeaderTemplate>>
    <</ScheduleTemplates>>
<</SfSchedule>>

カスタマイズ予定出現


また、タスクの優先順位に基づいて予定にカスタム色を適用することができます.そのためには、特定の予定に適用されるクラス名を渡すことができる組み込みフィールドcssclassを使用します.
@code {
public string GetCssClass(string priority)
    {
        string css;
        if (priority == "Release-Breaker")
        {
            css = "release-breaker";
        }
        else if (priority == "Normal")
        {
            css = "normal";
        }
        else if (priority == "High")
        {
            css = "high";
        }
        else if (priority == "Critical")
        {
            css = "critical";
        }
        else if (priority == "Ultra Critical")
        {
            css = "ultra-crtical";
        }
        else
        {
            css = "low";
        }
        return css;
    }
}

<style>
    .e-schedule .e-month-view .low {
        background: #99ccff;
    }

    .e-schedule .e-month-view .normal {
        background: #66cc66;
    }

    .e-schedule .e-month-view .high {
        background: #006633;
    }

    .e-schedule .e-month-view .critical {
        background: #ff0000;
    }

    .e-schedule .e-month-view .ultra-critical {
        background: #990000;
    }

    .e-schedule .e-month-view .release-breaker {
        background: #000000;
    }
</style>
カスタムの色を予定に適用する
注意:詳細についてはappointment customization in Blazor Scheduler documentation .

カスタマイズツールのヒント


ToolTipTemplateオプションを使用して、TestEventSettings内のツールヒントに必要なタスクの情報を表示することもできます.
次のコード例を参照してください.
<SfSchedule TValue="AppointmentModel">
        <ScheduleEventSettings DataSource="@DataSource" EnableTooltip="true">
            <TooltipTemplate>
                @{
                var data = (context as AppointmentModel);
                <p>@data.Subject</p>
                <p>@data.Description</p>
            }
        </TooltipTemplate>
    </ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
</SfSchedule>
カスタムツールのヒント
注意:ドキュメントの参照customizing event tooltips in a Blazor Scheduler using a template .

リソース


詳細については、完全な作業例をsynchronize Jira calendar tasks with the Blazor Scheduler .

概要


読書ありがとう!このブログでは、JIRAのカレンダータスクを同期させる方法と、ヘッダー、任命色、およびツールヒントを同期する方法を詳細に説明しましたBlazor Scheduler コンポーネント.だから、手順を試してみて、面倒な無料プロジェクトとリソース管理をお楽しみください.
当社のSyncFusionスケジューラのコントロールも利用可能ですXamarin , UWP , WinForms , WinUI , WPF , Blazor , ASP .正味のCore , MVC , and Web Forms ), JavaScript , Angular , React , and Vue のりば
現在の顧客については、新しいバージョンからダウンロード可能ですLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、30-day free trial これらの機能をチェックアウトします.
また、私たちを通して私たちに到達することができますsupport forums , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!

関連ブログ





    • ASP.NET MVC 5が他のアクションを呼び出す
    No IsPostBack, using the AcceptVerbsAttribute